@vaadin/date-picker 24.6.0-beta1 → 24.7.0-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-picker",
-  "version": "24.6.0-beta1",
+  "version": "24.7.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -36,19 +36,19 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/a11y-base": "24.6.0-beta1",
-    "@vaadin/button": "24.6.0-beta1",
-    "@vaadin/component-base": "24.6.0-beta1",
-    "@vaadin/field-base": "24.6.0-beta1",
-    "@vaadin/input-container": "24.6.0-beta1",
-    "@vaadin/overlay": "24.6.0-beta1",
-    "@vaadin/vaadin-lumo-styles": "24.6.0-beta1",
-    "@vaadin/vaadin-material-styles": "24.6.0-beta1",
-    "@vaadin/vaadin-themable-mixin": "24.6.0-beta1",
+    "@vaadin/a11y-base": "24.7.0-alpha1",
+    "@vaadin/button": "24.7.0-alpha1",
+    "@vaadin/component-base": "24.7.0-alpha1",
+    "@vaadin/field-base": "24.7.0-alpha1",
+    "@vaadin/input-container": "24.7.0-alpha1",
+    "@vaadin/overlay": "24.7.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha1",
+    "@vaadin/vaadin-material-styles": "24.7.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.6.0-beta1",
+    "@vaadin/chai-plugins": "24.7.0-alpha1",
     "@vaadin/testing-helpers": "^1.0.0",
     "sinon": "^18.0.0"
   },
@@ -56,5 +56,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "ab28efb0dcf2cd1ef72100e2e8f32232fa49aacc"
+  "gitHead": "04be941c9a7b659871c97f31b9cc3ffd7528087b"
 }

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

@@ -152,7 +152,10 @@ export const DatePickerMixin = (subclass) =>
          * Set true to prevent the overlay from opening automatically.
          * @attr {boolean} auto-open-disabled
          */
-        autoOpenDisabled: Boolean,
+        autoOpenDisabled: {
+          type: Boolean,
+          sync: true,
+        },
 
         /**
          * Set true to display ISO-8601 week numbers in the calendar. Notice that
@@ -181,7 +184,7 @@ export const DatePickerMixin = (subclass) =>
          * @protected
          */
         _fullscreenMediaQuery: {
-          value: '(max-width: 420px), (max-height: 420px)',
+          value: '(max-width: 450px), (max-height: 450px)',
         },
 
         /**
@@ -358,18 +361,10 @@ export const DatePickerMixin = (subclass) =>
           sync: true,
         },
 
-        /**
-         * In date-picker, unlike other components extending `InputMixin`,
-         * the property indicates true only if the input has been entered by the user.
-         * In the case of programmatic changes, the property is reset to false.
-         * Read more about why this workaround is needed:
-         * https://github.com/vaadin/web-components/issues/5639
-         *
-         * @protected
-         * @override
-         */
-        _hasInputValue: {
-          type: Boolean,
+        /** @private */
+        __enteredDate: {
+          type: Date,
+          sync: true,
         },
       };
     }
@@ -378,7 +373,7 @@ export const DatePickerMixin = (subclass) =>
       return [
         '_selectedDateChanged(_selectedDate, i18n)',
         '_focusedDateChanged(_focusedDate, i18n)',
-        '__updateOverlayContent(_overlayContent, i18n, label, _minDate, _maxDate, _focusedDate, _selectedDate, showWeekNumbers, isDateDisabled)',
+        '__updateOverlayContent(_overlayContent, i18n, label, _minDate, _maxDate, _focusedDate, _selectedDate, showWeekNumbers, isDateDisabled, __enteredDate)',
         '__updateOverlayContentTheme(_overlayContent, _theme)',
         '__updateOverlayContentFullScreen(_overlayContent, _fullscreen)',
       ];
@@ -396,28 +391,17 @@ export const DatePickerMixin = (subclass) =>
       this._boundOverlayRenderer = this._overlayRenderer.bind(this);
     }
 
-    /**
-     * @override
-     * @protected
-     */
+    /** @override */
     get _inputElementValue() {
       return super._inputElementValue;
     }
 
