@vaadin/list-box 24.8.4 → 25.0.0-alpha10

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 (21) hide show
  1. package/README.md +0 -23
  2. package/package.json +13 -14
  3. package/src/styles/vaadin-list-box-base-styles.js +33 -0
  4. package/src/styles/vaadin-list-box-core-styles.d.ts +8 -0
  5. package/src/{vaadin-list-box-core-styles.js → styles/vaadin-list-box-core-styles.js} +0 -1
  6. package/src/vaadin-list-box.d.ts +8 -9
  7. package/src/vaadin-list-box.js +25 -42
  8. package/web-types.json +2 -2
  9. package/web-types.lit.json +2 -2
  10. package/src/vaadin-lit-list-box.js +0 -77
  11. package/theme/lumo/vaadin-lit-list-box.d.ts +0 -2
  12. package/theme/lumo/vaadin-lit-list-box.js +0 -2
  13. package/theme/material/vaadin-list-box-styles.d.ts +0 -4
  14. package/theme/material/vaadin-list-box-styles.js +0 -27
  15. package/theme/material/vaadin-list-box.d.ts +0 -2
  16. package/theme/material/vaadin-list-box.js +0 -2
  17. package/theme/material/vaadin-lit-list-box.d.ts +0 -2
  18. package/theme/material/vaadin-lit-list-box.js +0 -2
  19. package/vaadin-lit-list-box.d.ts +0 -1
  20. package/vaadin-lit-list-box.js +0 -2
  21. /package/src/{vaadin-list-box-core-styles.d.ts → styles/vaadin-list-box-base-styles.d.ts} +0 -0
package/README.md CHANGED
@@ -33,29 +33,6 @@ Once installed, import the component in your application:
33
33
  import '@vaadin/list-box';
