@seed-design/css 2.8.2 → 2.9.0

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 (21) hide show
  1. package/all.css +114 -15
  2. package/all.layered.css +114 -15
  3. package/all.layered.min.css +1 -1
  4. package/all.min.css +1 -1
  5. package/base.css +15 -1
  6. package/base.layered.css +15 -1
  7. package/base.layered.min.css +1 -1
  8. package/base.min.css +1 -1
  9. package/package.json +1 -1
  10. package/recipes/app-bar-main.css +2 -1
  11. package/recipes/app-bar-main.layered.css +2 -1
  12. package/recipes/app-bar.css +5 -3
  13. package/recipes/app-bar.layered.css +5 -3
  14. package/recipes/app-screen.css +5 -1
  15. package/recipes/app-screen.layered.css +6 -6
  16. package/recipes/tag-group-item.css +59 -4
  17. package/recipes/tag-group-item.layered.css +64 -4
  18. package/recipes/tag-group.css +28 -10
  19. package/recipes/tag-group.layered.css +22 -0
  20. package/vars/component/top-navigation.d.ts +1 -4
  21. package/vars/component/top-navigation.mjs +1 -4
package/all.css CHANGED
@@ -1,12 +1,16 @@
1
1
  :root {
2
2
  --seed-safe-area-top: 0px;
3
3
  --seed-safe-area-bottom: 0px;
4
+ --seed-safe-area-left: 0px;
5
+ --seed-safe-area-right: 0px;
4
6
  }
5
7
 
6
8
  @supports (left: constant(safe-area-inset-left)) {
7
9
  :root {
8
10
  --seed-safe-area-top: constant(safe-area-inset-top);
9
11
  --seed-safe-area-bottom: constant(safe-area-inset-bottom);
12
+ --seed-safe-area-left: constant(safe-area-inset-left);
13
+ --seed-safe-area-right: constant(safe-area-inset-right);
10
14
  }
11
15
  }
12
16
 
@@ -14,6 +18,8 @@
14
18
  :root {
15
19
  --seed-safe-area-top: env(safe-area-inset-top);
16
20
  --seed-safe-area-bottom: env(safe-area-inset-bottom);
21
+ --seed-safe-area-left: env(safe-area-inset-left);
22
+ --seed-safe-area-right: env(safe-area-inset-right);
17
23
  }
18
24
  }
19
25
 
@@ -47,7 +53,6 @@
47
53
  }
48
54
 
49
55
  .seed-icon, .seed-prefix-icon, .seed-suffix-icon {
50
- vertical-align: middle;
51
56
  flex-shrink: 0;
52
57
  justify-content: center;
53
58
  align-items: center;
@@ -58,12 +63,18 @@
58
63
  width: var(--seed-icon-size);
59
64
  height: var(--seed-icon-size);
60
65
  color: var(--seed-icon-color, currentColor);
66
+ font-size: var(--seed-icon-font-size, inherit);
67
+ font-weight: var(--seed-icon-font-weight, inherit);
68
+ vertical-align: middle;
61
69
  }
62
70
 
63
71
  .seed-prefix-icon {
64
72
  width: var(--seed-prefix-icon-size);
65
73
  height: var(--seed-prefix-icon-size);
66
74
  color: var(--seed-prefix-icon-color, currentColor);
75
+ font-size: var(--seed-prefix-icon-font-size, inherit);
76
+ font-weight: var(--seed-prefix-icon-font-weight, inherit);
77
+ vertical-align: middle;
67
78
  margin-left: var(--seed-prefix-icon-margin-left, 0);
68
79
  margin-right: var(--seed-prefix-icon-margin-right, 0);
69
80
  margin-top: var(--seed-prefix-icon-margin-top, 0);
@@ -76,6 +87,9 @@
76
87
  width: var(--seed-suffix-icon-size);
77
88
  height: var(--seed-suffix-icon-size);
78
89
  color: var(--seed-suffix-icon-color, currentColor);
90
+ font-size: var(--seed-suffix-icon-font-size, inherit);
91
+ font-weight: var(--seed-suffix-icon-font-weight, inherit);
92
+ vertical-align: middle;
79
93
  margin-left: var(--seed-suffix-icon-margin-left, 0);
80
94
  margin-right: var(--seed-suffix-icon-margin-right, 0);
81
95
  margin-top: var(--seed-suffix-icon-margin-top, 0);
@@ -2055,8 +2069,9 @@
2055
2069
  }