-    /**
-     * The setter is overridden to reset the `_hasInputValue` property
-     * to false when the input element's value is updated programmatically.
-     * In date-picker, `_hasInputValue` is supposed to indicate true only
-     * if the input has been entered by the user.
-     * Read more about why this workaround is needed:
-     * https://github.com/vaadin/web-components/issues/5639
-     *
-     * @override
-     * @protected
-     */
+    /** @override */
     set _inputElementValue(value) {
       super._inputElementValue = value;
-      this._hasInputValue = false;
+
+      const parsedDate = this.__parseDate(value);
+      this.__setEnteredDate(parsedDate);
     }
 
     /**
@@ -871,6 +855,7 @@ export const DatePickerMixin = (subclass) =>
       selectedDate,
       showWeekNumbers,
       isDateDisabled,
+      enteredDate,
     ) {
       if (overlayContent) {
         overlayContent.i18n = i18n;
@@ -881,6 +866,7 @@ export const DatePickerMixin = (subclass) =>
         overlayContent.selectedDate = selectedDate;
         overlayContent.showWeekNumbers = showWeekNumbers;
         overlayContent.isDateDisabled = isDateDisabled;
+        overlayContent.enteredDate = enteredDate;
       }
     }
 
@@ -1204,15 +1190,32 @@ export const DatePickerMixin = (subclass) =>
         this.open();
       }
 
-      if (this._inputElementValue) {
-        const parsedDate = this.__parseDate(this._inputElementValue);
-        if (parsedDate) {
-          this._ignoreFocusedDateChange = true;
-          if (!dateEquals(parsedDate, this._focusedDate)) {
-            this._focusedDate = parsedDate;
-          }
-          this._ignoreFocusedDateChange = false;
+      const parsedDate = this.__parseDate(this._inputElementValue || '');
+      if (parsedDate) {
+        this._ignoreFocusedDateChange = true;
+        if (!dateEquals(parsedDate, this._focusedDate)) {
+          this._focusedDate = parsedDate;
+        }
+        this._ignoreFocusedDateChange = false;
+      }
+
+      this.__setEnteredDate(parsedDate);
+    }
+
+    /**
+     * @param {Date} date
+     * @private
+     */
+    __setEnteredDate(date) {
+      if (date) {
+        if (!dateEquals(this.__enteredDate, date)) {
+          this.__enteredDate = date;
         }
+      } else if (this.__enteredDate != null) {
+        // Do not override initial undefined value with null
+        // to avoid triggering a Lit update that can cause
+        // other scheduled properties to flush too early.
+        this.__enteredDate = null;
       }
     }
 

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

@@ -57,6 +57,7 @@ export const DatePickerOverlayContentMixin = (superClass) =>
         initialPosition: {
           type: Object,
           observer: '_initialPositionChanged',
+          sync: true,
         },
 
         _originDate: {
@@ -124,6 +125,11 @@ export const DatePickerOverlayContentMixin = (superClass) =>
           type: Function,
         },
 
+        enteredDate: {
+          type: Date,
+          sync: true,
+        },
+
         /**
          * Input label
          */
