@vaadin/time-picker 24.0.0-alpha12 → 24.0.0-alpha13

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.
Files changed (13) hide show
  1. package/package.json +10 -10
  2. package/src/vaadin-time-picker-item.d.ts +42 -0
  3. package/src/vaadin-time-picker-item.js +35 -11
  4. package/src/vaadin-time-picker-overlay.d.ts +20 -0
  5. package/src/vaadin-time-picker-overlay.js +20 -2
  6. package/src/vaadin-time-picker-scroller.d.ts +19 -0
  7. package/src/vaadin-time-picker-scroller.js +35 -4
  8. package/theme/lumo/vaadin-time-picker-styles.js +27 -0
  9. package/theme/lumo/vaadin-time-picker.js +1 -2
  10. package/theme/material/vaadin-time-picker-styles.js +25 -0
  11. package/theme/material/vaadin-time-picker.js +1 -2
  12. package/web-types.json +2 -2
  13. package/web-types.lit.json +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/time-picker",
3
- "version": "24.0.0-alpha12",
3
+ "version": "24.0.0-alpha13",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -36,22 +36,22 @@
36
36
  ],
37
37
  "dependencies": {
38
38
  "@polymer/polymer": "^3.0.0",
39
- "@vaadin/combo-box": "24.0.0-alpha12",
40
- "@vaadin/component-base": "24.0.0-alpha12",
41
- "@vaadin/field-base": "24.0.0-alpha12",
42
- "@vaadin/input-container": "24.0.0-alpha12",
43
- "@vaadin/vaadin-lumo-styles": "24.0.0-alpha12",
44
- "@vaadin/vaadin-material-styles": "24.0.0-alpha12",
45
- "@vaadin/vaadin-themable-mixin": "24.0.0-alpha12"
39
+ "@vaadin/combo-box": "24.0.0-alpha13",
40
+ "@vaadin/component-base": "24.0.0-alpha13",
41
+ "@vaadin/field-base": "24.0.0-alpha13",
42
+ "@vaadin/input-container": "24.0.0-alpha13",
43
+ "@vaadin/vaadin-lumo-styles": "24.0.0-alpha13",
44
+ "@vaadin/vaadin-material-styles": "24.0.0-alpha13",
45
+ "@vaadin/vaadin-themable-mixin": "24.0.0-alpha13"
46
46
  },
47
47
  "devDependencies": {
48
48
  "@esm-bundle/chai": "^4.3.4",
49
- "@vaadin/testing-helpers": "^0.3.2",
49
+ "@vaadin/testing-helpers": "^0.4.0",
50
50
  "sinon": "^13.0.2"
51
51
  },
52
52
  "web-types": [
53
53
  "web-types.json",
54
54
  "web-types.lit.json"
55
55
  ],
56
- "gitHead": "7e29eee4d522fb7b03ac8e7e385e9057d71c79ce"
56
+ "gitHead": "a423ad309c12b4e4f847737ee9f491f83ea60ff0"
57
57
  }
package/src/vaadin-time-picker-item.d.ts ADDED
@@ -0,0 +1,42 @@
1
+ /**
2
+ * @license
3
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
4
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
6
+ import type { ComboBoxItemMixinClass } from '@vaadin/combo-box/src/vaadin-combo-box-item-mixin.js';
7
+ import type { DirMixinClass } from '@vaadin/component-base/src/dir-mixin.js';
8
+ import type { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
9
+ import type { TimePicker } from './vaadin-time-picker.js';
10
+
11
+ /**
12
+ * An item element used by the `<vaadin-time-picker>` dropdown.
13
+ *
14
+ * ### Styling
15
+ *
16
+ * The following shadow DOM parts are available for styling:
17
+ *
18
+ * Part name | Description
19
+ * ------------|--------------
20
+ * `checkmark` | The graphical checkmark shown for a selected item
21
+ * `content` | The element that wraps the item content
22
+ *
23
+ * The following state attributes are exposed for styling:
24
+ *
25
+ * Attribute | Description
26
+ * -------------|-------------
27
+ * `selected` | Set when the item is selected
28
+ * `focused` | Set when the item is focused
29
+ *
30
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
31
+ */
32
+ declare class TimePickerItem extends HTMLElement {}
33
+
34
+ interface TimePickerItem extends ComboBoxItemMixinClass<string, TimePicker>, DirMixinClass, ThemableMixinClass {}
35
+
36
+ declare global {
37
+ interface HTMLElementTagNameMap {
38
+ 'vaadin-time-picker-item': TimePickerItem;
39
+ }
40
+ }
41
+
42
+ export { TimePickerItem };
package/src/vaadin-time-picker-item.js CHANGED
@@ -3,35 +3,59 @@
3
3
  * Copyright (c) 2018 - 2023 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
