@vaadin/time-picker 25.0.0-alpha9 → 25.0.0-beta2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/time-picker",
-  "version": "25.0.0-alpha9",
+  "version": "25.0.0-beta2",
   "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-alpha9",
-    "@vaadin/component-base": "25.0.0-alpha9",
-    "@vaadin/field-base": "25.0.0-alpha9",
-    "@vaadin/input-container": "25.0.0-alpha9",
-    "@vaadin/item": "25.0.0-alpha9",
-    "@vaadin/overlay": "25.0.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha9",
+    "@vaadin/combo-box": "25.0.0-beta2",
+    "@vaadin/component-base": "25.0.0-beta2",
+    "@vaadin/field-base": "25.0.0-beta2",
+    "@vaadin/input-container": "25.0.0-beta2",
+    "@vaadin/item": "25.0.0-beta2",
+    "@vaadin/overlay": "25.0.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-beta2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha9",
-    "@vaadin/test-runner-commands": "25.0.0-alpha9",
+    "@vaadin/chai-plugins": "25.0.0-beta2",
+    "@vaadin/test-runner-commands": "25.0.0-beta2",
     "@vaadin/testing-helpers": "^2.0.0",
-    "sinon": "^18.0.0"
+    "@vaadin/vaadin-lumo-styles": "25.0.0-beta2",
+    "sinon": "^21.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "bbe4720721e0955ffc87a79b412bee38b1f0eb1e"
+  "gitHead": "e078f8371ae266f05c7ca1ec25686cc489c83f24"
 }

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

@@ -3,7 +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 '@vaadin/component-base/src/style-props.js';
+import '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
 
 export const timePickerStyles = css`
@@ -11,7 +11,7 @@ export const timePickerStyles = css`
     pointer-events: auto;
   }
 
