@vaadin/multi-select-combo-box 25.0.0-alpha6 → 25.0.0-alpha8

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 (12) hide show
  1. package/package.json +14 -14
  2. package/src/styles/vaadin-multi-select-combo-box-base-styles.js +44 -45
  3. package/src/styles/vaadin-multi-select-combo-box-chip-base-styles.js +101 -103
  4. package/src/styles/vaadin-multi-select-combo-box-overlay-base-styles.js +5 -7
  5. package/src/vaadin-multi-select-combo-box-chip.js +1 -1
  6. package/src/vaadin-multi-select-combo-box-internal.js +1 -4
  7. package/src/vaadin-multi-select-combo-box-item.js +1 -1
  8. package/src/vaadin-multi-select-combo-box-overlay.js +1 -2
  9. package/src/vaadin-multi-select-combo-box-scroller.js +1 -2
  10. package/src/vaadin-multi-select-combo-box.js +1 -1
  11. package/web-types.json +1 -1
  12. package/web-types.lit.json +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/multi-select-combo-box",
3
- "version": "25.0.0-alpha6",
3
+ "version": "25.0.0-alpha8",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -39,21 +39,21 @@
39
39
  ],
40
40
  "dependencies": {
41
41
  "@open-wc/dedupe-mixin": "^1.3.0",
42
- "@vaadin/a11y-base": "25.0.0-alpha6",
43
- "@vaadin/combo-box": "25.0.0-alpha6",
44
- "@vaadin/component-base": "25.0.0-alpha6",
45
- "@vaadin/field-base": "25.0.0-alpha6",
46
- "@vaadin/input-container": "25.0.0-alpha6",
47
- "@vaadin/item": "25.0.0-alpha6",
48
- "@vaadin/lit-renderer": "25.0.0-alpha6",
49
- "@vaadin/overlay": "25.0.0-alpha6",
50
- "@vaadin/vaadin-lumo-styles": "25.0.0-alpha6",
51
- "@vaadin/vaadin-themable-mixin": "25.0.0-alpha6",
42
+ "@vaadin/a11y-base": "25.0.0-alpha8",
43
+ "@vaadin/combo-box": "25.0.0-alpha8",
44
+ "@vaadin/component-base": "25.0.0-alpha8",
45
+ "@vaadin/field-base": "25.0.0-alpha8",
46
+ "@vaadin/input-container": "25.0.0-alpha8",
47
+ "@vaadin/item": "25.0.0-alpha8",
48
+ "@vaadin/lit-renderer": "25.0.0-alpha8",
49
+ "@vaadin/overlay": "25.0.0-alpha8",
50
+ "@vaadin/vaadin-lumo-styles": "25.0.0-alpha8",
51
+ "@vaadin/vaadin-themable-mixin": "25.0.0-alpha8",
52
52
  "lit": "^3.0.0"
53
53
  },
54
54
  "devDependencies": {
55
- "@vaadin/chai-plugins": "25.0.0-alpha6",
56
- "@vaadin/test-runner-commands": "25.0.0-alpha6",
55
+ "@vaadin/chai-plugins": "25.0.0-alpha8",
56
+ "@vaadin/test-runner-commands": "25.0.0-alpha8",
57
57
  "@vaadin/testing-helpers": "^2.0.0",
58
58
  "sinon": "^18.0.0"
59
59
  },
@@ -61,5 +61,5 @@
61
61
  "web-types.json",
62
62
  "web-types.lit.json"
63
63
  ],
64
- "gitHead": "cd1d084198d2b326c58d44bb39fa4845b71ce551"
64
+ "gitHead": "ebf53673d5f639d2b1b6f2b31f640f530643ee2f"
65
65
  }
package/src/styles/vaadin-multi-select-combo-box-base-styles.js CHANGED
@@ -3,57 +3,56 @@
3
3
  * Copyright (c) 2021 - 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/style-props.js';
6
7
  import { css } from 'lit';
7
8
  import { comboBoxStyles } from '@vaadin/combo-box/src/styles/vaadin-combo-box-base-styles.js';
8
9
 