2056
2070
 
2057
2071
  .seed-app-bar__root--theme_cupertino {
2058
- height: calc(44px + var(--seed-safe-area-top));
2059
- padding-inline: var(--seed-dimension-x4);
2072
+ height: calc(56px + var(--seed-safe-area-top));
2073
+ padding-left: calc(var(--seed-dimension-x4) + var(--seed-safe-area-left));
2074
+ padding-right: calc(var(--seed-dimension-x4) + var(--seed-safe-area-right));
2060
2075
  padding-top: var(--seed-safe-area-top);
2061
2076
  }
2062
2077
 
@@ -2080,7 +2095,8 @@
2080
2095
 
2081
2096
  .seed-app-bar__root--theme_android {
2082
2097
  height: calc(56px + var(--seed-safe-area-top));
2083
- padding-inline: var(--seed-dimension-x4);
2098
+ padding-left: calc(var(--seed-dimension-x4) + var(--seed-safe-area-left));
2099
+ padding-right: calc(var(--seed-dimension-x4) + var(--seed-safe-area-right));
2084
2100
  padding-top: var(--seed-safe-area-top);
2085
2101
  }
2086
2102
 
@@ -2154,7 +2170,8 @@
2154
2170
  text-align: center;
2155
2171
  top: var(--seed-safe-area-top);
2156
2172
  bottom: 0;
2157
- padding-inline: var(--centered-title-padding-x, 0);
2173
+ padding-left: calc(var(--seed-safe-area-left) + max(calc(var(--seed-dimension-x4) + var(--app-bar-area-extent, calc(var(--centered-title-padding-x, 0px) - var(--seed-safe-area-left) - var(--seed-dimension-x4)))), 0px));
2174
+ padding-right: calc(var(--seed-safe-area-right) + max(calc(var(--seed-dimension-x4) + var(--app-bar-area-extent, calc(var(--centered-title-padding-x, 0px) - var(--seed-safe-area-right) - var(--seed-dimension-x4)))), 0px));
2158
2175
  pointer-events: none;
2159
2176
  justify-content: center;
2160
2177
  align-items: center;
@@ -2204,9 +2221,11 @@
2204
2221
  .seed-app-screen__layer {
2205
2222
  z-index: var(--z-index-layer);
2206
2223
  box-sizing: border-box;
2207
- -webkit-overflow-scrolling: touch;
2208
2224
  width: 100%;
2209
2225
  height: 100%;
2226
+ padding-left: var(--seed-safe-area-left);
2227
+ padding-right: var(--seed-safe-area-right);
2228
+ -webkit-overflow-scrolling: touch;
2210
2229
  position: absolute;
2211
2230
  inset-inline: 0;
2212
2231
  overflow-y: scroll;
@@ -2232,11 +2251,7 @@
2232
2251
  inset-inline: 0;
2233
2252
  }
2234
2253
 
2235
- .seed-app-screen__root--theme_cupertino {
2236
- --app-bar-height: 44px;
2237
- }
2238
-
2239
- .seed-app-screen__root--theme_android {
2254
+ .seed-app-screen__root--theme_cupertino, .seed-app-screen__root--theme_android {
2240
2255
  --app-bar-height: 56px;
2241
2256
  }
2242
2257
 
@@ -2303,6 +2318,8 @@
2303
2318
  content: "";
2304
2319
  inset-inline: 0;
2305
2320
  margin-bottom: calc(-1 * (66px + 400px + var(--seed-safe-area-top)));
2321
+ margin-left: calc(-1 * var(--seed-safe-area-left));
2322
+ margin-right: calc(-1 * var(--seed-safe-area-right));
2306
2323
  height: calc(66px + 400px + var(--seed-safe-area-top));
2307
2324
  pointer-events: none;
2308
2325
  z-index: 1;
@@ -11801,20 +11818,42 @@
11801
11818
  --tag-group-item-overflow: hidden;
11802
11819
  --tag-group-item-text-overflow: ellipsis;
11803
11820
  --tag-group-item-white-space: nowrap;
11821
+ --tag-group-item-align-items: baseline;
11804
11822
  align-items: center;
11805
11823
  max-width: 100%;
11806
11824
  display: inline-flex;
11807
11825
  }