- import { ComboBoxItem } from '@vaadin/combo-box/src/vaadin-combo-box-item.js';
6
+ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
7
+ import { ComboBoxItemMixin } from '@vaadin/combo-box/src/vaadin-combo-box-item-mixin.js';
8
+ import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
9
+ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
7
10
 
8
11
  /**
9
- * An element used for items in `<vaadin-time-picker>`.
12
+ * An item element used by the `<vaadin-time-picker>` dropdown.
10
13
  *
11
14
  * ### Styling
12
15
  *
13
16
  * The following shadow DOM parts are available for styling:
14
17
  *
15
- * Part name | Description
16
- * ----------|-------------
17
- * `content` | The element that wraps the item content
18
+ * Part name | Description
19
+ * ------------|--------------
20
+ * `checkmark` | The graphical checkmark shown for a selected item
21
+ * `content` | The element that wraps the item content
18
22
  *
19
23
  * The following state attributes are exposed for styling:
20
24
  *
21
- * Attribute | Description | Part name
22
- * -----------|-------------------------------|-----------
23
- * `selected` | Set when the item is selected | :host
24
- * `focused` | Set when the item is focused | :host
25
+ * Attribute | Description
26
+ * -------------|-------------
27
+ * `selected` | Set when the item is selected
28
+ * `focused` | Set when the item is focused
25
29
  *
26
30
  * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
27
31
  *
28
- * @extends ComboBoxItem
32
+ * @mixes ComboBoxItemMixin
33
+ * @mixes ThemableMixin
34
+ * @mixes DirMixin
29
35
  * @private
30
36
  */
