@openremote/or-vaadin-components 1.30.0 → 1.31.0-snapshot.20260903081447

package/custom-elements-jsx.d.ts

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