11808
11826
 
11827
+ .seed-tag-group__root--truncate_true .seed-icon {
11828
+ top: var(--tag-group-item-icon-flex-offset, 0px);
11829
+ position: relative;
11830
+ }
11831
+
11832
+ .seed-tag-group__root--truncate_true .seed-prefix-icon {
11833
+ top: var(--tag-group-item-prefix-icon-flex-offset, 0px);
11834
+ position: relative;
11835
+ }
11836
+
11837
+ .seed-tag-group__root--truncate_true .seed-suffix-icon {
11838
+ top: var(--tag-group-item-suffix-icon-flex-offset, 0px);
11839
+ position: relative;
11840
+ }
11841
+
11809
11842
  .seed-tag-group__root--truncate_false {
11810
11843
  --tag-group-item-display: inline;
11811
11844
  --tag-group-item-overflow: visible;
11812
11845
  --tag-group-item-text-overflow: clip;
11813
11846
  --tag-group-item-white-space: normal;
11847
+ --tag-group-item-align-items: center;
11814
11848
  font-size: 0;
11815
11849
  display: inline-block;
11816
11850
  }
11817
11851
 
11852
+ .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 {
11853
+ top: var(--tag-group-item-inline-icon-offset, 0px);
11854
+ position: relative;
11855
+ }
11856
+
11818
11857
  .seed-tag-group__separator--truncate_false {
11819
11858
  vertical-align: middle;
11820
11859
  }
@@ -11833,9 +11872,9 @@
11833
11872
 
11834
11873
  .seed-tag-group-item__root {
11835
11874
  display: var(--tag-group-item-display);
11875
+ align-items: var(--tag-group-item-align-items, center);
11836
11876
  vertical-align: middle;
11837
11877
  flex-shrink: var(--seed-box-flex-shrink, 1);
11838
- align-items: center;
11839
11878
  min-width: 0;
11840
11879
  }
11841
11880
 
@@ -11858,9 +11897,25 @@
11858
11897
  }
11859
11898
 
11860
11899
  .seed-tag-group-item__root--size_t2 {
11900
+ --tag-group-item-inline-icon-offset: calc(.65em - var(--seed-line-height-t2) / 2);
11901
+ --tag-group-item-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .35em);
11902
+ --tag-group-item-prefix-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .35em);
11903
+ --tag-group-item-suffix-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .35em);
11904
+ --seed-icon-size: var(--seed-dimension-x3);
11905
+ --seed-icon-font-size: var(--seed-font-size-t2);
11861
11906
  --seed-prefix-icon-size: var(--seed-dimension-x3);
11907
+ --seed-prefix-icon-font-size: var(--seed-font-size-t2);
11862
11908
  --seed-suffix-icon-size: var(--seed-dimension-x3);
11863
- --seed-icon-size: var(--seed-dimension-x3);
11909
+ --seed-suffix-icon-font-size: var(--seed-font-size-t2);
11910
+ }
11911
+
11912
+ @supports (top: 1cap) {
11913
+ .seed-tag-group-item__root--size_t2 {
11914
+ --tag-group-item-inline-icon-offset: calc(1em - var(--seed-line-height-t2) / 2 - .5cap);
11915
+ --tag-group-item-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .5cap);
11916
+ --tag-group-item-prefix-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .5cap);
11917
+ --tag-group-item-suffix-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .5cap);
11918
+ }
11864
11919
  }
11865
11920
 
