@openremote/or-vaadin-components 1.26.0-snapshot.20260630093114 → 1.26.1

package/custom-elements-jsx.d.ts

@@ -51,13 +51,13 @@ import type { ComboBoxItem } from "/home/runner/work/openremote/openremote/node_
 import type { ComboBoxOverlay } from "/home/runner/work/openremote/openremote/node_modules/@vaadin/combo-box/./lib/vaadin-combo-box-overlay.js";
 import type { ComboBoxScroller } from "/home/runner/work/openremote/openremote/node_modules/@vaadin/combo-box/./lib/vaadin-combo-box-scroller.js";
 import type { ComboBox } from "/home/runner/work/openremote/openremote/node_modules/@vaadin/combo-box/./lib/vaadin-combo-box.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 { ContextMenuItem } from "/home/runner/work/openremote/openremote/node_modules/@vaadin/context-menu/./lib/vaadin-context-menu-item.js";
 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";
@@ -5393,18 +5393,34 @@ the clear icon element should be provided via the `clearElement` getter. */
   textContent?: string | number;
 };
 
-export type DatePickerYearProps = {
+export type ContextMenuItemProps = {
+  /** Used for mixin detection because `instanceof` does not work with mixins.
+e.g. in VaadinListMixin it filters items by using the
+`element._hasVaadinItemMixin` condition. */
+  _hasVaadinItemMixin?: ContextMenuItem["_hasVaadinItemMixin"];
+  /** If true, the item is in selected state. */
+  selected?: ContextMenuItem["selected"];
   /**  */
-  year?: DatePickerYear["year"];
+  _value?: ContextMenuItem["_value"];
   /**  */
-  selectedDate?: DatePickerYear["selectedDate"];
+  dir?: ContextMenuItem["dir"];
+  /** Submittable string value. The default value is the trimmed text content of the element. */
+  value?: ContextMenuItem["value"];
 };
 
-export type DatePickerYearSolidJsProps = {
+export type ContextMenuItemSolidJsProps = {
+  /** Used for mixin detection because `instanceof` does not work with mixins.
+e.g. in VaadinListMixin it filters items by using the
+`element._hasVaadinItemMixin` condition. */
+  "prop:_hasVaadinItemMixin"?: ContextMenuItem["_hasVaadinItemMixin"];
+  /** If true, the item is in selected state. */
+  "prop:selected"?: ContextMenuItem["selected"];
   /**  */
-  "prop:year"?: DatePickerYear["year"];
+  "prop:_value"?: ContextMenuItem["_value"];
   /**  */
-  "prop:selectedDate"?: DatePickerYear["selectedDate"];
+  "prop:dir"?: ContextMenuItem["dir"];
+  /** Submittable string value. The default value is the trimmed text content of the element. */
+  "prop:value"?: ContextMenuItem["value"];
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -5412,357 +5428,426 @@ export type DatePickerYearSolidJsProps = {
   textContent?: string | number;
 };
 
-export type DatePickerProps = {
-  /**  */
-  _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;
-  /**  */
-  "<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;
+export type ContextMenuListBoxProps = {
+  /** Define how items are disposed in the dom.
+Possible values are: `horizontal|vertical`.
+It also changes navigation keys from left/right to up/down. */
+  orientation?: ContextMenuListBox["orientation"];
+  /** If true, the user cannot interact with this element.
+When the element is disabled, the selected item is
+not updated when `selected` property is changed. */
+  disabled?: ContextMenuListBox["disabled"];
+  /** The index of the item selected in the items array.
+Note: Not updated when used in `multiple` selection mode. */
+  selected?: ContextMenuListBox["selected"];
+  /** A read-only list of items from which a selection can be made.
+It is populated from the elements passed to the light DOM,
+and updated dynamically when adding or removing items. */
+  items?: ContextMenuListBox["items"];
+  /** The search buffer for the keyboard selection feature. */
+  _searchBuf?: ContextMenuListBox["_searchBuf"];
   /**  */
-  "<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"];
+  dir?: ContextMenuListBox["dir"];
+};
+
+export type ContextMenuListBoxSolidJsProps = {
+  /** Define how items are disposed in the dom.
+Possible values are: `horizontal|vertical`.
+It also changes navigation keys from left/right to up/down. */
+  "prop:orientation"?: ContextMenuListBox["orientation"];
+  /** If true, the user cannot interact with this element.
+When the element is disabled, the selected item is
+not updated when `selected` property is changed. */
+  "prop:disabled"?: ContextMenuListBox["disabled"];
+  /** The index of the item selected in the items array.
+Note: Not updated when used in `multiple` selection mode. */
+  "prop:selected"?: ContextMenuListBox["selected"];
+  /** A read-only list of items from which a selection can be made.
+It is populated from the elements passed to the light DOM,
+and updated dynamically when adding or removing items. */
+  "prop:items"?: ContextMenuListBox["items"];
+  /** The search buffer for the keyboard selection feature. */
+  "prop:_searchBuf"?: ContextMenuListBox["_searchBuf"];
   /**  */
-  _focusedDate?: DatePicker["_focusedDate"];
-  /** Selected date.
+  "prop:dir"?: ContextMenuListBox["dir"];
 
-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.
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
 
-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"];
+export type ContextMenuOverlayProps = {
+  /** 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`. */
+  position?: ContextMenuOverlay["position"];
   /**  */
-  _fullscreen?: DatePicker["_fullscreen"];
+  parentOverlay?: ContextMenuOverlay["parentOverlay"];
   /**  */
-  _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.
+  _theme?: ContextMenuOverlay["_theme"];
+  /** 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. */
+  focusTrap?: ContextMenuOverlay["focusTrap"];
+  /** Set to true to enable restoring of focus when overlay is closed. */
+  restoreFocusOnClose?: ContextMenuOverlay["restoreFocusOnClose"];
+  /** Set to specify the element which should be focused on overlay close,
+if `restoreFocusOnClose` is set to true. */
+  restoreFocusNode?: ContextMenuOverlay["restoreFocusNode"];
+  /** The element next to which this overlay should be aligned.
+The position of the overlay relative to the positionTarget can be adjusted
+with properties `horizontalAlign`, `verticalAlign`, `noHorizontalOverlap`
+and `noVerticalOverlap`. */
+  positionTarget?: ContextMenuOverlay["positionTarget"];
+  /** When `positionTarget` is set, this property defines whether to align the overlay's
+left or right side to the target element by default.
+Possible values are `start` and `end`.
+RTL is taken into account when interpreting the value.
+The overlay is automatically flipped to the opposite side when it doesn't fit into
+the default side defined by this property. */
+  horizontalAlign?: ContextMenuOverlay["horizontalAlign"];
+  /** When `positionTarget` is set, this property defines whether to align the overlay's
+top or bottom side to the target element by default.
+Possible values are `top` and `bottom`.
+The overlay is automatically flipped to the opposite side when it doesn't fit into
+the default side defined by this property. */
+  verticalAlign?: ContextMenuOverlay["verticalAlign"];
+  /** When `positionTarget` is set, this property defines whether the overlay should overlap
+the target element in the x-axis, or be positioned right next to it. */
+  noHorizontalOverlap?: ContextMenuOverlay["noHorizontalOverlap"];
+  /** When `positionTarget` is set, this property defines whether the overlay should overlap
+the target element in the y-axis, or be positioned right above/below it. */
+  noVerticalOverlap?: ContextMenuOverlay["noVerticalOverlap"];
+  /** If the overlay content has no intrinsic height, this property can be used to set
+the minimum vertical space (in pixels) required by the overlay. Setting a value to
+the property effectively disables the content measurement in favor of using this
+fixed value for determining the open direction. */
+  requiredVerticalSpace?: ContextMenuOverlay["requiredVerticalSpace"];
+  /** When true, the overlay is visible and attached to body. */
+  opened?: ContextMenuOverlay["opened"];
+  /** Owner element passed with renderer function */
+  owner?: ContextMenuOverlay["owner"];
+  /** Object with properties that is passed to `renderer` function */
+  model?: ContextMenuOverlay["model"];
+  /** Custom function for rendering the content of the overlay.
+Receives three arguments:
 
-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"];
+- `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. */
+  renderer?: ContextMenuOverlay["renderer"];
+  /** When true the overlay won't disable the main content, showing
+it doesn't change the functionality of the user interface. */
+  modeless?: ContextMenuOverlay["modeless"];
+  /** When set to true, the overlay is hidden. This also closes the overlay
+immediately in case there is a closing animation in progress. */
+  hidden?: ContextMenuOverlay["hidden"];
+  /** When true the overlay has backdrop on top of content when opened. */
+  withBackdrop?: ContextMenuOverlay["withBackdrop"];
   /**  */
-  _noInput?: DatePicker["_noInput"];
+  dir?: ContextMenuOverlay["dir"];
   /**  */
-  _ios?: DatePicker["_ios"];
+  __focusTrapController?: ContextMenuOverlay["__focusTrapController"];
   /**  */
-  _focusOverlayOnOpen?: DatePicker["_focusOverlayOnOpen"];
+  __focusRestorationController?: ContextMenuOverlay["__focusRestorationController"];
   /**  */
-  _overlayContent?: DatePicker["_overlayContent"];
+  _boundMouseDownListener?: ContextMenuOverlay["_boundMouseDownListener"];
   /**  */
-  __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.
+  _boundMouseUpListener?: ContextMenuOverlay["_boundMouseUpListener"];
+  /**  */
+  _boundOutsideClickListener?: ContextMenuOverlay["_boundOutsideClickListener"];
+  /**  */
+  _boundKeydownListener?: ContextMenuOverlay["_boundKeydownListener"];
 
-Should be overridden by subclasses to provide a custom JSDoc with the
-default I18N properties. */
-  i18n?: DatePicker["i18n"];
   /**  */
-  __effectiveI18n?: DatePicker["__effectiveI18n"];
-  /** A pattern matched against individual characters the user inputs.
+  "onvaadin-overlay-closed"?: (e: CustomEvent) => void;
+  /**  */
+  "onvaadin-overlay-closing"?: (e: CustomEvent) => void;
+};
 
-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.
-
-It is up to the component to choose where to place the clear icon:
-in the Shadow DOM or in the light DOM. In any way, a reference to
-the clear icon element should be provided via the `clearElement` getter. */
-  clearButtonVisible?: DatePicker["clearButtonVisible"];
+export type ContextMenuOverlaySolidJsProps = {
+  /** 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`. */
+  "prop:position"?: ContextMenuOverlay["position"];
   /**  */
-  dir?: DatePicker["dir"];
+  "prop:parentOverlay"?: ContextMenuOverlay["parentOverlay"];
   /**  */
-  _inputElementValue?: DatePicker["_inputElementValue"];
+  "prop:_theme"?: ContextMenuOverlay["_theme"];
+  /** 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. */
+  "prop:focusTrap"?: ContextMenuOverlay["focusTrap"];
+  /** Set to true to enable restoring of focus when overlay is closed. */
+  "prop:restoreFocusOnClose"?: ContextMenuOverlay["restoreFocusOnClose"];
+  /** Set to specify the element which should be focused on overlay close,
+if `restoreFocusOnClose` is set to true. */
+  "prop:restoreFocusNode"?: ContextMenuOverlay["restoreFocusNode"];
+  /** The element next to which this overlay should be aligned.
+The position of the overlay relative to the positionTarget can be adjusted
+with properties `horizontalAlign`, `verticalAlign`, `noHorizontalOverlap`
+and `noVerticalOverlap`. */
+  "prop:positionTarget"?: ContextMenuOverlay["positionTarget"];
+  /** When `positionTarget` is set, this property defines whether to align the overlay's
+left or right side to the target element by default.
+Possible values are `start` and `end`.
+RTL is taken into account when interpreting the value.
+The overlay is automatically flipped to the opposite side when it doesn't fit into
+the default side defined by this property. */
+  "prop:horizontalAlign"?: ContextMenuOverlay["horizontalAlign"];
+  /** When `positionTarget` is set, this property defines whether to align the overlay's
+top or bottom side to the target element by default.
+Possible values are `top` and `bottom`.
+The overlay is automatically flipped to the opposite side when it doesn't fit into
+the default side defined by this property. */
+  "prop:verticalAlign"?: ContextMenuOverlay["verticalAlign"];
+  /** When `positionTarget` is set, this property defines whether the overlay should overlap
+the target element in the x-axis, or be positioned right next to it. */
+  "prop:noHorizontalOverlap"?: ContextMenuOverlay["noHorizontalOverlap"];
+  /** When `positionTarget` is set, this property defines whether the overlay should overlap
+the target element in the y-axis, or be positioned right above/below it. */
+  "prop:noVerticalOverlap"?: ContextMenuOverlay["noVerticalOverlap"];
+  /** If the overlay content has no intrinsic height, this property can be used to set
+the minimum vertical space (in pixels) required by the overlay. Setting a value to
+the property effectively disables the content measurement in favor of using this
+fixed value for determining the open direction. */
+  "prop:requiredVerticalSpace"?: ContextMenuOverlay["requiredVerticalSpace"];
+  /** When true, the overlay is visible and attached to body. */
+  "prop:opened"?: ContextMenuOverlay["opened"];
+  /** Owner element passed with renderer function */
+  "prop:owner"?: ContextMenuOverlay["owner"];
+  /** Object with properties that is passed to `renderer` function */
+  "prop:model"?: ContextMenuOverlay["model"];
+  /** 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. */
+  "prop:renderer"?: ContextMenuOverlay["renderer"];
+  /** When true the overlay won't disable the main content, showing
+it doesn't change the functionality of the user interface. */
+  "prop:modeless"?: ContextMenuOverlay["modeless"];
+  /** When set to true, the overlay is hidden. This also closes the overlay
+immediately in case there is a closing animation in progress. */
+  "prop:hidden"?: ContextMenuOverlay["hidden"];
+  /** When true the overlay has backdrop on top of content when opened. */
+  "prop:withBackdrop"?: ContextMenuOverlay["withBackdrop"];
   /**  */
-  _boundOnClick?: DatePicker["_boundOnClick"];
+  "prop:dir"?: ContextMenuOverlay["dir"];
   /**  */
-  _boundOnScroll?: DatePicker["_boundOnScroll"];
+  "prop:__focusTrapController"?: ContextMenuOverlay["__focusTrapController"];
   /**  */
-  _boundOnPaste?: DatePicker["_boundOnPaste"];
+  "prop:__focusRestorationController"?: ContextMenuOverlay["__focusRestorationController"];
   /**  */
-  _boundOnDrop?: DatePicker["_boundOnDrop"];
+  "prop:_boundMouseDownListener"?: ContextMenuOverlay["_boundMouseDownListener"];
   /**  */
-  _boundOnBeforeInput?: DatePicker["_boundOnBeforeInput"];
+  "prop:_boundMouseUpListener"?: ContextMenuOverlay["_boundMouseUpListener"];
   /**  */
-  _fieldAriaController?: DatePicker["_fieldAriaController"];
+  "prop:_boundOutsideClickListener"?: ContextMenuOverlay["_boundOutsideClickListener"];
   /**  */
-  _helperController?: DatePicker["_helperController"];
+  "prop:_boundKeydownListener"?: ContextMenuOverlay["_boundKeydownListener"];
   /**  */
-  _errorController?: DatePicker["_errorController"];
+  "on:vaadin-overlay-closed"?: (e: CustomEvent) => void;
+  /**  */
+  "on:vaadin-overlay-closing"?: (e: CustomEvent) => void;
 
-  /** 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;
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
 };
 
-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;
+export type ContextMenuProps = {
+  /** 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`. */
+  position?: ContextMenu["position"];
   /**  */
-  "bool:<vaadin-date-picker-overlay-content>"?: unknown;
+  "<vaadin-item>"?: unknown;
   /**  */
-  "bool:<vaadin-date-picker-month-scroller>"?: unknown;
+  undefined?: unknown;
+  /** CSS selector that can be used to target any child element
+of the context menu to listen for `openOn` events. */
+  selector?: ContextMenu["selector"];
+  /** True if the overlay is currently displayed. */
+  opened?: ContextMenu["opened"];
+  /** Event name to listen for opening the context menu. */
+  openOn?: ContextMenu["openOn"];
+  /** 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. */
+  listenOn?: ContextMenu["listenOn"];
+  /** Event name to listen for closing the context menu. */
+  closeOn?: ContextMenu["closeOn"];
+  /** 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. */
+  renderer?: ContextMenu["renderer"];
+  /** When true, the menu overlay is modeless. */
+  _modeless?: ContextMenu["_modeless"];
   /**  */
-  "bool:<vaadin-date-picker-year-scroller>"?: unknown;
+  _context?: ContextMenu["_context"];
   /**  */
-  "bool:<vaadin-date-picker-year>"?: unknown;
+  _phone?: ContextMenu["_phone"];
   /**  */
-  "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"];
+  _fullscreen?: ContextMenu["_fullscreen"];
   /**  */
-  "prop:_focusedDate"?: DatePicker["_focusedDate"];
-  /** Selected date.
+  _fullscreenMediaQuery?: ContextMenu["_fullscreenMediaQuery"];
+  /** 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"` */
-  "prop:value"?: DatePicker["value"];
-  /** Date which should be visible when there is no value selected.
+The items API can't be used together with a renderer!
 
-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"];
+#### Example
+
+```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' }
+];
+``` */
+  items?: ContextMenu["items"];
   /**  */
-  "prop:_fullscreen"?: DatePicker["_fullscreen"];
+  _positionTarget?: ContextMenu["_positionTarget"];
   /**  */
-  "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"];
+  dir?: ContextMenu["dir"];
   /**  */
-  "prop:_ios"?: DatePicker["_ios"];
+  _boundOpen?: ContextMenu["_boundOpen"];
   /**  */
-  "prop:_focusOverlayOnOpen"?: DatePicker["_focusOverlayOnOpen"];
+  _boundClose?: ContextMenu["_boundClose"];
   /**  */
-  "prop:_overlayContent"?: DatePicker["_overlayContent"];
+  _boundPreventDefault?: ContextMenu["_boundPreventDefault"];
   /**  */
-  "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"];
+  _boundOnGlobalContextMenu?: ContextMenu["_boundOnGlobalContextMenu"];
   /**  */
-  "prop:__effectiveI18n"?: DatePicker["__effectiveI18n"];
-  /** A pattern matched against individual characters the user inputs.
+  __itemsOutsideClickListener?: ContextMenu["__itemsOutsideClickListener"];
 
-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*$/`
+  /** Fired when the `opened` property changes. */
+  "onopened-changed"?: (e: CustomEvent) => void;
+  /** Fired when an item is selected when the context menu is populated using the `items` API. */
+  "onitem-selected"?: (e: CustomEvent) => void;
+  /** Fired when the context menu is closed. */
+  onclosed?: (e: CustomEvent) => void;
+  /** Fired when all menus should close, e.g., after pressing Tab or on submenu close. */
+  "onclose-all-menus"?: (e: CustomEvent) => void;
+  /** Fired when a click happens outside any open sub-menus. */
+  "onitems-outside-click"?: (e: CustomEvent) => void;
+};
 