@@ -151,7 +157,7 @@ export const DatePickerOverlayContentMixin = (superClass) =>
 
     static get observers() {
       return [
-        '__updateCalendars(calendars, i18n, minDate, maxDate, selectedDate, focusedDate, showWeekNumbers, _ignoreTaps, _theme, isDateDisabled)',
+        '__updateCalendars(calendars, i18n, minDate, maxDate, selectedDate, focusedDate, showWeekNumbers, _ignoreTaps, _theme, isDateDisabled, enteredDate)',
         '__updateCancelButton(_cancelButton, i18n)',
         '__updateTodayButton(_todayButton, i18n, minDate, maxDate, isDateDisabled)',
         '__updateYears(years, selectedDate, _theme)',
@@ -339,6 +345,7 @@ export const DatePickerOverlayContentMixin = (superClass) =>
       ignoreTaps,
       theme,
       isDateDisabled,
+      enteredDate,
     ) {
       if (calendars && calendars.length) {
         calendars.forEach((calendar) => {
@@ -350,6 +357,7 @@ export const DatePickerOverlayContentMixin = (superClass) =>
           calendar.selectedDate = selectedDate;
           calendar.showWeekNumbers = showWeekNumbers;
           calendar.ignoreTaps = ignoreTaps;
+          calendar.enteredDate = enteredDate;
 
           if (theme) {
             calendar.setAttribute('theme', theme);
@@ -571,6 +579,7 @@ export const DatePickerOverlayContentMixin = (superClass) =>
 
       if (!animate) {
         this._monthScroller.position = targetPosition;
+        this._monthScroller.forceUpdate();
         this._targetPosition = undefined;
         this._repositionYearScroller();
         this.__tryFocusDate();
@@ -626,6 +635,7 @@ export const DatePickerOverlayContentMixin = (superClass) =>
           );
 
           this._monthScroller.position = this._targetPosition;
+          this._monthScroller.forceUpdate();
           this._targetPosition = undefined;
 
           revealResolve();

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

@@ -19,7 +19,6 @@ stylesTemplate.innerHTML = `
       transform: translateX(100%);
       -webkit-tap-highlight-color: transparent;
       -webkit-user-select: none;
-      -moz-user-select: none;
       user-select: none;
       /* Center the year scroller position. */
       --vaadin-infinite-scroller-buffer-offset: 50%;

package/src/vaadin-date-picker.js

@@ -247,6 +247,7 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
 
   /** @private */
   _onVaadinOverlayClose(e) {
+    // Prevent closing the overlay on label element click
     if (e.detail.sourceEvent && e.detail.sourceEvent.composedPath().includes(this)) {
       e.preventDefault();
     }

package/src/vaadin-infinite-scroller.js

@@ -3,6 +3,7 @@
  * Copyright (c) 2016 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { flush } from '@polymer/polymer/lib/utils/flush.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
@@ -200,16 +201,37 @@ export class InfiniteScroller extends HTMLElement {
     }
   }
 
+  /** @protected */
+  disconnectedCallback() {
+    if (this._debouncerScrollFinish) {
+      this._debouncerScrollFinish.cancel();
+    }
+
+    if (this._debouncerUpdateClones) {
+      this._debouncerUpdateClones.cancel();
+    }
+
+    if (this.__pendingFinishInit) {
+      cancelAnimationFrame(this.__pendingFinishInit);
+    }
+  }
+
   /**
    * Force the scroller to update clones after a reset, without
    * waiting for the debouncer to resolve.
    */
   forceUpdate() {
+    if (this._debouncerScrollFinish) {
+      this._debouncerScrollFinish.flush();
+    }
+
     if (this._debouncerUpdateClones) {
       this._buffers[0].updated = this._buffers[1].updated = false;
       this._updateClones();
       this._debouncerUpdateClones.cancel();
     }
+
+    flush();
   }
 
   /**
@@ -341,8 +363,9 @@ export class InfiniteScroller extends HTMLElement {
       }
     });
 
-    requestAnimationFrame(() => {
+    this.__pendingFinishInit = requestAnimationFrame(() => {
       this._finishInit();
+      this.__pendingFinishInit = null;
     });
   }
 
@@ -357,6 +380,10 @@ export class InfiniteScroller extends HTMLElement {
     itemWrapper.instance = this._createElement();
     itemWrapper.appendChild(itemWrapper.instance);
 
+    if (itemWrapper.instance.performUpdate) {
+      itemWrapper.instance.performUpdate();
+    }
+
     Object.keys(tmpInstance).forEach((prop) => {
       itemWrapper.instance[prop] = tmpInstance[prop];
     });
@@ -364,7 +391,8 @@ export class InfiniteScroller extends HTMLElement {
 
   /** @private */
   _updateClones(viewPortOnly) {
-    this._firstIndex = ~~((this._buffers[0].translateY - this._initialScroll) / this.itemHeight) + this._initialIndex;
+    this._firstIndex =
+      Math.round((this._buffers[0].translateY - this._initialScroll) / this.itemHeight) + this._initialIndex;
 
     const scrollerRect = viewPortOnly ? this.$.scroller.getBoundingClientRect() : undefined;
     this._buffers.forEach((buffer, bufferIndex) => {

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

@@ -30,22 +30,6 @@ class DatePickerOverlay extends DatePickerOverlayMixin(DirMixin(ThemableMixin(Po
     return [overlayStyles, datePickerOverlayStyles];
   }
 
-  static get properties() {
-    return {
-      /**
-       * When true, the overlay is visible and attached to body.
-       * This property config is overridden to set `sync: true`.
-       */
-      opened: {
-        type: Boolean,
-        notify: true,
-        observer: '_openedChanged',
-        reflectToAttribute: true,
-        sync: true,
-      },
-    };
-  }
-
   /** @protected */
   render() {
     return html`

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

@@ -109,16 +109,25 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
   }
 
   /** @protected */
-  firstUpdated() {
-    super.firstUpdated();
+  ready() {
+    super.ready();
 
     this.addController(
-      new InputController(this, (input) => {
-        this._setInputElement(input);
-        this._setFocusElement(input);
-        this.stateTarget = input;
-        this.ariaTarget = input;
-      }),
+      new InputController(
+        this,
+        (input) => {
+          this._setInputElement(input);
+          this._setFocusElement(input);
+          this.stateTarget = input;
+          this.ariaTarget = input;
+        },
+        {
+          // The "search" word is a trick to prevent Safari from enabling AutoFill,
+          // which is causing click issues:
+          // https://github.com/vaadin/web-components/issues/6817#issuecomment-2268229567
+          uniqueIdPrefix: 'search-input',
+        },
+      ),
     );
     this.addController(new LabelledInputController(this.inputElement, this._labelController));
 
@@ -141,6 +150,7 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
 
   /** @private */
   _onVaadinOverlayClose(e) {
+    // Prevent closing the overlay on label element click
     if (e.detail.sourceEvent && e.detail.sourceEvent.composedPath().includes(this)) {
       e.preventDefault();
     }

package/src/vaadin-lit-month-calendar.js

@@ -59,7 +59,9 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolylitMixin(LitEle
                   ${this.__getWeekNumber(week)}
                 </td>
                 ${week.map((date) => {
-                  const isFocused = dateEquals(date, this.focusedDate);
+                  const isFocused =
+                    dateEquals(date, this.focusedDate) && (this.__hasFocus || dateEquals(date, this.enteredDate));
+                  const tabIndex = dateEquals(date, this.focusedDate) ? '0' : '-1';
                   const isSelected = dateEquals(date, this.selectedDate);
                   const isDisabled = !dateAllowed(date, this.minDate, this.maxDate, this.isDateDisabled);
                   const greaterThanToday = date > normalizeDate(new Date());
@@ -81,7 +83,7 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolylitMixin(LitEle
                       part="${parts.join(' ')}"
                       .date="${date}"
                       ?disabled="${isDisabled}"
-                      tabindex="${isFocused ? '0' : '-1'}"
+                      tabindex="${tabIndex}"
                       aria-selected="${isSelected ? 'true' : 'false'}"
                       aria-disabled="${isDisabled ? 'true' : 'false'}"
                       aria-label="${this.__getDayAriaLabel(date)}"

package/src/vaadin-month-calendar-mixin.js

@@ -91,6 +91,10 @@ export const MonthCalendarMixin = (superClass) =>
           value: () => false,
         },
 
+        enteredDate: {
+          type: Date,
+        },
+
         disabled: {
           type: Boolean,
           reflectToAttribute: true,
@@ -110,6 +114,11 @@ export const MonthCalendarMixin = (superClass) =>
         _notTapping: {
           type: Boolean,
         },
+
+        /** @private */
+        __hasFocus: {
+          type: Boolean,
+        },
       };
     }
 
@@ -129,6 +138,12 @@ export const MonthCalendarMixin = (superClass) =>
       addListener(this.$.monthGrid, 'tap', this._handleTap.bind(this));
     }
 
+    /** @override */
+    _setFocused(focused) {
+      super._setFocused(focused);
+      this.__hasFocus = focused;
+    }
+
     /**
      * Returns true if all the dates in the month are out of the allowed range
      * @protected

package/src/vaadin-month-calendar.js

@@ -50,7 +50,7 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
               <template is="dom-repeat" items="[[week]]">
                 <td
                   role="gridcell"
-                  part$="[[__getDatePart(item, focusedDate, selectedDate, minDate, maxDate, isDateDisabled)]]"
+                  part$="[[__getDatePart(item, focusedDate, selectedDate, minDate, maxDate, isDateDisabled, enteredDate, __hasFocus)]]"
                   date="[[item]]"
                   tabindex$="[[__getDayTabindex(item, focusedDate)]]"
                   disabled$="[[__isDayDisabled(item, minDate, maxDate, isDateDisabled)]]"
@@ -108,7 +108,7 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
 
   /** @private */
   // eslint-disable-next-line @typescript-eslint/max-params
-  __getDatePart(date, focusedDate, selectedDate, minDate, maxDate, isDateDisabled) {
+  __getDatePart(date, focusedDate, selectedDate, minDate, maxDate, isDateDisabled, enteredDate, hasFocus) {
     const result = ['date'];
     const greaterThanToday = date > normalizeDate(new Date());
     const lessThanToday = date < normalizeDate(new Date());
@@ -117,7 +117,7 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
       result.push('disabled');
     }
 
-    if (this.__isDayFocused(date, focusedDate)) {
+    if (dateEquals(date, focusedDate) && (hasFocus || dateEquals(date, enteredDate))) {
       result.push('focused');
     }
 
@@ -140,11 +140,6 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
     return result.join(' ');
   }
 
-  /** @private */
-  __isDayFocused(date, focusedDate) {
-    return dateEquals(date, focusedDate);
-  }
-
   /** @private */
   __isDaySelected(date, selectedDate) {
     return dateEquals(date, selectedDate);
@@ -175,11 +170,7 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
 
   /** @private */
   __getDayTabindex(date, focusedDate) {
-    if (this.__isDayFocused(date, focusedDate)) {
-      return '0';
-    }
-
-    return '-1';
+    return dateEquals(date, focusedDate) ? '0' : '-1';
   }
 }
 

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

@@ -41,7 +41,7 @@ const datePickerOverlay = css`
     margin-bottom: var(--lumo-space-xs);
   }
 
-  @media (max-width: 420px), (max-height: 420px) {
+  @media (max-width: 450px), (max-height: 450px) {
     [part='overlay'] {
       width: 100vw;
       height: 70vh;

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

@@ -12,7 +12,7 @@ const datePicker = css`
     content: var(--lumo-icons-cross);
   }
 
-  @media (max-width: 420px), (max-height: 420px) {
+  @media (max-width: 450px), (max-height: 450px) {
     [part='overlay-content'] {
       height: 70vh;
     }

package/theme/lumo/vaadin-month-calendar-styles.js

@@ -9,7 +9,6 @@ registerStyles(
   'vaadin-month-calendar',
   css`
     :host {
-      -moz-user-select: none;
       -webkit-user-select: none;
       -webkit-tap-highlight-color: transparent;
       user-select: none;

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-picker",
-  "version": "24.6.0-beta1",
+  "version": "24.7.0-alpha1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -366,7 +366,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.6.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.6.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.6.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.6.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`past`                | Date element corresponding to the date in the past\n`future`              | Date element corresponding to the date in the future\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`year-number`         | Year number\n`year-separator`      | Year separator\n\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change             | Event\n:------------------------|:------------------\nempty => parsable        | change\nempty => unparsable      | unparsable-change\nparsable => empty        | change\nparsable => parsable     | change\nparsable => unparsable   | change\nunparsable => empty      | unparsable-change\nunparsable => parsable   | change\nunparsable => unparsable | unparsable-change",
+          "description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property                | Description                | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha1/#/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.7.0-alpha1/#/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.7.0-alpha1/#/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.7.0-alpha1/#/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`past`                | Date element corresponding to the date in the past\n`future`              | Date element corresponding to the date in the future\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`year-number`         | Year number\n`year-separator`      | Year separator\n\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change             | Event\n:------------------------|:------------------\nempty => parsable        | change\nempty => unparsable      | unparsable-change\nparsable => empty        | change\nparsable => parsable     | change\nparsable => unparsable   | change\nunparsable => empty      | unparsable-change\nunparsable => parsable   | change\nunparsable => unparsable | unparsable-change",
           "attributes": [
             {
               "name": "disabled",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-picker",
-  "version": "24.6.0-beta1",
+  "version": "24.7.0-alpha1",
   "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.6.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.6.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.6.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.6.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`past`                | Date element corresponding to the date in the past\n`future`              | Date element corresponding to the date in the future\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`year-number`         | Year number\n`year-separator`      | Year separator\n\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change             | Event\n:------------------------|:------------------\nempty => parsable        | change\nempty => unparsable      | unparsable-change\nparsable => empty        | change\nparsable => parsable     | change\nparsable => unparsable   | change\nunparsable => empty      | unparsable-change\nunparsable => parsable   | change\nunparsable => unparsable | unparsable-change",
+          "description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property                | Description                | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha1/#/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.7.0-alpha1/#/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.7.0-alpha1/#/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.7.0-alpha1/#/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`past`                | Date element corresponding to the date in the past\n`future`              | Date element corresponding to the date in the future\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`year-number`         | Year number\n`year-separator`      | Year separator\n\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change             | Event\n:------------------------|:------------------\nempty => parsable        | change\nempty => unparsable      | unparsable-change\nparsable => empty        | change\nparsable => parsable     | change\nparsable => unparsable   | change\nunparsable => empty      | unparsable-change\nunparsable => parsable   | change\nunparsable => unparsable | unparsable-change",
           "extension": true,
           "attributes": [
             {