@seed-design/css 1.2.16 → 1.2.18

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 (15) hide show
  1. package/all.css +136 -45
  2. package/all.layered.css +136 -45
  3. package/all.layered.min.css +1 -1
  4. package/all.min.css +1 -1
  5. package/base.css +50 -41
  6. package/base.layered.css +50 -41
  7. package/base.layered.min.css +1 -1
  8. package/base.min.css +1 -1
  9. package/package.json +1 -1
  10. package/recipes/tag-group-item.css +59 -4
  11. package/recipes/tag-group-item.layered.css +64 -4
  12. package/recipes/tag-group.css +28 -10
  13. package/recipes/tag-group.layered.css +22 -0
  14. package/theming/index.cjs +41 -5
  15. package/theming/index.mjs +41 -5
package/all.css CHANGED
@@ -23,6 +23,7 @@
23
23
  --seed-font-size-limit-max: 1.5;
24
24
  --seed-line-height-limit-min: .8;
25
25
  --seed-line-height-limit-max: 1.5;
26
+ --seed-static-font-scale: 1;
26
27
  }
27
28
 
28
29
  [data-seed-platform="ios"] {
@@ -43,7 +44,6 @@
43
44
  }
44
45
 
45
46
  .seed-icon, .seed-prefix-icon, .seed-suffix-icon {
46
- vertical-align: middle;
47
47
  flex-shrink: 0;
48
48
  justify-content: center;
49
49
  align-items: center;
@@ -54,12 +54,18 @@
54
54
  width: var(--seed-icon-size);
55
55
  height: var(--seed-icon-size);
56
56
  color: var(--seed-icon-color, currentColor);
57
+ font-size: var(--seed-icon-font-size, inherit);
58
+ font-weight: var(--seed-icon-font-weight, inherit);
59
+ vertical-align: middle;
57
60
  }
58
61
 
59
62
  .seed-prefix-icon {
60
63
  width: var(--seed-prefix-icon-size);
61
64
  height: var(--seed-prefix-icon-size);
62
65
  color: var(--seed-prefix-icon-color, currentColor);
66
+ font-size: var(--seed-prefix-icon-font-size, inherit);
67
+ font-weight: var(--seed-prefix-icon-font-weight, inherit);
68
+ vertical-align: middle;
63
69
  margin-left: var(--seed-prefix-icon-margin-left, 0);
64
70
  margin-right: var(--seed-prefix-icon-margin-right, 0);
65
71
  margin-top: var(--seed-prefix-icon-margin-top, 0);
@@ -72,6 +78,9 @@
72
78
  width: var(--seed-suffix-icon-size);
73
79
  height: var(--seed-suffix-icon-size);
74
80
  color: var(--seed-suffix-icon-color, currentColor);
81
+ font-size: var(--seed-suffix-icon-font-size, inherit);
82
+ font-weight: var(--seed-suffix-icon-font-weight, inherit);
83
+ vertical-align: middle;
75
84
  margin-left: var(--seed-suffix-icon-margin-left, 0);
76
85
  margin-right: var(--seed-suffix-icon-margin-right, 0);
77
86
  margin-top: var(--seed-suffix-icon-margin-top, 0);
@@ -277,49 +286,49 @@
277
286
  --seed-duration-d6: .3s;
278
287
  --seed-duration-color-transition: var(--seed-duration-d3);
279
288
  --seed-duration-pressed-scale: var(--seed-duration-d3);
280
- --seed-font-size-t1: clamp(calc(var(--seed-font-size-t1-static) * var(--seed-font-size-limit-min, .8)), calc(.6875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t1-static) * var(--seed-font-size-limit-max, 1.5)));
281
- --seed-font-size-t2: clamp(calc(var(--seed-font-size-t2-static) * var(--seed-font-size-limit-min, .8)), calc(.75rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t2-static) * var(--seed-font-size-limit-max, 1.5)));
282
- --seed-font-size-t3: clamp(calc(var(--seed-font-size-t3-static) * var(--seed-font-size-limit-min, .8)), calc(.8125rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t3-static) * var(--seed-font-size-limit-max, 1.5)));
283
- --seed-font-size-t4: clamp(calc(var(--seed-font-size-t4-static) * var(--seed-font-size-limit-min, .8)), calc(.875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t4-static) * var(--seed-font-size-limit-max, 1.5)));
284
- --seed-font-size-t5: clamp(calc(var(--seed-font-size-t5-static) * var(--seed-font-size-limit-min, .8)), calc(1rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t5-static) * var(--seed-font-size-limit-max, 1.5)));
285
- --seed-font-size-t6: clamp(calc(var(--seed-font-size-t6-static) * var(--seed-font-size-limit-min, .8)), calc(1.125rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t6-static) * var(--seed-font-size-limit-max, 1.5)));
286
- --seed-font-size-t7: clamp(calc(var(--seed-font-size-t7-static) * var(--seed-font-size-limit-min, .8)), calc(1.25rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t7-static) * var(--seed-font-size-limit-max, 1.5)));
287
- --seed-font-size-t8: clamp(calc(var(--seed-font-size-t8-static) * var(--seed-font-size-limit-min, .8)), calc(1.375rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t8-static) * var(--seed-font-size-limit-max, 1.5)));
288
- --seed-font-size-t9: clamp(calc(var(--seed-font-size-t9-static) * var(--seed-font-size-limit-min, .8)), calc(1.5rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t9-static) * var(--seed-font-size-limit-max, 1.5)));
289
- --seed-font-size-t10: clamp(calc(var(--seed-font-size-t10-static) * var(--seed-font-size-limit-min, .8)), calc(1.625rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t10-static) * var(--seed-font-size-limit-max, 1.5)));
290
- --seed-font-size-t1-static: 11px;
291
- --seed-font-size-t2-static: 12px;
292
- --seed-font-size-t3-static: 13px;
293
- --seed-font-size-t4-static: 14px;
294
- --seed-font-size-t5-static: 16px;
295
- --seed-font-size-t6-static: 18px;
296
- --seed-font-size-t7-static: 20px;
297
- --seed-font-size-t8-static: 22px;
298
- --seed-font-size-t9-static: 24px;
299
- --seed-font-size-t10-static: 26px;
289
+ --seed-font-size-t1: clamp(calc(var(--seed-font-size-t1-static) * var(--seed-font-size-limit-min, 1)), calc(.6875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t1-static) * var(--seed-font-size-limit-max, 1)));
290
+ --seed-font-size-t2: clamp(calc(var(--seed-font-size-t2-static) * var(--seed-font-size-limit-min, 1)), calc(.75rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t2-static) * var(--seed-font-size-limit-max, 1)));
291
+ --seed-font-size-t3: clamp(calc(var(--seed-font-size-t3-static) * var(--seed-font-size-limit-min, 1)), calc(.8125rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t3-static) * var(--seed-font-size-limit-max, 1)));
292
+ --seed-font-size-t4: clamp(calc(var(--seed-font-size-t4-static) * var(--seed-font-size-limit-min, 1)), calc(.875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t4-static) * var(--seed-font-size-limit-max, 1)));
293
+ --seed-font-size-t5: clamp(calc(var(--seed-font-size-t5-static) * var(--seed-font-size-limit-min, 1)), calc(1rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t5-static) * var(--seed-font-size-limit-max, 1)));
294
+ --seed-font-size-t6: clamp(calc(var(--seed-font-size-t6-static) * var(--seed-font-size-limit-min, 1)), calc(1.125rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t6-static) * var(--seed-font-size-limit-max, 1)));
295
+ --seed-font-size-t7: clamp(calc(var(--seed-font-size-t7-static) * var(--seed-font-size-limit-min, 1)), calc(1.25rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t7-static) * var(--seed-font-size-limit-max, 1)));
296
+ --seed-font-size-t8: clamp(calc(var(--seed-font-size-t8-static) * var(--seed-font-size-limit-min, 1)), calc(1.375rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t8-static) * var(--seed-font-size-limit-max, 1)));
297
+ --seed-font-size-t9: clamp(calc(var(--seed-font-size-t9-static) * var(--seed-font-size-limit-min, 1)), calc(1.5rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t9-static) * var(--seed-font-size-limit-max, 1)));
298
+ --seed-font-size-t10: clamp(calc(var(--seed-font-size-t10-static) * var(--seed-font-size-limit-min, 1)), calc(1.625rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t10-static) * var(--seed-font-size-limit-max, 1)));
299
+ --seed-font-size-t1-static: calc(11px / var(--seed-static-font-scale, 1));
300
+ --seed-font-size-t2-static: calc(12px / var(--seed-static-font-scale, 1));
301
+ --seed-font-size-t3-static: calc(13px / var(--seed-static-font-scale, 1));
302
+ --seed-font-size-t4-static: calc(14px / var(--seed-static-font-scale, 1));
303
+ --seed-font-size-t5-static: calc(16px / var(--seed-static-font-scale, 1));
304
+ --seed-font-size-t6-static: calc(18px / var(--seed-static-font-scale, 1));
305
+ --seed-font-size-t7-static: calc(20px / var(--seed-static-font-scale, 1));
306
+ --seed-font-size-t8-static: calc(22px / var(--seed-static-font-scale, 1));
307
+ --seed-font-size-t9-static: calc(24px / var(--seed-static-font-scale, 1));
308
+ --seed-font-size-t10-static: calc(26px / var(--seed-static-font-scale, 1));
300
309
  --seed-font-weight-regular: 400;
