slexkit 0.2.0 → 0.3.1

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 (104) hide show
  1. package/CHANGELOG.md +70 -0
  2. package/LICENSE +21 -21
  3. package/README.md +4 -3
  4. package/README.zh-CN.md +4 -3
  5. package/dist/ai/llms-authoring.txt +2 -0
  6. package/dist/ai/llms-capabilities.txt +126 -0
  7. package/dist/ai/llms-components.txt +29 -7
  8. package/dist/ai/llms-full.txt +1909 -153
  9. package/dist/ai/llms-runtime.txt +18 -13
  10. package/dist/ai/llms.txt +22 -1
  11. package/dist/ai/slexkit-ai-manifest.json +717 -62
  12. package/dist/base.css +359 -359
  13. package/dist/chunks/{accordion-cfjyxw93.js → button-53ccjq5p.js} +11 -11
  14. package/dist/chunks/{accordion-nw12ytps.js → button-cr1fhsa7.js} +48 -2
  15. package/dist/chunks/{accordion-5f0nvjjm.js → button-dsftwzvg.js} +4 -3
  16. package/dist/chunks/{accordion-hzyrngd6.js → button-faf563xf.js} +2 -2
  17. package/dist/chunks/{accordion-ehnhpeca.js → button-jxv4c65t.js} +2 -2
  18. package/dist/chunks/{accordion-cw5r75jm.js → button-xv2dz7vn.js} +1 -1
  19. package/dist/chunks/{accordion-830dw78f.js → button-z5yv24ks.js} +2 -2
  20. package/dist/components/accordion.js +2 -2
  21. package/dist/components/badge.js +2 -2
  22. package/dist/components/button.css +101 -101
  23. package/dist/components/button.js +3 -3
  24. package/dist/components/callout.js +4 -4
  25. package/dist/components/card.js +2 -2
  26. package/dist/components/checkbox.js +3 -2
  27. package/dist/components/choice.css +151 -151
  28. package/dist/components/code-block.js +2 -2
  29. package/dist/components/collapsible.js +2 -2
  30. package/dist/components/column.js +1 -1
  31. package/dist/components/content.css +273 -250
  32. package/dist/components/display.css +1 -1
  33. package/dist/components/divider.js +2 -2
  34. package/dist/components/grid.js +1 -1
  35. package/dist/components/index.js +13994 -172
  36. package/dist/components/input.css +786 -852
  37. package/dist/components/input.js +34 -144
  38. package/dist/components/link.js +2 -2
  39. package/dist/components/progress.js +2 -2
  40. package/dist/components/radio-group.js +3 -2
  41. package/dist/components/row.js +1 -1
  42. package/dist/components/section.js +2 -2
  43. package/dist/components/select.css +175 -181
  44. package/dist/components/select.js +3 -3
  45. package/dist/components/slider.css +125 -116
  46. package/dist/components/slider.js +2 -2
  47. package/dist/components/specs.js +34 -1
  48. package/dist/components/stat.js +2 -2
  49. package/dist/components/submit.css +8 -8
  50. package/dist/components/submit.js +1 -1
  51. package/dist/components/switch.css +105 -105
  52. package/dist/components/switch.js +4 -3
  53. package/dist/components/table.js +4 -4
  54. package/dist/components/tabs.css +95 -95
  55. package/dist/components/tabs.js +4 -4
  56. package/dist/components/text-input.css +26 -95
  57. package/dist/components/text.js +13 -1
  58. package/dist/components/toast.js +4 -4
  59. package/dist/components/tooling.css +0 -1
  60. package/dist/components/tooling.js +73 -8
  61. package/dist/runtime.cjs +1610 -17
  62. package/dist/runtime.js +1609 -16
  63. package/dist/slexkit.cjs +28191 -13865
  64. package/dist/slexkit.css +1525 -1569
  65. package/dist/slexkit.js +28190 -13864
  66. package/dist/tooling.js +117 -11
  67. package/dist/types/components/svelte/helpers.d.ts +8 -1
  68. package/dist/types/engine/capabilities.d.ts +54 -0
  69. package/dist/types/engine/index.d.ts +6 -0
  70. package/dist/types/engine/secure-runtime.d.ts +9 -1
  71. package/dist/types/engine/stdlib.d.ts +30 -0
  72. package/dist/types/engine/types.d.ts +1 -0
  73. package/dist/types/engine/validation.d.ts +28 -0
  74. package/dist/types/index.d.ts +6 -3
  75. package/dist/types/runtime.d.ts +6 -3
  76. package/dist/types/version.d.ts +2 -2
  77. package/dist/umd/slexkit.tooling.umd.js +45084 -44775
  78. package/dist/umd/slexkit.umd.js +28191 -13865
  79. package/package.json +5 -3
  80. package/skills/slexkit-host-integration/SKILL.md +1 -1
  81. package/src/components/svelte/content/Formula.svelte +27 -0
  82. package/src/components/svelte/content/Table.svelte +1 -1
  83. package/src/components/svelte/display/Text.svelte +14 -1
  84. package/src/components/svelte/helpers.ts +56 -1
  85. package/src/components/svelte/input/Checkbox.svelte +1 -1
  86. package/src/components/svelte/input/Input.svelte +0 -110
  87. package/src/components/svelte/input/RadioGroup.svelte +1 -1
  88. package/src/components/svelte/input/Select.svelte +2 -2
  89. package/src/components/svelte/input/Switch.svelte +2 -2
  90. package/src/components/svelte/input/Tabs.svelte +7 -7
  91. package/src/components/svelte/tooling/PlaygroundMarkdown.svelte +84 -2
  92. package/src/styles/components/button.css +101 -101
  93. package/src/styles/components/choice.css +152 -152
  94. package/src/styles/components/select.css +175 -181
  95. package/src/styles/components/slider.css +125 -116
  96. package/src/styles/components/submit.css +8 -8
  97. package/src/styles/components/switch.css +105 -105
  98. package/src/styles/components/tabs.css +95 -95
  99. package/src/styles/components/text-input.css +26 -95
  100. package/src/styles/content.css +274 -251
  101. package/src/styles/display.css +1 -1
  102. package/src/styles/input.css +8 -8
  103. package/src/styles/layout.css +360 -360
  104. package/src/styles/tooling.css +0 -1
