@vaadin/date-picker 24.0.0-alpha8 → 24.0.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-picker",
-  "version": "24.0.0-alpha8",
+  "version": "24.0.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -36,23 +36,23 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/button": "24.0.0-alpha8",
-    "@vaadin/component-base": "24.0.0-alpha8",
-    "@vaadin/field-base": "24.0.0-alpha8",
-    "@vaadin/input-container": "24.0.0-alpha8",
-    "@vaadin/overlay": "24.0.0-alpha8",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha8",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha8"
+    "@vaadin/button": "24.0.0-beta1",
+    "@vaadin/component-base": "24.0.0-beta1",
+    "@vaadin/field-base": "24.0.0-beta1",
+    "@vaadin/input-container": "24.0.0-beta1",
+    "@vaadin/overlay": "24.0.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-beta1",
+    "@vaadin/vaadin-material-styles": "24.0.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-beta1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.3.2",
+    "@vaadin/testing-helpers": "^0.4.0",
     "sinon": "^13.0.2"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "476752249bb12295c500980d98a3256ad3b22b73"
+  "gitHead": "c5b48921a62482746df8e46994b37e1490fec27e"
 }

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

@@ -1,5 +1,3 @@
-export { getISOWeekNumber };
-
 /**
  * Get ISO 8601 week number for the given date.
  *
@@ -7,8 +5,6 @@ export { getISOWeekNumber };
  */
 declare function getISOWeekNumber(Date: Date): number;
 
-export { dateEquals };
-
 /**
  * Check if two dates are equal.
  *
@@ -16,8 +12,6 @@ export { dateEquals };
  */
 declare function dateEquals(date1: Date | null, date2: Date | null): boolean;
 
-export { dateAllowed };
-
 /**
  * Check if the given date is in the range of allowed dates.
  *
@@ -25,8 +19,6 @@ export { dateAllowed };
  */
 declare function dateAllowed(date: Date, min: Date | null, max: Date | null): boolean;
 
-export { getClosestDate };
-
 /**
  * Get closest date from array of dates.
  *
@@ -34,8 +26,6 @@ export { getClosestDate };
  */
 declare function getClosestDate(date: Date, dates: Date[]): Date;
 
-export { extractDateParts };
-
 /**
  * Extracts the basic component parts of a date (day, month and year)
  * to the expected format.
@@ -47,16 +37,12 @@ declare function extractDateParts(date: Date): { day: number; month: number; yea
  */
 declare function dateAfterXMonths(months: number): number;
 
-export { dateAfterXMonths };
-
 /**
  * Calculate the year of the date based on the provided reference date
  * Gets a two-digit year and returns a full year.
  */
 declare function getAdjustedYear(referenceDate: Date, year: number, month?: number, day?: number): Date;
 
-export { getAdjustedYear };
-
 /**
  * Parse date string of one of the following date formats:
  * - ISO 8601 `"YYYY-MM-DD"`
@@ -64,4 +50,13 @@ export { getAdjustedYear };
  */
 declare function parseDate(str: string): Date;
 
-export { parseDate };
+export {
+  getISOWeekNumber,
+  dateEquals,
+  dateAllowed,
+  getClosestDate,
+  extractDateParts,
+  dateAfterXMonths,
+  getAdjustedYear,
+  parseDate,
+};

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

