@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/Shadows.module.css CHANGED
@@ -1,22 +1,29 @@
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
+ /* === Box shadow === */
7
+ .shadow-none {
8
+ box-shadow: none;
9
+ }
2
10
 
11
+ .shadow-xs {
12
+ box-shadow: var(--lumo-box-shadow-xs);
13
+ }
3
14
 
4
- /* === Box shadow === */
5
- .shadow-none {
6
- box-shadow: none;
7
- }
8
- .shadow-xs {
9
- box-shadow: var(--lumo-box-shadow-xs);
10
- }
11
- .shadow-s {
12
- box-shadow: var(--lumo-box-shadow-s);
13
- }
14
- .shadow-m {
15
- box-shadow: var(--lumo-box-shadow-m);
16
- }
17
- .shadow-l {
18
- box-shadow: var(--lumo-box-shadow-l);
19
- }
20
- .shadow-xl {
21
- box-shadow: var(--lumo-box-shadow-xl);
22
- }
15
+ .shadow-s {
16
+ box-shadow: var(--lumo-box-shadow-s);
17
+ }
18
+
19
+ .shadow-m {
20
+ box-shadow: var(--lumo-box-shadow-m);
21
+ }
22
+
23
+ .shadow-l {
24
+ box-shadow: var(--lumo-box-shadow-l);
25
+ }
26
+
27
+ .shadow-xl {
28
+ box-shadow: var(--lumo-box-shadow-xl);
29
+ }
package/css/lumo/utilities/Sizing.module.css CHANGED
@@ -1,115 +1,142 @@
1
- /* Generated file, do not edit */
2
-
3
-
4
- /* === Height === */
5
- .h-0 {
6
- height: 0;
7
- }
8
- .h-xs {
9
- height: var(--lumo-size-xs);
10
- }
11
- .h-s {
12
- height: var(--lumo-size-s);
13
- }
14
- .h-m {
15
- height: var(--lumo-size-m);
16
- }
17
- .h-l {
18
- height: var(--lumo-size-l);
19
- }
20
- .h-xl {
21
- height: var(--lumo-size-xl);
22
- }
23
- .h-auto {
24
- height: auto;
25
- }
26
- .h-full {
27
- height: 100%;
28
- }
29
- .h-screen {
30
- height: 100vh;
31
- }
32
-
33
- /* === Height (max) === */
34
- .max-h-full {
35
- max-height: 100%;
36
- }
37
- .max-h-screen {
38
- max-height: 100vh;
39
- }
40
-
41
- /* === Height (min) === */
42
- .min-h-0 {
43
- min-height: 0;
44
- }
45
- .min-h-full {
46
- min-height: 100%;
47
- }
48
- .min-h-screen {
49
- min-height: 100vh;
50
- }
51
-
52
- /* === Icon sizing === */
53
- .icon-s {
54
- height: var(--lumo-icon-size-s);
55
- width: var(--lumo-icon-size-s);
56
- }
57
- .icon-m {
58
- height: var(--lumo-icon-size-m);
59
- width: var(--lumo-icon-size-m);
60
- }
61
- .icon-l {
62
- height: var(--lumo-icon-size-l);
63
- width: var(--lumo-icon-size-l);
64
- }
65
-
66
- /* === Width === */
67
- .w-xs {
68
- width: var(--lumo-size-xs);
69
- }
70
- .w-s {
71
- width: var(--lumo-size-s);
72
- }
73
- .w-m {
74
- width: var(--lumo-size-m);
75
- }
76
- .w-l {
77
- width: var(--lumo-size-l);
78
- }
79
- .w-xl {
80
- width: var(--lumo-size-xl);
81
- }
82
- .w-auto {
83
- width: auto;
84
- }
85
- .w-full {
86
- width: 100%;
87
- }
88
-
89
- /* === Width (max) === */
90
- .max-w-full {
91
- max-width: 100%;
92
- }
93
- .max-w-screen-sm {
94
- max-width: 640px;
95
- }
96
- .max-w-screen-md {
97
- max-width: 768px;
98
- }
99
- .max-w-screen-lg {
100
- max-width: 1024px;
101
- }
102
- .max-w-screen-xl {
103
- max-width: 1280px;
104
- }
105
- .max-w-screen-2xl {
106
- max-width: 1536px;
107
- }
108
-
109
- /* === Width (min) === */
110
- .min-w-0 {
111
- min-width: 0;
112
- }
113
- .min-w-full {
114
- min-width: 100%;
115
- }
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
+ /* === Height === */
7
+ .h-0 {
8
+ height: 0;
9
+ }
10
+
11
+ .h-xs {
12
+ height: var(--lumo-size-xs);
13
+ }
14
+
15
+ .h-s {
16
+ height: var(--lumo-size-s);
17
+ }
18
+
19
+ .h-m {
20
+ height: var(--lumo-size-m);
21
+ }
22
+
23
+ .h-l {
24
+ height: var(--lumo-size-l);
25
+ }
26
+
27
+ .h-xl {
28
+ height: var(--lumo-size-xl);
29
+ }
30
+
31
+ .h-auto {
32
+ height: auto;
33
+ }
34
+
35
+ .h-full {
36
+ height: 100%;
37
+ }
38
+
39
+ .h-screen {
40
+ height: 100vh;
41
+ }
42
+
43
+ /* === Height (max) === */
44
+ .max-h-full {
45
+ max-height: 100%;
46
+ }
47
+
48
+ .max-h-screen {
49
+ max-height: 100vh;
50
+ }
51
+
52
+ /* === Height (min) === */
53
+ .min-h-0 {
54
+ min-height: 0;
55
+ }
56
+
57
+ .min-h-full {
58
+ min-height: 100%;
59
+ }
60
+
61
+ .min-h-screen {
62
+ min-height: 100vh;
63
+ }
64
+
65
+ /* === Icon sizing === */
66
+ .icon-s {
67
+ height: var(--lumo-icon-size-s);
68
+ width: var(--lumo-icon-size-s);
69
+ }
70
+
71
+ .icon-m {
72
+ height: var(--lumo-icon-size-m);
73
+ width: var(--lumo-icon-size-m);
74
+ }
75
+
76
+ .icon-l {
77
+ height: var(--lumo-icon-size-l);
78
+ width: var(--lumo-icon-size-l);
79
+ }
80
+
81
+ /* === Width === */
82
+ .w-xs {
83
+ width: var(--lumo-size-xs);
84
+ }
85
+
86
+ .w-s {
87
+ width: var(--lumo-size-s);
88
+ }
89
+
90
+ .w-m {
91
+ width: var(--lumo-size-m);
92
+ }
93
+
94
+ .w-l {
95
+ width: var(--lumo-size-l);
96
+ }
97
+
98
+ .w-xl {
99
+ width: var(--lumo-size-xl);
100
+ }
101
+
102
+ .w-auto {
103
+ width: auto;
104
+ }
105
+
106
+ .w-full {
107
+ width: 100%;
108
+ }
109
+
110
+ /* === Width (max) === */
111
+ .max-w-full {
112
+ max-width: 100%;
113
+ }
114
+
115
+ .max-w-screen-sm {
116
+ max-width: 640px;
117
+ }
118
+
119
+ .max-w-screen-md {
120
+ max-width: 768px;
121
+ }
122
+
123
+ .max-w-screen-lg {
124
+ max-width: 1024px;
125
+ }
126
+
127
+ .max-w-screen-xl {
128
+ max-width: 1280px;
129
+ }
130
+
131
+ .max-w-screen-2xl {
132
+ max-width: 1536px;
133
+ }
134
+
135
+ /* === Width (min) === */
136
+ .min-w-0 {
137
+ min-width: 0;
138
+ }
139
+
140
+ .min-w-full {
141
+ min-width: 100%;
142
+ }