@openremote/or-vaadin-components 1.30.0-snapshot.20260902114525 → 1.30.0

package/custom-elements-jsx.d.ts

@@ -65,12 +65,12 @@ import type { ContextMenuItem } from "/home/runner/work/openremote/openremote/no
 import type { ContextMenuListBox } from "/home/runner/work/openremote/openremote/node_modules/@vaadin/context-menu/./lib/vaadin-context-menu-list-box.js";
 import type { ContextMenuOverlay } from "/home/runner/work/openremote/openremote/node_modules/@vaadin/context-menu/./lib/vaadin-context-menu-overlay.js";
 import type { ContextMenu } from "/home/runner/work/openremote/openremote/node_modules/@vaadin/context-menu/./lib/vaadin-context-menu.js";
-import type { DatePickerYear } from "/home/runner/work/openremote/openremote/node_modules/@vaadin/date-picker/./lib/vaadin-date-picker-year.js";
-import type { DatePicker } from "/home/runner/work/openremote/openremote/node_modules/@vaadin/date-picker/./lib/vaadin-date-picker.js";
-import type { InfiniteScroller } from "/home/runner/work/openremote/openremote/node_modules/@vaadin/date-picker/./lib/vaadin-infinite-scroller.js";
 import type { DateTimePicker } from "/home/runner/work/openremote/openremote/node_modules/@vaadin/date-time-picker/./lib/vaadin-date-time-picker.js";
 import type { DialogOverlay } from "/home/runner/work/openremote/openremote/node_modules/@vaadin/dialog/./lib/vaadin-dialog-overlay.js";
 import type { Dialog } from "/home/runner/work/openremote/openremote/node_modules/@vaadin/dialog/./lib/vaadin-dialog.js";
+import type { DatePickerYear } from "/home/runner/work/openremote/openremote/node_modules/@vaadin/date-picker/./lib/vaadin-date-picker-year.js";
+import type { DatePicker } from "/home/runner/work/openremote/openremote/node_modules/@vaadin/date-picker/./lib/vaadin-date-picker.js";
+import type { InfiniteScroller } from "/home/runner/work/openremote/openremote/node_modules/@vaadin/date-picker/./lib/vaadin-infinite-scroller.js";
 import type { Icon } from "/home/runner/work/openremote/openremote/node_modules/@vaadin/icon/./lib/vaadin-icon.js";
 import type { Iconset } from "/home/runner/work/openremote/openremote/node_modules/@vaadin/icon/./lib/vaadin-iconset.js";
 import type { InputContainer } from "/home/runner/work/openremote/openremote/node_modules/@vaadin/input-container/./lib/vaadin-input-container.js";
@@ -7343,467 +7343,193 @@ and set the `tooltip` property on each item that should have one:
   textContent?: string | number;
 };
 