31
- class TimePickerItem extends ComboBoxItem {
37
+ export class TimePickerItem extends ComboBoxItemMixin(ThemableMixin(DirMixin(PolymerElement))) {
32
38
  static get is() {
33
39
  return 'vaadin-time-picker-item';
34
40
  }
41
+
42
+ static get template() {
43
+ return html`
44
+ <style>
45
+ :host {
46
+ display: block;
47
+ }
48
+
49
+ :host([hidden]) {
50
+ display: none !important;
51
+ }
52
+ </style>
53
+ <span part="checkmark" aria-hidden="true"></span>
54
+ <div part="content">
55
+ <slot></slot>
56
+ </div>
57
+ `;
58
+ }
35
59
  }
36
60
 
37
61
  customElements.define(TimePickerItem.is, TimePickerItem);
package/src/vaadin-time-picker-overlay.d.ts ADDED
@@ -0,0 +1,20 @@
1
+ /**
2
+ * @license
3
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
4
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
6
+ import { ComboBoxOverlayMixin } from '@vaadin/combo-box/src/vaadin-combo-box-overlay-mixin.js';
7
+ import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';
8
+
9
+ /**
10
+ * An element used internally by `<vaadin-time-picker>`. Not intended to be used separately.
11
+ */
12
+ declare class TimePickerOverlay extends ComboBoxOverlayMixin(Overlay) {}
13
+
14
+ declare global {
15
+ interface HTMLElementTagNameMap {
16
+ 'vaadin-time-picker-overlay': TimePickerOverlay;
17
+ }
18
+ }
19
+
20
+ export { TimePickerOverlay };
package/src/vaadin-time-picker-overlay.js CHANGED
@@ -3,7 +3,8 @@
3
3
  * Copyright (c) 2018 - 2023 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
- import { ComboBoxOverlay } from '@vaadin/combo-box/src/vaadin-combo-box-overlay.js';
6
+ import { ComboBoxOverlayMixin } from '@vaadin/combo-box/src/vaadin-combo-box-overlay-mixin.js';
7
+ import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';
7
8
  import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
8
9
 
9
10
  registerStyles(
@@ -12,20 +13,37 @@ registerStyles(
12
13
  #overlay {
13
14
  width: var(--vaadin-time-picker-overlay-width, var(--_vaadin-time-picker-overlay-default-width, auto));
14
15
  }
16
+
17
+ [part='content'] {
18
+ display: flex;
19
+ flex-direction: column;
20
+ height: 100%;
21
+ }
15
22
  `,
16
23
  { moduleId: 'vaadin-time-picker-overlay-styles' },
17
24
  );
18
25
 
26
+ let memoizedTemplate;
27
+
19
28
  /**
20
29
  * An element used internally by `<vaadin-time-picker>`. Not intended to be used separately.
21
30
  *
22
31
  * @extends ComboBoxOverlay
23
32
  * @private
24
33
  */
25
- class TimePickerOverlay extends ComboBoxOverlay {
34
+ class TimePickerOverlay extends ComboBoxOverlayMixin(Overlay) {
26
35
  static get is() {
27
36
  return 'vaadin-time-picker-overlay';
28
37
  }
38
+
39
+ static get template() {
40
+ if (!memoizedTemplate) {
41
+ memoizedTemplate = super.template.cloneNode(true);
42
+ memoizedTemplate.content.querySelector('[part~="overlay"]').removeAttribute('tabindex');
43
+ }
44
+
45
+ return memoizedTemplate;
46
+ }
29
47
  }
30
48
 
31
49
  customElements.define(TimePickerOverlay.is, TimePickerOverlay);
package/src/vaadin-time-picker-scroller.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ /**
2
+ * @license
3
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
4
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
6
+ import { ComboBoxScrollerMixin } from '@vaadin/combo-box/src/vaadin-combo-box-scroller-mixin.js';
7
+
8
+ /**
9
+ * An element used internally by `<vaadin-time-picker>`. Not intended to be used separately.
10
+ */
11
+ declare class TimePickerScroller extends ComboBoxScrollerMixin(HTMLElement) {}
12
+
13
+ declare global {
14
+ interface HTMLElementTagNameMap {
15
+ 'vaadin-time-picker-scroller': TimePickerScroller;
16
+ }
17
+ }
18
+
19
+ export { TimePickerScroller };
package/src/vaadin-time-picker-scroller.js CHANGED
@@ -3,18 +3,49 @@
3
3
  * Copyright (c) 2018 - 2023 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
- import { ComboBoxScroller } from '@vaadin/combo-box/src/vaadin-combo-box-scroller.js';
7
-
6
+ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
7
+ import { ComboBoxScrollerMixin } from '@vaadin/combo-box/src/vaadin-combo-box-scroller-mixin.js';
8
8
  /**
9
9
  * An element used internally by `<vaadin-time-picker>`. Not intended to be used separately.
10
10
  *
11
- * @extends ComboBoxScroller
11
+ * @extends HTMLElement
12
+ * @mixes ComboBoxScrollerMixin
12
13
  * @private
13
14
  */
14
- class TimePickerScroller extends ComboBoxScroller {
15
+ export class TimePickerScroller extends ComboBoxScrollerMixin(PolymerElement) {
15
16
  static get is() {
16
17
  return 'vaadin-time-picker-scroller';
17
18
  }
19
+
20
+ static get template() {
21
+ return html`
22
+ <style>
23
+ :host {
24
+ display: block;
25
+ min-height: 1px;
26
+ overflow: auto;
27
+
28
+ /* Fixes item background from getting on top of scrollbars on Safari */
29
+ transform: translate3d(0, 0, 0);
30
+
31
+ /* Enable momentum scrolling on iOS */
32
+ -webkit-overflow-scrolling: touch;
33
+
34
+ /* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
35
+ box-shadow: 0 0 0 white;
36
+ }
37
+
38
+ #selector {
39
+ border-width: var(--_vaadin-time-picker-items-container-border-width);
40
+ border-style: var(--_vaadin-time-picker-items-container-border-style);
41
+ border-color: var(--_vaadin-time-picker-items-container-border-color, transparent);
42
+ }
43
+ </style>
44
+ <div id="selector">
45
+ <slot></slot>
46
+ </div>
47
+ `;
48
+ }
18
49
  }
19
50
 
20
51
  customElements.define(TimePickerScroller.is, TimePickerScroller);
package/theme/lumo/vaadin-time-picker-styles.js CHANGED
@@ -4,9 +4,36 @@
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import '@vaadin/vaadin-lumo-styles/font-icons.js';
7
+ import { comboBoxItem } from '@vaadin/combo-box/theme/lumo/vaadin-combo-box-item-styles.js';
8
+ import { comboBoxOverlay } from '@vaadin/combo-box/theme/lumo/vaadin-combo-box-overlay-styles.js';
9
+ import { item } from '@vaadin/item/theme/lumo/vaadin-item-styles.js';
7
10
  import { inputFieldShared } from '@vaadin/vaadin-lumo-styles/mixins/input-field-shared.js';
11
+ import { menuOverlayCore } from '@vaadin/vaadin-lumo-styles/mixins/menu-overlay.js';
12
+ import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
8
13
  import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
9
14
 
15
+ registerStyles('vaadin-time-picker-item', [item, comboBoxItem], {
16
+ moduleId: 'lumo-time-picker-item',
17
+ });
18
+
19
+ registerStyles(
20
+ 'vaadin-time-picker-overlay',
21
+ [
22
+ overlay,
23
+ menuOverlayCore,
24
+ comboBoxOverlay,
25
+ css`
26
+ :host {
27
+ --_vaadin-time-picker-items-container-border-width: var(--lumo-space-xs);
28
+ --_vaadin-time-picker-items-container-border-style: solid;
29
+ }
30
+ `,
31
+ ],
32
+ {
33
+ moduleId: 'lumo-time-picker-overlay',
34
+ },
35
+ );
36
+
10
37
  const timePicker = css`
11
38
  [part~='toggle-button']::before {
12
39
  content: var(--lumo-icons-clock);
package/theme/lumo/vaadin-time-picker.js CHANGED
@@ -3,8 +3,7 @@
3
3
  * Copyright (c) 2018 - 2023 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
- import '@vaadin/combo-box/theme/lumo/vaadin-combo-box-dropdown-styles.js';
7
- import '@vaadin/combo-box/theme/lumo/vaadin-combo-box-item-styles.js';
8
6
  import '@vaadin/input-container/theme/lumo/vaadin-input-container.js';
7
+ import '@vaadin/overlay/theme/lumo/vaadin-overlay.js';
9
8
  import './vaadin-time-picker-styles.js';
10
9
  import '../../src/vaadin-time-picker.js';
package/theme/material/vaadin-time-picker-styles.js CHANGED
@@ -4,9 +4,34 @@
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import '@vaadin/vaadin-material-styles/font-icons.js';
7
+ import { comboBoxItem } from '@vaadin/combo-box/theme/material/vaadin-combo-box-item-styles.js';
8
+ import { comboBoxOverlay } from '@vaadin/combo-box/theme/material/vaadin-combo-box-overlay-styles.js';
9
+ import { item } from '@vaadin/item/theme/material/vaadin-item-styles.js';
7
10
  import { inputFieldShared } from '@vaadin/vaadin-material-styles/mixins/input-field-shared.js';
11
+ import { menuOverlay } from '@vaadin/vaadin-material-styles/mixins/menu-overlay.js';
8
12
  import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
9
13
 
14
+ registerStyles('vaadin-time-picker-item', [item, comboBoxItem], {
15
+ moduleId: 'material-time-picker-item',
16
+ });
17
+
18
+ registerStyles(
19
+ 'vaadin-time-picker-overlay',
20
+ [
21
+ menuOverlay,
22
+ comboBoxOverlay,
23
+ css`
24
+ :host {
25
+ --_vaadin-time-picker-items-container-border-width: 8px 0;
26
+ --_vaadin-time-picker-items-container-border-style: solid;
27
+ }
28
+ `,
29
+ ],
30
+ {
31
+ moduleId: 'material-time-picker-overlay',
32
+ },
33
+ );
34
+
10
35
  const timePicker = css`
11
36
  [part~='toggle-button']::before {
12
37
  content: var(--material-icons-clock);
package/theme/material/vaadin-time-picker.js CHANGED
@@ -3,8 +3,7 @@
3
3
  * Copyright (c) 2018 - 2023 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
- import '@vaadin/combo-box/theme/material/vaadin-combo-box-dropdown-styles.js';
7
- import '@vaadin/combo-box/theme/material/vaadin-combo-box-item-styles.js';
8
6
  import '@vaadin/input-container/theme/material/vaadin-input-container.js';
7
+ import '@vaadin/overlay/theme/material/vaadin-overlay.js';
9
8
  import './vaadin-time-picker-styles.js';
10
9
  import '../../src/vaadin-time-picker.js';
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": "24.0.0-alpha12",
4
+ "version": "24.0.0-alpha13",
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 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-combo-box-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/24.0.0-alpha12/#/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\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-combo-box>` - has the same API as [`<vaadin-combo-box-light>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha12/#/elements/vaadin-combo-box-light).\n- `<vaadin-time-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha12/#/elements/vaadin-overlay).\n- `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha12/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha12/#/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/custom-theme/styling-components) documentation.",
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 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-combo-box-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/24.0.0-alpha13/#/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\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-combo-box>` - has the same API as [`<vaadin-combo-box-light>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha13/#/elements/vaadin-combo-box-light).\n- `<vaadin-time-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha13/#/elements/vaadin-overlay).\n- `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha13/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha13/#/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/custom-theme/styling-components) documentation.",
12
12
  "attributes": [
13
13
  {
14
14
  "name": "disabled",
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": "24.0.0-alpha12",
4
+ "version": "24.0.0-alpha13",
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 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-combo-box-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/24.0.0-alpha12/#/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\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-combo-box>` - has the same API as [`<vaadin-combo-box-light>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha12/#/elements/vaadin-combo-box-light).\n- `<vaadin-time-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha12/#/elements/vaadin-overlay).\n- `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha12/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha12/#/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/custom-theme/styling-components) documentation.",
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 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-combo-box-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/24.0.0-alpha13/#/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\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-combo-box>` - has the same API as [`<vaadin-combo-box-light>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha13/#/elements/vaadin-combo-box-light).\n- `<vaadin-time-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha13/#/elements/vaadin-overlay).\n- `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha13/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha13/#/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/custom-theme/styling-components) documentation.",
20
20
  "extension": true,
21
21
  "attributes": [
22
22
  {