-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.
+export type ContextMenuSolidJsProps = {
+  /** 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`. */
+  "prop:position"?: ContextMenu["position"];
+  /**  */
+  "bool:<vaadin-item>"?: unknown;
+  /**  */
+  "prop:undefined"?: unknown;
+  /** CSS selector that can be used to target any child element
+of the context menu to listen for `openOn` events. */
+  "prop:selector"?: ContextMenu["selector"];
+  /** True if the overlay is currently displayed. */
+  "prop:opened"?: ContextMenu["opened"];
+  /** Event name to listen for opening the context menu. */
+  "prop:openOn"?: ContextMenu["openOn"];
+  /** 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. */
+  "prop:listenOn"?: ContextMenu["listenOn"];
+  /** Event name to listen for closing the context menu. */
+  "prop:closeOn"?: ContextMenu["closeOn"];
+  /** Custom function for rendering the content of the menu overlay.
+Receives three arguments:
 
-It is up to the component to choose where to place the clear icon:
-in the Shadow DOM or in the light DOM. In any way, a reference to
-the clear icon element should be provided via the `clearElement` getter. */
-  "prop:clearButtonVisible"?: DatePicker["clearButtonVisible"];
+- `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. */
+  "prop:renderer"?: ContextMenu["renderer"];
+  /** When true, the menu overlay is modeless. */
+  "prop:_modeless"?: ContextMenu["_modeless"];
   /**  */
-  "prop:dir"?: DatePicker["dir"];
+  "prop:_context"?: ContextMenu["_context"];
   /**  */
-  "prop:_inputElementValue"?: DatePicker["_inputElementValue"];
+  "prop:_phone"?: ContextMenu["_phone"];
   /**  */
-  "prop:_boundOnClick"?: DatePicker["_boundOnClick"];
+  "prop:_fullscreen"?: ContextMenu["_fullscreen"];
   /**  */
-  "prop:_boundOnScroll"?: DatePicker["_boundOnScroll"];
+  "prop:_fullscreenMediaQuery"?: ContextMenu["_fullscreenMediaQuery"];
+  /** 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.
+
+The items API can't be used together with a renderer!
+
+#### Example
+
+```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' }
+];
+``` */
+  "prop:items"?: ContextMenu["items"];
   /**  */
-  "prop:_boundOnPaste"?: DatePicker["_boundOnPaste"];
+  "prop:_positionTarget"?: ContextMenu["_positionTarget"];
   /**  */
-  "prop:_boundOnDrop"?: DatePicker["_boundOnDrop"];
+  "prop:dir"?: ContextMenu["dir"];
   /**  */
-  "prop:_boundOnBeforeInput"?: DatePicker["_boundOnBeforeInput"];
+  "prop:_boundOpen"?: ContextMenu["_boundOpen"];
   /**  */
-  "prop:_fieldAriaController"?: DatePicker["_fieldAriaController"];
+  "prop:_boundClose"?: ContextMenu["_boundClose"];
   /**  */
-  "prop:_helperController"?: DatePicker["_helperController"];
+  "prop:_boundPreventDefault"?: ContextMenu["_boundPreventDefault"];
   /**  */
-  "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;
+  "prop:_boundOnGlobalContextMenu"?: ContextMenu["_boundOnGlobalContextMenu"];
+  /**  */
+  "prop:__itemsOutsideClickListener"?: ContextMenu["__itemsOutsideClickListener"];
   /** 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;
+  /** Fired when an item is selected when the context menu is populated using the `items` API. */
+  "on:item-selected"?: (e: CustomEvent) => void;
+  /** Fired when the context menu is closed. */
+  "on:closed"?: (e: CustomEvent) => void;
+  /** Fired when all menus should close, e.g., after pressing Tab or on submenu close. */
+  "on:close-all-menus"?: (e: CustomEvent) => void;
+  /** Fired when a click happens outside any open sub-menus. */
+  "on:items-outside-click"?: (e: CustomEvent) => void;
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -5770,34 +5855,18 @@ the clear icon element should be provided via the `clearElement` getter. */
   textContent?: string | number;
 };
 
-export type ContextMenuItemProps = {
-  /** Used for mixin detection because `instanceof` does not work with mixins.
-e.g. in VaadinListMixin it filters items by using the
-`element._hasVaadinItemMixin` condition. */
-  _hasVaadinItemMixin?: ContextMenuItem["_hasVaadinItemMixin"];
-  /** If true, the item is in selected state. */
-  selected?: ContextMenuItem["selected"];
+export type DatePickerYearProps = {
   /**  */
-  _value?: ContextMenuItem["_value"];
+  year?: DatePickerYear["year"];
   /**  */
-  dir?: ContextMenuItem["dir"];
-  /** Submittable string value. The default value is the trimmed text content of the element. */
-  value?: ContextMenuItem["value"];
+  selectedDate?: DatePickerYear["selectedDate"];
 };
 
-export type ContextMenuItemSolidJsProps = {
-  /** Used for mixin detection because `instanceof` does not work with mixins.
-e.g. in VaadinListMixin it filters items by using the
-`element._hasVaadinItemMixin` condition. */
-  "prop:_hasVaadinItemMixin"?: ContextMenuItem["_hasVaadinItemMixin"];
-  /** If true, the item is in selected state. */
-  "prop:selected"?: ContextMenuItem["selected"];
+export type DatePickerYearSolidJsProps = {
   /**  */
-  "prop:_value"?: ContextMenuItem["_value"];
+  "prop:year"?: DatePickerYear["year"];
   /**  */
-  "prop:dir"?: ContextMenuItem["dir"];
-  /** Submittable string value. The default value is the trimmed text content of the element. */
-  "prop:value"?: ContextMenuItem["value"];
+  "prop:selectedDate"?: DatePickerYear["selectedDate"];
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -5805,426 +5874,357 @@ e.g. in VaadinListMixin it filters items by using the
   textContent?: string | number;
 };
 
-export type ContextMenuListBoxProps = {
-  /** Define how items are disposed in the dom.
-Possible values are: `horizontal|vertical`.
-It also changes navigation keys from left/right to up/down. */
-  orientation?: ContextMenuListBox["orientation"];
-  /** If true, the user cannot interact with this element.
-When the element is disabled, the selected item is
-not updated when `selected` property is changed. */
-  disabled?: ContextMenuListBox["disabled"];
-  /** The index of the item selected in the items array.
-Note: Not updated when used in `multiple` selection mode. */
-  selected?: ContextMenuListBox["selected"];
-  /** A read-only list of items from which a selection can be made.
-It is populated from the elements passed to the light DOM,
-and updated dynamically when adding or removing items. */
-  items?: ContextMenuListBox["items"];
-  /** The search buffer for the keyboard selection feature. */
-  _searchBuf?: ContextMenuListBox["_searchBuf"];
-  /**  */
-  dir?: ContextMenuListBox["dir"];
-};
-
-export type ContextMenuListBoxSolidJsProps = {
-  /** Define how items are disposed in the dom.
-Possible values are: `horizontal|vertical`.
-It also changes navigation keys from left/right to up/down. */
-  "prop:orientation"?: ContextMenuListBox["orientation"];
-  /** If true, the user cannot interact with this element.
-When the element is disabled, the selected item is
-not updated when `selected` property is changed. */
-  "prop:disabled"?: ContextMenuListBox["disabled"];
-  /** The index of the item selected in the items array.
-Note: Not updated when used in `multiple` selection mode. */
-  "prop:selected"?: ContextMenuListBox["selected"];
-  /** A read-only list of items from which a selection can be made.
-It is populated from the elements passed to the light DOM,
-and updated dynamically when adding or removing items. */
-  "prop:items"?: ContextMenuListBox["items"];
-  /** The search buffer for the keyboard selection feature. */
-  "prop:_searchBuf"?: ContextMenuListBox["_searchBuf"];
+export type DatePickerProps = {
   /**  */
-  "prop:dir"?: ContextMenuListBox["dir"];
-
-  /** Set the innerHTML of the element */
-  innerHTML?: string;
-  /** Set the textContent of the element */
-  textContent?: string | number;
-};
-
-export type ContextMenuOverlayProps = {
-  /** 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`. */
-  position?: ContextMenuOverlay["position"];
+  _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;
   /**  */
-  parentOverlay?: ContextMenuOverlay["parentOverlay"];
+  "<vaadin-date-picker>"?: unknown;
   /**  */
