@vaadin/time-picker 25.2.6 → 25.2.8

package/custom-elements.json

@@ -74,7 +74,7 @@
               }
             }
           ],
-          "description": "A function to validate the time object based on the given step.",
+          "description": "A function to validate the time object based on the given step.\n\nReturns a new object, so that a time object owned by the caller, such as one\nreturned by the `i18n.parseTime` function, is left as it is.",
           "return": {
             "type": {
               "text": "object | undefined"
@@ -301,7 +301,7 @@
               "type": {
                 "text": "Object"
               },
-              "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.",
+              "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.\n\nNOTE: these functions only apply to the text shown in the input field and\nin the dropdown. The `value`, `min` and `max` properties always use the\nISO 8601 format, and are never passed to `parseTime`, so implementations\ndo not need to accept ISO 8601 input.",
               "attribute": "i18n",
               "inheritedFrom": {
                 "name": "I18nMixin",
@@ -1066,7 +1066,7 @@
               "type": {
                 "text": "Object"
               },
-              "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.",
+              "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.\n\nNOTE: these functions only apply to the text shown in the input field and\nin the dropdown. The `value`, `min` and `max` properties always use the\nISO 8601 format, and are never passed to `parseTime`, so implementations\ndo not need to accept ISO 8601 input.",
               "attribute": "i18n",
               "inheritedFrom": {
                 "name": "I18nMixin",

package/package.json

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

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

@@ -25,6 +25,9 @@ export function parseISOTime(timeString: string): TimePickerTime | undefined;
 
 /**
  * A function to validate the time object based on the given step.
+ *
+ * Returns a new object, so that a time object owned by the caller, such as one
+ * returned by the `i18n.parseTime` function, is left as it is.
  */
 export function validateTime(
   timeObject: TimePickerTime | undefined,

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

@@ -75,17 +75,25 @@ function getStepSegment(stepValue) {
 /**
  * A function to validate the time object based on the given step.
  *
+ * Returns a new object, so that a time object owned by the caller, such as one
+ * returned by the `i18n.parseTime` function, is left as it is.
+ *
  * @param {object} timeObject
  * @param {number} step
  * @return {object | undefined}
  */
 export function validateTime(timeObject, step) {
-  if (timeObject) {
-    const stepSegment = getStepSegment(step);
-    timeObject.hours = parseInt(timeObject.hours);
-    timeObject.minutes = parseInt(timeObject.minutes || 0);
-    timeObject.seconds = stepSegment < 3 ? undefined : parseInt(timeObject.seconds || 0);
-    timeObject.milliseconds = stepSegment < 4 ? undefined : parseInt(timeObject.milliseconds || 0);
+  if (!timeObject) {
+    return timeObject;
   }
-  return timeObject;
+
+  const stepSegment = getStepSegment(step);
+
+  return {
+    ...timeObject,
+    hours: parseInt(timeObject.hours),
+    minutes: parseInt(timeObject.minutes || 0),
+    seconds: stepSegment < 3 ? undefined : parseInt(timeObject.seconds || 0),
+    milliseconds: stepSegment < 4 ? undefined : parseInt(timeObject.milliseconds || 0),
+  };
 }

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

@@ -129,6 +129,11 @@ export declare class TimePickerMixinClass {
    *
    * NOTE: `formatTime` and `parseTime` must be implemented in a
    * compatible manner to ensure the component works properly.
+   *
+   * NOTE: these functions only apply to the text shown in the input field and
+   * in the dropdown. The `value`, `min` and `max` properties always use the
+   * ISO 8601 format, and are never passed to `parseTime`, so implementations
+   * do not need to accept ISO 8601 input.
    */
   i18n: TimePickerI18n;
 }

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

@@ -108,7 +108,7 @@ export const TimePickerMixin = (superClass) =>
     static get observers() {
       return [
         '_openedOrItemsChanged(opened, _dropdownItems)',
-        '_updateScroller(opened, _dropdownItems, _focusedIndex, _theme)',
+        '_updateScroller(opened, _dropdownItems, _focusedIndex, _theme, _comboBoxValue)',
         '__updateAriaAttributes(_dropdownItems, opened, inputElement)',
         '__updateDropdownItems(__effectiveI18n, min, max, step)',
       ];
@@ -169,6 +169,11 @@ export const TimePickerMixin = (superClass) =>
      * NOTE: `formatTime` and `parseTime` must be implemented in a
      * compatible manner to ensure the component works properly.
      *
+     * NOTE: these functions only apply to the text shown in the input field and
+     * in the dropdown. The `value`, `min` and `max` properties always use the
+     * ISO 8601 format, and are never passed to `parseTime`, so implementations
+     * do not need to accept ISO 8601 input.
+     *
      * @type {!TimePickerI18n}
      */
     get i18n() {
@@ -225,16 +230,6 @@ 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);
-      }
-    }
-
     /**
      * Returns true if the current input value satisfies all constraints (if any).
      * You can override this method for custom validations.
@@ -244,7 +239,7 @@ export const TimePickerMixin = (superClass) =>
     checkValidity() {
       return !!(
         this.inputElement.checkValidity() &&
-        (!this.value || this._timeAllowed(this.__effectiveI18n.parseTime(this.value))) &&
+        (!this.value || this._timeAllowed(parseISOTime(this.value))) &&
         (!this._comboBoxValue || this.__effectiveI18n.parseTime(this._comboBoxValue))
       );
     }
@@ -259,7 +254,7 @@ export const TimePickerMixin = (superClass) =>
     }
 
     /** @private */
-    _updateScroller(opened, items, focusedIndex, theme) {
+    _updateScroller(opened, items, focusedIndex, theme, comboBoxValue) {
       if (opened) {
         this._scroller.style.maxHeight =
           getComputedStyle(this).getPropertyValue(`--${this._tagNamePrefix}-overlay-max-height`) || '65vh';
@@ -270,6 +265,7 @@ export const TimePickerMixin = (superClass) =>
         opened,
         focusedIndex,
         theme,
+        selectedItem: items?.find((item) => item.value === comboBoxValue),
       });
     }
 
@@ -365,7 +361,7 @@ export const TimePickerMixin = (superClass) =>
     _setFocused(focused) {
       super._setFocused(focused);
 
-      if (!focused) {
+      if (!focused && !this._closeOnBlurIsPrevented) {
         // Do not validate when focusout is caused by document
         // losing focus, which happens on browser tab switch.
         if (document.hasFocus()) {
@@ -516,14 +512,15 @@ export const TimePickerMixin = (superClass) =>
 
       this._dropdownItems = this.__generateDropdownList(minSec, maxSec, step);
 
+      const parsedValue = validateTime(parseISOTime(this.value), step);
+
       if (step !== this.__oldStep) {
         this.__oldStep = step;
-        const parsedObj = validateTime(parseISOTime(this.value), step);
-        this.__updateValue(parsedObj);
+        this.__updateValue(parsedValue);
       }
 
       if (this.value) {
-        this._comboBoxValue = effectiveI18n.formatTime(effectiveI18n.parseTime(this.value));
+        this._comboBoxValue = effectiveI18n.formatTime(parsedValue);
       }
     }
 
@@ -605,7 +602,11 @@ export const TimePickerMixin = (superClass) =>
         return;
       }
 
-      const parsedObj = this.__useMemo ? this.__memoValue : this.__effectiveI18n.parseTime(value);
+      const parsed = this.__useMemo ? this.__memoValue : this.__effectiveI18n.parseTime(value);
+
+      // Strip parsed time to the resolution defined by the step before formatting
+      // it back, so that the result matches the text shown in the input field.
+      const parsedObj = validateTime(parsed, this.step);
       const newValue = this.__effectiveI18n.formatTime(parsedObj) || '';
 
       if (parsedObj) {
@@ -656,12 +657,12 @@ export const TimePickerMixin = (superClass) =>
      * @protected
      */
     _timeAllowed(time) {
-      const parsedMin = this.__effectiveI18n.parseTime(this.min || MIN_ALLOWED_TIME);
-      const parsedMax = this.__effectiveI18n.parseTime(this.max || MAX_ALLOWED_TIME);
+      const parsedMin = parseISOTime(this.min || MIN_ALLOWED_TIME);
+      const parsedMax = parseISOTime(this.max || MAX_ALLOWED_TIME);
 
       return (
-        (!this.__getMsec(parsedMin) || this.__getMsec(time) >= this.__getMsec(parsedMin)) &&
-        (!this.__getMsec(parsedMax) || this.__getMsec(time) <= this.__getMsec(parsedMax))
+        (!parsedMin || this.__getMsec(time) >= this.__getMsec(parsedMin)) &&
+        (!parsedMax || this.__getMsec(time) <= this.__getMsec(parsedMax))
       );
     }
 

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/time-picker",
-  "version": "25.2.6",
+  "version": "25.2.8",
   "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\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.2.6/#/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 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.2.8/#/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-name",
@@ -332,7 +332,7 @@
               },
               {
                 "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.",
+                "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.\n\nNOTE: these functions only apply to the text shown in the input field and\nin the dropdown. The `value`, `min` and `max` properties always use the\nISO 8601 format, and are never passed to `parseTime`, so implementations\ndo not need to accept ISO 8601 input.",
                 "value": {
                   "type": [
                     "Object"

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/time-picker",
-  "version": "25.2.6",
+  "version": "25.2.8",
   "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\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.2.6/#/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 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.2.8/#/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": [
             {
@@ -91,7 +91,7 @@
             },
             {
               "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.",
+              "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.\n\nNOTE: these functions only apply to the text shown in the input field and\nin the dropdown. The `value`, `min` and `max` properties always use the\nISO 8601 format, and are never passed to `parseTime`, so implementations\ndo not need to accept ISO 8601 input.",
               "value": {
                 "kind": "expression"
               }