-  [part='toggle-button']::before {
+  [part~='toggle-button']::before {
     mask-image: var(--_vaadin-icon-clock);
   }
 

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

@@ -8,7 +8,7 @@ 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/styles/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';
 

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

@@ -10,7 +10,7 @@ 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 { 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';
@@ -23,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;
 }
 
 /**
@@ -39,12 +40,12 @@ export declare function TimePickerMixin<T extends Constructor<HTMLElement>>(
   Constructor<DisabledMixinClass> &
   Constructor<FieldMixinClass> &
   Constructor<FocusMixinClass> &
+  Constructor<I18nMixinClass<TimePickerI18n>> &
   Constructor<InputConstraintsMixinClass> &
   Constructor<InputControlMixinClass> &
   Constructor<InputMixinClass> &
   Constructor<KeyboardMixinClass> &
   Constructor<LabelMixinClass> &
-  Constructor<OverlayClassMixinClass> &
   Constructor<PatternMixinClass> &
   Constructor<SlotStylesMixinClass> &
   Constructor<TimePickerMixinClass> &
@@ -101,13 +102,13 @@ export declare class TimePickerMixinClass {
   step: number | null | undefined;
 
   /**
-   * 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: ... }`
@@ -126,8 +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;
 }

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

@@ -4,6 +4,7 @@
  * 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 { I18nMixin } from '@vaadin/component-base/src/i18n-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';
@@ -24,11 +25,15 @@ const MAX_ALLOWED_TIME = '23:59:59.999';
  *
  * @polymerMixin
  * @mixes ComboBoxBaseMixin
+ * @mixes I18nMixin
  * @mixes InputControlMixin
  * @mixes PatternMixin
  */
 export const TimePickerMixin = (superClass) =>
-  class TimePickerMixinClass extends PatternMixin(ComboBoxBaseMixin(InputControlMixin(superClass))) {
+  class TimePickerMixinClass extends I18nMixin(
+    timePickerI18nDefaults,
+    PatternMixin(ComboBoxBaseMixin(InputControlMixin(superClass))),
+  ) {
     static get properties() {
       return {
         /**
@@ -98,43 +103,6 @@ export const TimePickerMixin = (superClass) =>
           sync: true,
         },
 
-        /**
-         * 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 has the following JSON structure:
-         *
-         * ```
-         * {
-         *   // A function to format given `Object` as
-         *   // time string. Object is in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`
-         *   formatTime: (time) => {
-         *     // returns a string representation of the given
-         *     // object in `hh` / 'hh:mm' / 'hh:mm:ss' / 'hh:mm:ss.fff' - formats
-         *   },
-         *
-         *   // A function to parse the given text to an `Object` in the format
-         *   // `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`.
-         *   // Must properly parse (at least) text
-         *   // formatted by `formatTime`.
-         *   parseTime: text => {
-         *     // Parses a string in object/string that can be formatted by`formatTime`.
-         *   }
-         * }
-         * ```
-         *
-         * Both `formatTime` and `parseTime` need to be implemented
-         * to ensure the component works properly.
-         *
-         * @type {!TimePickerI18n}
-         */
-        i18n: {
-          type: Object,
-          sync: true,
-          value: () => ({ ...timePickerI18nDefaults }),
-        },
-
         /** @private */
         _comboBoxValue: {
           type: String,
@@ -154,7 +122,7 @@ export const TimePickerMixin = (superClass) =>
         '_openedOrItemsChanged(opened, _dropdownItems)',
         '_updateScroller(opened, _dropdownItems, _focusedIndex, _theme)',
         '__updateAriaAttributes(_dropdownItems, opened, inputElement)',
-        '__updateDropdownItems(i18n, min, max, step)',
+        '__updateDropdownItems(__effectiveI18n, min, max, step)',
       ];
     }
 
@@ -180,6 +148,45 @@ export const TimePickerMixin = (superClass) =>
       return this.$.clearButton;
     }
 
+    /**
+     * 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: ... }`
+     *   formatTime: (time) => {
+     *     // returns a string representation of the given
+     *     // object in `hh` / 'hh:mm' / 'hh:mm:ss' / 'hh:mm:ss.fff' - formats
+     *   },
+     *
+     *   // A function to parse the given text to an `Object` in the format
+     *   // `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`.
+     *   // Must properly parse (at least) text
+     *   // formatted by `formatTime`.
+     *   parseTime: text => {
+     *     // Parses a string in object/string that can be formatted by`formatTime`.
+     *   }
+     * }
+     * ```
+     *
+     * NOTE: `formatTime` and `parseTime` must be implemented in a
+     * compatible manner to ensure the component works properly.
+     *
+     * @return {!TimePickerI18n}
+     */
+    get i18n() {
+      return super.i18n;
+    }
+
+    set i18n(value) {
+      super.i18n = value;
+    }
+
     /**
      * The input element's value when it cannot be parsed as a time, and an empty string otherwise.
      *
@@ -187,7 +194,7 @@ export const TimePickerMixin = (superClass) =>
      * @return {string}
      */
     get __unparsableValue() {
-      if (this._inputElementValue && !this.i18n.parseTime(this._inputElementValue)) {
+      if (this._inputElementValue && !this.__effectiveI18n.parseTime(this._inputElementValue)) {
         return this._inputElementValue;
       }
 
@@ -245,8 +252,8 @@ export const TimePickerMixin = (superClass) =>
     checkValidity() {
       return !!(
         this.inputElement.checkValidity() &&
-        (!this.value || this._timeAllowed(this.i18n.parseTime(this.value))) &&
-        (!this._comboBoxValue || this.i18n.parseTime(this._comboBoxValue))
+        (!this.value || this._timeAllowed(this.__effectiveI18n.parseTime(this.value))) &&
+        (!this._comboBoxValue || this.__effectiveI18n.parseTime(this._comboBoxValue))
       );
     }
 
@@ -411,7 +418,7 @@ export const TimePickerMixin = (superClass) =>
       // observer where the value can be parsed again, so we set
       // this flag to ensure it does not alter the value.
       this.__useMemo = true;
-      this._comboBoxValue = this.i18n.formatTime(objWithStep);
+      this._comboBoxValue = this.__effectiveI18n.formatTime(objWithStep);
       this.__useMemo = false;
 
       this.__commitValueChange();
@@ -508,7 +515,7 @@ export const TimePickerMixin = (superClass) =>
     }
 
     /** @private */
-    __updateDropdownItems(i18n, min, max, step) {
+    __updateDropdownItems(effectiveI18n, min, max, step) {
       const minTimeObj = validateTime(parseISOTime(min || MIN_ALLOWED_TIME), step);
       const minSec = this.__getSec(minTimeObj);
 
@@ -524,7 +531,7 @@ export const TimePickerMixin = (superClass) =>
       }
 
       if (this.value) {
-        this._comboBoxValue = i18n.formatTime(i18n.parseTime(this.value));
+        this._comboBoxValue = effectiveI18n.formatTime(effectiveI18n.parseTime(this.value));
       }
     }
 
@@ -560,7 +567,7 @@ export const TimePickerMixin = (superClass) =>
       while (time + step >= minSec && time + step <= maxSec) {
         const timeObj = validateTime(this.__addStep(time * 1000, step), step);
         time += step;
-        const formatted = this.i18n.formatTime(timeObj);
+        const formatted = this.__effectiveI18n.formatTime(timeObj);
         generatedList.push({ label: formatted, value: formatted });
       }
 
@@ -606,8 +613,8 @@ export const TimePickerMixin = (superClass) =>
         return;
       }
 
-      const parsedObj = this.__useMemo ? this.__memoValue : this.i18n.parseTime(value);
-      const newValue = this.i18n.formatTime(parsedObj) || '';
+      const parsedObj = this.__useMemo ? this.__memoValue : this.__effectiveI18n.parseTime(value);
+      const newValue = this.__effectiveI18n.formatTime(parsedObj) || '';
 
       if (parsedObj) {
         if (value !== newValue) {
@@ -644,7 +651,7 @@ export const TimePickerMixin = (superClass) =>
 
     /** @private */
     __updateInputValue(obj) {
-      const timeString = this.i18n.formatTime(validateTime(obj, this.step)) || '';
+      const timeString = this.__effectiveI18n.formatTime(validateTime(obj, this.step)) || '';
       this._inputElementValue = timeString;
       this._comboBoxValue = timeString;
     }
@@ -657,8 +664,8 @@ export const TimePickerMixin = (superClass) =>
      * @protected
      */
     _timeAllowed(time) {
-      const parsedMin = this.i18n.parseTime(this.min || MIN_ALLOWED_TIME);
-      const parsedMax = this.i18n.parseTime(this.max || MAX_ALLOWED_TIME);
+      const parsedMin = this.__effectiveI18n.parseTime(this.min || MIN_ALLOWED_TIME);
+      const parsedMax = this.__effectiveI18n.parseTime(this.max || MAX_ALLOWED_TIME);
 
       return (
         (!this.__getMsec(parsedMin) || this.__getMsec(time) >= this.__getMsec(parsedMin)) &&

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

@@ -8,11 +8,11 @@ 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 { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-base-styles.js';
 import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
 import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-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';
+import { timePickerOverlayStyles } from './styles/vaadin-time-picker-overlay-base-styles.js';
 
 /**
  * An element used internally by `<vaadin-time-picker>`. Not intended to be used separately.

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

@@ -7,7 +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 { timePickerScrollerStyles } from './styles/vaadin-time-picker-scroller-core-styles.js';
+import { timePickerScrollerStyles } from './styles/vaadin-time-picker-scroller-base-styles.js';
 
 /**
  * An element used internally by `<vaadin-time-picker>`. Not intended to be used separately.

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

@@ -73,34 +73,43 @@ export interface TimePickerEventMap extends HTMLElementEventMap, TimePickerCusto
  * `--vaadin-time-picker-overlay-width`     | Width of the overlay       | `auto`
  * `--vaadin-time-picker-overlay-max-height`| Max height of the overlay  | `65vh`
  *
- * `<vaadin-time-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
- * See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.
- *
- * In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
- *
- * Part name        | Description
- * -----------------|----------------
- * `toggle-button`  | The toggle button
- * `overlay`        | The overlay container
- * `content`        | The overlay content
- *
- * In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
- *
- * Attribute | Description
- * ----------|------------------------------------------
- * `opened`  | Set when the time-picker dropdown is open
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name            | Description
+ * ---------------------|----------------
+ * `label`              | The label element
+ * `input-field`        | The element that wraps prefix, value and buttons
+ * `field-button`       | Set on both clear and toggle buttons
+ * `clear-button`       | The clear button
+ * `error-message`      | The error message element
+ * `helper-text`        | The helper text element wrapper
+ * `required-indicator` | The `required` state indicator element
+ * `toggle-button`      | The toggle button
+ * `overlay`            | The overlay container
+ * `content`            | The overlay content
+ *
+ * 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
  *
  * ### Internal components
  *
  * In addition to `<vaadin-time-picker>` itself, the following internal
  * components are themable:
  *
- * - `<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.
- *
- * Note: the `theme` attribute value set on `<vaadin-time-picker>` is
- * propagated to the internal components listed above.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *

package/src/vaadin-time-picker.js

@@ -15,7 +15,7 @@ import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
 import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-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 { timePickerStyles } from './styles/vaadin-time-picker-base-styles.js';
 import { TimePickerMixin } from './vaadin-time-picker-mixin.js';
 
 /**
@@ -40,34 +40,43 @@ import { TimePickerMixin } from './vaadin-time-picker-mixin.js';
  * `--vaadin-time-picker-overlay-width`     | Width of the overlay       | `auto`
  * `--vaadin-time-picker-overlay-max-height`| Max height of the overlay  | `65vh`
  *
- * `<vaadin-time-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
- * See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.
- *
- * In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
- *
- * Part name        | Description
- * -----------------|----------------
- * `toggle-button`  | The toggle button
- * `overlay`        | The overlay container
- * `content`        | The overlay content
- *
- * In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
- *
- * Attribute | Description
- * ----------|------------------------------------------
- * `opened`  | Set when the time-picker dropdown is open
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name            | Description
+ * ---------------------|----------------
+ * `label`              | The label element
+ * `input-field`        | The element that wraps prefix, value and buttons
+ * `field-button`       | Set on both clear and toggle buttons
+ * `clear-button`       | The clear button
+ * `error-message`      | The error message element
+ * `helper-text`        | The helper text element wrapper
+ * `required-indicator` | The `required` state indicator element
+ * `toggle-button`      | The toggle button
+ * `overlay`            | The overlay container
+ * `content`            | The overlay content
+ *
+ * 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
  *
  * ### Internal components
  *
  * In addition to `<vaadin-time-picker>` itself, the following internal
  * components are themable:
  *
- * - `<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.
- *
- * Note: the `theme` attribute value set on `<vaadin-time-picker>` is
- * propagated to the internal components listed above.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
@@ -126,8 +135,8 @@ class TimePicker extends TimePickerMixin(ThemableMixin(ElementMixin(PolylitMixin
         >
           <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>
+          <div id="clearButton" part="field-button clear-button" slot="suffix" aria-hidden="true"></div>
+          <div id="toggleButton" part="field-button toggle-button" slot="suffix" aria-hidden="true"></div>
         </vaadin-input-container>
 
         <div part="helper-text">

package/vaadin-time-picker.js

@@ -1,2 +1,2 @@
-import './theme/lumo/vaadin-time-picker.js';
+import './src/vaadin-time-picker.js';
 export * from './src/vaadin-time-picker.js';

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/time-picker",
-  "version": "25.0.0-alpha9",
+  "version": "25.0.0-beta2",
   "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-alpha9/#/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`overlay`        | The overlay container\n`content`        | The overlay content\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-alpha9/#/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-alpha9/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha9/#/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\nThe following shadow DOM parts are available for styling:\n\nPart name            | Description\n---------------------|----------------\n`label`              | The label element\n`input-field`        | The element that wraps prefix, value and buttons\n`field-button`       | Set on both clear and toggle buttons\n`clear-button`       | The clear button\n`error-message`      | The error message element\n`helper-text`        | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`toggle-button`      | The toggle button\n`overlay`            | The overlay container\n`content`            | The overlay content\n\nThe following state attributes are available for styling:\n\nAttribute            | Description\n---------------------|---------------------------------\n`disabled`           | Set when the element is disabled\n`has-value`          | Set when the element has a value\n`has-label`          | Set when the element has a label\n`has-helper`         | Set when the element has helper text or slot\n`has-error-message`  | Set when the element has an error message\n`has-tooltip`        | Set when the element has a slotted tooltip\n`invalid`            | Set when the element is invalid\n`focused`            | Set when the element is focused\n`focus-ring`         | Set when the element is keyboard focused\n`readonly`           | Set when the element is readonly\n`opened`             | Set when the overlay is opened\n\n### Internal components\n\nIn addition to `<vaadin-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-beta2/#/elements/vaadin-item).\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",
@@ -30,17 +30,6 @@
                 ]
               }
             },
-            {
-              "name": "overlay-class",
-              "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
-              "value": {
-                "type": [
-                  "string",
-                  "null",
-                  "undefined"
-                ]
-              }
-            },
             {
               "name": "opened",
               "description": "True if the dropdown is open, false otherwise.",
@@ -72,6 +61,15 @@
                 ]
               }
             },
+            {
+              "name": "i18n",
+              "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
+              "value": {
+                "type": [
+                  "Object"
+                ]
+              }
+            },
             {
               "name": "autofocus",
               "description": "Specify that this control should have input focus when the page loads.",
@@ -311,17 +309,6 @@
                   ]
                 }
               },
-              {
-                "name": "overlayClass",
-                "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
-                "value": {
-                  "type": [
-                    "string",
-                    "null",
-                    "undefined"
-                  ]
-                }
-              },
               {
                 "name": "opened",
                 "description": "True if the dropdown is open, false otherwise.",
@@ -353,6 +340,15 @@
                   ]
                 }
               },
+              {
+                "name": "i18n",
+                "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides both the\ntime parsing and formatting functions.\n\nThe object has the following JSON structure:\n\n```js\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\nNOTE: `formatTime` and `parseTime` must be implemented in a\ncompatible manner to ensure the component works properly.",
+                "value": {
+                  "type": [
+                    "TimePickerI18n"
+                  ]
+                }
+              },
               {
                 "name": "autofocus",
                 "description": "Specify that this control should have input focus when the page loads.",
@@ -557,15 +553,6 @@
                     "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.",
-                "value": {
-                  "type": [
-                    "TimePickerI18n"
-                  ]
-                }
               }
             ],
             "events": [

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/time-picker",
-  "version": "25.0.0-alpha9",
+  "version": "25.0.0-beta2",
   "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-alpha9/#/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`overlay`        | The overlay container\n`content`        | The overlay content\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-alpha9/#/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-alpha9/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha9/#/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\nThe following shadow DOM parts are available for styling:\n\nPart name            | Description\n---------------------|----------------\n`label`              | The label element\n`input-field`        | The element that wraps prefix, value and buttons\n`field-button`       | Set on both clear and toggle buttons\n`clear-button`       | The clear button\n`error-message`      | The error message element\n`helper-text`        | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`toggle-button`      | The toggle button\n`overlay`            | The overlay container\n`content`            | The overlay content\n\nThe following state attributes are available for styling:\n\nAttribute            | Description\n---------------------|---------------------------------\n`disabled`           | Set when the element is disabled\n`has-value`          | Set when the element has a value\n`has-label`          | Set when the element has a label\n`has-helper`         | Set when the element has helper text or slot\n`has-error-message`  | Set when the element has an error message\n`has-tooltip`        | Set when the element has a slotted tooltip\n`invalid`            | Set when the element is invalid\n`focused`            | Set when the element is focused\n`focus-ring`         | Set when the element is keyboard focused\n`readonly`           | Set when the element is readonly\n`opened`             | Set when the overlay is opened\n\n### Internal components\n\nIn addition to `<vaadin-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-beta2/#/elements/vaadin-item).\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": [
             {
@@ -97,8 +97,8 @@
               }
             },
             {
-              "name": ".overlayClass",
-              "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
+              "name": ".i18n",
+              "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides both the\ntime parsing and formatting functions.\n\nThe object has the following JSON structure:\n\n```js\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\nNOTE: `formatTime` and `parseTime` must be implemented in a\ncompatible manner to ensure the component works properly.",
               "value": {
                 "kind": "expression"
               }
@@ -194,13 +194,6 @@
                 "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.",
-              "value": {
-                "kind": "expression"
-              }
-            },
             {
               "name": "@validated",
               "description": "Fired whenever the field is validated.",

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

@@ -1,8 +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 type { CSSResult } from 'lit';
-
-export const timePickerStyles: CSSResult;

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

@@ -1,26 +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 { 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;
-  }
-
-  :host([dir='rtl']) [part='input-field'] ::slotted(input)::placeholder {
-    direction: rtl;
-    text-align: left;
-  }
-
-  [part~='toggle-button'] {
-    cursor: pointer;
-  }
-`;

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

@@ -1,18 +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 { css } from 'lit';
-
-export const timePickerOverlayStyles = css`
-  #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%;
-  }
-`;

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

@@ -1,27 +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 { css } from 'lit';
-
-export const timePickerScrollerStyles = css`
-  :host {
-    display: block;
-    min-height: 1px;
-    overflow: auto;
-
-    /* Fixes item background from getting on top of scrollbars on Safari */
-    transform: translate3d(0, 0, 0);
-
-    /* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
-    box-shadow: 0 0 0 white;
-  }
-
-  #selector {
-    border-width: var(--_vaadin-time-picker-items-container-border-width);
-    border-style: var(--_vaadin-time-picker-items-container-border-style);
-    border-color: var(--_vaadin-time-picker-items-container-border-color, transparent);
-    position: relative;
-  }
-`;

package/theme/lumo/vaadin-time-picker-styles.d.ts

@@ -1,7 +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/input-container/theme/lumo/vaadin-input-container-styles.js';
-import '@vaadin/vaadin-lumo-styles/font-icons.js';

package/theme/lumo/vaadin-time-picker-styles.js

@@ -1,52 +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/input-container/theme/lumo/vaadin-input-container-styles.js';
-import '@vaadin/vaadin-lumo-styles/font-icons.js';
-import { comboBoxItem } from '@vaadin/combo-box/theme/lumo/vaadin-combo-box-item-styles.js';
-import { comboBoxOverlay } from '@vaadin/combo-box/theme/lumo/vaadin-combo-box-overlay-styles.js';
-import { item } from '@vaadin/item/theme/lumo/vaadin-item-styles.js';
-import { inputFieldShared } from '@vaadin/vaadin-lumo-styles/mixins/input-field-shared.js';
-import { menuOverlayCore } from '@vaadin/vaadin-lumo-styles/mixins/menu-overlay.js';
-import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles('vaadin-time-picker-item', [item, comboBoxItem], {
-  moduleId: 'lumo-time-picker-item',
-});
-
-registerStyles(
-  'vaadin-time-picker-overlay',
-  [
-    overlay,
-    menuOverlayCore,
-    comboBoxOverlay,
-    css`
-      :host {
-        --_vaadin-time-picker-items-container-border-width: var(--lumo-space-xs);
-        --_vaadin-time-picker-items-container-border-style: solid;
-      }
-    `,
-  ],
-  {
-    moduleId: 'lumo-time-picker-overlay',
-  },
-);
-
-const timePicker = css`
-  [part~='toggle-button']::before {
-    content: var(--lumo-icons-clock);
-  }
-
-  :host([dir='rtl']) [part='input-field'] ::slotted(input:placeholder-shown) {
-    --_lumo-text-field-overflow-mask-image: none;
-  }
-
-  :host([dir='rtl']) [part='input-field'] ::slotted(input) {
-    --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em);
-  }
-`;
-
-registerStyles('vaadin-time-picker', [inputFieldShared, timePicker], { moduleId: 'lumo-time-picker' });

package/theme/lumo/vaadin-time-picker.d.ts

@@ -1,7 +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-styles.js';
-import '../../src/vaadin-time-picker.js';

package/theme/lumo/vaadin-time-picker.js

@@ -1,7 +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-styles.js';
-import '../../src/vaadin-time-picker.js';