301
310
  --seed-font-weight-medium: 500;
302
311
  --seed-font-weight-bold: 700;
303
- --seed-line-height-t1: clamp(calc(var(--seed-line-height-t1-static) * var(--seed-line-height-limit-min, .8)), calc(.9375rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t1-static) * var(--seed-line-height-limit-max, 1.5)));
304
- --seed-line-height-t2: clamp(calc(var(--seed-line-height-t2-static) * var(--seed-line-height-limit-min, .8)), calc(1rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t2-static) * var(--seed-line-height-limit-max, 1.5)));
305
- --seed-line-height-t3: clamp(calc(var(--seed-line-height-t3-static) * var(--seed-line-height-limit-min, .8)), calc(1.125rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t3-static) * var(--seed-line-height-limit-max, 1.5)));
306
- --seed-line-height-t4: clamp(calc(var(--seed-line-height-t4-static) * var(--seed-line-height-limit-min, .8)), calc(1.1875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t4-static) * var(--seed-line-height-limit-max, 1.5)));
307
- --seed-line-height-t5: clamp(calc(var(--seed-line-height-t5-static) * var(--seed-line-height-limit-min, .8)), calc(1.375rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t5-static) * var(--seed-line-height-limit-max, 1.5)));
308
- --seed-line-height-t6: clamp(calc(var(--seed-line-height-t6-static) * var(--seed-line-height-limit-min, .8)), calc(1.5rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t6-static) * var(--seed-line-height-limit-max, 1.5)));
309
- --seed-line-height-t7: clamp(calc(var(--seed-line-height-t7-static) * var(--seed-line-height-limit-min, .8)), calc(1.6875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t7-static) * var(--seed-line-height-limit-max, 1.5)));
310
- --seed-line-height-t8: clamp(calc(var(--seed-line-height-t8-static) * var(--seed-line-height-limit-min, .8)), calc(1.875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t8-static) * var(--seed-line-height-limit-max, 1.5)));
311
- --seed-line-height-t9: clamp(calc(var(--seed-line-height-t9-static) * var(--seed-line-height-limit-min, .8)), calc(2rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t9-static) * var(--seed-line-height-limit-max, 1.5)));
312
- --seed-line-height-t10: clamp(calc(var(--seed-line-height-t10-static) * var(--seed-line-height-limit-min, .8)), calc(2.1875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t10-static) * var(--seed-line-height-limit-max, 1.5)));
313
- --seed-line-height-t1-static: 15px;
314
- --seed-line-height-t2-static: 16px;
315
- --seed-line-height-t3-static: 18px;
316
- --seed-line-height-t4-static: 19px;
317
- --seed-line-height-t5-static: 22px;
318
- --seed-line-height-t6-static: 24px;
319
- --seed-line-height-t7-static: 27px;
320
- --seed-line-height-t8-static: 30px;
321
- --seed-line-height-t9-static: 32px;
322
- --seed-line-height-t10-static: 35px;
312
+ --seed-line-height-t1: clamp(calc(var(--seed-line-height-t1-static) * var(--seed-line-height-limit-min, 1)), calc(.9375rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t1-static) * var(--seed-line-height-limit-max, 1)));
313
+ --seed-line-height-t2: clamp(calc(var(--seed-line-height-t2-static) * var(--seed-line-height-limit-min, 1)), calc(1rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t2-static) * var(--seed-line-height-limit-max, 1)));
314
+ --seed-line-height-t3: clamp(calc(var(--seed-line-height-t3-static) * var(--seed-line-height-limit-min, 1)), calc(1.125rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t3-static) * var(--seed-line-height-limit-max, 1)));
315
+ --seed-line-height-t4: clamp(calc(var(--seed-line-height-t4-static) * var(--seed-line-height-limit-min, 1)), calc(1.1875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t4-static) * var(--seed-line-height-limit-max, 1)));
316
+ --seed-line-height-t5: clamp(calc(var(--seed-line-height-t5-static) * var(--seed-line-height-limit-min, 1)), calc(1.375rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t5-static) * var(--seed-line-height-limit-max, 1)));
317
+ --seed-line-height-t6: clamp(calc(var(--seed-line-height-t6-static) * var(--seed-line-height-limit-min, 1)), calc(1.5rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t6-static) * var(--seed-line-height-limit-max, 1)));
318
+ --seed-line-height-t7: clamp(calc(var(--seed-line-height-t7-static) * var(--seed-line-height-limit-min, 1)), calc(1.6875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t7-static) * var(--seed-line-height-limit-max, 1)));
319
+ --seed-line-height-t8: clamp(calc(var(--seed-line-height-t8-static) * var(--seed-line-height-limit-min, 1)), calc(1.875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t8-static) * var(--seed-line-height-limit-max, 1)));
320
+ --seed-line-height-t9: clamp(calc(var(--seed-line-height-t9-static) * var(--seed-line-height-limit-min, 1)), calc(2rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t9-static) * var(--seed-line-height-limit-max, 1)));
321
+ --seed-line-height-t10: clamp(calc(var(--seed-line-height-t10-static) * var(--seed-line-height-limit-min, 1)), calc(2.1875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t10-static) * var(--seed-line-height-limit-max, 1)));
322
+ --seed-line-height-t1-static: calc(15px / var(--seed-static-font-scale, 1));
323
+ --seed-line-height-t2-static: calc(16px / var(--seed-static-font-scale, 1));
324
+ --seed-line-height-t3-static: calc(18px / var(--seed-static-font-scale, 1));
325
+ --seed-line-height-t4-static: calc(19px / var(--seed-static-font-scale, 1));
326
+ --seed-line-height-t5-static: calc(22px / var(--seed-static-font-scale, 1));
327
+ --seed-line-height-t6-static: calc(24px / var(--seed-static-font-scale, 1));
328
+ --seed-line-height-t7-static: calc(27px / var(--seed-static-font-scale, 1));
329
+ --seed-line-height-t8-static: calc(30px / var(--seed-static-font-scale, 1));
330
+ --seed-line-height-t9-static: calc(32px / var(--seed-static-font-scale, 1));
331
+ --seed-line-height-t10-static: calc(35px / var(--seed-static-font-scale, 1));
323
332
  --seed-radius-r0_5: 2px;