9
10
  export const multiSelectComboBoxStyles = [
10
11
  comboBoxStyles,
11
12
  css`
12
- @layer base {
13
- :host {
14
- max-width: 100%;
15
- --_input-min-width: var(--vaadin-multi-select-combo-box-input-min-width, 4rem);
16
- --_chip-min-width: var(--vaadin-multi-select-combo-box-chip-min-width, var(--vaadin-chip-min-width, 48px));
17
- --_wrapper-gap: var(--vaadin-multi-select-combo-box-chips-gap, 2px);
18
- }
19
-
20
- #chips {
21
- display: flex;
22
- align-items: center;
23
- gap: var(--vaadin-multi-select-combo-box-chips-gap, 2px);
24
- }
25
-
26
- ::slotted(input) {
27
- box-sizing: border-box;
28
- flex: 1 0 var(--_input-min-width);
29
- }
30
-
31
- ::slotted([slot='chip']),
32
- ::slotted([slot='overflow']) {
33
- flex: 0 1 auto;
34
- }
35
-
36
- ::slotted([slot='chip']) {
37
- overflow: hidden;
38
- }
39
-
40
- :host(:is([readonly], [disabled])) ::slotted(input) {
41
- flex-grow: 0;
42
- flex-basis: 0;
43
- padding: 0;
44
- }
45
-
46
- :host([readonly]:not([disabled])) [part$='button'] {
47
- cursor: var(--vaadin-clickable-cursor);
48
- }
49
-
50
- :host([auto-expand-vertically]) #chips {
51
- display: contents;
52
- }
53
-
54
- :host([auto-expand-horizontally]) [class$='container'] {
55
- width: auto;
56
- }
13
+ :host {
14
+ max-width: 100%;
15
+ --_input-min-width: var(--vaadin-multi-select-combo-box-input-min-width, 4rem);
16
+ --_chip-min-width: var(--vaadin-multi-select-combo-box-chip-min-width, var(--vaadin-chip-min-width, 48px));
17
+ --_wrapper-gap: var(--vaadin-multi-select-combo-box-chips-gap, 2px);
18
+ }
19
+
20
+ #chips {
21
+ display: flex;
22
+ align-items: center;
23
+ gap: var(--vaadin-multi-select-combo-box-chips-gap, 2px);
24
+ }
25
+
26
+ ::slotted(input) {
27
+ box-sizing: border-box;
28
+ flex: 1 0 var(--_input-min-width);
29
+ }
30
+
31
+ ::slotted([slot='chip']),
32
+ ::slotted([slot='overflow']) {
33
+ flex: 0 1 auto;
34
+ }
35
+
36
+ ::slotted([slot='chip']) {
37
+ overflow: hidden;
38
+ }
39
+
40
+ :host(:is([readonly], [disabled])) ::slotted(input) {
41
+ flex-grow: 0;
42
+ flex-basis: 0;
43
+ padding: 0;
44
+ }
45
+
46
+ :host([readonly]:not([disabled])) [part$='button'] {
47
+ cursor: var(--vaadin-clickable-cursor);
48
+ }
49
+
50
+ :host([auto-expand-vertically]) #chips {
51
+ display: contents;
52
+ }
53
+
54
+ :host([auto-expand-horizontally]) [class$='container'] {
55
+ width: auto;
57
56
  }
58
57
  `,
59
58
  ];
package/src/styles/vaadin-multi-select-combo-box-chip-base-styles.js CHANGED
@@ -7,108 +7,106 @@ import '@vaadin/component-base/src/style-props.js';
7
7
  import { css } from 'lit';
8
8
 