11866
11921
  .seed-tag-group-item__label--size_t2 {
@@ -11869,9 +11924,25 @@
11869
11924
  }
11870
11925
 
11871
11926
  .seed-tag-group-item__root--size_t3 {
11927
+ --tag-group-item-inline-icon-offset: calc(.65em - var(--seed-line-height-t3) / 2);
11928
+ --tag-group-item-icon-flex-offset: calc(13px / 2 - .35em);
11929
+ --tag-group-item-prefix-icon-flex-offset: calc(13px / 2 - .35em);
11930
+ --tag-group-item-suffix-icon-flex-offset: calc(13px / 2 - .35em);
11931
+ --seed-icon-size: 13px;
11932
+ --seed-icon-font-size: var(--seed-font-size-t3);
11872
11933
  --seed-prefix-icon-size: 13px;
11934
+ --seed-prefix-icon-font-size: var(--seed-font-size-t3);
11873
11935
  --seed-suffix-icon-size: 13px;
11874
- --seed-icon-size: 13px;
11936
+ --seed-suffix-icon-font-size: var(--seed-font-size-t3);
11937
+ }
11938
+
11939
+ @supports (top: 1cap) {
11940
+ .seed-tag-group-item__root--size_t3 {
11941
+ --tag-group-item-inline-icon-offset: calc(1em - var(--seed-line-height-t3) / 2 - .5cap);
11942
+ --tag-group-item-icon-flex-offset: calc(13px / 2 - .5cap);
11943
+ --tag-group-item-prefix-icon-flex-offset: calc(13px / 2 - .5cap);
11944
+ --tag-group-item-suffix-icon-flex-offset: calc(13px / 2 - .5cap);
11945
+ }
11875
11946
  }
11876
11947
 
11877
11948
  .seed-tag-group-item__label--size_t3 {
@@ -11880,9 +11951,25 @@
11880
11951
  }
11881
11952
 
11882
11953
  .seed-tag-group-item__root--size_t4 {
11954
+ --tag-group-item-inline-icon-offset: calc(.65em - var(--seed-line-height-t4) / 2);
11955
+ --tag-group-item-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .35em);
11956
+ --tag-group-item-prefix-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .35em);
11957
+ --tag-group-item-suffix-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .35em);
11958
+ --seed-icon-size: var(--seed-dimension-x3_5);
11959
+ --seed-icon-font-size: var(--seed-font-size-t4);
11883
11960
  --seed-prefix-icon-size: var(--seed-dimension-x3_5);
11961
+ --seed-prefix-icon-font-size: var(--seed-font-size-t4);
11884
11962
  --seed-suffix-icon-size: var(--seed-dimension-x3_5);
11885
- --seed-icon-size: var(--seed-dimension-x3_5);
11963
+ --seed-suffix-icon-font-size: var(--seed-font-size-t4);
11964
+ }
11965
+
11966
+ @supports (top: 1cap) {
11967
+ .seed-tag-group-item__root--size_t4 {
11968
+ --tag-group-item-inline-icon-offset: calc(1em - var(--seed-line-height-t4) / 2 - .5cap);
11969
+ --tag-group-item-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .5cap);
11970
+ --tag-group-item-prefix-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .5cap);
11971
+ --tag-group-item-suffix-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .5cap);
11972
+ }
11886
11973
  }
11887
11974
 
11888
11975
  .seed-tag-group-item__label--size_t4 {
@@ -11890,10 +11977,22 @@
11890
11977
  line-height: var(--seed-line-height-t4);
11891
11978
  }
11892
11979
 
11980
+ .seed-tag-group-item__root--weight_regular {
11981
+ --seed-icon-font-weight: var(--seed-font-weight-regular);
11982
+ --seed-prefix-icon-font-weight: var(--seed-font-weight-regular);
11983
+ --seed-suffix-icon-font-weight: var(--seed-font-weight-regular);
11984
+ }
11985
+
11893
11986
  .seed-tag-group-item__label--weight_regular {
11894
11987
  font-weight: var(--seed-font-weight-regular);
11895
11988
  }