324
333
  --seed-radius-r1: 4px;
325
334
  --seed-radius-r1_5: 6px;
@@ -7698,20 +7707,42 @@
7698
7707
  --tag-group-item-overflow: hidden;
7699
7708
  --tag-group-item-text-overflow: ellipsis;
7700
7709
  --tag-group-item-white-space: nowrap;
7710
+ --tag-group-item-align-items: baseline;
7701
7711
  align-items: center;
7702
7712
  max-width: 100%;
7703
7713
  display: inline-flex;
7704
7714
  }
7705
7715
 
7716
+ .seed-tag-group__root--truncate_true .seed-icon {
7717
+ top: var(--tag-group-item-icon-flex-offset, 0px);
7718
+ position: relative;
7719
+ }
7720
+
7721
+ .seed-tag-group__root--truncate_true .seed-prefix-icon {
7722
+ top: var(--tag-group-item-prefix-icon-flex-offset, 0px);
7723
+ position: relative;
7724
+ }
7725
+
7726
+ .seed-tag-group__root--truncate_true .seed-suffix-icon {
7727
+ top: var(--tag-group-item-suffix-icon-flex-offset, 0px);
7728
+ position: relative;
7729
+ }
7730
+
7706
7731
  .seed-tag-group__root--truncate_false {
7707
7732
  --tag-group-item-display: inline;
7708
7733
  --tag-group-item-overflow: visible;
7709
7734
  --tag-group-item-text-overflow: clip;
7710
7735
  --tag-group-item-white-space: normal;
7736
+ --tag-group-item-align-items: center;
7711
7737
  font-size: 0;
7712
7738
  display: inline-block;
7713
7739
  }
7714
7740
 
7741
+ .seed-tag-group__root--truncate_false .seed-icon, .seed-tag-group__root--truncate_false .seed-prefix-icon, .seed-tag-group__root--truncate_false .seed-suffix-icon {
7742
+ top: var(--tag-group-item-inline-icon-offset, 0px);
7743
+ position: relative;
7744
+ }
7745
+
7715
7746
  .seed-tag-group__separator--truncate_false {
7716
7747
  vertical-align: middle;
7717
7748
  }
@@ -7730,9 +7761,9 @@
7730
7761
 