@@ -96,14 +96,6 @@ class DatePickerLight extends ThemableMixin(DatePickerMixin(ValidateMixin(Polyme
     };
   }
 
-  /** @protected */
-  connectedCallback() {
-    super.connectedCallback();
-    const cssSelector = 'vaadin-text-field,.input';
-    this._setInputElement(this.querySelector(cssSelector));
-    this._setFocusElement(this.inputElement);
-  }
-
   /** @return {string | undefined} */
   get _inputValue() {
     return this.inputElement && this.inputElement[dashToCamelCase(this.attrForValue)];
@@ -115,6 +107,14 @@ class DatePickerLight extends ThemableMixin(DatePickerMixin(ValidateMixin(Polyme
     }
   }
 
+  /** @protected */
+  connectedCallback() {
+    super.connectedCallback();
+    const cssSelector = 'vaadin-text-field,.input';
+    this._setInputElement(this.querySelector(cssSelector));
+    this._setFocusElement(this.inputElement);
+  }
+
   // Workaround https://github.com/vaadin/web-components/issues/2855
   /** @protected */
   _openedChanged(opened) {

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

@@ -8,6 +8,7 @@ import type { DelegateFocusMixinClass } from '@vaadin/component-base/src/delegat
 import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
 import type { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
 import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-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';
 
@@ -93,6 +94,7 @@ export declare function DatePickerMixin<T extends Constructor<HTMLElement>>(
   Constructor<InputConstraintsMixinClass> &
   Constructor<InputMixinClass> &
   Constructor<KeyboardMixinClass> &
+  Constructor<OverlayClassMixinClass> &
   T;
 
 export declare class DatePickerMixinClass {

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

@@ -8,6 +8,7 @@ import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js'
 import { DelegateFocusMixin } from '@vaadin/component-base/src/delegate-focus-mixin.js';
 import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-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 {
@@ -21,11 +22,16 @@ import {
 
 /**
  * @polymerMixin
+ * @mixes ControllerMixin
+ * @mixes DelegateFocusMixin
+ * @mixes InputConstraintsMixin
+ * @mixes KeyboardMixin
+ * @mixes OverlayClassMixin
  * @param {function(new:HTMLElement)} subclass
  */
 export const DatePickerMixin = (subclass) =>
-  class VaadinDatePickerMixin extends ControllerMixin(
-    DelegateFocusMixin(InputConstraintsMixin(KeyboardMixin(subclass))),
+  class DatePickerMixinClass extends OverlayClassMixin(
+    ControllerMixin(DelegateFocusMixin(InputConstraintsMixin(KeyboardMixin(subclass)))),
   ) {
     static get properties() {
       return {
@@ -338,6 +344,14 @@ export const DatePickerMixin = (subclass) =>
       return [...super.constraints, 'min', 'max'];
     }
 
+    constructor() {
+      super();
+
+      this._boundOnClick = this._onClick.bind(this);
+      this._boundOnScroll = this._onScroll.bind(this);
+      this._boundOverlayRenderer = this._overlayRenderer.bind(this);
+    }
+
     /**
      * Override a getter from `InputControlMixin` to make it optional
      * and to prevent warning when a clear button is missing,
@@ -349,18 +363,6 @@ export const DatePickerMixin = (subclass) =>
       return null;
     }
 
-    /** @protected */
-    get _inputValue() {
-      return this.inputElement ? this.inputElement.value : undefined;
-    }
-
-    /** @protected */
-    set _inputValue(value) {
-      if (this.inputElement) {
-        this.inputElement.value = value;
-      }
-    }
-
     /** @private */
     get _nativeInput() {
       if (this.inputElement) {
@@ -370,12 +372,16 @@ export const DatePickerMixin = (subclass) =>
       return null;
     }
 
-    constructor() {
-      super();
+    /** @protected */
+    get _inputValue() {
+      return this.inputElement ? this.inputElement.value : undefined;
+    }
 
-      this._boundOnClick = this._onClick.bind(this);
-      this._boundOnScroll = this._onScroll.bind(this);
-      this._boundOverlayRenderer = this._overlayRenderer.bind(this);
+    /** @protected */
+    set _inputValue(value) {
+      if (this.inputElement) {
+        this.inputElement.value = value;
+      }
     }
 
     /**
@@ -424,7 +430,10 @@ export const DatePickerMixin = (subclass) =>
 
       this.addController(new VirtualKeyboardController(this));
 
-      this.$.overlay.renderer = this._boundOverlayRenderer;
+      const overlay = this.$.overlay;
+      this._overlayElement = overlay;
+
+      overlay.renderer = this._boundOverlayRenderer;
 
       this.addEventListener('mousedown', () => this.__bringToFront());
       this.addEventListener('touchstart', () => this.__bringToFront());

package/src/vaadin-infinite-scroller.js

@@ -8,6 +8,7 @@ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { isFirefox } from '@vaadin/component-base/src/browser-utils.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
 
 /**
  * @extends HTMLElement
@@ -117,6 +118,71 @@ export class InfiniteScroller extends PolymerElement {
     };
   }
 
+  /**
+   * @return {number}
+   */
+  get bufferOffset() {
+    return this._buffers[0].offsetTop;
+  }
+
+  /**
+   * @return {number}
+   */
+  get itemHeight() {
+    if (!this._itemHeightVal) {
+      const itemHeight = getComputedStyle(this).getPropertyValue('--vaadin-infinite-scroller-item-height');
+      // Use background-position temp inline style for unit conversion
+      const tmpStyleProp = 'background-position';
+      this.$.fullHeight.style.setProperty(tmpStyleProp, itemHeight);
+      const itemHeightPx = getComputedStyle(this.$.fullHeight).getPropertyValue(tmpStyleProp);
+      this.$.fullHeight.style.removeProperty(tmpStyleProp);
+      this._itemHeightVal = parseFloat(itemHeightPx);
+    }
+
+    return this._itemHeightVal;
+  }
+
+  /** @private */
+  get _bufferHeight() {
+    return this.itemHeight * this.bufferSize;
+  }
+
+  /**
+   * @return {number}
+   */
+  get position() {
+    return (this.$.scroller.scrollTop - this._buffers[0].translateY) / this.itemHeight + this._firstIndex;
+  }
+
+  /**
+   * Current scroller position as index. Can be a fractional number.
+   *
+   * @type {number}
+   */
+  set position(index) {
+    this._preventScrollEvent = true;
+    if (index > this._firstIndex && index < this._firstIndex + this.bufferSize * 2) {
+      this.$.scroller.scrollTop = this.itemHeight * (index - this._firstIndex) + this._buffers[0].translateY;
+    } else {
+      this._initialIndex = ~~index;
+      this._reset();
+      this._scrollDisabled = true;
+      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 */
   ready() {
     super.ready();
@@ -235,71 +301,6 @@ export class InfiniteScroller extends PolymerElement {
     });
   }
 
-  /**
-   * @return {number}
-   */
-  get bufferOffset() {
-    return this._buffers[0].offsetTop;
-  }
-
-  /**
-   * @return {number}
-   */
-  get position() {
-    return (this.$.scroller.scrollTop - this._buffers[0].translateY) / this.itemHeight + this._firstIndex;
-  }
-
-  /**
-   * Current scroller position as index. Can be a fractional number.
-   *
-   * @type {number}
-   */
-  set position(index) {
-    this._preventScrollEvent = true;
-    if (index > this._firstIndex && index < this._firstIndex + this.bufferSize * 2) {
-      this.$.scroller.scrollTop = this.itemHeight * (index - this._firstIndex) + this._buffers[0].translateY;
-    } else {
-      this._initialIndex = ~~index;
-      this._reset();
-      this._scrollDisabled = true;
-      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);
-    }
-  }
-
-  /**
-   * @return {number}
-   */
-  get itemHeight() {
-    if (!this._itemHeightVal) {
-      const itemHeight = getComputedStyle(this).getPropertyValue('--vaadin-infinite-scroller-item-height');
-      // Use background-position temp inline style for unit conversion
-      const tmpStyleProp = 'background-position';
-      this.$.fullHeight.style.setProperty(tmpStyleProp, itemHeight);
-      const itemHeightPx = getComputedStyle(this.$.fullHeight).getPropertyValue(tmpStyleProp);
-      this.$.fullHeight.style.removeProperty(tmpStyleProp);
-      this._itemHeightVal = parseFloat(itemHeightPx);
-    }
-
-    return this._itemHeightVal;
-  }
-
-  /** @private */
-  get _bufferHeight() {
-    return this.itemHeight * this.bufferSize;
-  }
-
   /** @private */
   _reset() {
     this._scrollDisabled = true;
@@ -329,8 +330,7 @@ export class InfiniteScroller extends PolymerElement {
         itemWrapper.style.height = `${this.itemHeight}px`;
         itemWrapper.instance = {};
 
-        const contentId = (InfiniteScroller._contentIndex = InfiniteScroller._contentIndex + 1 || 0);
-        const slotName = `vaadin-infinite-scroller-item-content-${contentId}`;
+        const slotName = `vaadin-infinite-scroller-item-content-${generateUniqueId()}`;
 
         const slot = document.createElement('slot');
         slot.setAttribute('name', slotName);

package/src/vaadin-month-calendar.js

@@ -205,18 +205,18 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
     ];
   }
 
-  /** @protected */
-  ready() {
-    super.ready();
-    addListener(this.$.monthGrid, 'tap', this._handleTap.bind(this));
-  }
-
   get focusableDateElement() {
     return [...this.shadowRoot.querySelectorAll('[part~=date]')].find((datePart) => {
       return dateEquals(datePart.date, this.focusedDate);
     });
   }
 
+  /** @protected */
+  ready() {
+    super.ready();
+    addListener(this.$.monthGrid, 'tap', this._handleTap.bind(this));
+  }
+
   /* Returns true if all the dates in the month are out of the allowed range */
   _isDisabled(month, minDate, maxDate) {
     // First day of the month

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

@@ -25,7 +25,7 @@ registerStyles(
 
     [part='year-separator']::after {
       color: var(--lumo-disabled-text-color);
-      content: '•';
+      content: '\\2022';
     }
   `,
   { moduleId: 'lumo-date-picker-year' },

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-picker",
-  "version": "24.0.0-alpha8",
+  "version": "24.0.0-alpha12",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -10,6 +10,28 @@
           "name": "vaadin-date-picker-light",
           "description": "`<vaadin-date-picker-light>` is a customizable version of the `<vaadin-date-picker>` providing\nonly the scrollable month calendar view and leaving the input field definition to the user.\n\nTo create a custom input field, you need to add a child element which has a two-way\ndata-bindable property representing the input value. The property name is expected\nto be `bindValue` by default. See the example below for a simplest possible example\nusing an `<input>` element.\n\n```html\n<vaadin-date-picker-light attr-for-value=\"value\">\n  <input class=\"input\">\n</vaadin-date-picker-light>\n```\n\n### Styling\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\nIn addition to `<vaadin-date-picker-light>` itself, the following\ninternal components are themable:\n\n- `<vaadin-date-picker-overlay>`\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-month-calendar>`\n\nNote: the `theme` attribute value set on `<vaadin-date-picker-light>`\nis propagated to the internal themable components listed above.",
           "attributes": [
+            {
+              "name": "disabled",
+              "description": "If true, the user cannot interact with this element.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "autofocus",
+              "description": "Specify that this control should have input focus when the page loads.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "value",
               "description": "Selected date.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
@@ -19,6 +41,39 @@
                 ]
               }
             },
+            {
+              "name": "invalid",
+              "description": "Set to true when the field is invalid.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "required",
+              "description": "Specifies that the user must fill in a value.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "overlay-class",
+              "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "initial-position",
               "description": "Date which should be visible when there is no value selected.\n\nThe same date formats as for the `value` property are supported.",
@@ -106,6 +161,28 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "disabled",
+                "description": "If true, the user cannot interact with this element.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "autofocus",
+                "description": "Specify that this control should have input focus when the page loads.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
               {
                 "name": "value",
                 "description": "Selected date.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
@@ -115,6 +192,39 @@
                   ]
                 }
               },
+              {
+                "name": "invalid",
+                "description": "Set to true when the field is invalid.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "required",
+                "description": "Specifies that the user must fill in a value.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "overlayClass",
+                "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
               {
                 "name": "initialPosition",
                 "description": "Date which should be visible when there is no value selected.\n\nThe same date formats as for the `value` property are supported.",
@@ -199,6 +309,10 @@
               }
             ],
             "events": [
+              {
+                "name": "validated",
+                "description": "Fired whenever the field is validated."
+              },
               {
                 "name": "change",
                 "description": "Fired when the user commits a value change."
@@ -210,13 +324,17 @@
               {
                 "name": "value-changed",
                 "description": "Fired when `value` property value changes."
+              },
+              {
+                "name": "invalid-changed",
+                "description": "Fired when the `invalid` property changes."
               }
             ]
           }
         },
         {
           "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.0.0-alpha8/#/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.0.0-alpha8/#/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.0.0-alpha8/#/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.0.0-alpha8/#/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/custom-theme/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.0.0-alpha12/#/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.0.0-alpha12/#/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.0.0-alpha12/#/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.0.0-alpha12/#/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/custom-theme/styling-components) documentation.",
           "attributes": [
             {
               "name": "disabled",
@@ -381,6 +499,17 @@
                 ]
               }
             },
+            {
+              "name": "overlay-class",
+              "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "initial-position",
               "description": "Date which should be visible when there is no value selected.\n\nThe same date formats as for the `value` property are supported.",
@@ -622,6 +751,17 @@
                   ]
                 }
               },
+              {
+                "name": "overlayClass",
+                "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
               {
                 "name": "initialPosition",
                 "description": "Date which should be visible when there is no value selected.\n\nThe same date formats as for the `value` property are supported.",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-picker",
-  "version": "24.0.0-alpha8",
+  "version": "24.0.0-alpha12",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -19,6 +19,34 @@
           "description": "`<vaadin-date-picker-light>` is a customizable version of the `<vaadin-date-picker>` providing\nonly the scrollable month calendar view and leaving the input field definition to the user.\n\nTo create a custom input field, you need to add a child element which has a two-way\ndata-bindable property representing the input value. The property name is expected\nto be `bindValue` by default. See the example below for a simplest possible example\nusing an `<input>` element.\n\n```html\n<vaadin-date-picker-light attr-for-value=\"value\">\n  <input class=\"input\">\n</vaadin-date-picker-light>\n```\n\n### Styling\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\nIn addition to `<vaadin-date-picker-light>` itself, the following\ninternal components are themable:\n\n- `<vaadin-date-picker-overlay>`\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-month-calendar>`\n\nNote: the `theme` attribute value set on `<vaadin-date-picker-light>`\nis propagated to the internal themable components listed above.",
           "extension": true,
           "attributes": [
+            {
+              "name": "?disabled",
+              "description": "If true, the user cannot interact with this element.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "?autofocus",
+              "description": "Specify that this control should have input focus when the page loads.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "?invalid",
+              "description": "Set to true when the field is invalid.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "?required",
+              "description": "Specifies that the user must fill in a value.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "?opened",
               "description": "Set true to open the date selector overlay.",
@@ -47,6 +75,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".overlayClass",
+              "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".initialPosition",
               "description": "Date which should be visible when there is no value selected.\n\nThe same date formats as for the `value` property are supported.",
@@ -82,6 +117,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "@validated",
+              "description": "Fired whenever the field is validated.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "@change",
               "description": "Fired when the user commits a value change.",
@@ -102,12 +144,19 @@
               "value": {
                 "kind": "expression"
               }
+            },
+            {
+              "name": "@invalid-changed",
+              "description": "Fired when the `invalid` property changes.",
+              "value": {
+                "kind": "expression"
+              }
             }
           ]
         },
         {
           "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.0.0-alpha8/#/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.0.0-alpha8/#/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.0.0-alpha8/#/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.0.0-alpha8/#/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/custom-theme/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.0.0-alpha12/#/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.0.0-alpha12/#/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.0.0-alpha12/#/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.0.0-alpha12/#/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/custom-theme/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -236,6 +285,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".overlayClass",
+              "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".initialPosition",
               "description": "Date which should be visible when there is no value selected.\n\nThe same date formats as for the `value` property are supported.",