@vaadin/time-picker 25.0.0-alpha2 → 25.0.0-alpha4

package/package.json

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

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';
@@ -26,7 +27,7 @@ const MAX_ALLOWED_TIME = '23:59:59.999';
  * @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 +46,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 +97,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 +141,6 @@ export const TimePickerMixin = (superClass) =>
           observer: '__comboBoxValueChanged',
         },
 
-        /** @private */
-        __dropdownItems: {
-          type: Array,
-          sync: true,
-        },
-
         /** @private */
         _inputContainer: {
           type: Object,
@@ -184,7 +150,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 +161,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 +216,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 +225,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 +388,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 +401,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 +514,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 +630,6 @@ export const TimePickerMixin = (superClass) =>
       }
     }
 
-    /** @private */
-    __onComboBoxChange(event) {
-      event.stopPropagation();
-      this.__commitValueChange();
-    }
-
     /** @private */
     __updateValue(obj) {
       const timeString = formatISOTime(validateTime(obj, this.step)) || '';
@@ -594,6 +644,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 +666,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.

package/src/vaadin-time-picker.js

@@ -4,13 +4,16 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/input-container/src/vaadin-input-container.js';
-import './vaadin-time-picker-combo-box.js';
+import './vaadin-time-picker-item.js';
+import './vaadin-time-picker-overlay.js';
+import './vaadin-time-picker-scroller.js';
 import { html, LitElement } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-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 { timePickerStyles } from './styles/vaadin-time-picker-core-styles.js';
 import { TimePickerMixin } from './vaadin-time-picker-mixin.js';
@@ -57,7 +60,6 @@ import { TimePickerMixin } from './vaadin-time-picker-mixin.js';
  * 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.
@@ -95,7 +97,7 @@ import { TimePickerMixin } from './vaadin-time-picker-mixin.js';
  * @mixes ThemableMixin
  * @mixes TimePickerMixin
  */
-class TimePicker extends TimePickerMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
+class TimePicker extends TimePickerMixin(CSSInjectionMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement))))) {
   static get is() {
     return 'vaadin-time-picker';
   }
@@ -113,35 +115,18 @@ class TimePicker extends TimePickerMixin(ThemableMixin(ElementMixin(PolylitMixin
           <span part="required-indicator" aria-hidden="true" @click="${this.focus}"></span>
         </div>
 
-        <vaadin-time-picker-combo-box
-          id="comboBox"
-          .filteredItems="${this.__dropdownItems}"
-          .value="${this._comboBoxValue}"
-          .opened="${this.opened}"
-          .disabled="${this.disabled}"
+        <vaadin-input-container
+          part="input-field"
           .readonly="${this.readonly}"
-          .clearButtonVisible="${this.clearButtonVisible}"
-          .autoOpenDisabled="${this.autoOpenDisabled}"
-          .overlayClass="${this.overlayClass}"
-          .positionTarget="${this._inputContainer}"
+          .disabled="${this.disabled}"
+          .invalid="${this.invalid}"
           theme="${ifDefined(this._theme)}"
-          @value-changed="${this.__onComboBoxValueChanged}"
-          @opened-changed="${this.__onComboBoxOpenedChanged}"
-          @change="${this.__onComboBoxChange}"
         >
-          <vaadin-input-container
-            part="input-field"
-            .readonly="${this.readonly}"
-            .disabled="${this.disabled}"
-            .invalid="${this.invalid}"
-            theme="${ifDefined(this._theme)}"
-          >
-            <slot name="prefix" slot="prefix"></slot>
-            <slot name="input"></slot>
-            <div id="clearButton" part="clear-button" slot="suffix" aria-hidden="true"></div>
-            <div id="toggleButton" class="toggle-button" part="toggle-button" slot="suffix" aria-hidden="true"></div>
-          </vaadin-input-container>
-        </vaadin-time-picker-combo-box>
+          <slot name="prefix" slot="prefix"></slot>
+          <slot name="input"></slot>
+          <div id="clearButton" part="clear-button" slot="suffix" aria-hidden="true"></div>
+          <div id="toggleButton" part="toggle-button" slot="suffix" aria-hidden="true"></div>
+        </vaadin-input-container>
 
         <div part="helper-text">
           <slot name="helper"></slot>
@@ -151,18 +136,17 @@ class TimePicker extends TimePickerMixin(ThemableMixin(ElementMixin(PolylitMixin
           <slot name="error-message"></slot>
         </div>
       </div>
-      <slot name="tooltip"></slot>
-    `;
-  }
 
-  /** @private */
-  __onComboBoxOpenedChanged(event) {
-    this.opened = event.detail.value;
-  }
+      <vaadin-time-picker-overlay
+        id="overlay"
+        .opened="${this._overlayOpened}"
+        theme="${ifDefined(this._theme)}"
+        .positionTarget="${this._inputContainer}"
+        no-vertical-overlap
+      ></vaadin-time-picker-overlay>
 
-  /** @private */
-  __onComboBoxValueChanged(event) {
-    this._comboBoxValue = event.detail.value;
+      <slot name="tooltip"></slot>
+    `;
   }
 }
 

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/time-picker",
-  "version": "25.0.0-alpha2",
+  "version": "25.0.0-alpha4",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-time-picker",
-          "description": "`<vaadin-time-picker>` is a Web Component providing a time-selection field.\n\n```html\n<vaadin-time-picker></vaadin-time-picker>\n```\n```js\ntimePicker.value = '14:30';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property                          | Description                | Default\n-----------------------------------------|----------------------------|---------\n`--vaadin-field-default-width`           | Default width of the field | `12em`\n`--vaadin-time-picker-overlay-width`     | Width of the overlay       | `auto`\n`--vaadin-time-picker-overlay-max-height`| Max height of the overlay  | `65vh`\n\n`<vaadin-time-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha2/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name       | Description\n----------------|----------------\n`toggle-button` | The toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description\n----------|------------------------------------------\n`opened`  | Set when the time-picker dropdown is open\n\n### Internal components\n\nIn addition to `<vaadin-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-time-picker-combo-box>` - an internal version of [`<vaadin-combo-box>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha2/#/elements/vaadin-combo-box).\n- `<vaadin-time-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha2/#/elements/vaadin-overlay).\n- `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha2/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha2/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nNote: the `theme` attribute value set on `<vaadin-time-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change             | Event\n:------------------------|:------------------\nempty => parsable        | change\nempty => unparsable      | unparsable-change\nparsable => empty        | change\nparsable => parsable     | change\nparsable => unparsable   | change\nunparsable => empty      | unparsable-change\nunparsable => parsable   | change\nunparsable => unparsable | unparsable-change",
+          "description": "`<vaadin-time-picker>` is a Web Component providing a time-selection field.\n\n```html\n<vaadin-time-picker></vaadin-time-picker>\n```\n```js\ntimePicker.value = '14:30';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property                          | Description                | Default\n-----------------------------------------|----------------------------|---------\n`--vaadin-field-default-width`           | Default width of the field | `12em`\n`--vaadin-time-picker-overlay-width`     | Width of the overlay       | `auto`\n`--vaadin-time-picker-overlay-max-height`| Max height of the overlay  | `65vh`\n\n`<vaadin-time-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha4/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name       | Description\n----------------|----------------\n`toggle-button` | The toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description\n----------|------------------------------------------\n`opened`  | Set when the time-picker dropdown is open\n\n### Internal components\n\nIn addition to `<vaadin-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-time-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha4/#/elements/vaadin-overlay).\n- `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha4/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha4/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nNote: the `theme` attribute value set on `<vaadin-time-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change             | Event\n:------------------------|:------------------\nempty => parsable        | change\nempty => unparsable      | unparsable-change\nparsable => empty        | change\nparsable => parsable     | change\nparsable => unparsable   | change\nunparsable => empty      | unparsable-change\nunparsable => parsable   | change\nunparsable => unparsable | unparsable-change",
           "attributes": [
             {
               "name": "disabled",
@@ -217,17 +217,6 @@
                 ]
               }
             },
-            {
-              "name": "opened",
-              "description": "True if the dropdown is open, false otherwise.",
-              "value": {
-                "type": [
-                  "boolean",
-                  "null",
-                  "undefined"
-                ]
-              }
-            },
             {
               "name": "min",
               "description": "Minimum time allowed.\n\nSupported time formats are in ISO 8601:\n- `hh:mm`\n- `hh:mm:ss`\n- `hh:mm:ss.fff`",
@@ -257,28 +246,6 @@
                 ]
               }
             },
-            {
-              "name": "auto-open-disabled",
-              "description": "Set true to prevent the overlay from opening automatically.",
-              "value": {
-                "type": [
-                  "boolean",
-                  "null",
-                  "undefined"
-                ]
-              }
-            },
-            {
-              "name": "overlay-class",
-              "description": "A space-delimited list of CSS class names to set on the overlay element.",
-              "value": {
-                "type": [
-                  "string",
-                  "null",
-                  "undefined"
-                ]
-              }
-            },
             {
               "name": "theme",
               "description": "The theme variants to apply to the component.",
@@ -500,17 +467,6 @@
                   ]
                 }
               },