7731
7762
  .seed-tag-group-item__root {
7732
7763
  display: var(--tag-group-item-display);
7764
+ align-items: var(--tag-group-item-align-items, center);
7733
7765
  vertical-align: middle;
7734
7766
  flex-shrink: var(--seed-box-flex-shrink, 1);
7735
- align-items: center;
7736
7767
  min-width: 0;
7737
7768
  }
7738
7769
 
@@ -7755,9 +7786,25 @@
7755
7786
  }
7756
7787
 
7757
7788
  .seed-tag-group-item__root--size_t2 {
7789
+ --tag-group-item-inline-icon-offset: calc(.65em - var(--seed-line-height-t2) / 2);
7790
+ --tag-group-item-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .35em);
7791
+ --tag-group-item-prefix-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .35em);
7792
+ --tag-group-item-suffix-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .35em);
7793
+ --seed-icon-size: var(--seed-dimension-x3);
7794
+ --seed-icon-font-size: var(--seed-font-size-t2);
7758
7795
  --seed-prefix-icon-size: var(--seed-dimension-x3);
7796
+ --seed-prefix-icon-font-size: var(--seed-font-size-t2);
7759
7797
  --seed-suffix-icon-size: var(--seed-dimension-x3);
7760
- --seed-icon-size: var(--seed-dimension-x3);
7798
+ --seed-suffix-icon-font-size: var(--seed-font-size-t2);
7799
+ }
7800
+
7801
+ @supports (top: 1cap) {
7802
+ .seed-tag-group-item__root--size_t2 {
7803
+ --tag-group-item-inline-icon-offset: calc(1em - var(--seed-line-height-t2) / 2 - .5cap);
7804
+ --tag-group-item-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .5cap);
7805
+ --tag-group-item-prefix-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .5cap);
7806
+ --tag-group-item-suffix-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .5cap);
7807
+ }
7761
7808
  }
7762
7809
 
7763
7810
  .seed-tag-group-item__label--size_t2 {
@@ -7766,9 +7813,25 @@
7766
7813
  }
7767
7814
 
7768
7815
  .seed-tag-group-item__root--size_t3 {
7816
+ --tag-group-item-inline-icon-offset: calc(.65em - var(--seed-line-height-t3) / 2);
7817
+ --tag-group-item-icon-flex-offset: calc(13px / 2 - .35em);
7818
+ --tag-group-item-prefix-icon-flex-offset: calc(13px / 2 - .35em);
7819
+ --tag-group-item-suffix-icon-flex-offset: calc(13px / 2 - .35em);
7820
+ --seed-icon-size: 13px;
7821
+ --seed-icon-font-size: var(--seed-font-size-t3);
7769
7822
  --seed-prefix-icon-size: 13px;
7823
+ --seed-prefix-icon-font-size: var(--seed-font-size-t3);
7770
7824
  --seed-suffix-icon-size: 13px;
7771
- --seed-icon-size: 13px;
7825
+ --seed-suffix-icon-font-size: var(--seed-font-size-t3);
7826
+ }
7827
+
7828
+ @supports (top: 1cap) {
7829
+ .seed-tag-group-item__root--size_t3 {
7830
+ --tag-group-item-inline-icon-offset: calc(1em - var(--seed-line-height-t3) / 2 - .5cap);
7831
+ --tag-group-item-icon-flex-offset: calc(13px / 2 - .5cap);
7832
+ --tag-group-item-prefix-icon-flex-offset: calc(13px / 2 - .5cap);
7833
+ --tag-group-item-suffix-icon-flex-offset: calc(13px / 2 - .5cap);
7834
+ }
7772
7835
  }
7773
7836
 
7774
7837
  .seed-tag-group-item__label--size_t3 {
@@ -7777,9 +7840,25 @@
7777
7840
  }
7778
7841
 
7779
7842
  .seed-tag-group-item__root--size_t4 {
7843
+ --tag-group-item-inline-icon-offset: calc(.65em - var(--seed-line-height-t4) / 2);
7844
+ --tag-group-item-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .35em);
7845
+ --tag-group-item-prefix-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .35em);
7846
+ --tag-group-item-suffix-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .35em);
7847
+ --seed-icon-size: var(--seed-dimension-x3_5);
7848
+ --seed-icon-font-size: var(--seed-font-size-t4);
7780
7849
  --seed-prefix-icon-size: var(--seed-dimension-x3_5);
7850
+ --seed-prefix-icon-font-size: var(--seed-font-size-t4);
7781
7851
  --seed-suffix-icon-size: var(--seed-dimension-x3_5);
7782
- --seed-icon-size: var(--seed-dimension-x3_5);
7852
+ --seed-suffix-icon-font-size: var(--seed-font-size-t4);
7853
+ }
7854
+
7855
+ @supports (top: 1cap) {
7856
+ .seed-tag-group-item__root--size_t4 {
7857
+ --tag-group-item-inline-icon-offset: calc(1em - var(--seed-line-height-t4) / 2 - .5cap);
7858
+ --tag-group-item-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .5cap);
7859
+ --tag-group-item-prefix-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .5cap);
7860
+ --tag-group-item-suffix-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .5cap);
7861
+ }
7783
7862
  }
7784
7863
 
7785
7864
  .seed-tag-group-item__label--size_t4 {
@@ -7787,10 +7866,22 @@
7787
7866
  line-height: var(--seed-line-height-t4);
7788
7867
  }
7789
7868
 
7869
+ .seed-tag-group-item__root--weight_regular {
7870
+ --seed-icon-font-weight: var(--seed-font-weight-regular);
7871
+ --seed-prefix-icon-font-weight: var(--seed-font-weight-regular);
7872
+ --seed-suffix-icon-font-weight: var(--seed-font-weight-regular);
7873
+ }
7874
+
7790
7875
  .seed-tag-group-item__label--weight_regular {
7791
7876
  font-weight: var(--seed-font-weight-regular);
7792
7877
  }
7793
7878
 