11896
11989
 
11990
+ .seed-tag-group-item__root--weight_bold {
11991
+ --seed-icon-font-weight: var(--seed-font-weight-bold);
11992
+ --seed-prefix-icon-font-weight: var(--seed-font-weight-bold);
11993
+ --seed-suffix-icon-font-weight: var(--seed-font-weight-bold);
11994
+ }
11995
+
11897
11996
  .seed-tag-group-item__label--weight_bold {
11898
11997
  font-weight: var(--seed-font-weight-bold);
11899
11998
  }
package/all.layered.css CHANGED
@@ -2,12 +2,16 @@
2
2
  :root {
3
3
  --seed-safe-area-top: 0px;
4
4
  --seed-safe-area-bottom: 0px;
5
+ --seed-safe-area-left: 0px;
6
+ --seed-safe-area-right: 0px;
5
7
  }
6
8
 
7
9
  @supports (left: constant(safe-area-inset-left)) {
8
10
  :root {
9
11
  --seed-safe-area-top: constant(safe-area-inset-top);
10
12
  --seed-safe-area-bottom: constant(safe-area-inset-bottom);
13
+ --seed-safe-area-left: constant(safe-area-inset-left);
14
+ --seed-safe-area-right: constant(safe-area-inset-right);
11
15
  }
12
16
  }
13
17
 
@@ -15,6 +19,8 @@
15
19
  :root {
16
20
  --seed-safe-area-top: env(safe-area-inset-top);
17
21
  --seed-safe-area-bottom: env(safe-area-inset-bottom);
22
+ --seed-safe-area-left: env(safe-area-inset-left);
23
+ --seed-safe-area-right: env(safe-area-inset-right);
18
24
  }
19
25
  }
20
26
 
@@ -48,7 +54,6 @@
48
54
  }
49
55
 
50
56
  .seed-icon, .seed-prefix-icon, .seed-suffix-icon {
51
- vertical-align: middle;
52
57
  flex-shrink: 0;
53
58
  justify-content: center;
54
59
  align-items: center;
@@ -59,12 +64,18 @@
59
64
  width: var(--seed-icon-size);
60
65
  height: var(--seed-icon-size);
61
66
  color: var(--seed-icon-color, currentColor);
67
+ font-size: var(--seed-icon-font-size, inherit);
68
+ font-weight: var(--seed-icon-font-weight, inherit);
69
+ vertical-align: middle;
62
70
  }
63
71
 
64
72
  .seed-prefix-icon {
65
73
  width: var(--seed-prefix-icon-size);
66
74
  height: var(--seed-prefix-icon-size);
67
75
  color: var(--seed-prefix-icon-color, currentColor);
76
+ font-size: var(--seed-prefix-icon-font-size, inherit);
77
+ font-weight: var(--seed-prefix-icon-font-weight, inherit);
78
+ vertical-align: middle;
68
79
  margin-left: var(--seed-prefix-icon-margin-left, 0);
69
80
  margin-right: var(--seed-prefix-icon-margin-right, 0);
70
81
  margin-top: var(--seed-prefix-icon-margin-top, 0);
@@ -77,6 +88,9 @@
77
88
  width: var(--seed-suffix-icon-size);
78
89
  height: var(--seed-suffix-icon-size);
79
90
  color: var(--seed-suffix-icon-color, currentColor);
91
+ font-size: var(--seed-suffix-icon-font-size, inherit);
92
+ font-weight: var(--seed-suffix-icon-font-weight, inherit);
93
+ vertical-align: middle;
80
94
  margin-left: var(--seed-suffix-icon-margin-left, 0);
81
95
  margin-right: var(--seed-suffix-icon-margin-right, 0);
82
96
  margin-top: var(--seed-suffix-icon-margin-top, 0);
@@ -2304,8 +2318,9 @@
2304
2318
  }
2305
2319
 
