@vaadin/list-box 25.0.0-alpha2 → 25.0.0-alpha21

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 (14) hide show
  1. package/package.json +10 -13
  2. package/src/{vaadin-list-box-core-styles.js → styles/vaadin-list-box-base-styles.js} +10 -2
  3. package/src/vaadin-list-box.d.ts +13 -7
  4. package/src/vaadin-list-box.js +16 -9
  5. package/vaadin-list-box.js +1 -1
  6. package/web-types.json +2 -2
  7. package/web-types.lit.json +2 -2
  8. package/src/vaadin-list-box-base-styles.js +0 -35
  9. package/src/vaadin-list-box-core-styles.d.ts +0 -8
  10. package/theme/lumo/vaadin-list-box-styles.d.ts +0 -5
  11. package/theme/lumo/vaadin-list-box-styles.js +0 -24
  12. package/theme/lumo/vaadin-list-box.d.ts +0 -2
  13. package/theme/lumo/vaadin-list-box.js +0 -2
  14. /package/src/{vaadin-list-box-base-styles.d.ts → styles/vaadin-list-box-base-styles.d.ts} +0 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/list-box",
3
- "version": "25.0.0-alpha2",
3
+ "version": "25.0.0-alpha21",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -21,9 +21,6 @@
21
21
  "type": "module",
22
22
  "files": [
23
23
  "src",
24
- "!src/*-base-styles.d.ts",
25
- "!src/*-base-styles.js",
26
- "theme",
27
24
  "vaadin-*.d.ts",
28
25
  "vaadin-*.js",
29
26
  "web-types.json",
@@ -37,22 +34,22 @@
37
34
  ],
38
35
  "dependencies": {
39
36
  "@open-wc/dedupe-mixin": "^1.3.0",
40
- "@vaadin/a11y-base": "25.0.0-alpha2",
41
- "@vaadin/component-base": "25.0.0-alpha2",
42
- "@vaadin/item": "25.0.0-alpha2",
43
- "@vaadin/vaadin-lumo-styles": "25.0.0-alpha2",
44
- "@vaadin/vaadin-themable-mixin": "25.0.0-alpha2",
37
+ "@vaadin/a11y-base": "25.0.0-alpha21",
38
+ "@vaadin/component-base": "25.0.0-alpha21",
39
+ "@vaadin/item": "25.0.0-alpha21",
40
+ "@vaadin/vaadin-themable-mixin": "25.0.0-alpha21",
45
41
  "lit": "^3.0.0"
46
42
  },
47
43
  "devDependencies": {
48
- "@vaadin/chai-plugins": "25.0.0-alpha2",
49
- "@vaadin/test-runner-commands": "25.0.0-alpha2",
44
+ "@vaadin/chai-plugins": "25.0.0-alpha21",
45
+ "@vaadin/test-runner-commands": "25.0.0-alpha21",
50
46
  "@vaadin/testing-helpers": "^2.0.0",
51
- "sinon": "^18.0.0"
47
+ "@vaadin/vaadin-lumo-styles": "25.0.0-alpha21",
48
+ "sinon": "^21.0.0"
52
49
  },
53
50
  "web-types": [
54
51
  "web-types.json",
55
52
  "web-types.lit.json"
56
53
  ],
57
- "gitHead": "67ffcd5355cf21ce1b5039c598525109fc4c164b"
54
+ "gitHead": "8fb9e9710c01449edf623a1aaac4655cdc11a933"
58
55
  }
package/src/{vaadin-list-box-core-styles.js → styles/vaadin-list-box-base-styles.js} RENAMED
@@ -3,10 +3,12 @@
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 '@vaadin/component-base/src/styles/style-props.js';
6
7
  import { css } from 'lit';
7
8
 
8
9
  export const listBoxStyles = css`
9
10
  :host {
11
+ --vaadin-item-checkmark-display: block;
10
12
  display: flex;
11
13
  }
12
14
 
@@ -16,8 +18,14 @@ export const listBoxStyles = css`
16
18
 
17
19
  [part='items'] {
18
20
  height: 100%;
19
- width: 100%;
20
21
  overflow-y: auto;
21
- -webkit-overflow-scrolling: touch;
22
+ width: 100%;
23
+ }
24
+
25
+ [part='items'] ::slotted(hr) {
26
+ border-color: var(--vaadin-divider-color, var(--vaadin-border-color-secondary));
27
+ border-width: 0 0 1px;
28
+ margin: 4px 8px;
29
+ margin-inline-start: calc(var(--vaadin-icon-size, 1lh) + var(--vaadin-item-gap, var(--vaadin-gap-s)) + 8px);
22
30
  }
