@vaadin/time-picker 25.0.0-alpha3 → 25.0.0-alpha5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/time-picker",
-  "version": "25.0.0-alpha3",
+  "version": "25.0.0-alpha5",
   "publishConfig": {
     "access": "public"
   },
@@ -37,19 +37,19 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/combo-box": "25.0.0-alpha3",
-    "@vaadin/component-base": "25.0.0-alpha3",
-    "@vaadin/field-base": "25.0.0-alpha3",
-    "@vaadin/input-container": "25.0.0-alpha3",
-    "@vaadin/item": "25.0.0-alpha3",
-    "@vaadin/overlay": "25.0.0-alpha3",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha3",
+    "@vaadin/combo-box": "25.0.0-alpha5",
+    "@vaadin/component-base": "25.0.0-alpha5",
+    "@vaadin/field-base": "25.0.0-alpha5",
+    "@vaadin/input-container": "25.0.0-alpha5",
+    "@vaadin/item": "25.0.0-alpha5",
+    "@vaadin/overlay": "25.0.0-alpha5",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha5",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha5",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha3",
-    "@vaadin/test-runner-commands": "25.0.0-alpha3",
+    "@vaadin/chai-plugins": "25.0.0-alpha5",
+    "@vaadin/test-runner-commands": "25.0.0-alpha5",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
@@ -57,5 +57,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "8367dd20a47f53ca5589ad349a8e286ec2673055"
+  "gitHead": "7dc87bb2a3cae81ed53259fa10b58f990d50c6fd"
 }

package/src/styles/vaadin-time-picker-base-styles.js

@@ -7,17 +7,23 @@ import '@vaadin/component-base/src/style-props.js';
 import { css } from 'lit';
 
 export const timePickerStyles = css`
-  [part='toggle-button']::before {
-    mask-image: var(--_vaadin-icon-clock);
-  }
+  @layer base {
+    :host([opened]) {
+      pointer-events: auto;
+    }
 
-  /* See https://github.com/vaadin/vaadin-time-picker/issues/145 */
-  :host([dir='rtl']) [part='input-field'] {
-    direction: ltr;
-  }
+    [part='toggle-button']::before {
+      mask-image: var(--_vaadin-icon-clock);
+    }
+
+    /* See https://github.com/vaadin/vaadin-time-picker/issues/145 */
+    :host([dir='rtl']) [part='input-field'] {
+      direction: ltr;
+    }
 
-  :host([dir='rtl']) [part='input-field'] ::slotted(input)::placeholder {
-    direction: rtl;
-    text-align: left;
+    :host([dir='rtl']) [part='input-field'] ::slotted(input)::placeholder {
+      direction: rtl;
+      text-align: left;
+    }
   }
 `;

package/src/styles/vaadin-time-picker-core-styles.js

@@ -6,6 +6,10 @@
 import { css } from 'lit';
 
 export const timePickerStyles = css`
+  :host([opened]) {
+    pointer-events: auto;
+  }
+
   /* See https://github.com/vaadin/vaadin-time-picker/issues/145 */
   :host([dir='rtl']) [part='input-field'] {
     direction: ltr;

package/src/styles/vaadin-time-picker-overlay-base-styles.js

@@ -6,17 +6,19 @@
 import { css } from 'lit';
 
 export const timePickerOverlayStyles = css`
-  :host {
-    --vaadin-item-checkmark-display: block;
-  }
+  @layer base {
+    :host {
+      --vaadin-item-checkmark-display: block;
+    }
 
-  #overlay {
-    width: var(--vaadin-time-picker-overlay-width, var(--_vaadin-time-picker-overlay-default-width, auto));
-  }
+    #overlay {
+      width: var(--vaadin-time-picker-overlay-width, var(--_vaadin-time-picker-overlay-default-width, auto));
+    }
 
-  [part='content'] {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
+    [part='content'] {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
   }
 `;

package/src/vaadin-time-picker-item.js

@@ -8,7 +8,8 @@ import { ComboBoxItemMixin } from '@vaadin/combo-box/src/vaadin-combo-box-item-m
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { itemStyles } from '@vaadin/item/src/vaadin-item-core-styles.js';
+import { itemStyles } from '@vaadin/item/src/styles/vaadin-item-core-styles.js';
+import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
@@ -38,7 +39,9 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * @mixes DirMixin
  * @private
  */
-export class TimePickerItem extends ComboBoxItemMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))) {
+export class TimePickerItem extends ComboBoxItemMixin(
+  CSSInjectionMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))),
+) {
   static get is() {
     return 'vaadin-time-picker-item';
   }
@@ -56,6 +59,17 @@ export class TimePickerItem extends ComboBoxItemMixin(ThemableMixin(DirMixin(Pol
       </div>
     `;
   }
