@vaadin/react-components 25.0.0-alpha8 → 25.0.0-beta1

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 (70) hide show
  1. package/ConfirmDialog.d.ts +1 -1
  2. package/ConfirmDialog.d.ts.map +1 -1
  3. package/ConfirmDialog.js.map +1 -1
  4. package/ContextMenu.js +1 -1
  5. package/ContextMenu.js.map +2 -2
  6. package/Dialog.d.ts +2 -2
  7. package/Dialog.d.ts.map +1 -1
  8. package/Dialog.js +1 -1
  9. package/Dialog.js.map +1 -1
  10. package/LoginOverlay.js +1 -1
  11. package/LoginOverlay.js.map +2 -2
  12. package/MultiSelectComboBox.js +1 -1
  13. package/MultiSelectComboBox.js.map +2 -2
  14. package/Popover.d.ts +8 -2
  15. package/Popover.d.ts.map +1 -1
  16. package/Popover.js +1 -1
  17. package/Popover.js.map +3 -3
  18. package/Select.js.map +2 -2
  19. package/TabSheet.d.ts +0 -23
  20. package/TabSheet.d.ts.map +1 -1
  21. package/TabSheet.js +1 -1
  22. package/TabSheet.js.map +3 -3
  23. package/Tooltip.js +1 -1
  24. package/Tooltip.js.map +2 -2
  25. package/css/lumo/Utility.module.css +16 -47
  26. package/css/lumo/utilities/Accessibility.module.css +17 -15
  27. package/css/lumo/utilities/Background.module.css +189 -150
  28. package/css/lumo/utilities/Border.module.css +173 -141
  29. package/css/lumo/utilities/Filter.module.css +35 -26
  30. package/css/lumo/utilities/FlexboxGrid.module.css +780 -2
  31. package/css/lumo/utilities/Layout.module.css +544 -413
  32. package/css/lumo/utilities/Shadows.module.css +27 -20
  33. package/css/lumo/utilities/Sizing.module.css +142 -115
  34. package/css/lumo/utilities/Spacing.module.css +682 -536
  35. package/css/lumo/utilities/Transition.module.css +46 -44
  36. package/css/lumo/utilities/Typography.module.css +366 -280
  37. package/generated/ContextMenu.d.ts +2 -0
  38. package/generated/ContextMenu.d.ts.map +1 -1
  39. package/generated/LoginOverlay.d.ts +2 -0
  40. package/generated/LoginOverlay.d.ts.map +1 -1
  41. package/generated/MultiSelectComboBox.d.ts +2 -2
  42. package/generated/MultiSelectComboBox.d.ts.map +1 -1
  43. package/generated/Tooltip.d.ts +8 -3
  44. package/generated/Tooltip.d.ts.map +1 -1
  45. package/package.json +69 -76
  46. package/renderers/useRenderer.js +1 -1
  47. package/renderers/useRenderer.js.map +2 -2
  48. package/utils/createComponent.js +1 -1
  49. package/utils/createComponent.js.map +2 -2
  50. package/utils/warnings.d.ts +2 -0
  51. package/utils/warnings.d.ts.map +1 -0
  52. package/utils/warnings.js +2 -0
  53. package/utils/warnings.js.map +7 -0
  54. package/css/Lumo.css +0 -15
  55. package/css/lumo/Badge.css +0 -165
  56. package/css/lumo/Color.css +0 -122
  57. package/css/lumo/ColorBase.css +0 -87
  58. package/css/lumo/Font.css +0 -22
  59. package/css/lumo/FontIcons.css +0 -59
  60. package/css/lumo/Sizing.css +0 -17
  61. package/css/lumo/Spacing.css +0 -25
  62. package/css/lumo/Style.css +0 -19
  63. package/css/lumo/Typography.css +0 -96
  64. package/css/lumo/UserColors.css +0 -22
  65. package/css/lumo/mixins/FieldButton.css +0 -29
  66. package/css/lumo/mixins/MenuOverlay.css +0 -64
  67. package/css/lumo/mixins/MenuOverlayCore.css +0 -32
  68. package/css/lumo/mixins/Overlay.css +0 -67
  69. package/css/lumo/mixins/RequiredField.css +0 -103
  70. package/css/lumo/utilities/FlexboxAndGrid.module.css +0 -613
package/css/lumo/Utility.module.css CHANGED
@@ -1,47 +1,16 @@
1
- /* Generated file, do not edit */
2
-
3
-
4
-
5
- @import url(./utilities/Accessibility.module.css);
6
-
7
-
8
-
9
- @import url(./utilities/Background.module.css);
10
-
11
-
12
-
13
- @import url(./utilities/Border.module.css);
14
-
15
-
16
-
17
- @import url(./utilities/Filter.module.css);
18
-
19
-
20
-
21
- @import url(./utilities/FlexboxAndGrid.module.css);
22
-
23
-
24
-
25
- @import url(./utilities/Layout.module.css);
26
-
27
-
28
-
29
- @import url(./utilities/Shadows.module.css);
30
-
31
-
32
-
33
- @import url(./utilities/Sizing.module.css);
34
-
35
-
36
-
37
- @import url(./utilities/Spacing.module.css);
38
-
39
-
40
-
41
- @import url(./utilities/Transition.module.css);
42
-
43
-
44
-
45
- @import url(./utilities/Typography.module.css);
46
-
47
-
1
+ /**
2
+ * @license
3
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
4
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
6
+ @import './utilities/Accessibility.module.css';
7
+ @import './utilities/Background.module.css';
8
+ @import './utilities/Border.module.css';
9
+ @import './utilities/Filter.module.css';
10
+ @import './utilities/FlexboxGrid.module.css';
11
+ @import './utilities/Layout.module.css';
12
+ @import './utilities/Shadows.module.css';
13
+ @import './utilities/Sizing.module.css';
14
+ @import './utilities/Spacing.module.css';
15
+ @import './utilities/Transition.module.css';
16
+ @import './utilities/Typography.module.css';
package/css/lumo/utilities/Accessibility.module.css CHANGED
@@ -1,15 +1,17 @@
1
- /* Generated file, do not edit */
2
-
3
-
4
- /* === Screen readers === */
5
- .sr-only {
6
- border-width: 0;
7
- clip: rect(0, 0, 0, 0);
8
- height: 1px;
9
- margin: -1px;
10
- overflow: hidden;
11
- padding: 0;
12
- position: absolute;
13
- white-space: nowrap;
14
- width: 1px;
15
- }
1
+ /**
2
+ * @license
3
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
4
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
6
+ /* === Screen readers === */
7
+ .sr-only {
8
+ border-width: 0;
9
+ clip: rect(0, 0, 0, 0);
10
+ height: 1px;
11
+ margin: -1px;
12
+ overflow: hidden;
13
+ padding: 0;
14
+ position: absolute;
15
+ white-space: nowrap;
16
+ width: 1px;
17
+ }
package/css/lumo/utilities/Background.module.css CHANGED
@@ -1,150 +1,189 @@
1
- /* Generated file, do not edit */
2
-
3
-
4
- /* === Background color === */
5
- .bg-base {
6
- background-color: var(--lumo-base-color);
7
- }
8
-
9
- .bg-transparent {
10
- background-color: transparent;
11
- }
12
-
13
- .bg-tint {
14
- background-color: var(--lumo-tint);
15
- }
16
- .bg-tint-90 {
17
- background-color: var(--lumo-tint-90pct);
18
- }
19
- .bg-tint-80 {
20
- background-color: var(--lumo-tint-80pct);
21
- }
22
- .bg-tint-70 {
23
- background-color: var(--lumo-tint-70pct);
24
- }
25
- .bg-tint-60 {
26
- background-color: var(--lumo-tint-60pct);
27
- }
28
- .bg-tint-50 {
29
- background-color: var(--lumo-tint-50pct);
30
- }
31
- .bg-tint-40 {
32
- background-color: var(--lumo-tint-40pct);
33
- }
34
- .bg-tint-30 {
35
- background-color: var(--lumo-tint-30pct);
36
- }
37
- .bg-tint-20 {
38
- background-color: var(--lumo-tint-20pct);
39
- }
40
- .bg-tint-10 {
41
- background-color: var(--lumo-tint-10pct);
42
- }
43
- .bg-tint-5 {
44
- background-color: var(--lumo-tint-5pct);
45
- }
46
-
47
- .bg-shade {
48
- background-color: var(--lumo-shade);
49
- }
50
- .bg-shade-90 {
51
- background-color: var(--lumo-shade-90pct);
52
- }
53
- .bg-shade-80 {
54
- background-color: var(--lumo-shade-80pct);
55
- }
56
- .bg-shade-70 {
57
- background-color: var(--lumo-shade-70pct);
58
- }
59
- .bg-shade-60 {
60
- background-color: var(--lumo-shade-60pct);
61
- }
62
- .bg-shade-50 {
63
- background-color: var(--lumo-shade-50pct);
64
- }
65
- .bg-shade-40 {
66
- background-color: var(--lumo-shade-40pct);
67
- }
68
- .bg-shade-30 {
69
- background-color: var(--lumo-shade-30pct);
70
- }
71
- .bg-shade-20 {
72
- background-color: var(--lumo-shade-20pct);
73
- }
74
- .bg-shade-10 {
75
- background-color: var(--lumo-shade-10pct);
76
- }
77
- .bg-shade-5 {
78
- background-color: var(--lumo-shade-5pct);
79
- }
80
-
81
- .bg-contrast {
82
- background-color: var(--lumo-contrast);
83
- }
84
- .bg-contrast-90 {
85
- background-color: var(--lumo-contrast-90pct);
86
- }
87
- .bg-contrast-80 {
88
- background-color: var(--lumo-contrast-80pct);
89
- }
90
- .bg-contrast-70 {
91
- background-color: var(--lumo-contrast-70pct);
92
- }
93
- .bg-contrast-60 {
94
- background-color: var(--lumo-contrast-60pct);
95
- }
96
- .bg-contrast-50 {
97
- background-color: var(--lumo-contrast-50pct);
98
- }
99
- .bg-contrast-40 {
100
- background-color: var(--lumo-contrast-40pct);
101
- }
102
- .bg-contrast-30 {
103
- background-color: var(--lumo-contrast-30pct);
104
- }
105
- .bg-contrast-20 {
106
- background-color: var(--lumo-contrast-20pct);
107
- }
108
- .bg-contrast-10 {
109
- background-color: var(--lumo-contrast-10pct);
110
- }
111
- .bg-contrast-5 {
112
- background-color: var(--lumo-contrast-5pct);
113
- }
114
-
115
- .bg-primary {
116
- background-color: var(--lumo-primary-color);
117
- }
118
- .bg-primary-50 {
119
- background-color: var(--lumo-primary-color-50pct);
120
- }
121
- .bg-primary-10 {
122
- background-color: var(--lumo-primary-color-10pct);
123
- }
124
-
125
- .bg-error {
126
- background-color: var(--lumo-error-color);
127
- }
128
- .bg-error-50 {
129
- background-color: var(--lumo-error-color-50pct);
130
- }
131
- .bg-error-10 {
132
- background-color: var(--lumo-error-color-10pct);
133
- }
134
-
135
- .bg-success {
136
- background-color: var(--lumo-success-color);
137
- }
138
- .bg-success-50 {
139
- background-color: var(--lumo-success-color-50pct);
140
- }
141
- .bg-success-10 {
142
- background-color: var(--lumo-success-color-10pct);
143
- }
144
-
145
- .bg-warning {
146
- background-color: var(--lumo-warning-color);
147
- }
148
- .bg-warning-10 {
149
- background-color: var(--lumo-warning-color-10pct);
150
- }
1
+ /**
2
+ * @license
3
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
4
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
6
+ /* === Background color === */
7
+ .bg-base {
8
+ background-color: var(--lumo-base-color);
9
+ }
10
+
11
+ .bg-transparent {
12
+ background-color: transparent;
13
+ }
14
+
15
+ .bg-tint {
16
+ background-color: var(--lumo-tint);
17
+ }
18
+
19
+ .bg-tint-90 {
20
+ background-color: var(--lumo-tint-90pct);
21
+ }
22
+
23
+ .bg-tint-80 {
24
+ background-color: var(--lumo-tint-80pct);
25
+ }
26
+
27
+ .bg-tint-70 {
28
+ background-color: var(--lumo-tint-70pct);
29
+ }
30
+
31
+ .bg-tint-60 {
32
+ background-color: var(--lumo-tint-60pct);
33
+ }
34
+
35
+ .bg-tint-50 {
36
+ background-color: var(--lumo-tint-50pct);
37
+ }
38
+
39
+ .bg-tint-40 {
40
+ background-color: var(--lumo-tint-40pct);
41
+ }
42
+
43
+ .bg-tint-30 {
44
+ background-color: var(--lumo-tint-30pct);
45
+ }
46
+
47
+ .bg-tint-20 {
48
+ background-color: var(--lumo-tint-20pct);
49
+ }
50
+
51
+ .bg-tint-10 {
52
+ background-color: var(--lumo-tint-10pct);
53
+ }
54
+
55
+ .bg-tint-5 {
56
+ background-color: var(--lumo-tint-5pct);
57
+ }
58
+
59
+ .bg-shade {
60
+ background-color: var(--lumo-shade);
61
+ }
62
+
63
+ .bg-shade-90 {
64
+ background-color: var(--lumo-shade-90pct);
65
+ }
66
+
67
+ .bg-shade-80 {
68
+ background-color: var(--lumo-shade-80pct);
69
+ }
70
+
71
+ .bg-shade-70 {
72
+ background-color: var(--lumo-shade-70pct);
73
+ }
74
+
75
+ .bg-shade-60 {
76
+ background-color: var(--lumo-shade-60pct);
77
+ }
78
+
79
+ .bg-shade-50 {
80
+ background-color: var(--lumo-shade-50pct);
81
+ }
82
+
83
+ .bg-shade-40 {
84
+ background-color: var(--lumo-shade-40pct);
85
+ }
86
+
87
+ .bg-shade-30 {
88
+ background-color: var(--lumo-shade-30pct);
89
+ }
90
+
91
+ .bg-shade-20 {
92
+ background-color: var(--lumo-shade-20pct);
93
+ }
94
+
95
+ .bg-shade-10 {
96
+ background-color: var(--lumo-shade-10pct);
97
+ }
98
+
99
+ .bg-shade-5 {
100
+ background-color: var(--lumo-shade-5pct);
101
+ }
102
+
103
+ .bg-contrast {
104
+ background-color: var(--lumo-contrast);
105
+ }
106
+
107
+ .bg-contrast-90 {
108
+ background-color: var(--lumo-contrast-90pct);
109
+ }
110
+
111
+ .bg-contrast-80 {
112
+ background-color: var(--lumo-contrast-80pct);
113
+ }
114
+
115
+ .bg-contrast-70 {
116
+ background-color: var(--lumo-contrast-70pct);
117
+ }
118
+
119
+ .bg-contrast-60 {
120
+ background-color: var(--lumo-contrast-60pct);
121
+ }
122
+
123
+ .bg-contrast-50 {
124
+ background-color: var(--lumo-contrast-50pct);
125
+ }
126
+
127
+ .bg-contrast-40 {
128
+ background-color: var(--lumo-contrast-40pct);
129
+ }
130
+
131
+ .bg-contrast-30 {
132
+ background-color: var(--lumo-contrast-30pct);
133
+ }
134
+
135
+ .bg-contrast-20 {
136
+ background-color: var(--lumo-contrast-20pct);
137
+ }
138
+
139
+ .bg-contrast-10 {
140
+ background-color: var(--lumo-contrast-10pct);
141
+ }
142
+
143
+ .bg-contrast-5 {
144
+ background-color: var(--lumo-contrast-5pct);
145
+ }
146
+
147
+ .bg-primary {
148
+ background-color: var(--lumo-primary-color);
149
+ }
150
+
151
+ .bg-primary-50 {
152
+ background-color: var(--lumo-primary-color-50pct);
153
+ }
154
+
155
+ .bg-primary-10 {
156
+ background-color: var(--lumo-primary-color-10pct);
157
+ }
158
+
159
+ .bg-error {
160
+ background-color: var(--lumo-error-color);
161
+ }
162
+
163
+ .bg-error-50 {
164
+ background-color: var(--lumo-error-color-50pct);
165
+ }
166
+
167
+ .bg-error-10 {
168
+ background-color: var(--lumo-error-color-10pct);
169
+ }
170
+
171
+ .bg-success {
172
+ background-color: var(--lumo-success-color);
173
+ }
174
+
175
+ .bg-success-50 {
176
+ background-color: var(--lumo-success-color-50pct);
177
+ }
178
+
179
+ .bg-success-10 {
180
+ background-color: var(--lumo-success-color-10pct);
181
+ }
182
+
183
+ .bg-warning {
184
+ background-color: var(--lumo-warning-color);
185
+ }
186
+
187
+ .bg-warning-10 {
188
+ background-color: var(--lumo-warning-color-10pct);
189
+ }