-              {
-                "name": "opened",
-                "description": "True if the dropdown is open, false otherwise.",
-                "value": {
-                  "type": [
-                    "boolean",
-                    "null",
-                    "undefined"
-                  ]
-                }
-              },
               {
                 "name": "min",
                 "description": "Minimum time allowed.\n\nSupported time formats are in ISO 8601:\n- `hh:mm`\n- `hh:mm:ss`\n- `hh:mm:ss.fff`",
@@ -540,28 +496,6 @@
                   ]
                 }
               },
-              {
-                "name": "autoOpenDisabled",
-                "description": "Set true to prevent the overlay from opening automatically.",
-                "value": {
-                  "type": [
-                    "boolean",
-                    "null",
-                    "undefined"
-                  ]
-                }
-              },
-              {
-                "name": "overlayClass",
-                "description": "A space-delimited list of CSS class names to set on the overlay element.",
-                "value": {
-                  "type": [
-                    "string",
-                    "null",
-                    "undefined"
-                  ]
-                }
-              },
               {
                 "name": "i18n",
                 "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure:\n\n```\n{\n  // A function to format given `Object` as\n  // time string. Object is in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`\n  formatTime: (time) => {\n    // returns a string representation of the given\n    // object in `hh` / 'hh:mm' / 'hh:mm:ss' / 'hh:mm:ss.fff' - formats\n  },\n\n  // A function to parse the given text to an `Object` in the format\n  // `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`.\n  // Must properly parse (at least) text\n  // formatted by `formatTime`.\n  parseTime: text => {\n    // Parses a string in object/string that can be formatted by`formatTime`.\n  }\n}\n```\n\nBoth `formatTime` and `parseTime` need to be implemented\nto ensure the component works properly.",
@@ -592,10 +526,6 @@
               {
                 "name": "value-changed",
                 "description": "Fired when the `value` property changes."
-              },
-              {
-                "name": "opened-changed",
-                "description": "Fired when the `opened` property changes."
               }
             ]
           }

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/time-picker",
-  "version": "25.0.0-alpha2",
+  "version": "25.0.0-alpha4",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-time-picker",
-          "description": "`<vaadin-time-picker>` is a Web Component providing a time-selection field.\n\n```html\n<vaadin-time-picker></vaadin-time-picker>\n```\n```js\ntimePicker.value = '14:30';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property                          | Description                | Default\n-----------------------------------------|----------------------------|---------\n`--vaadin-field-default-width`           | Default width of the field | `12em`\n`--vaadin-time-picker-overlay-width`     | Width of the overlay       | `auto`\n`--vaadin-time-picker-overlay-max-height`| Max height of the overlay  | `65vh`\n\n`<vaadin-time-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha2/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name       | Description\n----------------|----------------\n`toggle-button` | The toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description\n----------|------------------------------------------\n`opened`  | Set when the time-picker dropdown is open\n\n### Internal components\n\nIn addition to `<vaadin-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-time-picker-combo-box>` - an internal version of [`<vaadin-combo-box>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha2/#/elements/vaadin-combo-box).\n- `<vaadin-time-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha2/#/elements/vaadin-overlay).\n- `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha2/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha2/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nNote: the `theme` attribute value set on `<vaadin-time-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change             | Event\n:------------------------|:------------------\nempty => parsable        | change\nempty => unparsable      | unparsable-change\nparsable => empty        | change\nparsable => parsable     | change\nparsable => unparsable   | change\nunparsable => empty      | unparsable-change\nunparsable => parsable   | change\nunparsable => unparsable | unparsable-change",
+          "description": "`<vaadin-time-picker>` is a Web Component providing a time-selection field.\n\n```html\n<vaadin-time-picker></vaadin-time-picker>\n```\n```js\ntimePicker.value = '14:30';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property                          | Description                | Default\n-----------------------------------------|----------------------------|---------\n`--vaadin-field-default-width`           | Default width of the field | `12em`\n`--vaadin-time-picker-overlay-width`     | Width of the overlay       | `auto`\n`--vaadin-time-picker-overlay-max-height`| Max height of the overlay  | `65vh`\n\n`<vaadin-time-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha4/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name       | Description\n----------------|----------------\n`toggle-button` | The toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description\n----------|------------------------------------------\n`opened`  | Set when the time-picker dropdown is open\n\n### Internal components\n\nIn addition to `<vaadin-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-time-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha4/#/elements/vaadin-overlay).\n- `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha4/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha4/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nNote: the `theme` attribute value set on `<vaadin-time-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change             | Event\n:------------------------|:------------------\nempty => parsable        | change\nempty => unparsable      | unparsable-change\nparsable => empty        | change\nparsable => parsable     | change\nparsable => unparsable   | change\nunparsable => empty      | unparsable-change\nunparsable => parsable   | change\nunparsable => unparsable | unparsable-change",
           "extension": true,
           "attributes": [
             {
@@ -75,20 +75,6 @@
                 "kind": "expression"
               }
             },
-            {
-              "name": "?opened",
-              "description": "True if the dropdown is open, false otherwise.",
-              "value": {
-                "kind": "expression"
-              }
-            },
-            {
-              "name": "?autoOpenDisabled",
-              "description": "Set true to prevent the overlay from opening automatically.",
-              "value": {
-                "kind": "expression"
-              }
-            },
             {
               "name": ".label",
               "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
@@ -187,13 +173,6 @@
                 "kind": "expression"
               }
             },
-            {
-              "name": ".overlayClass",
-              "description": "A space-delimited list of CSS class names to set on the overlay element.",
-              "value": {
-                "kind": "expression"
-              }
-            },
             {
               "name": ".i18n",
               "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure:\n\n```\n{\n  // A function to format given `Object` as\n  // time string. Object is in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`\n  formatTime: (time) => {\n    // returns a string representation of the given\n    // object in `hh` / 'hh:mm' / 'hh:mm:ss' / 'hh:mm:ss.fff' - formats\n  },\n\n  // A function to parse the given text to an `Object` in the format\n  // `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`.\n  // Must properly parse (at least) text\n  // formatted by `formatTime`.\n  parseTime: text => {\n    // Parses a string in object/string that can be formatted by`formatTime`.\n  }\n}\n```\n\nBoth `formatTime` and `parseTime` need to be implemented\nto ensure the component works properly.",
@@ -235,13 +214,6 @@
               "value": {
                 "kind": "expression"
               }
-            },
-            {
-              "name": "@opened-changed",
-              "description": "Fired when the `opened` property changes.",
-              "value": {
-                "kind": "expression"
-              }
             }
           ]
         }

