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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/time-picker",
-  "version": "25.0.0-alpha2",
+  "version": "25.0.0-alpha21",
   "publishConfig": {
     "access": "public"
   },
@@ -21,9 +21,6 @@
   "type": "module",
   "files": [
     "src",
-    "!src/styles/*-base-styles.d.ts",
-    "!src/styles/*-base-styles.js",
-    "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
     "web-types.json",
@@ -37,25 +34,25 @@
   ],
   "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-alpha21",
+    "@vaadin/component-base": "25.0.0-alpha21",
+    "@vaadin/field-base": "25.0.0-alpha21",
+    "@vaadin/input-container": "25.0.0-alpha21",
+    "@vaadin/item": "25.0.0-alpha21",
+    "@vaadin/overlay": "25.0.0-alpha21",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha21",
     "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-alpha21",
+    "@vaadin/test-runner-commands": "25.0.0-alpha21",
     "@vaadin/testing-helpers": "^2.0.0",
-    "sinon": "^18.0.0"
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha21",
+    "sinon": "^21.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "67ffcd5355cf21ce1b5039c598525109fc4c164b"
+  "gitHead": "8fb9e9710c01449edf623a1aaac4655cdc11a933"
 }

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

@@ -3,11 +3,15 @@
  * Copyright (c) 2018 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@vaadin/component-base/src/style-props.js';
+import '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
 
 export const timePickerStyles = css`
-  [part='toggle-button']::before {
+  :host([opened]) {
+    pointer-events: auto;
+  }
+
+  [part~='toggle-button']::before {
     mask-image: var(--_vaadin-icon-clock);
   }
 

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-base-styles.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-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(
+  ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),
+) {
   static get is() {
     return 'vaadin-time-picker-item';
   }

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 { I18nMixinClass } from '@vaadin/component-base/src/i18n-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';
@@ -21,8 +23,9 @@ import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.j
 import type { TimePickerTime } from './vaadin-time-picker-helper.js';
 
 export interface TimePickerI18n {
-  parseTime(time: string): TimePickerTime | undefined;
-  formatTime(time: TimePickerTime | undefined): string;
+  parseTime?(time: string): TimePickerTime | undefined;
+
+  formatTime?(time: TimePickerTime | undefined): string;
 }
 
 /**
@@ -31,11 +34,13 @@ export interface TimePickerI18n {
 export declare function TimePickerMixin<T extends Constructor<HTMLElement>>(
   base: T,
 ): Constructor<ClearButtonMixinClass> &
+  Constructor<ComboBoxBaseMixinClass> &
   Constructor<DelegateFocusMixinClass> &
   Constructor<DelegateStateMixinClass> &
   Constructor<DisabledMixinClass> &
   Constructor<FieldMixinClass> &
   Constructor<FocusMixinClass> &
+  Constructor<I18nMixinClass<TimePickerI18n>> &
   Constructor<InputConstraintsMixinClass> &
   Constructor<InputControlMixinClass> &
   Constructor<InputMixinClass> &
@@ -58,11 +63,6 @@ export declare class TimePickerMixinClass {
    */
   value: string;
 
-  /**
-   * True if the dropdown is open, false otherwise.
-   */
-  opened: boolean;
-
   /**
    * Minimum time allowed.
    *
@@ -102,26 +102,13 @@ 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
-   * _i18n_ object or just the property you want to modify.
+   * The object used to localize this component. To change the default
+   * localization, replace this with an object that provides both the
+   * time parsing and formatting functions.
    *
    * The object has the following JSON structure:
    *
-   * ```
+   * ```js
    * {
    *   // A function to format given `Object` as
    *   // time string. Object is in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`
@@ -140,18 +127,8 @@ export declare class TimePickerMixinClass {
    * }
    * ```
    *
-   * Both `formatTime` and `parseTime` need to be implemented
-   * to ensure the component works properly.
+   * NOTE: `formatTime` and `parseTime` must be implemented in a
+   * compatible manner to ensure the component works properly.
    */
   i18n: TimePickerI18n;
-
-  /**
-   * Opens the dropdown list.
-   */
-  open(): void;
-
-  /**
-   * Closes the dropdown list.
-   */
-  close(): void;
 }