-  _theme?: ContextMenuOverlay["_theme"];
-  /** 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. */
-  focusTrap?: ContextMenuOverlay["focusTrap"];
-  /** Set to true to enable restoring of focus when overlay is closed. */
-  restoreFocusOnClose?: ContextMenuOverlay["restoreFocusOnClose"];
-  /** Set to specify the element which should be focused on overlay close,
-if `restoreFocusOnClose` is set to true. */
-  restoreFocusNode?: ContextMenuOverlay["restoreFocusNode"];
-  /** The element next to which this overlay should be aligned.
-The position of the overlay relative to the positionTarget can be adjusted
-with properties `horizontalAlign`, `verticalAlign`, `noHorizontalOverlap`
-and `noVerticalOverlap`. */
-  positionTarget?: ContextMenuOverlay["positionTarget"];
-  /** When `positionTarget` is set, this property defines whether to align the overlay's
-left or right side to the target element by default.
-Possible values are `start` and `end`.
-RTL is taken into account when interpreting the value.
-The overlay is automatically flipped to the opposite side when it doesn't fit into
-the default side defined by this property. */
-  horizontalAlign?: ContextMenuOverlay["horizontalAlign"];
-  /** When `positionTarget` is set, this property defines whether to align the overlay's
-top or bottom side to the target element by default.
-Possible values are `top` and `bottom`.
-The overlay is automatically flipped to the opposite side when it doesn't fit into
-the default side defined by this property. */
-  verticalAlign?: ContextMenuOverlay["verticalAlign"];
-  /** When `positionTarget` is set, this property defines whether the overlay should overlap
-the target element in the x-axis, or be positioned right next to it. */
-  noHorizontalOverlap?: ContextMenuOverlay["noHorizontalOverlap"];
-  /** When `positionTarget` is set, this property defines whether the overlay should overlap
-the target element in the y-axis, or be positioned right above/below it. */
-  noVerticalOverlap?: ContextMenuOverlay["noVerticalOverlap"];
-  /** If the overlay content has no intrinsic height, this property can be used to set
-the minimum vertical space (in pixels) required by the overlay. Setting a value to
-the property effectively disables the content measurement in favor of using this
-fixed value for determining the open direction. */
-  requiredVerticalSpace?: ContextMenuOverlay["requiredVerticalSpace"];
-  /** When true, the overlay is visible and attached to body. */
-  opened?: ContextMenuOverlay["opened"];
-  /** Owner element passed with renderer function */
-  owner?: ContextMenuOverlay["owner"];
-  /** Object with properties that is passed to `renderer` function */
-  model?: ContextMenuOverlay["model"];
-  /** 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. */
-  renderer?: ContextMenuOverlay["renderer"];
-  /** When true the overlay won't disable the main content, showing
-it doesn't change the functionality of the user interface. */
-  modeless?: ContextMenuOverlay["modeless"];
-  /** When set to true, the overlay is hidden. This also closes the overlay
-immediately in case there is a closing animation in progress. */
-  hidden?: ContextMenuOverlay["hidden"];
-  /** When true the overlay has backdrop on top of content when opened. */
-  withBackdrop?: ContextMenuOverlay["withBackdrop"];
+  "<vaadin-date-picker-overlay-content>"?: unknown;
   /**  */
-  dir?: ContextMenuOverlay["dir"];
+  "<vaadin-date-picker-month-scroller>"?: unknown;
   /**  */
-  __focusTrapController?: ContextMenuOverlay["__focusTrapController"];
+  "<vaadin-date-picker-year-scroller>"?: unknown;
   /**  */
-  __focusRestorationController?: ContextMenuOverlay["__focusRestorationController"];
+  "<vaadin-date-picker-year>"?: unknown;
   /**  */
-  _boundMouseDownListener?: ContextMenuOverlay["_boundMouseDownListener"];
+  "<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"];
   /**  */
-  _boundMouseUpListener?: ContextMenuOverlay["_boundMouseUpListener"];
+  _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"];
   /**  */
-  _boundOutsideClickListener?: ContextMenuOverlay["_boundOutsideClickListener"];
+  _fullscreen?: DatePicker["_fullscreen"];
   /**  */
-  _boundKeydownListener?: ContextMenuOverlay["_boundKeydownListener"];
+  _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"];
   /**  */
-  "onvaadin-overlay-closed"?: (e: CustomEvent) => void;
+  _noInput?: DatePicker["_noInput"];
   /**  */
-  "onvaadin-overlay-closing"?: (e: CustomEvent) => void;
-};
-
-export type ContextMenuOverlaySolidJsProps = {
-  /** 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`. */
-  "prop:position"?: ContextMenuOverlay["position"];
+  _ios?: DatePicker["_ios"];
   /**  */
-  "prop:parentOverlay"?: ContextMenuOverlay["parentOverlay"];
+  _focusOverlayOnOpen?: DatePicker["_focusOverlayOnOpen"];
   /**  */
-  "prop:_theme"?: ContextMenuOverlay["_theme"];
-  /** 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. */
-  "prop:focusTrap"?: ContextMenuOverlay["focusTrap"];
-  /** Set to true to enable restoring of focus when overlay is closed. */
-  "prop:restoreFocusOnClose"?: ContextMenuOverlay["restoreFocusOnClose"];
-  /** Set to specify the element which should be focused on overlay close,
-if `restoreFocusOnClose` is set to true. */
-  "prop:restoreFocusNode"?: ContextMenuOverlay["restoreFocusNode"];
-  /** The element next to which this overlay should be aligned.
-The position of the overlay relative to the positionTarget can be adjusted
-with properties `horizontalAlign`, `verticalAlign`, `noHorizontalOverlap`
-and `noVerticalOverlap`. */
-  "prop:positionTarget"?: ContextMenuOverlay["positionTarget"];
-  /** When `positionTarget` is set, this property defines whether to align the overlay's
-left or right side to the target element by default.
-Possible values are `start` and `end`.
-RTL is taken into account when interpreting the value.
-The overlay is automatically flipped to the opposite side when it doesn't fit into
-the default side defined by this property. */
-  "prop:horizontalAlign"?: ContextMenuOverlay["horizontalAlign"];
-  /** When `positionTarget` is set, this property defines whether to align the overlay's
-top or bottom side to the target element by default.
-Possible values are `top` and `bottom`.
-The overlay is automatically flipped to the opposite side when it doesn't fit into
-the default side defined by this property. */
-  "prop:verticalAlign"?: ContextMenuOverlay["verticalAlign"];
-  /** When `positionTarget` is set, this property defines whether the overlay should overlap
-the target element in the x-axis, or be positioned right next to it. */
-  "prop:noHorizontalOverlap"?: ContextMenuOverlay["noHorizontalOverlap"];
-  /** When `positionTarget` is set, this property defines whether the overlay should overlap
-the target element in the y-axis, or be positioned right above/below it. */
-  "prop:noVerticalOverlap"?: ContextMenuOverlay["noVerticalOverlap"];
-  /** If the overlay content has no intrinsic height, this property can be used to set
-the minimum vertical space (in pixels) required by the overlay. Setting a value to
-the property effectively disables the content measurement in favor of using this
-fixed value for determining the open direction. */
-  "prop:requiredVerticalSpace"?: ContextMenuOverlay["requiredVerticalSpace"];
-  /** When true, the overlay is visible and attached to body. */
-  "prop:opened"?: ContextMenuOverlay["opened"];
-  /** Owner element passed with renderer function */
-  "prop:owner"?: ContextMenuOverlay["owner"];
-  /** Object with properties that is passed to `renderer` function */
-  "prop:model"?: ContextMenuOverlay["model"];
-  /** Custom function for rendering the content of the overlay.
-Receives three arguments:
+  _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.
 
-- `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. */
-  "prop:renderer"?: ContextMenuOverlay["renderer"];
-  /** When true the overlay won't disable the main content, showing
-it doesn't change the functionality of the user interface. */
-  "prop:modeless"?: ContextMenuOverlay["modeless"];
-  /** When set to true, the overlay is hidden. This also closes the overlay
-immediately in case there is a closing animation in progress. */
-  "prop:hidden"?: ContextMenuOverlay["hidden"];
-  /** When true the overlay has backdrop on top of content when opened. */
-  "prop:withBackdrop"?: ContextMenuOverlay["withBackdrop"];
+Should be overridden by subclasses to provide a custom JSDoc with the
+default I18N properties. */
+  i18n?: DatePicker["i18n"];
   /**  */
-  "prop:dir"?: ContextMenuOverlay["dir"];
+  __effectiveI18n?: DatePicker["__effectiveI18n"];
+  /** 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.
+
+It is up to the component to choose where to place the clear icon:
+in the Shadow DOM or in the light DOM. In any way, a reference to
+the clear icon element should be provided via the `clearElement` getter. */
+  clearButtonVisible?: DatePicker["clearButtonVisible"];
   /**  */
-  "prop:__focusTrapController"?: ContextMenuOverlay["__focusTrapController"];
+  dir?: DatePicker["dir"];
   /**  */
-  "prop:__focusRestorationController"?: ContextMenuOverlay["__focusRestorationController"];
+  _inputElementValue?: DatePicker["_inputElementValue"];
   /**  */
-  "prop:_boundMouseDownListener"?: ContextMenuOverlay["_boundMouseDownListener"];
+  _boundOnClick?: DatePicker["_boundOnClick"];
   /**  */
-  "prop:_boundMouseUpListener"?: ContextMenuOverlay["_boundMouseUpListener"];
+  _boundOnScroll?: DatePicker["_boundOnScroll"];
   /**  */
-  "prop:_boundOutsideClickListener"?: ContextMenuOverlay["_boundOutsideClickListener"];
+  _boundOnPaste?: DatePicker["_boundOnPaste"];
+  /**  */
+  _boundOnDrop?: DatePicker["_boundOnDrop"];
+  /**  */
+  _boundOnBeforeInput?: DatePicker["_boundOnBeforeInput"];
   /**  */
-  "prop:_boundKeydownListener"?: ContextMenuOverlay["_boundKeydownListener"];
+  _fieldAriaController?: DatePicker["_fieldAriaController"];
   /**  */
-  "on:vaadin-overlay-closed"?: (e: CustomEvent) => void;
+  _helperController?: DatePicker["_helperController"];
   /**  */
-  "on:vaadin-overlay-closing"?: (e: CustomEvent) => void;
+  _errorController?: DatePicker["_errorController"];
 
-  /** Set the innerHTML of the element */
-  innerHTML?: string;
-  /** Set the textContent of the element */
-  textContent?: string | number;
+  /** 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 ContextMenuProps = {
-  /** 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`. */
-  position?: ContextMenu["position"];
+export type DatePickerSolidJsProps = {
   /**  */
-  "<vaadin-item>"?: unknown;
+  "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;
   /**  */
-  undefined?: unknown;
-  /** CSS selector that can be used to target any child element
-of the context menu to listen for `openOn` events. */
-  selector?: ContextMenu["selector"];
-  /** True if the overlay is currently displayed. */
-  opened?: ContextMenu["opened"];
-  /** Event name to listen for opening the context menu. */
-  openOn?: ContextMenu["openOn"];
-  /** 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. */
-  listenOn?: ContextMenu["listenOn"];
-  /** Event name to listen for closing the context menu. */
-  closeOn?: ContextMenu["closeOn"];
-  /** 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. */
-  renderer?: ContextMenu["renderer"];
-  /** When true, the menu overlay is modeless. */
-  _modeless?: ContextMenu["_modeless"];
+  "bool:<vaadin-date-picker>"?: unknown;
   /**  */
-  _context?: ContextMenu["_context"];
+  "bool:<vaadin-date-picker-overlay-content>"?: unknown;
   /**  */
-  _phone?: ContextMenu["_phone"];
+  "bool:<vaadin-date-picker-month-scroller>"?: unknown;
   /**  */
-  _fullscreen?: ContextMenu["_fullscreen"];
+  "bool:<vaadin-date-picker-year-scroller>"?: unknown;
   /**  */
-  _fullscreenMediaQuery?: ContextMenu["_fullscreenMediaQuery"];
-  /** 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.
-
-The items API can't be used together with a renderer!
+  "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.
 
-#### Example
+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.
 
-```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' }
-];
-``` */
-  items?: ContextMenu["items"];
+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"];
   /**  */
-  _positionTarget?: ContextMenu["_positionTarget"];
+  "prop:_fullscreen"?: DatePicker["_fullscreen"];
   /**  */
-  dir?: ContextMenu["dir"];
+  "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"];
   /**  */
-  _boundOpen?: ContextMenu["_boundOpen"];
+  "prop:_noInput"?: DatePicker["_noInput"];
   /**  */
-  _boundClose?: ContextMenu["_boundClose"];
+  "prop:_ios"?: DatePicker["_ios"];
   /**  */
-  _boundPreventDefault?: ContextMenu["_boundPreventDefault"];
+  "prop:_focusOverlayOnOpen"?: DatePicker["_focusOverlayOnOpen"];
   /**  */
-  _boundOnGlobalContextMenu?: ContextMenu["_boundOnGlobalContextMenu"];
+  "prop:_overlayContent"?: DatePicker["_overlayContent"];
   /**  */
-  __itemsOutsideClickListener?: ContextMenu["__itemsOutsideClickListener"];
-
-  /** Fired when the `opened` property changes. */
-  "onopened-changed"?: (e: CustomEvent) => void;
-  /** Fired when an item is selected when the context menu is populated using the `items` API. */
-  "onitem-selected"?: (e: CustomEvent) => void;
-  /** Fired when the context menu is closed. */
-  onclosed?: (e: CustomEvent) => void;
-  /** Fired when all menus should close, e.g., after pressing Tab or on submenu close. */
-  "onclose-all-menus"?: (e: CustomEvent) => void;
-  /** Fired when a click happens outside any open sub-menus. */
-  "onitems-outside-click"?: (e: CustomEvent) => void;
-};
+  "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.
 