23
31
  `;
package/src/vaadin-list-box.d.ts CHANGED
@@ -35,13 +35,13 @@ export interface ListBoxEventMap extends HTMLElementEventMap, ListBoxCustomEvent
35
35
  /**
36
36
  * `<vaadin-list-box>` is a Web Component for creating menus.
37
37
  *
38
- * ```
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>
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>
45
45
  * ```
46
46
  *
47
47
  * ### Styling
@@ -52,6 +52,12 @@ export interface ListBoxEventMap extends HTMLElementEventMap, ListBoxCustomEvent
52
52
  * ------------------|------------------------
53
53
  * `items` | The items container
54
54
  *
55
+ * The following state attributes are available for styling:
56
+ *
57
+ * Attribute | Description
58
+ * ---------------|---------------------------------
59
+ * `has-tooltip` | Set when the element has a slotted tooltip
60
+ *
55
61
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
56
62
  *
57
63
  * @fires {CustomEvent} items-changed - Fired when the `items` property changes.
package/src/vaadin-list-box.js CHANGED
@@ -8,20 +8,21 @@ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
8
8
  import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
9
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 { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
11
12
  import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
12
- import { listBoxStyles } from './vaadin-list-box-core-styles.js';
13
+ import { listBoxStyles } from './styles/vaadin-list-box-base-styles.js';
13
14
  import { MultiSelectListMixin } from './vaadin-multi-select-list-mixin.js';
14
15
 
15
16
  /**
16
17
  * `<vaadin-list-box>` is a Web Component for creating menus.
17
18
  *
18
- * ```
19
- * <vaadin-list-box selected="2">
20
- * <vaadin-item>Item 1</vaadin-item>
21
- * <vaadin-item>Item 2</vaadin-item>
22
- * <vaadin-item>Item 3</vaadin-item>
23
- * <vaadin-item>Item 4</vaadin-item>
24
- * </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>
25
26
  * ```
26
27
  *
27
28
  * ### Styling
@@ -32,6 +33,12 @@ import { MultiSelectListMixin } from './vaadin-multi-select-list-mixin.js';
32
33
  * ------------------|------------------------
33
34
  * `items` | The items container
34
35
  *
36
+ * The following state attributes are available for styling:
37
+ *
38
+ * Attribute | Description
39
+ * ---------------|---------------------------------
40
+ * `has-tooltip` | Set when the element has a slotted tooltip
41
+ *
35
42
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
36
43
  *
37
44
  * @fires {CustomEvent} items-changed - Fired when the `items` property changes.
@@ -44,7 +51,7 @@ import { MultiSelectListMixin } from './vaadin-multi-select-list-mixin.js';
44
51
  * @mixes ThemableMixin
45
52
  * @mixes ElementMixin
46
53
  */
47
- class ListBox extends ElementMixin(MultiSelectListMixin(ThemableMixin(PolylitMixin(LitElement)))) {
54
+ class ListBox extends ElementMixin(MultiSelectListMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
48
55
  static get is() {
49
56
  return 'vaadin-list-box';
50
57
  }
package/vaadin-list-box.js CHANGED
@@ -1,2 +1,2 @@
1
- import './theme/lumo/vaadin-list-box.js';
1
+ import './src/vaadin-list-box.js';
2
2
  export * from './src/vaadin-list-box.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/list-box",
4
- "version": "25.0.0-alpha2",
4
+ "version": "25.0.0-alpha21",
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\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|---------------------------------\n`has-tooltip` | Set when the element has a slotted tooltip\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": "25.0.0-alpha2",
4
+ "version": "25.0.0-alpha21",
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\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|---------------------------------\n`has-tooltip` | Set when the element has a slotted tooltip\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-list-box-base-styles.js DELETED
@@ -1,35 +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 '@vaadin/component-base/src/style-props.js';
7
- import { css } from 'lit';
8
-
9
- export const listBoxStyles = css`
10
- @layer base {
11
- :host {
12
- --vaadin-item-checkmark-display: block;
13
- display: flex;
14
- }
15
-
16
- :host([hidden]) {
17
- display: none !important;
18
- }
19
-
20
- [part='items'] {
21
- height: 100%;
22
- overflow-y: auto;
23
- width: 100%;
24
- }
25
-
26
- [part='items'] ::slotted(hr) {
27
- border-color: var(--vaadin-divider-color, var(--_vaadin-border-color));
28
- border-width: 0 0 1px;
29
- margin: 4px 8px;
30
- margin-inline-start: calc(
31
- var(--vaadin-icon-size, 1lh) + var(--vaadin-item-gap, var(--_vaadin-gap-container-inline)) + 8px
32
- );
33
- }
34
- }
35
- `;
package/src/vaadin-list-box-core-styles.d.ts DELETED
@@ -1,8 +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 type { CSSResult } from 'lit';
7
-
8
- export const listBoxStyles: CSSResult;
package/theme/lumo/vaadin-list-box-styles.d.ts DELETED
@@ -1,5 +0,0 @@
1
- import '@vaadin/vaadin-lumo-styles/color.js';
2
- import '@vaadin/vaadin-lumo-styles/spacing.js';
3
- import '@vaadin/vaadin-lumo-styles/style.js';
4
- declare const listBox: import("lit").CSSResult;
5
- export { listBox };
package/theme/lumo/vaadin-list-box-styles.js DELETED
@@ -1,24 +0,0 @@
1
- import '@vaadin/vaadin-lumo-styles/color.js';
2
- import '@vaadin/vaadin-lumo-styles/spacing.js';
3
- import '@vaadin/vaadin-lumo-styles/style.js';
4
- import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
5
-
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
- }
11
-
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/lumo/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/lumo/vaadin-list-box.js DELETED
@@ -1,2 +0,0 @@
1
- import './vaadin-list-box-styles.js';
2
- import '../../src/vaadin-list-box.js';