@vaadin/list-box 24.0.0-alpha9 → 24.0.0-beta2

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 (7) hide show
  1. package/package.json +8 -8
  2. package/src/vaadin-list-box.js +11 -9
  3. package/src/vaadin-multi-select-list-mixin.js +9 -3
  4. package/theme/lumo/vaadin-list-box-styles.js +18 -18
  5. package/theme/material/vaadin-list-box-styles.js +21 -21
  6. package/web-types.json +23 -1
  7. package/web-types.lit.json +8 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/list-box",
3
- "version": "24.0.0-alpha9",
3
+ "version": "24.0.0-beta2",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -36,20 +36,20 @@
36
36
  ],
37
37
  "dependencies": {
38
38
  "@polymer/polymer": "^3.0.0",
39
- "@vaadin/component-base": "24.0.0-alpha9",
40
- "@vaadin/item": "24.0.0-alpha9",
41
- "@vaadin/vaadin-lumo-styles": "24.0.0-alpha9",
42
- "@vaadin/vaadin-material-styles": "24.0.0-alpha9",
43
- "@vaadin/vaadin-themable-mixin": "24.0.0-alpha9"
39
+ "@vaadin/component-base": "24.0.0-beta2",
40
+ "@vaadin/item": "24.0.0-beta2",
41
+ "@vaadin/vaadin-lumo-styles": "24.0.0-beta2",
42
+ "@vaadin/vaadin-material-styles": "24.0.0-beta2",
43
+ "@vaadin/vaadin-themable-mixin": "24.0.0-beta2"
44
44
  },
45
45
  "devDependencies": {
46
46
  "@esm-bundle/chai": "^4.3.4",
47
- "@vaadin/testing-helpers": "^0.3.2",
47
+ "@vaadin/testing-helpers": "^0.4.0",
48
48
  "sinon": "^13.0.2"
49
49
  },
50
50
  "web-types": [
51
51
  "web-types.json",
52
52
  "web-types.lit.json"
53
53
  ],
54
- "gitHead": "cc3f747164041566b300bde4b105d2475649e93f"
54
+ "gitHead": "00086f1f6d487f042f189c9b9ecd7ba736960888"
55
55
  }
package/src/vaadin-list-box.js CHANGED
@@ -95,10 +95,20 @@ class ListBox extends ElementMixin(MultiSelectListMixin(ThemableMixin(Controller
95
95
  this.focused;
96
96
  }
97
97
 
98
+ /**
99
+ * @return {!HTMLElement}
100
+ * @protected
101
+ * @override
102
+ */
103
+ get _scrollerElement() {
104
+ return this.shadowRoot.querySelector('[part="items"]');
105
+ }
106
+
98
107
  /** @protected */
99
108
  ready() {
100
109
  super.ready();
101
- this.setAttribute('role', 'list');
110
+
111
+ this.setAttribute('role', 'listbox');
102
112
 
103
113
  setTimeout(this._checkImport.bind(this), 2000);
104
114
 
@@ -106,14 +116,6 @@ class ListBox extends ElementMixin(MultiSelectListMixin(ThemableMixin(Controller
106
116
  this.addController(this._tooltipController);
107
117
  }
108
118
 
109
- /**
110
- * @return {!HTMLElement}
111
- * @protected
112
- */
113
- get _scrollerElement() {
114
- return this.shadowRoot.querySelector('[part="items"]');
115
- }
116
-
117
119
  /** @private */
118
120
  _checkImport() {
119
121
  const item = this.querySelector('vaadin-item');
package/src/vaadin-multi-select-list-mixin.js CHANGED
@@ -101,12 +101,18 @@ export const MultiSelectListMixin = (superClass) =>
101
101
  this.items.forEach((item) => {
102
102
  item.selected = false;
103
103
  });
104
+
105
+ this.removeAttribute('aria-multiselectable');
104
106
  }
105
107
 
106
108
  // Changing from single to multiple selection, add selected to selectedValues.
107
- if (value && !oldValue && this.selected !== undefined) {
108
- this.selectedValues = [...this.selectedValues, this.selected];
109
- this.selected = undefined;
109
+ if (value && !oldValue) {
110
+ this.setAttribute('aria-multiselectable', 'true');
111
+
112
+ if (this.selected !== undefined) {
113
+ this.selectedValues = [...this.selectedValues, this.selected];
114
+ this.selected = undefined;
115
+ }
110
116
  }
111
117
  }
112
118
 
package/theme/lumo/vaadin-list-box-styles.js CHANGED
@@ -3,22 +3,22 @@ import '@vaadin/vaadin-lumo-styles/spacing.js';
3
3
  import '@vaadin/vaadin-lumo-styles/style.js';
4
4
  import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
5
5
 
6
- registerStyles(
7
- 'vaadin-list-box',
8
- css`
9
- :host {
10
- -webkit-tap-highlight-color: transparent;
11
- --_lumo-item-selected-icon-display: var(--_lumo-list-box-item-selected-icon-display, block);
12
- }
6
+ const listBox = css`
7
+ :host {
8
+ -webkit-tap-highlight-color: transparent;
9
+ --_lumo-item-selected-icon-display: var(--_lumo-list-box-item-selected-icon-display, block);
10
+ }
13
11
 
14
- /* Dividers */
15
- [part='items'] ::slotted(hr) {
16
- height: 1px;
17
- border: 0;
18
- padding: 0;
19
- margin: var(--lumo-space-s) var(--lumo-border-radius-m);
20
- background-color: var(--lumo-contrast-10pct);
21
- }
22
- `,
23
- { moduleId: 'lumo-list-box' },
24
- );
12
+ /* Dividers */
13
+ [part='items'] ::slotted(hr) {
14
+ height: 1px;
15
+ border: 0;
16
+ padding: 0;
17
+ margin: var(--lumo-space-s) var(--lumo-border-radius-m);
18
+ background-color: var(--lumo-contrast-10pct);
19
+ }
20
+ `;
21
+
22
+ registerStyles('vaadin-list-box', listBox, { moduleId: 'lumo-list-box' });
23
+
24
+ export { listBox };
package/theme/material/vaadin-list-box-styles.js CHANGED
@@ -2,26 +2,26 @@ import '@vaadin/vaadin-material-styles/font-icons.js';
2
2
  import '@vaadin/vaadin-material-styles/color.js';
3
3
  import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
4
4
 
5
- registerStyles(
6
- 'vaadin-list-box',
7
- css`
8
- :host {
9
- -webkit-tap-highlight-color: transparent;
10
- --_material-item-selected-icon-display: block;
11
- }
5
+ const listBox = css`
6
+ :host {
7
+ -webkit-tap-highlight-color: transparent;
8
+ --_material-item-selected-icon-display: block;
9
+ }
12
10
 
13
- [part='items'] ::slotted(*) {
14
- cursor: default;
15
- }
11
+ [part='items'] ::slotted(*) {
12
+ cursor: default;
13
+ }
16
14
 
17
- /* Dividers */
18
- [part='items'] ::slotted(hr) {
19
- height: 1px;
20
- border: 0;
21
- padding: 0;
22
- margin: 8px 0;
23
- background-color: var(--material-divider-color);
24
- }
25
- `,
26
- { moduleId: 'material-list-box' },
27
- );
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/web-types.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.0.0-alpha9",
4
+ "version": "24.0.0-beta2",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -10,6 +10,17 @@
10
10
  "name": "vaadin-list-box",
11
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/custom-theme/styling-components) documentation.",
12
12
  "attributes": [
13
+ {
14
+ "name": "disabled",
15
+ "description": "If true, the user cannot interact with this element.\nWhen the element is disabled, the selected item is\nnot updated when `selected` property is changed.",
16
+ "value": {
17
+ "type": [
18
+ "boolean",
19
+ "null",
20
+ "undefined"
21
+ ]
22
+ }
23
+ },
13
24
  {
14
25
  "name": "selected",
15
26
  "description": "The index of the item selected in the items array.\nNote: Not updated when used in `multiple` selection mode.",
@@ -46,6 +57,17 @@
46
57
  ],
47
58
  "js": {
48
59
  "properties": [
60
+ {
61
+ "name": "disabled",
62
+ "description": "If true, the user cannot interact with this element.\nWhen the element is disabled, the selected item is\nnot updated when `selected` property is changed.",
63
+ "value": {
64
+ "type": [
65
+ "boolean",
66
+ "null",
67
+ "undefined"
68
+ ]
69
+ }
70
+ },
49
71
  {
50
72
  "name": "selected",
51
73
  "description": "The index of the item selected in the items array.\nNote: Not updated when used in `multiple` selection mode.",
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.0.0-alpha9",
4
+ "version": "24.0.0-beta2",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -19,6 +19,13 @@
19
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/custom-theme/styling-components) documentation.",
20
20
  "extension": true,
21
21
  "attributes": [
22
+ {
23
+ "name": "?disabled",
24
+ "description": "If true, the user cannot interact with this element.\nWhen the element is disabled, the selected item is\nnot updated when `selected` property is changed.",
25
+ "value": {
26
+ "kind": "expression"
27
+ }
28
+ },
22
29
  {
23
30
  "name": "?multiple",
24
31
  "description": "Specifies that multiple options can be selected at once.",