@askrjs/themes 0.2.1 → 0.2.3

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 (20) hide show
  1. package/THEMING.md +22 -1
  2. package/dist/components/catalog.d.ts +3 -2
  3. package/dist/components/catalog.js +51 -60
  4. package/dist/components/catalog.js.map +1 -1
  5. package/dist/components/navbar/navbar.js +2 -0
  6. package/dist/components/navbar/navbar.js.map +1 -1
  7. package/dist/themes/default/index.css +189 -97
  8. package/package.json +7 -6
  9. package/src/components/catalog.tsx +83 -26
  10. package/src/components/navbar/navbar.tsx +9 -2
  11. package/src/themes/default/styles/base/reset.css +4 -0
  12. package/src/themes/default/styles/display/table.css +32 -31
  13. package/src/themes/default/styles/display/virtual-table.css +142 -13
  14. package/src/themes/default/styles/layout/block.css +0 -1
  15. package/src/themes/default/styles/layout/layout.css +72 -57
  16. package/templates/theme/styles/base/reset.css +4 -0
  17. package/templates/theme/styles/display/table.css +32 -31
  18. package/templates/theme/styles/display/virtual-table.css +148 -13
  19. package/templates/theme/styles/layout/block.css +0 -1
  20. package/templates/theme/styles/layout/layout.css +72 -57
package/src/themes/default/styles/layout/layout.css CHANGED
@@ -4,24 +4,24 @@
4
4
  --ak-display-md: var(--ak-display-sm);
5
5
  --ak-display-lg: var(--ak-display-md);
6
6
  --ak-display-xl: var(--ak-display-lg);
7
- --ak-flex-direction-base: column;
7
+ --ak-flex-direction-base: row;
8
8
  --ak-flex-direction-sm: var(--ak-flex-direction-base);
9
9
  --ak-flex-direction-md: var(--ak-flex-direction-sm);
10
10
  --ak-flex-direction-lg: var(--ak-flex-direction-md);
11
11
  --ak-flex-direction-xl: var(--ak-flex-direction-lg);
12
12
  --ak-flex-wrap-base: nowrap;
13
13
  --ak-flex-wrap-sm: var(--ak-flex-wrap-base);
14
- --ak-align-items-base: stretch;
14
+ --ak-align-items-base: normal;
15
15
  --ak-align-items-sm: var(--ak-align-items-base);
16
16
  --ak-align-items-md: var(--ak-align-items-sm);
17
17
  --ak-align-items-lg: var(--ak-align-items-md);
18
18
  --ak-align-items-xl: var(--ak-align-items-lg);
19
- --ak-justify-content-base: flex-start;
19
+ --ak-justify-content-base: normal;
20
20
  --ak-justify-content-sm: var(--ak-justify-content-base);
21
21
  --ak-justify-content-md: var(--ak-justify-content-sm);
22
22
  --ak-justify-content-lg: var(--ak-justify-content-md);
23
23
  --ak-justify-content-xl: var(--ak-justify-content-lg);
24
- --ak-gap-base: 0;
24
+ --ak-gap-base: normal;
25
25
  --ak-gap-sm: var(--ak-gap-base);
26
26
  --ak-gap-md: var(--ak-gap-sm);
27
27
  --ak-gap-lg: var(--ak-gap-md);
@@ -40,7 +40,7 @@
40
40
  --ak-flex-basis-sm: var(--ak-flex-basis-base);
41
41
  --ak-flex-basis-md: var(--ak-flex-basis-sm);
42
42
  --ak-flex-basis-lg: var(--ak-flex-basis-md);
43
- --ak-min-width-base: 0;
43
+ --ak-min-width-base: auto;
44
44
  --ak-min-width-sm: var(--ak-min-width-base);
45
45
  --ak-min-width-md: var(--ak-min-width-sm);
46
46
  --ak-min-width-lg: var(--ak-min-width-md);
@@ -120,7 +120,7 @@
120
120
  --ak-overflow-x-sm: var(--ak-overflow-x-base);
121
121
  --ak-overflow-y-base: var(--ak-overflow-base);
122
122
  --ak-overflow-y-sm: var(--ak-overflow-y-base);
123
- --ak-border-base: 0 solid transparent;
123
+ --ak-border-base: medium none currentcolor;
124
124
  --ak-border-sm: var(--ak-border-base);
125
125
  --ak-border-md: var(--ak-border-sm);
126
126
  --ak-border-lg: var(--ak-border-md);
@@ -156,15 +156,15 @@
156
156
 
157
157
  box-sizing: border-box;
158
158
  display: var(--ak-display-base, flex);
159
- flex-direction: var(--ak-flex-direction-base, column);
159
+ flex-direction: var(--ak-flex-direction-base, row);
160
160
  flex-wrap: var(--ak-flex-wrap-base, nowrap);
161
- align-items: var(--ak-align-items-base, stretch);
162
- justify-content: var(--ak-justify-content-base, flex-start);
163
- gap: var(--ak-gap-base, 0);
161
+ align-items: var(--ak-align-items-base, normal);
162
+ justify-content: var(--ak-justify-content-base, normal);
163
+ gap: var(--ak-gap-base, normal);
164
164
  flex-grow: var(--ak-flex-grow-base, 0);
165
165
  flex-shrink: var(--ak-flex-shrink-base, 1);
166
166
  flex-basis: var(--ak-flex-basis-base, auto);
167
- min-width: var(--ak-min-width-base, 0);
167
+ min-width: var(--ak-min-width-base, auto);
168
168
  max-width: var(--ak-max-width-base, none);
169
169
  width: var(--ak-width-base, auto);
170
170
  min-height: var(--ak-min-height-base, auto);
@@ -186,10 +186,10 @@
186
186
  overflow: var(--ak-overflow-base, visible);
187
187
  overflow-x: var(--ak-overflow-x-base, var(--ak-overflow-base, visible));
188
188
  overflow-y: var(--ak-overflow-y-base, var(--ak-overflow-base, visible));
189
- border: var(--ak-border-base, 0 solid transparent);
190
- border-top: var(--ak-border-top-base, var(--ak-border-base, 0 solid transparent));
191
- border-bottom: var(--ak-border-bottom-base, var(--ak-border-base, 0 solid transparent));
192
- border-right: var(--ak-border-right-base, var(--ak-border-base, 0 solid transparent));
189
+ border: var(--ak-border-base, medium none currentcolor);
190
+ border-top: var(--ak-border-top-base, var(--ak-border-base, medium none currentcolor));
191
+ border-bottom: var(--ak-border-bottom-base, var(--ak-border-base, medium none currentcolor));
192
+ border-right: var(--ak-border-right-base, var(--ak-border-base, medium none currentcolor));
193
193
  border-radius: var(--ak-border-radius-base, 0);
194
194
  background: var(--ak-background-base, transparent);
195
195
  box-shadow: var(--ak-box-shadow-base, none);
@@ -198,15 +198,15 @@
198
198
  @media (min-width: 40rem) {
199
199
  :where([data-ak-layout="true"]) {
200
200
  display: var(--ak-display-sm, var(--ak-display-base, flex));
201
- flex-direction: var(--ak-flex-direction-sm, var(--ak-flex-direction-base, column));
201
+ flex-direction: var(--ak-flex-direction-sm, var(--ak-flex-direction-base, row));
202
202
  flex-wrap: var(--ak-flex-wrap-sm, var(--ak-flex-wrap-base, nowrap));
203
- align-items: var(--ak-align-items-sm, var(--ak-align-items-base, stretch));
204
- justify-content: var(--ak-justify-content-sm, var(--ak-justify-content-base, flex-start));
205
- gap: var(--ak-gap-sm, var(--ak-gap-base, 0));
203
+ align-items: var(--ak-align-items-sm, var(--ak-align-items-base, normal));
204
+ justify-content: var(--ak-justify-content-sm, var(--ak-justify-content-base, normal));
205
+ gap: var(--ak-gap-sm, var(--ak-gap-base, normal));
206
206
  flex-grow: var(--ak-flex-grow-sm, var(--ak-flex-grow-base, 0));
207
207
  flex-shrink: var(--ak-flex-shrink-sm, var(--ak-flex-shrink-base, 1));
208
208
  flex-basis: var(--ak-flex-basis-sm, var(--ak-flex-basis-base, auto));
209
- min-width: var(--ak-min-width-sm, var(--ak-min-width-base, 0));
209
+ min-width: var(--ak-min-width-sm, var(--ak-min-width-base, auto));
210
210
  max-width: var(--ak-max-width-sm, var(--ak-max-width-base, none));
211
211
  width: var(--ak-width-sm, var(--ak-width-base, auto));
212
212
  min-height: var(--ak-min-height-sm, var(--ak-min-height-base, auto));
@@ -234,18 +234,27 @@
234
234
  --ak-overflow-y-sm,
235
235
  var(--ak-overflow-y-base, var(--ak-overflow-sm, var(--ak-overflow-base, visible)))
236
236
  );
237
- border: var(--ak-border-sm, var(--ak-border-base, 0 solid transparent));
237
+ border: var(--ak-border-sm, var(--ak-border-base, medium none currentcolor));
238
238
  border-top: var(
239
239
  --ak-border-top-sm,
240
- var(--ak-border-top-base, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
240
+ var(
241
+ --ak-border-top-base,
242
+ var(--ak-border-sm, var(--ak-border-base, medium none currentcolor))
243
+ )
241
244
  );
242
245
  border-bottom: var(
243
246
  --ak-border-bottom-sm,
244
- var(--ak-border-bottom-base, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
247
+ var(
248
+ --ak-border-bottom-base,
249
+ var(--ak-border-sm, var(--ak-border-base, medium none currentcolor))
250
+ )
245
251
  );
246
252
  border-right: var(
247
253
  --ak-border-right-sm,
248
- var(--ak-border-right-base, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
254
+ var(
255
+ --ak-border-right-base,
256
+ var(--ak-border-sm, var(--ak-border-base, medium none currentcolor))
257
+ )
249
258
  );
250
259
  border-radius: var(--ak-border-radius-sm, var(--ak-border-radius-base, 0));
251
260
  background: var(--ak-background-sm, var(--ak-background-base, transparent));
@@ -258,20 +267,20 @@
258
267
  display: var(--ak-display-md, var(--ak-display-sm, var(--ak-display-base, flex)));
259
268
  flex-direction: var(
260
269
  --ak-flex-direction-md,
261
- var(--ak-flex-direction-sm, var(--ak-flex-direction-base, column))
270
+ var(--ak-flex-direction-sm, var(--ak-flex-direction-base, row))
262
271
  );
263
272
  align-items: var(
264
273
  --ak-align-items-md,
265
- var(--ak-align-items-sm, var(--ak-align-items-base, stretch))
274
+ var(--ak-align-items-sm, var(--ak-align-items-base, normal))
266
275
  );
267
276
  justify-content: var(
268
277
  --ak-justify-content-md,
269
- var(--ak-justify-content-sm, var(--ak-justify-content-base, flex-start))
278
+ var(--ak-justify-content-sm, var(--ak-justify-content-base, normal))
270
279
  );
271
- gap: var(--ak-gap-md, var(--ak-gap-sm, var(--ak-gap-base, 0)));
280
+ gap: var(--ak-gap-md, var(--ak-gap-sm, var(--ak-gap-base, normal)));
272
281
  flex-grow: var(--ak-flex-grow-md, var(--ak-flex-grow-sm, var(--ak-flex-grow-base, 0)));
273
282
  flex-shrink: var(--ak-flex-shrink-md, var(--ak-flex-shrink-sm, var(--ak-flex-shrink-base, 1)));
274
- min-width: var(--ak-min-width-md, var(--ak-min-width-sm, var(--ak-min-width-base, 0)));
283
+ min-width: var(--ak-min-width-md, var(--ak-min-width-sm, var(--ak-min-width-base, auto)));
275
284
  max-width: var(--ak-max-width-md, var(--ak-max-width-sm, var(--ak-max-width-base, none)));
276
285
  width: var(--ak-width-md, var(--ak-width-sm, var(--ak-width-base, auto)));
277
286
  min-height: var(--ak-min-height-md, var(--ak-min-height-sm, var(--ak-min-height-base, auto)));
@@ -298,14 +307,17 @@
298
307
  position: var(--ak-position-md, var(--ak-position-sm, var(--ak-position-base, static)));
299
308
  top: var(--ak-top-md, var(--ak-top-sm, var(--ak-top-base, auto)));
300
309
  z-index: var(--ak-z-index-md, var(--ak-z-index-sm, var(--ak-z-index-base, auto)));
301
- border: var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)));
310
+ border: var(
311
+ --ak-border-md,
312
+ var(--ak-border-sm, var(--ak-border-base, medium none currentcolor))
313
+ );
302
314
  border-top: var(
303
315
  --ak-border-top-md,
304
316
  var(
305
317
  --ak-border-top-sm,
306
318
  var(
307
319
  --ak-border-top-base,
308
- var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
320
+ var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, medium none currentcolor)))
309
321
  )
310
322
  )
311
323
  );
@@ -315,7 +327,7 @@
315
327
  --ak-border-bottom-sm,
316
328
  var(
317
329
  --ak-border-bottom-base,
318
- var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
330
+ var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, medium none currentcolor)))
319
331
  )
320
332
  )
321
333
  );
@@ -325,7 +337,7 @@
325
337
  --ak-border-right-sm,
326
338
  var(
327
339
  --ak-border-right-base,
328
- var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
340
+ var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, medium none currentcolor)))
329
341
  )
330
342
  )
331
343
  );
@@ -349,23 +361,20 @@
349
361
  );
350
362
  flex-direction: var(
351
363
  --ak-flex-direction-lg,
352
- var(
353
- --ak-flex-direction-md,
354
- var(--ak-flex-direction-sm, var(--ak-flex-direction-base, column))
355
- )
364
+ var(--ak-flex-direction-md, var(--ak-flex-direction-sm, var(--ak-flex-direction-base, row)))
356
365
  );
357
366
  align-items: var(
358
367
  --ak-align-items-lg,
359
- var(--ak-align-items-md, var(--ak-align-items-sm, var(--ak-align-items-base, stretch)))
368
+ var(--ak-align-items-md, var(--ak-align-items-sm, var(--ak-align-items-base, normal)))
360
369
  );
361
370
  justify-content: var(
362
371
  --ak-justify-content-lg,
363
372
  var(
364
373
  --ak-justify-content-md,
365
- var(--ak-justify-content-sm, var(--ak-justify-content-base, flex-start))
374
+ var(--ak-justify-content-sm, var(--ak-justify-content-base, normal))
366
375
  )
367
376
  );
368
- gap: var(--ak-gap-lg, var(--ak-gap-md, var(--ak-gap-sm, var(--ak-gap-base, 0))));
377
+ gap: var(--ak-gap-lg, var(--ak-gap-md, var(--ak-gap-sm, var(--ak-gap-base, normal))));
369
378
  flex-grow: var(
370
379
  --ak-flex-grow-lg,
371
380
  var(--ak-flex-grow-md, var(--ak-flex-grow-sm, var(--ak-flex-grow-base, 0)))
@@ -376,7 +385,7 @@
376
385
  );
377
386
  min-width: var(
378
387
  --ak-min-width-lg,
379
- var(--ak-min-width-md, var(--ak-min-width-sm, var(--ak-min-width-base, 0)))
388
+ var(--ak-min-width-md, var(--ak-min-width-sm, var(--ak-min-width-base, auto)))
380
389
  );
381
390
  max-width: var(
382
391
  --ak-max-width-lg,
@@ -444,7 +453,7 @@
444
453
  );
445
454
  border: var(
446
455
  --ak-border-lg,
447
- var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
456
+ var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, medium none currentcolor)))
448
457
  );
449
458
  border-top: var(
450
459
  --ak-border-top-lg,
@@ -456,7 +465,10 @@
456
465
  --ak-border-top-base,
457
466
  var(
458
467
  --ak-border-lg,
459
- var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
468
+ var(
469
+ --ak-border-md,
470
+ var(--ak-border-sm, var(--ak-border-base, medium none currentcolor))
471
+ )
460
472
  )
461
473
  )
462
474
  )
@@ -472,7 +484,10 @@
472
484
  --ak-border-bottom-base,
473
485
  var(
474
486
  --ak-border-lg,
475
- var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
487
+ var(
488
+ --ak-border-md,
489
+ var(--ak-border-sm, var(--ak-border-base, medium none currentcolor))
490
+ )
476
491
  )
477
492
  )
478
493
  )
@@ -488,7 +503,10 @@
488
503
  --ak-border-right-base,
489
504
  var(
490
505
  --ak-border-lg,
491
- var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
506
+ var(
507
+ --ak-border-md,
508
+ var(--ak-border-sm, var(--ak-border-base, medium none currentcolor))
509
+ )
492
510
  )
493
511
  )
494
512
  )
@@ -519,17 +537,14 @@
519
537
  --ak-flex-direction-xl,
520
538
  var(
521
539
  --ak-flex-direction-lg,
522
- var(
523
- --ak-flex-direction-md,
524
- var(--ak-flex-direction-sm, var(--ak-flex-direction-base, column))
525
- )
540
+ var(--ak-flex-direction-md, var(--ak-flex-direction-sm, var(--ak-flex-direction-base, row)))
526
541
  )
527
542
  );
528
543
  align-items: var(
529
544
  --ak-align-items-xl,
530
545
  var(
531
546
  --ak-align-items-lg,
532
- var(--ak-align-items-md, var(--ak-align-items-sm, var(--ak-align-items-base, stretch)))
547
+ var(--ak-align-items-md, var(--ak-align-items-sm, var(--ak-align-items-base, normal)))
533
548
  )
534
549
  );
535
550
  justify-content: var(
@@ -538,13 +553,13 @@
538
553
  --ak-justify-content-lg,
539
554
  var(
540
555
  --ak-justify-content-md,
541
- var(--ak-justify-content-sm, var(--ak-justify-content-base, flex-start))
556
+ var(--ak-justify-content-sm, var(--ak-justify-content-base, normal))
542
557
  )
543
558
  )
544
559
  );
545
560
  gap: var(
546
561
  --ak-gap-xl,
547
- var(--ak-gap-lg, var(--ak-gap-md, var(--ak-gap-sm, var(--ak-gap-base, 0))))
562
+ var(--ak-gap-lg, var(--ak-gap-md, var(--ak-gap-sm, var(--ak-gap-base, normal))))
548
563
  );
549
564
  flex-grow: var(
550
565
  --ak-flex-grow-xl,
@@ -564,7 +579,7 @@
564
579
  --ak-min-width-xl,
565
580
  var(
566
581
  --ak-min-width-lg,
567
- var(--ak-min-width-md, var(--ak-min-width-sm, var(--ak-min-width-base, 0)))
582
+ var(--ak-min-width-md, var(--ak-min-width-sm, var(--ak-min-width-base, auto)))
568
583
  )
569
584
  );
570
585
  width: var(
@@ -681,7 +696,7 @@
681
696
  --ak-border-xl,
682
697
  var(
683
698
  --ak-border-lg,
684
- var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
699
+ var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, medium none currentcolor)))
685
700
  )
686
701
  );
687
702
  border-top: var(
@@ -700,7 +715,7 @@
700
715
  --ak-border-lg,
701
716
  var(
702
717
  --ak-border-md,
703
- var(--ak-border-sm, var(--ak-border-base, 0 solid transparent))
718
+ var(--ak-border-sm, var(--ak-border-base, medium none currentcolor))
704
719
  )
705
720
  )
706
721
  )
@@ -725,7 +740,7 @@
725
740
  --ak-border-lg,
726
741
  var(
727
742
  --ak-border-md,
728
- var(--ak-border-sm, var(--ak-border-base, 0 solid transparent))
743
+ var(--ak-border-sm, var(--ak-border-base, medium none currentcolor))
729
744
  )
730
745
  )
731
746
  )
@@ -750,7 +765,7 @@
750
765
  --ak-border-lg,
751
766
  var(
752
767
  --ak-border-md,
753
- var(--ak-border-sm, var(--ak-border-base, 0 solid transparent))
768
+ var(--ak-border-sm, var(--ak-border-base, medium none currentcolor))
754
769
  )
755
770
  )
756
771
  )
package/templates/theme/styles/base/reset.css CHANGED
@@ -22,6 +22,10 @@
22
22
  display: block;
23
23
  }
24
24
 
25
+ :where([data-askr-native-control="true"]) {
26
+ font: inherit;
27
+ }
28
+
25
29
  ::selection {
26
30
  background: color-mix(in srgb, var(--ak-color-primary-soft) 84%, transparent);
27
31
  color: var(--ak-color-text);
package/templates/theme/styles/display/table.css CHANGED
@@ -3,13 +3,12 @@
3
3
  min-inline-size: 0;
4
4
  border-collapse: collapse;
5
5
  border-spacing: 0;
6
- table-layout: fixed;
6
+ table-layout: auto;
7
7
  border: 0;
8
8
  border-radius: 0;
9
9
  background: transparent;
10
10
  color: var(--ak-color-text);
11
11
  box-shadow: none;
12
- overflow: hidden;
13
12
  }
14
13
 
15
14
  :where([data-slot="data-table"]) {
@@ -19,16 +18,16 @@
19
18
  }
20
19
 
21
20
  :where([data-slot="table-caption"]) {
22
- padding: 0 0 var(--ak-space-sm);
21
+ padding-block-start: var(--ak-space-md);
23
22
  color: var(--ak-color-text-muted);
24
23
  font-size: var(--ak-font-size-sm);
25
24
  line-height: var(--ak-line-height-normal);
26
25
  text-align: start;
27
- caption-side: top;
26
+ caption-side: bottom;
28
27
  }
29
28
 
30
29
  :where([data-slot="table-head"]) {
31
- background: var(--ak-color-surface-muted);
30
+ background: transparent;
32
31
  }
33
32
 
34
33
  :where([data-slot="table-body"]) {
@@ -36,58 +35,60 @@
36
35
  }
37
36
 
38
37
  :where([data-slot="table-foot"]) {
39
- background: transparent;
38
+ border-block-start: 1px solid var(--ak-color-border);
39
+ background: color-mix(in srgb, var(--ak-color-surface-muted) 50%, transparent);
40
+ font-weight: var(--ak-font-weight-medium);
40
41
  }
41
42
 
42
43
  :where([data-slot="table-row"]) {
43
44
  background: inherit;
45
+ border-block-end: 1px solid var(--ak-color-border);
44
46
  transition: background var(--ak-duration-fast) var(--ak-ease-standard);
45
47
  }
46
48
 
47
- :where([data-slot="table-row"]:hover) {
48
- background: var(--ak-color-hover);
49
+ :where(
50
+ [data-slot="table-row"]:hover,
51
+ [data-slot="table-row"][aria-expanded="true"],
52
+ [data-slot="table-row"][data-state="selected"]
53
+ ) {
54
+ background: color-mix(in srgb, var(--ak-color-surface-muted) 50%, transparent);
49
55
  }
50
56
 
51
57
  :where([data-slot="table-header-cell"]),
52
58
  :where([data-slot="table-cell"]) {
53
- padding: var(--ak-space-sm);
54
- border-block-end: 1px solid var(--ak-color-border);
59
+ padding: var(--ak-space-sm) var(--ak-space-xs);
55
60
  color: var(--ak-color-text);
56
61
  font-size: var(--ak-font-size-sm);
57
62
  line-height: var(--ak-line-height-normal);
58
63
  text-align: start;
59
- vertical-align: top;
60
- overflow-wrap: anywhere;
64
+ vertical-align: middle;
65
+ white-space: normal;
61
66
  }
62
67
 
63
- :where([data-slot="table-body"] [data-slot="table-row"]:last-child [data-slot="table-cell"]) {
68
+ :where([data-slot="table-body"] [data-slot="table-row"]:last-child),
69
+ :where([data-slot="table-foot"] [data-slot="table-row"]:last-child) {
64
70
  border-block-end: 0;
65
71
  }
66
72
 
67
73
  :where([data-slot="table-header-cell"]) {
68
- color: var(--ak-color-text-muted);
69
- font-weight: var(--ak-font-weight-semibold);
70
- letter-spacing: 0;
71
- overflow-wrap: normal;
72
- text-transform: none;
73
- word-break: normal;
74
- white-space: normal;
74
+ block-size: 2.5rem;
75
+ font-weight: var(--ak-font-weight-medium);
75
76
  }
76
77
 
77
78
  :where([data-slot="table-cell"]) {
78
79
  font-weight: var(--ak-font-weight-regular);
79
80
  }
80
81
 
81
- @media (max-width: 30rem) {
82
- :where([data-slot="table-header-cell"]),
83
- :where([data-slot="table-cell"]) {
84
- padding: var(--ak-space-sm) var(--ak-space-xs);
85
- font-size: var(--ak-font-size-xs);
86
- line-height: var(--ak-line-height-tight);
87
- }
82
+ :where(
83
+ [data-slot="table-header-cell"]:has([role="checkbox"]),
84
+ [data-slot="table-cell"]:has([role="checkbox"])
85
+ ) {
86
+ padding-inline-end: 0;
87
+ }
88
88
 
89
- :where([data-slot="table-header-cell"]) {
90
- letter-spacing: 0;
91
- overflow-wrap: anywhere;
92
- }
89
+ :where(
90
+ [data-slot="table-header-cell"] > [role="checkbox"],
91
+ [data-slot="table-cell"] > [role="checkbox"]
92
+ ) {
93
+ transform: translateY(2px);
93
94
  }