7879
+ .seed-tag-group-item__root--weight_bold {
7880
+ --seed-icon-font-weight: var(--seed-font-weight-bold);
7881
+ --seed-prefix-icon-font-weight: var(--seed-font-weight-bold);
7882
+ --seed-suffix-icon-font-weight: var(--seed-font-weight-bold);
7883
+ }
7884
+
7794
7885
  .seed-tag-group-item__label--weight_bold {
7795
7886
  font-weight: var(--seed-font-weight-bold);
7796
7887
  }
package/all.layered.css CHANGED
@@ -24,6 +24,7 @@
24
24
  --seed-font-size-limit-max: 1.5;
25
25
  --seed-line-height-limit-min: .8;
26
26
  --seed-line-height-limit-max: 1.5;
27
+ --seed-static-font-scale: 1;
27
28
  }
28
29
 
29
30
  [data-seed-platform="ios"] {
@@ -44,7 +45,6 @@
44
45
  }
45
46
 
46
47
  .seed-icon, .seed-prefix-icon, .seed-suffix-icon {
47
- vertical-align: middle;
48
48
  flex-shrink: 0;
49
49
  justify-content: center;
50
50
  align-items: center;
@@ -55,12 +55,18 @@
55
55
  width: var(--seed-icon-size);
56
56
  height: var(--seed-icon-size);
57
57
  color: var(--seed-icon-color, currentColor);
58
+ font-size: var(--seed-icon-font-size, inherit);
59
+ font-weight: var(--seed-icon-font-weight, inherit);
60
+ vertical-align: middle;
58
61
  }
59
62
 
60
63
  .seed-prefix-icon {
61
64
  width: var(--seed-prefix-icon-size);
62
65
  height: var(--seed-prefix-icon-size);
63
66
  color: var(--seed-prefix-icon-color, currentColor);
67
+ font-size: var(--seed-prefix-icon-font-size, inherit);
68
+ font-weight: var(--seed-prefix-icon-font-weight, inherit);
69
+ vertical-align: middle;
64
70
  margin-left: var(--seed-prefix-icon-margin-left, 0);
65
71
  margin-right: var(--seed-prefix-icon-margin-right, 0);
66
72
  margin-top: var(--seed-prefix-icon-margin-top, 0);
@@ -73,6 +79,9 @@
73
79
  width: var(--seed-suffix-icon-size);
74
80
  height: var(--seed-suffix-icon-size);
75
81
  color: var(--seed-suffix-icon-color, currentColor);
82
+ font-size: var(--seed-suffix-icon-font-size, inherit);
83
+ font-weight: var(--seed-suffix-icon-font-weight, inherit);
84
+ vertical-align: middle;
76
85
  margin-left: var(--seed-suffix-icon-margin-left, 0);
77
86
  margin-right: var(--seed-suffix-icon-margin-right, 0);
78
87
  margin-top: var(--seed-suffix-icon-margin-top, 0);
@@ -278,49 +287,49 @@
278
287
  --seed-duration-d6: .3s;
279
288
  --seed-duration-color-transition: var(--seed-duration-d3);
280
289
  --seed-duration-pressed-scale: var(--seed-duration-d3);
281
- --seed-font-size-t1: clamp(calc(var(--seed-font-size-t1-static) * var(--seed-font-size-limit-min, .8)), calc(.6875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t1-static) * var(--seed-font-size-limit-max, 1.5)));
282
- --seed-font-size-t2: clamp(calc(var(--seed-font-size-t2-static) * var(--seed-font-size-limit-min, .8)), calc(.75rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t2-static) * var(--seed-font-size-limit-max, 1.5)));
283
- --seed-font-size-t3: clamp(calc(var(--seed-font-size-t3-static) * var(--seed-font-size-limit-min, .8)), calc(.8125rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t3-static) * var(--seed-font-size-limit-max, 1.5)));
284
- --seed-font-size-t4: clamp(calc(var(--seed-font-size-t4-static) * var(--seed-font-size-limit-min, .8)), calc(.875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t4-static) * var(--seed-font-size-limit-max, 1.5)));
285
- --seed-font-size-t5: clamp(calc(var(--seed-font-size-t5-static) * var(--seed-font-size-limit-min, .8)), calc(1rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t5-static) * var(--seed-font-size-limit-max, 1.5)));
286
- --seed-font-size-t6: clamp(calc(var(--seed-font-size-t6-static) * var(--seed-font-size-limit-min, .8)), calc(1.125rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t6-static) * var(--seed-font-size-limit-max, 1.5)));
287
- --seed-font-size-t7: clamp(calc(var(--seed-font-size-t7-static) * var(--seed-font-size-limit-min, .8)), calc(1.25rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t7-static) * var(--seed-font-size-limit-max, 1.5)));
288
- --seed-font-size-t8: clamp(calc(var(--seed-font-size-t8-static) * var(--seed-font-size-limit-min, .8)), calc(1.375rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t8-static) * var(--seed-font-size-limit-max, 1.5)));
289
- --seed-font-size-t9: clamp(calc(var(--seed-font-size-t9-static) * var(--seed-font-size-limit-min, .8)), calc(1.5rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t9-static) * var(--seed-font-size-limit-max, 1.5)));
290
- --seed-font-size-t10: clamp(calc(var(--seed-font-size-t10-static) * var(--seed-font-size-limit-min, .8)), calc(1.625rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t10-static) * var(--seed-font-size-limit-max, 1.5)));
291
- --seed-font-size-t1-static: 11px;
292
- --seed-font-size-t2-static: 12px;
293
- --seed-font-size-t3-static: 13px;
294
- --seed-font-size-t4-static: 14px;
295
- --seed-font-size-t5-static: 16px;
296
- --seed-font-size-t6-static: 18px;
297
- --seed-font-size-t7-static: 20px;
298
- --seed-font-size-t8-static: 22px;
299
- --seed-font-size-t9-static: 24px;
300
- --seed-font-size-t10-static: 26px;
290
+ --seed-font-size-t1: clamp(calc(var(--seed-font-size-t1-static) * var(--seed-font-size-limit-min, 1)), calc(.6875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t1-static) * var(--seed-font-size-limit-max, 1)));
291
+ --seed-font-size-t2: clamp(calc(var(--seed-font-size-t2-static) * var(--seed-font-size-limit-min, 1)), calc(.75rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t2-static) * var(--seed-font-size-limit-max, 1)));
292
+ --seed-font-size-t3: clamp(calc(var(--seed-font-size-t3-static) * var(--seed-font-size-limit-min, 1)), calc(.8125rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t3-static) * var(--seed-font-size-limit-max, 1)));
293
+ --seed-font-size-t4: clamp(calc(var(--seed-font-size-t4-static) * var(--seed-font-size-limit-min, 1)), calc(.875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t4-static) * var(--seed-font-size-limit-max, 1)));
294
+ --seed-font-size-t5: clamp(calc(var(--seed-font-size-t5-static) * var(--seed-font-size-limit-min, 1)), calc(1rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t5-static) * var(--seed-font-size-limit-max, 1)));
295
+ --seed-font-size-t6: clamp(calc(var(--seed-font-size-t6-static) * var(--seed-font-size-limit-min, 1)), calc(1.125rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t6-static) * var(--seed-font-size-limit-max, 1)));
296
+ --seed-font-size-t7: clamp(calc(var(--seed-font-size-t7-static) * var(--seed-font-size-limit-min, 1)), calc(1.25rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t7-static) * var(--seed-font-size-limit-max, 1)));
297
+ --seed-font-size-t8: clamp(calc(var(--seed-font-size-t8-static) * var(--seed-font-size-limit-min, 1)), calc(1.375rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t8-static) * var(--seed-font-size-limit-max, 1)));
298
+ --seed-font-size-t9: clamp(calc(var(--seed-font-size-t9-static) * var(--seed-font-size-limit-min, 1)), calc(1.5rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t9-static) * var(--seed-font-size-limit-max, 1)));
299
+ --seed-font-size-t10: clamp(calc(var(--seed-font-size-t10-static) * var(--seed-font-size-limit-min, 1)), calc(1.625rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t10-static) * var(--seed-font-size-limit-max, 1)));
300
+ --seed-font-size-t1-static: calc(11px / var(--seed-static-font-scale, 1));
301
+ --seed-font-size-t2-static: calc(12px / var(--seed-static-font-scale, 1));
302
+ --seed-font-size-t3-static: calc(13px / var(--seed-static-font-scale, 1));
303
+ --seed-font-size-t4-static: calc(14px / var(--seed-static-font-scale, 1));
304
+ --seed-font-size-t5-static: calc(16px / var(--seed-static-font-scale, 1));
305
+ --seed-font-size-t6-static: calc(18px / var(--seed-static-font-scale, 1));
306
+ --seed-font-size-t7-static: calc(20px / var(--seed-static-font-scale, 1));
307
+ --seed-font-size-t8-static: calc(22px / var(--seed-static-font-scale, 1));
308
+ --seed-font-size-t9-static: calc(24px / var(--seed-static-font-scale, 1));
309
+ --seed-font-size-t10-static: calc(26px / var(--seed-static-font-scale, 1));
301
310
  --seed-font-weight-regular: 400;
