@vaadin/time-picker 25.3.0-rc1 → 25.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/time-picker",
-  "version": "25.3.0-rc1",
+  "version": "25.3.1",
   "publishConfig": {
     "access": "public"
   },
@@ -35,22 +35,22 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.3.0-rc1",
-    "@vaadin/combo-box": "25.3.0-rc1",
-    "@vaadin/component-base": "25.3.0-rc1",
-    "@vaadin/field-base": "25.3.0-rc1",
-    "@vaadin/input-container": "25.3.0-rc1",
-    "@vaadin/item": "25.3.0-rc1",
-    "@vaadin/overlay": "25.3.0-rc1",
-    "@vaadin/vaadin-themable-mixin": "25.3.0-rc1",
+    "@vaadin/a11y-base": "~25.3.1",
+    "@vaadin/combo-box": "~25.3.1",
+    "@vaadin/component-base": "~25.3.1",
+    "@vaadin/field-base": "~25.3.1",
+    "@vaadin/input-container": "~25.3.1",
+    "@vaadin/item": "~25.3.1",
+    "@vaadin/overlay": "~25.3.1",
+    "@vaadin/vaadin-themable-mixin": "~25.3.1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.3.0-rc1",
-    "@vaadin/chai-plugins": "25.3.0-rc1",
-    "@vaadin/test-runner-commands": "25.3.0-rc1",
+    "@vaadin/aura": "~25.3.1",
+    "@vaadin/chai-plugins": "~25.3.1",
+    "@vaadin/test-runner-commands": "~25.3.1",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.3.0-rc1",
+    "@vaadin/vaadin-lumo-styles": "~25.3.1",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
@@ -58,5 +58,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "d4809590b2f61bd607e376ab3dec84f4bfb059a7"
+  "gitHead": "a652d6071d7ad5add8465772f14f3efe633066a8"
 }

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

@@ -12,6 +12,10 @@ import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-c
 import { PatternMixin } from '@vaadin/field-base/src/pattern-mixin.js';
 import { formatISOTime, parseISOTime, validateTime } from './vaadin-time-picker-helper.js';
 
