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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-picker",
-  "version": "24.0.0-alpha9",
+  "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-alpha9",
-    "@vaadin/component-base": "24.0.0-alpha9",
-    "@vaadin/field-base": "24.0.0-alpha9",
-    "@vaadin/input-container": "24.0.0-alpha9",
-    "@vaadin/overlay": "24.0.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha9"
+    "@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": "cc3f747164041566b300bde4b105d2475649e93f"
+  "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.js

@@ -344,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,
@@ -355,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) {
@@ -376,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;
+      }
     }
 
     /**

package/src/vaadin-infinite-scroller.js

@@ -118,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();
@@ -236,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;

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-alpha9",
+  "version": "24.0.0-alpha12",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -334,7 +334,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.0.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.0.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.0.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.0.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/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",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-picker",
-  "version": "24.0.0-alpha9",
+  "version": "24.0.0-alpha12",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -156,7 +156,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.0.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.0.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.0.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.0.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/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": [
             {