2306
2320
  .seed-app-bar__root--theme_cupertino {
2307
- height: calc(44px + var(--seed-safe-area-top));
2308
- padding-inline: var(--seed-dimension-x4);
2321
+ height: calc(56px + var(--seed-safe-area-top));
2322
+ padding-left: calc(var(--seed-dimension-x4) + var(--seed-safe-area-left));
2323
+ padding-right: calc(var(--seed-dimension-x4) + var(--seed-safe-area-right));
2309
2324
  padding-top: var(--seed-safe-area-top);
2310
2325
  }
2311
2326
 
@@ -2329,7 +2344,8 @@
2329
2344
 
2330
2345
  .seed-app-bar__root--theme_android {
2331
2346
  height: calc(56px + var(--seed-safe-area-top));
2332
- padding-inline: var(--seed-dimension-x4);
2347
+ padding-left: calc(var(--seed-dimension-x4) + var(--seed-safe-area-left));
2348
+ padding-right: calc(var(--seed-dimension-x4) + var(--seed-safe-area-right));
2333
2349
  padding-top: var(--seed-safe-area-top);
2334
2350
  }
2335
2351
 
@@ -2403,7 +2419,8 @@
2403
2419
  text-align: center;
2404
2420
  top: var(--seed-safe-area-top);
2405
2421
  bottom: 0;
2406
- padding-inline: var(--centered-title-padding-x, 0);
2422
+ padding-left: calc(var(--seed-safe-area-left) + max(calc(var(--seed-dimension-x4) + var(--app-bar-area-extent, calc(var(--centered-title-padding-x, 0px) - var(--seed-safe-area-left) - var(--seed-dimension-x4)))), 0px));
2423
+ padding-right: calc(var(--seed-safe-area-right) + max(calc(var(--seed-dimension-x4) + var(--app-bar-area-extent, calc(var(--centered-title-padding-x, 0px) - var(--seed-safe-area-right) - var(--seed-dimension-x4)))), 0px));
2407
2424
  pointer-events: none;
2408
2425
  justify-content: center;
2409
2426
  align-items: center;
@@ -2453,9 +2470,11 @@
2453
2470
  .seed-app-screen__layer {
2454
2471
  z-index: var(--z-index-layer);
2455
2472
  box-sizing: border-box;
2456
- -webkit-overflow-scrolling: touch;
2457
2473
  width: 100%;
2458
2474
  height: 100%;
2475
+ padding-left: var(--seed-safe-area-left);
2476
+ padding-right: var(--seed-safe-area-right);
2477
+ -webkit-overflow-scrolling: touch;
2459
2478
  position: absolute;
2460
2479
  inset-inline: 0;
2461
2480
  overflow-y: scroll;
@@ -2481,11 +2500,7 @@
2481
2500
  inset-inline: 0;
2482
2501
  }
2483
2502
 
2484
- .seed-app-screen__root--theme_cupertino {
2485
- --app-bar-height: 44px;
2486
- }
2487
-
2488
- .seed-app-screen__root--theme_android {
2503
+ .seed-app-screen__root--theme_cupertino, .seed-app-screen__root--theme_android {
2489
2504
  --app-bar-height: 56px;
2490
2505
  }
2491
2506
 
@@ -2552,6 +2567,8 @@
2552
2567
  content: "";
2553
2568
  inset-inline: 0;
2554
2569
  margin-bottom: calc(-1 * (66px + 400px + var(--seed-safe-area-top)));
2570
+ margin-left: calc(-1 * var(--seed-safe-area-left));
2571
+ margin-right: calc(-1 * var(--seed-safe-area-right));
2555
2572
  height: calc(66px + 400px + var(--seed-safe-area-top));
2556
2573
  pointer-events: none;
2557
2574
  z-index: 1;
@@ -12050,20 +12067,42 @@
12050
12067
  --tag-group-item-overflow: hidden;
12051
12068
  --tag-group-item-text-overflow: ellipsis;
12052
12069
  --tag-group-item-white-space: nowrap;
12070
+ --tag-group-item-align-items: baseline;
12053
12071
  align-items: center;
12054
12072
  max-width: 100%;
12055
12073
  display: inline-flex;
12056
12074
  }
12057
12075
 
12076
+ .seed-tag-group__root--truncate_true .seed-icon {
12077
+ top: var(--tag-group-item-icon-flex-offset, 0px);
12078
+ position: relative;
12079
+ }
12080
+
12081
+ .seed-tag-group__root--truncate_true .seed-prefix-icon {
12082
+ top: var(--tag-group-item-prefix-icon-flex-offset, 0px);
12083
+ position: relative;
12084
+ }
12085
+
12086
+ .seed-tag-group__root--truncate_true .seed-suffix-icon {
12087
+ top: var(--tag-group-item-suffix-icon-flex-offset, 0px);
12088
+ position: relative;
12089
+ }
12090
+
12058
12091
  .seed-tag-group__root--truncate_false {
12059
12092
  --tag-group-item-display: inline;
12060
12093
  --tag-group-item-overflow: visible;
12061
12094
  --tag-group-item-text-overflow: clip;
12062
12095
  --tag-group-item-white-space: normal;
12096
+ --tag-group-item-align-items: center;
12063
12097
  font-size: 0;
12064
12098
  display: inline-block;
12065
12099
  }
12066
12100
 
12101
+ .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 {
12102
+ top: var(--tag-group-item-inline-icon-offset, 0px);
12103
+ position: relative;
12104
+ }
12105
+
12067
12106
  .seed-tag-group__separator--truncate_false {
12068
12107
  vertical-align: middle;
12069
12108
  }
@@ -12082,9 +12121,9 @@
12082
12121
 
12083
12122
  .seed-tag-group-item__root {
12084
12123
  display: var(--tag-group-item-display);
12124
+ align-items: var(--tag-group-item-align-items, center);
12085
12125
  vertical-align: middle;
12086
12126
  flex-shrink: var(--seed-box-flex-shrink, 1);
12087
- align-items: center;
12088
12127
  min-width: 0;
12089
12128
  }
12090
12129
 
@@ -12107,9 +12146,25 @@
12107
12146
  }
12108
12147
 
12109
12148
  .seed-tag-group-item__root--size_t2 {
12149
+ --tag-group-item-inline-icon-offset: calc(.65em - var(--seed-line-height-t2) / 2);
12150
+ --tag-group-item-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .35em);
12151
+ --tag-group-item-prefix-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .35em);
12152
+ --tag-group-item-suffix-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .35em);
12153
+ --seed-icon-size: var(--seed-dimension-x3);
12154
+ --seed-icon-font-size: var(--seed-font-size-t2);
12110
12155
  --seed-prefix-icon-size: var(--seed-dimension-x3);
12156
+ --seed-prefix-icon-font-size: var(--seed-font-size-t2);
12111
12157
  --seed-suffix-icon-size: var(--seed-dimension-x3);
12112
- --seed-icon-size: var(--seed-dimension-x3);
12158
+ --seed-suffix-icon-font-size: var(--seed-font-size-t2);
12159
+ }
12160
+
12161
+ @supports (top: 1cap) {
12162
+ .seed-tag-group-item__root--size_t2 {
12163
+ --tag-group-item-inline-icon-offset: calc(1em - var(--seed-line-height-t2) / 2 - .5cap);
12164
+ --tag-group-item-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .5cap);
12165
+ --tag-group-item-prefix-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .5cap);
12166
+ --tag-group-item-suffix-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .5cap);
12167
+ }
12113
12168
  }
12114
12169
 
12115
12170
  .seed-tag-group-item__label--size_t2 {
@@ -12118,9 +12173,25 @@
12118
12173
  }
12119
12174
 