+
+  /**
+   * Override method from `ComboBoxItemMixin` to enforce
+   * `dir` attribute to be set to `ltr` on the item.
+   * @protected
+   * @override
+   */
+  _getHostDir() {
+    // See https://github.com/vaadin/vaadin-time-picker/issues/145
+    return 'ltr';
+  }
 }
 
 defineCustomElement(TimePickerItem);

package/src/vaadin-time-picker-mixin.d.ts

@@ -8,7 +8,9 @@ import type { DelegateFocusMixinClass } from '@vaadin/a11y-base/src/delegate-foc
 import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
 import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
 import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
+import type { ComboBoxBaseMixinClass } from '@vaadin/combo-box/src/vaadin-combo-box-base-mixin.js';
 import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
+import type { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import type { SlotStylesMixinClass } from '@vaadin/component-base/src/slot-styles-mixin.js';
 import type { ClearButtonMixinClass } from '@vaadin/field-base/src/clear-button-mixin.js';
 import type { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
@@ -31,6 +33,7 @@ export interface TimePickerI18n {
 export declare function TimePickerMixin<T extends Constructor<HTMLElement>>(
   base: T,
 ): Constructor<ClearButtonMixinClass> &
+  Constructor<ComboBoxBaseMixinClass> &
   Constructor<DelegateFocusMixinClass> &
   Constructor<DelegateStateMixinClass> &
   Constructor<DisabledMixinClass> &
@@ -41,6 +44,7 @@ export declare function TimePickerMixin<T extends Constructor<HTMLElement>>(
   Constructor<InputMixinClass> &
   Constructor<KeyboardMixinClass> &
   Constructor<LabelMixinClass> &
+  Constructor<OverlayClassMixinClass> &
   Constructor<PatternMixinClass> &
   Constructor<SlotStylesMixinClass> &
   Constructor<TimePickerMixinClass> &
@@ -58,11 +62,6 @@ export declare class TimePickerMixinClass {
    */
   value: string;
 
-  /**
-   * True if the dropdown is open, false otherwise.
-   */
-  opened: boolean;
-
   /**
    * Minimum time allowed.
    *
@@ -101,19 +100,6 @@ export declare class TimePickerMixinClass {
    */
   step: number | null | undefined;
 
-  /**
-   * Set true to prevent the overlay from opening automatically.
-   * @attr {boolean} auto-open-disabled
-   */
-  autoOpenDisabled: boolean | null | undefined;
-
-  /**
-   * A space-delimited list of CSS class names to set on the overlay element.
-   *
-   * @attr {string} overlay-class
-   */
-  overlayClass: string;
-
   /**
    * The object used to localize this component.
    * To change the default localization, replace the entire
@@ -144,14 +130,4 @@ export declare class TimePickerMixinClass {
    * to ensure the component works properly.
    */
   i18n: TimePickerI18n;
-
-  /**
-   * Opens the dropdown list.
-   */
-  open(): void;
-
-  /**
-   * Closes the dropdown list.
-   */
-  close(): void;
 }

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

@@ -3,6 +3,7 @@
  * Copyright (c) 2018 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { ComboBoxBaseMixin } from '@vaadin/combo-box/src/vaadin-combo-box-base-mixin.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js';
 import { InputController } from '@vaadin/field-base/src/input-controller.js';
@@ -22,11 +23,12 @@ const MAX_ALLOWED_TIME = '23:59:59.999';
  * A mixin providing common time-picker functionality.
  *
  * @polymerMixin
+ * @mixes ComboBoxBaseMixin
  * @mixes InputControlMixin
  * @mixes PatternMixin
  */
 export const TimePickerMixin = (superClass) =>
-  class TimePickerMixinClass extends PatternMixin(InputControlMixin(superClass)) {
+  class TimePickerMixinClass extends PatternMixin(ComboBoxBaseMixin(InputControlMixin(superClass))) {
     static get properties() {
       return {
         /**
@@ -45,17 +47,6 @@ export const TimePickerMixin = (superClass) =>
           sync: true,
         },
 
-        /**
-         * True if the dropdown is open, false otherwise.
-         */
-        opened: {
-          type: Boolean,
-          notify: true,
-          value: false,
-          reflectToAttribute: true,
-          sync: true,
-        },
-
         /**
          * Minimum time allowed.
          *
@@ -107,24 +98,6 @@ export const TimePickerMixin = (superClass) =>
           sync: true,
         },
 
-        /**
-         * Set true to prevent the overlay from opening automatically.
-         * @attr {boolean} auto-open-disabled
-         */
-        autoOpenDisabled: {
-          type: Boolean,
-          sync: true,
-        },
-
-        /**
-         * A space-delimited list of CSS class names to set on the overlay element.
-         *
-         * @attr {string} overlay-class
-         */
-        overlayClass: {
-          type: String,
-        },
-
         /**
          * The object used to localize this component.
          * To change the default localization, replace the entire
@@ -169,12 +142,6 @@ export const TimePickerMixin = (superClass) =>
           observer: '__comboBoxValueChanged',
         },
 
-        /** @private */
-        __dropdownItems: {
-          type: Array,
-          sync: true,
-        },
-
         /** @private */
         _inputContainer: {
           type: Object,
@@ -184,7 +151,9 @@ export const TimePickerMixin = (superClass) =>
 
     static get observers() {
       return [
-        '__updateAriaAttributes(__dropdownItems, opened, inputElement)',
+        '_openedOrItemsChanged(opened, _dropdownItems)',
+        '_updateScroller(opened, _dropdownItems, _focusedIndex, _theme)',
+        '__updateAriaAttributes(_dropdownItems, opened, inputElement)',
         '__updateDropdownItems(i18n, min, max, step)',
       ];
     }
@@ -193,6 +162,15 @@ export const TimePickerMixin = (superClass) =>
       return [...super.constraints, 'min', 'max'];
     }
 
+    /**
+     * Tag name prefix used by `ComboBoxBaseMixin` for scroller and items.
+     * @protected
+     * @return {string}
+     */
+    get _tagNamePrefix() {
+      return 'vaadin-time-picker';
+    }
+
     /**
      * Used by `ClearButtonMixin` as a reference to the clear button element.
      * @protected
@@ -239,6 +217,7 @@ export const TimePickerMixin = (superClass) =>
       );
       this.addController(new LabelledInputController(this.inputElement, this._labelController));
       this._inputContainer = this.shadowRoot.querySelector('[part~="input-field"]');
+      this._toggleElement = this.$.toggleButton;
 
       this._tooltipController = new TooltipController(this);
       this._tooltipController.setShouldShow((timePicker) => !timePicker.opened);
@@ -247,47 +226,136 @@ export const TimePickerMixin = (superClass) =>
       this.addController(this._tooltipController);
     }
 
+    /** @protected */
+    updated(props) {
+      super.updated(props);
+
+      // Update selected item in the scroller
+      if (props.has('_comboBoxValue') && this._dropdownItems) {
+        this._scroller.selectedItem = this._dropdownItems.find((item) => item.value === this._comboBoxValue);
+      }
+    }
+
     /**
-     * Override method inherited from `InputMixin` to forward the input to combo-box.
+     * Returns true if the current input value satisfies all constraints (if any).
+     * You can override this method for custom validations.
+     *
+     * @return {boolean} True if the value is valid
+     */
+    checkValidity() {
+      return !!(
+        this.inputElement.checkValidity() &&
+        (!this.value || this._timeAllowed(this.i18n.parseTime(this.value))) &&
+        (!this._comboBoxValue || this.i18n.parseTime(this._comboBoxValue))
+      );
+    }
+
+    /**
+     * Override method from `ComboBoxBaseMixin` to handle item label path.
      * @protected
      * @override
      */
-    _inputElementChanged(input) {
-      super._inputElementChanged(input);
+    _getItemLabel(item) {
+      return item ? item.label : '';
+    }
 
-      if (input) {
-        this.$.comboBox._setInputElement(input);
+    /** @private */
+    _updateScroller(opened, items, focusedIndex, theme) {
+      if (opened) {
+        this._scroller.style.maxHeight =
+          getComputedStyle(this).getPropertyValue(`--${this._tagNamePrefix}-overlay-max-height`) || '65vh';
       }
+
+      this._scroller.setProperties({
+        items: opened ? items : [],
+        opened,
+        focusedIndex,
+        theme,
+      });
+    }
+
+    /** @private */
+    _openedOrItemsChanged(opened, items) {
+      // Close the overlay if there are no items to display.
+      this._overlayOpened = opened && !!(items && items.length);
+    }
+
+    /**
+     * Override method from `ComboBoxBaseMixin` to commit value on overlay closing.
+     * @protected
+     * @override
+     */
+    _onClosed() {
+      this._commitValue();
+    }
+
+    /**
+     * Override method from `ComboBoxBaseMixin` to handle Escape pres..
+     * @protected
+     * @override
+     */
+    _onEscapeCancel() {
+      this._inputElementValue = this._comboBoxValue;
+      this._closeOrCommit();
     }
 
     /**
-     * Opens the dropdown list.
+     * Override method from `ComboBoxBaseMixin` to implement clearing logic.
+     * @protected
+     * @override
+     */
+    _onClearAction() {
+      this._comboBoxValue = '';
+      this._inputElementValue = '';
+
+      this.__commitValueChange();
+    }
+
+    /**
+     * Override method from `ComboBoxBaseMixin` to implement value commit logic.
+     * @protected
+     * @override
      */
-    open() {
-      if (!this.disabled && !this.readonly) {
-        this.opened = true;
+    _commitValue() {
+      if (this._focusedIndex > -1) {
+        // Commit value based on focused index
+        const focusedItem = this._dropdownItems[this._focusedIndex];
+        const itemValue = this._getItemLabel(focusedItem);
+        this._inputElementValue = itemValue;
+        this._comboBoxValue = itemValue;
+        this._focusedIndex = -1;
+      } else if (this._inputElementValue === '' || this._inputElementValue === undefined) {
+        this._comboBoxValue = '';
+      } else {
+        this._comboBoxValue = this._inputElementValue;
       }
+
+      this.__commitValueChange();
+
+      this._clearSelectionRange();
     }
 
     /**
-     * Closes the dropdown list.
+     * Override method from `ComboBoxBaseMixin` to handle loading.
+     * @protected
+     * @override
      */
-    close() {
-      this.opened = false;
+    _closeOrCommit() {
+      if (!this.opened) {
+        this._commitValue();
+      } else {
+        this.close();
+      }
     }
 
     /**
-     * Returns true if the current input value satisfies all constraints (if any).
-     * You can override this method for custom validations.
-     *
-     * @return {boolean} True if the value is valid
+     * Override method from `ComboBoxBaseMixin` to handle reverting value.
+     * @protected
+     * @override
      */
-    checkValidity() {
-      return !!(
-        this.inputElement.checkValidity() &&
-        (!this.value || this._timeAllowed(this.i18n.parseTime(this.value))) &&
-        (!this._comboBoxValue || this.i18n.parseTime(this._comboBoxValue))
-      );
+    _revertInputValue() {
+      this._inputElementValue = this._comboBoxValue;
+      this._clearSelectionRange();
     }
 
     /**
@@ -321,7 +389,7 @@ export const TimePickerMixin = (superClass) =>
     _onKeyDown(e) {
       super._onKeyDown(e);
 
-      if (this.readonly || this.disabled || this.__dropdownItems.length) {
+      if (this.readonly || this.disabled || this._dropdownItems.length) {
         return;
       }
 
@@ -334,17 +402,6 @@ export const TimePickerMixin = (superClass) =>
       }
     }
 
-    /**
-     * Override an event listener from `KeyboardMixin`.
-     * Do not call `super` in order to override clear
-     * button logic defined in `InputControlMixin`.
-     * @param {Event} event
-     * @protected
-     */
-    _onEscape() {
-      // Do nothing, the internal combo-box handles Escape.
-    }
-
     /** @private */
     __onArrowPressWithStep(step) {
       const objWithStep = this.__addStep(this.__getMsec(this.__memoValue), step, true);
@@ -458,7 +515,7 @@ export const TimePickerMixin = (superClass) =>
       const maxTimeObj = validateTime(parseISOTime(max || MAX_ALLOWED_TIME), step);
       const maxSec = this.__getSec(maxTimeObj);
 
-      this.__dropdownItems = this.__generateDropdownList(minSec, maxSec, step);
+      this._dropdownItems = this.__generateDropdownList(minSec, maxSec, step);
 
       if (step !== this.__oldStep) {
         this.__oldStep = step;
@@ -574,12 +631,6 @@ export const TimePickerMixin = (superClass) =>
       }
     }
 
-    /** @private */
-    __onComboBoxChange(event) {
-      event.stopPropagation();
-      this.__commitValueChange();
-    }
-
     /** @private */
     __updateValue(obj) {
       const timeString = formatISOTime(validateTime(obj, this.step)) || '';
@@ -594,6 +645,7 @@ export const TimePickerMixin = (superClass) =>
     /** @private */
     __updateInputValue(obj) {
       const timeString = this.i18n.formatTime(validateTime(obj, this.step)) || '';
+      this._inputElementValue = timeString;
       this._comboBoxValue = timeString;
     }
 
@@ -615,22 +667,44 @@ export const TimePickerMixin = (superClass) =>
     }
 
     /**
-     * Override method inherited from `InputControlMixin`.
+     * Override method from `ComboBoxBaseMixin` to deselect
+     * dropdown item by requesting content update on clear.
+     * @param {Event} event
      * @protected
      */
-    _onClearButtonClick() {}
+    _onClearButtonClick(event) {
+      event.stopPropagation();
+      super._onClearButtonClick(event);
+
+      if (this.opened) {
+        this._scroller.requestContentUpdate();
+      }
+    }
 
     /**
-     * Override method inherited from `InputConstraintsMixin`.
+     * @param {Event} event
      * @protected
      */
-    _onChange() {}
+    _onHostClick(event) {
+      const path = event.composedPath();
+
+      // Open dropdown only when clicking on the label or input field
+      if (path.includes(this._labelNode) || path.includes(this._inputContainer)) {
+        super._onHostClick(event);
+      }
+    }
 
     /**
-     * Override method inherited from `InputMixin`.
+     * Override an event listener from `InputMixin`.
+     * @param {!Event} event
      * @protected
+     * @override
      */
-    _onInput() {}
+    _onChange(event) {
+      // Suppress the native change event fired on the native input.
+      // We use `__commitValueChange` to fire a custom event.
+      event.stopPropagation();
+    }
 
     /**
      * Fired when the user commits a value change.

package/src/vaadin-time-picker-overlay.js

@@ -8,8 +8,9 @@ import { ComboBoxOverlayMixin } from '@vaadin/combo-box/src/vaadin-combo-box-ove
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-core-styles.js';
 import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
-import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
+import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { timePickerOverlayStyles } from './styles/vaadin-time-picker-overlay-core-styles.js';
 
@@ -24,7 +25,7 @@ import { timePickerOverlayStyles } from './styles/vaadin-time-picker-overlay-cor
  * @private
  */
 export class TimePickerOverlay extends ComboBoxOverlayMixin(
-  OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))),
+  OverlayMixin(DirMixin(CSSInjectionMixin(ThemableMixin(PolylitMixin(LitElement))))),
 ) {
   static get is() {
     return 'vaadin-time-picker-overlay';
@@ -45,6 +46,17 @@ export class TimePickerOverlay extends ComboBoxOverlayMixin(
       </div>
     `;
   }
+
+  /**
+   * Override method from `ComboBoxOverlayMixin` to enforce
+   * `dir` attribute to be set to `ltr` on the overlay.
+   * @protected
+   * @override
+   */
+  _getHostDir() {
+    // See https://github.com/vaadin/vaadin-time-picker/issues/145
+    return 'ltr';
+  }
 }
 
 defineCustomElement(TimePickerOverlay);

package/src/vaadin-time-picker-scroller.js

@@ -7,6 +7,7 @@ import { html, LitElement } from 'lit';
 import { ComboBoxScrollerMixin } from '@vaadin/combo-box/src/vaadin-combo-box-scroller-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
 import { timePickerScrollerStyles } from './styles/vaadin-time-picker-scroller-core-styles.js';
 
 /**
@@ -17,7 +18,7 @@ import { timePickerScrollerStyles } from './styles/vaadin-time-picker-scroller-c
  * @mixes ComboBoxScrollerMixin
  * @private
  */
-export class TimePickerScroller extends ComboBoxScrollerMixin(PolylitMixin(LitElement)) {
+export class TimePickerScroller extends ComboBoxScrollerMixin(CSSInjectionMixin(PolylitMixin(LitElement))) {
   static get is() {
     return 'vaadin-time-picker-scroller';
   }

package/src/vaadin-time-picker.d.ts

@@ -93,7 +93,6 @@ export interface TimePickerEventMap extends HTMLElementEventMap, TimePickerCusto
  * In addition to `<vaadin-time-picker>` itself, the following internal
  * components are themable:
  *
- * - `<vaadin-time-picker-combo-box>` - an internal version of [`<vaadin-combo-box>`](#/elements/vaadin-combo-box).
  * - `<vaadin-time-picker-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
  * - `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
  * - [`<vaadin-input-container>`](#/elements/vaadin-input-container) - an internal element wrapping the input.