9
9
  export const multiSelectComboBoxChipStyles = css`
10
- @layer base {
11
- :host {
12
- display: inline-flex;
13
- align-items: center;
14
- justify-content: center;
15
- white-space: nowrap;
16
- box-sizing: border-box;
17
- gap: var(--vaadin-chip-gap, var(--vaadin-chip-padding, 0.3em));
18
- background: var(--vaadin-chip-background, var(--vaadin-background-container));
19
- color: var(--vaadin-chip-color, var(--vaadin-color));
20
- font-size: var(--vaadin-chip-font-size, 0.875em);
21
- font-weight: var(--vaadin-chip-font-weight, 500);
22
- line-height: var(--vaadin-input-field-value-line-height, inherit);
23
- padding: 0 var(--vaadin-chip-padding, 0.3em);
24
- height: var(--vaadin-chip-height, calc(1lh / 0.875));
25
- border-radius: var(--vaadin-chip-border-radius, var(--vaadin-radius-m));
26
- border: var(--vaadin-chip-border-width, 1px) solid var(--vaadin-chip-border-color, var(--vaadin-border-color));
27
- cursor: default;
28
- }
29
-
30
- :host(:not([slot='overflow'])) {
31
- min-width: min(
32
- max-content,
33
- var(--vaadin-multi-select-combo-box-chip-min-width, var(--vaadin-chip-min-width, 48px))
34
- );
35
- }
36
-
37
- :host([focused]) {
38
- outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
39
- outline-offset: calc(var(--vaadin-chip-border-width, 1px) * -1);
40
- }
41
-
42
- [part='label'] {
43
- overflow: hidden;
44
- text-overflow: ellipsis;
45
- }
46
-
47
- [part='remove-button'] {
48
- flex: none;
49
- display: block;
50
- margin-inline: auto calc(var(--vaadin-chip-padding, 0.3em) * -1);
51
- color: var(--vaadin-chip-remove-button-color, var(--vaadin-color-subtle));
52
- cursor: var(--vaadin-clickable-cursor);
53
- }
54
-
55
- [part='remove-button']::before {
56
- content: '';
57
- display: block;
58
- width: var(--vaadin-icon-size, 1lh);
59
- height: var(--vaadin-icon-size, 1lh);
60
- background: currentColor;
61
- mask-image: var(--_vaadin-icon-cross);
62
- }
63
-
64
- :host([disabled]) {
65
- cursor: var(--vaadin-disabled-cursor);
66
- }
67
-
68
- :host([disabled]) [part='label'] {
69
- --vaadin-chip-color: var(--vaadin-color-disabled);
70
- }
71
-
72
- :host([hidden]),
73
- :host(:is([readonly], [disabled], [slot='overflow'])) [part='remove-button'] {
74
- display: none !important;
75
- }
76
-
77
- :host([slot='overflow']) {
78
- position: relative;
79
- margin-inline-start: 8px;
80
- min-width: 1.5em;
81
- }
82
-
83
- :host([slot='overflow'])::before,
84
- :host([slot='overflow'])::after {
85
- content: '';
86
- position: absolute;
87
- inset: calc(var(--vaadin-chip-border-width, 1px) * -1);
88
- border-inline-start: 2px solid var(--vaadin-chip-border-color, var(--vaadin-border-color));
89
- border-radius: inherit;
90
- }
91
-
92
- :host([slot='overflow'])::before {
93
- left: calc(-4px - var(--vaadin-chip-border-width, 1px));
94
- }
95
-
96
- :host([slot='overflow'])::after {
97
- left: calc(-8px - var(--vaadin-chip-border-width, 1px));
98
- }
99
-
100
- :host([count='2']) {
101
- margin-inline-start: 4px;
102
- }
103
-
104
- :host([count='1']) {
105
- margin-inline-start: 0;
106
- }
107
-
108
- :host([count='2'])::after,
109
- :host([count='1'])::before,
110
- :host([count='1'])::after {
111
- display: none;
112
- }
10
+ :host {
11
+ display: inline-flex;
12
+ align-items: center;
13
+ justify-content: center;
14
+ white-space: nowrap;
15
+ box-sizing: border-box;
16
+ gap: var(--vaadin-chip-gap, var(--vaadin-chip-padding, 0.3em));
17
+ background: var(--vaadin-chip-background, var(--vaadin-background-container));
18
+ color: var(--vaadin-chip-color, var(--vaadin-color));
19
+ font-size: var(--vaadin-chip-font-size, 0.875em);
20
+ font-weight: var(--vaadin-chip-font-weight, 500);
21
+ line-height: var(--vaadin-input-field-value-line-height, inherit);
22
+ padding: 0 var(--vaadin-chip-padding, 0.3em);
23
+ height: var(--vaadin-chip-height, calc(1lh / 0.875));
24
+ border-radius: var(--vaadin-chip-border-radius, var(--vaadin-radius-m));
25
+ border: var(--vaadin-chip-border-width, 1px) solid var(--vaadin-chip-border-color, var(--vaadin-border-color));
26
+ cursor: default;
27
+ }
28
+
29
+ :host(:not([slot='overflow'])) {
30
+ min-width: min(
31
+ max-content,
32
+ var(--vaadin-multi-select-combo-box-chip-min-width, var(--vaadin-chip-min-width, 48px))
33
+ );
34
+ }
35
+
36
+ :host([focused]) {
37
+ outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
38
+ outline-offset: calc(var(--vaadin-chip-border-width, 1px) * -1);
39
+ }
40
+
41
+ [part='label'] {
42
+ overflow: hidden;
43
+ text-overflow: ellipsis;
44
+ }
45
+
46
+ [part='remove-button'] {
47
+ flex: none;
48
+ display: block;
49
+ margin-inline: auto calc(var(--vaadin-chip-padding, 0.3em) * -1);
50
+ color: var(--vaadin-chip-remove-button-color, var(--vaadin-color-subtle));
51
+ cursor: var(--vaadin-clickable-cursor);
52
+ }
53
+
54
+ [part='remove-button']::before {
55
+ content: '';
56
+ display: block;
57
+ width: var(--vaadin-icon-size, 1lh);
58
+ height: var(--vaadin-icon-size, 1lh);
59
+ background: currentColor;
60
+ mask-image: var(--_vaadin-icon-cross);
61
+ }
62
+
63
+ :host([disabled]) {
64
+ cursor: var(--vaadin-disabled-cursor);
65
+ }
66
+
67
+ :host([disabled]) [part='label'] {
68
+ --vaadin-chip-color: var(--vaadin-color-disabled);
69
+ }
70
+
71
+ :host([hidden]),
72
+ :host(:is([readonly], [disabled], [slot='overflow'])) [part='remove-button'] {
73
+ display: none !important;
74
+ }
75
+
76
+ :host([slot='overflow']) {
77
+ position: relative;
78
+ margin-inline-start: 8px;
79
+ min-width: 1.5em;
80
+ }
81
+
82
+ :host([slot='overflow'])::before,
83
+ :host([slot='overflow'])::after {
84
+ content: '';
85
+ position: absolute;
86
+ inset: calc(var(--vaadin-chip-border-width, 1px) * -1);
87
+ border-inline-start: 2px solid var(--vaadin-chip-border-color, var(--vaadin-border-color));
88
+ border-radius: inherit;
89
+ }
90
+
91
+ :host([slot='overflow'])::before {
92
+ left: calc(-4px - var(--vaadin-chip-border-width, 1px));
93
+ }
94
+
95
+ :host([slot='overflow'])::after {
96
+ left: calc(-8px - var(--vaadin-chip-border-width, 1px));
97
+ }
98
+
99
+ :host([count='2']) {
100
+ margin-inline-start: 4px;
101
+ }
102
+
103
+ :host([count='1']) {
104
+ margin-inline-start: 0;
105
+ }
106
+
107
+ :host([count='2'])::after,
108
+ :host([count='1'])::before,
109
+ :host([count='1'])::after {
110
+ display: none;
113
111
  }
114
112
  `;