34
34
  ```
35
35
 
36
- ## Themes
37
-
38
- Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
39
- The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/list-box/vaadin-list-box.js) of the package uses Lumo theme.
40
-
41
- To use the Material theme, import the component from the `theme/material` folder:
42
-
43
- ```js
44
- import '@vaadin/list-box/theme/material/vaadin-list-box.js';
45
- ```
46
-
47
- You can also import the Lumo version of the component explicitly:
48
-
49
- ```js
50
- import '@vaadin/list-box/theme/lumo/vaadin-list-box.js';
51
- ```
52
-
53
- Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
54
-
55
- ```js
56
- import '@vaadin/list-box/src/vaadin-list-box.js';
57
- ```
58
-
59
36
  ## Contributing
60
37
 
61
38
  Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/list-box",
3
- "version": "24.8.4",
3
+ "version": "25.0.0-alpha10",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -21,6 +21,8 @@
21
21
  "type": "module",
22
22
  "files": [
23
23
  "src",
24
+ "!src/styles/*-base-styles.d.ts",
25
+ "!src/styles/*-base-styles.js",
24
26
  "theme",
25
27
  "vaadin-*.d.ts",
26
28
  "vaadin-*.js",
@@ -31,29 +33,26 @@
31
33
  "Vaadin",
32
34
  "vaadin-list-box",
33
35
  "web-components",
34
- "web-component",
35
- "polymer"
36
+ "web-component"
36
37
  ],
37
38
  "dependencies": {
38
39
  "@open-wc/dedupe-mixin": "^1.3.0",
39
- "@polymer/polymer": "^3.0.0",
40
- "@vaadin/a11y-base": "~24.8.4",
41
- "@vaadin/component-base": "~24.8.4",
42
- "@vaadin/item": "~24.8.4",
43
- "@vaadin/vaadin-lumo-styles": "~24.8.4",
44
- "@vaadin/vaadin-material-styles": "~24.8.4",
45
- "@vaadin/vaadin-themable-mixin": "~24.8.4",
40
+ "@vaadin/a11y-base": "25.0.0-alpha10",
41
+ "@vaadin/component-base": "25.0.0-alpha10",
42
+ "@vaadin/item": "25.0.0-alpha10",
43
+ "@vaadin/vaadin-lumo-styles": "25.0.0-alpha10",
44
+ "@vaadin/vaadin-themable-mixin": "25.0.0-alpha10",
46
45
  "lit": "^3.0.0"
47
46
  },
48
47
  "devDependencies": {
49
- "@vaadin/chai-plugins": "~24.8.4",
50
- "@vaadin/test-runner-commands": "~24.8.4",
51
- "@vaadin/testing-helpers": "^1.1.0",
48
+ "@vaadin/chai-plugins": "25.0.0-alpha10",
49
+ "@vaadin/test-runner-commands": "25.0.0-alpha10",
50
+ "@vaadin/testing-helpers": "^2.0.0",
52
51
  "sinon": "^18.0.0"
53
52
  },
54
53
  "web-types": [
55
54
  "web-types.json",
56
55
  "web-types.lit.json"
57
56
  ],
58
- "gitHead": "849e54e967563080a685965e2dced02060b3ab23"
57
+ "gitHead": "6cc6c94079e805fa5b2f0af4dbf3b2a7485e57d0"
59
58
  }
package/src/styles/vaadin-list-box-base-styles.js ADDED
@@ -0,0 +1,33 @@
1
+ /**
2
+ * @license
3
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
4
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
6
+ import '@vaadin/component-base/src/style-props.js';
7
+ import { css } from 'lit';
8
+
9
+ export const listBoxStyles = css`
10
+ :host {
11
+ --vaadin-item-checkmark-display: block;
12
+ display: flex;
13
+ }
14
+
15
+ :host([hidden]) {
16
+ display: none !important;
17
+ }
18
+
19
+ [part='items'] {
20
+ height: 100%;
21
+ overflow-y: auto;
22
+ width: 100%;
23
+ }
24
+
25
+ [part='items'] ::slotted(hr) {
26
+ border-color: var(--vaadin-divider-color, var(--vaadin-border-color));
27
+ border-width: 0 0 1px;
28
+ margin: 4px 8px;
29
+ margin-inline-start: calc(
30
+ var(--vaadin-icon-size, 1lh) + var(--vaadin-item-gap, var(--vaadin-gap-container-inline)) + 8px
31
+ );
32
+ }
33
+ `;
package/src/styles/vaadin-list-box-core-styles.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ /**
2
+ * @license
3
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
4
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
6
+ import type { CSSResult } from 'lit';
7
+
8
+ export const listBoxStyles: CSSResult;
package/src/{vaadin-list-box-core-styles.js → styles/vaadin-list-box-core-styles.js} RENAMED
@@ -18,6 +18,5 @@ export const listBoxStyles = css`
18
18
  height: 100%;
19
19
  width: 100%;
20
20
  overflow-y: auto;
21
- -webkit-overflow-scrolling: touch;
22
21
  }
23
22
  `;
package/src/vaadin-list-box.d.ts CHANGED
@@ -3,7 +3,6 @@
3
3
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
- import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
7
6
  import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
8
7
  import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
9
8
  import { MultiSelectListMixin } from './vaadin-multi-select-list-mixin.js';
@@ -36,13 +35,13 @@ export interface ListBoxEventMap extends HTMLElementEventMap, ListBoxCustomEvent
36
35
  /**
37
36
  * `<vaadin-list-box>` is a Web Component for creating menus.
38
37
  *
39
- * ```
40
- * <vaadin-list-box selected="2">
41
- * <vaadin-item>Item 1</vaadin-item>
42
- * <vaadin-item>Item 2</vaadin-item>
43
- * <vaadin-item>Item 3</vaadin-item>
44
- * <vaadin-item>Item 4</vaadin-item>
45
- * </vaadin-list-box>
38
+ * ```html
39
+ * <vaadin-list-box selected="2">
40
+ * <vaadin-item>Item 1</vaadin-item>
41
+ * <vaadin-item>Item 2</vaadin-item>
42
+ * <vaadin-item>Item 3</vaadin-item>
43
+ * <vaadin-item>Item 4</vaadin-item>
44
+ * </vaadin-list-box>
46
45
  * ```
47
46
  *
48
47
  * ### Styling
@@ -59,7 +58,7 @@ export interface ListBoxEventMap extends HTMLElementEventMap, ListBoxCustomEvent
59
58
  * @fires {CustomEvent} selected-changed - Fired when the `selected` property changes.
60
59
  * @fires {CustomEvent} selected-values-changed - Fired when the `selectedValues` property changes.
61
60
  */
62
- declare class ListBox extends MultiSelectListMixin(ThemableMixin(ElementMixin(ControllerMixin(HTMLElement)))) {
61
+ declare class ListBox extends MultiSelectListMixin(ThemableMixin(ElementMixin(HTMLElement))) {
63
62
  focused: Element | null;
64
63
 
65
64
  addEventListener<K extends keyof ListBoxEventMap>(
package/src/vaadin-list-box.js CHANGED
@@ -3,27 +3,26 @@
3
3
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
- import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
7
- import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
6
+ import { html, LitElement } from 'lit';
8
7
  import { defineCustomElement } from '@vaadin/component-base/src/define.js';
9
8
  import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
9
+ import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
10
10
  import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
11
- import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
12
- import { listBoxStyles } from './vaadin-list-box-core-styles.js';
11
+ import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
12
+ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
13
+ import { listBoxStyles } from './styles/vaadin-list-box-core-styles.js';
13
14
  import { MultiSelectListMixin } from './vaadin-multi-select-list-mixin.js';
14
15
 
15
- registerStyles('vaadin-list-box', listBoxStyles, { moduleId: 'vaadin-list-box-styles' });
16
-
17
16
  /**
18
17
  * `<vaadin-list-box>` is a Web Component for creating menus.
19
18
  *
20
- * ```
21
- * <vaadin-list-box selected="2">
22
- * <vaadin-item>Item 1</vaadin-item>
23
- * <vaadin-item>Item 2</vaadin-item>
24
- * <vaadin-item>Item 3</vaadin-item>
25
- * <vaadin-item>Item 4</vaadin-item>
26
- * </vaadin-list-box>
19
+ * ```html
20
+ * <vaadin-list-box selected="2">
21
+ * <vaadin-item>Item 1</vaadin-item>
22
+ * <vaadin-item>Item 2</vaadin-item>
23
+ * <vaadin-item>Item 3</vaadin-item>
24
+ * <vaadin-item>Item 4</vaadin-item>
25
+ * </vaadin-list-box>
27
26
  * ```
28
27
  *
29
28
  * ### Styling
@@ -45,23 +44,16 @@ registerStyles('vaadin-list-box', listBoxStyles, { moduleId: 'vaadin-list-box-st
45
44
  * @mixes MultiSelectListMixin
46
45
  * @mixes ThemableMixin
47
46
  * @mixes ElementMixin
48
- * @mixes ControllerMixin
49
47
  */
50
- class ListBox extends ElementMixin(MultiSelectListMixin(ThemableMixin(ControllerMixin(PolymerElement)))) {
51
- static get template() {
52
- return html`
53
- <div part="items">
54
- <slot></slot>
55
- </div>
56
-
57
- <slot name="tooltip"></slot>
58
- `;
59
- }
60
-
48
+ class ListBox extends ElementMixin(MultiSelectListMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
61
49
  static get is() {
62
50
  return 'vaadin-list-box';
63
51
  }
64
52
 
53
+ static get styles() {
54
+ return listBoxStyles;
55
+ }
56
+
65
57
  static get properties() {
66
58
  return {
67
59
  // We don't need to define this property since super default is vertical,
@@ -73,14 +65,15 @@ class ListBox extends ElementMixin(MultiSelectListMixin(ThemableMixin(Controller
73
65
  };
74
66
  }
75
67
 
76
- constructor() {
77
- super();
68
+ /** @protected */
69
+ render() {
70
+ return html`
71
+ <div part="items">
72
+ <slot></slot>
73
+ </div>
78
74
 
79
- /**
80
- * @type {Element | null}
81
- * @protected
82
- */
83
- this.focused;
75
+ <slot name="tooltip"></slot>
76
+ `;
84
77
  }
85
78
 
86
79
  /**
@@ -98,19 +91,9 @@ class ListBox extends ElementMixin(MultiSelectListMixin(ThemableMixin(Controller
98
91
 
99
92
  this.setAttribute('role', 'listbox');
100
93
 
101
- setTimeout(this._checkImport.bind(this), 2000);
102
-
103
94
  this._tooltipController = new TooltipController(this);
104
95
  this.addController(this._tooltipController);
105
96
  }
106
-
107
- /** @private */
108
- _checkImport() {
109
- const item = this.querySelector('vaadin-item');
110
- if (item && !(item instanceof PolymerElement)) {
111
- console.warn(`Make sure you have imported the vaadin-item element.`);
112
- }
113
- }
114
97
  }
115
98
 
116
99
  defineCustomElement(ListBox);
package/web-types.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/list-box",
4
- "version": "24.8.4",
4
+ "version": "25.0.0-alpha10",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
9
  {
10
10
  "name": "vaadin-list-box",
11
- "description": "`<vaadin-list-box>` is a Web Component for creating menus.\n\n```\n <vaadin-list-box selected=\"2\">\n <vaadin-item>Item 1</vaadin-item>\n <vaadin-item>Item 2</vaadin-item>\n <vaadin-item>Item 3</vaadin-item>\n <vaadin-item>Item 4</vaadin-item>\n </vaadin-list-box>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n------------------|------------------------\n`items` | The items container\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
11
+ "description": "`<vaadin-list-box>` is a Web Component for creating menus.\n\n```html\n<vaadin-list-box selected=\"2\">\n <vaadin-item>Item 1</vaadin-item>\n <vaadin-item>Item 2</vaadin-item>\n <vaadin-item>Item 3</vaadin-item>\n <vaadin-item>Item 4</vaadin-item>\n</vaadin-list-box>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n------------------|------------------------\n`items` | The items container\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/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/list-box",
4
- "version": "24.8.4",
4
+ "version": "25.0.0-alpha10",
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-list-box",
19
- "description": "`<vaadin-list-box>` is a Web Component for creating menus.\n\n```\n <vaadin-list-box selected=\"2\">\n <vaadin-item>Item 1</vaadin-item>\n <vaadin-item>Item 2</vaadin-item>\n <vaadin-item>Item 3</vaadin-item>\n <vaadin-item>Item 4</vaadin-item>\n </vaadin-list-box>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n------------------|------------------------\n`items` | The items container\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
19
+ "description": "`<vaadin-list-box>` is a Web Component for creating menus.\n\n```html\n<vaadin-list-box selected=\"2\">\n <vaadin-item>Item 1</vaadin-item>\n <vaadin-item>Item 2</vaadin-item>\n <vaadin-item>Item 3</vaadin-item>\n <vaadin-item>Item 4</vaadin-item>\n</vaadin-list-box>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n------------------|------------------------\n`items` | The items container\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
20
20
  "extension": true,
21
21
  "attributes": [
22
22
  {
package/src/vaadin-lit-list-box.js DELETED
@@ -1,77 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
4
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
- */
6
- import { html, LitElement } from 'lit';
7
- import { defineCustomElement } from '@vaadin/component-base/src/define.js';
8
- import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
9
- import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
10
- import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
11
- import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
12
- import { listBoxStyles } from './vaadin-list-box-core-styles.js';
13
- import { MultiSelectListMixin } from './vaadin-multi-select-list-mixin.js';
14
-
15
- /**
16
- * LitElement based version of `<vaadin-list-box>` web component.
17
- *
18
- * ## Disclaimer
19
- *
20
- * This component is an experiment and not yet a part of Vaadin platform.
21
- * There is no ETA regarding specific Vaadin version where it'll land.
22
- * Feel free to try this code in your apps as per Apache 2.0 license.
23
- */
24
- class ListBox extends ElementMixin(MultiSelectListMixin(ThemableMixin(PolylitMixin(LitElement)))) {
25
- static get is() {
26
- return 'vaadin-list-box';
27
- }
28
-
29
- static get styles() {
30
- return listBoxStyles;
31
- }
32
-
33
- static get properties() {
34
- return {
35
- // We don't need to define this property since super default is vertical,
36
- // but we don't want it to be modified, or be shown in the API docs.
37
- /** @private */
38
- orientation: {
39
- readOnly: true,
40
- },
41
- };
42
- }
43
-
44
- /** @protected */
45
- render() {
46
- return html`
47
- <div part="items">
48
- <slot></slot>
49
- </div>
50
-
51
- <slot name="tooltip"></slot>
52
- `;
53
- }
54
-
55
- /**
56
- * @return {!HTMLElement}
57
- * @protected
58
- * @override
59
- */
60
- get _scrollerElement() {
61
- return this.shadowRoot.querySelector('[part="items"]');
62
- }
63
-
64
- /** @protected */
65
- ready() {
66
- super.ready();
67
-
68
- this.setAttribute('role', 'listbox');
69
-
70
- this._tooltipController = new TooltipController(this);
71
- this.addController(this._tooltipController);
72
- }
73
- }
74
-
75
- defineCustomElement(ListBox);
76
-
77
- export { ListBox };
package/theme/lumo/vaadin-lit-list-box.d.ts DELETED
@@ -1,2 +0,0 @@
1
- import './vaadin-list-box-styles.js';
2
- import '../../src/vaadin-lit-list-box.js';
package/theme/lumo/vaadin-lit-list-box.js DELETED
@@ -1,2 +0,0 @@
1
- import './vaadin-list-box-styles.js';
2
- import '../../src/vaadin-lit-list-box.js';
package/theme/material/vaadin-list-box-styles.d.ts DELETED
@@ -1,4 +0,0 @@
1
- import '@vaadin/vaadin-material-styles/font-icons.js';
2
- import '@vaadin/vaadin-material-styles/color.js';
3
- declare const listBox: import("lit").CSSResult;
4
- export { listBox };
package/theme/material/vaadin-list-box-styles.js DELETED
@@ -1,27 +0,0 @@
1
- import '@vaadin/vaadin-material-styles/font-icons.js';
2
- import '@vaadin/vaadin-material-styles/color.js';
3
- import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
4
-
5
- const listBox = css`
6
- :host {
7
- -webkit-tap-highlight-color: transparent;
8
- --_material-item-selected-icon-display: block;
9
- }
10
-
11
- [part='items'] ::slotted(*) {
12
- cursor: default;
13
- }
14
-
15
- /* Dividers */
16
- [part='items'] ::slotted(hr) {
17
- height: 1px;
18
- border: 0;
19
- padding: 0;
20
- margin: 8px 0;
21
- background-color: var(--material-divider-color);
22
- }
23
- `;
24
-
25
- registerStyles('vaadin-list-box', listBox, { moduleId: 'material-list-box' });
26
-
27
- export { listBox };
package/theme/material/vaadin-list-box.d.ts DELETED
@@ -1,2 +0,0 @@
1
- import './vaadin-list-box-styles.js';
2
- import '../../src/vaadin-list-box.js';
package/theme/material/vaadin-list-box.js DELETED
@@ -1,2 +0,0 @@
1
- import './vaadin-list-box-styles.js';
2
- import '../../src/vaadin-list-box.js';
package/theme/material/vaadin-lit-list-box.d.ts DELETED
@@ -1,2 +0,0 @@
1
- import './vaadin-list-box-styles.js';
2
- import '../../src/vaadin-lit-list-box.js';
package/theme/material/vaadin-lit-list-box.js DELETED
@@ -1,2 +0,0 @@
1
- import './vaadin-list-box-styles.js';
2
- import '../../src/vaadin-lit-list-box.js';
package/vaadin-lit-list-box.d.ts DELETED
@@ -1 +0,0 @@
1
- export * from './src/vaadin-list-box.js';
package/vaadin-lit-list-box.js DELETED
@@ -1,2 +0,0 @@
1
- import './theme/lumo/vaadin-lit-list-box.js';
2
- export * from './src/vaadin-lit-list-box.js';