302
311
  --seed-font-weight-medium: 500;
303
312
  --seed-font-weight-bold: 700;
304
- --seed-line-height-t1: clamp(calc(var(--seed-line-height-t1-static) * var(--seed-line-height-limit-min, .8)), calc(.9375rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t1-static) * var(--seed-line-height-limit-max, 1.5)));
305
- --seed-line-height-t2: clamp(calc(var(--seed-line-height-t2-static) * var(--seed-line-height-limit-min, .8)), calc(1rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t2-static) * var(--seed-line-height-limit-max, 1.5)));
306
- --seed-line-height-t3: clamp(calc(var(--seed-line-height-t3-static) * var(--seed-line-height-limit-min, .8)), calc(1.125rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t3-static) * var(--seed-line-height-limit-max, 1.5)));
307
- --seed-line-height-t4: clamp(calc(var(--seed-line-height-t4-static) * var(--seed-line-height-limit-min, .8)), calc(1.1875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t4-static) * var(--seed-line-height-limit-max, 1.5)));
308
- --seed-line-height-t5: clamp(calc(var(--seed-line-height-t5-static) * var(--seed-line-height-limit-min, .8)), calc(1.375rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t5-static) * var(--seed-line-height-limit-max, 1.5)));
309
- --seed-line-height-t6: clamp(calc(var(--seed-line-height-t6-static) * var(--seed-line-height-limit-min, .8)), calc(1.5rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t6-static) * var(--seed-line-height-limit-max, 1.5)));
310
- --seed-line-height-t7: clamp(calc(var(--seed-line-height-t7-static) * var(--seed-line-height-limit-min, .8)), calc(1.6875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t7-static) * var(--seed-line-height-limit-max, 1.5)));
311
- --seed-line-height-t8: clamp(calc(var(--seed-line-height-t8-static) * var(--seed-line-height-limit-min, .8)), calc(1.875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t8-static) * var(--seed-line-height-limit-max, 1.5)));
312
- --seed-line-height-t9: clamp(calc(var(--seed-line-height-t9-static) * var(--seed-line-height-limit-min, .8)), calc(2rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t9-static) * var(--seed-line-height-limit-max, 1.5)));
313
- --seed-line-height-t10: clamp(calc(var(--seed-line-height-t10-static) * var(--seed-line-height-limit-min, .8)), calc(2.1875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t10-static) * var(--seed-line-height-limit-max, 1.5)));
314
- --seed-line-height-t1-static: 15px;
315
- --seed-line-height-t2-static: 16px;
316
- --seed-line-height-t3-static: 18px;
317
- --seed-line-height-t4-static: 19px;
318
- --seed-line-height-t5-static: 22px;
319
- --seed-line-height-t6-static: 24px;
320
- --seed-line-height-t7-static: 27px;
321
- --seed-line-height-t8-static: 30px;
322
- --seed-line-height-t9-static: 32px;
323
- --seed-line-height-t10-static: 35px;
313
+ --seed-line-height-t1: clamp(calc(var(--seed-line-height-t1-static) * var(--seed-line-height-limit-min, 1)), calc(.9375rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t1-static) * var(--seed-line-height-limit-max, 1)));
314
+ --seed-line-height-t2: clamp(calc(var(--seed-line-height-t2-static) * var(--seed-line-height-limit-min, 1)), calc(1rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t2-static) * var(--seed-line-height-limit-max, 1)));
315
+ --seed-line-height-t3: clamp(calc(var(--seed-line-height-t3-static) * var(--seed-line-height-limit-min, 1)), calc(1.125rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t3-static) * var(--seed-line-height-limit-max, 1)));
316
+ --seed-line-height-t4: clamp(calc(var(--seed-line-height-t4-static) * var(--seed-line-height-limit-min, 1)), calc(1.1875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t4-static) * var(--seed-line-height-limit-max, 1)));
317
+ --seed-line-height-t5: clamp(calc(var(--seed-line-height-t5-static) * var(--seed-line-height-limit-min, 1)), calc(1.375rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t5-static) * var(--seed-line-height-limit-max, 1)));
318
+ --seed-line-height-t6: clamp(calc(var(--seed-line-height-t6-static) * var(--seed-line-height-limit-min, 1)), calc(1.5rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t6-static) * var(--seed-line-height-limit-max, 1)));
319
+ --seed-line-height-t7: clamp(calc(var(--seed-line-height-t7-static) * var(--seed-line-height-limit-min, 1)), calc(1.6875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t7-static) * var(--seed-line-height-limit-max, 1)));
320
+ --seed-line-height-t8: clamp(calc(var(--seed-line-height-t8-static) * var(--seed-line-height-limit-min, 1)), calc(1.875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t8-static) * var(--seed-line-height-limit-max, 1)));
321
+ --seed-line-height-t9: clamp(calc(var(--seed-line-height-t9-static) * var(--seed-line-height-limit-min, 1)), calc(2rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t9-static) * var(--seed-line-height-limit-max, 1)));
322
+ --seed-line-height-t10: clamp(calc(var(--seed-line-height-t10-static) * var(--seed-line-height-limit-min, 1)), calc(2.1875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t10-static) * var(--seed-line-height-limit-max, 1)));
323
+ --seed-line-height-t1-static: calc(15px / var(--seed-static-font-scale, 1));
324
+ --seed-line-height-t2-static: calc(16px / var(--seed-static-font-scale, 1));
325
+ --seed-line-height-t3-static: calc(18px / var(--seed-static-font-scale, 1));
326
+ --seed-line-height-t4-static: calc(19px / var(--seed-static-font-scale, 1));
327
+ --seed-line-height-t5-static: calc(22px / var(--seed-static-font-scale, 1));
328
+ --seed-line-height-t6-static: calc(24px / var(--seed-static-font-scale, 1));
329
+ --seed-line-height-t7-static: calc(27px / var(--seed-static-font-scale, 1));
330
+ --seed-line-height-t8-static: calc(30px / var(--seed-static-font-scale, 1));
331
+ --seed-line-height-t9-static: calc(32px / var(--seed-static-font-scale, 1));
332
+ --seed-line-height-t10-static: calc(35px / var(--seed-static-font-scale, 1));
324
333
  --seed-radius-r0_5: 2px;