package/src/styles/vaadin-multi-select-combo-box-overlay-base-styles.js CHANGED
@@ -9,13 +9,11 @@ import { comboBoxOverlayStyles } from '@vaadin/combo-box/src/styles/vaadin-combo
9
9
  export const multiSelectComboBoxOverlayStyles = [
10
10
  comboBoxOverlayStyles,
11
11
  css`
12
- @layer base {
13
- #overlay {
14
- width: var(
15
- --vaadin-multi-select-combo-box-overlay-width,
16
- var(--_vaadin-multi-select-combo-box-overlay-default-width, auto)
17
- );
18
- }
12
+ #overlay {
13
+ width: var(
14
+ --vaadin-multi-select-combo-box-overlay-width,
15
+ var(--_vaadin-multi-select-combo-box-overlay-default-width, auto)
16
+ );
19
17
  }
20
18
  `,
21
19
  ];
package/src/vaadin-multi-select-combo-box-chip.js CHANGED
@@ -28,7 +28,7 @@ import { multiSelectComboBoxChipStyles } from './styles/vaadin-multi-select-comb
28
28
  * @extends HTMLElement
29
29
  * @private
30
30
  */
31
- class MultiSelectComboBoxChip extends LumoInjectionMixin(ThemableMixin(PolylitMixin(LitElement))) {
31
+ class MultiSelectComboBoxChip extends ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))) {
32
32
  static get is() {
33
33
  return 'vaadin-multi-select-combo-box-chip';
34
34
  }
package/src/vaadin-multi-select-combo-box-internal.js CHANGED
@@ -10,7 +10,6 @@ import { css, html, LitElement } from 'lit';
10
10
  import { ifDefined } from 'lit/directives/if-defined.js';
11
11
  import { defineCustomElement } from '@vaadin/component-base/src/define.js';
12
12
  import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
13
- import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
14
13
  import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
15
14
  import { MultiSelectComboBoxInternalMixin } from './vaadin-multi-select-combo-box-internal-mixin.js';
16
15
 
@@ -23,9 +22,7 @@ import { MultiSelectComboBoxInternalMixin } from './vaadin-multi-select-combo-bo
23
22
  * @mixes ThemableMixin
24
23
  * @private
25
24
  */
26
- class MultiSelectComboBoxInternal extends MultiSelectComboBoxInternalMixin(
27
- LumoInjectionMixin(ThemableMixin(PolylitMixin(LitElement))),
28
- ) {
25
+ class MultiSelectComboBoxInternal extends MultiSelectComboBoxInternalMixin(ThemableMixin(PolylitMixin(LitElement))) {
29
26
  static get is() {
30
27
  return 'vaadin-multi-select-combo-box-internal';
31
28
  }
package/src/vaadin-multi-select-combo-box-item.js CHANGED
@@ -40,7 +40,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
40
40
  * @private
41
41
  */
42
42
  export class MultiSelectComboBoxItem extends ComboBoxItemMixin(
43
- LumoInjectionMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))),
43
+ ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),
44
44
  ) {
45
45
  static get is() {
46
46
  return 'vaadin-multi-select-combo-box-item';
package/src/vaadin-multi-select-combo-box-overlay.js CHANGED
@@ -26,7 +26,7 @@ import { multiSelectComboBoxOverlayStyles } from './styles/vaadin-multi-select-c
26
26
  * @private
27
27
  */
28
28
  class MultiSelectComboBoxOverlay extends ComboBoxOverlayMixin(
29
- OverlayMixin(DirMixin(LumoInjectionMixin(ThemableMixin(PolylitMixin(LitElement))))),
29
+ OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))),
30
30
  ) {
31
31
  static get is() {
32
32
  return 'vaadin-multi-select-combo-box-overlay';
@@ -39,7 +39,6 @@ class MultiSelectComboBoxOverlay extends ComboBoxOverlayMixin(
39
39
  /** @protected */
40
40
  render() {
41
41
  return html`
42
- <div id="backdrop" part="backdrop" hidden></div>
43
42
  <div part="overlay" id="overlay">
44
43
  <div part="loader"></div>
45
44
  <div part="content" id="content"><slot></slot></div>
package/src/vaadin-multi-select-combo-box-scroller.js CHANGED
@@ -8,7 +8,6 @@ import { ComboBoxPlaceholder } from '@vaadin/combo-box/src/vaadin-combo-box-plac
8
8
  import { ComboBoxScrollerMixin } from '@vaadin/combo-box/src/vaadin-combo-box-scroller-mixin.js';
9
9
  import { defineCustomElement } from '@vaadin/component-base/src/define.js';
10
10
  import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
11
- import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
12
11
  import { multiSelectComboBoxScrollerStyles } from './styles/vaadin-multi-select-combo-box-scroller-core-styles.js';
13
12
 
14
13
  /**
@@ -19,7 +18,7 @@ import { multiSelectComboBoxScrollerStyles } from './styles/vaadin-multi-select-
19
18
  * @mixes ComboBoxScrollerMixin
20
19
  * @private
21
20
  */
22
- export class MultiSelectComboBoxScroller extends ComboBoxScrollerMixin(LumoInjectionMixin(PolylitMixin(LitElement))) {
21
+ export class MultiSelectComboBoxScroller extends ComboBoxScrollerMixin(PolylitMixin(LitElement)) {
23
22
  static get is() {
24
23
  return 'vaadin-multi-select-combo-box-scroller';
25
24
  }
package/src/vaadin-multi-select-combo-box.js CHANGED
@@ -100,7 +100,7 @@ import { MultiSelectComboBoxMixin } from './vaadin-multi-select-combo-box-mixin.
100
100
  * @mixes MultiSelectComboBoxMixin
101
101
  */
102
102
  class MultiSelectComboBox extends MultiSelectComboBoxMixin(
103
- LumoInjectionMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))),
103
+ ThemableMixin(ElementMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),
104
104
  ) {
105
105
  static get is() {
106
106
  return 'vaadin-multi-select-combo-box';
package/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/multi-select-combo-box",
4
- "version": "25.0.0-alpha6",
4
+ "version": "25.0.0-alpha8",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
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/multi-select-combo-box",
4
- "version": "25.0.0-alpha6",
4
+ "version": "25.0.0-alpha8",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {