@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/utilities/Border.module.css CHANGED
@@ -1,141 +1,173 @@
1
- /* Generated file, do not edit */
2
-
3
-
4
- /* === Border === */
5
- .border-0 {
6
- border: none;
7
- }
8
- .border-dashed {
9
- --lumo-utility-border-style: dashed;
10
- }
11
- .border-dotted {
12
- --lumo-utility-border-style: dotted;
13
- }
14
- .border {
15
- border: 1px var(--lumo-utility-border-style, solid) var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
16
- }
17
- .border-b {
18
- border-bottom: 1px var(--lumo-utility-border-style, solid)
19
- var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
20
- }
21
- .border-e {
22
- border-inline-end: 1px var(--lumo-utility-border-style, solid)
23
- var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
24
- }
25
- .border-l {
26
- border-left: 1px var(--lumo-utility-border-style, solid)
27
- var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
28
- }
29
- .border-r {
30
- border-right: 1px var(--lumo-utility-border-style, solid)
31
- var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
32
- }
33
- .border-s {
34
- border-inline-start: 1px var(--lumo-utility-border-style, solid)
35
- var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
36
- }
37
- .border-t {
38
- border-top: 1px var(--lumo-utility-border-style, solid) var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
39
- }
40
-
41
- /* === Border color === */
42
- .border-contrast {
43
- --lumo-utility-border-color: var(--lumo-contrast);
44
- }
45
- .border-contrast-90 {
46
- --lumo-utility-border-color: var(--lumo-contrast-90pct);
47
- }
48
- .border-contrast-80 {
49
- --lumo-utility-border-color: var(--lumo-contrast-80pct);
50
- }
51
- .border-contrast-70 {
52
- --lumo-utility-border-color: var(--lumo-contrast-70pct);
53
- }
54
- .border-contrast-60 {
55
- --lumo-utility-border-color: var(--lumo-contrast-60pct);
56
- }
57
- .border-contrast-50 {
58
- --lumo-utility-border-color: var(--lumo-contrast-50pct);
59
- }
60
- .border-contrast-40 {
61
- --lumo-utility-border-color: var(--lumo-contrast-40pct);
62
- }
63
- .border-contrast-30 {
64
- --lumo-utility-border-color: var(--lumo-contrast-30pct);
65
- }
66
- .border-contrast-20 {
67
- --lumo-utility-border-color: var(--lumo-contrast-20pct);
68
- }
69
- .border-contrast-10 {
70
- --lumo-utility-border-color: var(--lumo-contrast-10pct);
71
- }
72
- .border-contrast-5 {
73
- --lumo-utility-border-color: var(--lumo-contrast-5pct);
74
- }
75
-
76
- .border-primary {
77
- --lumo-utility-border-color: var(--lumo-primary-color);
78
- }
79
- .border-primary-50 {
80
- --lumo-utility-border-color: var(--lumo-primary-color-50pct);
81
- }
82
- .border-primary-10 {
83
- --lumo-utility-border-color: var(--lumo-primary-color-10pct);
84
- }
85
-
86
- .border-error {
87
- --lumo-utility-border-color: var(--lumo-error-color);
88
- }
89
- .border-error-50 {
90
- --lumo-utility-border-color: var(--lumo-error-color-50pct);
91
- }
92
- .border-error-10 {
93
- --lumo-utility-border-color: var(--lumo-error-color-10pct);
94
- }
95
-
96
- .border-success {
97
- --lumo-utility-border-color: var(--lumo-success-color);
98
- }
99
- .border-success-50 {
100
- --lumo-utility-border-color: var(--lumo-success-color-50pct);
101
- }
102
- .border-success-10 {
103
- --lumo-utility-border-color: var(--lumo-success-color-10pct);
104
- }
105
-
106
- .border-warning {
107
- --lumo-utility-border-color: var(--lumo-warning-color);
108
- }
109
- .border-warning-strong {
110
- --lumo-utility-border-color: var(--lumo-warning-text-color);
111
- }
112
- .border-warning-10 {
113
- --lumo-utility-border-color: var(--lumo-warning-color-10pct);
114
- }
115
-
116
- /* === Border radius === */
117
- .rounded-none {
118
- border-radius: 0;
119
- }
120
- .rounded-s {
121
- border-radius: var(--lumo-border-radius-s);
122
- }
123
- .rounded-m {
124
- border-radius: var(--lumo-border-radius-m);
125
- }
126
- .rounded-l {
127
- border-radius: var(--lumo-border-radius-l);
128
- }
129
- .rounded-full {
130
- border-radius: 9999px;
131
- }
132
-
133
- /* === Divide === */
134
- .divide-x > * + * {
135
- border-inline-start: 1px var(--lumo-utility-border-style, solid)
136
- var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
137
- }
138
- .divide-y > * + * {
139
- border-block-start: 1px var(--lumo-utility-border-style, solid)
140
- var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
141
- }
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
+ /* === Border === */
7
+ .border-0 {
8
+ border: none;
9
+ }
10
+
11
+ .border-dashed {
12
+ --lumo-utility-border-style: dashed;
13
+ }
14
+
15
+ .border-dotted {
16
+ --lumo-utility-border-style: dotted;
17
+ }
18
+
19
+ .border {
20
+ border: 1px var(--lumo-utility-border-style, solid) var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
21
+ }
22
+
23
+ .border-b {
24
+ border-bottom: 1px var(--lumo-utility-border-style, solid)
25
+ var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
26
+ }
27
+
28
+ .border-e {
29
+ border-inline-end: 1px var(--lumo-utility-border-style, solid)
30
+ var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
31
+ }
32
+
33
+ .border-l {
34
+ border-left: 1px var(--lumo-utility-border-style, solid) var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
35
+ }
36
+
37
+ .border-r {
38
+ border-right: 1px var(--lumo-utility-border-style, solid) var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
39
+ }
40
+
41
+ .border-s {
42
+ border-inline-start: 1px var(--lumo-utility-border-style, solid)
43
+ var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
44
+ }
45
+
46
+ .border-t {
47
+ border-top: 1px var(--lumo-utility-border-style, solid) var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
48
+ }
49
+
50
+ /* === Border color === */
51
+ .border-contrast {
52
+ --lumo-utility-border-color: var(--lumo-contrast);
53
+ }
54
+
55
+ .border-contrast-90 {
56
+ --lumo-utility-border-color: var(--lumo-contrast-90pct);
57
+ }
58
+
59
+ .border-contrast-80 {
60
+ --lumo-utility-border-color: var(--lumo-contrast-80pct);
61
+ }
62
+
63
+ .border-contrast-70 {
64
+ --lumo-utility-border-color: var(--lumo-contrast-70pct);
65
+ }
66
+
67
+ .border-contrast-60 {
68
+ --lumo-utility-border-color: var(--lumo-contrast-60pct);
69
+ }
70
+
71
+ .border-contrast-50 {
72
+ --lumo-utility-border-color: var(--lumo-contrast-50pct);
73
+ }
74
+
75
+ .border-contrast-40 {
76
+ --lumo-utility-border-color: var(--lumo-contrast-40pct);
77
+ }
78
+
79
+ .border-contrast-30 {
80
+ --lumo-utility-border-color: var(--lumo-contrast-30pct);
81
+ }
82
+
83
+ .border-contrast-20 {
84
+ --lumo-utility-border-color: var(--lumo-contrast-20pct);
85
+ }
86
+
87
+ .border-contrast-10 {
88
+ --lumo-utility-border-color: var(--lumo-contrast-10pct);
89
+ }
90
+
91
+ .border-contrast-5 {
92
+ --lumo-utility-border-color: var(--lumo-contrast-5pct);
93
+ }
94
+
95
+ .border-primary {
96
+ --lumo-utility-border-color: var(--lumo-primary-color);
97
+ }
98
+
99
+ .border-primary-50 {
100
+ --lumo-utility-border-color: var(--lumo-primary-color-50pct);
101
+ }
102
+
103
+ .border-primary-10 {
104
+ --lumo-utility-border-color: var(--lumo-primary-color-10pct);
105
+ }
106
+
107
+ .border-error {
108
+ --lumo-utility-border-color: var(--lumo-error-color);
109
+ }
110
+
111
+ .border-error-50 {
112
+ --lumo-utility-border-color: var(--lumo-error-color-50pct);
113
+ }
114
+
115
+ .border-error-10 {
116
+ --lumo-utility-border-color: var(--lumo-error-color-10pct);
117
+ }
118
+
119
+ .border-success {
120
+ --lumo-utility-border-color: var(--lumo-success-color);
121
+ }
122
+
123
+ .border-success-50 {
124
+ --lumo-utility-border-color: var(--lumo-success-color-50pct);
125
+ }
126
+
127
+ .border-success-10 {
128
+ --lumo-utility-border-color: var(--lumo-success-color-10pct);
129
+ }
130
+
131
+ .border-warning {
132
+ --lumo-utility-border-color: var(--lumo-warning-color);
133
+ }
134
+
135
+ .border-warning-strong {
136
+ --lumo-utility-border-color: var(--lumo-warning-text-color);
137
+ }
138
+
139
+ .border-warning-10 {
140
+ --lumo-utility-border-color: var(--lumo-warning-color-10pct);
141
+ }
142
+
143
+ /* === Border radius === */
144
+ .rounded-none {
145
+ border-radius: 0;
146
+ }
147
+
148
+ .rounded-s {
149
+ border-radius: var(--lumo-border-radius-s);
150
+ }
151
+
152
+ .rounded-m {
153
+ border-radius: var(--lumo-border-radius-m);
154
+ }
155
+
156
+ .rounded-l {
157
+ border-radius: var(--lumo-border-radius-l);
158
+ }
159
+
160
+ .rounded-full {
161
+ border-radius: 9999px;
162
+ }
163
+
164
+ /* === Divide === */
165
+ .divide-x > * + * {
166
+ border-inline-start: 1px var(--lumo-utility-border-style, solid)
167
+ var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
168
+ }
169
+
170
+ .divide-y > * + * {
171
+ border-block-start: 1px var(--lumo-utility-border-style, solid)
172
+ var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
173
+ }
package/css/lumo/utilities/Filter.module.css CHANGED
@@ -1,28 +1,37 @@
1
- /* Generated file, do not edit */
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
+ /* === Backdrop filter === */
7
+ .backdrop-blur-none {
8
+ backdrop-filter: blur(0);
9
+ }
2
10
 