package/src/vaadin-time-picker-combo-box.js

@@ -1,92 +0,0 @@
-/**
- * @license
- * Copyright (c) 2018 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import './vaadin-time-picker-item.js';
-import './vaadin-time-picker-overlay.js';
-import './vaadin-time-picker-scroller.js';
-import { css, html, LitElement } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { ComboBoxMixin } from '@vaadin/combo-box/src/vaadin-combo-box-mixin.js';
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-/**
- * An element used internally by `<vaadin-time-picker>`. Not intended to be used separately.
- *
- * @customElement
- * @extends HTMLElement
- * @mixes ComboBoxMixin
- * @mixes ThemableMixin
- * @private
- */
-class TimePickerComboBox extends ComboBoxMixin(ThemableMixin(PolylitMixin(LitElement))) {
-  static get is() {
-    return 'vaadin-time-picker-combo-box';
-  }
-
-  static get styles() {
-    return css`
-      :host([opened]) {
-        pointer-events: auto;
-      }
-    `;
-  }
-
-  static get properties() {
-    return {
-      positionTarget: {
-        type: Object,
-      },
-    };
-  }
-
-  /**
-   * Tag name prefix used by scroller and items.
-   * @protected
-   * @return {string}
-   */
-  get _tagNamePrefix() {
-    return 'vaadin-time-picker';
-  }
-
-  /**
-   * Reference to the clear button element.
-   * @protected
-   * @return {!HTMLElement}
-   */
-  get clearElement() {
-    return this.querySelector('[part="clear-button"]');
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <slot></slot>
-
-      <vaadin-time-picker-overlay
-        id="overlay"
-        .opened="${this._overlayOpened}"
-        ?loading="${this.loading}"
-        theme="${ifDefined(this._theme)}"
-        .positionTarget="${this.positionTarget}"
-        .restoreFocusNode="${this.inputElement}"
-        no-vertical-overlap
-      ></vaadin-time-picker-overlay>
-    `;
-  }
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this.allowCustomValue = true;
-    this._toggleElement = this.querySelector('.toggle-button');
-
-    // See https://github.com/vaadin/vaadin-time-picker/issues/145
-    this.setAttribute('dir', 'ltr');
-  }
-}
-
-defineCustomElement(TimePickerComboBox);