325
334
  --seed-radius-r1: 4px;
326
335
  --seed-radius-r1_5: 6px;
@@ -7799,20 +7808,42 @@
7799
7808
  --tag-group-item-overflow: hidden;
7800
7809
  --tag-group-item-text-overflow: ellipsis;
7801
7810
  --tag-group-item-white-space: nowrap;
7811
+ --tag-group-item-align-items: baseline;
7802
7812
  align-items: center;
7803
7813
  max-width: 100%;
7804
7814
  display: inline-flex;
7805
7815
  }
7806
7816
 
7817
+ .seed-tag-group__root--truncate_true .seed-icon {
7818
+ top: var(--tag-group-item-icon-flex-offset, 0px);
7819
+ position: relative;
7820
+ }
7821
+
7822
+ .seed-tag-group__root--truncate_true .seed-prefix-icon {
7823
+ top: var(--tag-group-item-prefix-icon-flex-offset, 0px);
7824
+ position: relative;
7825
+ }
7826
+
7827
+ .seed-tag-group__root--truncate_true .seed-suffix-icon {
7828
+ top: var(--tag-group-item-suffix-icon-flex-offset, 0px);
7829
+ position: relative;
7830
+ }
7831
+
7807
7832
  .seed-tag-group__root--truncate_false {
7808
7833
  --tag-group-item-display: inline;
7809
7834
  --tag-group-item-overflow: visible;
7810
7835
  --tag-group-item-text-overflow: clip;
7811
7836
  --tag-group-item-white-space: normal;
7837
+ --tag-group-item-align-items: center;
7812
7838
  font-size: 0;
7813
7839
  display: inline-block;
7814
7840
  }
7815
7841
 
7842
+ .seed-tag-group__root--truncate_false .seed-icon, .seed-tag-group__root--truncate_false .seed-prefix-icon, .seed-tag-group__root--truncate_false .seed-suffix-icon {
7843
+ top: var(--tag-group-item-inline-icon-offset, 0px);
7844
+ position: relative;
7845
+ }
7846
+
7816
7847
  .seed-tag-group__separator--truncate_false {
7817
7848
  vertical-align: middle;
7818
7849
  }
@@ -7831,9 +7862,9 @@
7831
7862
 
7832
7863
  .seed-tag-group-item__root {
7833
7864
  display: var(--tag-group-item-display);
7865
+ align-items: var(--tag-group-item-align-items, center);
7834
7866
  vertical-align: middle;
7835
7867
  flex-shrink: var(--seed-box-flex-shrink, 1);
7836
- align-items: center;
7837
7868
  min-width: 0;
7838
7869
  }
7839
7870
 
@@ -7856,9 +7887,25 @@
7856
7887
  }
