@vaadin/time-picker 25.2.9 → 25.2.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +1 -1
- package/package.json +14 -14
- package/src/vaadin-time-picker.d.ts +42 -8
- package/src/vaadin-time-picker.js +42 -8
- package/web-types.json +2 -2
- package/web-types.lit.json +2 -2
package/custom-elements.json
CHANGED
|
@@ -884,7 +884,7 @@
|
|
|
884
884
|
"declarations": [
|
|
885
885
|
{
|
|
886
886
|
"kind": "class",
|
|
887
|
-
"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
|
|
887
|
+
"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>`](#/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",
|
|
888
888
|
"name": "TimePicker",
|
|
889
889
|
"members": [
|
|
890
890
|
{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/time-picker",
|
|
3
|
-
"version": "25.2.
|
|
3
|
+
"version": "25.2.10",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,22 +35,22 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
|
-
"@vaadin/a11y-base": "~25.2.
|
|
39
|
-
"@vaadin/combo-box": "~25.2.
|
|
40
|
-
"@vaadin/component-base": "~25.2.
|
|
41
|
-
"@vaadin/field-base": "~25.2.
|
|
42
|
-
"@vaadin/input-container": "~25.2.
|
|
43
|
-
"@vaadin/item": "~25.2.
|
|
44
|
-
"@vaadin/overlay": "~25.2.
|
|
45
|
-
"@vaadin/vaadin-themable-mixin": "~25.2.
|
|
38
|
+
"@vaadin/a11y-base": "~25.2.10",
|
|
39
|
+
"@vaadin/combo-box": "~25.2.10",
|
|
40
|
+
"@vaadin/component-base": "~25.2.10",
|
|
41
|
+
"@vaadin/field-base": "~25.2.10",
|
|
42
|
+
"@vaadin/input-container": "~25.2.10",
|
|
43
|
+
"@vaadin/item": "~25.2.10",
|
|
44
|
+
"@vaadin/overlay": "~25.2.10",
|
|
45
|
+
"@vaadin/vaadin-themable-mixin": "~25.2.10",
|
|
46
46
|
"lit": "^3.0.0"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
-
"@vaadin/aura": "~25.2.
|
|
50
|
-
"@vaadin/chai-plugins": "~25.2.
|
|
51
|
-
"@vaadin/test-runner-commands": "~25.2.
|
|
49
|
+
"@vaadin/aura": "~25.2.10",
|
|
50
|
+
"@vaadin/chai-plugins": "~25.2.10",
|
|
51
|
+
"@vaadin/test-runner-commands": "~25.2.10",
|
|
52
52
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
53
|
-
"@vaadin/vaadin-lumo-styles": "~25.2.
|
|
53
|
+
"@vaadin/vaadin-lumo-styles": "~25.2.10",
|
|
54
54
|
"sinon": "^22.0.0"
|
|
55
55
|
},
|
|
56
56
|
"customElements": "custom-elements.json",
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"web-types.json",
|
|
59
59
|
"web-types.lit.json"
|
|
60
60
|
],
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "7715101508f7e689bd77354322fb80b3d7ad402d"
|
|
62
62
|
}
|
|
@@ -72,14 +72,6 @@ export interface TimePickerEventMap extends HTMLElementEventMap, TimePickerCusto
|
|
|
72
72
|
*
|
|
73
73
|
* ### Styling
|
|
74
74
|
*
|
|
75
|
-
* The following custom properties are available for styling:
|
|
76
|
-
*
|
|
77
|
-
* Custom property | Description | Default
|
|
78
|
-
* -----------------------------------------|----------------------------|---------
|
|
79
|
-
* `--vaadin-field-default-width` | Default width of the field | `12em`
|
|
80
|
-
* `--vaadin-time-picker-overlay-width` | Width of the overlay | `auto`
|
|
81
|
-
* `--vaadin-time-picker-overlay-max-height`| Max height of the overlay | `65vh`
|
|
82
|
-
*
|
|
83
75
|
* The following shadow DOM parts are available for styling:
|
|
84
76
|
*
|
|
85
77
|
* Part name | Description
|
|
@@ -111,6 +103,48 @@ export interface TimePickerEventMap extends HTMLElementEventMap, TimePickerCusto
|
|
|
111
103
|
* `readonly` | Set when the element is readonly
|
|
112
104
|
* `opened` | Set when the overlay is opened
|
|
113
105
|
*
|
|
106
|
+
* The following custom CSS properties are available for styling:
|
|
107
|
+
*
|
|
108
|
+
* Custom CSS property |
|
|
109
|
+
* :--------------------------------------------------|
|
|
110
|
+
* | `--vaadin-field-default-width` |
|
|
111
|
+
* | `--vaadin-input-field-background` |
|
|
112
|
+
* | `--vaadin-input-field-border-color` |
|
|
113
|
+
* | `--vaadin-input-field-border-radius` |
|
|
114
|
+
* | `--vaadin-input-field-border-width` |
|
|
115
|
+
* | `--vaadin-input-field-bottom-end-radius` |
|
|
116
|
+
* | `--vaadin-input-field-bottom-start-radius` |
|
|
117
|
+
* | `--vaadin-input-field-button-text-color` |
|
|
118
|
+
* | `--vaadin-input-field-container-gap` |
|
|
119
|
+
* | `--vaadin-input-field-disabled-background` |
|
|
120
|
+
* | `--vaadin-input-field-disabled-text-color` |
|
|
121
|
+
* | `--vaadin-input-field-error-color` |
|
|
122
|
+
* | `--vaadin-input-field-error-font-size` |
|
|
123
|
+
* | `--vaadin-input-field-error-font-weight` |
|
|
124
|
+
* | `--vaadin-input-field-error-line-height` |
|
|
125
|
+
* | `--vaadin-input-field-gap` |
|
|
126
|
+
* | `--vaadin-input-field-helper-color` |
|
|
127
|
+
* | `--vaadin-input-field-helper-font-size` |
|
|
128
|
+
* | `--vaadin-input-field-helper-font-weight` |
|
|
129
|
+
* | `--vaadin-input-field-helper-line-height` |
|
|
130
|
+
* | `--vaadin-input-field-label-color` |
|
|
131
|
+
* | `--vaadin-input-field-label-font-size` |
|
|
132
|
+
* | `--vaadin-input-field-label-font-weight` |
|
|
133
|
+
* | `--vaadin-input-field-label-line-height` |
|
|
134
|
+
* | `--vaadin-input-field-padding` |
|
|
135
|
+
* | `--vaadin-input-field-placeholder-color` |
|
|
136
|
+
* | `--vaadin-input-field-required-indicator` |
|
|
137
|
+
* | `--vaadin-input-field-required-indicator-color` |
|
|
138
|
+
* | `--vaadin-input-field-top-end-radius` |
|
|
139
|
+
* | `--vaadin-input-field-top-start-radius` |
|
|
140
|
+
* | `--vaadin-input-field-value-color` |
|
|
141
|
+
* | `--vaadin-input-field-value-font-size` |
|
|
142
|
+
* | `--vaadin-input-field-value-font-weight` |
|
|
143
|
+
* | `--vaadin-input-field-value-line-height` |
|
|
144
|
+
* | `--vaadin-item-overlay-padding` |
|
|
145
|
+
* | `--vaadin-time-picker-overlay-max-height` |
|
|
146
|
+
* | `--vaadin-time-picker-overlay-width` |
|
|
147
|
+
*
|
|
114
148
|
* ### Internal components
|
|
115
149
|
*
|
|
116
150
|
* In addition to `<vaadin-time-picker>` itself, the following internal
|
|
@@ -32,14 +32,6 @@ import { TimePickerMixin } from './vaadin-time-picker-mixin.js';
|
|
|
32
32
|
*
|
|
33
33
|
* ### Styling
|
|
34
34
|
*
|
|
35
|
-
* The following custom properties are available for styling:
|
|
36
|
-
*
|
|
37
|
-
* Custom property | Description | Default
|
|
38
|
-
* -----------------------------------------|----------------------------|---------
|
|
39
|
-
* `--vaadin-field-default-width` | Default width of the field | `12em`
|
|
40
|
-
* `--vaadin-time-picker-overlay-width` | Width of the overlay | `auto`
|
|
41
|
-
* `--vaadin-time-picker-overlay-max-height`| Max height of the overlay | `65vh`
|
|
42
|
-
*
|
|
43
35
|
* The following shadow DOM parts are available for styling:
|
|
44
36
|
*
|
|
45
37
|
* Part name | Description
|
|
@@ -71,6 +63,48 @@ import { TimePickerMixin } from './vaadin-time-picker-mixin.js';
|
|
|
71
63
|
* `readonly` | Set when the element is readonly
|
|
72
64
|
* `opened` | Set when the overlay is opened
|
|
73
65
|
*
|
|
66
|
+
* The following custom CSS properties are available for styling:
|
|
67
|
+
*
|
|
68
|
+
* Custom CSS property |
|
|
69
|
+
* :--------------------------------------------------|
|
|
70
|
+
* | `--vaadin-field-default-width` |
|
|
71
|
+
* | `--vaadin-input-field-background` |
|
|
72
|
+
* | `--vaadin-input-field-border-color` |
|
|
73
|
+
* | `--vaadin-input-field-border-radius` |
|
|
74
|
+
* | `--vaadin-input-field-border-width` |
|
|
75
|
+
* | `--vaadin-input-field-bottom-end-radius` |
|
|
76
|
+
* | `--vaadin-input-field-bottom-start-radius` |
|
|
77
|
+
* | `--vaadin-input-field-button-text-color` |
|
|
78
|
+
* | `--vaadin-input-field-container-gap` |
|
|
79
|
+
* | `--vaadin-input-field-disabled-background` |
|
|
80
|
+
* | `--vaadin-input-field-disabled-text-color` |
|
|
81
|
+
* | `--vaadin-input-field-error-color` |
|
|
82
|
+
* | `--vaadin-input-field-error-font-size` |
|
|
83
|
+
* | `--vaadin-input-field-error-font-weight` |
|
|
84
|
+
* | `--vaadin-input-field-error-line-height` |
|
|
85
|
+
* | `--vaadin-input-field-gap` |
|
|
86
|
+
* | `--vaadin-input-field-helper-color` |
|
|
87
|
+
* | `--vaadin-input-field-helper-font-size` |
|
|
88
|
+
* | `--vaadin-input-field-helper-font-weight` |
|
|
89
|
+
* | `--vaadin-input-field-helper-line-height` |
|
|
90
|
+
* | `--vaadin-input-field-label-color` |
|
|
91
|
+
* | `--vaadin-input-field-label-font-size` |
|
|
92
|
+
* | `--vaadin-input-field-label-font-weight` |
|
|
93
|
+
* | `--vaadin-input-field-label-line-height` |
|
|
94
|
+
* | `--vaadin-input-field-padding` |
|
|
95
|
+
* | `--vaadin-input-field-placeholder-color` |
|
|
96
|
+
* | `--vaadin-input-field-required-indicator` |
|
|
97
|
+
* | `--vaadin-input-field-required-indicator-color` |
|
|
98
|
+
* | `--vaadin-input-field-top-end-radius` |
|
|
99
|
+
* | `--vaadin-input-field-top-start-radius` |
|
|
100
|
+
* | `--vaadin-input-field-value-color` |
|
|
101
|
+
* | `--vaadin-input-field-value-font-size` |
|
|
102
|
+
* | `--vaadin-input-field-value-font-weight` |
|
|
103
|
+
* | `--vaadin-input-field-value-line-height` |
|
|
104
|
+
* | `--vaadin-item-overlay-padding` |
|
|
105
|
+
* | `--vaadin-time-picker-overlay-max-height` |
|
|
106
|
+
* | `--vaadin-time-picker-overlay-width` |
|
|
107
|
+
*
|
|
74
108
|
* ### Internal components
|
|
75
109
|
*
|
|
76
110
|
* In addition to `<vaadin-time-picker>` itself, the following internal
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/time-picker",
|
|
4
|
-
"version": "25.2.
|
|
4
|
+
"version": "25.2.10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-time-picker",
|
|
11
|
-
"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
|
|
11
|
+
"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.2.10/#/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",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "accessible-name",
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/time-picker",
|
|
4
|
-
"version": "25.2.
|
|
4
|
+
"version": "25.2.10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-time-picker",
|
|
19
|
-
"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
|
|
19
|
+
"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.2.10/#/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",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|