+/**
+ * @typedef {import('./vaadin-time-picker-helper.js').TimePickerTime} TimePickerTime
+ */
+
 export const timePickerI18nDefaults = Object.freeze({
   formatTime: formatISOTime,
   parseTime: parseISOTime,
@@ -381,7 +385,7 @@ export const TimePickerMixin = (superClass) =>
 
     /** @private */
     __onArrowPressWithStep(step) {
-      const objWithStep = this.__addStep(this.__getMsec(this.__memoValue), step, true);
+      const objWithStep = this.__addStep(this.__getMsec(this.__memoValue), step);
       this.__memoValue = objWithStep;
 
       // Only commit when the formatted text changes, so that a step finer than
@@ -427,7 +431,8 @@ export const TimePickerMixin = (superClass) =>
     }
 
     /**
-     * Returning milliseconds from Object in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`
+     * @param {TimePickerTime | undefined} obj Time object
+     * @return {number} milliseconds
      * @private
      */
     __getMsec(obj) {
@@ -440,34 +445,46 @@ export const TimePickerMixin = (superClass) =>
     }
 
     /**
-     * Returning Object in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`
-     * from an ISO 8601 time, stripped to the resolution defined by the step.
+     * @param {TimePickerTime | undefined} time Time object
+     * @return {TimePickerTime | undefined} time object truncated to the step resolution
+     * @private
+     */
+    __truncateTime(time) {
+      return validateTime(time, this.step);
+    }
+
+    /**
+     * @param {string} timeString ISO 8601 time string
+     * @return {TimePickerTime | undefined} time object truncated to the step resolution
      * @private
      */
     __getTimeObject(timeString) {
-      return validateTime(parseISOTime(timeString), this.step);
+      return this.__truncateTime(parseISOTime(timeString));
     }
 
     /**
-     * Returning seconds from Object in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`
+     * @param {number} msec Milliseconds since midnight, `24:00` becomes `00:00`
+     * @return {!TimePickerTime} time object
      * @private
      */
-    __getSec(obj) {
-      let result = (obj?.hours || 0) * 60 * 60;
-      result += (obj?.minutes || 0) * 60;
-      result += obj?.seconds || 0;
-      result += (obj?.milliseconds || 0) / 1000;
+    __getTimeFromMsec(msec) {
+      const hh = Math.floor(msec / 1000 / 60 / 60);
+      msec -= hh * 1000 * 60 * 60;
+      const mm = Math.floor(msec / 1000 / 60);
+      msec -= mm * 1000 * 60;
+      const ss = Math.floor(msec / 1000);
+      msec -= ss * 1000;
 
-      return result;
+      return { hours: hh < 24 ? hh : 0, minutes: mm, seconds: ss, milliseconds: msec };
     }
 
     /**
-     * Returning Object in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`
-     * from the result of adding step value in milliseconds to the milliseconds amount.
-     * With `precision` parameter rounding the value to the closest step valid interval.
+     * @param {number} msec Milliseconds since midnight
+     * @param {number} step Step in seconds, negative to subtract
+     * @return {!TimePickerTime} time object moved to the next step interval
      * @private
      */
-    __addStep(msec, step, precision) {
+    __addStep(msec, step) {
       // If the time is `00:00` and step changes value downwards, it should be considered as `24:00`
       if (msec === 0 && step < 0) {
         msec = 24 * 60 * 60 * 1000;
@@ -475,30 +492,23 @@ export const TimePickerMixin = (superClass) =>
 
       const stepMsec = step * 1000;
       const diffToNext = msec % stepMsec;
-      if (stepMsec < 0 && diffToNext && precision) {
+      if (stepMsec < 0 && diffToNext) {
         msec -= diffToNext;
-      } else if (stepMsec > 0 && diffToNext && precision) {
+      } else if (stepMsec > 0 && diffToNext) {
         msec -= diffToNext - stepMsec;
       } else {
         msec += stepMsec;
       }
 
-      const hh = Math.floor(msec / 1000 / 60 / 60);
-      msec -= hh * 1000 * 60 * 60;
-      const mm = Math.floor(msec / 1000 / 60);
-      msec -= mm * 1000 * 60;
-      const ss = Math.floor(msec / 1000);
-      msec -= ss * 1000;
-
-      return { hours: hh < 24 ? hh : 0, minutes: mm, seconds: ss, milliseconds: msec };
+      return this.__getTimeFromMsec(msec);
     }
 
     /** @private */
     __updateDropdownItems() {
-      const minSec = this.__getSec(this.__getTimeObject(this.min || MIN_ALLOWED_TIME));
-      const maxSec = this.__getSec(this.__getTimeObject(this.max || MAX_ALLOWED_TIME));
+      const minMsec = this.__getMsec(this.__getTimeObject(this.min || MIN_ALLOWED_TIME));
+      const maxMsec = this.__getMsec(this.__getTimeObject(this.max || MAX_ALLOWED_TIME));
 
-      this._dropdownItems = this.__generateDropdownList(minSec, maxSec, this.step);
+      this._dropdownItems = this.__generateDropdownList(minMsec, maxMsec, this.step);
     }
 
     /** @private */
@@ -517,22 +527,18 @@ export const TimePickerMixin = (superClass) =>
     }
 
     /** @private */
-    __generateDropdownList(minSec, maxSec, step) {
+    __generateDropdownList(minMsec, maxMsec, step) {
       if (step < 15 * 60 || !this.__validDayDivisor(step)) {
         return [];
       }
 
-      const generatedList = [];
-
       // Default step in overlay items is 1 hour
-      if (!step) {
-        step = 3600;
-      }
+      const stepMsec = (step || 3600) * 1000;
+
+      const generatedList = [];
 
-      let time = -step + minSec;
-      while (time + step >= minSec && time + step <= maxSec) {
-        const timeObj = validateTime(this.__addStep(time * 1000, step), step);
-        time += step;
+      for (let msec = minMsec; msec <= maxMsec; msec += stepMsec) {
+        const timeObj = validateTime(this.__getTimeFromMsec(msec), step);
         const formatted = this.__effectiveI18n.formatTime(timeObj);
         generatedList.push({ label: formatted, value: formatISOTime(timeObj) });
       }
@@ -546,7 +552,7 @@ export const TimePickerMixin = (superClass) =>
      * @override
      */
     _valueChanged(value, oldValue) {
-      // Strip value to the step resolution before marking as committed.
+      // Truncate value to the step resolution before marking as committed.
       const parsedObj = (this.__memoValue = this.__getTimeObject(value));
       const newValue = formatISOTime(parsedObj);
 
@@ -586,15 +592,15 @@ export const TimePickerMixin = (superClass) =>
 
     /**
      * Sets the value and the input text from the given time,
-     * stripped to the resolution defined by the step.
+     * truncated to the resolution defined by the step.
      *
      * @param {!TimePickerTime} time
      * @private
      */
     __setValueFromTime(time) {
-      const stripped = validateTime(time, this.step);
-      this.__setUncommittedValue(formatISOTime(stripped));
-      this.__updateInputValue(stripped);
+      const truncated = this.__truncateTime(time);
+      this.__setUncommittedValue(formatISOTime(truncated));
+      this.__updateInputValue(truncated);
     }
 
     /**
@@ -619,7 +625,10 @@ export const TimePickerMixin = (superClass) =>
       this._comboBoxValue = text;
     }
 
-    /** @private */
+    /**
+     * @param {TimePickerTime | undefined} obj Time object
+     * @private
+     */
     __updateInputValue(obj) {
       const text = this.__effectiveI18n.formatTime(obj) || '';
       this._inputElementValue = text;
@@ -627,8 +636,6 @@ export const TimePickerMixin = (superClass) =>
     }
 
     /**
-     * Returns true if `time` satisfies the `min` and `max` constraints (if any).
-     *
      * @param {!TimePickerTime} time Value to check against constraints
      * @return {boolean} True if `time` satisfies the constraints
      * @protected
@@ -659,13 +666,14 @@ export const TimePickerMixin = (superClass) =>
     }
 
     /**
+     * Override method inherited from `ComboBoxBaseMixin` to only
+     * open overlay when clicking on label or the input container.
      * @param {Event} event
      * @protected
      */
     _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);
       }

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/time-picker",
-  "version": "25.3.0-rc1",
+  "version": "25.3.1",
   "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 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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                                |\n:--------------------------------------------------|\n| `--vaadin-field-default-width`                   |\n| `--vaadin-input-field-background`                |\n| `--vaadin-input-field-border-color`              |\n| `--vaadin-input-field-border-radius`             |\n| `--vaadin-input-field-border-width`              |\n| `--vaadin-input-field-bottom-end-radius`         |\n| `--vaadin-input-field-bottom-start-radius`       |\n| `--vaadin-input-field-button-text-color`         |\n| `--vaadin-input-field-container-gap`             |\n| `--vaadin-input-field-disabled-background`       |\n| `--vaadin-input-field-disabled-text-color`       |\n| `--vaadin-input-field-error-color`               |\n| `--vaadin-input-field-error-font-size`           |\n| `--vaadin-input-field-error-font-weight`         |\n| `--vaadin-input-field-error-line-height`         |\n| `--vaadin-input-field-gap`                       |\n| `--vaadin-input-field-helper-color`              |\n| `--vaadin-input-field-helper-font-size`          |\n| `--vaadin-input-field-helper-font-weight`        |\n| `--vaadin-input-field-helper-line-height`        |\n| `--vaadin-input-field-label-color`               |\n| `--vaadin-input-field-label-font-size`           |\n| `--vaadin-input-field-label-font-weight`         |\n| `--vaadin-input-field-label-line-height`         |\n| `--vaadin-input-field-padding`                   |\n| `--vaadin-input-field-placeholder-color`         |\n| `--vaadin-input-field-required-indicator`        |\n| `--vaadin-input-field-required-indicator-color`  |\n| `--vaadin-input-field-top-end-radius`            |\n| `--vaadin-input-field-top-start-radius`          |\n| `--vaadin-input-field-value-color`               |\n| `--vaadin-input-field-value-font-size`           |\n| `--vaadin-input-field-value-font-weight`         |\n| `--vaadin-input-field-value-line-height`         |\n| `--vaadin-item-overlay-padding`                  |\n| `--vaadin-time-picker-overlay-max-height`        |\n| `--vaadin-time-picker-overlay-width`             |\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.3.0-rc1/#/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",
+          "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 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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                                |\n:--------------------------------------------------|\n| `--vaadin-field-default-width`                   |\n| `--vaadin-input-field-background`                |\n| `--vaadin-input-field-border-color`              |\n| `--vaadin-input-field-border-radius`             |\n| `--vaadin-input-field-border-width`              |\n| `--vaadin-input-field-bottom-end-radius`         |\n| `--vaadin-input-field-bottom-start-radius`       |\n| `--vaadin-input-field-button-text-color`         |\n| `--vaadin-input-field-container-gap`             |\n| `--vaadin-input-field-disabled-background`       |\n| `--vaadin-input-field-disabled-text-color`       |\n| `--vaadin-input-field-error-color`               |\n| `--vaadin-input-field-error-font-size`           |\n| `--vaadin-input-field-error-font-weight`         |\n| `--vaadin-input-field-error-line-height`         |\n| `--vaadin-input-field-gap`                       |\n| `--vaadin-input-field-helper-color`              |\n| `--vaadin-input-field-helper-font-size`          |\n| `--vaadin-input-field-helper-font-weight`        |\n| `--vaadin-input-field-helper-line-height`        |\n| `--vaadin-input-field-label-color`               |\n| `--vaadin-input-field-label-font-size`           |\n| `--vaadin-input-field-label-font-weight`         |\n| `--vaadin-input-field-label-line-height`         |\n| `--vaadin-input-field-padding`                   |\n| `--vaadin-input-field-placeholder-color`         |\n| `--vaadin-input-field-required-indicator`        |\n| `--vaadin-input-field-required-indicator-color`  |\n| `--vaadin-input-field-top-end-radius`            |\n| `--vaadin-input-field-top-start-radius`          |\n| `--vaadin-input-field-value-color`               |\n| `--vaadin-input-field-value-font-size`           |\n| `--vaadin-input-field-value-font-weight`         |\n| `--vaadin-input-field-value-line-height`         |\n| `--vaadin-item-overlay-padding`                  |\n| `--vaadin-time-picker-overlay-max-height`        |\n| `--vaadin-time-picker-overlay-width`             |\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.3.1/#/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": "accessible-description-ref",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/time-picker",
-  "version": "25.3.0-rc1",
+  "version": "25.3.1",
   "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 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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                                |\n:--------------------------------------------------|\n| `--vaadin-field-default-width`                   |\n| `--vaadin-input-field-background`                |\n| `--vaadin-input-field-border-color`              |\n| `--vaadin-input-field-border-radius`             |\n| `--vaadin-input-field-border-width`              |\n| `--vaadin-input-field-bottom-end-radius`         |\n| `--vaadin-input-field-bottom-start-radius`       |\n| `--vaadin-input-field-button-text-color`         |\n| `--vaadin-input-field-container-gap`             |\n| `--vaadin-input-field-disabled-background`       |\n| `--vaadin-input-field-disabled-text-color`       |\n| `--vaadin-input-field-error-color`               |\n| `--vaadin-input-field-error-font-size`           |\n| `--vaadin-input-field-error-font-weight`         |\n| `--vaadin-input-field-error-line-height`         |\n| `--vaadin-input-field-gap`                       |\n| `--vaadin-input-field-helper-color`              |\n| `--vaadin-input-field-helper-font-size`          |\n| `--vaadin-input-field-helper-font-weight`        |\n| `--vaadin-input-field-helper-line-height`        |\n| `--vaadin-input-field-label-color`               |\n| `--vaadin-input-field-label-font-size`           |\n| `--vaadin-input-field-label-font-weight`         |\n| `--vaadin-input-field-label-line-height`         |\n| `--vaadin-input-field-padding`                   |\n| `--vaadin-input-field-placeholder-color`         |\n| `--vaadin-input-field-required-indicator`        |\n| `--vaadin-input-field-required-indicator-color`  |\n| `--vaadin-input-field-top-end-radius`            |\n| `--vaadin-input-field-top-start-radius`          |\n| `--vaadin-input-field-value-color`               |\n| `--vaadin-input-field-value-font-size`           |\n| `--vaadin-input-field-value-font-weight`         |\n| `--vaadin-input-field-value-line-height`         |\n| `--vaadin-item-overlay-padding`                  |\n| `--vaadin-time-picker-overlay-max-height`        |\n| `--vaadin-time-picker-overlay-width`             |\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.3.0-rc1/#/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",
+          "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 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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                                |\n:--------------------------------------------------|\n| `--vaadin-field-default-width`                   |\n| `--vaadin-input-field-background`                |\n| `--vaadin-input-field-border-color`              |\n| `--vaadin-input-field-border-radius`             |\n| `--vaadin-input-field-border-width`              |\n| `--vaadin-input-field-bottom-end-radius`         |\n| `--vaadin-input-field-bottom-start-radius`       |\n| `--vaadin-input-field-button-text-color`         |\n| `--vaadin-input-field-container-gap`             |\n| `--vaadin-input-field-disabled-background`       |\n| `--vaadin-input-field-disabled-text-color`       |\n| `--vaadin-input-field-error-color`               |\n| `--vaadin-input-field-error-font-size`           |\n| `--vaadin-input-field-error-font-weight`         |\n| `--vaadin-input-field-error-line-height`         |\n| `--vaadin-input-field-gap`                       |\n| `--vaadin-input-field-helper-color`              |\n| `--vaadin-input-field-helper-font-size`          |\n| `--vaadin-input-field-helper-font-weight`        |\n| `--vaadin-input-field-helper-line-height`        |\n| `--vaadin-input-field-label-color`               |\n| `--vaadin-input-field-label-font-size`           |\n| `--vaadin-input-field-label-font-weight`         |\n| `--vaadin-input-field-label-line-height`         |\n| `--vaadin-input-field-padding`                   |\n| `--vaadin-input-field-placeholder-color`         |\n| `--vaadin-input-field-required-indicator`        |\n| `--vaadin-input-field-required-indicator-color`  |\n| `--vaadin-input-field-top-end-radius`            |\n| `--vaadin-input-field-top-start-radius`          |\n| `--vaadin-input-field-value-color`               |\n| `--vaadin-input-field-value-font-size`           |\n| `--vaadin-input-field-value-font-weight`         |\n| `--vaadin-input-field-value-line-height`         |\n| `--vaadin-item-overlay-padding`                  |\n| `--vaadin-time-picker-overlay-max-height`        |\n| `--vaadin-time-picker-overlay-width`             |\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.3.1/#/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": [
             {