-export type DatePickerYearProps = {
-  /**  */
-  year?: DatePickerYear["year"];
-  /**  */
-  selectedDate?: DatePickerYear["selectedDate"];
-};
-
-export type DatePickerYearSolidJsProps = {
-  /**  */
-  "prop:year"?: DatePickerYear["year"];
-  /**  */
-  "prop:selectedDate"?: DatePickerYear["selectedDate"];
-
-  /** Set the innerHTML of the element */
-  innerHTML?: string;
-  /** Set the textContent of the element */
-  textContent?: string | number;
-};
-
-export type DatePickerProps = {
-  /**  */
-  _positionTarget?: DatePicker["_positionTarget"];
-  /** Set when the element is disabled */
-  disabled?: unknown;
+export type DateTimePickerProps = {
   /** Set when the element is disabled */
+  disabled?: DateTimePicker["disabled"];
+  /** Set when the element is focused */
+  focused?: unknown;
+  /** Set when the element is focused */
   undefined?: unknown;
-  /** Set when the element has a value */
-  "has-value"?: unknown;
+  /** Set when the element is keyboard focused */
+  "focus-ring"?: unknown;
+  /** Set when the element is readonly */
+  readonly?: DateTimePicker["readonly"];
+  /** Set when the element is invalid */
+  invalid?: unknown;
   /** Set when the element has a label */
   "has-label"?: unknown;
-  /** Set when the element has helper text or slot */
+  /** Set when the element has a value */
+  "has-value"?: unknown;
+  /** Set when the element has helper text */
   "has-helper"?: unknown;
   /** Set when the element has an error message */
   "has-error-message"?: unknown;
   /** Set when the element has a slotted tooltip */
   "has-tooltip"?: unknown;
-  /** Set when the element is invalid */
-  invalid?: unknown;
-  /** Set when the element is focused */
-  focused?: unknown;
-  /** Set when the element is keyboard focused */
-  "focus-ring"?: unknown;
-  /** Set when the element is readonly */
-  readonly?: DatePicker["readonly"];
-  /** Set when the overlay is opened */
-  opened?: DatePicker["opened"];
-  /** Set when week numbers are shown in the calendar */
-  "week-numbers"?: unknown;
-  /**  */
-  "<vaadin-date-picker>"?: unknown;
-  /**  */
-  "<vaadin-date-picker-overlay-content>"?: unknown;
-  /**  */
-  "<vaadin-date-picker-month-scroller>"?: unknown;
-  /**  */
-  "<vaadin-date-picker-year-scroller>"?: unknown;
-  /**  */
-  "<vaadin-date-picker-year>"?: unknown;
-  /**  */
-  "<vaadin-month-calendar>"?: unknown;
-  /** Fullscreen mode years scroller toggle */
-  "years-toggle-button"?: unknown;
-  /** Toolbar with slotted buttons */
-  toolbar?: unknown;
-  /** The current selected date. */
-  _selectedDate?: DatePicker["_selectedDate"];
-  /**  */
-  _focusedDate?: DatePicker["_focusedDate"];
-  /** Selected date.
+  /** The name of the control, which is submitted with the form data. */
+  name?: DateTimePicker["name"];
+  /** The value for this element.
 
-Supported date formats:
-- ISO 8601 `"YYYY-MM-DD"` (default)
-- 6-digit extended ISO 8601 `"+YYYYYY-MM-DD"`, `"-YYYYYY-MM-DD"` */
-  value?: DatePicker["value"];
-  /** Date which should be visible when there is no value selected.
+Supported date time format is based on ISO 8601 (without a time zone designator):
+- Minute precision `"YYYY-MM-DDThh:mm"` (default)
+- Second precision `"YYYY-MM-DDThh:mm:ss"`
+- Millisecond precision `"YYYY-MM-DDThh:mm:ss.fff"` */
+  value?: DateTimePicker["value"];
+  /** The earliest allowed value (date and time) that can be selected. All earlier values will be disabled.
 
-The same date formats as for the `value` property are supported. */
-  initialPosition?: DatePicker["initialPosition"];
-  /** Set true to prevent the overlay from opening automatically. */
-  autoOpenDisabled?: DatePicker["autoOpenDisabled"];
+Supported date time format is based on ISO 8601 (without a time zone designator):
+- Minute precision `"YYYY-MM-DDThh:mm"`
+- Second precision `"YYYY-MM-DDThh:mm:ss"`
+- Millisecond precision `"YYYY-MM-DDThh:mm:ss.fff"` */
+  min?: DateTimePicker["min"];
+  /** The latest value (date and time) that can be selected. All later values will be disabled.
+
+Supported date time format is based on ISO 8601 (without a time zone designator):
+- Minute precision `"YYYY-MM-DDThh:mm"`
+- Second precision `"YYYY-MM-DDThh:mm:ss"`
+- Millisecond precision `"YYYY-MM-DDThh:mm:ss.fff"` */
+  max?: DateTimePicker["max"];
+  /** The earliest value that can be selected. All earlier values will be disabled. */
+  __minDateTime?: DateTimePicker["__minDateTime"];
+  /** The latest value that can be selected. All later values will be disabled. */
+  __maxDateTime?: DateTimePicker["__maxDateTime"];
+  /** A placeholder string for the date field. */
+  datePlaceholder?: DateTimePicker["datePlaceholder"];
+  /** A placeholder string for the time field. */
+  timePlaceholder?: DateTimePicker["timePlaceholder"];
+  /** Defines the time interval (in seconds) between the items displayed
+in the time selection box. The default is 1 hour (i.e. `3600`).
+
+It also configures the precision of the time part of the value string. By default
+the component formats time values as `hh:mm` but setting a step value
+lower than one minute or one second, format resolution changes to
+`hh:mm:ss` and `hh:mm:ss.fff` respectively.
+
+Unit must be set in seconds, and for correctly configuring intervals
+in the dropdown, it need to evenly divide a day.
+
+Note: it is possible to define step that is dividing an hour in inexact
+fragments (i.e. 5760 seconds which equals 1 hour 36 minutes), but it is
+not recommended to use it for better UX. */
+  step?: DateTimePicker["step"];
+  /** Date which should be visible in the date picker overlay when there is no value selected.
+
+The same date formats as for the `value` property are supported but without the time part. */
+  initialPosition?: DateTimePicker["initialPosition"];
   /** Set true to display ISO-8601 week numbers in the calendar. Notice that
 displaying week numbers is only supported when `i18n.firstDayOfWeek`
 is 1 (Monday). */
-  showWeekNumbers?: DatePicker["showWeekNumbers"];
-  /**  */
-  _fullscreen?: DatePicker["_fullscreen"];
-  /**  */
-  _fullscreenMediaQuery?: DatePicker["_fullscreenMediaQuery"];
-  /** The earliest date that can be selected. All earlier dates will be disabled.
-
-Supported date formats:
-- ISO 8601 `"YYYY-MM-DD"` (default)
-- 6-digit extended ISO 8601 `"+YYYYYY-MM-DD"`, `"-YYYYYY-MM-DD"` */
-  min?: DatePicker["min"];
-  /** The latest date that can be selected. All later dates will be disabled.
-
-Supported date formats:
-- ISO 8601 `"YYYY-MM-DD"` (default)
-- 6-digit extended ISO 8601 `"+YYYYYY-MM-DD"`, `"-YYYYYY-MM-DD"` */
-  max?: DatePicker["max"];
-  /** A function to be used to determine whether the user can select a given date.
-Receives a `DatePickerDate` object of the date to be selected and should return a
-boolean. */
-  isDateDisabled?: DatePicker["isDateDisabled"];
-  /** The earliest date that can be selected. All earlier dates will be disabled. */
-  _minDate?: DatePicker["_minDate"];
-  /** The latest date that can be selected. All later dates will be disabled. */
-  _maxDate?: DatePicker["_maxDate"];
-  /**  */
-  _noInput?: DatePicker["_noInput"];
-  /**  */
-  _ios?: DatePicker["_ios"];
-  /**  */
-  _focusOverlayOnOpen?: DatePicker["_focusOverlayOnOpen"];
-  /**  */
-  _overlayContent?: DatePicker["_overlayContent"];
-  /**  */
-  __enteredDate?: DatePicker["__enteredDate"];
+  showWeekNumbers?: DateTimePicker["showWeekNumbers"];
+  /** Set to true to prevent the overlays from opening automatically. */
+  autoOpenDisabled?: DateTimePicker["autoOpenDisabled"];
+  /** Specify that this control should have input focus when the page loads. */
+  autofocus?: DateTimePicker["autofocus"];
+  /** The current selected date time. */
+  __selectedDateTime?: DateTimePicker["__selectedDateTime"];
+  /** The current slotted date picker. */
+  __datePicker?: DateTimePicker["__datePicker"];
+  /** The current slotted time picker. */
+  __timePicker?: DateTimePicker["__timePicker"];
   /** The object used to localize this component. To change the default
 localization, replace this with an object that provides all properties, or
 just the individual properties you want to change.
 
 Should be overridden by subclasses to provide a custom JSDoc with the
 default I18N properties. */
-  i18n?: DatePicker["i18n"];
+  i18n?: DateTimePicker["i18n"];
   /**  */
-  __effectiveI18n?: DatePicker["__effectiveI18n"];
-  /** Specify that this control should have input focus when the page loads. */
-  autofocus?: DatePicker["autofocus"];
-  /** A reference to the focusable element controlled by the mixin.
-It can be an input, textarea, button or any element with tabindex > -1.
-
-Any component implementing this mixin is expected to provide it
-by using `this._setFocusElement(input)` Polymer API.
-
-Toggling `tabindex` attribute on the host element propagates its value to `focusElement`. */
-  focusElement?: DatePicker["focusElement"];
-  /** Override the property from `TabIndexMixin`
-to ensure the `tabindex` attribute of the focus element
-will be restored to `0` after re-enabling the element. */
-  _lastTabIndex?: DatePicker["_lastTabIndex"];
-  /** A pattern matched against individual characters the user inputs.
-
-When set, the field will prevent:
-- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`
-- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`
-- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`
-
-For example, to allow entering only numbers and minus signs, use:
-`allowedCharPattern = "[\\d-]"` */
-  allowedCharPattern?: DatePicker["allowedCharPattern"];
-  /** If true, the input text gets fully selected when the field is focused using click or touch / tap. */
-  autoselect?: DatePicker["autoselect"];
-  /** The name of this field. */
-  name?: DatePicker["name"];
-  /** A hint to the user of what can be entered in the field. */
-  placeholder?: DatePicker["placeholder"];
-  /** The text usually displayed in a tooltip popup when the mouse is over the field. */
-  title?: DatePicker["title"];
+  __effectiveI18n?: DateTimePicker["__effectiveI18n"];
   /** A target element to which ARIA attributes are set. */
-  ariaTarget?: DatePicker["ariaTarget"];
+  ariaTarget?: DateTimePicker["ariaTarget"];
   /** Error to show when the field is invalid. */
-  errorMessage?: DatePicker["errorMessage"];
+  errorMessage?: DateTimePicker["errorMessage"];
   /** String used for the helper text. */
-  helperText?: DatePicker["helperText"];
+  helperText?: DateTimePicker["helperText"];
   /** String used to label the component to screen reader users. */
-  accessibleName?: DatePicker["accessibleName"];
+  accessibleName?: DateTimePicker["accessibleName"];
   /** Id of the element used as label of the component to screen reader users. */
-  accessibleNameRef?: DatePicker["accessibleNameRef"];
-  /** Set to true to display the clear icon which clears the input.
-This also enables clearing the input when pressing Esc key. */
-  clearButtonVisible?: DatePicker["clearButtonVisible"];
-  /**  */
-  dir?: DatePicker["dir"];
-  /**  */
-  _inputElementValue?: DatePicker["_inputElementValue"];
-  /**  */
-  _boundOnClick?: DatePicker["_boundOnClick"];
-  /**  */
-  _boundOnScroll?: DatePicker["_boundOnScroll"];
-  /**  */
-  _boundOnBlur?: DatePicker["_boundOnBlur"];
+  accessibleNameRef?: DateTimePicker["accessibleNameRef"];
   /**  */
-  _boundOnFocus?: DatePicker["_boundOnFocus"];
+  dir?: DateTimePicker["dir"];
   /**  */
-  _boundOnPaste?: DatePicker["_boundOnPaste"];
+  __defaultDateMinMaxValue?: DateTimePicker["__defaultDateMinMaxValue"];
   /**  */
-  _boundOnDrop?: DatePicker["_boundOnDrop"];
+  __defaultTimeMinValue?: DateTimePicker["__defaultTimeMinValue"];
   /**  */
-  _boundOnBeforeInput?: DatePicker["_boundOnBeforeInput"];
+  __defaultTimeMaxValue?: DateTimePicker["__defaultTimeMaxValue"];
   /**  */
-  _fieldAriaController?: DatePicker["_fieldAriaController"];
+  _fieldAriaController?: DateTimePicker["_fieldAriaController"];
   /**  */
-  _helperController?: DatePicker["_helperController"];
+  _helperController?: DateTimePicker["_helperController"];
   /**  */
-  _errorController?: DatePicker["_errorController"];
+  _errorController?: DateTimePicker["_errorController"];
 
   /** Fired when the user commits a value change. */
   onchange?: (e: CustomEvent) => void;
-  /** Fired when the user commits an unparsable value change and there is no change event. */
+  /** Fired when the user commits an unparsable or incomplete value change and there is no change event. */
   "onunparsable-change"?: (e: CustomEvent) => void;
   /** Fired when the `invalid` property changes. */
   "oninvalid-changed"?: (e: CustomEvent) => void;
-  /** Fired when the `opened` property changes. */
-  "onopened-changed"?: (e: CustomEvent) => void;
   /** Fired when the `value` property changes. */
   "onvalue-changed"?: (e: CustomEvent) => void;
   /** Fired whenever the field is validated. */
   onvalidated?: (e: CustomEvent) => void;
 };
 
-export type DatePickerSolidJsProps = {
-  /**  */
-  "prop:_positionTarget"?: DatePicker["_positionTarget"];
-  /** Set when the element is disabled */
-  "bool:disabled"?: unknown;
+export type DateTimePickerSolidJsProps = {
   /** Set when the element is disabled */
-  "prop:undefined"?: unknown;
-  /** Set when the element has a value */
-  "bool:has-value"?: unknown;
-  /** Set when the element has a label */
-  "bool:has-label"?: unknown;
-  /** Set when the element has helper text or slot */
-  "bool:has-helper"?: unknown;
-  /** Set when the element has an error message */
-  "bool:has-error-message"?: unknown;
-  /** Set when the element has a slotted tooltip */
-  "bool:has-tooltip"?: unknown;
-  /** Set when the element is invalid */
-  "bool:invalid"?: unknown;
+  "prop:disabled"?: DateTimePicker["disabled"];
   /** Set when the element is focused */
   "bool:focused"?: unknown;
-  /** Set when the element is keyboard focused */
-  "bool:focus-ring"?: unknown;
-  /** Set when the element is readonly */
-  "prop:readonly"?: DatePicker["readonly"];
-  /** Set when the overlay is opened */
-  "prop:opened"?: DatePicker["opened"];
-  /** Set when week numbers are shown in the calendar */
-  "bool:week-numbers"?: unknown;
-  /**  */
-  "bool:<vaadin-date-picker>"?: unknown;
-  /**  */
-  "bool:<vaadin-date-picker-overlay-content>"?: unknown;
-  /**  */
-  "bool:<vaadin-date-picker-month-scroller>"?: unknown;
-  /**  */
-  "bool:<vaadin-date-picker-year-scroller>"?: unknown;
-  /**  */
-  "bool:<vaadin-date-picker-year>"?: unknown;
-  /**  */
-  "bool:<vaadin-month-calendar>"?: unknown;
-  /** Fullscreen mode years scroller toggle */
-  "bool:years-toggle-button"?: unknown;
-  /** Toolbar with slotted buttons */
-  "bool:toolbar"?: unknown;
-  /** The current selected date. */
-  "prop:_selectedDate"?: DatePicker["_selectedDate"];
-  /**  */
-  "prop:_focusedDate"?: DatePicker["_focusedDate"];
-  /** Selected date.
-
-Supported date formats:
-- ISO 8601 `"YYYY-MM-DD"` (default)
-- 6-digit extended ISO 8601 `"+YYYYYY-MM-DD"`, `"-YYYYYY-MM-DD"` */
-  "prop:value"?: DatePicker["value"];
-  /** Date which should be visible when there is no value selected.
-
-The same date formats as for the `value` property are supported. */
-  "prop:initialPosition"?: DatePicker["initialPosition"];
-  /** Set true to prevent the overlay from opening automatically. */
-  "prop:autoOpenDisabled"?: DatePicker["autoOpenDisabled"];
-  /** Set true to display ISO-8601 week numbers in the calendar. Notice that
-displaying week numbers is only supported when `i18n.firstDayOfWeek`
-is 1 (Monday). */
-  "prop:showWeekNumbers"?: DatePicker["showWeekNumbers"];
-  /**  */
-  "prop:_fullscreen"?: DatePicker["_fullscreen"];
-  /**  */
-  "prop:_fullscreenMediaQuery"?: DatePicker["_fullscreenMediaQuery"];
-  /** The earliest date that can be selected. All earlier dates will be disabled.
-
-Supported date formats:
-- ISO 8601 `"YYYY-MM-DD"` (default)
-- 6-digit extended ISO 8601 `"+YYYYYY-MM-DD"`, `"-YYYYYY-MM-DD"` */
-  "prop:min"?: DatePicker["min"];
-  /** The latest date that can be selected. All later dates will be disabled.
-
-Supported date formats:
-- ISO 8601 `"YYYY-MM-DD"` (default)
-- 6-digit extended ISO 8601 `"+YYYYYY-MM-DD"`, `"-YYYYYY-MM-DD"` */
-  "prop:max"?: DatePicker["max"];
-  /** A function to be used to determine whether the user can select a given date.
-Receives a `DatePickerDate` object of the date to be selected and should return a
-boolean. */
-  "prop:isDateDisabled"?: DatePicker["isDateDisabled"];
-  /** The earliest date that can be selected. All earlier dates will be disabled. */
-  "prop:_minDate"?: DatePicker["_minDate"];
-  /** The latest date that can be selected. All later dates will be disabled. */
-  "prop:_maxDate"?: DatePicker["_maxDate"];
-  /**  */
-  "prop:_noInput"?: DatePicker["_noInput"];
-  /**  */
-  "prop:_ios"?: DatePicker["_ios"];
-  /**  */
-  "prop:_focusOverlayOnOpen"?: DatePicker["_focusOverlayOnOpen"];
-  /**  */
-  "prop:_overlayContent"?: DatePicker["_overlayContent"];
-  /**  */
-  "prop:__enteredDate"?: DatePicker["__enteredDate"];
-  /** The object used to localize this component. To change the default
-localization, replace this with an object that provides all properties, or
-just the individual properties you want to change.
-
-Should be overridden by subclasses to provide a custom JSDoc with the
-default I18N properties. */
-  "prop:i18n"?: DatePicker["i18n"];
-  /**  */
-  "prop:__effectiveI18n"?: DatePicker["__effectiveI18n"];
-  /** Specify that this control should have input focus when the page loads. */
-  "prop:autofocus"?: DatePicker["autofocus"];
-  /** A reference to the focusable element controlled by the mixin.
-It can be an input, textarea, button or any element with tabindex > -1.
-
-Any component implementing this mixin is expected to provide it
-by using `this._setFocusElement(input)` Polymer API.
-
-Toggling `tabindex` attribute on the host element propagates its value to `focusElement`. */
-  "prop:focusElement"?: DatePicker["focusElement"];
-  /** Override the property from `TabIndexMixin`
-to ensure the `tabindex` attribute of the focus element
-will be restored to `0` after re-enabling the element. */
-  "prop:_lastTabIndex"?: DatePicker["_lastTabIndex"];
-  /** A pattern matched against individual characters the user inputs.
-
-When set, the field will prevent:
-- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`
-- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`
-- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`
-
-For example, to allow entering only numbers and minus signs, use:
-`allowedCharPattern = "[\\d-]"` */
-  "prop:allowedCharPattern"?: DatePicker["allowedCharPattern"];
-  /** If true, the input text gets fully selected when the field is focused using click or touch / tap. */
-  "prop:autoselect"?: DatePicker["autoselect"];
-  /** The name of this field. */
-  "prop:name"?: DatePicker["name"];
-  /** A hint to the user of what can be entered in the field. */
-  "prop:placeholder"?: DatePicker["placeholder"];
-  /** The text usually displayed in a tooltip popup when the mouse is over the field. */
-  "prop:title"?: DatePicker["title"];
-  /** A target element to which ARIA attributes are set. */
-  "prop:ariaTarget"?: DatePicker["ariaTarget"];
-  /** Error to show when the field is invalid. */
-  "prop:errorMessage"?: DatePicker["errorMessage"];
-  /** String used for the helper text. */
-  "prop:helperText"?: DatePicker["helperText"];
-  /** String used to label the component to screen reader users. */
-  "prop:accessibleName"?: DatePicker["accessibleName"];
-  /** Id of the element used as label of the component to screen reader users. */
-  "prop:accessibleNameRef"?: DatePicker["accessibleNameRef"];
-  /** Set to true to display the clear icon which clears the input.
-This also enables clearing the input when pressing Esc key. */
-  "prop:clearButtonVisible"?: DatePicker["clearButtonVisible"];
-  /**  */
-  "prop:dir"?: DatePicker["dir"];
-  /**  */
-  "prop:_inputElementValue"?: DatePicker["_inputElementValue"];
-  /**  */
-  "prop:_boundOnClick"?: DatePicker["_boundOnClick"];
-  /**  */
-  "prop:_boundOnScroll"?: DatePicker["_boundOnScroll"];
-  /**  */
-  "prop:_boundOnBlur"?: DatePicker["_boundOnBlur"];
-  /**  */
-  "prop:_boundOnFocus"?: DatePicker["_boundOnFocus"];
-  /**  */
-  "prop:_boundOnPaste"?: DatePicker["_boundOnPaste"];
-  /**  */
-  "prop:_boundOnDrop"?: DatePicker["_boundOnDrop"];
-  /**  */
-  "prop:_boundOnBeforeInput"?: DatePicker["_boundOnBeforeInput"];
-  /**  */
-  "prop:_fieldAriaController"?: DatePicker["_fieldAriaController"];
-  /**  */
-  "prop:_helperController"?: DatePicker["_helperController"];
-  /**  */
-  "prop:_errorController"?: DatePicker["_errorController"];
-  /** Fired when the user commits a value change. */
-  "on:change"?: (e: CustomEvent) => void;
-  /** Fired when the user commits an unparsable value change and there is no change event. */
-  "on:unparsable-change"?: (e: CustomEvent) => void;
-  /** Fired when the `invalid` property changes. */
-  "on:invalid-changed"?: (e: CustomEvent) => void;
-  /** Fired when the `opened` property changes. */
-  "on:opened-changed"?: (e: CustomEvent) => void;
-  /** Fired when the `value` property changes. */
-  "on:value-changed"?: (e: CustomEvent) => void;
-  /** Fired whenever the field is validated. */
-  "on:validated"?: (e: CustomEvent) => void;
-
-  /** Set the innerHTML of the element */
-  innerHTML?: string;
-  /** Set the textContent of the element */
-  textContent?: string | number;
-};
-
-export type DateTimePickerProps = {
-  /** Set when the element is disabled */
-  disabled?: DateTimePicker["disabled"];
-  /** Set when the element is focused */
-  focused?: unknown;
   /** Set when the element is focused */
-  undefined?: unknown;
+  "prop:undefined"?: unknown;
   /** Set when the element is keyboard focused */
-  "focus-ring"?: unknown;
+  "bool:focus-ring"?: unknown;
   /** Set when the element is readonly */
-  readonly?: DateTimePicker["readonly"];
+  "prop:readonly"?: DateTimePicker["readonly"];
   /** Set when the element is invalid */
-  invalid?: unknown;
+  "bool:invalid"?: unknown;
   /** Set when the element has a label */
-  "has-label"?: unknown;
+  "bool:has-label"?: unknown;
   /** Set when the element has a value */
-  "has-value"?: unknown;
+  "bool:has-value"?: unknown;
   /** Set when the element has helper text */
-  "has-helper"?: unknown;
+  "bool:has-helper"?: unknown;
   /** Set when the element has an error message */
-  "has-error-message"?: unknown;
+  "bool:has-error-message"?: unknown;
   /** Set when the element has a slotted tooltip */
-  "has-tooltip"?: unknown;
+  "bool:has-tooltip"?: unknown;
   /** The name of the control, which is submitted with the form data. */
-  name?: DateTimePicker["name"];
+  "prop:name"?: DateTimePicker["name"];
   /** The value for this element.
 
 Supported date time format is based on ISO 8601 (without a time zone designator):
 - Minute precision `"YYYY-MM-DDThh:mm"` (default)
 - Second precision `"YYYY-MM-DDThh:mm:ss"`
 - Millisecond precision `"YYYY-MM-DDThh:mm:ss.fff"` */
-  value?: DateTimePicker["value"];
+  "prop:value"?: DateTimePicker["value"];
   /** The earliest allowed value (date and time) that can be selected. All earlier values will be disabled.
 
 Supported date time format is based on ISO 8601 (without a time zone designator):
 - Minute precision `"YYYY-MM-DDThh:mm"`
 - Second precision `"YYYY-MM-DDThh:mm:ss"`
 - Millisecond precision `"YYYY-MM-DDThh:mm:ss.fff"` */
-  min?: DateTimePicker["min"];
+  "prop:min"?: DateTimePicker["min"];
   /** The latest value (date and time) that can be selected. All later values will be disabled.
 
 Supported date time format is based on ISO 8601 (without a time zone designator):
 - Minute precision `"YYYY-MM-DDThh:mm"`
 - Second precision `"YYYY-MM-DDThh:mm:ss"`
 - Millisecond precision `"YYYY-MM-DDThh:mm:ss.fff"` */
-  max?: DateTimePicker["max"];
+  "prop:max"?: DateTimePicker["max"];
   /** The earliest value that can be selected. All earlier values will be disabled. */
-  __minDateTime?: DateTimePicker["__minDateTime"];
+  "prop:__minDateTime"?: DateTimePicker["__minDateTime"];
   /** The latest value that can be selected. All later values will be disabled. */
-  __maxDateTime?: DateTimePicker["__maxDateTime"];
+  "prop:__maxDateTime"?: DateTimePicker["__maxDateTime"];
   /** A placeholder string for the date field. */
-  datePlaceholder?: DateTimePicker["datePlaceholder"];
+  "prop:datePlaceholder"?: DateTimePicker["datePlaceholder"];
   /** A placeholder string for the time field. */
-  timePlaceholder?: DateTimePicker["timePlaceholder"];
+  "prop:timePlaceholder"?: DateTimePicker["timePlaceholder"];
   /** Defines the time interval (in seconds) between the items displayed
 in the time selection box. The default is 1 hour (i.e. `3600`).
 
@@ -7818,165 +7544,32 @@ in the dropdown, it need to evenly divide a day.
 Note: it is possible to define step that is dividing an hour in inexact
 fragments (i.e. 5760 seconds which equals 1 hour 36 minutes), but it is
 not recommended to use it for better UX. */
-  step?: DateTimePicker["step"];
+  "prop:step"?: DateTimePicker["step"];
   /** Date which should be visible in the date picker overlay when there is no value selected.
 
 The same date formats as for the `value` property are supported but without the time part. */
-  initialPosition?: DateTimePicker["initialPosition"];
+  "prop:initialPosition"?: DateTimePicker["initialPosition"];
   /** Set true to display ISO-8601 week numbers in the calendar. Notice that
 displaying week numbers is only supported when `i18n.firstDayOfWeek`
 is 1 (Monday). */
-  showWeekNumbers?: DateTimePicker["showWeekNumbers"];
+  "prop:showWeekNumbers"?: DateTimePicker["showWeekNumbers"];
   /** Set to true to prevent the overlays from opening automatically. */
-  autoOpenDisabled?: DateTimePicker["autoOpenDisabled"];
+  "prop:autoOpenDisabled"?: DateTimePicker["autoOpenDisabled"];
   /** Specify that this control should have input focus when the page loads. */
-  autofocus?: DateTimePicker["autofocus"];
+  "prop:autofocus"?: DateTimePicker["autofocus"];
   /** The current selected date time. */
-  __selectedDateTime?: DateTimePicker["__selectedDateTime"];
+  "prop:__selectedDateTime"?: DateTimePicker["__selectedDateTime"];
   /** The current slotted date picker. */
-  __datePicker?: DateTimePicker["__datePicker"];
+  "prop:__datePicker"?: DateTimePicker["__datePicker"];
   /** The current slotted time picker. */
-  __timePicker?: DateTimePicker["__timePicker"];
+  "prop:__timePicker"?: DateTimePicker["__timePicker"];
   /** The object used to localize this component. To change the default
 localization, replace this with an object that provides all properties, or
 just the individual properties you want to change.
 
 Should be overridden by subclasses to provide a custom JSDoc with the
 default I18N properties. */
-  i18n?: DateTimePicker["i18n"];
-  /**  */
-  __effectiveI18n?: DateTimePicker["__effectiveI18n"];
-  /** A target element to which ARIA attributes are set. */
-  ariaTarget?: DateTimePicker["ariaTarget"];
-  /** Error to show when the field is invalid. */
-  errorMessage?: DateTimePicker["errorMessage"];
-  /** String used for the helper text. */
-  helperText?: DateTimePicker["helperText"];
-  /** String used to label the component to screen reader users. */
-  accessibleName?: DateTimePicker["accessibleName"];
-  /** Id of the element used as label of the component to screen reader users. */
-  accessibleNameRef?: DateTimePicker["accessibleNameRef"];
-  /**  */
-  dir?: DateTimePicker["dir"];
-  /**  */
-  __defaultDateMinMaxValue?: DateTimePicker["__defaultDateMinMaxValue"];
-  /**  */
-  __defaultTimeMinValue?: DateTimePicker["__defaultTimeMinValue"];
-  /**  */
-  __defaultTimeMaxValue?: DateTimePicker["__defaultTimeMaxValue"];
-  /**  */
-  _fieldAriaController?: DateTimePicker["_fieldAriaController"];
-  /**  */
-  _helperController?: DateTimePicker["_helperController"];
-  /**  */
-  _errorController?: DateTimePicker["_errorController"];
-
-  /** Fired when the user commits a value change. */
-  onchange?: (e: CustomEvent) => void;
-  /** Fired when the user commits an unparsable or incomplete value change and there is no change event. */
-  "onunparsable-change"?: (e: CustomEvent) => void;
-  /** Fired when the `invalid` property changes. */
-  "oninvalid-changed"?: (e: CustomEvent) => void;
-  /** Fired when the `value` property changes. */
-  "onvalue-changed"?: (e: CustomEvent) => void;
-  /** Fired whenever the field is validated. */
-  onvalidated?: (e: CustomEvent) => void;
-};
-
-export type DateTimePickerSolidJsProps = {
-  /** Set when the element is disabled */
-  "prop:disabled"?: DateTimePicker["disabled"];
-  /** Set when the element is focused */
-  "bool:focused"?: unknown;
-  /** Set when the element is focused */
-  "prop:undefined"?: unknown;
-  /** Set when the element is keyboard focused */
-  "bool:focus-ring"?: unknown;
-  /** Set when the element is readonly */
-  "prop:readonly"?: DateTimePicker["readonly"];
-  /** Set when the element is invalid */
-  "bool:invalid"?: unknown;
-  /** Set when the element has a label */
-  "bool:has-label"?: unknown;
-  /** Set when the element has a value */
-  "bool:has-value"?: unknown;
-  /** Set when the element has helper text */
-  "bool:has-helper"?: unknown;
-  /** Set when the element has an error message */
-  "bool:has-error-message"?: unknown;
-  /** Set when the element has a slotted tooltip */
-  "bool:has-tooltip"?: unknown;
-  /** The name of the control, which is submitted with the form data. */
-  "prop:name"?: DateTimePicker["name"];
-  /** The value for this element.
-
-Supported date time format is based on ISO 8601 (without a time zone designator):
-- Minute precision `"YYYY-MM-DDThh:mm"` (default)
-- Second precision `"YYYY-MM-DDThh:mm:ss"`
-- Millisecond precision `"YYYY-MM-DDThh:mm:ss.fff"` */
-  "prop:value"?: DateTimePicker["value"];
-  /** The earliest allowed value (date and time) that can be selected. All earlier values will be disabled.
-
-Supported date time format is based on ISO 8601 (without a time zone designator):
-- Minute precision `"YYYY-MM-DDThh:mm"`
-- Second precision `"YYYY-MM-DDThh:mm:ss"`
-- Millisecond precision `"YYYY-MM-DDThh:mm:ss.fff"` */
-  "prop:min"?: DateTimePicker["min"];
-  /** The latest value (date and time) that can be selected. All later values will be disabled.
-
-Supported date time format is based on ISO 8601 (without a time zone designator):
-- Minute precision `"YYYY-MM-DDThh:mm"`
-- Second precision `"YYYY-MM-DDThh:mm:ss"`
-- Millisecond precision `"YYYY-MM-DDThh:mm:ss.fff"` */
-  "prop:max"?: DateTimePicker["max"];
-  /** The earliest value that can be selected. All earlier values will be disabled. */
-  "prop:__minDateTime"?: DateTimePicker["__minDateTime"];
-  /** The latest value that can be selected. All later values will be disabled. */
-  "prop:__maxDateTime"?: DateTimePicker["__maxDateTime"];
-  /** A placeholder string for the date field. */
-  "prop:datePlaceholder"?: DateTimePicker["datePlaceholder"];
-  /** A placeholder string for the time field. */
-  "prop:timePlaceholder"?: DateTimePicker["timePlaceholder"];
-  /** Defines the time interval (in seconds) between the items displayed
-in the time selection box. The default is 1 hour (i.e. `3600`).
-
-It also configures the precision of the time part of the value string. By default
-the component formats time values as `hh:mm` but setting a step value
-lower than one minute or one second, format resolution changes to
-`hh:mm:ss` and `hh:mm:ss.fff` respectively.
-
-Unit must be set in seconds, and for correctly configuring intervals
-in the dropdown, it need to evenly divide a day.
-
-Note: it is possible to define step that is dividing an hour in inexact
-fragments (i.e. 5760 seconds which equals 1 hour 36 minutes), but it is
-not recommended to use it for better UX. */
-  "prop:step"?: DateTimePicker["step"];
-  /** Date which should be visible in the date picker overlay when there is no value selected.
-
-The same date formats as for the `value` property are supported but without the time part. */
-  "prop:initialPosition"?: DateTimePicker["initialPosition"];
-  /** Set true to display ISO-8601 week numbers in the calendar. Notice that
-displaying week numbers is only supported when `i18n.firstDayOfWeek`
-is 1 (Monday). */
-  "prop:showWeekNumbers"?: DateTimePicker["showWeekNumbers"];
-  /** Set to true to prevent the overlays from opening automatically. */
-  "prop:autoOpenDisabled"?: DateTimePicker["autoOpenDisabled"];
-  /** Specify that this control should have input focus when the page loads. */
-  "prop:autofocus"?: DateTimePicker["autofocus"];
-  /** The current selected date time. */
-  "prop:__selectedDateTime"?: DateTimePicker["__selectedDateTime"];
-  /** The current slotted date picker. */
-  "prop:__datePicker"?: DateTimePicker["__datePicker"];
-  /** The current slotted time picker. */
-  "prop:__timePicker"?: DateTimePicker["__timePicker"];
-  /** The object used to localize this component. To change the default
-localization, replace this with an object that provides all properties, or
-just the individual properties you want to change.
-
-Should be overridden by subclasses to provide a custom JSDoc with the
-default I18N properties. */
-  "prop:i18n"?: DateTimePicker["i18n"];
+  "prop:i18n"?: DateTimePicker["i18n"];
   /**  */
   "prop:__effectiveI18n"?: DateTimePicker["__effectiveI18n"];
   /** A target element to which ARIA attributes are set. */
@@ -8372,70 +7965,477 @@ so that it stays within the viewport. */
   textContent?: string | number;
 };
 
-export type IconProps = {
-  /** Set when the icon has a slotted tooltip */
-  "has-tooltip"?: unknown;
-  /** Set when the icon has a slotted tooltip */
-  undefined?: unknown;
+export type DatePickerYearProps = {
   /**  */
-  class?: unknown;
-  /** The name of the icon to use. The name should be of the form:
-`iconset_name:icon_name`. When using `vaadin-icons` it is possible
-to omit the first part and only use `icon_name` as a value.
-
-Setting the `icon` property updates the `svg` and `size` based on the
-values provided by the corresponding `vaadin-iconset` element.
-
-See also [`name`](#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`. */
-  icon?: Icon["icon"];
-  /** The SVG icon wrapped in a Lit template literal. */
-  svg?: Icon["svg"];
-  /** The SVG source to be loaded as the icon. It can be:
-- an URL to a file containing the icon
-- an URL in the format `/path/to/file.svg#objectID`, where the `objectID` refers to an ID attribute contained
-  inside the SVG referenced by the path. Note that the file needs to follow the same-origin policy.
-- a string in the format `data:image/svg+xml,<svg>...</svg>`. You may need to use the `encodeURIComponent`
-  function for the SVG content passed */
-  src?: Icon["src"];
-  /** The symbol identifier that references an ID of an element contained in the SVG element assigned to the
-`src` property */
-  symbol?: Icon["symbol"];
-  /** Class names defining an icon font and/or a specific glyph inside an icon font.
+  year?: DatePickerYear["year"];
+  /**  */
+  selectedDate?: DatePickerYear["selectedDate"];
+};
 
-Example: "fa-solid fa-user" */
-  iconClass?: Icon["iconClass"];
-  /** A hexadecimal code point that specifies a glyph from an icon font.
+export type DatePickerYearSolidJsProps = {
+  /**  */
+  "prop:year"?: DatePickerYear["year"];
+  /**  */
+  "prop:selectedDate"?: DatePickerYear["selectedDate"];
 
-Example: "e001" */
-  char?: Icon["char"];
-  /** A ligature name that specifies an icon from an icon font with support for ligatures.
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
 
-Example: "home". */
-  ligature?: Icon["ligature"];
-  /** The font family to use for the font icon. */
-  fontFamily?: Icon["fontFamily"];
-  /** The size of an icon, used to set the `viewBox` attribute. */
-  size?: Icon["size"];
+export type DatePickerProps = {
   /**  */
-  __preserveAspectRatio?: Icon["__preserveAspectRatio"];
+  _positionTarget?: DatePicker["_positionTarget"];
+  /** Set when the element is disabled */
+  disabled?: unknown;
+  /** Set when the element is disabled */
+  undefined?: unknown;
+  /** Set when the element has a value */
+  "has-value"?: unknown;
+  /** Set when the element has a label */
+  "has-label"?: unknown;
+  /** Set when the element has helper text or slot */
+  "has-helper"?: unknown;
+  /** Set when the element has an error message */
+  "has-error-message"?: unknown;
+  /** Set when the element has a slotted tooltip */
+  "has-tooltip"?: unknown;
+  /** Set when the element is invalid */
+  invalid?: unknown;
+  /** Set when the element is focused */
+  focused?: unknown;
+  /** Set when the element is keyboard focused */
+  "focus-ring"?: unknown;
+  /** Set when the element is readonly */
+  readonly?: DatePicker["readonly"];
+  /** Set when the overlay is opened */
+  opened?: DatePicker["opened"];
+  /** Set when week numbers are shown in the calendar */
+  "week-numbers"?: unknown;
   /**  */
-  __useRef?: Icon["__useRef"];
+  "<vaadin-date-picker>"?: unknown;
   /**  */
-  __viewBox?: Icon["__viewBox"];
+  "<vaadin-date-picker-overlay-content>"?: unknown;
   /**  */
-  __fill?: Icon["__fill"];
+  "<vaadin-date-picker-month-scroller>"?: unknown;
   /**  */
-  __stroke?: Icon["__stroke"];
+  "<vaadin-date-picker-year-scroller>"?: unknown;
   /**  */
-  __strokeWidth?: Icon["__strokeWidth"];
+  "<vaadin-date-picker-year>"?: unknown;
   /**  */
-  __strokeLinecap?: Icon["__strokeLinecap"];
+  "<vaadin-month-calendar>"?: unknown;
+  /** Fullscreen mode years scroller toggle */
+  "years-toggle-button"?: unknown;
+  /** Toolbar with slotted buttons */
+  toolbar?: unknown;
+  /** The current selected date. */
+  _selectedDate?: DatePicker["_selectedDate"];
   /**  */
-  __strokeLinejoin?: Icon["__strokeLinejoin"];
+  _focusedDate?: DatePicker["_focusedDate"];
+  /** Selected date.
+
+Supported date formats:
+- ISO 8601 `"YYYY-MM-DD"` (default)
+- 6-digit extended ISO 8601 `"+YYYYYY-MM-DD"`, `"-YYYYYY-MM-DD"` */
+  value?: DatePicker["value"];
+  /** Date which should be visible when there is no value selected.
+
+The same date formats as for the `value` property are supported. */
+  initialPosition?: DatePicker["initialPosition"];
+  /** Set true to prevent the overlay from opening automatically. */
+  autoOpenDisabled?: DatePicker["autoOpenDisabled"];
+  /** Set true to display ISO-8601 week numbers in the calendar. Notice that
+displaying week numbers is only supported when `i18n.firstDayOfWeek`
+is 1 (Monday). */
+  showWeekNumbers?: DatePicker["showWeekNumbers"];
   /**  */
-  dir?: Icon["dir"];
+  _fullscreen?: DatePicker["_fullscreen"];
   /**  */
-  __fetch?: Icon["__fetch"];
+  _fullscreenMediaQuery?: DatePicker["_fullscreenMediaQuery"];
+  /** The earliest date that can be selected. All earlier dates will be disabled.
+
+Supported date formats:
+- ISO 8601 `"YYYY-MM-DD"` (default)
+- 6-digit extended ISO 8601 `"+YYYYYY-MM-DD"`, `"-YYYYYY-MM-DD"` */
+  min?: DatePicker["min"];
+  /** The latest date that can be selected. All later dates will be disabled.
+
+Supported date formats:
+- ISO 8601 `"YYYY-MM-DD"` (default)
+- 6-digit extended ISO 8601 `"+YYYYYY-MM-DD"`, `"-YYYYYY-MM-DD"` */
+  max?: DatePicker["max"];
+  /** A function to be used to determine whether the user can select a given date.
+Receives a `DatePickerDate` object of the date to be selected and should return a
+boolean. */
+  isDateDisabled?: DatePicker["isDateDisabled"];
+  /** The earliest date that can be selected. All earlier dates will be disabled. */
+  _minDate?: DatePicker["_minDate"];
+  /** The latest date that can be selected. All later dates will be disabled. */
+  _maxDate?: DatePicker["_maxDate"];
+  /**  */
+  _noInput?: DatePicker["_noInput"];
+  /**  */
+  _ios?: DatePicker["_ios"];
+  /**  */
+  _focusOverlayOnOpen?: DatePicker["_focusOverlayOnOpen"];
+  /**  */
+  _overlayContent?: DatePicker["_overlayContent"];
+  /**  */
+  __enteredDate?: DatePicker["__enteredDate"];
+  /** The object used to localize this component. To change the default
+localization, replace this with an object that provides all properties, or
+just the individual properties you want to change.
+
+Should be overridden by subclasses to provide a custom JSDoc with the
+default I18N properties. */
+  i18n?: DatePicker["i18n"];
+  /**  */
+  __effectiveI18n?: DatePicker["__effectiveI18n"];
+  /** Specify that this control should have input focus when the page loads. */
+  autofocus?: DatePicker["autofocus"];
+  /** A reference to the focusable element controlled by the mixin.
+It can be an input, textarea, button or any element with tabindex > -1.
+
+Any component implementing this mixin is expected to provide it
+by using `this._setFocusElement(input)` Polymer API.
+
+Toggling `tabindex` attribute on the host element propagates its value to `focusElement`. */
+  focusElement?: DatePicker["focusElement"];
+  /** Override the property from `TabIndexMixin`
+to ensure the `tabindex` attribute of the focus element
+will be restored to `0` after re-enabling the element. */
+  _lastTabIndex?: DatePicker["_lastTabIndex"];
+  /** A pattern matched against individual characters the user inputs.
+
+When set, the field will prevent:
+- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`
+- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`
+- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`
+
+For example, to allow entering only numbers and minus signs, use:
+`allowedCharPattern = "[\\d-]"` */
+  allowedCharPattern?: DatePicker["allowedCharPattern"];
+  /** If true, the input text gets fully selected when the field is focused using click or touch / tap. */
+  autoselect?: DatePicker["autoselect"];
+  /** The name of this field. */
+  name?: DatePicker["name"];
+  /** A hint to the user of what can be entered in the field. */
+  placeholder?: DatePicker["placeholder"];
+  /** The text usually displayed in a tooltip popup when the mouse is over the field. */
+  title?: DatePicker["title"];
+  /** A target element to which ARIA attributes are set. */
+  ariaTarget?: DatePicker["ariaTarget"];
+  /** Error to show when the field is invalid. */
+  errorMessage?: DatePicker["errorMessage"];
+  /** String used for the helper text. */
+  helperText?: DatePicker["helperText"];
+  /** String used to label the component to screen reader users. */
+  accessibleName?: DatePicker["accessibleName"];
+  /** Id of the element used as label of the component to screen reader users. */
+  accessibleNameRef?: DatePicker["accessibleNameRef"];
+  /** Set to true to display the clear icon which clears the input.
+This also enables clearing the input when pressing Esc key. */
+  clearButtonVisible?: DatePicker["clearButtonVisible"];
+  /**  */
+  dir?: DatePicker["dir"];
+  /**  */
+  _inputElementValue?: DatePicker["_inputElementValue"];
+  /**  */
+  _boundOnClick?: DatePicker["_boundOnClick"];
+  /**  */
+  _boundOnScroll?: DatePicker["_boundOnScroll"];
+  /**  */
+  _boundOnBlur?: DatePicker["_boundOnBlur"];
+  /**  */
+  _boundOnFocus?: DatePicker["_boundOnFocus"];
+  /**  */
+  _boundOnPaste?: DatePicker["_boundOnPaste"];
+  /**  */
+  _boundOnDrop?: DatePicker["_boundOnDrop"];
+  /**  */
+  _boundOnBeforeInput?: DatePicker["_boundOnBeforeInput"];
+  /**  */
+  _fieldAriaController?: DatePicker["_fieldAriaController"];
+  /**  */
+  _helperController?: DatePicker["_helperController"];
+  /**  */
+  _errorController?: DatePicker["_errorController"];
+
+  /** Fired when the user commits a value change. */
+  onchange?: (e: CustomEvent) => void;
+  /** Fired when the user commits an unparsable value change and there is no change event. */
+  "onunparsable-change"?: (e: CustomEvent) => void;
+  /** Fired when the `invalid` property changes. */
+  "oninvalid-changed"?: (e: CustomEvent) => void;
+  /** Fired when the `opened` property changes. */
+  "onopened-changed"?: (e: CustomEvent) => void;
+  /** Fired when the `value` property changes. */
+  "onvalue-changed"?: (e: CustomEvent) => void;
+  /** Fired whenever the field is validated. */
+  onvalidated?: (e: CustomEvent) => void;
+};
+
+export type DatePickerSolidJsProps = {
+  /**  */
+  "prop:_positionTarget"?: DatePicker["_positionTarget"];
+  /** Set when the element is disabled */
+  "bool:disabled"?: unknown;
+  /** Set when the element is disabled */
+  "prop:undefined"?: unknown;
+  /** Set when the element has a value */
+  "bool:has-value"?: unknown;
+  /** Set when the element has a label */
+  "bool:has-label"?: unknown;
+  /** Set when the element has helper text or slot */
+  "bool:has-helper"?: unknown;
+  /** Set when the element has an error message */
+  "bool:has-error-message"?: unknown;
+  /** Set when the element has a slotted tooltip */
+  "bool:has-tooltip"?: unknown;
+  /** Set when the element is invalid */
+  "bool:invalid"?: unknown;
+  /** Set when the element is focused */
+  "bool:focused"?: unknown;
+  /** Set when the element is keyboard focused */
+  "bool:focus-ring"?: unknown;
+  /** Set when the element is readonly */
+  "prop:readonly"?: DatePicker["readonly"];
+  /** Set when the overlay is opened */
+  "prop:opened"?: DatePicker["opened"];
+  /** Set when week numbers are shown in the calendar */
+  "bool:week-numbers"?: unknown;
+  /**  */
+  "bool:<vaadin-date-picker>"?: unknown;
+  /**  */
+  "bool:<vaadin-date-picker-overlay-content>"?: unknown;
+  /**  */
+  "bool:<vaadin-date-picker-month-scroller>"?: unknown;
+  /**  */
+  "bool:<vaadin-date-picker-year-scroller>"?: unknown;
+  /**  */
+  "bool:<vaadin-date-picker-year>"?: unknown;
+  /**  */
+  "bool:<vaadin-month-calendar>"?: unknown;
+  /** Fullscreen mode years scroller toggle */
+  "bool:years-toggle-button"?: unknown;
+  /** Toolbar with slotted buttons */
+  "bool:toolbar"?: unknown;
+  /** The current selected date. */
+  "prop:_selectedDate"?: DatePicker["_selectedDate"];
+  /**  */
+  "prop:_focusedDate"?: DatePicker["_focusedDate"];
+  /** Selected date.
+
+Supported date formats:
+- ISO 8601 `"YYYY-MM-DD"` (default)
+- 6-digit extended ISO 8601 `"+YYYYYY-MM-DD"`, `"-YYYYYY-MM-DD"` */
+  "prop:value"?: DatePicker["value"];
+  /** Date which should be visible when there is no value selected.
+
+The same date formats as for the `value` property are supported. */
+  "prop:initialPosition"?: DatePicker["initialPosition"];
+  /** Set true to prevent the overlay from opening automatically. */
+  "prop:autoOpenDisabled"?: DatePicker["autoOpenDisabled"];
+  /** Set true to display ISO-8601 week numbers in the calendar. Notice that
+displaying week numbers is only supported when `i18n.firstDayOfWeek`
+is 1 (Monday). */
+  "prop:showWeekNumbers"?: DatePicker["showWeekNumbers"];
+  /**  */
+  "prop:_fullscreen"?: DatePicker["_fullscreen"];
+  /**  */
+  "prop:_fullscreenMediaQuery"?: DatePicker["_fullscreenMediaQuery"];
+  /** The earliest date that can be selected. All earlier dates will be disabled.
+
+Supported date formats:
+- ISO 8601 `"YYYY-MM-DD"` (default)
+- 6-digit extended ISO 8601 `"+YYYYYY-MM-DD"`, `"-YYYYYY-MM-DD"` */
+  "prop:min"?: DatePicker["min"];
+  /** The latest date that can be selected. All later dates will be disabled.
+
+Supported date formats:
+- ISO 8601 `"YYYY-MM-DD"` (default)
+- 6-digit extended ISO 8601 `"+YYYYYY-MM-DD"`, `"-YYYYYY-MM-DD"` */
+  "prop:max"?: DatePicker["max"];
+  /** A function to be used to determine whether the user can select a given date.
+Receives a `DatePickerDate` object of the date to be selected and should return a
+boolean. */
+  "prop:isDateDisabled"?: DatePicker["isDateDisabled"];
+  /** The earliest date that can be selected. All earlier dates will be disabled. */
+  "prop:_minDate"?: DatePicker["_minDate"];
+  /** The latest date that can be selected. All later dates will be disabled. */
+  "prop:_maxDate"?: DatePicker["_maxDate"];
+  /**  */
+  "prop:_noInput"?: DatePicker["_noInput"];
+  /**  */
+  "prop:_ios"?: DatePicker["_ios"];
+  /**  */
+  "prop:_focusOverlayOnOpen"?: DatePicker["_focusOverlayOnOpen"];
+  /**  */
+  "prop:_overlayContent"?: DatePicker["_overlayContent"];
+  /**  */
+  "prop:__enteredDate"?: DatePicker["__enteredDate"];
+  /** The object used to localize this component. To change the default
+localization, replace this with an object that provides all properties, or
+just the individual properties you want to change.
+
+Should be overridden by subclasses to provide a custom JSDoc with the
+default I18N properties. */
+  "prop:i18n"?: DatePicker["i18n"];
+  /**  */
+  "prop:__effectiveI18n"?: DatePicker["__effectiveI18n"];
+  /** Specify that this control should have input focus when the page loads. */
+  "prop:autofocus"?: DatePicker["autofocus"];
+  /** A reference to the focusable element controlled by the mixin.
+It can be an input, textarea, button or any element with tabindex > -1.
+
+Any component implementing this mixin is expected to provide it
+by using `this._setFocusElement(input)` Polymer API.
+
+Toggling `tabindex` attribute on the host element propagates its value to `focusElement`. */
+  "prop:focusElement"?: DatePicker["focusElement"];
+  /** Override the property from `TabIndexMixin`
+to ensure the `tabindex` attribute of the focus element
+will be restored to `0` after re-enabling the element. */
+  "prop:_lastTabIndex"?: DatePicker["_lastTabIndex"];
+  /** A pattern matched against individual characters the user inputs.
+
+When set, the field will prevent:
+- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`
+- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`
+- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`
+
+For example, to allow entering only numbers and minus signs, use:
+`allowedCharPattern = "[\\d-]"` */
+  "prop:allowedCharPattern"?: DatePicker["allowedCharPattern"];
+  /** If true, the input text gets fully selected when the field is focused using click or touch / tap. */
+  "prop:autoselect"?: DatePicker["autoselect"];
+  /** The name of this field. */
+  "prop:name"?: DatePicker["name"];
+  /** A hint to the user of what can be entered in the field. */
+  "prop:placeholder"?: DatePicker["placeholder"];
+  /** The text usually displayed in a tooltip popup when the mouse is over the field. */
+  "prop:title"?: DatePicker["title"];
+  /** A target element to which ARIA attributes are set. */
+  "prop:ariaTarget"?: DatePicker["ariaTarget"];
+  /** Error to show when the field is invalid. */
+  "prop:errorMessage"?: DatePicker["errorMessage"];
+  /** String used for the helper text. */
+  "prop:helperText"?: DatePicker["helperText"];
+  /** String used to label the component to screen reader users. */
+  "prop:accessibleName"?: DatePicker["accessibleName"];
+  /** Id of the element used as label of the component to screen reader users. */
+  "prop:accessibleNameRef"?: DatePicker["accessibleNameRef"];
+  /** Set to true to display the clear icon which clears the input.
+This also enables clearing the input when pressing Esc key. */
+  "prop:clearButtonVisible"?: DatePicker["clearButtonVisible"];
+  /**  */
+  "prop:dir"?: DatePicker["dir"];
+  /**  */
+  "prop:_inputElementValue"?: DatePicker["_inputElementValue"];
+  /**  */
+  "prop:_boundOnClick"?: DatePicker["_boundOnClick"];
+  /**  */
+  "prop:_boundOnScroll"?: DatePicker["_boundOnScroll"];
+  /**  */
+  "prop:_boundOnBlur"?: DatePicker["_boundOnBlur"];
+  /**  */
+  "prop:_boundOnFocus"?: DatePicker["_boundOnFocus"];
+  /**  */
+  "prop:_boundOnPaste"?: DatePicker["_boundOnPaste"];
+  /**  */
+  "prop:_boundOnDrop"?: DatePicker["_boundOnDrop"];
+  /**  */
+  "prop:_boundOnBeforeInput"?: DatePicker["_boundOnBeforeInput"];
+  /**  */
+  "prop:_fieldAriaController"?: DatePicker["_fieldAriaController"];
+  /**  */
+  "prop:_helperController"?: DatePicker["_helperController"];
+  /**  */
+  "prop:_errorController"?: DatePicker["_errorController"];
+  /** Fired when the user commits a value change. */
+  "on:change"?: (e: CustomEvent) => void;
+  /** Fired when the user commits an unparsable value change and there is no change event. */
+  "on:unparsable-change"?: (e: CustomEvent) => void;
+  /** Fired when the `invalid` property changes. */
+  "on:invalid-changed"?: (e: CustomEvent) => void;
+  /** Fired when the `opened` property changes. */
+  "on:opened-changed"?: (e: CustomEvent) => void;
+  /** Fired when the `value` property changes. */
+  "on:value-changed"?: (e: CustomEvent) => void;
+  /** Fired whenever the field is validated. */
+  "on:validated"?: (e: CustomEvent) => void;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
+
+export type IconProps = {
+  /** Set when the icon has a slotted tooltip */
+  "has-tooltip"?: unknown;
+  /** Set when the icon has a slotted tooltip */
+  undefined?: unknown;
+  /**  */
+  class?: unknown;
+  /** The name of the icon to use. The name should be of the form:
+`iconset_name:icon_name`. When using `vaadin-icons` it is possible
+to omit the first part and only use `icon_name` as a value.
+
+Setting the `icon` property updates the `svg` and `size` based on the
+values provided by the corresponding `vaadin-iconset` element.
+
+See also [`name`](#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`. */
+  icon?: Icon["icon"];
+  /** The SVG icon wrapped in a Lit template literal. */
+  svg?: Icon["svg"];
+  /** The SVG source to be loaded as the icon. It can be:
+- an URL to a file containing the icon
+- an URL in the format `/path/to/file.svg#objectID`, where the `objectID` refers to an ID attribute contained
+  inside the SVG referenced by the path. Note that the file needs to follow the same-origin policy.
+- a string in the format `data:image/svg+xml,<svg>...</svg>`. You may need to use the `encodeURIComponent`
+  function for the SVG content passed */
+  src?: Icon["src"];
+  /** The symbol identifier that references an ID of an element contained in the SVG element assigned to the
+`src` property */
+  symbol?: Icon["symbol"];
+  /** Class names defining an icon font and/or a specific glyph inside an icon font.
+
+Example: "fa-solid fa-user" */
+  iconClass?: Icon["iconClass"];
+  /** A hexadecimal code point that specifies a glyph from an icon font.
+
+Example: "e001" */
+  char?: Icon["char"];
+  /** A ligature name that specifies an icon from an icon font with support for ligatures.
+
+Example: "home". */
+  ligature?: Icon["ligature"];
+  /** The font family to use for the font icon. */
+  fontFamily?: Icon["fontFamily"];
+  /** The size of an icon, used to set the `viewBox` attribute. */
+  size?: Icon["size"];
+  /**  */
+  __preserveAspectRatio?: Icon["__preserveAspectRatio"];
+  /**  */
+  __useRef?: Icon["__useRef"];
+  /**  */
+  __viewBox?: Icon["__viewBox"];
+  /**  */
+  __fill?: Icon["__fill"];
+  /**  */
+  __stroke?: Icon["__stroke"];
+  /**  */
+  __strokeWidth?: Icon["__strokeWidth"];
+  /**  */
+  __strokeLinecap?: Icon["__strokeLinecap"];
+  /**  */
+  __strokeLinejoin?: Icon["__strokeLinejoin"];
+  /**  */
+  dir?: Icon["dir"];
+  /**  */
+  __fetch?: Icon["__fetch"];
 };
 
 export type IconSolidJsProps = {
@@ -17132,266 +17132,18 @@ export type CustomElements = {
     ContextMenuOverlayProps & BaseProps<ContextMenuOverlay> & BaseEvents
   >;
 
-  /**
-   * `<vaadin-context-menu>` is a Web Component for creating context menus.
-   *
-   * ### Items
-   *
-   * Items is a higher level convenience API for defining a (hierarchical) menu structure for the component.
-   * If a menu item has a non-empty `children` set, a sub-menu with the child items is opened
-   * next to the parent menu on mouseover, tap or a right arrow keypress.
-   *
-   * When an item is selected, `<vaadin-context-menu>` dispatches an "item-selected" event
-   * with the selected item as `event.detail.value` property.
-   * If item does not have `keepOpen` property the menu will be closed.
-   *
-   * ```javascript
-   * contextMenu.items = [
-   *   { text: 'Menu Item 1', theme: 'primary', className: 'first', children:
-   *     [
-   *       { text: 'Menu Item 1-1', checked: true, keepOpen: true },
-   *       { text: 'Menu Item 1-2' }
-   *     ]
-   *   },
-   *   { component: 'hr' },
-   *   { text: 'Menu Item 2', children:
-   *     [
-   *       { text: 'Menu Item 2-1' },
-   *       { text: 'Menu Item 2-2', disabled: true }
-   *     ]
-   *   },
-   *   { text: 'Menu Item 3', disabled: true, className: 'last' }
-   * ];
-   *
-   * contextMenu.addEventListener('item-selected', e => {
-   *   const item = e.detail.value;
-   *   console.log(`${item.text} selected`);
-   * });
-   * ```
-   *
-   * **NOTE:** when the `items` array is defined, the renderer cannot be used.
-   *
-   * #### Disabled menu items
-   *
-   * When disabled, menu items are rendered as "dimmed".
-   *
-   * By default, disabled items are not focusable and don't react to hover.
-   * As a result, they are hidden from assistive technologies, and it's not
-   * possible to show a tooltip to explain why they are disabled. This can
-   * be addressed by enabling the feature flag `accessibleDisabledMenuItems`,
-   * which makes disabled items focusable and hoverable, while still
-   * preventing them from being activated:
-   *
-   * ```js
-   * // Set before any context menu is attached to the DOM.
-   * window.Vaadin.featureFlags.accessibleDisabledMenuItems = true;
-   * ```
-   *
-   * #### Item tooltips
-   *
-   * Menu items can have tooltips that are shown on hover and keyboard
-   * focus. To enable them, add a slotted `<vaadin-tooltip>` element
-   * and set the `tooltip` property on each item that should have one:
-   *
-   * ```html
-   * <vaadin-context-menu>
-   *   <vaadin-tooltip slot="tooltip"></vaadin-tooltip>
-   * </vaadin-context-menu>
-   * ```
-   *
-   * ### Rendering
-   *
-   * The content of the menu can be populated by using the renderer callback function.
-   *
-   * The renderer function provides `root`, `contextMenu`, `model` arguments when applicable.
-   * Generate DOM content by using `model` object properties if needed, append it to the `root`
-   * element and control the state of the host element by accessing `contextMenu`. Before generating
-   * new content, the renderer function should check if there is already content in `root` for reusing it.
-   *
-   * ```html
-   * <vaadin-context-menu id="contextMenu">
-   *  <p>This paragraph has a context menu.</p>
-   * </vaadin-context-menu>
-   * ```
-   * ```js
-   * const contextMenu = document.querySelector('#contextMenu');
-   * contextMenu.renderer = (root, contextMenu, context) => {
-   *   let listBox = root.firstElementChild;
-   *   if (!listBox) {
-   *     listBox = document.createElement('vaadin-list-box');
-   *     root.appendChild(listBox);
-   *   }
-   *
-   *   let item = listBox.querySelector('vaadin-item');
-   *   if (!item) {
-   *     item = document.createElement('vaadin-item');
-   *     listBox.appendChild(item);
-   *   }
-   *   item.textContent = 'Content of the selector: ' + context.target.textContent;
-   * };
-   * ```
-   *
-   * You can access the menu context inside the renderer using
-   * `context.target` and `context.detail`.
-   *
-   * Renderer is called on the opening of the context-menu and each time the related context is updated.
-   * DOM generated during the renderer call can be reused
-   * in the next renderer call and will be provided with the `root` argument.
-   * On first call it will be empty.
-   *
-   * ### `vaadin-contextmenu` Gesture Event
-   *
-   * `vaadin-contextmenu` is a gesture event (a custom event),
-   * which is dispatched after either `contextmenu` or long touch events.
-   * This enables support for both mouse and touch environments in a uniform way.
-   *
-   * `<vaadin-context-menu>` opens the menu overlay on the `vaadin-contextmenu`
-   * event by default.
-   *
-   * ### Menu Listener
-   *
-   * By default, the `<vaadin-context-menu>` element listens for the menu opening
-   * event on itself. In case if you do not want to wrap the target, you can listen for
-   * events on an element outside the `<vaadin-context-menu>` by setting the
-   * `listenOn` property:
-   *
-   * ```html
-   * <vaadin-context-menu id="contextMenu"></vaadin-context-menu>
-   *
-   * <div id="menuListener">The element that listens for the contextmenu event.</div>
-   * ```
-   * ```javascript
-   * const contextMenu = document.querySelector('#contextMenu');
-   * contextMenu.listenOn = document.querySelector('#menuListener');
-   * ```
-   *
-   * ### Filtering Menu Targets
-   *
-   * By default, the listener element and all its descendants open the context
-   * menu. You can filter the menu targets to a smaller set of elements inside
-   * the listener element by setting the `selector` property.
-   *
-   * In the following example, only the elements matching `.has-menu` will open the context menu:
-   *
-   * ```html
-   * <vaadin-context-menu selector=".has-menu">
-   *   <p class="has-menu">This paragraph opens the context menu</p>
-   *   <p>This paragraph does not open the context menu</p>
-   * </vaadin-context-menu>
-   * ```
-   *
-   * ### Menu Context
-   *
-   * The following properties are available in the `context` argument:
-   *
-   * - `target` is the menu opening event target, which is the element that
-   * the user has called the context menu for
-   * - `detail` is the menu opening event detail
-   *
-   * In the following example, the menu item text is composed with the contents
-   * of the element that opened the menu:
-   *
-   * ```html
-   * <vaadin-context-menu selector="li" id="contextMenu">
-   *   <ul>
-   *     <li>Foo</li>
-   *     <li>Bar</li>
-   *     <li>Baz</li>
-   *   </ul>
-   * </vaadin-context-menu>
-   * ```
-   * ```js
-   * const contextMenu = document.querySelector('#contextMenu');
-   * contextMenu.renderer = (root, contextMenu, context) => {
-   *   let listBox = root.firstElementChild;
-   *   if (!listBox) {
-   *     listBox = document.createElement('vaadin-list-box');
-   *     root.appendChild(listBox);
-   *   }
-   *
-   *   let item = listBox.querySelector('vaadin-item');
-   *   if (!item) {
-   *     item = document.createElement('vaadin-item');
-   *     listBox.appendChild(item);
-   *   }
-   *   item.textContent = 'The menu target: ' + context.target.textContent;
-   * };
-   * ```
-   *
-   * ### Styling
-   *
-   * The following shadow DOM parts are available for styling:
-   *
-   * Part name        | Description
-   * -----------------|-------------------------------------------
-   * `backdrop`       | Backdrop of the overlay
-   * `overlay`        | The overlay container
-   * `content`        | The overlay content
-   *
-   * ### Custom CSS Properties
-   *
-   * The following custom CSS properties are available for styling:
-   *
-   * Custom CSS property                   | Description
-   * --------------------------------------|-------------
-   * `--vaadin-context-menu-offset-top`    | Used as an offset when using `position` and the context menu is aligned vertically below the target
-   * `--vaadin-context-menu-offset-bottom` | Used as an offset when using `position` and the context menu is aligned vertically above the target
-   * `--vaadin-context-menu-offset-start`  | Used as an offset when using `position` and the context menu is aligned horizontally after the target
-   * `--vaadin-context-menu-offset-end`    | Used as an offset when using `position` and the context menu is aligned horizontally before the target
-   *
-   * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
-   *
-   * ### Internal components
-   *
-   * When using `items` API the following internal components are themable:
-   *
-   * - `<vaadin-context-menu-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
-   * - `<vaadin-context-menu-list-box>` - has the same API as [`<vaadin-list-box>`](#/elements/vaadin-list-box).
-   *
-   * The `<vaadin-context-menu-item>` sub-menu elements have the following additional state attributes
-   * on top of the built-in `<vaadin-item>` state attributes:
-   *
-   * Attribute  | Description
-   * ---------- |-------------
-   * `expanded` | Expanded parent item.
-   *
-   * ## Attributes & Properties
-   *
-   * Component attributes and properties that can be applied to the element or by using JavaScript.
-   *
-   * - `position`: Position of the overlay with respect to the target.
-   * Supported values: null, `top-start`, `top`, `top-end`,
-   * `bottom-start`, `bottom`, `bottom-end`, `start-top`,
-   * `start`, `start-bottom`, `end-top`, `end`, `end-bottom`.
-   * - `<vaadin-item>`/`undefined`: undefined
-   * - `selector`: CSS selector that can be used to target any child element
-   * of the context menu to listen for `openOn` events.
-   * - `opened`: True if the overlay is currently displayed.
-   * - `openOn`: Event name to listen for opening the context menu.
-   * - `listenOn`: The target element that's listened to for context menu opening events.
-   * By default the vaadin-context-menu listens to the target's `vaadin-contextmenu`
-   * events.
-   * - `closeOn`: Event name to listen for closing the context menu.
-   * - `renderer`: Custom function for rendering the content of the menu overlay.
-   * Receives three arguments:
-   *
-   * - `root` The root container DOM element. Append your content to it.
-   * - `contextMenu` The reference to the `<vaadin-context-menu>` element.
-   * - `context` The object with the menu context, contains:
-   *   - `context.target`  the target of the menu opening event,
-   *   - `context.detail` the menu opening event detail.
-   * - `_modeless`: When true, the menu overlay is modeless.
-   * - `_context`: undefined
-   * - `_phone`: undefined
-   * - `_fullscreen`: undefined
-   * - `_fullscreenMediaQuery`: undefined
-   * - `items`: Defines a (hierarchical) menu structure for the component.
+  /**
+   * `<vaadin-context-menu>` is a Web Component for creating context menus.
+   *
+   * ### Items
+   *
+   * Items is a higher level convenience API for defining a (hierarchical) menu structure for the component.
    * If a menu item has a non-empty `children` set, a sub-menu with the child items is opened
    * next to the parent menu on mouseover, tap or a right arrow keypress.
    *
-   * The items API can't be used together with a renderer!
-   *
-   * #### Example
+   * When an item is selected, `<vaadin-context-menu>` dispatches an "item-selected" event
+   * with the selected item as `event.detail.value` property.
+   * If item does not have `keepOpen` property the menu will be closed.
    *
    * ```javascript
    * contextMenu.items = [
@@ -17410,6 +17162,29 @@ export type CustomElements = {
    *   },
    *   { text: 'Menu Item 3', disabled: true, className: 'last' }
    * ];
+   *
+   * contextMenu.addEventListener('item-selected', e => {
+   *   const item = e.detail.value;
+   *   console.log(`${item.text} selected`);
+   * });
+   * ```
+   *
+   * **NOTE:** when the `items` array is defined, the renderer cannot be used.
+   *
+   * #### Disabled menu items
+   *
+   * When disabled, menu items are rendered as "dimmed".
+   *
+   * By default, disabled items are not focusable and don't react to hover.
+   * As a result, they are hidden from assistive technologies, and it's not
+   * possible to show a tooltip to explain why they are disabled. This can
+   * be addressed by enabling the feature flag `accessibleDisabledMenuItems`,
+   * which makes disabled items focusable and hoverable, while still
+   * preventing them from being activated:
+   *
+   * ```js
+   * // Set before any context menu is attached to the DOM.
+   * window.Vaadin.featureFlags.accessibleDisabledMenuItems = true;
    * ```
    *
    * #### Item tooltips
@@ -17423,352 +17198,283 @@ export type CustomElements = {
    *   <vaadin-tooltip slot="tooltip"></vaadin-tooltip>
    * </vaadin-context-menu>
    * ```
-   * - `_positionTarget`: undefined
-   * - `dir`: undefined
-   * - `_boundOpen`: undefined (property only)
-   * - `_boundClose`: undefined (property only)
-   * - `_boundPreventDefault`: undefined (property only)
-   * - `__itemsOutsideClickListener`: undefined (property only)
-   *
-   * ## Events
-   *
-   * Events that will be emitted by the component.
-   *
-   * - `opened-changed`: Fired when the `opened` property changes.
-   * - `item-selected`: Fired when an item is selected when the context menu is populated using the `items` API.
-   * - `closed`: Fired when the context menu is closed.
-   * - `close-all-menus`: Fired when all menus should close, e.g., after pressing Tab or on submenu close.
-   * - `items-outside-click`: Fired when a click happens outside any open sub-menus.
-   * - `undefined`: undefined
-   *
-   * ## Methods
-   *
-   * Methods that can be called to access component functionality.
-   *
-   * - `requestContentUpdate() => void`: Requests an update for the content of the menu overlay.
-   * While performing the update, it invokes the renderer passed in the `renderer` property.
-   *
-   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
-   * - `close() => void`: Closes the overlay.
-   * - `open(e: !Event | undefined) => void`: Opens the overlay.
-   * - `createProperty(name, options) => void`: undefined
-   * - `getOrCreateMap(name) => void`: undefined
-   * - `addCheckedInitializer(initializer) => void`: undefined
-   * - `getPropertyDescriptor(name, key, options) => void`: undefined
    *
-   * ## CSS Custom Properties
+   * ### Rendering
    *
-   * CSS variables available for styling the component.
+   * The content of the menu can be populated by using the renderer callback function.
    *
-   * - `--vaadin-context-menu-offset-top`: Used as an offset when using `position` and the context menu is aligned vertically below the target (default: `undefined`)
-   * - `--vaadin-context-menu-offset-bottom`: Used as an offset when using `position` and the context menu is aligned vertically above the target (default: `undefined`)
-   * - `--vaadin-context-menu-offset-start`: Used as an offset when using `position` and the context menu is aligned horizontally after the target (default: `undefined`)
-   * - `--vaadin-context-menu-offset-end`: Used as an offset when using `position` and the context menu is aligned horizontally before the target (default: `undefined`)
-   * - `items`: undefined (default: `undefined`)
-   * - `<vaadin-context-menu-item>`: undefined (default: `undefined`)
-   * - `<vaadin-item>`: undefined (default: `undefined`)
-   * - `<vaadin-context-menu-list-box>`: undefined (default: `undefined`)
-   * - `<vaadin-list-box>`: undefined (default: `undefined`)
-   * - `<vaadin-context-menu-item>`: undefined (default: `undefined`)
-   * - `<vaadin-item>`: undefined (default: `undefined`)
-   * - `expanded`: Expanded parent item. (default: `undefined`)
-   */
-  "vaadin-context-menu": Partial<
-    ContextMenuProps & BaseProps<ContextMenu> & BaseEvents
-  >;
-
-  /**
-   * An element used internally by `<vaadin-date-picker>`. Not intended to be used separately.
+   * The renderer function provides `root`, `contextMenu`, `model` arguments when applicable.
+   * Generate DOM content by using `model` object properties if needed, append it to the `root`
+   * element and control the state of the host element by accessing `contextMenu`. Before generating
+   * new content, the renderer function should check if there is already content in `root` for reusing it.
    *
-   * ## Attributes & Properties
+   * ```html
+   * <vaadin-context-menu id="contextMenu">
+   *  <p>This paragraph has a context menu.</p>
+   * </vaadin-context-menu>
+   * ```
+   * ```js
+   * const contextMenu = document.querySelector('#contextMenu');
+   * contextMenu.renderer = (root, contextMenu, context) => {
+   *   let listBox = root.firstElementChild;
+   *   if (!listBox) {
+   *     listBox = document.createElement('vaadin-list-box');
+   *     root.appendChild(listBox);
+   *   }
    *
-   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *   let item = listBox.querySelector('vaadin-item');
+   *   if (!item) {
+   *     item = document.createElement('vaadin-item');
+   *     listBox.appendChild(item);
+   *   }
+   *   item.textContent = 'Content of the selector: ' + context.target.textContent;
+   * };
+   * ```
    *
-   * - `year`: undefined
-   * - `selectedDate`: undefined
+   * You can access the menu context inside the renderer using
+   * `context.target` and `context.detail`.
    *
-   * ## Events
+   * Renderer is called on the opening of the context-menu and each time the related context is updated.
+   * DOM generated during the renderer call can be reused
+   * in the next renderer call and will be provided with the `root` argument.
+   * On first call it will be empty.
    *
-   * Events that will be emitted by the component.
+   * ### `vaadin-contextmenu` Gesture Event
    *
-   * - `undefined`: undefined
+   * `vaadin-contextmenu` is a gesture event (a custom event),
+   * which is dispatched after either `contextmenu` or long touch events.
+   * This enables support for both mouse and touch environments in a uniform way.
    *
-   * ## Methods
+   * `<vaadin-context-menu>` opens the menu overlay on the `vaadin-contextmenu`
+   * event by default.
    *
-   * Methods that can be called to access component functionality.
+   * ### Menu Listener
    *
-   * - `createProperty(name, options) => void`: undefined
-   * - `getOrCreateMap(name) => void`: undefined
-   * - `addCheckedInitializer(initializer) => void`: undefined
-   * - `getPropertyDescriptor(name, key, options) => void`: undefined
-   */
-  "vaadin-date-picker-year": Partial<
-    DatePickerYearProps & BaseProps<DatePickerYear> & BaseEvents
-  >;
-
-  /**
-   * `<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.
+   * By default, the `<vaadin-context-menu>` element listens for the menu opening
+   * event on itself. In case if you do not want to wrap the target, you can listen for
+   * events on an element outside the `<vaadin-context-menu>` by setting the
+   * `listenOn` property:
    *
    * ```html
-   * <vaadin-date-picker label="Birthday"></vaadin-date-picker>
-   * ```
+   * <vaadin-context-menu id="contextMenu"></vaadin-context-menu>
    *
-   * ```js
-   * datePicker.value = '2016-03-02';
+   * <div id="menuListener">The element that listens for the contextmenu event.</div>
+   * ```
+   * ```javascript
+   * const contextMenu = document.querySelector('#contextMenu');
+   * contextMenu.listenOn = document.querySelector('#menuListener');
    * ```
    *
-   * When the selected `value` is changed, a `value-changed` event is triggered.
-   *
-   * ### Styling
-   *
-   * The following custom properties are available for styling:
-   *
-   * Custom property                | Description                | Default
-   * -------------------------------|----------------------------|---------
-   * `--vaadin-field-default-width` | Default width of the field | `12em`
+   * ### Filtering Menu Targets
    *
-   * The following shadow DOM parts are available for styling:
+   * By default, the listener element and all its descendants open the context
+   * menu. You can filter the menu targets to a smaller set of elements inside
+   * the listener element by setting the `selector` property.
    *
-   * Part name            | Description
-   * ---------------------|----------------
-   * `label`              | The label element
-   * `input-field`        | The element that wraps prefix, value and buttons
-   * `field-button`       | Set on both clear and toggle buttons
-   * `clear-button`       | The clear button
-   * `error-message`      | The error message element
-   * `helper-text`        | The helper text element wrapper
-   * `required-indicator` | The `required` state indicator element
-   * `toggle-button`      | The toggle button
-   * `backdrop`           | Backdrop of the overlay
-   * `overlay`            | The overlay container
-   * `content`            | The overlay content
+   * In the following example, only the elements matching `.has-menu` will open the context menu:
    *
-   * The following state attributes are available for styling:
+   * ```html
+   * <vaadin-context-menu selector=".has-menu">
+   *   <p class="has-menu">This paragraph opens the context menu</p>
+   *   <p>This paragraph does not open the context menu</p>
+   * </vaadin-context-menu>
+   * ```
    *
-   * Attribute            | Description
-   * ---------------------|---------------------------------
-   * `disabled`           | Set when the element is disabled
-   * `has-value`          | Set when the element has a value
-   * `has-label`          | Set when the element has a label
-   * `has-helper`         | Set when the element has helper text or slot
-   * `has-error-message`  | Set when the element has an error message
-   * `has-tooltip`        | Set when the element has a slotted tooltip
-   * `invalid`            | Set when the element is invalid
-   * `focused`            | Set when the element is focused
-   * `focus-ring`         | Set when the element is keyboard focused
-   * `readonly`           | Set when the element is readonly
-   * `opened`             | Set when the overlay is opened
-   * `week-numbers`       | Set when week numbers are shown in the calendar
+   * ### Menu Context
    *
-   * ### Internal components
+   * The following properties are available in the `context` argument:
    *
-   * In addition to `<vaadin-date-picker>` itself, the following internal
-   * components are themable:
+   * - `target` is the menu opening event target, which is the element that
+   * the user has called the context menu for
+   * - `detail` is the menu opening event detail
    *
-   * - `<vaadin-date-picker-overlay-content>`
-   * - `<vaadin-date-picker-month-scroller>`
-   * - `<vaadin-date-picker-year-scroller>`
-   * - `<vaadin-date-picker-year>`
-   * - `<vaadin-month-calendar>`
+   * In the following example, the menu item text is composed with the contents
+   * of the element that opened the menu:
    *
-   * In order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:
+   * ```html
+   * <vaadin-context-menu selector="li" id="contextMenu">
+   *   <ul>
+   *     <li>Foo</li>
+   *     <li>Bar</li>
+   *     <li>Baz</li>
+   *   </ul>
+   * </vaadin-context-menu>
+   * ```
+   * ```js
+   * const contextMenu = document.querySelector('#contextMenu');
+   * contextMenu.renderer = (root, contextMenu, context) => {
+   *   let listBox = root.firstElementChild;
+   *   if (!listBox) {
+   *     listBox = document.createElement('vaadin-list-box');
+   *     root.appendChild(listBox);
+   *   }
    *
-   * Part name             | Description
-   * ----------------------|--------------------
-   * `years-toggle-button` | Fullscreen mode years scroller toggle
-   * `toolbar`             | Toolbar with slotted buttons
+   *   let item = listBox.querySelector('vaadin-item');
+   *   if (!item) {
+   *     item = document.createElement('vaadin-item');
+   *     listBox.appendChild(item);
+   *   }
+   *   item.textContent = 'The menu target: ' + context.target.textContent;
+   * };
+   * ```
    *
-   * The following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:
+   * ### Styling
    *
-   * Attribute       | Description
-   * ----------------|-------------------------------------------------
-   * `desktop`       | Set when the overlay content is in desktop mode
-   * `fullscreen`    | Set when the overlay content is in fullscreen mode
-   * `years-visible` | Set when the year scroller is visible in fullscreen mode
+   * The following shadow DOM parts are available for styling:
    *
-   * In order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:
+   * Part name        | Description
+   * -----------------|-------------------------------------------
+   * `backdrop`       | Backdrop of the overlay
+   * `overlay`        | The overlay container
+   * `content`        | The overlay content
    *
-   * Part name             | Description
-   * ----------------------|--------------------
-   * `month-header`        | Month title
-   * `weekdays`            | Weekday container
-   * `weekday`             | Weekday element
-   * `week-numbers`        | Week numbers container
-   * `week-number`         | Week number element
-   * `date`                | Date element
-   * `disabled`            | Disabled date element
-   * `focused`             | Focused date element
-   * `selected`            | Selected date element
-   * `today`               | Date element corresponding to the current day
-   * `past`                | Date element corresponding to the date in the past
-   * `future`              | Date element corresponding to the date in the future
+   * ### Custom CSS Properties
    *
-   * In order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:
+   * The following custom CSS properties are available for styling:
    *
-   * Part name             | Description
-   * ----------------------|--------------------
-   * `year-number`         | Year number
-   * `year-separator`      | Year separator
+   * Custom CSS property                   | Description
+   * --------------------------------------|-------------
+   * `--vaadin-context-menu-offset-top`    | Used as an offset when using `position` and the context menu is aligned vertically below the target
+   * `--vaadin-context-menu-offset-bottom` | Used as an offset when using `position` and the context menu is aligned vertically above the target
+   * `--vaadin-context-menu-offset-start`  | Used as an offset when using `position` and the context menu is aligned horizontally after the target
+   * `--vaadin-context-menu-offset-end`    | Used as an offset when using `position` and the context menu is aligned horizontally before the target
    *
    * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
    *
-   * ### Change events
+   * ### Internal components
    *
-   * Depending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,
-   * the component can fire either a `change` event or an `unparsable-change` event:
+   * When using `items` API the following internal components are themable:
    *
-   * Value change             | Event
-   * :------------------------|:------------------
-   * empty => parsable        | change
-   * empty => unparsable      | unparsable-change
-   * parsable => empty        | change
-   * parsable => parsable     | change
-   * parsable => unparsable   | change
-   * unparsable => empty      | unparsable-change
-   * unparsable => parsable   | change
-   * unparsable => unparsable | unparsable-change
+   * - `<vaadin-context-menu-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
+   * - `<vaadin-context-menu-list-box>` - has the same API as [`<vaadin-list-box>`](#/elements/vaadin-list-box).
+   *
+   * The `<vaadin-context-menu-item>` sub-menu elements have the following additional state attributes
+   * on top of the built-in `<vaadin-item>` state attributes:
+   *
+   * Attribute  | Description
+   * ---------- |-------------
+   * `expanded` | Expanded parent item.
    *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `_positionTarget`: undefined
-   * - `disabled`/`undefined`: Set when the element is disabled
-   * - `has-value`/`undefined`: Set when the element has a value
-   * - `has-label`/`undefined`: Set when the element has a label
-   * - `has-helper`/`undefined`: Set when the element has helper text or slot
-   * - `has-error-message`/`undefined`: Set when the element has an error message
-   * - `has-tooltip`/`undefined`: Set when the element has a slotted tooltip
-   * - `invalid`/`undefined`: Set when the element is invalid
-   * - `focused`/`undefined`: Set when the element is focused
-   * - `focus-ring`/`undefined`: Set when the element is keyboard focused
-   * - `readonly`: Set when the element is readonly
-   * - `opened`: Set when the overlay is opened
-   * - `week-numbers`/`undefined`: Set when week numbers are shown in the calendar
-   * - `<vaadin-date-picker>`/`undefined`: undefined
-   * - `<vaadin-date-picker-overlay-content>`/`undefined`: undefined
-   * - `<vaadin-date-picker-month-scroller>`/`undefined`: undefined
-   * - `<vaadin-date-picker-year-scroller>`/`undefined`: undefined
-   * - `<vaadin-date-picker-year>`/`undefined`: undefined
-   * - `<vaadin-month-calendar>`/`undefined`: undefined
-   * - `<vaadin-date-picker-overlay-content>`/`undefined`: undefined
-   * - `years-toggle-button`/`undefined`: Fullscreen mode years scroller toggle
-   * - `toolbar`/`undefined`: Toolbar with slotted buttons
-   * - `_selectedDate`: The current selected date.
-   * - `_focusedDate`: undefined
-   * - `value`: Selected date.
-   *
-   * Supported date formats:
-   * - ISO 8601 `"YYYY-MM-DD"` (default)
-   * - 6-digit extended ISO 8601 `"+YYYYYY-MM-DD"`, `"-YYYYYY-MM-DD"`
-   * - `initialPosition`: Date which should be visible when there is no value selected.
+   * - `position`: Position of the overlay with respect to the target.
+   * Supported values: null, `top-start`, `top`, `top-end`,
+   * `bottom-start`, `bottom`, `bottom-end`, `start-top`,
+   * `start`, `start-bottom`, `end-top`, `end`, `end-bottom`.
+   * - `<vaadin-item>`/`undefined`: undefined
+   * - `selector`: CSS selector that can be used to target any child element
+   * of the context menu to listen for `openOn` events.
+   * - `opened`: True if the overlay is currently displayed.
+   * - `openOn`: Event name to listen for opening the context menu.
+   * - `listenOn`: The target element that's listened to for context menu opening events.
+   * By default the vaadin-context-menu listens to the target's `vaadin-contextmenu`
+   * events.
+   * - `closeOn`: Event name to listen for closing the context menu.
+   * - `renderer`: Custom function for rendering the content of the menu overlay.
+   * Receives three arguments:
    *
-   * The same date formats as for the `value` property are supported.
-   * - `autoOpenDisabled`: Set true to prevent the overlay from opening automatically.
-   * - `showWeekNumbers`: Set true to display ISO-8601 week numbers in the calendar. Notice that
-   * displaying week numbers is only supported when `i18n.firstDayOfWeek`
-   * is 1 (Monday).
+   * - `root` The root container DOM element. Append your content to it.
+   * - `contextMenu` The reference to the `<vaadin-context-menu>` element.
+   * - `context` The object with the menu context, contains:
+   *   - `context.target`  the target of the menu opening event,
+   *   - `context.detail` the menu opening event detail.
+   * - `_modeless`: When true, the menu overlay is modeless.
+   * - `_context`: undefined
+   * - `_phone`: undefined
    * - `_fullscreen`: undefined
    * - `_fullscreenMediaQuery`: undefined
-   * - `min`: The earliest date that can be selected. All earlier dates will be disabled.
-   *
-   * Supported date formats:
-   * - ISO 8601 `"YYYY-MM-DD"` (default)
-   * - 6-digit extended ISO 8601 `"+YYYYYY-MM-DD"`, `"-YYYYYY-MM-DD"`
-   * - `max`: The latest date that can be selected. All later dates will be disabled.
+   * - `items`: Defines a (hierarchical) menu structure for the component.
+   * If a menu item has a non-empty `children` set, a sub-menu with the child items is opened
+   * next to the parent menu on mouseover, tap or a right arrow keypress.
    *
-   * Supported date formats:
-   * - ISO 8601 `"YYYY-MM-DD"` (default)
-   * - 6-digit extended ISO 8601 `"+YYYYYY-MM-DD"`, `"-YYYYYY-MM-DD"`
-   * - `isDateDisabled`: A function to be used to determine whether the user can select a given date.
-   * Receives a `DatePickerDate` object of the date to be selected and should return a
-   * boolean.
-   * - `_minDate`: The earliest date that can be selected. All earlier dates will be disabled.
-   * - `_maxDate`: The latest date that can be selected. All later dates will be disabled.
-   * - `_noInput`: undefined
-   * - `_ios`: undefined
-   * - `_focusOverlayOnOpen`: undefined
-   * - `_overlayContent`: undefined
-   * - `__enteredDate`: undefined
-   * - `i18n`: The object used to localize this component. To change the default
-   * localization, replace this with an object that provides all properties, or
-   * just the individual properties you want to change.
+   * The items API can't be used together with a renderer!
    *
-   * Should be overridden by subclasses to provide a custom JSDoc with the
-   * default I18N properties.
-   * - `__effectiveI18n`: undefined
-   * - `autofocus`: Specify that this control should have input focus when the page loads.
-   * - `focusElement`: A reference to the focusable element controlled by the mixin.
-   * It can be an input, textarea, button or any element with tabindex > -1.
+   * #### Example
    *
-   * Any component implementing this mixin is expected to provide it
-   * by using `this._setFocusElement(input)` Polymer API.
+   * ```javascript
+   * contextMenu.items = [
+   *   { text: 'Menu Item 1', theme: 'primary', className: 'first', children:
+   *     [
+   *       { text: 'Menu Item 1-1', checked: true, keepOpen: true },
+   *       { text: 'Menu Item 1-2' }
+   *     ]
+   *   },
+   *   { component: 'hr' },
+   *   { text: 'Menu Item 2', children:
+   *     [
+   *       { text: 'Menu Item 2-1' },
+   *       { text: 'Menu Item 2-2', disabled: true }
+   *     ]
+   *   },
+   *   { text: 'Menu Item 3', disabled: true, className: 'last' }
+   * ];
+   * ```
    *
-   * Toggling `tabindex` attribute on the host element propagates its value to `focusElement`.
-   * - `_lastTabIndex`: Override the property from `TabIndexMixin`
-   * to ensure the `tabindex` attribute of the focus element
-   * will be restored to `0` after re-enabling the element.
-   * - `allowedCharPattern`: A pattern matched against individual characters the user inputs.
+   * #### Item tooltips
    *
-   * When set, the field will prevent:
-   * - `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`
-   * - `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`
-   * - `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`
+   * Menu items can have tooltips that are shown on hover and keyboard
+   * focus. To enable them, add a slotted `<vaadin-tooltip>` element
+   * and set the `tooltip` property on each item that should have one:
    *
-   * For example, to allow entering only numbers and minus signs, use:
-   * `allowedCharPattern = "[\\d-]"`
-   * - `autoselect`: If true, the input text gets fully selected when the field is focused using click or touch / tap.
-   * - `name`: The name of this field.
-   * - `placeholder`: A hint to the user of what can be entered in the field.
-   * - `title`: The text usually displayed in a tooltip popup when the mouse is over the field.
-   * - `ariaTarget`: A target element to which ARIA attributes are set.
-   * - `errorMessage`: Error to show when the field is invalid.
-   * - `helperText`: String used for the helper text.
-   * - `accessibleName`: String used to label the component to screen reader users.
-   * - `accessibleNameRef`: Id of the element used as label of the component to screen reader users.
-   * - `clearButtonVisible`: Set to true to display the clear icon which clears the input.
-   * This also enables clearing the input when pressing Esc key.
+   * ```html
+   * <vaadin-context-menu>
+   *   <vaadin-tooltip slot="tooltip"></vaadin-tooltip>
+   * </vaadin-context-menu>
+   * ```
+   * - `_positionTarget`: undefined
    * - `dir`: undefined
-   * - `_inputElementValue`: undefined (property only)
-   * - `_boundOnClick`: undefined (property only)
-   * - `_boundOnScroll`: undefined (property only)
-   * - `_boundOnBlur`: undefined (property only)
-   * - `_boundOnFocus`: undefined (property only)
-   * - `_boundOnPaste`: undefined (property only)
-   * - `_boundOnDrop`: undefined (property only)
-   * - `_boundOnBeforeInput`: undefined (property only)
-   * - `_fieldAriaController`: undefined (property only)
-   * - `_helperController`: undefined (property only)
-   * - `_errorController`: undefined (property only)
+   * - `_boundOpen`: undefined (property only)
+   * - `_boundClose`: undefined (property only)
+   * - `_boundPreventDefault`: undefined (property only)
+   * - `__itemsOutsideClickListener`: undefined (property only)
    *
    * ## Events
    *
    * Events that will be emitted by the component.
    *
-   * - `change`: Fired when the user commits a value change.
-   * - `unparsable-change`: Fired when the user commits an unparsable value change and there is no change event.
-   * - `invalid-changed`: Fired when the `invalid` property changes.
    * - `opened-changed`: Fired when the `opened` property changes.
-   * - `value-changed`: Fired when the `value` property changes.
-   * - `validated`: Fired whenever the field is validated.
+   * - `item-selected`: Fired when an item is selected when the context menu is populated using the `items` API.
+   * - `closed`: Fired when the context menu is closed.
+   * - `close-all-menus`: Fired when all menus should close, e.g., after pressing Tab or on submenu close.
+   * - `items-outside-click`: Fired when a click happens outside any open sub-menus.
    * - `undefined`: undefined
    *
    * ## Methods
    *
    * Methods that can be called to access component functionality.
    *
-   * - `open() => void`: Opens the dropdown.
-   * - `close() => void`: Closes the dropdown.
-   * - `checkValidity() => boolean`: Returns true if the current input value satisfies all constraints (if any)
+   * - `requestContentUpdate() => void`: Requests an update for the content of the menu overlay.
+   * While performing the update, it invokes the renderer passed in the `renderer` property.
    *
-   * Override the `checkValidity` method for custom validations.
+   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
+   * - `close() => void`: Closes the overlay.
+   * - `open(e: !Event | undefined) => void`: Opens the overlay.
    * - `createProperty(name, options) => void`: undefined
    * - `getOrCreateMap(name) => void`: undefined
    * - `addCheckedInitializer(initializer) => void`: undefined
    * - `getPropertyDescriptor(name, key, options) => void`: undefined
+   *
+   * ## CSS Custom Properties
+   *
+   * CSS variables available for styling the component.
+   *
+   * - `--vaadin-context-menu-offset-top`: Used as an offset when using `position` and the context menu is aligned vertically below the target (default: `undefined`)
+   * - `--vaadin-context-menu-offset-bottom`: Used as an offset when using `position` and the context menu is aligned vertically above the target (default: `undefined`)
+   * - `--vaadin-context-menu-offset-start`: Used as an offset when using `position` and the context menu is aligned horizontally after the target (default: `undefined`)
+   * - `--vaadin-context-menu-offset-end`: Used as an offset when using `position` and the context menu is aligned horizontally before the target (default: `undefined`)
+   * - `items`: undefined (default: `undefined`)
+   * - `<vaadin-context-menu-item>`: undefined (default: `undefined`)
+   * - `<vaadin-item>`: undefined (default: `undefined`)
+   * - `<vaadin-context-menu-list-box>`: undefined (default: `undefined`)
+   * - `<vaadin-list-box>`: undefined (default: `undefined`)
+   * - `<vaadin-context-menu-item>`: undefined (default: `undefined`)
+   * - `<vaadin-item>`: undefined (default: `undefined`)
+   * - `expanded`: Expanded parent item. (default: `undefined`)
    */
-  "vaadin-date-picker": Partial<
-    DatePickerProps & BaseProps<DatePicker> & BaseEvents
+  "vaadin-context-menu": Partial<
+    ContextMenuProps & BaseProps<ContextMenu> & BaseEvents
   >;
 
   /**
@@ -18013,252 +17719,546 @@ export type CustomElements = {
    * - `renderer`: Custom function for rendering the content of the overlay.
    * Receives three arguments:
    *
-   * - `root` The root container DOM element. Append your content to it.
-   * - `owner` The host element of the renderer function.
-   * - `model` The object with the properties related with rendering.
-   * - `modeless`: When true the overlay won't disable the main content, showing
-   * it doesn't change the functionality of the user interface.
-   * - `hidden`: When set to true, the overlay is hidden. This also closes the overlay
-   * immediately in case there is a closing animation in progress.
-   * - `withBackdrop`: When true the overlay has backdrop on top of content when opened.
-   * - `focusTrap`: When true, opening the overlay moves focus to the first focusable child,
-   * or to the overlay part with tabindex if there are no focusable children.
-   * - `restoreFocusOnClose`: Set to true to enable restoring of focus when overlay is closed.
-   * - `restoreFocusNode`: Set to specify the element which should be focused on overlay close,
-   * if `restoreFocusOnClose` is set to true.
-   * - `dir`: undefined
-   * - `_boundMouseDownListener`: undefined (property only)
-   * - `_boundMouseUpListener`: undefined (property only)
-   * - `_boundOutsideClickListener`: undefined (property only)
-   * - `_boundKeydownListener`: undefined (property only)
-   * - `__focusTrapController`: undefined (property only)
-   * - `__focusRestorationController`: undefined (property only)
+   * - `root` The root container DOM element. Append your content to it.
+   * - `owner` The host element of the renderer function.
+   * - `model` The object with the properties related with rendering.
+   * - `modeless`: When true the overlay won't disable the main content, showing
+   * it doesn't change the functionality of the user interface.
+   * - `hidden`: When set to true, the overlay is hidden. This also closes the overlay
+   * immediately in case there is a closing animation in progress.
+   * - `withBackdrop`: When true the overlay has backdrop on top of content when opened.
+   * - `focusTrap`: When true, opening the overlay moves focus to the first focusable child,
+   * or to the overlay part with tabindex if there are no focusable children.
+   * - `restoreFocusOnClose`: Set to true to enable restoring of focus when overlay is closed.
+   * - `restoreFocusNode`: Set to specify the element which should be focused on overlay close,
+   * if `restoreFocusOnClose` is set to true.
+   * - `dir`: undefined
+   * - `_boundMouseDownListener`: undefined (property only)
+   * - `_boundMouseUpListener`: undefined (property only)
+   * - `_boundOutsideClickListener`: undefined (property only)
+   * - `_boundKeydownListener`: undefined (property only)
+   * - `__focusTrapController`: undefined (property only)
+   * - `__focusRestorationController`: undefined (property only)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `vaadin-overlay-closed`: undefined
+   * - `vaadin-overlay-closing`: undefined
+   * - `undefined`: undefined
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `requestContentUpdate() => void`: Requests an update for the content of the overlay.
+   * While performing the update, it invokes the renderer passed in the `renderer` property.
+   *
+   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
+   * - `getBounds() => !DialogOverlayBounds`: Retrieves the coordinates of the overlay.
+   * - `setBounds(bounds, absolute = true) => void`: Override method from OverlayMixin to adjust the position of the overlay if `keepInViewport` is true.
+   * - `close(sourceEvent: Event=) => void`: undefined
+   * - `createProperty(name, options) => void`: undefined
+   * - `getOrCreateMap(name) => void`: undefined
+   * - `addCheckedInitializer(initializer) => void`: undefined
+   * - `getPropertyDescriptor(name, key, options) => void`: undefined
+   */
+  "vaadin-dialog-overlay": Partial<
+    DialogOverlayProps & BaseProps<DialogOverlay> & BaseEvents
+  >;
+
+  /**
+   * `<vaadin-dialog>` is a Web Component for creating customized modal dialogs.
+   *
+   * ### Rendering
+   *
+   * The content of the dialog can be populated by using the renderer callback function.
+   *
+   * The renderer function provides `root`, `dialog` arguments.
+   * Generate DOM content, append it to the `root` element and control the state
+   * of the host element by accessing `dialog`. Before generating new content,
+   * users are able to check if there is already content in `root` for reusing it.
+   *
+   * ```html
+   * <vaadin-dialog id="dialog"></vaadin-dialog>
+   * ```
+   * ```js
+   * const dialog = document.querySelector('#dialog');
+   * dialog.renderer = function(root, dialog) {
+   *   root.textContent = "Sample dialog";
+   * };
+   * ```
+   *
+   * Renderer is called on the opening of the dialog.
+   * DOM generated during the renderer call can be reused
+   * in the next renderer call and will be provided with the `root` argument.
+   * On first call it will be empty.
+   *
+   * ### Styling
+   *
+   * The following shadow DOM parts are available for styling:
+   *
+   * Part name        | Description
+   * -----------------|-------------------------------------------
+   * `backdrop`       | Backdrop of the overlay
+   * `overlay`        | The overlay container
+   * `content`        | The overlay content
+   * `header`         | Element wrapping title and header content
+   * `header-content` | Element wrapping the header content slot
+   * `title`          | Element wrapping the title slot
+   * `footer`         | Element wrapping the footer slot
+   *
+   * The following state attributes are available for styling:
+   *
+   * Attribute        | Description
+   * -----------------|--------------------------------------------
+   * `has-title`      | Set when the element has a title
+   * `has-header`     | Set when the element has header renderer
+   * `has-footer`     | Set when the element has footer renderer
+   * `overflow`       | Set to `top`, `bottom`, none or both
+   *
+   * The following custom CSS properties are available for styling:
+   *
+   * Custom CSS property                          |
+   * :--------------------------------------------|
+   * |`--vaadin-dialog-background`                |
+   * |`--vaadin-dialog-border-color`              |
+   * |`--vaadin-dialog-border-radius`             |
+   * |`--vaadin-dialog-border-width`              |
+   * |`--vaadin-dialog-max-width`                 |
+   * |`--vaadin-dialog-min-width`                 |
+   * |`--vaadin-dialog-overflow-indicator-color`  |
+   * |`--vaadin-dialog-overflow-indicator-height` |
+   * |`--vaadin-dialog-padding`                   |
+   * |`--vaadin-dialog-shadow`                    |
+   * |`--vaadin-dialog-text-color`                |
+   * |`--vaadin-dialog-title-color`               |
+   * |`--vaadin-dialog-title-font-size`           |
+   * |`--vaadin-dialog-title-font-weight`         |
+   * |`--vaadin-dialog-title-line-height`         |
+   * |`--vaadin-overlay-backdrop-background`      |
+   *
+   * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `has-title`/`undefined`: Set when the element has a title
+   * - `has-header`/`undefined`: Set when the element has header renderer
+   * - `has-footer`/`undefined`: Set when the element has footer renderer
+   * - `overflow`/`undefined`: Set to `top`, `bottom`, none or both
+   * - `width`: Set the width of the dialog.
+   * If a unitless number is provided, pixels are assumed.
+   * - `height`: Set the height of the dialog.
+   * If a unitless number is provided, pixels are assumed.
+   * - `draggable`: Set to true to enable repositioning the dialog by clicking and dragging.
+   *
+   * By default, only the overlay area can be used to drag the element. But,
+   * a child element can be marked as a draggable area by adding a
+   * "`draggable`" class to it, this will by default make all of its children draggable also.
+   * If you want a child element to be draggable
+   * but still have its children non-draggable (by default), mark it with
+   * "`draggable-leaf-only`" class name.
+   * - `_touchDevice`: undefined
+   * - `__dragHandleClassName`: undefined
+   * - `resizable`: Set to true to enable resizing the dialog by dragging the corners and edges.
+   * - `renderer`: Custom function for rendering the content of the dialog.
+   * Receives two arguments:
+   *
+   * - `root` The root container DOM element. Append your content to it.
+   * - `dialog` The reference to the `<vaadin-dialog>` element.
+   * - `headerTitle`: String used for rendering a dialog title.
+   *
+   * If both `headerTitle` and `headerRenderer` are defined, the title
+   * and the elements created by the renderer will be placed next to
+   * each other, with the title coming first.
+   *
+   * When `headerTitle` is set, the attribute `has-title` is set on the dialog.
+   * - `headerRenderer`: Custom function for rendering the dialog header.
+   * Receives two arguments:
+   *
+   * - `root` The root container DOM element. Append your content to it.
+   * - `dialog` The reference to the `<vaadin-dialog>` element.
+   *
+   * If both `headerTitle` and `headerRenderer` are defined, the title
+   * and the elements created by the renderer will be placed next to
+   * each other, with the title coming first.
+   *
+   * When `headerRenderer` is set, the attribute `has-header` is set on the dialog.
+   * - `footerRenderer`: Custom function for rendering the dialog footer.
+   * Receives two arguments:
+   *
+   * - `root` The root container DOM element. Append your content to it.
+   * - `dialog` The reference to the `<vaadin-dialog>` element.
+   *
+   * When `footerRenderer` is set, the attribute `has-footer` is set on the dialog.
+   * - `opened`: True if the dialog is visible and available for interaction.
+   * - `noCloseOnOutsideClick`: Set to true to disable closing dialog on outside click
+   * - `noCloseOnEsc`: Set to true to disable closing dialog on Escape press
+   * - `modeless`: Set to true to remove backdrop and allow click events on background elements.
+   * - `noFocusTrap`: Set to true to disable focus trapping.
+   * - `top`: Set the distance of the dialog from the top of the viewport.
+   * If a unitless number is provided, pixels are assumed.
+   *
+   * Note that the dialog uses an internal container that has some
+   * additional spacing, which can be overridden by the theme.
+   * - `left`: Set the distance of the dialog from the left of the viewport.
+   * If a unitless number is provided, pixels are assumed.
+   *
+   * Note that the dialog uses an internal container that has some
+   * additional spacing, which can be overridden by the theme.
+   * - `overlayRole`: The `role` attribute value to be set on the dialog. Defaults to "dialog".
+   * - `keepInViewport`: Set to true to prevent the dialog from moving outside the viewport bounds.
+   * When enabled, all four edges of the dialog will remain visible, for example
+   * when dragging the dialog or when the viewport is resized. Note that the
+   * dialog will also adjust any programmatically configured size and position
+   * so that it stays within the viewport.
+   * - `dir`: undefined
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `resize-start`: Fired when the dialog resize is started.
+   * - `resize`: Fired when the dialog resize is finished.
+   * - `drag-start`: Fired when the dialog drag is started.
+   * - `dragged`: Fired when the dialog drag is finished.
+   * - `opened-changed`: Fired when the `opened` property changes.
+   * - `closed`: Fired when the dialog is closed.
+   * - `undefined`: undefined
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `requestContentUpdate() => void`: Requests an update for the content of the dialog.
+   * While performing the update, it invokes the renderer passed in the `renderer` property,
+   * as well as `headerRender` and `footerRenderer` properties, if these are defined.
+   *
+   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
+   * - `createProperty(name, options) => void`: undefined
+   * - `getOrCreateMap(name) => void`: undefined
+   * - `addCheckedInitializer(initializer) => void`: undefined
+   * - `getPropertyDescriptor(name, key, options) => void`: undefined
+   *
+   * ## CSS Custom Properties
+   *
+   * CSS variables available for styling the component.
+   *
+   * - `--vaadin-dialog-background`: undefined (default: `undefined`)
+   * - `--vaadin-dialog-border-color`: undefined (default: `undefined`)
+   * - `--vaadin-dialog-border-radius`: undefined (default: `undefined`)
+   * - `--vaadin-dialog-border-width`: undefined (default: `undefined`)
+   * - `--vaadin-dialog-max-width`: undefined (default: `undefined`)
+   * - `--vaadin-dialog-min-width`: undefined (default: `undefined`)
+   * - `--vaadin-dialog-overflow-indicator-color`: undefined (default: `undefined`)
+   * - `--vaadin-dialog-overflow-indicator-height`: undefined (default: `undefined`)
+   * - `--vaadin-dialog-padding`: undefined (default: `undefined`)
+   * - `--vaadin-dialog-shadow`: undefined (default: `undefined`)
+   * - `--vaadin-dialog-text-color`: undefined (default: `undefined`)
+   * - `--vaadin-dialog-title-color`: undefined (default: `undefined`)
+   * - `--vaadin-dialog-title-font-size`: undefined (default: `undefined`)
+   * - `--vaadin-dialog-title-font-weight`: undefined (default: `undefined`)
+   * - `--vaadin-dialog-title-line-height`: undefined (default: `undefined`)
+   * - `--vaadin-overlay-backdrop-background`: See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation. (default: `undefined`)
+   */
+  "vaadin-dialog": Partial<DialogProps & BaseProps<Dialog> & BaseEvents>;
+
+  /**
+   * An element used internally by `<vaadin-date-picker>`. Not intended to be used separately.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `year`: undefined
+   * - `selectedDate`: undefined
    *
    * ## Events
    *
    * Events that will be emitted by the component.
    *
-   * - `vaadin-overlay-closed`: undefined
-   * - `vaadin-overlay-closing`: undefined
    * - `undefined`: undefined
    *
    * ## Methods
    *
    * Methods that can be called to access component functionality.
    *
-   * - `requestContentUpdate() => void`: Requests an update for the content of the overlay.
-   * While performing the update, it invokes the renderer passed in the `renderer` property.
-   *
-   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
-   * - `getBounds() => !DialogOverlayBounds`: Retrieves the coordinates of the overlay.
-   * - `setBounds(bounds, absolute = true) => void`: Override method from OverlayMixin to adjust the position of the overlay if `keepInViewport` is true.
-   * - `close(sourceEvent: Event=) => void`: undefined
    * - `createProperty(name, options) => void`: undefined
    * - `getOrCreateMap(name) => void`: undefined
    * - `addCheckedInitializer(initializer) => void`: undefined
    * - `getPropertyDescriptor(name, key, options) => void`: undefined
    */
-  "vaadin-dialog-overlay": Partial<
-    DialogOverlayProps & BaseProps<DialogOverlay> & BaseEvents
+  "vaadin-date-picker-year": Partial<
+    DatePickerYearProps & BaseProps<DatePickerYear> & BaseEvents
   >;
 
   /**
-   * `<vaadin-dialog>` is a Web Component for creating customized modal dialogs.
-   *
-   * ### Rendering
-   *
-   * The content of the dialog can be populated by using the renderer callback function.
-   *
-   * The renderer function provides `root`, `dialog` arguments.
-   * Generate DOM content, append it to the `root` element and control the state
-   * of the host element by accessing `dialog`. Before generating new content,
-   * users are able to check if there is already content in `root` for reusing it.
+   * `<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.
    *
    * ```html
-   * <vaadin-dialog id="dialog"></vaadin-dialog>
+   * <vaadin-date-picker label="Birthday"></vaadin-date-picker>
    * ```
+   *
    * ```js
-   * const dialog = document.querySelector('#dialog');
-   * dialog.renderer = function(root, dialog) {
-   *   root.textContent = "Sample dialog";
-   * };
+   * datePicker.value = '2016-03-02';
    * ```
    *
-   * Renderer is called on the opening of the dialog.
-   * DOM generated during the renderer call can be reused
-   * in the next renderer call and will be provided with the `root` argument.
-   * On first call it will be empty.
+   * When the selected `value` is changed, a `value-changed` event is triggered.
    *
    * ### Styling
    *
+   * The following custom properties are available for styling:
+   *
+   * Custom property                | Description                | Default
+   * -------------------------------|----------------------------|---------
+   * `--vaadin-field-default-width` | Default width of the field | `12em`
+   *
    * The following shadow DOM parts are available for styling:
    *
-   * Part name        | Description
-   * -----------------|-------------------------------------------
-   * `backdrop`       | Backdrop of the overlay
-   * `overlay`        | The overlay container
-   * `content`        | The overlay content
-   * `header`         | Element wrapping title and header content
-   * `header-content` | Element wrapping the header content slot
-   * `title`          | Element wrapping the title slot
-   * `footer`         | Element wrapping the footer slot
+   * Part name            | Description
+   * ---------------------|----------------
+   * `label`              | The label element
+   * `input-field`        | The element that wraps prefix, value and buttons
+   * `field-button`       | Set on both clear and toggle buttons
+   * `clear-button`       | The clear button
+   * `error-message`      | The error message element
+   * `helper-text`        | The helper text element wrapper
+   * `required-indicator` | The `required` state indicator element
+   * `toggle-button`      | The toggle button
+   * `backdrop`           | Backdrop of the overlay
+   * `overlay`            | The overlay container
+   * `content`            | The overlay content
    *
    * The following state attributes are available for styling:
    *
-   * Attribute        | Description
-   * -----------------|--------------------------------------------
-   * `has-title`      | Set when the element has a title
-   * `has-header`     | Set when the element has header renderer
-   * `has-footer`     | Set when the element has footer renderer
-   * `overflow`       | Set to `top`, `bottom`, none or both
+   * Attribute            | Description
+   * ---------------------|---------------------------------
+   * `disabled`           | Set when the element is disabled
+   * `has-value`          | Set when the element has a value
+   * `has-label`          | Set when the element has a label
+   * `has-helper`         | Set when the element has helper text or slot
+   * `has-error-message`  | Set when the element has an error message
+   * `has-tooltip`        | Set when the element has a slotted tooltip
+   * `invalid`            | Set when the element is invalid
+   * `focused`            | Set when the element is focused
+   * `focus-ring`         | Set when the element is keyboard focused
+   * `readonly`           | Set when the element is readonly
+   * `opened`             | Set when the overlay is opened
+   * `week-numbers`       | Set when week numbers are shown in the calendar
    *
-   * The following custom CSS properties are available for styling:
+   * ### Internal components
    *
-   * Custom CSS property                          |
-   * :--------------------------------------------|
-   * |`--vaadin-dialog-background`                |
-   * |`--vaadin-dialog-border-color`              |
-   * |`--vaadin-dialog-border-radius`             |
-   * |`--vaadin-dialog-border-width`              |
-   * |`--vaadin-dialog-max-width`                 |
-   * |`--vaadin-dialog-min-width`                 |
-   * |`--vaadin-dialog-overflow-indicator-color`  |
-   * |`--vaadin-dialog-overflow-indicator-height` |
-   * |`--vaadin-dialog-padding`                   |
-   * |`--vaadin-dialog-shadow`                    |
-   * |`--vaadin-dialog-text-color`                |
-   * |`--vaadin-dialog-title-color`               |
-   * |`--vaadin-dialog-title-font-size`           |
-   * |`--vaadin-dialog-title-font-weight`         |
-   * |`--vaadin-dialog-title-line-height`         |
-   * |`--vaadin-overlay-backdrop-background`      |
+   * In addition to `<vaadin-date-picker>` itself, the following internal
+   * components are themable:
+   *
+   * - `<vaadin-date-picker-overlay-content>`
+   * - `<vaadin-date-picker-month-scroller>`
+   * - `<vaadin-date-picker-year-scroller>`
+   * - `<vaadin-date-picker-year>`
+   * - `<vaadin-month-calendar>`
+   *
+   * In order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:
+   *
+   * Part name             | Description
+   * ----------------------|--------------------
+   * `years-toggle-button` | Fullscreen mode years scroller toggle
+   * `toolbar`             | Toolbar with slotted buttons
+   *
+   * The following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:
+   *
+   * Attribute       | Description
+   * ----------------|-------------------------------------------------
+   * `desktop`       | Set when the overlay content is in desktop mode
+   * `fullscreen`    | Set when the overlay content is in fullscreen mode
+   * `years-visible` | Set when the year scroller is visible in fullscreen mode
+   *
+   * In order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:
+   *
+   * Part name             | Description
+   * ----------------------|--------------------
+   * `month-header`        | Month title
+   * `weekdays`            | Weekday container
+   * `weekday`             | Weekday element
+   * `week-numbers`        | Week numbers container
+   * `week-number`         | Week number element
+   * `date`                | Date element
+   * `disabled`            | Disabled date element
+   * `focused`             | Focused date element
+   * `selected`            | Selected date element
+   * `today`               | Date element corresponding to the current day
+   * `past`                | Date element corresponding to the date in the past
+   * `future`              | Date element corresponding to the date in the future
+   *
+   * In order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:
+   *
+   * Part name             | Description
+   * ----------------------|--------------------
+   * `year-number`         | Year number
+   * `year-separator`      | Year separator
    *
    * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
    *
-   * ## Attributes & Properties
+   * ### Change events
    *
-   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   * Depending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,
+   * the component can fire either a `change` event or an `unparsable-change` event:
    *
-   * - `has-title`/`undefined`: Set when the element has a title
-   * - `has-header`/`undefined`: Set when the element has header renderer
-   * - `has-footer`/`undefined`: Set when the element has footer renderer
-   * - `overflow`/`undefined`: Set to `top`, `bottom`, none or both
-   * - `width`: Set the width of the dialog.
-   * If a unitless number is provided, pixels are assumed.
-   * - `height`: Set the height of the dialog.
-   * If a unitless number is provided, pixels are assumed.
-   * - `draggable`: Set to true to enable repositioning the dialog by clicking and dragging.
+   * Value change             | Event
+   * :------------------------|:------------------
+   * empty => parsable        | change
+   * empty => unparsable      | unparsable-change
+   * parsable => empty        | change
+   * parsable => parsable     | change
+   * parsable => unparsable   | change
+   * unparsable => empty      | unparsable-change
+   * unparsable => parsable   | change
+   * unparsable => unparsable | unparsable-change
    *
-   * By default, only the overlay area can be used to drag the element. But,
-   * a child element can be marked as a draggable area by adding a
-   * "`draggable`" class to it, this will by default make all of its children draggable also.
-   * If you want a child element to be draggable
-   * but still have its children non-draggable (by default), mark it with
-   * "`draggable-leaf-only`" class name.
-   * - `_touchDevice`: undefined
-   * - `__dragHandleClassName`: undefined
-   * - `resizable`: Set to true to enable resizing the dialog by dragging the corners and edges.
-   * - `renderer`: Custom function for rendering the content of the dialog.
-   * Receives two arguments:
+   * ## Attributes & Properties
    *
-   * - `root` The root container DOM element. Append your content to it.
-   * - `dialog` The reference to the `<vaadin-dialog>` element.
-   * - `headerTitle`: String used for rendering a dialog title.
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * If both `headerTitle` and `headerRenderer` are defined, the title
-   * and the elements created by the renderer will be placed next to
-   * each other, with the title coming first.
+   * - `_positionTarget`: undefined
+   * - `disabled`/`undefined`: Set when the element is disabled
+   * - `has-value`/`undefined`: Set when the element has a value
+   * - `has-label`/`undefined`: Set when the element has a label
+   * - `has-helper`/`undefined`: Set when the element has helper text or slot
+   * - `has-error-message`/`undefined`: Set when the element has an error message
+   * - `has-tooltip`/`undefined`: Set when the element has a slotted tooltip
+   * - `invalid`/`undefined`: Set when the element is invalid
+   * - `focused`/`undefined`: Set when the element is focused
+   * - `focus-ring`/`undefined`: Set when the element is keyboard focused
+   * - `readonly`: Set when the element is readonly
+   * - `opened`: Set when the overlay is opened
+   * - `week-numbers`/`undefined`: Set when week numbers are shown in the calendar
+   * - `<vaadin-date-picker>`/`undefined`: undefined
+   * - `<vaadin-date-picker-overlay-content>`/`undefined`: undefined
+   * - `<vaadin-date-picker-month-scroller>`/`undefined`: undefined
+   * - `<vaadin-date-picker-year-scroller>`/`undefined`: undefined
+   * - `<vaadin-date-picker-year>`/`undefined`: undefined
+   * - `<vaadin-month-calendar>`/`undefined`: undefined
+   * - `<vaadin-date-picker-overlay-content>`/`undefined`: undefined
+   * - `years-toggle-button`/`undefined`: Fullscreen mode years scroller toggle
+   * - `toolbar`/`undefined`: Toolbar with slotted buttons
+   * - `_selectedDate`: The current selected date.
+   * - `_focusedDate`: undefined
+   * - `value`: Selected date.
    *
-   * When `headerTitle` is set, the attribute `has-title` is set on the dialog.
-   * - `headerRenderer`: Custom function for rendering the dialog header.
-   * Receives two arguments:
+   * Supported date formats:
+   * - ISO 8601 `"YYYY-MM-DD"` (default)
+   * - 6-digit extended ISO 8601 `"+YYYYYY-MM-DD"`, `"-YYYYYY-MM-DD"`
+   * - `initialPosition`: Date which should be visible when there is no value selected.
+   *
+   * The same date formats as for the `value` property are supported.
+   * - `autoOpenDisabled`: Set true to prevent the overlay from opening automatically.
+   * - `showWeekNumbers`: Set true to display ISO-8601 week numbers in the calendar. Notice that
+   * displaying week numbers is only supported when `i18n.firstDayOfWeek`
+   * is 1 (Monday).
+   * - `_fullscreen`: undefined
+   * - `_fullscreenMediaQuery`: undefined
+   * - `min`: The earliest date that can be selected. All earlier dates will be disabled.
    *
-   * - `root` The root container DOM element. Append your content to it.
-   * - `dialog` The reference to the `<vaadin-dialog>` element.
+   * Supported date formats:
+   * - ISO 8601 `"YYYY-MM-DD"` (default)
+   * - 6-digit extended ISO 8601 `"+YYYYYY-MM-DD"`, `"-YYYYYY-MM-DD"`
+   * - `max`: The latest date that can be selected. All later dates will be disabled.
    *
-   * If both `headerTitle` and `headerRenderer` are defined, the title
-   * and the elements created by the renderer will be placed next to
-   * each other, with the title coming first.
+   * Supported date formats:
+   * - ISO 8601 `"YYYY-MM-DD"` (default)
+   * - 6-digit extended ISO 8601 `"+YYYYYY-MM-DD"`, `"-YYYYYY-MM-DD"`
+   * - `isDateDisabled`: A function to be used to determine whether the user can select a given date.
+   * Receives a `DatePickerDate` object of the date to be selected and should return a
+   * boolean.
+   * - `_minDate`: The earliest date that can be selected. All earlier dates will be disabled.
+   * - `_maxDate`: The latest date that can be selected. All later dates will be disabled.
+   * - `_noInput`: undefined
+   * - `_ios`: undefined
+   * - `_focusOverlayOnOpen`: undefined
+   * - `_overlayContent`: undefined
+   * - `__enteredDate`: undefined
+   * - `i18n`: The object used to localize this component. To change the default
+   * localization, replace this with an object that provides all properties, or
+   * just the individual properties you want to change.
    *
-   * When `headerRenderer` is set, the attribute `has-header` is set on the dialog.
-   * - `footerRenderer`: Custom function for rendering the dialog footer.
-   * Receives two arguments:
+   * Should be overridden by subclasses to provide a custom JSDoc with the
+   * default I18N properties.
+   * - `__effectiveI18n`: undefined
+   * - `autofocus`: Specify that this control should have input focus when the page loads.
+   * - `focusElement`: A reference to the focusable element controlled by the mixin.
+   * It can be an input, textarea, button or any element with tabindex > -1.
    *
-   * - `root` The root container DOM element. Append your content to it.
-   * - `dialog` The reference to the `<vaadin-dialog>` element.
+   * Any component implementing this mixin is expected to provide it
+   * by using `this._setFocusElement(input)` Polymer API.
    *
-   * When `footerRenderer` is set, the attribute `has-footer` is set on the dialog.
-   * - `opened`: True if the dialog is visible and available for interaction.
-   * - `noCloseOnOutsideClick`: Set to true to disable closing dialog on outside click
-   * - `noCloseOnEsc`: Set to true to disable closing dialog on Escape press
-   * - `modeless`: Set to true to remove backdrop and allow click events on background elements.
-   * - `noFocusTrap`: Set to true to disable focus trapping.
-   * - `top`: Set the distance of the dialog from the top of the viewport.
-   * If a unitless number is provided, pixels are assumed.
+   * Toggling `tabindex` attribute on the host element propagates its value to `focusElement`.
+   * - `_lastTabIndex`: Override the property from `TabIndexMixin`
+   * to ensure the `tabindex` attribute of the focus element
+   * will be restored to `0` after re-enabling the element.
+   * - `allowedCharPattern`: A pattern matched against individual characters the user inputs.
    *
-   * Note that the dialog uses an internal container that has some
-   * additional spacing, which can be overridden by the theme.
-   * - `left`: Set the distance of the dialog from the left of the viewport.
-   * If a unitless number is provided, pixels are assumed.
+   * When set, the field will prevent:
+   * - `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`
+   * - `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`
+   * - `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`
    *
-   * Note that the dialog uses an internal container that has some
-   * additional spacing, which can be overridden by the theme.
-   * - `overlayRole`: The `role` attribute value to be set on the dialog. Defaults to "dialog".
-   * - `keepInViewport`: Set to true to prevent the dialog from moving outside the viewport bounds.
-   * When enabled, all four edges of the dialog will remain visible, for example
-   * when dragging the dialog or when the viewport is resized. Note that the
-   * dialog will also adjust any programmatically configured size and position
-   * so that it stays within the viewport.
+   * For example, to allow entering only numbers and minus signs, use:
+   * `allowedCharPattern = "[\\d-]"`
+   * - `autoselect`: If true, the input text gets fully selected when the field is focused using click or touch / tap.
+   * - `name`: The name of this field.
+   * - `placeholder`: A hint to the user of what can be entered in the field.
+   * - `title`: The text usually displayed in a tooltip popup when the mouse is over the field.
+   * - `ariaTarget`: A target element to which ARIA attributes are set.
+   * - `errorMessage`: Error to show when the field is invalid.
+   * - `helperText`: String used for the helper text.
+   * - `accessibleName`: String used to label the component to screen reader users.
+   * - `accessibleNameRef`: Id of the element used as label of the component to screen reader users.
+   * - `clearButtonVisible`: Set to true to display the clear icon which clears the input.
+   * This also enables clearing the input when pressing Esc key.
    * - `dir`: undefined
+   * - `_inputElementValue`: undefined (property only)
+   * - `_boundOnClick`: undefined (property only)
+   * - `_boundOnScroll`: undefined (property only)
+   * - `_boundOnBlur`: undefined (property only)
+   * - `_boundOnFocus`: undefined (property only)
+   * - `_boundOnPaste`: undefined (property only)
+   * - `_boundOnDrop`: undefined (property only)
+   * - `_boundOnBeforeInput`: undefined (property only)
+   * - `_fieldAriaController`: undefined (property only)
+   * - `_helperController`: undefined (property only)
+   * - `_errorController`: undefined (property only)
    *
    * ## Events
    *
    * Events that will be emitted by the component.
    *
-   * - `resize-start`: Fired when the dialog resize is started.
-   * - `resize`: Fired when the dialog resize is finished.
-   * - `drag-start`: Fired when the dialog drag is started.
-   * - `dragged`: Fired when the dialog drag is finished.
+   * - `change`: Fired when the user commits a value change.
+   * - `unparsable-change`: Fired when the user commits an unparsable value change and there is no change event.
+   * - `invalid-changed`: Fired when the `invalid` property changes.
    * - `opened-changed`: Fired when the `opened` property changes.
-   * - `closed`: Fired when the dialog is closed.
+   * - `value-changed`: Fired when the `value` property changes.
+   * - `validated`: Fired whenever the field is validated.
    * - `undefined`: undefined
    *
    * ## Methods
    *
    * Methods that can be called to access component functionality.
    *
-   * - `requestContentUpdate() => void`: Requests an update for the content of the dialog.
-   * While performing the update, it invokes the renderer passed in the `renderer` property,
-   * as well as `headerRender` and `footerRenderer` properties, if these are defined.
+   * - `open() => void`: Opens the dropdown.
+   * - `close() => void`: Closes the dropdown.
+   * - `checkValidity() => boolean`: Returns true if the current input value satisfies all constraints (if any)
    *
-   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
+   * Override the `checkValidity` method for custom validations.
    * - `createProperty(name, options) => void`: undefined
    * - `getOrCreateMap(name) => void`: undefined
    * - `addCheckedInitializer(initializer) => void`: undefined
    * - `getPropertyDescriptor(name, key, options) => void`: undefined
-   *
-   * ## CSS Custom Properties
-   *
-   * CSS variables available for styling the component.
-   *
-   * - `--vaadin-dialog-background`: undefined (default: `undefined`)
-   * - `--vaadin-dialog-border-color`: undefined (default: `undefined`)
-   * - `--vaadin-dialog-border-radius`: undefined (default: `undefined`)
-   * - `--vaadin-dialog-border-width`: undefined (default: `undefined`)
-   * - `--vaadin-dialog-max-width`: undefined (default: `undefined`)
-   * - `--vaadin-dialog-min-width`: undefined (default: `undefined`)
-   * - `--vaadin-dialog-overflow-indicator-color`: undefined (default: `undefined`)
-   * - `--vaadin-dialog-overflow-indicator-height`: undefined (default: `undefined`)
-   * - `--vaadin-dialog-padding`: undefined (default: `undefined`)
-   * - `--vaadin-dialog-shadow`: undefined (default: `undefined`)
-   * - `--vaadin-dialog-text-color`: undefined (default: `undefined`)
-   * - `--vaadin-dialog-title-color`: undefined (default: `undefined`)
-   * - `--vaadin-dialog-title-font-size`: undefined (default: `undefined`)
-   * - `--vaadin-dialog-title-font-weight`: undefined (default: `undefined`)
-   * - `--vaadin-dialog-title-line-height`: undefined (default: `undefined`)
-   * - `--vaadin-overlay-backdrop-background`: See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation. (default: `undefined`)
    */
-  "vaadin-dialog": Partial<DialogProps & BaseProps<Dialog> & BaseEvents>;
+  "vaadin-date-picker": Partial<
+    DatePickerProps & BaseProps<DatePicker> & BaseEvents
+  >;
 
   /**
    * `<vaadin-icon>` is a Web Component for displaying SVG icons.
@@ -26610,140 +26610,71 @@ export type CustomElementsSolidJs = {
   >;
 
   /**
-   * An element used internally by `<vaadin-date-picker>`. Not intended to be used separately.
-   *
-   * ## Attributes & Properties
-   *
-   * Component attributes and properties that can be applied to the element or by using JavaScript.
-   *
-   * - `year`: undefined
-   * - `selectedDate`: undefined
-   *
-   * ## Events
-   *
-   * Events that will be emitted by the component.
-   *
-   * - `undefined`: undefined
-   *
-   * ## Methods
-   *
-   * Methods that can be called to access component functionality.
-   *
-   * - `createProperty(name, options) => void`: undefined
-   * - `getOrCreateMap(name) => void`: undefined
-   * - `addCheckedInitializer(initializer) => void`: undefined
-   * - `getPropertyDescriptor(name, key, options) => void`: undefined
-   */
-  "vaadin-date-picker-year": Partial<
-    DatePickerYearProps &
-      DatePickerYearSolidJsProps &
-      BaseProps<DatePickerYear> &
-      BaseEvents
-  >;
-
-  /**
-   * `<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.
+   * `<vaadin-date-time-picker>` is a Web Component providing a date time selection field.
    *
    * ```html
-   * <vaadin-date-picker label="Birthday"></vaadin-date-picker>
+   * <vaadin-date-time-picker value="2019-09-16T15:00"></vaadin-date-time-picker>
    * ```
    *
    * ```js
-   * datePicker.value = '2016-03-02';
+   * dateTimePicker.value = '2019-09-16T15:00';
    * ```
    *
    * When the selected `value` is changed, a `value-changed` event is triggered.
    *
    * ### Styling
    *
-   * The following custom properties are available for styling:
-   *
-   * Custom property                | Description                | Default
-   * -------------------------------|----------------------------|---------
-   * `--vaadin-field-default-width` | Default width of the field | `12em`
-   *
    * The following shadow DOM parts are available for styling:
    *
    * Part name            | Description
    * ---------------------|----------------
-   * `label`              | The label element
-   * `input-field`        | The element that wraps prefix, value and buttons
-   * `field-button`       | Set on both clear and toggle buttons
-   * `clear-button`       | The clear button
-   * `error-message`      | The error message element
-   * `helper-text`        | The helper text element wrapper
+   * `label`              | The slotted label element wrapper
+   * `input-fields`       | The date and time pickers wrapper
+   * `helper-text`        | The slotted helper text element wrapper
+   * `error-message`      | The slotted error message element wrapper
    * `required-indicator` | The `required` state indicator element
-   * `toggle-button`      | The toggle button
-   * `backdrop`           | Backdrop of the overlay
-   * `overlay`            | The overlay container
-   * `content`            | The overlay content
    *
    * The following state attributes are available for styling:
    *
-   * Attribute            | Description
-   * ---------------------|---------------------------------
-   * `disabled`           | Set when the element is disabled
-   * `has-value`          | Set when the element has a value
-   * `has-label`          | Set when the element has a label
-   * `has-helper`         | Set when the element has helper text or slot
-   * `has-error-message`  | Set when the element has an error message
-   * `has-tooltip`        | Set when the element has a slotted tooltip
-   * `invalid`            | Set when the element is invalid
-   * `focused`            | Set when the element is focused
-   * `focus-ring`         | Set when the element is keyboard focused
-   * `readonly`           | Set when the element is readonly
-   * `opened`             | Set when the overlay is opened
-   * `week-numbers`       | Set when week numbers are shown in the calendar
-   *
-   * ### Internal components
-   *
-   * In addition to `<vaadin-date-picker>` itself, the following internal
-   * components are themable:
-   *
-   * - `<vaadin-date-picker-overlay-content>`
-   * - `<vaadin-date-picker-month-scroller>`
-   * - `<vaadin-date-picker-year-scroller>`
-   * - `<vaadin-date-picker-year>`
-   * - `<vaadin-month-calendar>`
-   *
-   * In order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:
-   *
-   * Part name             | Description
-   * ----------------------|--------------------
-   * `years-toggle-button` | Fullscreen mode years scroller toggle
-   * `toolbar`             | Toolbar with slotted buttons
-   *
-   * The following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:
+   * Attribute           | Description
+   * --------------------|---------------------------------
+   * `disabled`          | Set when the element is disabled
+   * `focused`           | Set when the element is focused
+   * `focus-ring`        | Set when the element is keyboard focused
+   * `readonly`          | Set when the element is readonly
+   * `invalid`           | Set when the element is invalid
+   * `has-label`         | Set when the element has a label
+   * `has-value`         | Set when the element has a value
+   * `has-helper`        | Set when the element has helper text
+   * `has-error-message` | Set when the element has an error message
+   * `has-tooltip`       | Set when the element has a slotted tooltip
    *
-   * Attribute       | Description
-   * ----------------|-------------------------------------------------
-   * `desktop`       | Set when the overlay content is in desktop mode
-   * `fullscreen`    | Set when the overlay content is in fullscreen mode
-   * `years-visible` | Set when the year scroller is visible in fullscreen mode
+   * The following custom CSS properties are available for styling:
    *
-   * In order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:
+   * Custom CSS property                                |
+   * :--------------------------------------------------|
+   * | `--vaadin-date-time-picker-gap`                  |
+   * | `--vaadin-input-field-error-color`               |
+   * | `--vaadin-input-field-error-font-size`           |
+   * | `--vaadin-input-field-error-font-weight`         |
+   * | `--vaadin-input-field-error-line-height`         |
+   * | `--vaadin-input-field-label-color`               |
+   * | `--vaadin-input-field-label-font-size`           |
+   * | `--vaadin-input-field-label-font-weight`         |
+   * | `--vaadin-input-field-label-line-height`         |
+   * | `--vaadin-input-field-helper-color`              |
+   * | `--vaadin-input-field-helper-font-size`          |
+   * | `--vaadin-input-field-helper-font-weight`        |
+   * | `--vaadin-input-field-helper-line-height`        |
+   * | `--vaadin-input-field-required-indicator-color`  |
+   * | `--vaadin-input-field-required-indicator`        |
    *
-   * Part name             | Description
-   * ----------------------|--------------------
-   * `month-header`        | Month title
-   * `weekdays`            | Weekday container
-   * `weekday`             | Weekday element
-   * `week-numbers`        | Week numbers container
-   * `week-number`         | Week number element
-   * `date`                | Date element
-   * `disabled`            | Disabled date element
-   * `focused`             | Focused date element
-   * `selected`            | Selected date element
-   * `today`               | Date element corresponding to the current day
-   * `past`                | Date element corresponding to the date in the past
-   * `future`              | Date element corresponding to the date in the future
+   * ### Internal components
    *
-   * In order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:
+   * The following components are created by `<vaadin-date-time-picker>` and placed in light DOM:
    *
-   * Part name             | Description
-   * ----------------------|--------------------
-   * `year-number`         | Year number
-   * `year-separator`      | Year separator
+   * - [`<vaadin-date-picker>`](#/elements/vaadin-date-picker).
+   * - [`<vaadin-time-picker>`](#/elements/vaadin-time-picker).
    *
    * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
    *
@@ -26762,69 +26693,75 @@ export type CustomElementsSolidJs = {
    * unparsable => empty      | unparsable-change
    * unparsable => parsable   | change
    * unparsable => unparsable | unparsable-change
+   * incomplete => empty      | unparsable-change
+   * incomplete => parsable   | change
+   * incomplete => unparsable | unparsable-change
+   * empty => incomplete      | unparsable-change
+   * parsable => incomplete   | change
+   * unparsable => incomplete | unparsable-change
    *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `_positionTarget`: undefined
-   * - `disabled`/`undefined`: Set when the element is disabled
-   * - `has-value`/`undefined`: Set when the element has a value
-   * - `has-label`/`undefined`: Set when the element has a label
-   * - `has-helper`/`undefined`: Set when the element has helper text or slot
-   * - `has-error-message`/`undefined`: Set when the element has an error message
-   * - `has-tooltip`/`undefined`: Set when the element has a slotted tooltip
-   * - `invalid`/`undefined`: Set when the element is invalid
+   * - `disabled`: Set when the element is disabled
    * - `focused`/`undefined`: Set when the element is focused
    * - `focus-ring`/`undefined`: Set when the element is keyboard focused
    * - `readonly`: Set when the element is readonly
-   * - `opened`: Set when the overlay is opened
-   * - `week-numbers`/`undefined`: Set when week numbers are shown in the calendar
-   * - `<vaadin-date-picker>`/`undefined`: undefined
-   * - `<vaadin-date-picker-overlay-content>`/`undefined`: undefined
-   * - `<vaadin-date-picker-month-scroller>`/`undefined`: undefined
-   * - `<vaadin-date-picker-year-scroller>`/`undefined`: undefined
-   * - `<vaadin-date-picker-year>`/`undefined`: undefined
-   * - `<vaadin-month-calendar>`/`undefined`: undefined
-   * - `<vaadin-date-picker-overlay-content>`/`undefined`: undefined
-   * - `years-toggle-button`/`undefined`: Fullscreen mode years scroller toggle
-   * - `toolbar`/`undefined`: Toolbar with slotted buttons
-   * - `_selectedDate`: The current selected date.
-   * - `_focusedDate`: undefined
-   * - `value`: Selected date.
+   * - `invalid`/`undefined`: Set when the element is invalid
+   * - `has-label`/`undefined`: Set when the element has a label
+   * - `has-value`/`undefined`: Set when the element has a value
+   * - `has-helper`/`undefined`: Set when the element has helper text
+   * - `has-error-message`/`undefined`: Set when the element has an error message
+   * - `has-tooltip`/`undefined`: Set when the element has a slotted tooltip
+   * - `name`: The name of the control, which is submitted with the form data.
+   * - `value`: The value for this element.
    *
-   * Supported date formats:
-   * - ISO 8601 `"YYYY-MM-DD"` (default)
-   * - 6-digit extended ISO 8601 `"+YYYYYY-MM-DD"`, `"-YYYYYY-MM-DD"`
-   * - `initialPosition`: Date which should be visible when there is no value selected.
+   * Supported date time format is based on ISO 8601 (without a time zone designator):
+   * - Minute precision `"YYYY-MM-DDThh:mm"` (default)
+   * - Second precision `"YYYY-MM-DDThh:mm:ss"`
+   * - Millisecond precision `"YYYY-MM-DDThh:mm:ss.fff"`
+   * - `min`: The earliest allowed value (date and time) that can be selected. All earlier values will be disabled.
    *
-   * The same date formats as for the `value` property are supported.
-   * - `autoOpenDisabled`: Set true to prevent the overlay from opening automatically.
+   * Supported date time format is based on ISO 8601 (without a time zone designator):
+   * - Minute precision `"YYYY-MM-DDThh:mm"`
+   * - Second precision `"YYYY-MM-DDThh:mm:ss"`
+   * - Millisecond precision `"YYYY-MM-DDThh:mm:ss.fff"`
+   * - `max`: The latest value (date and time) that can be selected. All later values will be disabled.
+   *
+   * Supported date time format is based on ISO 8601 (without a time zone designator):
+   * - Minute precision `"YYYY-MM-DDThh:mm"`
+   * - Second precision `"YYYY-MM-DDThh:mm:ss"`
+   * - Millisecond precision `"YYYY-MM-DDThh:mm:ss.fff"`
+   * - `__minDateTime`: The earliest value that can be selected. All earlier values will be disabled.
+   * - `__maxDateTime`: The latest value that can be selected. All later values will be disabled.
+   * - `datePlaceholder`: A placeholder string for the date field.
+   * - `timePlaceholder`: A placeholder string for the time field.
+   * - `step`: Defines the time interval (in seconds) between the items displayed
+   * in the time selection box. The default is 1 hour (i.e. `3600`).
+   *
+   * It also configures the precision of the time part of the value string. By default
+   * the component formats time values as `hh:mm` but setting a step value
+   * lower than one minute or one second, format resolution changes to
+   * `hh:mm:ss` and `hh:mm:ss.fff` respectively.
+   *
+   * Unit must be set in seconds, and for correctly configuring intervals
+   * in the dropdown, it need to evenly divide a day.
+   *
+   * Note: it is possible to define step that is dividing an hour in inexact
+   * fragments (i.e. 5760 seconds which equals 1 hour 36 minutes), but it is
+   * not recommended to use it for better UX.
+   * - `initialPosition`: Date which should be visible in the date picker overlay when there is no value selected.
+   *
+   * The same date formats as for the `value` property are supported but without the time part.
    * - `showWeekNumbers`: Set true to display ISO-8601 week numbers in the calendar. Notice that
    * displaying week numbers is only supported when `i18n.firstDayOfWeek`
    * is 1 (Monday).
-   * - `_fullscreen`: undefined
-   * - `_fullscreenMediaQuery`: undefined
-   * - `min`: The earliest date that can be selected. All earlier dates will be disabled.
-   *
-   * Supported date formats:
-   * - ISO 8601 `"YYYY-MM-DD"` (default)
-   * - 6-digit extended ISO 8601 `"+YYYYYY-MM-DD"`, `"-YYYYYY-MM-DD"`
-   * - `max`: The latest date that can be selected. All later dates will be disabled.
-   *
-   * Supported date formats:
-   * - ISO 8601 `"YYYY-MM-DD"` (default)
-   * - 6-digit extended ISO 8601 `"+YYYYYY-MM-DD"`, `"-YYYYYY-MM-DD"`
-   * - `isDateDisabled`: A function to be used to determine whether the user can select a given date.
-   * Receives a `DatePickerDate` object of the date to be selected and should return a
-   * boolean.
-   * - `_minDate`: The earliest date that can be selected. All earlier dates will be disabled.
-   * - `_maxDate`: The latest date that can be selected. All later dates will be disabled.
-   * - `_noInput`: undefined
-   * - `_ios`: undefined
-   * - `_focusOverlayOnOpen`: undefined
-   * - `_overlayContent`: undefined
-   * - `__enteredDate`: undefined
+   * - `autoOpenDisabled`: Set to true to prevent the overlays from opening automatically.
+   * - `autofocus`: Specify that this control should have input focus when the page loads.
+   * - `__selectedDateTime`: The current selected date time.
+   * - `__datePicker`: The current slotted date picker.
+   * - `__timePicker`: The current slotted time picker.
    * - `i18n`: The object used to localize this component. To change the default
    * localization, replace this with an object that provides all properties, or
    * just the individual properties you want to change.
@@ -26832,46 +26769,15 @@ export type CustomElementsSolidJs = {
    * Should be overridden by subclasses to provide a custom JSDoc with the
    * default I18N properties.
    * - `__effectiveI18n`: undefined
-   * - `autofocus`: Specify that this control should have input focus when the page loads.
-   * - `focusElement`: A reference to the focusable element controlled by the mixin.
-   * It can be an input, textarea, button or any element with tabindex > -1.
-   *
-   * Any component implementing this mixin is expected to provide it
-   * by using `this._setFocusElement(input)` Polymer API.
-   *
-   * Toggling `tabindex` attribute on the host element propagates its value to `focusElement`.
-   * - `_lastTabIndex`: Override the property from `TabIndexMixin`
-   * to ensure the `tabindex` attribute of the focus element
-   * will be restored to `0` after re-enabling the element.
-   * - `allowedCharPattern`: A pattern matched against individual characters the user inputs.
-   *
-   * When set, the field will prevent:
-   * - `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`
-   * - `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`
-   * - `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`
-   *
-   * For example, to allow entering only numbers and minus signs, use:
-   * `allowedCharPattern = "[\\d-]"`
-   * - `autoselect`: If true, the input text gets fully selected when the field is focused using click or touch / tap.
-   * - `name`: The name of this field.
-   * - `placeholder`: A hint to the user of what can be entered in the field.
-   * - `title`: The text usually displayed in a tooltip popup when the mouse is over the field.
    * - `ariaTarget`: A target element to which ARIA attributes are set.
    * - `errorMessage`: Error to show when the field is invalid.
    * - `helperText`: String used for the helper text.
    * - `accessibleName`: String used to label the component to screen reader users.
    * - `accessibleNameRef`: Id of the element used as label of the component to screen reader users.
-   * - `clearButtonVisible`: Set to true to display the clear icon which clears the input.
-   * This also enables clearing the input when pressing Esc key.
    * - `dir`: undefined
-   * - `_inputElementValue`: undefined (property only)
-   * - `_boundOnClick`: undefined (property only)
-   * - `_boundOnScroll`: undefined (property only)
-   * - `_boundOnBlur`: undefined (property only)
-   * - `_boundOnFocus`: undefined (property only)
-   * - `_boundOnPaste`: undefined (property only)
-   * - `_boundOnDrop`: undefined (property only)
-   * - `_boundOnBeforeInput`: undefined (property only)
+   * - `__defaultDateMinMaxValue`: undefined (property only)
+   * - `__defaultTimeMinValue`: undefined (property only)
+   * - `__defaultTimeMaxValue`: undefined (property only)
    * - `_fieldAriaController`: undefined (property only)
    * - `_helperController`: undefined (property only)
    * - `_errorController`: undefined (property only)
@@ -26880,226 +26786,296 @@ export type CustomElementsSolidJs = {
    *
    * Events that will be emitted by the component.
    *
-   * - `change`: Fired when the user commits a value change.
-   * - `unparsable-change`: Fired when the user commits an unparsable value change and there is no change event.
-   * - `invalid-changed`: Fired when the `invalid` property changes.
-   * - `opened-changed`: Fired when the `opened` property changes.
-   * - `value-changed`: Fired when the `value` property changes.
-   * - `validated`: Fired whenever the field is validated.
+   * - `change`: Fired when the user commits a value change.
+   * - `unparsable-change`: Fired when the user commits an unparsable or incomplete value change and there is no change event.
+   * - `invalid-changed`: Fired when the `invalid` property changes.
+   * - `value-changed`: Fired when the `value` property changes.
+   * - `validated`: Fired whenever the field is validated.
+   * - `undefined`: undefined
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `checkValidity() => boolean`: Returns true if the current input value satisfies all constraints (if any)
+   *
+   * You can override the `checkValidity` method for custom validations.
+   * - `createProperty(name, options) => void`: undefined
+   * - `getOrCreateMap(name) => void`: undefined
+   * - `addCheckedInitializer(initializer) => void`: undefined
+   * - `getPropertyDescriptor(name, key, options) => void`: undefined
+   *
+   * ## CSS Custom Properties
+   *
+   * CSS variables available for styling the component.
+   *
+   * - `--vaadin-date-time-picker-gap`: undefined (default: `undefined`)
+   * - `--vaadin-input-field-error-color`: undefined (default: `undefined`)
+   * - `--vaadin-input-field-error-font-size`: undefined (default: `undefined`)
+   * - `--vaadin-input-field-error-font-weight`: undefined (default: `undefined`)
+   * - `--vaadin-input-field-error-line-height`: undefined (default: `undefined`)
+   * - `--vaadin-input-field-label-color`: undefined (default: `undefined`)
+   * - `--vaadin-input-field-label-font-size`: undefined (default: `undefined`)
+   * - `--vaadin-input-field-label-font-weight`: undefined (default: `undefined`)
+   * - `--vaadin-input-field-label-line-height`: undefined (default: `undefined`)
+   * - `--vaadin-input-field-helper-color`: undefined (default: `undefined`)
+   * - `--vaadin-input-field-helper-font-size`: undefined (default: `undefined`)
+   * - `--vaadin-input-field-helper-font-weight`: undefined (default: `undefined`)
+   * - `--vaadin-input-field-helper-line-height`: undefined (default: `undefined`)
+   * - `--vaadin-input-field-required-indicator-color`: undefined (default: `undefined`)
+   * - `--vaadin-input-field-required-indicator`: ### Internal components (default: `undefined`)
+   * - `<vaadin-date-time-picker>`: undefined (default: `undefined`)
+   * - `<vaadin-date-picker>`: undefined (default: `undefined`)
+   * - `<vaadin-time-picker>`: undefined (default: `undefined`)
+   * - `change`: undefined (default: `undefined`)
+   * - `unparsable-change`: undefined (default: `undefined`)
+   */
+  "vaadin-date-time-picker": Partial<
+    DateTimePickerProps &
+      DateTimePickerSolidJsProps &
+      BaseProps<DateTimePicker> &
+      BaseEvents
+  >;
+
+  /**
+   * An element used internally by `<vaadin-dialog>`. Not intended to be used separately.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `headerTitle`: String used for rendering a dialog title.
+   * - `headerRenderer`: Custom function for rendering the dialog header.
+   * - `footerRenderer`: Custom function for rendering the dialog footer.
+   * - `keepInViewport`: Whether to keep the overlay within the viewport.
+   * - `opened`: When true, the overlay is visible and attached to body.
+   * - `owner`: Owner element passed with renderer function
+   * - `model`: Object with properties that is passed to `renderer` function
+   * - `renderer`: Custom function for rendering the content of the overlay.
+   * Receives three arguments:
+   *
+   * - `root` The root container DOM element. Append your content to it.
+   * - `owner` The host element of the renderer function.
+   * - `model` The object with the properties related with rendering.
+   * - `modeless`: When true the overlay won't disable the main content, showing
+   * it doesn't change the functionality of the user interface.
+   * - `hidden`: When set to true, the overlay is hidden. This also closes the overlay
+   * immediately in case there is a closing animation in progress.
+   * - `withBackdrop`: When true the overlay has backdrop on top of content when opened.
+   * - `focusTrap`: When true, opening the overlay moves focus to the first focusable child,
+   * or to the overlay part with tabindex if there are no focusable children.
+   * - `restoreFocusOnClose`: Set to true to enable restoring of focus when overlay is closed.
+   * - `restoreFocusNode`: Set to specify the element which should be focused on overlay close,
+   * if `restoreFocusOnClose` is set to true.
+   * - `dir`: undefined
+   * - `_boundMouseDownListener`: undefined (property only)
+   * - `_boundMouseUpListener`: undefined (property only)
+   * - `_boundOutsideClickListener`: undefined (property only)
+   * - `_boundKeydownListener`: undefined (property only)
+   * - `__focusTrapController`: undefined (property only)
+   * - `__focusRestorationController`: undefined (property only)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `vaadin-overlay-closed`: undefined
+   * - `vaadin-overlay-closing`: undefined
    * - `undefined`: undefined
    *
    * ## Methods
    *
    * Methods that can be called to access component functionality.
    *
-   * - `open() => void`: Opens the dropdown.
-   * - `close() => void`: Closes the dropdown.
-   * - `checkValidity() => boolean`: Returns true if the current input value satisfies all constraints (if any)
+   * - `requestContentUpdate() => void`: Requests an update for the content of the overlay.
+   * While performing the update, it invokes the renderer passed in the `renderer` property.
    *
-   * Override the `checkValidity` method for custom validations.
+   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
+   * - `getBounds() => !DialogOverlayBounds`: Retrieves the coordinates of the overlay.
+   * - `setBounds(bounds, absolute = true) => void`: Override method from OverlayMixin to adjust the position of the overlay if `keepInViewport` is true.
+   * - `close(sourceEvent: Event=) => void`: undefined
    * - `createProperty(name, options) => void`: undefined
    * - `getOrCreateMap(name) => void`: undefined
    * - `addCheckedInitializer(initializer) => void`: undefined
    * - `getPropertyDescriptor(name, key, options) => void`: undefined
    */
-  "vaadin-date-picker": Partial<
-    DatePickerProps &
-      DatePickerSolidJsProps &
-      BaseProps<DatePicker> &
+  "vaadin-dialog-overlay": Partial<
+    DialogOverlayProps &
+      DialogOverlaySolidJsProps &
+      BaseProps<DialogOverlay> &
       BaseEvents
   >;
 
   /**
-   * `<vaadin-date-time-picker>` is a Web Component providing a date time selection field.
+   * `<vaadin-dialog>` is a Web Component for creating customized modal dialogs.
+   *
+   * ### Rendering
+   *
+   * The content of the dialog can be populated by using the renderer callback function.
+   *
+   * The renderer function provides `root`, `dialog` arguments.
+   * Generate DOM content, append it to the `root` element and control the state
+   * of the host element by accessing `dialog`. Before generating new content,
+   * users are able to check if there is already content in `root` for reusing it.
    *
    * ```html
-   * <vaadin-date-time-picker value="2019-09-16T15:00"></vaadin-date-time-picker>
+   * <vaadin-dialog id="dialog"></vaadin-dialog>
    * ```
-   *
    * ```js
-   * dateTimePicker.value = '2019-09-16T15:00';
+   * const dialog = document.querySelector('#dialog');
+   * dialog.renderer = function(root, dialog) {
+   *   root.textContent = "Sample dialog";
+   * };
    * ```
    *
-   * When the selected `value` is changed, a `value-changed` event is triggered.
+   * Renderer is called on the opening of the dialog.
+   * DOM generated during the renderer call can be reused
+   * in the next renderer call and will be provided with the `root` argument.
+   * On first call it will be empty.
    *
    * ### Styling
    *
    * The following shadow DOM parts are available for styling:
    *
-   * Part name            | Description
-   * ---------------------|----------------
-   * `label`              | The slotted label element wrapper
-   * `input-fields`       | The date and time pickers wrapper
-   * `helper-text`        | The slotted helper text element wrapper
-   * `error-message`      | The slotted error message element wrapper
-   * `required-indicator` | The `required` state indicator element
+   * Part name        | Description
+   * -----------------|-------------------------------------------
+   * `backdrop`       | Backdrop of the overlay
+   * `overlay`        | The overlay container
+   * `content`        | The overlay content
+   * `header`         | Element wrapping title and header content
+   * `header-content` | Element wrapping the header content slot
+   * `title`          | Element wrapping the title slot
+   * `footer`         | Element wrapping the footer slot
    *
    * The following state attributes are available for styling:
    *
-   * Attribute           | Description
-   * --------------------|---------------------------------
-   * `disabled`          | Set when the element is disabled
-   * `focused`           | Set when the element is focused
-   * `focus-ring`        | Set when the element is keyboard focused
-   * `readonly`          | Set when the element is readonly
-   * `invalid`           | Set when the element is invalid
-   * `has-label`         | Set when the element has a label
-   * `has-value`         | Set when the element has a value
-   * `has-helper`        | Set when the element has helper text
-   * `has-error-message` | Set when the element has an error message
-   * `has-tooltip`       | Set when the element has a slotted tooltip
+   * Attribute        | Description
+   * -----------------|--------------------------------------------
+   * `has-title`      | Set when the element has a title
+   * `has-header`     | Set when the element has header renderer
+   * `has-footer`     | Set when the element has footer renderer
+   * `overflow`       | Set to `top`, `bottom`, none or both
    *
    * The following custom CSS properties are available for styling:
    *
-   * Custom CSS property                                |
-   * :--------------------------------------------------|
-   * | `--vaadin-date-time-picker-gap`                  |
-   * | `--vaadin-input-field-error-color`               |
-   * | `--vaadin-input-field-error-font-size`           |
-   * | `--vaadin-input-field-error-font-weight`         |
-   * | `--vaadin-input-field-error-line-height`         |
-   * | `--vaadin-input-field-label-color`               |
-   * | `--vaadin-input-field-label-font-size`           |
-   * | `--vaadin-input-field-label-font-weight`         |
-   * | `--vaadin-input-field-label-line-height`         |
-   * | `--vaadin-input-field-helper-color`              |
-   * | `--vaadin-input-field-helper-font-size`          |
-   * | `--vaadin-input-field-helper-font-weight`        |
-   * | `--vaadin-input-field-helper-line-height`        |
-   * | `--vaadin-input-field-required-indicator-color`  |
-   * | `--vaadin-input-field-required-indicator`        |
-   *
-   * ### Internal components
-   *
-   * The following components are created by `<vaadin-date-time-picker>` and placed in light DOM:
-   *
-   * - [`<vaadin-date-picker>`](#/elements/vaadin-date-picker).
-   * - [`<vaadin-time-picker>`](#/elements/vaadin-time-picker).
+   * Custom CSS property                          |
+   * :--------------------------------------------|
+   * |`--vaadin-dialog-background`                |
+   * |`--vaadin-dialog-border-color`              |
+   * |`--vaadin-dialog-border-radius`             |
+   * |`--vaadin-dialog-border-width`              |
+   * |`--vaadin-dialog-max-width`                 |
+   * |`--vaadin-dialog-min-width`                 |
+   * |`--vaadin-dialog-overflow-indicator-color`  |
+   * |`--vaadin-dialog-overflow-indicator-height` |
+   * |`--vaadin-dialog-padding`                   |
+   * |`--vaadin-dialog-shadow`                    |
+   * |`--vaadin-dialog-text-color`                |
+   * |`--vaadin-dialog-title-color`               |
+   * |`--vaadin-dialog-title-font-size`           |
+   * |`--vaadin-dialog-title-font-weight`         |
+   * |`--vaadin-dialog-title-line-height`         |
+   * |`--vaadin-overlay-backdrop-background`      |
    *
    * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
    *
-   * ### Change events
-   *
-   * Depending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,
-   * the component can fire either a `change` event or an `unparsable-change` event:
-   *
-   * Value change             | Event
-   * :------------------------|:------------------
-   * empty => parsable        | change
-   * empty => unparsable      | unparsable-change
-   * parsable => empty        | change
-   * parsable => parsable     | change
-   * parsable => unparsable   | change
-   * unparsable => empty      | unparsable-change
-   * unparsable => parsable   | change
-   * unparsable => unparsable | unparsable-change
-   * incomplete => empty      | unparsable-change
-   * incomplete => parsable   | change
-   * incomplete => unparsable | unparsable-change
-   * empty => incomplete      | unparsable-change
-   * parsable => incomplete   | change
-   * unparsable => incomplete | unparsable-change
-   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `disabled`: Set when the element is disabled
-   * - `focused`/`undefined`: Set when the element is focused
-   * - `focus-ring`/`undefined`: Set when the element is keyboard focused
-   * - `readonly`: Set when the element is readonly
-   * - `invalid`/`undefined`: Set when the element is invalid
-   * - `has-label`/`undefined`: Set when the element has a label
-   * - `has-value`/`undefined`: Set when the element has a value
-   * - `has-helper`/`undefined`: Set when the element has helper text
-   * - `has-error-message`/`undefined`: Set when the element has an error message
-   * - `has-tooltip`/`undefined`: Set when the element has a slotted tooltip
-   * - `name`: The name of the control, which is submitted with the form data.
-   * - `value`: The value for this element.
+   * - `has-title`/`undefined`: Set when the element has a title
+   * - `has-header`/`undefined`: Set when the element has header renderer
+   * - `has-footer`/`undefined`: Set when the element has footer renderer
+   * - `overflow`/`undefined`: Set to `top`, `bottom`, none or both
+   * - `width`: Set the width of the dialog.
+   * If a unitless number is provided, pixels are assumed.
+   * - `height`: Set the height of the dialog.
+   * If a unitless number is provided, pixels are assumed.
+   * - `draggable`: Set to true to enable repositioning the dialog by clicking and dragging.
    *
-   * Supported date time format is based on ISO 8601 (without a time zone designator):
-   * - Minute precision `"YYYY-MM-DDThh:mm"` (default)
-   * - Second precision `"YYYY-MM-DDThh:mm:ss"`
-   * - Millisecond precision `"YYYY-MM-DDThh:mm:ss.fff"`
-   * - `min`: The earliest allowed value (date and time) that can be selected. All earlier values will be disabled.
+   * By default, only the overlay area can be used to drag the element. But,
+   * a child element can be marked as a draggable area by adding a
+   * "`draggable`" class to it, this will by default make all of its children draggable also.
+   * If you want a child element to be draggable
+   * but still have its children non-draggable (by default), mark it with
+   * "`draggable-leaf-only`" class name.
+   * - `_touchDevice`: undefined
+   * - `__dragHandleClassName`: undefined
+   * - `resizable`: Set to true to enable resizing the dialog by dragging the corners and edges.
+   * - `renderer`: Custom function for rendering the content of the dialog.
+   * Receives two arguments:
    *
-   * Supported date time format is based on ISO 8601 (without a time zone designator):
-   * - Minute precision `"YYYY-MM-DDThh:mm"`
-   * - Second precision `"YYYY-MM-DDThh:mm:ss"`
-   * - Millisecond precision `"YYYY-MM-DDThh:mm:ss.fff"`
-   * - `max`: The latest value (date and time) that can be selected. All later values will be disabled.
+   * - `root` The root container DOM element. Append your content to it.
+   * - `dialog` The reference to the `<vaadin-dialog>` element.
+   * - `headerTitle`: String used for rendering a dialog title.
    *
-   * Supported date time format is based on ISO 8601 (without a time zone designator):
-   * - Minute precision `"YYYY-MM-DDThh:mm"`
-   * - Second precision `"YYYY-MM-DDThh:mm:ss"`
-   * - Millisecond precision `"YYYY-MM-DDThh:mm:ss.fff"`
-   * - `__minDateTime`: The earliest value that can be selected. All earlier values will be disabled.
-   * - `__maxDateTime`: The latest value that can be selected. All later values will be disabled.
-   * - `datePlaceholder`: A placeholder string for the date field.
-   * - `timePlaceholder`: A placeholder string for the time field.
-   * - `step`: Defines the time interval (in seconds) between the items displayed
-   * in the time selection box. The default is 1 hour (i.e. `3600`).
+   * If both `headerTitle` and `headerRenderer` are defined, the title
+   * and the elements created by the renderer will be placed next to
+   * each other, with the title coming first.
    *
-   * It also configures the precision of the time part of the value string. By default
-   * the component formats time values as `hh:mm` but setting a step value
-   * lower than one minute or one second, format resolution changes to
-   * `hh:mm:ss` and `hh:mm:ss.fff` respectively.
+   * When `headerTitle` is set, the attribute `has-title` is set on the dialog.
+   * - `headerRenderer`: Custom function for rendering the dialog header.
+   * Receives two arguments:
    *
-   * Unit must be set in seconds, and for correctly configuring intervals
-   * in the dropdown, it need to evenly divide a day.
+   * - `root` The root container DOM element. Append your content to it.
+   * - `dialog` The reference to the `<vaadin-dialog>` element.
    *
-   * Note: it is possible to define step that is dividing an hour in inexact
-   * fragments (i.e. 5760 seconds which equals 1 hour 36 minutes), but it is
-   * not recommended to use it for better UX.
-   * - `initialPosition`: Date which should be visible in the date picker overlay when there is no value selected.
+   * If both `headerTitle` and `headerRenderer` are defined, the title
+   * and the elements created by the renderer will be placed next to
+   * each other, with the title coming first.
    *
-   * The same date formats as for the `value` property are supported but without the time part.
-   * - `showWeekNumbers`: Set true to display ISO-8601 week numbers in the calendar. Notice that
-   * displaying week numbers is only supported when `i18n.firstDayOfWeek`
-   * is 1 (Monday).
-   * - `autoOpenDisabled`: Set to true to prevent the overlays from opening automatically.
-   * - `autofocus`: Specify that this control should have input focus when the page loads.
-   * - `__selectedDateTime`: The current selected date time.
-   * - `__datePicker`: The current slotted date picker.
-   * - `__timePicker`: The current slotted time picker.
-   * - `i18n`: The object used to localize this component. To change the default
-   * localization, replace this with an object that provides all properties, or
-   * just the individual properties you want to change.
+   * When `headerRenderer` is set, the attribute `has-header` is set on the dialog.
+   * - `footerRenderer`: Custom function for rendering the dialog footer.
+   * Receives two arguments:
+   *
+   * - `root` The root container DOM element. Append your content to it.
+   * - `dialog` The reference to the `<vaadin-dialog>` element.
    *
-   * Should be overridden by subclasses to provide a custom JSDoc with the
-   * default I18N properties.
-   * - `__effectiveI18n`: undefined
-   * - `ariaTarget`: A target element to which ARIA attributes are set.
-   * - `errorMessage`: Error to show when the field is invalid.
-   * - `helperText`: String used for the helper text.
-   * - `accessibleName`: String used to label the component to screen reader users.
-   * - `accessibleNameRef`: Id of the element used as label of the component to screen reader users.
+   * When `footerRenderer` is set, the attribute `has-footer` is set on the dialog.
+   * - `opened`: True if the dialog is visible and available for interaction.
+   * - `noCloseOnOutsideClick`: Set to true to disable closing dialog on outside click
+   * - `noCloseOnEsc`: Set to true to disable closing dialog on Escape press
+   * - `modeless`: Set to true to remove backdrop and allow click events on background elements.
+   * - `noFocusTrap`: Set to true to disable focus trapping.
+   * - `top`: Set the distance of the dialog from the top of the viewport.
+   * If a unitless number is provided, pixels are assumed.
+   *
+   * Note that the dialog uses an internal container that has some
+   * additional spacing, which can be overridden by the theme.
+   * - `left`: Set the distance of the dialog from the left of the viewport.
+   * If a unitless number is provided, pixels are assumed.
+   *
+   * Note that the dialog uses an internal container that has some
+   * additional spacing, which can be overridden by the theme.
+   * - `overlayRole`: The `role` attribute value to be set on the dialog. Defaults to "dialog".
+   * - `keepInViewport`: Set to true to prevent the dialog from moving outside the viewport bounds.
+   * When enabled, all four edges of the dialog will remain visible, for example
+   * when dragging the dialog or when the viewport is resized. Note that the
+   * dialog will also adjust any programmatically configured size and position
+   * so that it stays within the viewport.
    * - `dir`: undefined
-   * - `__defaultDateMinMaxValue`: undefined (property only)
-   * - `__defaultTimeMinValue`: undefined (property only)
-   * - `__defaultTimeMaxValue`: undefined (property only)
-   * - `_fieldAriaController`: undefined (property only)
-   * - `_helperController`: undefined (property only)
-   * - `_errorController`: undefined (property only)
    *
    * ## Events
    *
    * Events that will be emitted by the component.
    *
-   * - `change`: Fired when the user commits a value change.
-   * - `unparsable-change`: Fired when the user commits an unparsable or incomplete value change and there is no change event.
-   * - `invalid-changed`: Fired when the `invalid` property changes.
-   * - `value-changed`: Fired when the `value` property changes.
-   * - `validated`: Fired whenever the field is validated.
+   * - `resize-start`: Fired when the dialog resize is started.
+   * - `resize`: Fired when the dialog resize is finished.
+   * - `drag-start`: Fired when the dialog drag is started.
+   * - `dragged`: Fired when the dialog drag is finished.
+   * - `opened-changed`: Fired when the `opened` property changes.
+   * - `closed`: Fired when the dialog is closed.
    * - `undefined`: undefined
    *
    * ## Methods
    *
    * Methods that can be called to access component functionality.
    *
-   * - `checkValidity() => boolean`: Returns true if the current input value satisfies all constraints (if any)
+   * - `requestContentUpdate() => void`: Requests an update for the content of the dialog.
+   * While performing the update, it invokes the renderer passed in the `renderer` property,
+   * as well as `headerRender` and `footerRenderer` properties, if these are defined.
    *
-   * You can override the `checkValidity` method for custom validations.
+   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
    * - `createProperty(name, options) => void`: undefined
    * - `getOrCreateMap(name) => void`: undefined
    * - `addCheckedInitializer(initializer) => void`: undefined
@@ -27109,301 +27085,325 @@ export type CustomElementsSolidJs = {
    *
    * CSS variables available for styling the component.
    *
-   * - `--vaadin-date-time-picker-gap`: undefined (default: `undefined`)
-   * - `--vaadin-input-field-error-color`: undefined (default: `undefined`)
-   * - `--vaadin-input-field-error-font-size`: undefined (default: `undefined`)
-   * - `--vaadin-input-field-error-font-weight`: undefined (default: `undefined`)
-   * - `--vaadin-input-field-error-line-height`: undefined (default: `undefined`)
-   * - `--vaadin-input-field-label-color`: undefined (default: `undefined`)
-   * - `--vaadin-input-field-label-font-size`: undefined (default: `undefined`)
-   * - `--vaadin-input-field-label-font-weight`: undefined (default: `undefined`)
-   * - `--vaadin-input-field-label-line-height`: undefined (default: `undefined`)
-   * - `--vaadin-input-field-helper-color`: undefined (default: `undefined`)
-   * - `--vaadin-input-field-helper-font-size`: undefined (default: `undefined`)
-   * - `--vaadin-input-field-helper-font-weight`: undefined (default: `undefined`)
-   * - `--vaadin-input-field-helper-line-height`: undefined (default: `undefined`)
-   * - `--vaadin-input-field-required-indicator-color`: undefined (default: `undefined`)
-   * - `--vaadin-input-field-required-indicator`: ### Internal components (default: `undefined`)
-   * - `<vaadin-date-time-picker>`: undefined (default: `undefined`)
-   * - `<vaadin-date-picker>`: undefined (default: `undefined`)
-   * - `<vaadin-time-picker>`: undefined (default: `undefined`)
-   * - `change`: undefined (default: `undefined`)
-   * - `unparsable-change`: undefined (default: `undefined`)
+   * - `--vaadin-dialog-background`: undefined (default: `undefined`)
+   * - `--vaadin-dialog-border-color`: undefined (default: `undefined`)
+   * - `--vaadin-dialog-border-radius`: undefined (default: `undefined`)
+   * - `--vaadin-dialog-border-width`: undefined (default: `undefined`)
+   * - `--vaadin-dialog-max-width`: undefined (default: `undefined`)
+   * - `--vaadin-dialog-min-width`: undefined (default: `undefined`)
+   * - `--vaadin-dialog-overflow-indicator-color`: undefined (default: `undefined`)
+   * - `--vaadin-dialog-overflow-indicator-height`: undefined (default: `undefined`)
+   * - `--vaadin-dialog-padding`: undefined (default: `undefined`)
+   * - `--vaadin-dialog-shadow`: undefined (default: `undefined`)
+   * - `--vaadin-dialog-text-color`: undefined (default: `undefined`)
+   * - `--vaadin-dialog-title-color`: undefined (default: `undefined`)
+   * - `--vaadin-dialog-title-font-size`: undefined (default: `undefined`)
+   * - `--vaadin-dialog-title-font-weight`: undefined (default: `undefined`)
+   * - `--vaadin-dialog-title-line-height`: undefined (default: `undefined`)
+   * - `--vaadin-overlay-backdrop-background`: See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation. (default: `undefined`)
    */
-  "vaadin-date-time-picker": Partial<
-    DateTimePickerProps &
-      DateTimePickerSolidJsProps &
-      BaseProps<DateTimePicker> &
-      BaseEvents
+  "vaadin-dialog": Partial<
+    DialogProps & DialogSolidJsProps & BaseProps<Dialog> & BaseEvents
   >;
 
   /**
-   * An element used internally by `<vaadin-dialog>`. Not intended to be used separately.
+   * An element used internally by `<vaadin-date-picker>`. Not intended to be used separately.
    *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `headerTitle`: String used for rendering a dialog title.
-   * - `headerRenderer`: Custom function for rendering the dialog header.
-   * - `footerRenderer`: Custom function for rendering the dialog footer.
-   * - `keepInViewport`: Whether to keep the overlay within the viewport.
-   * - `opened`: When true, the overlay is visible and attached to body.
-   * - `owner`: Owner element passed with renderer function
-   * - `model`: Object with properties that is passed to `renderer` function
-   * - `renderer`: Custom function for rendering the content of the overlay.
-   * Receives three arguments:
-   *
-   * - `root` The root container DOM element. Append your content to it.
-   * - `owner` The host element of the renderer function.
-   * - `model` The object with the properties related with rendering.
-   * - `modeless`: When true the overlay won't disable the main content, showing
-   * it doesn't change the functionality of the user interface.
-   * - `hidden`: When set to true, the overlay is hidden. This also closes the overlay
-   * immediately in case there is a closing animation in progress.
-   * - `withBackdrop`: When true the overlay has backdrop on top of content when opened.
-   * - `focusTrap`: When true, opening the overlay moves focus to the first focusable child,
-   * or to the overlay part with tabindex if there are no focusable children.
-   * - `restoreFocusOnClose`: Set to true to enable restoring of focus when overlay is closed.
-   * - `restoreFocusNode`: Set to specify the element which should be focused on overlay close,
-   * if `restoreFocusOnClose` is set to true.
-   * - `dir`: undefined
-   * - `_boundMouseDownListener`: undefined (property only)
-   * - `_boundMouseUpListener`: undefined (property only)
-   * - `_boundOutsideClickListener`: undefined (property only)
-   * - `_boundKeydownListener`: undefined (property only)
-   * - `__focusTrapController`: undefined (property only)
-   * - `__focusRestorationController`: undefined (property only)
+   * - `year`: undefined
+   * - `selectedDate`: undefined
    *
    * ## Events
    *
    * Events that will be emitted by the component.
    *
-   * - `vaadin-overlay-closed`: undefined
-   * - `vaadin-overlay-closing`: undefined
    * - `undefined`: undefined
    *
    * ## Methods
    *
    * Methods that can be called to access component functionality.
    *
-   * - `requestContentUpdate() => void`: Requests an update for the content of the overlay.
-   * While performing the update, it invokes the renderer passed in the `renderer` property.
-   *
-   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
-   * - `getBounds() => !DialogOverlayBounds`: Retrieves the coordinates of the overlay.
-   * - `setBounds(bounds, absolute = true) => void`: Override method from OverlayMixin to adjust the position of the overlay if `keepInViewport` is true.
-   * - `close(sourceEvent: Event=) => void`: undefined
    * - `createProperty(name, options) => void`: undefined
    * - `getOrCreateMap(name) => void`: undefined
    * - `addCheckedInitializer(initializer) => void`: undefined
    * - `getPropertyDescriptor(name, key, options) => void`: undefined
    */
-  "vaadin-dialog-overlay": Partial<
-    DialogOverlayProps &
-      DialogOverlaySolidJsProps &
-      BaseProps<DialogOverlay> &
+  "vaadin-date-picker-year": Partial<
+    DatePickerYearProps &
+      DatePickerYearSolidJsProps &
+      BaseProps<DatePickerYear> &
       BaseEvents
   >;
 
   /**
-   * `<vaadin-dialog>` is a Web Component for creating customized modal dialogs.
-   *
-   * ### Rendering
-   *
-   * The content of the dialog can be populated by using the renderer callback function.
-   *
-   * The renderer function provides `root`, `dialog` arguments.
-   * Generate DOM content, append it to the `root` element and control the state
-   * of the host element by accessing `dialog`. Before generating new content,
-   * users are able to check if there is already content in `root` for reusing it.
+   * `<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.
    *
    * ```html
-   * <vaadin-dialog id="dialog"></vaadin-dialog>
+   * <vaadin-date-picker label="Birthday"></vaadin-date-picker>
    * ```
+   *
    * ```js
-   * const dialog = document.querySelector('#dialog');
-   * dialog.renderer = function(root, dialog) {
-   *   root.textContent = "Sample dialog";
-   * };
+   * datePicker.value = '2016-03-02';
    * ```
    *
-   * Renderer is called on the opening of the dialog.
-   * DOM generated during the renderer call can be reused
-   * in the next renderer call and will be provided with the `root` argument.
-   * On first call it will be empty.
+   * When the selected `value` is changed, a `value-changed` event is triggered.
    *
    * ### Styling
    *
+   * The following custom properties are available for styling:
+   *
+   * Custom property                | Description                | Default
+   * -------------------------------|----------------------------|---------
+   * `--vaadin-field-default-width` | Default width of the field | `12em`
+   *
    * The following shadow DOM parts are available for styling:
    *
-   * Part name        | Description
-   * -----------------|-------------------------------------------
-   * `backdrop`       | Backdrop of the overlay
-   * `overlay`        | The overlay container
-   * `content`        | The overlay content
-   * `header`         | Element wrapping title and header content
-   * `header-content` | Element wrapping the header content slot
-   * `title`          | Element wrapping the title slot
-   * `footer`         | Element wrapping the footer slot
+   * Part name            | Description
+   * ---------------------|----------------
+   * `label`              | The label element
+   * `input-field`        | The element that wraps prefix, value and buttons
+   * `field-button`       | Set on both clear and toggle buttons
+   * `clear-button`       | The clear button
+   * `error-message`      | The error message element
+   * `helper-text`        | The helper text element wrapper
+   * `required-indicator` | The `required` state indicator element
+   * `toggle-button`      | The toggle button
+   * `backdrop`           | Backdrop of the overlay
+   * `overlay`            | The overlay container
+   * `content`            | The overlay content
+   *
+   * The following state attributes are available for styling:
+   *
+   * Attribute            | Description
+   * ---------------------|---------------------------------
+   * `disabled`           | Set when the element is disabled
+   * `has-value`          | Set when the element has a value
+   * `has-label`          | Set when the element has a label
+   * `has-helper`         | Set when the element has helper text or slot
+   * `has-error-message`  | Set when the element has an error message
+   * `has-tooltip`        | Set when the element has a slotted tooltip
+   * `invalid`            | Set when the element is invalid
+   * `focused`            | Set when the element is focused
+   * `focus-ring`         | Set when the element is keyboard focused
+   * `readonly`           | Set when the element is readonly
+   * `opened`             | Set when the overlay is opened
+   * `week-numbers`       | Set when week numbers are shown in the calendar
+   *
+   * ### Internal components
+   *
+   * In addition to `<vaadin-date-picker>` itself, the following internal
+   * components are themable:
+   *
+   * - `<vaadin-date-picker-overlay-content>`
+   * - `<vaadin-date-picker-month-scroller>`
+   * - `<vaadin-date-picker-year-scroller>`
+   * - `<vaadin-date-picker-year>`
+   * - `<vaadin-month-calendar>`
+   *
+   * In order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:
+   *
+   * Part name             | Description
+   * ----------------------|--------------------
+   * `years-toggle-button` | Fullscreen mode years scroller toggle
+   * `toolbar`             | Toolbar with slotted buttons
+   *
+   * The following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:
+   *
+   * Attribute       | Description
+   * ----------------|-------------------------------------------------
+   * `desktop`       | Set when the overlay content is in desktop mode
+   * `fullscreen`    | Set when the overlay content is in fullscreen mode
+   * `years-visible` | Set when the year scroller is visible in fullscreen mode
+   *
+   * In order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:
+   *
+   * Part name             | Description
+   * ----------------------|--------------------
+   * `month-header`        | Month title
+   * `weekdays`            | Weekday container
+   * `weekday`             | Weekday element
+   * `week-numbers`        | Week numbers container
+   * `week-number`         | Week number element
+   * `date`                | Date element
+   * `disabled`            | Disabled date element
+   * `focused`             | Focused date element
+   * `selected`            | Selected date element
+   * `today`               | Date element corresponding to the current day
+   * `past`                | Date element corresponding to the date in the past
+   * `future`              | Date element corresponding to the date in the future
    *
-   * The following state attributes are available for styling:
+   * In order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:
    *
-   * Attribute        | Description
-   * -----------------|--------------------------------------------
-   * `has-title`      | Set when the element has a title
-   * `has-header`     | Set when the element has header renderer
-   * `has-footer`     | Set when the element has footer renderer
-   * `overflow`       | Set to `top`, `bottom`, none or both
+   * Part name             | Description
+   * ----------------------|--------------------
+   * `year-number`         | Year number
+   * `year-separator`      | Year separator
    *
-   * The following custom CSS properties are available for styling:
+   * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
    *
-   * Custom CSS property                          |
-   * :--------------------------------------------|
-   * |`--vaadin-dialog-background`                |
-   * |`--vaadin-dialog-border-color`              |
-   * |`--vaadin-dialog-border-radius`             |
-   * |`--vaadin-dialog-border-width`              |
-   * |`--vaadin-dialog-max-width`                 |
-   * |`--vaadin-dialog-min-width`                 |
-   * |`--vaadin-dialog-overflow-indicator-color`  |
-   * |`--vaadin-dialog-overflow-indicator-height` |
-   * |`--vaadin-dialog-padding`                   |
-   * |`--vaadin-dialog-shadow`                    |
-   * |`--vaadin-dialog-text-color`                |
-   * |`--vaadin-dialog-title-color`               |
-   * |`--vaadin-dialog-title-font-size`           |
-   * |`--vaadin-dialog-title-font-weight`         |
-   * |`--vaadin-dialog-title-line-height`         |
-   * |`--vaadin-overlay-backdrop-background`      |
+   * ### Change events
    *
-   * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+   * Depending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,
+   * the component can fire either a `change` event or an `unparsable-change` event:
+   *
+   * Value change             | Event
+   * :------------------------|:------------------
+   * empty => parsable        | change
+   * empty => unparsable      | unparsable-change
+   * parsable => empty        | change
+   * parsable => parsable     | change
+   * parsable => unparsable   | change
+   * unparsable => empty      | unparsable-change
+   * unparsable => parsable   | change
+   * unparsable => unparsable | unparsable-change
    *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `has-title`/`undefined`: Set when the element has a title
-   * - `has-header`/`undefined`: Set when the element has header renderer
-   * - `has-footer`/`undefined`: Set when the element has footer renderer
-   * - `overflow`/`undefined`: Set to `top`, `bottom`, none or both
-   * - `width`: Set the width of the dialog.
-   * If a unitless number is provided, pixels are assumed.
-   * - `height`: Set the height of the dialog.
-   * If a unitless number is provided, pixels are assumed.
-   * - `draggable`: Set to true to enable repositioning the dialog by clicking and dragging.
-   *
-   * By default, only the overlay area can be used to drag the element. But,
-   * a child element can be marked as a draggable area by adding a
-   * "`draggable`" class to it, this will by default make all of its children draggable also.
-   * If you want a child element to be draggable
-   * but still have its children non-draggable (by default), mark it with
-   * "`draggable-leaf-only`" class name.
-   * - `_touchDevice`: undefined
-   * - `__dragHandleClassName`: undefined
-   * - `resizable`: Set to true to enable resizing the dialog by dragging the corners and edges.
-   * - `renderer`: Custom function for rendering the content of the dialog.
-   * Receives two arguments:
-   *
-   * - `root` The root container DOM element. Append your content to it.
-   * - `dialog` The reference to the `<vaadin-dialog>` element.
-   * - `headerTitle`: String used for rendering a dialog title.
+   * - `_positionTarget`: undefined
+   * - `disabled`/`undefined`: Set when the element is disabled
+   * - `has-value`/`undefined`: Set when the element has a value
+   * - `has-label`/`undefined`: Set when the element has a label
+   * - `has-helper`/`undefined`: Set when the element has helper text or slot
+   * - `has-error-message`/`undefined`: Set when the element has an error message
+   * - `has-tooltip`/`undefined`: Set when the element has a slotted tooltip
+   * - `invalid`/`undefined`: Set when the element is invalid
+   * - `focused`/`undefined`: Set when the element is focused
+   * - `focus-ring`/`undefined`: Set when the element is keyboard focused
+   * - `readonly`: Set when the element is readonly
+   * - `opened`: Set when the overlay is opened
+   * - `week-numbers`/`undefined`: Set when week numbers are shown in the calendar
+   * - `<vaadin-date-picker>`/`undefined`: undefined
+   * - `<vaadin-date-picker-overlay-content>`/`undefined`: undefined
+   * - `<vaadin-date-picker-month-scroller>`/`undefined`: undefined
+   * - `<vaadin-date-picker-year-scroller>`/`undefined`: undefined
+   * - `<vaadin-date-picker-year>`/`undefined`: undefined
+   * - `<vaadin-month-calendar>`/`undefined`: undefined
+   * - `<vaadin-date-picker-overlay-content>`/`undefined`: undefined
+   * - `years-toggle-button`/`undefined`: Fullscreen mode years scroller toggle
+   * - `toolbar`/`undefined`: Toolbar with slotted buttons
+   * - `_selectedDate`: The current selected date.
+   * - `_focusedDate`: undefined
+   * - `value`: Selected date.
    *
-   * If both `headerTitle` and `headerRenderer` are defined, the title
-   * and the elements created by the renderer will be placed next to
-   * each other, with the title coming first.
+   * Supported date formats:
+   * - ISO 8601 `"YYYY-MM-DD"` (default)
+   * - 6-digit extended ISO 8601 `"+YYYYYY-MM-DD"`, `"-YYYYYY-MM-DD"`
+   * - `initialPosition`: Date which should be visible when there is no value selected.
    *
-   * When `headerTitle` is set, the attribute `has-title` is set on the dialog.
-   * - `headerRenderer`: Custom function for rendering the dialog header.
-   * Receives two arguments:
+   * The same date formats as for the `value` property are supported.
+   * - `autoOpenDisabled`: Set true to prevent the overlay from opening automatically.
+   * - `showWeekNumbers`: Set true to display ISO-8601 week numbers in the calendar. Notice that
+   * displaying week numbers is only supported when `i18n.firstDayOfWeek`
+   * is 1 (Monday).
+   * - `_fullscreen`: undefined
+   * - `_fullscreenMediaQuery`: undefined
+   * - `min`: The earliest date that can be selected. All earlier dates will be disabled.
    *
-   * - `root` The root container DOM element. Append your content to it.
-   * - `dialog` The reference to the `<vaadin-dialog>` element.
+   * Supported date formats:
+   * - ISO 8601 `"YYYY-MM-DD"` (default)
+   * - 6-digit extended ISO 8601 `"+YYYYYY-MM-DD"`, `"-YYYYYY-MM-DD"`
+   * - `max`: The latest date that can be selected. All later dates will be disabled.
    *
-   * If both `headerTitle` and `headerRenderer` are defined, the title
-   * and the elements created by the renderer will be placed next to
-   * each other, with the title coming first.
+   * Supported date formats:
+   * - ISO 8601 `"YYYY-MM-DD"` (default)
+   * - 6-digit extended ISO 8601 `"+YYYYYY-MM-DD"`, `"-YYYYYY-MM-DD"`
+   * - `isDateDisabled`: A function to be used to determine whether the user can select a given date.
+   * Receives a `DatePickerDate` object of the date to be selected and should return a
+   * boolean.
+   * - `_minDate`: The earliest date that can be selected. All earlier dates will be disabled.
+   * - `_maxDate`: The latest date that can be selected. All later dates will be disabled.
+   * - `_noInput`: undefined
+   * - `_ios`: undefined
+   * - `_focusOverlayOnOpen`: undefined
+   * - `_overlayContent`: undefined
+   * - `__enteredDate`: undefined
+   * - `i18n`: The object used to localize this component. To change the default
+   * localization, replace this with an object that provides all properties, or
+   * just the individual properties you want to change.
    *
-   * When `headerRenderer` is set, the attribute `has-header` is set on the dialog.
-   * - `footerRenderer`: Custom function for rendering the dialog footer.
-   * Receives two arguments:
+   * Should be overridden by subclasses to provide a custom JSDoc with the
+   * default I18N properties.
+   * - `__effectiveI18n`: undefined
+   * - `autofocus`: Specify that this control should have input focus when the page loads.
+   * - `focusElement`: A reference to the focusable element controlled by the mixin.
+   * It can be an input, textarea, button or any element with tabindex > -1.
    *
-   * - `root` The root container DOM element. Append your content to it.
-   * - `dialog` The reference to the `<vaadin-dialog>` element.
+   * Any component implementing this mixin is expected to provide it
+   * by using `this._setFocusElement(input)` Polymer API.
    *
-   * When `footerRenderer` is set, the attribute `has-footer` is set on the dialog.
-   * - `opened`: True if the dialog is visible and available for interaction.
-   * - `noCloseOnOutsideClick`: Set to true to disable closing dialog on outside click
-   * - `noCloseOnEsc`: Set to true to disable closing dialog on Escape press
-   * - `modeless`: Set to true to remove backdrop and allow click events on background elements.
-   * - `noFocusTrap`: Set to true to disable focus trapping.
-   * - `top`: Set the distance of the dialog from the top of the viewport.
-   * If a unitless number is provided, pixels are assumed.
+   * Toggling `tabindex` attribute on the host element propagates its value to `focusElement`.
+   * - `_lastTabIndex`: Override the property from `TabIndexMixin`
+   * to ensure the `tabindex` attribute of the focus element
+   * will be restored to `0` after re-enabling the element.
+   * - `allowedCharPattern`: A pattern matched against individual characters the user inputs.
    *
-   * Note that the dialog uses an internal container that has some
-   * additional spacing, which can be overridden by the theme.
-   * - `left`: Set the distance of the dialog from the left of the viewport.
-   * If a unitless number is provided, pixels are assumed.
+   * When set, the field will prevent:
+   * - `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`
+   * - `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`
+   * - `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`
    *
-   * Note that the dialog uses an internal container that has some
-   * additional spacing, which can be overridden by the theme.
-   * - `overlayRole`: The `role` attribute value to be set on the dialog. Defaults to "dialog".
-   * - `keepInViewport`: Set to true to prevent the dialog from moving outside the viewport bounds.
-   * When enabled, all four edges of the dialog will remain visible, for example
-   * when dragging the dialog or when the viewport is resized. Note that the
-   * dialog will also adjust any programmatically configured size and position
-   * so that it stays within the viewport.
+   * For example, to allow entering only numbers and minus signs, use:
+   * `allowedCharPattern = "[\\d-]"`
+   * - `autoselect`: If true, the input text gets fully selected when the field is focused using click or touch / tap.
+   * - `name`: The name of this field.
+   * - `placeholder`: A hint to the user of what can be entered in the field.
+   * - `title`: The text usually displayed in a tooltip popup when the mouse is over the field.
+   * - `ariaTarget`: A target element to which ARIA attributes are set.
+   * - `errorMessage`: Error to show when the field is invalid.
+   * - `helperText`: String used for the helper text.
+   * - `accessibleName`: String used to label the component to screen reader users.
+   * - `accessibleNameRef`: Id of the element used as label of the component to screen reader users.
+   * - `clearButtonVisible`: Set to true to display the clear icon which clears the input.
+   * This also enables clearing the input when pressing Esc key.
    * - `dir`: undefined
+   * - `_inputElementValue`: undefined (property only)
+   * - `_boundOnClick`: undefined (property only)
+   * - `_boundOnScroll`: undefined (property only)
+   * - `_boundOnBlur`: undefined (property only)
+   * - `_boundOnFocus`: undefined (property only)
+   * - `_boundOnPaste`: undefined (property only)
+   * - `_boundOnDrop`: undefined (property only)
+   * - `_boundOnBeforeInput`: undefined (property only)
+   * - `_fieldAriaController`: undefined (property only)
+   * - `_helperController`: undefined (property only)
+   * - `_errorController`: undefined (property only)
    *
    * ## Events
    *
    * Events that will be emitted by the component.
    *
-   * - `resize-start`: Fired when the dialog resize is started.
-   * - `resize`: Fired when the dialog resize is finished.
-   * - `drag-start`: Fired when the dialog drag is started.
-   * - `dragged`: Fired when the dialog drag is finished.
+   * - `change`: Fired when the user commits a value change.
+   * - `unparsable-change`: Fired when the user commits an unparsable value change and there is no change event.
+   * - `invalid-changed`: Fired when the `invalid` property changes.
    * - `opened-changed`: Fired when the `opened` property changes.
-   * - `closed`: Fired when the dialog is closed.
+   * - `value-changed`: Fired when the `value` property changes.
+   * - `validated`: Fired whenever the field is validated.
    * - `undefined`: undefined
    *
    * ## Methods
    *
    * Methods that can be called to access component functionality.
    *
-   * - `requestContentUpdate() => void`: Requests an update for the content of the dialog.
-   * While performing the update, it invokes the renderer passed in the `renderer` property,
-   * as well as `headerRender` and `footerRenderer` properties, if these are defined.
+   * - `open() => void`: Opens the dropdown.
+   * - `close() => void`: Closes the dropdown.
+   * - `checkValidity() => boolean`: Returns true if the current input value satisfies all constraints (if any)
    *
-   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
+   * Override the `checkValidity` method for custom validations.
    * - `createProperty(name, options) => void`: undefined
    * - `getOrCreateMap(name) => void`: undefined
    * - `addCheckedInitializer(initializer) => void`: undefined
    * - `getPropertyDescriptor(name, key, options) => void`: undefined
-   *
-   * ## CSS Custom Properties
-   *
-   * CSS variables available for styling the component.
-   *
-   * - `--vaadin-dialog-background`: undefined (default: `undefined`)
-   * - `--vaadin-dialog-border-color`: undefined (default: `undefined`)
-   * - `--vaadin-dialog-border-radius`: undefined (default: `undefined`)
-   * - `--vaadin-dialog-border-width`: undefined (default: `undefined`)
-   * - `--vaadin-dialog-max-width`: undefined (default: `undefined`)
-   * - `--vaadin-dialog-min-width`: undefined (default: `undefined`)
-   * - `--vaadin-dialog-overflow-indicator-color`: undefined (default: `undefined`)
-   * - `--vaadin-dialog-overflow-indicator-height`: undefined (default: `undefined`)
-   * - `--vaadin-dialog-padding`: undefined (default: `undefined`)
-   * - `--vaadin-dialog-shadow`: undefined (default: `undefined`)
-   * - `--vaadin-dialog-text-color`: undefined (default: `undefined`)
-   * - `--vaadin-dialog-title-color`: undefined (default: `undefined`)
-   * - `--vaadin-dialog-title-font-size`: undefined (default: `undefined`)
-   * - `--vaadin-dialog-title-font-weight`: undefined (default: `undefined`)
-   * - `--vaadin-dialog-title-line-height`: undefined (default: `undefined`)
-   * - `--vaadin-overlay-backdrop-background`: See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation. (default: `undefined`)
    */
-  "vaadin-dialog": Partial<
-    DialogProps & DialogSolidJsProps & BaseProps<Dialog> & BaseEvents
+  "vaadin-date-picker": Partial<
+    DatePickerProps &
+      DatePickerSolidJsProps &
+      BaseProps<DatePicker> &
+      BaseEvents
   >;
 
   /**