12120
12175
  .seed-tag-group-item__root--size_t3 {
12176
+ --tag-group-item-inline-icon-offset: calc(.65em - var(--seed-line-height-t3) / 2);
12177
+ --tag-group-item-icon-flex-offset: calc(13px / 2 - .35em);
12178
+ --tag-group-item-prefix-icon-flex-offset: calc(13px / 2 - .35em);
12179
+ --tag-group-item-suffix-icon-flex-offset: calc(13px / 2 - .35em);
12180
+ --seed-icon-size: 13px;
12181
+ --seed-icon-font-size: var(--seed-font-size-t3);
12121
12182
  --seed-prefix-icon-size: 13px;
12183
+ --seed-prefix-icon-font-size: var(--seed-font-size-t3);
12122
12184
  --seed-suffix-icon-size: 13px;
12123
- --seed-icon-size: 13px;
12185
+ --seed-suffix-icon-font-size: var(--seed-font-size-t3);
12186
+ }
12187
+
12188
+ @supports (top: 1cap) {
12189
+ .seed-tag-group-item__root--size_t3 {
12190
+ --tag-group-item-inline-icon-offset: calc(1em - var(--seed-line-height-t3) / 2 - .5cap);
12191
+ --tag-group-item-icon-flex-offset: calc(13px / 2 - .5cap);
12192
+ --tag-group-item-prefix-icon-flex-offset: calc(13px / 2 - .5cap);
12193
+ --tag-group-item-suffix-icon-flex-offset: calc(13px / 2 - .5cap);
12194
+ }
12124
12195
  }
12125
12196
 
12126
12197
  .seed-tag-group-item__label--size_t3 {
@@ -12129,9 +12200,25 @@
12129
12200
  }
12130
12201
 
12131
12202
  .seed-tag-group-item__root--size_t4 {
12203
+ --tag-group-item-inline-icon-offset: calc(.65em - var(--seed-line-height-t4) / 2);
12204
+ --tag-group-item-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .35em);
12205
+ --tag-group-item-prefix-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .35em);
12206
+ --tag-group-item-suffix-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .35em);
12207
+ --seed-icon-size: var(--seed-dimension-x3_5);
12208
+ --seed-icon-font-size: var(--seed-font-size-t4);
12132
12209
  --seed-prefix-icon-size: var(--seed-dimension-x3_5);
12210
+ --seed-prefix-icon-font-size: var(--seed-font-size-t4);
12133
12211
  --seed-suffix-icon-size: var(--seed-dimension-x3_5);
12134
- --seed-icon-size: var(--seed-dimension-x3_5);
12212
+ --seed-suffix-icon-font-size: var(--seed-font-size-t4);
12213
+ }
12214
+
12215
+ @supports (top: 1cap) {
12216
+ .seed-tag-group-item__root--size_t4 {
12217
+ --tag-group-item-inline-icon-offset: calc(1em - var(--seed-line-height-t4) / 2 - .5cap);
12218
+ --tag-group-item-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .5cap);
12219
+ --tag-group-item-prefix-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .5cap);
12220
+ --tag-group-item-suffix-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .5cap);
12221
+ }
12135
12222
  }
12136
12223
 
12137
12224
  .seed-tag-group-item__label--size_t4 {
@@ -12139,10 +12226,22 @@
12139
12226
  line-height: var(--seed-line-height-t4);
12140
12227
  }
12141
12228
 
12229
+ .seed-tag-group-item__root--weight_regular {
12230
+ --seed-icon-font-weight: var(--seed-font-weight-regular);
12231
+ --seed-prefix-icon-font-weight: var(--seed-font-weight-regular);
12232
+ --seed-suffix-icon-font-weight: var(--seed-font-weight-regular);
12233
+ }
12234
+
12142
12235
  .seed-tag-group-item__label--weight_regular {
12143
12236
  font-weight: var(--seed-font-weight-regular);
12144
12237
  }
12145
12238
 
12239
+ .seed-tag-group-item__root--weight_bold {
12240
+ --seed-icon-font-weight: var(--seed-font-weight-bold);
12241
+ --seed-prefix-icon-font-weight: var(--seed-font-weight-bold);
12242
+ --seed-suffix-icon-font-weight: var(--seed-font-weight-bold);
12243
+ }
12244
+
12146
12245
  .seed-tag-group-item__label--weight_bold {
12147
12246
  font-weight: var(--seed-font-weight-bold);
12148
12247
  }