package/src/styles/layout.css CHANGED
@@ -1,365 +1,365 @@
1
- .slexkit-root {
2
- --font-sans:
3
- "Geist", "Geist Sans", "Noto Sans SC", "Noto Sans", ui-sans-serif, system-ui, -apple-system,
4
- BlinkMacSystemFont, "Segoe UI", sans-serif;
5
- --font-mono:
6
- "Geist Mono", "Noto Sans Mono", "Noto Sans Mono CJK SC", "SFMono-Regular", "Cascadia Code",
7
- Consolas, monospace;
8
- font-family: var(
9
- --font-sans,
10
- "Geist",
11
- "Geist Sans",
12
- "Noto Sans SC",
13
- "Noto Sans",
14
- ui-sans-serif,
15
- system-ui,
16
- -apple-system,
17
- BlinkMacSystemFont,
18
- "Segoe UI",
19
- sans-serif
20
- );
21
- color: var(--foreground);
22
- background: transparent;
23
- line-height: 1.5;
24
- -webkit-font-smoothing: antialiased;
25
- -moz-osx-font-smoothing: grayscale;
26
- }
27
-
28
- .slexkit-root,
29
- .slexkit-root *,
30
- .slexkit-root *::before,
31
- .slexkit-root *::after {
32
- box-sizing: border-box;
33
- }
34
-
35
- body[data-mobile-nav-open] {
36
- overflow: hidden;
37
- overscroll-behavior: contain;
38
- }
39
-
40
- #mobileNav {
41
- --mobile-nav-backdrop-opacity: 0;
42
- --mobile-nav-panel-translate: -100%;
43
- pointer-events: none;
44
- }
45
-
46
- #mobileNav[data-open="true"] {
47
- --mobile-nav-backdrop-opacity: 1;
48
- --mobile-nav-panel-translate: 0px;
49
- pointer-events: auto;
50
- }
51
-
52
- #mobileNav [data-mobile-nav-backdrop] {
53
- opacity: var(--mobile-nav-backdrop-opacity);
54
- touch-action: pan-y;
55
- transition: opacity 180ms ease;
56
- }
57
-
58
- #mobileNav [data-mobile-nav-panel] {
59
- transform: translateX(var(--mobile-nav-panel-translate));
60
- touch-action: pan-y;
61
- transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
62
- will-change: transform;
63
- }
64
-
65
- #mobileNav[data-dragging="true"] [data-mobile-nav-backdrop],
66
- #mobileNav[data-dragging="true"] [data-mobile-nav-panel] {
67
- transition: none;
68
- }
69
-
70
- @media (prefers-reduced-motion: reduce) {
71
- #mobileNav [data-mobile-nav-backdrop],
72
- #mobileNav [data-mobile-nav-panel] {
73
- transition: none;
74
- }
75
- }
76
-
77
- .slexkit-for-wrapper {
78
- display: contents;
79
- }
80
-
81
- .slexkit-source-toolbar {
82
- display: flex;
83
- align-items: center;
84
- justify-content: flex-end;
85
- gap: 0.5rem;
86
- margin: 0.5rem 0;
87
- }
88
-
89
- .slexkit-source-button {
90
- display: inline-flex;
91
- align-items: center;
92
- justify-content: center;
93
- min-height: 28px;
94
- padding: 0 0.625rem;
95
- border: 1px solid var(--border);
96
- border-radius: calc(var(--radius) - 2px);
97
- background: var(--secondary);
98
- color: var(--secondary-foreground);
99
- font-family: inherit;
100
- font-size: 0.75rem;
101
- font-weight: 500;
102
- cursor: pointer;
103
- transition:
104
- background 150ms ease,
105
- color 150ms ease,
106
- border-color 150ms ease;
107
- }
108
-
109
- .slexkit-source-button:hover {
110
- background: var(--accent);
111
- color: var(--accent-foreground);
112
- border-color: var(--border);
113
- }
114
-
115
- .slexkit-source-button:focus-visible {
116
- outline: 2px solid var(--ring);
117
- outline-offset: 2px;
118
- }
119
-
120
- .slexkit-preview {
121
- width: 100%;
122
- }
123
-
124
- .slex-layout {
125
- display: grid;
126
- width: 100%;
127
- min-width: 0;
128
- gap: 1rem;
129
- }
130
-
131
- .slex-layout > .slex-row {
132
- justify-content: space-between;
133
- align-items: center;
134
- }
135
-
136
- .slex-layout .slex-text {
137
- color: var(--foreground);
138
- }
139
-
140
- .slex-layout .slex-text--muted {
141
- color: var(--muted-foreground);
142
- }
143
-
144
- .slex-card {
145
- display: flex;
146
- flex-direction: column;
147
- width: 100%;
148
- max-width: none;
149
- min-width: 0;
150
- background: var(--card);
151
- color: var(--card-foreground);
152
- border: 1px solid var(--border);
153
- border-radius: calc(var(--radius) + 4px);
154
- padding: 1.25rem;
155
- box-shadow: var(--shadow-sm);
156
- transition:
157
- box-shadow 150ms ease,
158
- border-color 150ms ease;
159
- }
160
-
161
- .slex-card:hover {
162
- border-color: var(--border);
163
- box-shadow: var(--shadow-md);
164
- }
165
-
1
+ .slexkit-root {
2
+ --font-sans:
3
+ "Geist", "Geist Sans", "Noto Sans SC", "Noto Sans", ui-sans-serif, system-ui, -apple-system,
4
+ BlinkMacSystemFont, "Segoe UI", sans-serif;
5
+ --font-mono:
6
+ "Geist Mono", "Noto Sans Mono", "Noto Sans Mono CJK SC", "SFMono-Regular", "Cascadia Code",
7
+ Consolas, monospace;
8
+ font-family: var(
9
+ --font-sans,
10
+ "Geist",
11
+ "Geist Sans",
12
+ "Noto Sans SC",
13
+ "Noto Sans",
14
+ ui-sans-serif,
15
+ system-ui,
16
+ -apple-system,
17
+ BlinkMacSystemFont,
18
+ "Segoe UI",
19
+ sans-serif
20
+ );
21
+ color: var(--foreground);
22
+ background: transparent;
23
+ line-height: 1.5;
24
+ -webkit-font-smoothing: antialiased;
25
+ -moz-osx-font-smoothing: grayscale;
26
+ }
27
+
28
+ .slexkit-root,
29
+ .slexkit-root *,
30
+ .slexkit-root *::before,
31
+ .slexkit-root *::after {
32
+ box-sizing: border-box;
33
+ }
34
+
35
+ body[data-mobile-nav-open] {
36
+ overflow: hidden;
37
+ overscroll-behavior: contain;
38
+ }
39
+
40
+ #mobileNav {
41
+ --mobile-nav-backdrop-opacity: 0;
42
+ --mobile-nav-panel-translate: -100%;
43
+ pointer-events: none;
44
+ }
45
+
46
+ #mobileNav[data-open="true"] {
47
+ --mobile-nav-backdrop-opacity: 1;
48
+ --mobile-nav-panel-translate: 0px;
49
+ pointer-events: auto;
50
+ }
51
+
52
+ #mobileNav [data-mobile-nav-backdrop] {
53
+ opacity: var(--mobile-nav-backdrop-opacity);
54
+ touch-action: pan-y;
55
+ transition: opacity 180ms ease;
56
+ }
57
+
58
+ #mobileNav [data-mobile-nav-panel] {
59
+ transform: translateX(var(--mobile-nav-panel-translate));
60
+ touch-action: pan-y;
61
+ transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
62
+ will-change: transform;
63
+ }
64
+
65
+ #mobileNav[data-dragging="true"] [data-mobile-nav-backdrop],
66
+ #mobileNav[data-dragging="true"] [data-mobile-nav-panel] {
67
+ transition: none;
68
+ }
69
+
70
+ @media (prefers-reduced-motion: reduce) {
71
+ #mobileNav [data-mobile-nav-backdrop],
72
+ #mobileNav [data-mobile-nav-panel] {
73
+ transition: none;
74
+ }
75
+ }
76
+
77
+ .slexkit-for-wrapper {
78
+ display: contents;
79
+ }
80
+
81
+ .slexkit-source-toolbar {
82
+ display: flex;
83
+ align-items: center;
84
+ justify-content: flex-end;
85
+ gap: 0.5rem;
86
+ margin: 0.5rem 0;
87
+ }
88
+
89
+ .slexkit-source-button {
90
+ display: inline-flex;
91
+ align-items: center;
92
+ justify-content: center;
93
+ min-height: 28px;
94
+ padding: 0 0.625rem;
95
+ border: 1px solid var(--border);
96
+ border-radius: calc(var(--radius) - 2px);
97
+ background: var(--secondary);
98
+ color: var(--secondary-foreground);
99
+ font-family: inherit;
100
+ font-size: 0.75rem;
101
+ font-weight: 500;
102
+ cursor: pointer;
103
+ transition:
104
+ background 150ms ease,
105
+ color 150ms ease,
106
+ border-color 150ms ease;
107
+ }
108
+
109
+ .slexkit-source-button:hover {
110
+ background: var(--accent);
111
+ color: var(--accent-foreground);
112
+ border-color: var(--border);
113
+ }
114
+
115
+ .slexkit-source-button:focus-visible {
116
+ outline: 2px solid var(--ring);
117
+ outline-offset: 2px;
118
+ }
119
+
120
+ .slexkit-preview {
121
+ width: 100%;
122
+ }
123
+
124
+ .slex-layout {
125
+ display: grid;
126
+ width: 100%;
127
+ min-width: 0;
128
+ gap: 1rem;
129
+ }
130
+
131
+ .slex-layout > .slex-row {
132
+ justify-content: space-between;
133
+ align-items: center;
134
+ }
135
+
136
+ .slex-layout .slex-text {
137
+ color: var(--foreground);
138
+ }
139
+
140
+ .slex-layout .slex-text--muted {
141
+ color: var(--muted-foreground);
142
+ }
143
+
144
+ .slex-card {
145
+ display: flex;
146
+ flex-direction: column;
147
+ width: 100%;
148
+ max-width: none;
149
+ min-width: 0;
150
+ background: var(--card);
151
+ color: var(--card-foreground);
152
+ border: 1px solid var(--border);
153
+ border-radius: calc(var(--radius) + 4px);
154
+ padding: 1.25rem;
155
+ box-shadow: var(--shadow-sm);
156
+ transition:
157
+ box-shadow 150ms ease,
158
+ border-color 150ms ease;
159
+ }
160
+
161
+ .slex-card:hover {
162
+ border-color: var(--border);
163
+ box-shadow: var(--shadow-md);
164
+ }
165
+
166
166
  .slex-card-title {
167
167
  display: inline-flex;
168
168
  align-items: center;
169
169
  gap: 0.5rem;
170
170
  margin: 0 0 1rem;
171
- padding-bottom: 0.75rem;
172
- border-bottom: 1px solid var(--border);
173
- color: var(--card-foreground);
174
- font-size: 1.125rem;
175
- font-weight: 600;
176
- line-height: 1.25;
177
- }
178
-
179
- .slex-card-body {
180
- display: flex;
181
- width: 100%;
182
- min-width: 0;
183
- flex-direction: column;
184
- gap: 1rem;
185
- }
186
-
187
- .slex-column {
188
- display: flex;
189
- min-width: 0;
190
- flex-direction: column;
191
- gap: 1rem;
192
- }
193
-
194
- .slex-row {
195
- display: flex;
196
- flex-direction: row;
197
- gap: 1rem;
198
- align-items: center;
199
- flex-wrap: wrap;
200
- }
201
-
202
- .slex-row > * {
203
- min-width: 0;
204
- }
205
-
206
- .slex-row--balanced-tiles {
207
- --slex-balanced-tile-width: 136px;
208
- display: grid;
209
- width: 100%;
210
- grid-template-columns: repeat(var(--slex-balanced-tracks, var(--slex-balanced-cols)), minmax(0, 1fr));
211
- justify-content: stretch;
212
- align-items: stretch;
213
- }
214
-
215
- .slex-row--balanced-tiles > :is(.slex-stat, .slex-card) {
216
- width: 100%;
217
- }
218
-
219
- .slex-grid {
220
- display: grid;
221
- width: 100%;
222
- min-width: 0;
223
- gap: 1rem;
224
- }
225
-
226
- .slex-grid {
227
- grid-template-columns: 1fr;
228
- }
229
- .slex-grid[data-cols="1"] {
230
- grid-template-columns: 1fr;
231
- }
232
- .slex-grid[data-cols="2"] {
233
- grid-template-columns: repeat(2, 1fr);
234
- }
235
- .slex-grid[data-cols="3"] {
236
- grid-template-columns: repeat(3, 1fr);
237
- }
238
- .slex-grid[data-cols="4"] {
239
- grid-template-columns: repeat(4, 1fr);
240
- }
241
- .slex-grid[data-cols="5"] {
242
- grid-template-columns: repeat(5, 1fr);
243
- }
244
- .slex-grid[data-cols="6"] {
245
- grid-template-columns: repeat(6, 1fr);
246
- }
247
- .slex-grid[data-cols="12"] {
248
- grid-template-columns: repeat(12, 1fr);
249
- }
250
-
251
- @media (min-width: 640px) {
252
- .slex-grid[data-cols-sm="1"] {
253
- grid-template-columns: 1fr;
254
- }
255
- .slex-grid[data-cols-sm="2"] {
256
- grid-template-columns: repeat(2, 1fr);
257
- }
258
- .slex-grid[data-cols-sm="3"] {
259
- grid-template-columns: repeat(3, 1fr);
260
- }
261
- .slex-grid[data-cols-sm="4"] {
262
- grid-template-columns: repeat(4, 1fr);
263
- }
264
- .slex-grid[data-cols-sm="5"] {
265
- grid-template-columns: repeat(5, 1fr);
266
- }
267
- .slex-grid[data-cols-sm="6"] {
268
- grid-template-columns: repeat(6, 1fr);
269
- }
270
- .slex-grid[data-cols-sm="12"] {
271
- grid-template-columns: repeat(12, 1fr);
272
- }
273
- }
274
-
275
- @media (min-width: 768px) {
276
- .slex-grid[data-cols-md="1"] {
277
- grid-template-columns: 1fr;
278
- }
279
- .slex-grid[data-cols-md="2"] {
280
- grid-template-columns: repeat(2, 1fr);
281
- }
282
- .slex-grid[data-cols-md="3"] {
283
- grid-template-columns: repeat(3, 1fr);
284
- }
285
- .slex-grid[data-cols-md="4"] {
286
- grid-template-columns: repeat(4, 1fr);
287
- }
288
- .slex-grid[data-cols-md="5"] {
289
- grid-template-columns: repeat(5, 1fr);
290
- }
291
- .slex-grid[data-cols-md="6"] {
292
- grid-template-columns: repeat(6, 1fr);
293
- }
294
- .slex-grid[data-cols-md="12"] {
295
- grid-template-columns: repeat(12, 1fr);
296
- }
297
- }
298
-
299
- @media (min-width: 1024px) {
300
- .slex-grid[data-cols-lg="1"] {
301
- grid-template-columns: 1fr;
302
- }
303
- .slex-grid[data-cols-lg="2"] {
304
- grid-template-columns: repeat(2, 1fr);
305
- }
306
- .slex-grid[data-cols-lg="3"] {
307
- grid-template-columns: repeat(3, 1fr);
308
- }
309
- .slex-grid[data-cols-lg="4"] {
310
- grid-template-columns: repeat(4, 1fr);
311
- }
312
- .slex-grid[data-cols-lg="5"] {
313
- grid-template-columns: repeat(5, 1fr);
314
- }
315
- .slex-grid[data-cols-lg="6"] {
316
- grid-template-columns: repeat(6, 1fr);
317
- }
318
- .slex-grid[data-cols-lg="12"] {
319
- grid-template-columns: repeat(12, 1fr);
320
- }
321
- }
322
-
323
- @media (min-width: 1280px) {
324
- .slex-grid[data-cols-xl="1"] {
325
- grid-template-columns: 1fr;
326
- }
327
- .slex-grid[data-cols-xl="2"] {
328
- grid-template-columns: repeat(2, 1fr);
329
- }
330
- .slex-grid[data-cols-xl="3"] {
331
- grid-template-columns: repeat(3, 1fr);
332
- }
333
- .slex-grid[data-cols-xl="4"] {
334
- grid-template-columns: repeat(4, 1fr);
335
- }
336
- .slex-grid[data-cols-xl="5"] {
337
- grid-template-columns: repeat(5, 1fr);
338
- }
339
- .slex-grid[data-cols-xl="6"] {
340
- grid-template-columns: repeat(6, 1fr);
341
- }
342
- .slex-grid[data-cols-xl="12"] {
343
- grid-template-columns: repeat(12, 1fr);
344
- }
345
- }
346
-
347
- @media (max-width: 639px) {
348
- .slex-card {
349
- padding: 1rem;
350
- }
351
-
352
- .slex-row {
353
- align-items: stretch;
354
- }
355
-
356
- .slex-grid[data-cols],
357
- .slex-grid[data-cols="2"],
358
- .slex-grid[data-cols="3"],
359
- .slex-grid[data-cols="4"],
360
- .slex-grid[data-cols="5"],
361
- .slex-grid[data-cols="6"],
362
- .slex-grid[data-cols="12"] {
363
- grid-template-columns: 1fr;
364
- }
365
- }
171
+ padding-bottom: 0.75rem;
172
+ border-bottom: 1px solid var(--border);
173
+ color: var(--card-foreground);
174
+ font-size: 1.125rem;
175
+ font-weight: 600;
176
+ line-height: 1.25;
177
+ }
178
+
179
+ .slex-card-body {
180
+ display: flex;
181
+ width: 100%;
182
+ min-width: 0;
183
+ flex-direction: column;
184
+ gap: 1rem;
185
+ }
186
+
187
+ .slex-column {
188
+ display: flex;
189
+ min-width: 0;
190
+ flex-direction: column;
191
+ gap: 1rem;
192
+ }
193
+
194
+ .slex-row {
195
+ display: flex;
196
+ flex-direction: row;
197
+ gap: 1rem;
198
+ align-items: center;
199
+ flex-wrap: wrap;
200
+ }
201
+
202
+ .slex-row > * {
203
+ min-width: 0;
204
+ }
205
+
206
+ .slex-row--balanced-tiles {
207
+ --slex-balanced-tile-width: 136px;
208
+ display: grid;
209
+ width: 100%;
210
+ grid-template-columns: repeat(var(--slex-balanced-tracks, var(--slex-balanced-cols)), minmax(0, 1fr));
211
+ justify-content: stretch;
212
+ align-items: stretch;
213
+ }
214
+
215
+ .slex-row--balanced-tiles > :is(.slex-stat, .slex-card) {
216
+ width: 100%;
217
+ }
218
+
219
+ .slex-grid {
220
+ display: grid;
221
+ width: 100%;
222
+ min-width: 0;
223
+ gap: 1rem;
224
+ }
225
+
226
+ .slex-grid {
227
+ grid-template-columns: 1fr;
228
+ }
229
+ .slex-grid[data-cols="1"] {
230
+ grid-template-columns: 1fr;
231
+ }
232
+ .slex-grid[data-cols="2"] {
233
+ grid-template-columns: repeat(2, 1fr);
234
+ }
235
+ .slex-grid[data-cols="3"] {
236
+ grid-template-columns: repeat(3, 1fr);
237
+ }
238
+ .slex-grid[data-cols="4"] {
239
+ grid-template-columns: repeat(4, 1fr);
240
+ }
241
+ .slex-grid[data-cols="5"] {
242
+ grid-template-columns: repeat(5, 1fr);
243
+ }
244
+ .slex-grid[data-cols="6"] {
245
+ grid-template-columns: repeat(6, 1fr);
246
+ }
247
+ .slex-grid[data-cols="12"] {
248
+ grid-template-columns: repeat(12, 1fr);
249
+ }
250
+
251
+ @media (min-width: 640px) {
252
+ .slex-grid[data-cols-sm="1"] {
253
+ grid-template-columns: 1fr;
254
+ }
255
+ .slex-grid[data-cols-sm="2"] {
256
+ grid-template-columns: repeat(2, 1fr);
257
+ }
258
+ .slex-grid[data-cols-sm="3"] {
259
+ grid-template-columns: repeat(3, 1fr);
260
+ }
261
+ .slex-grid[data-cols-sm="4"] {
262
+ grid-template-columns: repeat(4, 1fr);
263
+ }
264
+ .slex-grid[data-cols-sm="5"] {
265
+ grid-template-columns: repeat(5, 1fr);
266
+ }
267
+ .slex-grid[data-cols-sm="6"] {
268
+ grid-template-columns: repeat(6, 1fr);
269
+ }
270
+ .slex-grid[data-cols-sm="12"] {
271
+ grid-template-columns: repeat(12, 1fr);
272
+ }
273
+ }
274
+
275
+ @media (min-width: 768px) {
276
+ .slex-grid[data-cols-md="1"] {
277
+ grid-template-columns: 1fr;
278
+ }
279
+ .slex-grid[data-cols-md="2"] {
280
+ grid-template-columns: repeat(2, 1fr);
281
+ }
282
+ .slex-grid[data-cols-md="3"] {
283
+ grid-template-columns: repeat(3, 1fr);
284
+ }
285
+ .slex-grid[data-cols-md="4"] {
286
+ grid-template-columns: repeat(4, 1fr);
287
+ }
288
+ .slex-grid[data-cols-md="5"] {
289
+ grid-template-columns: repeat(5, 1fr);
290
+ }
291
+ .slex-grid[data-cols-md="6"] {
292
+ grid-template-columns: repeat(6, 1fr);
293
+ }
294
+ .slex-grid[data-cols-md="12"] {
295
+ grid-template-columns: repeat(12, 1fr);
296
+ }
297
+ }
298
+
299
+ @media (min-width: 1024px) {
300
+ .slex-grid[data-cols-lg="1"] {
301
+ grid-template-columns: 1fr;
302
+ }
303
+ .slex-grid[data-cols-lg="2"] {
304
+ grid-template-columns: repeat(2, 1fr);
305
+ }
306
+ .slex-grid[data-cols-lg="3"] {
307
+ grid-template-columns: repeat(3, 1fr);
308
+ }
309
+ .slex-grid[data-cols-lg="4"] {
310
+ grid-template-columns: repeat(4, 1fr);
311
+ }
312
+ .slex-grid[data-cols-lg="5"] {
313
+ grid-template-columns: repeat(5, 1fr);
314
+ }
315
+ .slex-grid[data-cols-lg="6"] {
316
+ grid-template-columns: repeat(6, 1fr);
317
+ }
318
+ .slex-grid[data-cols-lg="12"] {
319
+ grid-template-columns: repeat(12, 1fr);
320
+ }
321
+ }
322
+
323
+ @media (min-width: 1280px) {
324
+ .slex-grid[data-cols-xl="1"] {
325
+ grid-template-columns: 1fr;
326
+ }
327
+ .slex-grid[data-cols-xl="2"] {
328
+ grid-template-columns: repeat(2, 1fr);
329
+ }
330
+ .slex-grid[data-cols-xl="3"] {
331
+ grid-template-columns: repeat(3, 1fr);
332
+ }
333
+ .slex-grid[data-cols-xl="4"] {
334
+ grid-template-columns: repeat(4, 1fr);
335
+ }
336
+ .slex-grid[data-cols-xl="5"] {
337
+ grid-template-columns: repeat(5, 1fr);
338
+ }
339
+ .slex-grid[data-cols-xl="6"] {
340
+ grid-template-columns: repeat(6, 1fr);
341
+ }
342
+ .slex-grid[data-cols-xl="12"] {
343
+ grid-template-columns: repeat(12, 1fr);
344
+ }
345
+ }
346
+
347
+ @media (max-width: 639px) {
348
+ .slex-card {
349
+ padding: 1rem;
350
+ }
351
+
352
+ .slex-row {
353
+ align-items: stretch;
354
+ }
355
+
356
+ .slex-grid[data-cols],
357
+ .slex-grid[data-cols="2"],
358
+ .slex-grid[data-cols="3"],
359
+ .slex-grid[data-cols="4"],
360
+ .slex-grid[data-cols="5"],
361
+ .slex-grid[data-cols="6"],
362
+ .slex-grid[data-cols="12"] {
363
+ grid-template-columns: 1fr;
364
+ }
365
+ }