11
+ .backdrop-blur-sm {
12
+ backdrop-filter: blur(4px);
13
+ }
3
14
 
4
- /* === Backdrop filter === */
5
- .backdrop-blur-none {
6
- backdrop-filter: blur(0);
7
- }
8
- .backdrop-blur-sm {
9
- backdrop-filter: blur(4px);
10
- }
11
- .backdrop-blur {
12
- backdrop-filter: blur(8px);
13
- }
14
- .backdrop-blur-md {
15
- backdrop-filter: blur(12px);
16
- }
17
- .backdrop-blur-lg {
18
- backdrop-filter: blur(16px);
19
- }
20
- .backdrop-blur-xl {
21
- backdrop-filter: blur(24px);
22
- }
23
- .backdrop-blur-2xl {
24
- backdrop-filter: blur(40px);
25
- }
26
- .backdrop-blur-3xl {
27
- backdrop-filter: blur(64px);
28
- }
15
+ .backdrop-blur {
16
+ backdrop-filter: blur(8px);
17
+ }
18
+
19
+ .backdrop-blur-md {
20
+ backdrop-filter: blur(12px);
21
+ }
22
+
23
+ .backdrop-blur-lg {
24
+ backdrop-filter: blur(16px);
25
+ }
26
+
27
+ .backdrop-blur-xl {
28
+ backdrop-filter: blur(24px);
29
+ }
30
+
31
+ .backdrop-blur-2xl {
32
+ backdrop-filter: blur(40px);
33
+ }
34
+
35
+ .backdrop-blur-3xl {
36
+ backdrop-filter: blur(64px);
37
+ }