-export type ContextMenuSolidJsProps = {
-  /** 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`. */
-  "prop:position"?: ContextMenu["position"];
-  /**  */
-  "bool:<vaadin-item>"?: unknown;
+Should be overridden by subclasses to provide a custom JSDoc with the
+default I18N properties. */
+  "prop:i18n"?: DatePicker["i18n"];
   /**  */
-  "prop:undefined"?: unknown;
-  /** CSS selector that can be used to target any child element
-of the context menu to listen for `openOn` events. */
-  "prop:selector"?: ContextMenu["selector"];
-  /** True if the overlay is currently displayed. */
-  "prop:opened"?: ContextMenu["opened"];
-  /** Event name to listen for opening the context menu. */
-  "prop:openOn"?: ContextMenu["openOn"];
-  /** 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. */
-  "prop:listenOn"?: ContextMenu["listenOn"];
-  /** Event name to listen for closing the context menu. */
-  "prop:closeOn"?: ContextMenu["closeOn"];
-  /** Custom function for rendering the content of the menu overlay.
-Receives three arguments:
+  "prop:__effectiveI18n"?: DatePicker["__effectiveI18n"];
+  /** A pattern matched against individual characters the user inputs.
 
-- `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. */
-  "prop:renderer"?: ContextMenu["renderer"];
-  /** When true, the menu overlay is modeless. */
-  "prop:_modeless"?: ContextMenu["_modeless"];
-  /**  */
-  "prop:_context"?: ContextMenu["_context"];
+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.
+
+It is up to the component to choose where to place the clear icon:
+in the Shadow DOM or in the light DOM. In any way, a reference to
+the clear icon element should be provided via the `clearElement` getter. */
+  "prop:clearButtonVisible"?: DatePicker["clearButtonVisible"];
   /**  */
-  "prop:_phone"?: ContextMenu["_phone"];
+  "prop:dir"?: DatePicker["dir"];
   /**  */
-  "prop:_fullscreen"?: ContextMenu["_fullscreen"];
+  "prop:_inputElementValue"?: DatePicker["_inputElementValue"];
   /**  */
-  "prop:_fullscreenMediaQuery"?: ContextMenu["_fullscreenMediaQuery"];
-  /** 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.
-
-The items API can't be used together with a renderer!
-
-#### Example
-
-```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' }
-];
-``` */
-  "prop:items"?: ContextMenu["items"];
+  "prop:_boundOnClick"?: DatePicker["_boundOnClick"];
   /**  */
-  "prop:_positionTarget"?: ContextMenu["_positionTarget"];
+  "prop:_boundOnScroll"?: DatePicker["_boundOnScroll"];
   /**  */
-  "prop:dir"?: ContextMenu["dir"];
+  "prop:_boundOnPaste"?: DatePicker["_boundOnPaste"];
   /**  */
-  "prop:_boundOpen"?: ContextMenu["_boundOpen"];
+  "prop:_boundOnDrop"?: DatePicker["_boundOnDrop"];
   /**  */
-  "prop:_boundClose"?: ContextMenu["_boundClose"];
+  "prop:_boundOnBeforeInput"?: DatePicker["_boundOnBeforeInput"];
   /**  */
-  "prop:_boundPreventDefault"?: ContextMenu["_boundPreventDefault"];
+  "prop:_fieldAriaController"?: DatePicker["_fieldAriaController"];
   /**  */
-  "prop:_boundOnGlobalContextMenu"?: ContextMenu["_boundOnGlobalContextMenu"];
+  "prop:_helperController"?: DatePicker["_helperController"];
   /**  */
-  "prop:__itemsOutsideClickListener"?: ContextMenu["__itemsOutsideClickListener"];
+  "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 an item is selected when the context menu is populated using the `items` API. */
-  "on:item-selected"?: (e: CustomEvent) => void;
-  /** Fired when the context menu is closed. */
-  "on:closed"?: (e: CustomEvent) => void;
-  /** Fired when all menus should close, e.g., after pressing Tab or on submenu close. */
-  "on:close-all-menus"?: (e: CustomEvent) => void;
-  /** Fired when a click happens outside any open sub-menus. */
-  "on:items-outside-click"?: (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;
@@ -13409,437 +13409,190 @@ export type CustomElements = {
    * 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.
-   *
-   * - `_updatePosition() => void`: undefined
-   * - `__shouldAlignStartHorizontally(targetRect, rtl) => void`: undefined
-   * - `__shouldAlignStartVertically(targetRect) => void`: undefined
-   * - `__shouldAlignStart(targetRect, contentSize, viewportSize, margins, defaultAlignStart, noOverlap, propNames) => void`: undefined
-   * - `__adjustBottomProperty(cssPropNameToSet, propNames, currentValue) => void`: Returns an adjusted value after resizing the browser window,
-   * to avoid wrong calculations when e.g. previously set `bottom`
-   * CSS property value is larger than the updated viewport height.
-   * See https://github.com/vaadin/web-components/issues/4604
-   * - `__calculatePositionInOneDimension(targetRect, overlayRect, noOverlap, propNames, overlay, shouldAlignStart) => void`: Returns an object with CSS position properties to set,
-   * e.g. { top: "100px" }
-   * - `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.
-   * - `close(sourceEvent: Event=) => void`: undefined
-   * - `setBounds(bounds: !OverlayBoundsParam, absolute: boolean = true) => void`: Updates the coordinates of the overlay.
-   * - `bringToFront() => void`: Brings the overlay as visually the frontmost one.
-   * - `createProperty(name, options) => void`: undefined
-   * - `getOrCreateMap(name) => void`: undefined
-   * - `addCheckedInitializer(initializer) => void`: undefined
-   * - `getPropertyDescriptor(name, key, options) => void`: undefined
-   */
-  "vaadin-combo-box-overlay": Partial<
-    ComboBoxOverlayProps & BaseProps<ComboBoxOverlay> & BaseEvents
-  >;
-
-  /**
-   * An element used internally by `<vaadin-combo-box>`. Not intended to be used separately.
-   *
-   * ## Attributes & Properties
-   *
-   * Component attributes and properties that can be applied to the element or by using JavaScript.
-   *
-   * - `items`: A full set of items to filter the visible options from.
-   * Set to an empty array when combo-box is not opened.
-   * - `focusedIndex`: Index of an item that has focus outline and is scrolled into view.
-   * The actual focus still remains in the input field.
-   * - `loading`: Set to true while combo-box fetches new page from the data provider.
-   * - `opened`: Whether the combo-box is currently opened or not. If set to false,
-   * calling `scrollIntoView` does not have any effect.
-   * - `selectedItem`: The selected item from the `items` array.
-   * - `itemClassNameGenerator`: A function used to generate CSS class names for dropdown
-   * items based on the item. The return value should be the
-   * generated class name as a string, or multiple class names
-   * separated by whitespace characters.
-   * - `itemIdPath`: Path for the id of the item, used to detect whether the item is selected.
-   * - `owner`: Reference to the owner (combo-box owner), used by the item elements.
-   * - `getItemLabel`: Function used to set a label for every combo-box item.
-   * - `renderer`: Function used to render the content of every combo-box item.
-   * - `theme`: Used to propagate the `theme` attribute from the host element.
-   * - `__boundOnItemClick`: undefined (property only)
-   *
-   * ## Events
-   *
-   * Events that will be emitted by the component.
-   *
-   * - `selection-changed`: undefined
-   * - `index-requested`: undefined
-   * - `undefined`: undefined
-   *
-   * ## Methods
-   *
-   * Methods that can be called to access component functionality.
-   *
-   * - `requestContentUpdate() => void`: Updates the virtualizer's size and items.
-   * - `scrollIntoView(index: number) => void`: Scrolls an item at given index into view and adjusts `scrollTop`
-   * so that the element gets fully visible on Arrow Down key press.
-   * - `createProperty(name, options) => void`: undefined
-   * - `getOrCreateMap(name) => void`: undefined
-   * - `addCheckedInitializer(initializer) => void`: undefined
-   * - `getPropertyDescriptor(name, key, options) => void`: undefined
-   */
-  "vaadin-combo-box-scroller": Partial<
-    ComboBoxScrollerProps & BaseProps<ComboBoxScroller> & BaseEvents
-  >;
-
-  /**
-   * `<vaadin-combo-box>` is a web component for choosing a value from a filterable list of options
-   * presented in a dropdown overlay. The options can be provided as a list of strings or objects
-   * by setting [`items`](#/elements/vaadin-combo-box#property-items) property on the element.
-   *
-   * ```html
-   * <vaadin-combo-box id="combo-box"></vaadin-combo-box>
-   * ```
-   *
-   * ```js
-   * document.querySelector('#combo-box').items = ['apple', 'orange', 'banana'];
-   * ```
-   *
-   * When the selected `value` is changed, a `value-changed` event is triggered.
-   *
-   * ### Item rendering
-   *
-   * To customize the content of the `<vaadin-combo-box-item>` elements placed in the dropdown, use
-   * [`renderer`](#/elements/vaadin-combo-box#property-renderer) property which accepts a function.
-   * The renderer function is called with `root`, `comboBox`, and `model` as arguments.
-   *
-   * Generate DOM content by using `model` object properties if needed, and append it to the `root`
-   * element. The `comboBox` reference is provided to access the combo-box element state. Do not
-   * set combo-box properties in a `renderer` function.
-   *
-   * ```js
-   * const comboBox = document.querySelector('#combo-box');
-   * comboBox.items = [{'label': 'Hydrogen', 'value': 'H'}];
-   * comboBox.renderer = (root, comboBox, model) => {
-   *   const item = model.item;
-   *   root.innerHTML = `${model.index}: ${item.label} <b>${item.value}</b>`;
-   * };
-   * ```
-   *
-   * Renderer is called on the opening of the combo-box and each time the related model is updated.
-   * Before creating new content, it is recommended to check if there is already an existing DOM
-   * element in `root` from a previous renderer call for reusing it. Even though combo-box uses
-   * infinite scrolling, reducing DOM operations might improve performance.
-   *
-   * The following properties are available in the `model` argument:
-   *
-   * Property   | Type             | Description
-   * -----------|------------------|-------------
-   * `index`    | Number           | Index of the item in the `items` array
-   * `item`     | String or Object | The item reference
-   * `selected` | Boolean          | True when item is selected
-   * `focused`  | Boolean          | True when item is focused
-   *
-   * ### Lazy Loading with Function Data Provider
-   *
-   * In addition to assigning an array to the items property, you can alternatively use the
-   * [`dataProvider`](#/elements/vaadin-combo-box#property-dataProvider) function property.
-   * The `<vaadin-combo-box>` calls this function lazily, only when it needs more data
-   * to be displayed.
-   *
-   * __Note that when using function data providers, the total number of items
-   * needs to be set manually. The total number of items can be returned
-   * in the second argument of the data provider callback:__
-   *
-   * ```js
-   * comboBox.dataProvider = async (params, callback) => {
-   *   const API = 'https://demo.vaadin.com/demo-data/1.0/filtered-countries';
-   *   const { filter, page, pageSize } = params;
-   *   const index = page * pageSize;
-   *
-   *   const res = await fetch(`${API}?index=${index}&count=${pageSize}&filter=${filter}`);
-   *   if (res.ok) {
-   *     const { result, size } = await res.json();
-   *     callback(result, size);
-   *   }
-   * };
-   * ```
-   *
-   * ### Styling
-   *
-   * The following custom properties are available for styling:
-   *
-   * Custom property                         | Description                | Default
-   * ----------------------------------------|----------------------------|---------
-   * `--vaadin-field-default-width`          | Default width of the field | `12em`
-   * `--vaadin-combo-box-overlay-width`      | Width of the overlay       | `auto`
-   * `--vaadin-combo-box-overlay-max-height` | Max height of the overlay  | `65vh`
-   *
-   * The following shadow DOM parts are available for styling:
+   * - `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)
    *
-   * 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
-   * `overlay`            | The overlay container
-   * `content`            | The overlay content
-   * `loader`             | The loading indicator shown while loading items
+   * ## Events
    *
-   * The following state attributes are available for styling:
+   * Events that will be emitted by the component.
    *
-   * 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
-   * `loading`            | Set when loading items from the data provider
+   * - `vaadin-overlay-closed`: undefined
+   * - `vaadin-overlay-closing`: undefined
+   * - `undefined`: undefined
    *
-   * ### Internal components
+   * ## Methods
    *
-   * In addition to `<vaadin-combo-box>` itself, the following internal
-   * components are themable:
+   * Methods that can be called to access component functionality.
    *
-   * - `<vaadin-combo-box-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
+   * - `_updatePosition() => void`: undefined
+   * - `__shouldAlignStartHorizontally(targetRect, rtl) => void`: undefined
+   * - `__shouldAlignStartVertically(targetRect) => void`: undefined
+   * - `__shouldAlignStart(targetRect, contentSize, viewportSize, margins, defaultAlignStart, noOverlap, propNames) => void`: undefined
+   * - `__adjustBottomProperty(cssPropNameToSet, propNames, currentValue) => void`: Returns an adjusted value after resizing the browser window,
+   * to avoid wrong calculations when e.g. previously set `bottom`
+   * CSS property value is larger than the updated viewport height.
+   * See https://github.com/vaadin/web-components/issues/4604
+   * - `__calculatePositionInOneDimension(targetRect, overlayRect, noOverlap, propNames, overlay, shouldAlignStart) => void`: Returns an object with CSS position properties to set,
+   * e.g. { top: "100px" }
+   * - `requestContentUpdate() => void`: Requests an update for the content of the overlay.
+   * While performing the update, it invokes the renderer passed in the `renderer` property.
    *
-   * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
+   * - `close(sourceEvent: Event=) => void`: undefined
+   * - `setBounds(bounds: !OverlayBoundsParam, absolute: boolean = true) => void`: Updates the coordinates of the overlay.
+   * - `bringToFront() => void`: Brings the overlay as visually the frontmost one.
+   * - `createProperty(name, options) => void`: undefined
+   * - `getOrCreateMap(name) => void`: undefined
+   * - `addCheckedInitializer(initializer) => void`: undefined
+   * - `getPropertyDescriptor(name, key, options) => void`: undefined
+   */
+  "vaadin-combo-box-overlay": Partial<
+    ComboBoxOverlayProps & BaseProps<ComboBoxOverlay> & BaseEvents
+  >;
+
+  /**
+   * An element used internally by `<vaadin-combo-box>`. Not intended to be used separately.
    *
    * ## 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
-   * - `loading`: Set when loading items from the data provider
-   * - `<vaadin-combo-box>`/`undefined`: undefined
-   * - `<vaadin-combo-box-item>`/`undefined`: undefined
-   * - `<vaadin-item>`/`undefined`: undefined
-   * - `pageSize`: Number of items fetched at a time from the dataprovider.
-   * - `size`: Total number of items.
-   * - `dataProvider`: Function that provides items lazily. Receives arguments `params`, `callback`
-   *
-   * `params.page` Requested page index
-   *
-   * `params.pageSize` Current page size
-   *
-   * `params.filter` Currently applied filter
-   *
-   * `callback(items, size)` Callback function with arguments:
-   *   - `items` Current page of items
-   *   - `size` Total number of items.
-   * - `renderer`: Custom function for rendering the content of every item.
-   * Receives three arguments:
-   *
-   * - `root` The `<vaadin-combo-box-item>` internal container DOM element.
-   * - `comboBox` The reference to the `<vaadin-combo-box>` element.
-   * - `model` The object with the properties related with the rendered
-   *   item, contains:
-   *   - `model.index` The index of the rendered item.
-   *   - `model.item` The item.
-   * - `allowCustomValue`: If `true`, the user can input a value that is not present in the items list.
-   * `value` property will be set to the input value in this case.
-   * Also, when `value` is set programmatically, the input value will be set
-   * to reflect that value.
+   * - `items`: A full set of items to filter the visible options from.
+   * Set to an empty array when combo-box is not opened.
+   * - `focusedIndex`: Index of an item that has focus outline and is scrolled into view.
+   * The actual focus still remains in the input field.
+   * - `loading`: Set to true while combo-box fetches new page from the data provider.
+   * - `opened`: Whether the combo-box is currently opened or not. If set to false,
+   * calling `scrollIntoView` does not have any effect.
    * - `selectedItem`: The selected item from the `items` array.
    * - `itemClassNameGenerator`: A function used to generate CSS class names for dropdown
    * items based on the item. The return value should be the
    * generated class name as a string, or multiple class names
    * separated by whitespace characters.
-   * - `itemIdPath`: Path for the id of the item. If `items` is an array of objects,
-   * the `itemIdPath` is used to compare and identify the same item
-   * in `selectedItem` and `filteredItems` (items given by the
-   * `dataProvider` callback).
-   * - `__keepOverlayOpened`: undefined
-   * - `items`: A full set of items to filter the visible options from.
-   * The items can be of either `String` or `Object` type.
-   * - `filteredItems`: A subset of items, filtered based on the user input. Filtered items
-   * can be assigned directly to omit the internal filtering functionality.
-   * The items can be of either `String` or `Object` type.
-   * - `filter`: Filtering string the user has typed into the input field.
-   * - `itemLabelGenerator`: A function that is used to generate the label for dropdown
-   * items based on the item. Receives one argument:
-   * - `item` The item to generate the label for.
-   * - `itemLabelPath`: Path for label of the item. If `items` is an array of objects, the
-   * `itemLabelPath` is used to fetch the displayed string label for each
-   * item.
-   *
-   * The item label is also used for matching items when processing user
-   * input, i.e., for filtering and selecting items.
-   * - `itemValuePath`: Path for the value of the item. If `items` is an array of objects, the
-   * `itemValuePath:` is used to fetch the string value for the selected
-   * item.
-   *
-   * The item value is used in the `value` property of the combo box,
-   * to provide the form value.
-   * - `autoOpenDisabled`: Set true to prevent the overlay from opening automatically.
-   * - `_focusedIndex`: undefined
-   * - `_toggleElement`: undefined
-   * - `_dropdownItems`: Set of items to be rendered in the dropdown.
-   * - `_overlayOpened`: Whether the overlay should be opened.
-   * - `pattern`: A regular expression that the value is checked against.
-   * The pattern must match the entire value, not just some subset.
-   * - `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.
-   *
-   * It is up to the component to choose where to place the clear icon:
-   * in the Shadow DOM or in the light DOM. In any way, a reference to
-   * the clear icon element should be provided via the `clearElement` getter.
-   * - `dir`: undefined
-   * - `_boundOverlaySelectedItemChanged`: undefined (property only)
-   * - `_boundOnClearButtonMouseDown`: undefined (property only)
-   * - `_boundOnClick`: undefined (property only)
-   * - `_boundOnOverlayTouchAction`: undefined (property only)
-   * - `_boundOnTouchend`: 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)
+   * - `itemIdPath`: Path for the id of the item, used to detect whether the item is selected.
+   * - `owner`: Reference to the owner (combo-box owner), used by the item elements.
+   * - `getItemLabel`: Function used to set a label for every combo-box item.
+   * - `renderer`: Function used to render the content of every combo-box item.
+   * - `theme`: Used to propagate the `theme` attribute from the host element.
+   * - `__boundOnItemClick`: undefined (property only)
    *
    * ## Events
    *
    * Events that will be emitted by the component.
    *
-   * - `change`: Fired when the user commits a value change.
-   * - `custom-value-set`: Fired when the user sets a custom value.
-   * - `filter-changed`: Fired when the `filter` property changes.
-   * - `invalid-changed`: Fired when the `invalid` property changes.
-   * - `opened-changed`: Fired when the `opened` property changes.
-   * - `selected-item-changed`: Fired when the `selectedItem` property changes.
-   * - `value-changed`: Fired when the `value` property changes.
-   * - `validated`: Fired whenever the field is validated.
-   * - `vaadin-combo-box-dropdown-opened`: undefined
-   * - `vaadin-combo-box-dropdown-closed`: undefined
+   * - `selection-changed`: undefined
+   * - `index-requested`: undefined
    * - `undefined`: undefined
    *
    * ## Methods
    *
    * Methods that can be called to access component functionality.
    *
-   * - `clearCache() => void`: Clears the cached pages and reloads data from dataprovider when needed.
-   * - `requestContentUpdate() => void`: Requests an update for the content of items.
-   * While performing the update, it invokes the renderer (passed in the `renderer` property) once an item.
-   *
-   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
-   * - `cancel() => void`: Reverts back to original value.
-   * - `open() => void`: Opens the dropdown list.
-   * - `close() => void`: Closes the dropdown list.
+   * - `requestContentUpdate() => void`: Updates the virtualizer's size and items.
+   * - `scrollIntoView(index: number) => void`: Scrolls an item at given index into view and adjusts `scrollTop`
+   * so that the element gets fully visible on Arrow Down key press.
    * - `createProperty(name, options) => void`: undefined
    * - `getOrCreateMap(name) => void`: undefined
    * - `addCheckedInitializer(initializer) => void`: undefined
    * - `getPropertyDescriptor(name, key, options) => void`: undefined
    */
-  "vaadin-combo-box": Partial<ComboBoxProps & BaseProps<ComboBox> & BaseEvents>;
+  "vaadin-combo-box-scroller": Partial<
+    ComboBoxScrollerProps & BaseProps<ComboBoxScroller> & BaseEvents
+  >;
 
   /**
-   * An element used internally by `<vaadin-date-picker>`. Not intended to be used separately.
+   * `<vaadin-combo-box>` is a web component for choosing a value from a filterable list of options
+   * presented in a dropdown overlay. The options can be provided as a list of strings or objects
+   * by setting [`items`](#/elements/vaadin-combo-box#property-items) property on the element.
    *
-   * ## Attributes & Properties
+   * ```html
+   * <vaadin-combo-box id="combo-box"></vaadin-combo-box>
+   * ```
    *
-   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   * ```js
+   * document.querySelector('#combo-box').items = ['apple', 'orange', 'banana'];
+   * ```
    *
-   * - `year`: undefined
-   * - `selectedDate`: undefined
+   * When the selected `value` is changed, a `value-changed` event is triggered.
    *
-   * ## Events
+   * ### Item rendering
+   *
+   * To customize the content of the `<vaadin-combo-box-item>` elements placed in the dropdown, use
+   * [`renderer`](#/elements/vaadin-combo-box#property-renderer) property which accepts a function.
+   * The renderer function is called with `root`, `comboBox`, and `model` as arguments.
+   *
+   * Generate DOM content by using `model` object properties if needed, and append it to the `root`
+   * element. The `comboBox` reference is provided to access the combo-box element state. Do not
+   * set combo-box properties in a `renderer` function.
+   *
+   * ```js
+   * const comboBox = document.querySelector('#combo-box');
+   * comboBox.items = [{'label': 'Hydrogen', 'value': 'H'}];
+   * comboBox.renderer = (root, comboBox, model) => {
+   *   const item = model.item;
+   *   root.innerHTML = `${model.index}: ${item.label} <b>${item.value}</b>`;
+   * };
+   * ```
    *
-   * Events that will be emitted by the component.
+   * Renderer is called on the opening of the combo-box and each time the related model is updated.
+   * Before creating new content, it is recommended to check if there is already an existing DOM
+   * element in `root` from a previous renderer call for reusing it. Even though combo-box uses
+   * infinite scrolling, reducing DOM operations might improve performance.
    *
-   * - `undefined`: undefined
+   * The following properties are available in the `model` argument:
    *
-   * ## Methods
+   * Property   | Type             | Description
+   * -----------|------------------|-------------
+   * `index`    | Number           | Index of the item in the `items` array
+   * `item`     | String or Object | The item reference
+   * `selected` | Boolean          | True when item is selected
+   * `focused`  | Boolean          | True when item is focused
    *
-   * Methods that can be called to access component functionality.
+   * ### Lazy Loading with Function Data Provider
    *
-   * - `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.
+   * In addition to assigning an array to the items property, you can alternatively use the
+   * [`dataProvider`](#/elements/vaadin-combo-box#property-dataProvider) function property.
+   * The `<vaadin-combo-box>` calls this function lazily, only when it needs more data
+   * to be displayed.
    *
-   * ```html
-   * <vaadin-date-picker label="Birthday"></vaadin-date-picker>
-   * ```
+   * __Note that when using function data providers, the total number of items
+   * needs to be set manually. The total number of items can be returned
+   * in the second argument of the data provider callback:__
    *
    * ```js
-   * datePicker.value = '2016-03-02';
-   * ```
+   * comboBox.dataProvider = async (params, callback) => {
+   *   const API = 'https://demo.vaadin.com/demo-data/1.0/filtered-countries';
+   *   const { filter, page, pageSize } = params;
+   *   const index = page * pageSize;
    *
-   * When the selected `value` is changed, a `value-changed` event is triggered.
+   *   const res = await fetch(`${API}?index=${index}&count=${pageSize}&filter=${filter}`);
+   *   if (res.ok) {
+   *     const { result, size } = await res.json();
+   *     callback(result, size);
+   *   }
+   * };
+   * ```
    *
    * ### Styling
    *
    * The following custom properties are available for styling:
    *
-   * Custom property                | Description                | Default
-   * -------------------------------|----------------------------|---------
-   * `--vaadin-field-default-width` | Default width of the field | `12em`
+   * Custom property                         | Description                | Default
+   * ----------------------------------------|----------------------------|---------
+   * `--vaadin-field-default-width`          | Default width of the field | `12em`
+   * `--vaadin-combo-box-overlay-width`      | Width of the overlay       | `auto`
+   * `--vaadin-combo-box-overlay-max-height` | Max height of the overlay  | `65vh`
    *
    * The following shadow DOM parts are available for styling:
    *
@@ -13853,9 +13606,9 @@ export type CustomElements = {
    * `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
+   * `loader`             | The loading indicator shown while loading items
    *
    * The following state attributes are available for styling:
    *
@@ -13872,76 +13625,17 @@ export type CustomElements = {
    * `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
+   * `loading`            | Set when loading items from the data provider
    *
    * ### Internal components
    *
-   * In addition to `<vaadin-date-picker>` itself, the following internal
+   * In addition to `<vaadin-combo-box>` 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
+   * - `<vaadin-combo-box-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
    *
    * 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
-   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -13958,59 +13652,74 @@ export type CustomElements = {
    * - `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.
+   * - `loading`: Set when loading items from the data provider
+   * - `<vaadin-combo-box>`/`undefined`: undefined
+   * - `<vaadin-combo-box-item>`/`undefined`: undefined
+   * - `<vaadin-item>`/`undefined`: undefined
+   * - `pageSize`: Number of items fetched at a time from the dataprovider.
+   * - `size`: Total number of items.
+   * - `dataProvider`: Function that provides items lazily. Receives arguments `params`, `callback`
    *
-   * 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.
+   * `params.page` Requested page index
    *
-   * 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.
+   * `params.pageSize` Current page size
    *
-   * 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.
+   * `params.filter` Currently applied filter
    *
-   * 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.
+   * `callback(items, size)` Callback function with arguments:
+   *   - `items` Current page of items
+   *   - `size` Total number of items.
+   * - `renderer`: Custom function for rendering the content of every item.
+   * Receives three arguments:
    *
-   * Should be overridden by subclasses to provide a custom JSDoc with the
-   * default I18N properties.
-   * - `__effectiveI18n`: undefined
+   * - `root` The `<vaadin-combo-box-item>` internal container DOM element.
+   * - `comboBox` The reference to the `<vaadin-combo-box>` element.
+   * - `model` The object with the properties related with the rendered
+   *   item, contains:
+   *   - `model.index` The index of the rendered item.
+   *   - `model.item` The item.
+   * - `allowCustomValue`: If `true`, the user can input a value that is not present in the items list.
+   * `value` property will be set to the input value in this case.
+   * Also, when `value` is set programmatically, the input value will be set
+   * to reflect that value.
+   * - `selectedItem`: The selected item from the `items` array.
+   * - `itemClassNameGenerator`: A function used to generate CSS class names for dropdown
+   * items based on the item. The return value should be the
+   * generated class name as a string, or multiple class names
+   * separated by whitespace characters.
+   * - `itemIdPath`: Path for the id of the item. If `items` is an array of objects,
+   * the `itemIdPath` is used to compare and identify the same item
+   * in `selectedItem` and `filteredItems` (items given by the
+   * `dataProvider` callback).
+   * - `__keepOverlayOpened`: undefined
+   * - `items`: A full set of items to filter the visible options from.
+   * The items can be of either `String` or `Object` type.
+   * - `filteredItems`: A subset of items, filtered based on the user input. Filtered items
+   * can be assigned directly to omit the internal filtering functionality.
+   * The items can be of either `String` or `Object` type.
+   * - `filter`: Filtering string the user has typed into the input field.
+   * - `itemLabelGenerator`: A function that is used to generate the label for dropdown
+   * items based on the item. Receives one argument:
+   * - `item` The item to generate the label for.
+   * - `itemLabelPath`: Path for label of the item. If `items` is an array of objects, the
+   * `itemLabelPath` is used to fetch the displayed string label for each
+   * item.
+   *
+   * The item label is also used for matching items when processing user
+   * input, i.e., for filtering and selecting items.
+   * - `itemValuePath`: Path for the value of the item. If `items` is an array of objects, the
+   * `itemValuePath:` is used to fetch the string value for the selected
+   * item.
+   *
+   * The item value is used in the `value` property of the combo box,
+   * to provide the form value.
+   * - `autoOpenDisabled`: Set true to prevent the overlay from opening automatically.
+   * - `_focusedIndex`: undefined
+   * - `_toggleElement`: undefined
+   * - `_dropdownItems`: Set of items to be rendered in the dropdown.
+   * - `_overlayOpened`: Whether the overlay should be opened.
+   * - `pattern`: A regular expression that the value is checked against.
+   * The pattern must match the entire value, not just some subset.
    * - `allowedCharPattern`: A pattern matched against individual characters the user inputs.
    *
    * When set, the field will prevent:
@@ -14035,9 +13744,11 @@ export type CustomElements = {
    * in the Shadow DOM or in the light DOM. In any way, a reference to
    * the clear icon element should be provided via the `clearElement` getter.
    * - `dir`: undefined
-   * - `_inputElementValue`: undefined (property only)
+   * - `_boundOverlaySelectedItemChanged`: undefined (property only)
+   * - `_boundOnClearButtonMouseDown`: undefined (property only)
    * - `_boundOnClick`: undefined (property only)
-   * - `_boundOnScroll`: undefined (property only)
+   * - `_boundOnOverlayTouchAction`: undefined (property only)
+   * - `_boundOnTouchend`: undefined (property only)
    * - `_boundOnPaste`: undefined (property only)
    * - `_boundOnDrop`: undefined (property only)
    * - `_boundOnBeforeInput`: undefined (property only)
@@ -14050,30 +13761,35 @@ export type CustomElements = {
    * 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.
+   * - `custom-value-set`: Fired when the user sets a custom value.
+   * - `filter-changed`: Fired when the `filter` property changes.
    * - `invalid-changed`: Fired when the `invalid` property changes.
    * - `opened-changed`: Fired when the `opened` property changes.
+   * - `selected-item-changed`: Fired when the `selectedItem` property changes.
    * - `value-changed`: Fired when the `value` property changes.
    * - `validated`: Fired whenever the field is validated.
+   * - `vaadin-combo-box-dropdown-opened`: undefined
+   * - `vaadin-combo-box-dropdown-closed`: 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)
+   * - `clearCache() => void`: Clears the cached pages and reloads data from dataprovider when needed.
+   * - `requestContentUpdate() => void`: Requests an update for the content of items.
+   * While performing the update, it invokes the renderer (passed in the `renderer` property) once an item.
    *
-   * Override the `checkValidity` method for custom validations.
+   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
+   * - `cancel() => void`: Reverts back to original value.
+   * - `open() => void`: Opens the dropdown list.
+   * - `close() => void`: Closes the dropdown list.
    * - `createProperty(name, options) => void`: undefined
    * - `getOrCreateMap(name) => void`: undefined
    * - `addCheckedInitializer(initializer) => void`: undefined
    * - `getPropertyDescriptor(name, key, options) => void`: undefined
    */
-  "vaadin-date-picker": Partial<
-    DatePickerProps & BaseProps<DatePicker> & BaseEvents
-  >;
+  "vaadin-combo-box": Partial<ComboBoxProps & BaseProps<ComboBox> & BaseEvents>;
 
   /**
    * An element used internally by `<vaadin-context-menu>`. Not intended to be used separately.
@@ -14408,152 +14124,436 @@ export type CustomElements = {
    * };
    * ```
    *
-   * ### Styling
+   * ### 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.
+   * 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
+   *
+   * ```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' }
+   * ];
+   * ```
+   * - `_positionTarget`: undefined
+   * - `dir`: undefined
+   * - `_boundOpen`: undefined (property only)
+   * - `_boundClose`: undefined (property only)
+   * - `_boundPreventDefault`: undefined (property only)
+   * - `_boundOnGlobalContextMenu`: 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
+   *
+   * 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-context-menu": Partial<
+    ContextMenuProps & BaseProps<ContextMenu> & 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.
+   *
+   * - `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 & 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.
+   *
+   * ```html
+   * <vaadin-date-picker label="Birthday"></vaadin-date-picker>
+   * ```
+   *
+   * ```js
+   * datePicker.value = '2016-03-02';
+   * ```
+   *
+   * 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
+   * `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:
    *
-   * The following shadow DOM parts are available for styling:
+   * Part name             | Description
+   * ----------------------|--------------------
+   * `years-toggle-button` | Fullscreen mode years scroller toggle
+   * `toolbar`             | Toolbar with slotted buttons
    *
-   * Part name        | Description
-   * -----------------|-------------------------------------------
-   * `backdrop`       | Backdrop of the overlay
-   * `overlay`        | The overlay container
-   * `content`        | The overlay content
+   * The following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:
    *
-   * ### Custom CSS Properties
+   * 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                   | 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
+   * 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
    *
-   * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+   * In order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:
    *
-   * ### Internal components
+   * Part name             | Description
+   * ----------------------|--------------------
+   * `year-number`         | Year number
+   * `year-separator`      | Year separator
    *
-   * When using `items` API the following internal components are themable:
+   * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
    *
-   * - `<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).
+   * ### Change events
    *
-   * The `<vaadin-context-menu-item>` sub-menu elements have the following additional state attributes
-   * on top of the built-in `<vaadin-item>` state attributes:
+   * 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:
    *
-   * Attribute  | Description
-   * ---------- |-------------
-   * `expanded` | Expanded parent item.
+   * 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.
    *
-   * - `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:
+   * - `_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.
    *
-   * - `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
+   * 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
-   * - `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.
+   * - `min`: The earliest date that can be selected. All earlier dates will be disabled.
    *
-   * The items API can't be used together with a renderer!
+   * 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.
    *
-   * #### Example
+   * 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.
    *
-   * ```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' }
-   * ];
-   * ```
-   * - `_positionTarget`: undefined
+   * Should be overridden by subclasses to provide a custom JSDoc with the
+   * default I18N properties.
+   * - `__effectiveI18n`: undefined
+   * - `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.
+   *
+   * It is up to the component to choose where to place the clear icon:
+   * in the Shadow DOM or in the light DOM. In any way, a reference to
+   * the clear icon element should be provided via the `clearElement` getter.
    * - `dir`: undefined
-   * - `_boundOpen`: undefined (property only)
-   * - `_boundClose`: undefined (property only)
-   * - `_boundPreventDefault`: undefined (property only)
-   * - `_boundOnGlobalContextMenu`: undefined (property only)
-   * - `__itemsOutsideClickListener`: undefined (property only)
+   * - `_inputElementValue`: undefined (property only)
+   * - `_boundOnClick`: undefined (property only)
+   * - `_boundOnScroll`: 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.
    *
+   * - `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.
-   * - `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
-   *
-   * 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`)
+   * - `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.
+   *
+   * - `open() => void`: Opens the dropdown.
+   * - `close() => void`: Closes the dropdown.
+   * - `checkValidity() => boolean`: Returns true if the current input value satisfies all constraints (if any)
+   *
+   * 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
    */
-  "vaadin-context-menu": Partial<
-    ContextMenuProps & BaseProps<ContextMenu> & BaseEvents
+  "vaadin-date-picker": Partial<
+    DatePickerProps & BaseProps<DatePicker> & BaseEvents
   >;
 
   /**
@@ -20905,459 +20905,207 @@ export type CustomElementsSolidJs = {
    * fixed value for determining the open direction.
    * - `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.
-   *
-   * - `_updatePosition() => void`: undefined
-   * - `__shouldAlignStartHorizontally(targetRect, rtl) => void`: undefined
-   * - `__shouldAlignStartVertically(targetRect) => void`: undefined
-   * - `__shouldAlignStart(targetRect, contentSize, viewportSize, margins, defaultAlignStart, noOverlap, propNames) => void`: undefined
-   * - `__adjustBottomProperty(cssPropNameToSet, propNames, currentValue) => void`: Returns an adjusted value after resizing the browser window,
-   * to avoid wrong calculations when e.g. previously set `bottom`
-   * CSS property value is larger than the updated viewport height.
-   * See https://github.com/vaadin/web-components/issues/4604
-   * - `__calculatePositionInOneDimension(targetRect, overlayRect, noOverlap, propNames, overlay, shouldAlignStart) => void`: Returns an object with CSS position properties to set,
-   * e.g. { top: "100px" }
-   * - `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.
-   * - `close(sourceEvent: Event=) => void`: undefined
-   * - `setBounds(bounds: !OverlayBoundsParam, absolute: boolean = true) => void`: Updates the coordinates of the overlay.
-   * - `bringToFront() => void`: Brings the overlay as visually the frontmost one.
-   * - `createProperty(name, options) => void`: undefined
-   * - `getOrCreateMap(name) => void`: undefined
-   * - `addCheckedInitializer(initializer) => void`: undefined
-   * - `getPropertyDescriptor(name, key, options) => void`: undefined
-   */
-  "vaadin-combo-box-overlay": Partial<
-    ComboBoxOverlayProps &
-      ComboBoxOverlaySolidJsProps &
-      BaseProps<ComboBoxOverlay> &
-      BaseEvents
-  >;
-
-  /**
-   * An element used internally by `<vaadin-combo-box>`. Not intended to be used separately.
-   *
-   * ## Attributes & Properties
-   *
-   * Component attributes and properties that can be applied to the element or by using JavaScript.
-   *
-   * - `items`: A full set of items to filter the visible options from.
-   * Set to an empty array when combo-box is not opened.
-   * - `focusedIndex`: Index of an item that has focus outline and is scrolled into view.
-   * The actual focus still remains in the input field.
-   * - `loading`: Set to true while combo-box fetches new page from the data provider.
-   * - `opened`: Whether the combo-box is currently opened or not. If set to false,
-   * calling `scrollIntoView` does not have any effect.
-   * - `selectedItem`: The selected item from the `items` array.
-   * - `itemClassNameGenerator`: A function used to generate CSS class names for dropdown
-   * items based on the item. The return value should be the
-   * generated class name as a string, or multiple class names
-   * separated by whitespace characters.
-   * - `itemIdPath`: Path for the id of the item, used to detect whether the item is selected.
-   * - `owner`: Reference to the owner (combo-box owner), used by the item elements.
-   * - `getItemLabel`: Function used to set a label for every combo-box item.
-   * - `renderer`: Function used to render the content of every combo-box item.
-   * - `theme`: Used to propagate the `theme` attribute from the host element.
-   * - `__boundOnItemClick`: undefined (property only)
-   *
-   * ## Events
-   *
-   * Events that will be emitted by the component.
-   *
-   * - `selection-changed`: undefined
-   * - `index-requested`: undefined
-   * - `undefined`: undefined
-   *
-   * ## Methods
-   *
-   * Methods that can be called to access component functionality.
-   *
-   * - `requestContentUpdate() => void`: Updates the virtualizer's size and items.
-   * - `scrollIntoView(index: number) => void`: Scrolls an item at given index into view and adjusts `scrollTop`
-   * so that the element gets fully visible on Arrow Down key press.
-   * - `createProperty(name, options) => void`: undefined
-   * - `getOrCreateMap(name) => void`: undefined
-   * - `addCheckedInitializer(initializer) => void`: undefined
-   * - `getPropertyDescriptor(name, key, options) => void`: undefined
-   */
-  "vaadin-combo-box-scroller": Partial<
-    ComboBoxScrollerProps &
-      ComboBoxScrollerSolidJsProps &
-      BaseProps<ComboBoxScroller> &
-      BaseEvents
-  >;
-
-  /**
-   * `<vaadin-combo-box>` is a web component for choosing a value from a filterable list of options
-   * presented in a dropdown overlay. The options can be provided as a list of strings or objects
-   * by setting [`items`](#/elements/vaadin-combo-box#property-items) property on the element.
-   *
-   * ```html
-   * <vaadin-combo-box id="combo-box"></vaadin-combo-box>
-   * ```
-   *
-   * ```js
-   * document.querySelector('#combo-box').items = ['apple', 'orange', 'banana'];
-   * ```
-   *
-   * When the selected `value` is changed, a `value-changed` event is triggered.
-   *
-   * ### Item rendering
-   *
-   * To customize the content of the `<vaadin-combo-box-item>` elements placed in the dropdown, use
-   * [`renderer`](#/elements/vaadin-combo-box#property-renderer) property which accepts a function.
-   * The renderer function is called with `root`, `comboBox`, and `model` as arguments.
-   *
-   * Generate DOM content by using `model` object properties if needed, and append it to the `root`
-   * element. The `comboBox` reference is provided to access the combo-box element state. Do not
-   * set combo-box properties in a `renderer` function.
-   *
-   * ```js
-   * const comboBox = document.querySelector('#combo-box');
-   * comboBox.items = [{'label': 'Hydrogen', 'value': 'H'}];
-   * comboBox.renderer = (root, comboBox, model) => {
-   *   const item = model.item;
-   *   root.innerHTML = `${model.index}: ${item.label} <b>${item.value}</b>`;
-   * };
-   * ```
-   *
-   * Renderer is called on the opening of the combo-box and each time the related model is updated.
-   * Before creating new content, it is recommended to check if there is already an existing DOM
-   * element in `root` from a previous renderer call for reusing it. Even though combo-box uses
-   * infinite scrolling, reducing DOM operations might improve performance.
-   *
-   * The following properties are available in the `model` argument:
-   *
-   * Property   | Type             | Description
-   * -----------|------------------|-------------
-   * `index`    | Number           | Index of the item in the `items` array
-   * `item`     | String or Object | The item reference
-   * `selected` | Boolean          | True when item is selected
-   * `focused`  | Boolean          | True when item is focused
-   *
-   * ### Lazy Loading with Function Data Provider
-   *
-   * In addition to assigning an array to the items property, you can alternatively use the
-   * [`dataProvider`](#/elements/vaadin-combo-box#property-dataProvider) function property.
-   * The `<vaadin-combo-box>` calls this function lazily, only when it needs more data
-   * to be displayed.
-   *
-   * __Note that when using function data providers, the total number of items
-   * needs to be set manually. The total number of items can be returned
-   * in the second argument of the data provider callback:__
-   *
-   * ```js
-   * comboBox.dataProvider = async (params, callback) => {
-   *   const API = 'https://demo.vaadin.com/demo-data/1.0/filtered-countries';
-   *   const { filter, page, pageSize } = params;
-   *   const index = page * pageSize;
-   *
-   *   const res = await fetch(`${API}?index=${index}&count=${pageSize}&filter=${filter}`);
-   *   if (res.ok) {
-   *     const { result, size } = await res.json();
-   *     callback(result, size);
-   *   }
-   * };
-   * ```
-   *
-   * ### Styling
-   *
-   * The following custom properties are available for styling:
-   *
-   * Custom property                         | Description                | Default
-   * ----------------------------------------|----------------------------|---------
-   * `--vaadin-field-default-width`          | Default width of the field | `12em`
-   * `--vaadin-combo-box-overlay-width`      | Width of the overlay       | `auto`
-   * `--vaadin-combo-box-overlay-max-height` | Max height of the overlay  | `65vh`
-   *
-   * 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
-   * `required-indicator` | The `required` state indicator element
-   * `toggle-button`      | The toggle button
-   * `overlay`            | The overlay container
-   * `content`            | The overlay content
-   * `loader`             | The loading indicator shown while loading items
-   *
-   * 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
-   * `loading`            | Set when loading items from the data provider
-   *
-   * ### Internal components
+   * - `model`: Object with properties that is passed to `renderer` function
+   * - `renderer`: Custom function for rendering the content of the overlay.
+   * Receives three arguments:
    *
-   * In addition to `<vaadin-combo-box>` itself, the following internal
-   * components are themable:
+   * - `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)
    *
-   * - `<vaadin-combo-box-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
+   * ## Events
    *
-   * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+   * Events that will be emitted by the component.
    *
-   * ## Attributes & Properties
+   * - `vaadin-overlay-closed`: undefined
+   * - `vaadin-overlay-closing`: undefined
+   * - `undefined`: undefined
    *
-   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   * ## Methods
    *
-   * - `_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
-   * - `loading`: Set when loading items from the data provider
-   * - `<vaadin-combo-box>`/`undefined`: undefined
-   * - `<vaadin-combo-box-item>`/`undefined`: undefined
-   * - `<vaadin-item>`/`undefined`: undefined
-   * - `pageSize`: Number of items fetched at a time from the dataprovider.
-   * - `size`: Total number of items.
-   * - `dataProvider`: Function that provides items lazily. Receives arguments `params`, `callback`
+   * Methods that can be called to access component functionality.
    *
-   * `params.page` Requested page index
+   * - `_updatePosition() => void`: undefined
+   * - `__shouldAlignStartHorizontally(targetRect, rtl) => void`: undefined
+   * - `__shouldAlignStartVertically(targetRect) => void`: undefined
+   * - `__shouldAlignStart(targetRect, contentSize, viewportSize, margins, defaultAlignStart, noOverlap, propNames) => void`: undefined
+   * - `__adjustBottomProperty(cssPropNameToSet, propNames, currentValue) => void`: Returns an adjusted value after resizing the browser window,
+   * to avoid wrong calculations when e.g. previously set `bottom`
+   * CSS property value is larger than the updated viewport height.
+   * See https://github.com/vaadin/web-components/issues/4604
+   * - `__calculatePositionInOneDimension(targetRect, overlayRect, noOverlap, propNames, overlay, shouldAlignStart) => void`: Returns an object with CSS position properties to set,
+   * e.g. { top: "100px" }
+   * - `requestContentUpdate() => void`: Requests an update for the content of the overlay.
+   * While performing the update, it invokes the renderer passed in the `renderer` property.
    *
-   * `params.pageSize` Current page size
+   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
+   * - `close(sourceEvent: Event=) => void`: undefined
+   * - `setBounds(bounds: !OverlayBoundsParam, absolute: boolean = true) => void`: Updates the coordinates of the overlay.
+   * - `bringToFront() => void`: Brings the overlay as visually the frontmost one.
+   * - `createProperty(name, options) => void`: undefined
+   * - `getOrCreateMap(name) => void`: undefined
+   * - `addCheckedInitializer(initializer) => void`: undefined
+   * - `getPropertyDescriptor(name, key, options) => void`: undefined
+   */
+  "vaadin-combo-box-overlay": Partial<
+    ComboBoxOverlayProps &
+      ComboBoxOverlaySolidJsProps &
+      BaseProps<ComboBoxOverlay> &
+      BaseEvents
+  >;
+
+  /**
+   * An element used internally by `<vaadin-combo-box>`. Not intended to be used separately.
    *
-   * `params.filter` Currently applied filter
+   * ## Attributes & Properties
    *
-   * `callback(items, size)` Callback function with arguments:
-   *   - `items` Current page of items
-   *   - `size` Total number of items.
-   * - `renderer`: Custom function for rendering the content of every item.
-   * Receives three arguments:
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `root` The `<vaadin-combo-box-item>` internal container DOM element.
-   * - `comboBox` The reference to the `<vaadin-combo-box>` element.
-   * - `model` The object with the properties related with the rendered
-   *   item, contains:
-   *   - `model.index` The index of the rendered item.
-   *   - `model.item` The item.
-   * - `allowCustomValue`: If `true`, the user can input a value that is not present in the items list.
-   * `value` property will be set to the input value in this case.
-   * Also, when `value` is set programmatically, the input value will be set
-   * to reflect that value.
+   * - `items`: A full set of items to filter the visible options from.
+   * Set to an empty array when combo-box is not opened.
+   * - `focusedIndex`: Index of an item that has focus outline and is scrolled into view.
+   * The actual focus still remains in the input field.
+   * - `loading`: Set to true while combo-box fetches new page from the data provider.
+   * - `opened`: Whether the combo-box is currently opened or not. If set to false,
+   * calling `scrollIntoView` does not have any effect.
    * - `selectedItem`: The selected item from the `items` array.
    * - `itemClassNameGenerator`: A function used to generate CSS class names for dropdown
    * items based on the item. The return value should be the
    * generated class name as a string, or multiple class names
    * separated by whitespace characters.
-   * - `itemIdPath`: Path for the id of the item. If `items` is an array of objects,
-   * the `itemIdPath` is used to compare and identify the same item
-   * in `selectedItem` and `filteredItems` (items given by the
-   * `dataProvider` callback).
-   * - `__keepOverlayOpened`: undefined
-   * - `items`: A full set of items to filter the visible options from.
-   * The items can be of either `String` or `Object` type.
-   * - `filteredItems`: A subset of items, filtered based on the user input. Filtered items
-   * can be assigned directly to omit the internal filtering functionality.
-   * The items can be of either `String` or `Object` type.
-   * - `filter`: Filtering string the user has typed into the input field.
-   * - `itemLabelGenerator`: A function that is used to generate the label for dropdown
-   * items based on the item. Receives one argument:
-   * - `item` The item to generate the label for.
-   * - `itemLabelPath`: Path for label of the item. If `items` is an array of objects, the
-   * `itemLabelPath` is used to fetch the displayed string label for each
-   * item.
-   *
-   * The item label is also used for matching items when processing user
-   * input, i.e., for filtering and selecting items.
-   * - `itemValuePath`: Path for the value of the item. If `items` is an array of objects, the
-   * `itemValuePath:` is used to fetch the string value for the selected
-   * item.
-   *
-   * The item value is used in the `value` property of the combo box,
-   * to provide the form value.
-   * - `autoOpenDisabled`: Set true to prevent the overlay from opening automatically.
-   * - `_focusedIndex`: undefined
-   * - `_toggleElement`: undefined
-   * - `_dropdownItems`: Set of items to be rendered in the dropdown.
-   * - `_overlayOpened`: Whether the overlay should be opened.
-   * - `pattern`: A regular expression that the value is checked against.
-   * The pattern must match the entire value, not just some subset.
-   * - `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.
-   *
-   * It is up to the component to choose where to place the clear icon:
-   * in the Shadow DOM or in the light DOM. In any way, a reference to
-   * the clear icon element should be provided via the `clearElement` getter.
-   * - `dir`: undefined
-   * - `_boundOverlaySelectedItemChanged`: undefined (property only)
-   * - `_boundOnClearButtonMouseDown`: undefined (property only)
-   * - `_boundOnClick`: undefined (property only)
-   * - `_boundOnOverlayTouchAction`: undefined (property only)
-   * - `_boundOnTouchend`: 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)
+   * - `itemIdPath`: Path for the id of the item, used to detect whether the item is selected.
+   * - `owner`: Reference to the owner (combo-box owner), used by the item elements.
+   * - `getItemLabel`: Function used to set a label for every combo-box item.
+   * - `renderer`: Function used to render the content of every combo-box item.
+   * - `theme`: Used to propagate the `theme` attribute from the host element.
+   * - `__boundOnItemClick`: undefined (property only)
    *
    * ## Events
    *
    * Events that will be emitted by the component.
    *
-   * - `change`: Fired when the user commits a value change.
-   * - `custom-value-set`: Fired when the user sets a custom value.
-   * - `filter-changed`: Fired when the `filter` property changes.
-   * - `invalid-changed`: Fired when the `invalid` property changes.
-   * - `opened-changed`: Fired when the `opened` property changes.
-   * - `selected-item-changed`: Fired when the `selectedItem` property changes.
-   * - `value-changed`: Fired when the `value` property changes.
-   * - `validated`: Fired whenever the field is validated.
-   * - `vaadin-combo-box-dropdown-opened`: undefined
-   * - `vaadin-combo-box-dropdown-closed`: undefined
+   * - `selection-changed`: undefined
+   * - `index-requested`: undefined
    * - `undefined`: undefined
    *
    * ## Methods
    *
    * Methods that can be called to access component functionality.
    *
-   * - `clearCache() => void`: Clears the cached pages and reloads data from dataprovider when needed.
-   * - `requestContentUpdate() => void`: Requests an update for the content of items.
-   * While performing the update, it invokes the renderer (passed in the `renderer` property) once an item.
-   *
-   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
-   * - `cancel() => void`: Reverts back to original value.
-   * - `open() => void`: Opens the dropdown list.
-   * - `close() => void`: Closes the dropdown list.
+   * - `requestContentUpdate() => void`: Updates the virtualizer's size and items.
+   * - `scrollIntoView(index: number) => void`: Scrolls an item at given index into view and adjusts `scrollTop`
+   * so that the element gets fully visible on Arrow Down key press.
    * - `createProperty(name, options) => void`: undefined
    * - `getOrCreateMap(name) => void`: undefined
    * - `addCheckedInitializer(initializer) => void`: undefined
    * - `getPropertyDescriptor(name, key, options) => void`: undefined
    */
-  "vaadin-combo-box": Partial<
-    ComboBoxProps & ComboBoxSolidJsProps & BaseProps<ComboBox> & BaseEvents
+  "vaadin-combo-box-scroller": Partial<
+    ComboBoxScrollerProps &
+      ComboBoxScrollerSolidJsProps &
+      BaseProps<ComboBoxScroller> &
+      BaseEvents
   >;
 
   /**
-   * An element used internally by `<vaadin-date-picker>`. Not intended to be used separately.
+   * `<vaadin-combo-box>` is a web component for choosing a value from a filterable list of options
+   * presented in a dropdown overlay. The options can be provided as a list of strings or objects
+   * by setting [`items`](#/elements/vaadin-combo-box#property-items) property on the element.
    *
-   * ## Attributes & Properties
+   * ```html
+   * <vaadin-combo-box id="combo-box"></vaadin-combo-box>
+   * ```
    *
-   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   * ```js
+   * document.querySelector('#combo-box').items = ['apple', 'orange', 'banana'];
+   * ```
    *
-   * - `year`: undefined
-   * - `selectedDate`: undefined
+   * When the selected `value` is changed, a `value-changed` event is triggered.
    *
-   * ## Events
+   * ### Item rendering
    *
-   * Events that will be emitted by the component.
+   * To customize the content of the `<vaadin-combo-box-item>` elements placed in the dropdown, use
+   * [`renderer`](#/elements/vaadin-combo-box#property-renderer) property which accepts a function.
+   * The renderer function is called with `root`, `comboBox`, and `model` as arguments.
    *
-   * - `undefined`: undefined
+   * Generate DOM content by using `model` object properties if needed, and append it to the `root`
+   * element. The `comboBox` reference is provided to access the combo-box element state. Do not
+   * set combo-box properties in a `renderer` function.
+   *
+   * ```js
+   * const comboBox = document.querySelector('#combo-box');
+   * comboBox.items = [{'label': 'Hydrogen', 'value': 'H'}];
+   * comboBox.renderer = (root, comboBox, model) => {
+   *   const item = model.item;
+   *   root.innerHTML = `${model.index}: ${item.label} <b>${item.value}</b>`;
+   * };
+   * ```
+   *
+   * Renderer is called on the opening of the combo-box and each time the related model is updated.
+   * Before creating new content, it is recommended to check if there is already an existing DOM
+   * element in `root` from a previous renderer call for reusing it. Even though combo-box uses
+   * infinite scrolling, reducing DOM operations might improve performance.
+   *
+   * The following properties are available in the `model` argument:
    *
-   * ## Methods
+   * Property   | Type             | Description
+   * -----------|------------------|-------------
+   * `index`    | Number           | Index of the item in the `items` array
+   * `item`     | String or Object | The item reference
+   * `selected` | Boolean          | True when item is selected
+   * `focused`  | Boolean          | True when item is focused
    *
-   * Methods that can be called to access component functionality.
+   * ### Lazy Loading with Function Data Provider
    *
-   * - `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.
+   * In addition to assigning an array to the items property, you can alternatively use the
+   * [`dataProvider`](#/elements/vaadin-combo-box#property-dataProvider) function property.
+   * The `<vaadin-combo-box>` calls this function lazily, only when it needs more data
+   * to be displayed.
    *
-   * ```html
-   * <vaadin-date-picker label="Birthday"></vaadin-date-picker>
-   * ```
+   * __Note that when using function data providers, the total number of items
+   * needs to be set manually. The total number of items can be returned
+   * in the second argument of the data provider callback:__
    *
    * ```js
-   * datePicker.value = '2016-03-02';
-   * ```
+   * comboBox.dataProvider = async (params, callback) => {
+   *   const API = 'https://demo.vaadin.com/demo-data/1.0/filtered-countries';
+   *   const { filter, page, pageSize } = params;
+   *   const index = page * pageSize;
    *
-   * When the selected `value` is changed, a `value-changed` event is triggered.
+   *   const res = await fetch(`${API}?index=${index}&count=${pageSize}&filter=${filter}`);
+   *   if (res.ok) {
+   *     const { result, size } = await res.json();
+   *     callback(result, size);
+   *   }
+   * };
+   * ```
    *
    * ### Styling
    *
    * The following custom properties are available for styling:
    *
-   * Custom property                | Description                | Default
-   * -------------------------------|----------------------------|---------
-   * `--vaadin-field-default-width` | Default width of the field | `12em`
+   * Custom property                         | Description                | Default
+   * ----------------------------------------|----------------------------|---------
+   * `--vaadin-field-default-width`          | Default width of the field | `12em`
+   * `--vaadin-combo-box-overlay-width`      | Width of the overlay       | `auto`
+   * `--vaadin-combo-box-overlay-max-height` | Max height of the overlay  | `65vh`
    *
    * The following shadow DOM parts are available for styling:
    *
@@ -21371,9 +21119,9 @@ export type CustomElementsSolidJs = {
    * `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
+   * `loader`             | The loading indicator shown while loading items
    *
    * The following state attributes are available for styling:
    *
@@ -21390,76 +21138,17 @@ export type CustomElementsSolidJs = {
    * `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
+   * `loading`            | Set when loading items from the data provider
    *
    * ### Internal components
    *
-   * In addition to `<vaadin-date-picker>` itself, the following internal
+   * In addition to `<vaadin-combo-box>` 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
+   * - `<vaadin-combo-box-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
    *
    * 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
-   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -21476,59 +21165,74 @@ export type CustomElementsSolidJs = {
    * - `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.
+   * - `loading`: Set when loading items from the data provider
+   * - `<vaadin-combo-box>`/`undefined`: undefined
+   * - `<vaadin-combo-box-item>`/`undefined`: undefined
+   * - `<vaadin-item>`/`undefined`: undefined
+   * - `pageSize`: Number of items fetched at a time from the dataprovider.
+   * - `size`: Total number of items.
+   * - `dataProvider`: Function that provides items lazily. Receives arguments `params`, `callback`
    *
-   * 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.
+   * `params.page` Requested page index
    *
-   * 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.
+   * `params.pageSize` Current page size
    *
-   * 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.
+   * `params.filter` Currently applied filter
    *
-   * 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.
+   * `callback(items, size)` Callback function with arguments:
+   *   - `items` Current page of items
+   *   - `size` Total number of items.
+   * - `renderer`: Custom function for rendering the content of every item.
+   * Receives three arguments:
    *
-   * Should be overridden by subclasses to provide a custom JSDoc with the
-   * default I18N properties.
-   * - `__effectiveI18n`: undefined
+   * - `root` The `<vaadin-combo-box-item>` internal container DOM element.
+   * - `comboBox` The reference to the `<vaadin-combo-box>` element.
+   * - `model` The object with the properties related with the rendered
+   *   item, contains:
+   *   - `model.index` The index of the rendered item.
+   *   - `model.item` The item.
+   * - `allowCustomValue`: If `true`, the user can input a value that is not present in the items list.
+   * `value` property will be set to the input value in this case.
+   * Also, when `value` is set programmatically, the input value will be set
+   * to reflect that value.
+   * - `selectedItem`: The selected item from the `items` array.
+   * - `itemClassNameGenerator`: A function used to generate CSS class names for dropdown
+   * items based on the item. The return value should be the
+   * generated class name as a string, or multiple class names
+   * separated by whitespace characters.
+   * - `itemIdPath`: Path for the id of the item. If `items` is an array of objects,
+   * the `itemIdPath` is used to compare and identify the same item
+   * in `selectedItem` and `filteredItems` (items given by the
+   * `dataProvider` callback).
+   * - `__keepOverlayOpened`: undefined
+   * - `items`: A full set of items to filter the visible options from.
+   * The items can be of either `String` or `Object` type.
+   * - `filteredItems`: A subset of items, filtered based on the user input. Filtered items
+   * can be assigned directly to omit the internal filtering functionality.
+   * The items can be of either `String` or `Object` type.
+   * - `filter`: Filtering string the user has typed into the input field.
+   * - `itemLabelGenerator`: A function that is used to generate the label for dropdown
+   * items based on the item. Receives one argument:
+   * - `item` The item to generate the label for.
+   * - `itemLabelPath`: Path for label of the item. If `items` is an array of objects, the
+   * `itemLabelPath` is used to fetch the displayed string label for each
+   * item.
+   *
+   * The item label is also used for matching items when processing user
+   * input, i.e., for filtering and selecting items.
+   * - `itemValuePath`: Path for the value of the item. If `items` is an array of objects, the
+   * `itemValuePath:` is used to fetch the string value for the selected
+   * item.
+   *
+   * The item value is used in the `value` property of the combo box,
+   * to provide the form value.
+   * - `autoOpenDisabled`: Set true to prevent the overlay from opening automatically.
+   * - `_focusedIndex`: undefined
+   * - `_toggleElement`: undefined
+   * - `_dropdownItems`: Set of items to be rendered in the dropdown.
+   * - `_overlayOpened`: Whether the overlay should be opened.
+   * - `pattern`: A regular expression that the value is checked against.
+   * The pattern must match the entire value, not just some subset.
    * - `allowedCharPattern`: A pattern matched against individual characters the user inputs.
    *
    * When set, the field will prevent:
@@ -21553,9 +21257,11 @@ export type CustomElementsSolidJs = {
    * in the Shadow DOM or in the light DOM. In any way, a reference to
    * the clear icon element should be provided via the `clearElement` getter.
    * - `dir`: undefined
-   * - `_inputElementValue`: undefined (property only)
+   * - `_boundOverlaySelectedItemChanged`: undefined (property only)
+   * - `_boundOnClearButtonMouseDown`: undefined (property only)
    * - `_boundOnClick`: undefined (property only)
-   * - `_boundOnScroll`: undefined (property only)
+   * - `_boundOnOverlayTouchAction`: undefined (property only)
+   * - `_boundOnTouchend`: undefined (property only)
    * - `_boundOnPaste`: undefined (property only)
    * - `_boundOnDrop`: undefined (property only)
    * - `_boundOnBeforeInput`: undefined (property only)
@@ -21568,32 +21274,36 @@ 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.
+   * - `custom-value-set`: Fired when the user sets a custom value.
+   * - `filter-changed`: Fired when the `filter` property changes.
    * - `invalid-changed`: Fired when the `invalid` property changes.
    * - `opened-changed`: Fired when the `opened` property changes.
+   * - `selected-item-changed`: Fired when the `selectedItem` property changes.
    * - `value-changed`: Fired when the `value` property changes.
    * - `validated`: Fired whenever the field is validated.
+   * - `vaadin-combo-box-dropdown-opened`: undefined
+   * - `vaadin-combo-box-dropdown-closed`: 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)
+   * - `clearCache() => void`: Clears the cached pages and reloads data from dataprovider when needed.
+   * - `requestContentUpdate() => void`: Requests an update for the content of items.
+   * While performing the update, it invokes the renderer (passed in the `renderer` property) once an item.
    *
-   * Override the `checkValidity` method for custom validations.
+   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
+   * - `cancel() => void`: Reverts back to original value.
+   * - `open() => void`: Opens the dropdown list.
+   * - `close() => void`: Closes the dropdown list.
    * - `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> &
-      BaseEvents
+  "vaadin-combo-box": Partial<
+    ComboBoxProps & ComboBoxSolidJsProps & BaseProps<ComboBox> & BaseEvents
   >;
 
   /**
@@ -21938,154 +21648,444 @@ export type CustomElementsSolidJs = {
    * };
    * ```
    *
-   * ### Styling
+   * ### 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.
+   * 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
+   *
+   * ```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' }
+   * ];
+   * ```
+   * - `_positionTarget`: undefined
+   * - `dir`: undefined
+   * - `_boundOpen`: undefined (property only)
+   * - `_boundClose`: undefined (property only)
+   * - `_boundPreventDefault`: undefined (property only)
+   * - `_boundOnGlobalContextMenu`: 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
+   *
+   * 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-context-menu": Partial<
+    ContextMenuProps &
+      ContextMenuSolidJsProps &
+      BaseProps<ContextMenu> &
+      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.
+   *
+   * - `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.
+   *
+   * ```html
+   * <vaadin-date-picker label="Birthday"></vaadin-date-picker>
+   * ```
+   *
+   * ```js
+   * datePicker.value = '2016-03-02';
+   * ```
+   *
+   * 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
+   * `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:
    *
-   * The following shadow DOM parts are available for styling:
+   * Part name             | Description
+   * ----------------------|--------------------
+   * `years-toggle-button` | Fullscreen mode years scroller toggle
+   * `toolbar`             | Toolbar with slotted buttons
    *
-   * Part name        | Description
-   * -----------------|-------------------------------------------
-   * `backdrop`       | Backdrop of the overlay
-   * `overlay`        | The overlay container
-   * `content`        | The overlay content
+   * The following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:
    *
-   * ### Custom CSS Properties
+   * 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                   | 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
+   * 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
    *
-   * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+   * In order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:
    *
-   * ### Internal components
+   * Part name             | Description
+   * ----------------------|--------------------
+   * `year-number`         | Year number
+   * `year-separator`      | Year separator
    *
-   * When using `items` API the following internal components are themable:
+   * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
    *
-   * - `<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).
+   * ### Change events
    *
-   * The `<vaadin-context-menu-item>` sub-menu elements have the following additional state attributes
-   * on top of the built-in `<vaadin-item>` state attributes:
+   * 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:
    *
-   * Attribute  | Description
-   * ---------- |-------------
-   * `expanded` | Expanded parent item.
+   * 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.
    *
-   * - `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:
+   * - `_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.
    *
-   * - `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
+   * 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
-   * - `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.
+   * - `min`: The earliest date that can be selected. All earlier dates will be disabled.
    *
-   * The items API can't be used together with a renderer!
+   * 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.
    *
-   * #### Example
+   * 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.
    *
-   * ```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' }
-   * ];
-   * ```
-   * - `_positionTarget`: undefined
+   * Should be overridden by subclasses to provide a custom JSDoc with the
+   * default I18N properties.
+   * - `__effectiveI18n`: undefined
+   * - `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.
+   *
+   * It is up to the component to choose where to place the clear icon:
+   * in the Shadow DOM or in the light DOM. In any way, a reference to
+   * the clear icon element should be provided via the `clearElement` getter.
    * - `dir`: undefined
-   * - `_boundOpen`: undefined (property only)
-   * - `_boundClose`: undefined (property only)
-   * - `_boundPreventDefault`: undefined (property only)
-   * - `_boundOnGlobalContextMenu`: undefined (property only)
-   * - `__itemsOutsideClickListener`: undefined (property only)
+   * - `_inputElementValue`: undefined (property only)
+   * - `_boundOnClick`: undefined (property only)
+   * - `_boundOnScroll`: 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.
    *
+   * - `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.
-   * - `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.
+   * - `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 menu overlay.
-   * While performing the update, it invokes the renderer passed in the `renderer` property.
+   * - `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.
-   * - `close() => void`: Closes the overlay.
-   * - `open(e: !Event | undefined) => void`: Opens the overlay.
+   * 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-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 &
-      ContextMenuSolidJsProps &
-      BaseProps<ContextMenu> &
+  "vaadin-date-picker": Partial<
+    DatePickerProps &
+      DatePickerSolidJsProps &
+      BaseProps<DatePicker> &
       BaseEvents
   >;