7857
7888
 
7858
7889
  .seed-tag-group-item__root--size_t2 {
7890
+ --tag-group-item-inline-icon-offset: calc(.65em - var(--seed-line-height-t2) / 2);
7891
+ --tag-group-item-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .35em);
7892
+ --tag-group-item-prefix-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .35em);
7893
+ --tag-group-item-suffix-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .35em);
7894
+ --seed-icon-size: var(--seed-dimension-x3);
7895
+ --seed-icon-font-size: var(--seed-font-size-t2);
7859
7896
  --seed-prefix-icon-size: var(--seed-dimension-x3);
7897
+ --seed-prefix-icon-font-size: var(--seed-font-size-t2);
7860
7898
  --seed-suffix-icon-size: var(--seed-dimension-x3);
7861
- --seed-icon-size: var(--seed-dimension-x3);
7899
+ --seed-suffix-icon-font-size: var(--seed-font-size-t2);
7900
+ }
7901
+
7902
+ @supports (top: 1cap) {
7903
+ .seed-tag-group-item__root--size_t2 {
7904
+ --tag-group-item-inline-icon-offset: calc(1em - var(--seed-line-height-t2) / 2 - .5cap);
7905
+ --tag-group-item-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .5cap);
7906
+ --tag-group-item-prefix-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .5cap);
7907
+ --tag-group-item-suffix-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .5cap);
7908
+ }
7862
7909
  }
7863
7910
 
7864
7911
  .seed-tag-group-item__label--size_t2 {
@@ -7867,9 +7914,25 @@
7867
7914
  }
7868
7915
 
7869
7916
  .seed-tag-group-item__root--size_t3 {
7917
+ --tag-group-item-inline-icon-offset: calc(.65em - var(--seed-line-height-t3) / 2);
7918
+ --tag-group-item-icon-flex-offset: calc(13px / 2 - .35em);
7919
+ --tag-group-item-prefix-icon-flex-offset: calc(13px / 2 - .35em);
7920
+ --tag-group-item-suffix-icon-flex-offset: calc(13px / 2 - .35em);
7921
+ --seed-icon-size: 13px;
7922
+ --seed-icon-font-size: var(--seed-font-size-t3);
7870
7923
  --seed-prefix-icon-size: 13px;
7924
+ --seed-prefix-icon-font-size: var(--seed-font-size-t3);
7871
7925
  --seed-suffix-icon-size: 13px;
7872
- --seed-icon-size: 13px;
7926
+ --seed-suffix-icon-font-size: var(--seed-font-size-t3);
7927
+ }
7928
+
7929
+ @supports (top: 1cap) {
7930
+ .seed-tag-group-item__root--size_t3 {
7931
+ --tag-group-item-inline-icon-offset: calc(1em - var(--seed-line-height-t3) / 2 - .5cap);
7932
+ --tag-group-item-icon-flex-offset: calc(13px / 2 - .5cap);
7933
+ --tag-group-item-prefix-icon-flex-offset: calc(13px / 2 - .5cap);
7934
+ --tag-group-item-suffix-icon-flex-offset: calc(13px / 2 - .5cap);
7935
+ }
7873
7936
  }
7874
7937
 
7875
7938
  .seed-tag-group-item__label--size_t3 {
@@ -7878,9 +7941,25 @@
7878
7941
  }
7879
7942
 
7880
7943
  .seed-tag-group-item__root--size_t4 {
7944
+ --tag-group-item-inline-icon-offset: calc(.65em - var(--seed-line-height-t4) / 2);
7945
+ --tag-group-item-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .35em);
7946
+ --tag-group-item-prefix-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .35em);
7947
+ --tag-group-item-suffix-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .35em);
7948
+ --seed-icon-size: var(--seed-dimension-x3_5);
7949
+ --seed-icon-font-size: var(--seed-font-size-t4);
7881
7950
  --seed-prefix-icon-size: var(--seed-dimension-x3_5);
7951
+ --seed-prefix-icon-font-size: var(--seed-font-size-t4);
7882
7952
  --seed-suffix-icon-size: var(--seed-dimension-x3_5);
7883
- --seed-icon-size: var(--seed-dimension-x3_5);
7953
+ --seed-suffix-icon-font-size: var(--seed-font-size-t4);
7954
+ }
7955
+
7956
+ @supports (top: 1cap) {
7957
+ .seed-tag-group-item__root--size_t4 {
7958
+ --tag-group-item-inline-icon-offset: calc(1em - var(--seed-line-height-t4) / 2 - .5cap);
7959
+ --tag-group-item-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .5cap);
7960
+ --tag-group-item-prefix-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .5cap);
7961
+ --tag-group-item-suffix-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .5cap);
7962
+ }
7884
7963
  }
7885
7964
 
7886
7965
  .seed-tag-group-item__label--size_t4 {
@@ -7888,10 +7967,22 @@
7888
7967
  line-height: var(--seed-line-height-t4);
7889
7968
  }
7890
7969
 
7970
+ .seed-tag-group-item__root--weight_regular {
7971
+ --seed-icon-font-weight: var(--seed-font-weight-regular);
7972
+ --seed-prefix-icon-font-weight: var(--seed-font-weight-regular);
7973
+ --seed-suffix-icon-font-weight: var(--seed-font-weight-regular);
7974
+ }
7975
+
7891
7976
  .seed-tag-group-item__label--weight_regular {
7892
7977
  font-weight: var(--seed-font-weight-regular);
7893
7978
  }
7894
7979
 
7980
+ .seed-tag-group-item__root--weight_bold {
7981
+ --seed-icon-font-weight: var(--seed-font-weight-bold);
7982
+ --seed-prefix-icon-font-weight: var(--seed-font-weight-bold);
7983
+ --seed-suffix-icon-font-weight: var(--seed-font-weight-bold);
7984
+ }
7985
+
7895
7986
  .seed-tag-group-item__label--weight_bold {
7896
7987
  font-weight: var(--seed-font-weight-bold);
7897
7988
  }