@seed-design/css 2.8.1 → 2.8.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 (17) hide show
  1. package/all.css +97 -5
  2. package/all.layered.css +97 -5
  3. package/all.layered.min.css +1 -1
  4. package/all.min.css +1 -1
  5. package/base.css +9 -1
  6. package/base.layered.css +9 -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/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/recipes/wheel-picker-public.css +1 -0
  15. package/recipes/wheel-picker-public.layered.css +1 -0
  16. package/recipes/wheel-picker.css +1 -0
  17. package/recipes/wheel-picker.layered.css +1 -0
package/all.css CHANGED
@@ -47,7 +47,6 @@
47
47
  }
48
48
 
49
49
  .seed-icon, .seed-prefix-icon, .seed-suffix-icon {
50
- vertical-align: middle;
51
50
  flex-shrink: 0;
52
51
  justify-content: center;
53
52
  align-items: center;
@@ -58,12 +57,18 @@
58
57
  width: var(--seed-icon-size);
59
58
  height: var(--seed-icon-size);
60
59
  color: var(--seed-icon-color, currentColor);
60
+ font-size: var(--seed-icon-font-size, inherit);
61
+ font-weight: var(--seed-icon-font-weight, inherit);
62
+ vertical-align: middle;
61
63
  }
62
64
 
63
65
  .seed-prefix-icon {
64
66
  width: var(--seed-prefix-icon-size);
65
67
  height: var(--seed-prefix-icon-size);
66
68
  color: var(--seed-prefix-icon-color, currentColor);
69
+ font-size: var(--seed-prefix-icon-font-size, inherit);
70
+ font-weight: var(--seed-prefix-icon-font-weight, inherit);
71
+ vertical-align: middle;
67
72
  margin-left: var(--seed-prefix-icon-margin-left, 0);
68
73
  margin-right: var(--seed-prefix-icon-margin-right, 0);
69
74
  margin-top: var(--seed-prefix-icon-margin-top, 0);
@@ -76,6 +81,9 @@
76
81
  width: var(--seed-suffix-icon-size);
77
82
  height: var(--seed-suffix-icon-size);
78
83
  color: var(--seed-suffix-icon-color, currentColor);
84
+ font-size: var(--seed-suffix-icon-font-size, inherit);
85
+ font-weight: var(--seed-suffix-icon-font-weight, inherit);
86
+ vertical-align: middle;
79
87
  margin-left: var(--seed-suffix-icon-margin-left, 0);
80
88
  margin-right: var(--seed-suffix-icon-margin-right, 0);
81
89
  margin-top: var(--seed-suffix-icon-margin-top, 0);
@@ -11801,20 +11809,42 @@
11801
11809
  --tag-group-item-overflow: hidden;
11802
11810
  --tag-group-item-text-overflow: ellipsis;
11803
11811
  --tag-group-item-white-space: nowrap;
11812
+ --tag-group-item-align-items: baseline;
11804
11813
  align-items: center;
11805
11814
  max-width: 100%;
11806
11815
  display: inline-flex;
11807
11816
  }
11808
11817
 
11818
+ .seed-tag-group__root--truncate_true .seed-icon {
11819
+ top: var(--tag-group-item-icon-flex-offset, 0px);
11820
+ position: relative;
11821
+ }
11822
+
11823
+ .seed-tag-group__root--truncate_true .seed-prefix-icon {
11824
+ top: var(--tag-group-item-prefix-icon-flex-offset, 0px);
11825
+ position: relative;
11826
+ }
11827
+
11828
+ .seed-tag-group__root--truncate_true .seed-suffix-icon {
11829
+ top: var(--tag-group-item-suffix-icon-flex-offset, 0px);
11830
+ position: relative;
11831
+ }
11832
+
11809
11833
  .seed-tag-group__root--truncate_false {
11810
11834
  --tag-group-item-display: inline;
11811
11835
  --tag-group-item-overflow: visible;
11812
11836
  --tag-group-item-text-overflow: clip;
11813
11837
  --tag-group-item-white-space: normal;
11838
+ --tag-group-item-align-items: center;
11814
11839
  font-size: 0;
11815
11840
  display: inline-block;
11816
11841
  }
11817
11842
 
11843
+ .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 {
11844
+ top: var(--tag-group-item-inline-icon-offset, 0px);
11845
+ position: relative;
11846
+ }
11847
+
11818
11848
  .seed-tag-group__separator--truncate_false {
11819
11849
  vertical-align: middle;
11820
11850
  }
@@ -11833,9 +11863,9 @@
11833
11863
 
11834
11864
  .seed-tag-group-item__root {
11835
11865
  display: var(--tag-group-item-display);
11866
+ align-items: var(--tag-group-item-align-items, center);
11836
11867
  vertical-align: middle;
11837
11868
  flex-shrink: var(--seed-box-flex-shrink, 1);
11838
- align-items: center;
11839
11869
  min-width: 0;
11840
11870
  }
11841
11871
 
@@ -11858,9 +11888,25 @@
11858
11888
  }
11859
11889
 
11860
11890
  .seed-tag-group-item__root--size_t2 {
11891
+ --tag-group-item-inline-icon-offset: calc(.65em - var(--seed-line-height-t2) / 2);
11892
+ --tag-group-item-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .35em);
11893
+ --tag-group-item-prefix-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .35em);
11894
+ --tag-group-item-suffix-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .35em);
11895
+ --seed-icon-size: var(--seed-dimension-x3);
11896
+ --seed-icon-font-size: var(--seed-font-size-t2);
11861
11897
  --seed-prefix-icon-size: var(--seed-dimension-x3);
11898
+ --seed-prefix-icon-font-size: var(--seed-font-size-t2);
11862
11899
  --seed-suffix-icon-size: var(--seed-dimension-x3);
11863
- --seed-icon-size: var(--seed-dimension-x3);
11900
+ --seed-suffix-icon-font-size: var(--seed-font-size-t2);
11901
+ }
11902
+
11903
+ @supports (top: 1cap) {
11904
+ .seed-tag-group-item__root--size_t2 {
11905
+ --tag-group-item-inline-icon-offset: calc(1em - var(--seed-line-height-t2) / 2 - .5cap);
11906
+ --tag-group-item-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .5cap);
11907
+ --tag-group-item-prefix-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .5cap);
11908
+ --tag-group-item-suffix-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .5cap);
11909
+ }
11864
11910
  }
11865
11911
 
11866
11912
  .seed-tag-group-item__label--size_t2 {
@@ -11869,9 +11915,25 @@
11869
11915
  }
11870
11916
 
11871
11917
  .seed-tag-group-item__root--size_t3 {
11918
+ --tag-group-item-inline-icon-offset: calc(.65em - var(--seed-line-height-t3) / 2);
11919
+ --tag-group-item-icon-flex-offset: calc(13px / 2 - .35em);
11920
+ --tag-group-item-prefix-icon-flex-offset: calc(13px / 2 - .35em);
11921
+ --tag-group-item-suffix-icon-flex-offset: calc(13px / 2 - .35em);
11922
+ --seed-icon-size: 13px;
11923
+ --seed-icon-font-size: var(--seed-font-size-t3);
11872
11924
  --seed-prefix-icon-size: 13px;
11925
+ --seed-prefix-icon-font-size: var(--seed-font-size-t3);
11873
11926
  --seed-suffix-icon-size: 13px;
11874
- --seed-icon-size: 13px;
11927
+ --seed-suffix-icon-font-size: var(--seed-font-size-t3);
11928
+ }
11929
+
11930
+ @supports (top: 1cap) {
11931
+ .seed-tag-group-item__root--size_t3 {
11932
+ --tag-group-item-inline-icon-offset: calc(1em - var(--seed-line-height-t3) / 2 - .5cap);
11933
+ --tag-group-item-icon-flex-offset: calc(13px / 2 - .5cap);
11934
+ --tag-group-item-prefix-icon-flex-offset: calc(13px / 2 - .5cap);
11935
+ --tag-group-item-suffix-icon-flex-offset: calc(13px / 2 - .5cap);
11936
+ }
11875
11937
  }
11876
11938
 
11877
11939
  .seed-tag-group-item__label--size_t3 {
@@ -11880,9 +11942,25 @@
11880
11942
  }
11881
11943
 
11882
11944
  .seed-tag-group-item__root--size_t4 {
11945
+ --tag-group-item-inline-icon-offset: calc(.65em - var(--seed-line-height-t4) / 2);
11946
+ --tag-group-item-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .35em);
11947
+ --tag-group-item-prefix-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .35em);
11948
+ --tag-group-item-suffix-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .35em);
11949
+ --seed-icon-size: var(--seed-dimension-x3_5);
11950
+ --seed-icon-font-size: var(--seed-font-size-t4);
11883
11951
  --seed-prefix-icon-size: var(--seed-dimension-x3_5);
11952
+ --seed-prefix-icon-font-size: var(--seed-font-size-t4);
11884
11953
  --seed-suffix-icon-size: var(--seed-dimension-x3_5);
11885
- --seed-icon-size: var(--seed-dimension-x3_5);
11954
+ --seed-suffix-icon-font-size: var(--seed-font-size-t4);
11955
+ }
11956
+
11957
+ @supports (top: 1cap) {
11958
+ .seed-tag-group-item__root--size_t4 {
11959
+ --tag-group-item-inline-icon-offset: calc(1em - var(--seed-line-height-t4) / 2 - .5cap);
11960
+ --tag-group-item-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .5cap);
11961
+ --tag-group-item-prefix-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .5cap);
11962
+ --tag-group-item-suffix-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .5cap);
11963
+ }
11886
11964
  }
11887
11965
 
11888
11966
  .seed-tag-group-item__label--size_t4 {
@@ -11890,10 +11968,22 @@
11890
11968
  line-height: var(--seed-line-height-t4);
11891
11969
  }
11892
11970
 
11971
+ .seed-tag-group-item__root--weight_regular {
11972
+ --seed-icon-font-weight: var(--seed-font-weight-regular);
11973
+ --seed-prefix-icon-font-weight: var(--seed-font-weight-regular);
11974
+ --seed-suffix-icon-font-weight: var(--seed-font-weight-regular);
11975
+ }
11976
+
11893
11977
  .seed-tag-group-item__label--weight_regular {
11894
11978
  font-weight: var(--seed-font-weight-regular);
11895
11979
  }
11896
11980
 
11981
+ .seed-tag-group-item__root--weight_bold {
11982
+ --seed-icon-font-weight: var(--seed-font-weight-bold);
11983
+ --seed-prefix-icon-font-weight: var(--seed-font-weight-bold);
11984
+ --seed-suffix-icon-font-weight: var(--seed-font-weight-bold);
11985
+ }
11986
+
11897
11987
  .seed-tag-group-item__label--weight_bold {
11898
11988
  font-weight: var(--seed-font-weight-bold);
11899
11989
  }
@@ -13394,6 +13484,7 @@
13394
13484
  scroll-snap-align: center;
13395
13485
  -webkit-user-select: none;
13396
13486
  user-select: none;
13487
+ outline-color: #0000;
13397
13488
  display: flex;
13398
13489
  }
13399
13490
 
@@ -13498,6 +13589,7 @@
13498
13589
  scroll-snap-align: center;
13499
13590
  -webkit-user-select: none;
13500
13591
  user-select: none;
13592
+ outline-color: #0000;
13501
13593
  justify-content: center;
13502
13594
  align-items: center;
13503
13595
  display: flex;
package/all.layered.css CHANGED
@@ -48,7 +48,6 @@
48
48
  }
49
49
 
50
50
  .seed-icon, .seed-prefix-icon, .seed-suffix-icon {
51
- vertical-align: middle;
52
51
  flex-shrink: 0;
53
52
  justify-content: center;
54
53
  align-items: center;
@@ -59,12 +58,18 @@
59
58
  width: var(--seed-icon-size);
60
59
  height: var(--seed-icon-size);
61
60
  color: var(--seed-icon-color, currentColor);
61
+ font-size: var(--seed-icon-font-size, inherit);
62
+ font-weight: var(--seed-icon-font-weight, inherit);
63
+ vertical-align: middle;
62
64
  }
63
65
 
64
66
  .seed-prefix-icon {
65
67
  width: var(--seed-prefix-icon-size);
66
68
  height: var(--seed-prefix-icon-size);
67
69
  color: var(--seed-prefix-icon-color, currentColor);
70
+ font-size: var(--seed-prefix-icon-font-size, inherit);
71
+ font-weight: var(--seed-prefix-icon-font-weight, inherit);
72
+ vertical-align: middle;
68
73
  margin-left: var(--seed-prefix-icon-margin-left, 0);
69
74
  margin-right: var(--seed-prefix-icon-margin-right, 0);
70
75
  margin-top: var(--seed-prefix-icon-margin-top, 0);
@@ -77,6 +82,9 @@
77
82
  width: var(--seed-suffix-icon-size);
78
83
  height: var(--seed-suffix-icon-size);
79
84
  color: var(--seed-suffix-icon-color, currentColor);
85
+ font-size: var(--seed-suffix-icon-font-size, inherit);
86
+ font-weight: var(--seed-suffix-icon-font-weight, inherit);
87
+ vertical-align: middle;
80
88
  margin-left: var(--seed-suffix-icon-margin-left, 0);
81
89
  margin-right: var(--seed-suffix-icon-margin-right, 0);
82
90
  margin-top: var(--seed-suffix-icon-margin-top, 0);
@@ -12050,20 +12058,42 @@
12050
12058
  --tag-group-item-overflow: hidden;
12051
12059
  --tag-group-item-text-overflow: ellipsis;
12052
12060
  --tag-group-item-white-space: nowrap;
12061
+ --tag-group-item-align-items: baseline;
12053
12062
  align-items: center;
12054
12063
  max-width: 100%;
12055
12064
  display: inline-flex;
12056
12065
  }
12057
12066
 
12067
+ .seed-tag-group__root--truncate_true .seed-icon {
12068
+ top: var(--tag-group-item-icon-flex-offset, 0px);
12069
+ position: relative;
12070
+ }
12071
+
12072
+ .seed-tag-group__root--truncate_true .seed-prefix-icon {
12073
+ top: var(--tag-group-item-prefix-icon-flex-offset, 0px);
12074
+ position: relative;
12075
+ }
12076
+
12077
+ .seed-tag-group__root--truncate_true .seed-suffix-icon {
12078
+ top: var(--tag-group-item-suffix-icon-flex-offset, 0px);
12079
+ position: relative;
12080
+ }
12081
+
12058
12082
  .seed-tag-group__root--truncate_false {
12059
12083
  --tag-group-item-display: inline;
12060
12084
  --tag-group-item-overflow: visible;
12061
12085
  --tag-group-item-text-overflow: clip;
12062
12086
  --tag-group-item-white-space: normal;
12087
+ --tag-group-item-align-items: center;
12063
12088
  font-size: 0;
12064
12089
  display: inline-block;
12065
12090
  }
12066
12091
 
12092
+ .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 {
12093
+ top: var(--tag-group-item-inline-icon-offset, 0px);
12094
+ position: relative;
12095
+ }
12096
+
12067
12097
  .seed-tag-group__separator--truncate_false {
12068
12098
  vertical-align: middle;
12069
12099
  }
@@ -12082,9 +12112,9 @@
12082
12112
 
12083
12113
  .seed-tag-group-item__root {
12084
12114
  display: var(--tag-group-item-display);
12115
+ align-items: var(--tag-group-item-align-items, center);
12085
12116
  vertical-align: middle;
12086
12117
  flex-shrink: var(--seed-box-flex-shrink, 1);
12087
- align-items: center;
12088
12118
  min-width: 0;
12089
12119
  }
12090
12120
 
@@ -12107,9 +12137,25 @@
12107
12137
  }
12108
12138
 
12109
12139
  .seed-tag-group-item__root--size_t2 {
12140
+ --tag-group-item-inline-icon-offset: calc(.65em - var(--seed-line-height-t2) / 2);
12141
+ --tag-group-item-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .35em);
12142
+ --tag-group-item-prefix-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .35em);
12143
+ --tag-group-item-suffix-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .35em);
12144
+ --seed-icon-size: var(--seed-dimension-x3);
12145
+ --seed-icon-font-size: var(--seed-font-size-t2);
12110
12146
  --seed-prefix-icon-size: var(--seed-dimension-x3);
12147
+ --seed-prefix-icon-font-size: var(--seed-font-size-t2);
12111
12148
  --seed-suffix-icon-size: var(--seed-dimension-x3);
12112
- --seed-icon-size: var(--seed-dimension-x3);
12149
+ --seed-suffix-icon-font-size: var(--seed-font-size-t2);
12150
+ }
12151
+
12152
+ @supports (top: 1cap) {
12153
+ .seed-tag-group-item__root--size_t2 {
12154
+ --tag-group-item-inline-icon-offset: calc(1em - var(--seed-line-height-t2) / 2 - .5cap);
12155
+ --tag-group-item-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .5cap);
12156
+ --tag-group-item-prefix-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .5cap);
12157
+ --tag-group-item-suffix-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .5cap);
12158
+ }
12113
12159
  }
12114
12160
 
12115
12161
  .seed-tag-group-item__label--size_t2 {
@@ -12118,9 +12164,25 @@
12118
12164
  }
12119
12165
 
12120
12166
  .seed-tag-group-item__root--size_t3 {
12167
+ --tag-group-item-inline-icon-offset: calc(.65em - var(--seed-line-height-t3) / 2);
12168
+ --tag-group-item-icon-flex-offset: calc(13px / 2 - .35em);
12169
+ --tag-group-item-prefix-icon-flex-offset: calc(13px / 2 - .35em);
12170
+ --tag-group-item-suffix-icon-flex-offset: calc(13px / 2 - .35em);
12171
+ --seed-icon-size: 13px;
12172
+ --seed-icon-font-size: var(--seed-font-size-t3);
12121
12173
  --seed-prefix-icon-size: 13px;
12174
+ --seed-prefix-icon-font-size: var(--seed-font-size-t3);
12122
12175
  --seed-suffix-icon-size: 13px;
12123
- --seed-icon-size: 13px;
12176
+ --seed-suffix-icon-font-size: var(--seed-font-size-t3);
12177
+ }
12178
+
12179
+ @supports (top: 1cap) {
12180
+ .seed-tag-group-item__root--size_t3 {
12181
+ --tag-group-item-inline-icon-offset: calc(1em - var(--seed-line-height-t3) / 2 - .5cap);
12182
+ --tag-group-item-icon-flex-offset: calc(13px / 2 - .5cap);
12183
+ --tag-group-item-prefix-icon-flex-offset: calc(13px / 2 - .5cap);
12184
+ --tag-group-item-suffix-icon-flex-offset: calc(13px / 2 - .5cap);
12185
+ }
12124
12186
  }
12125
12187
 
12126
12188
  .seed-tag-group-item__label--size_t3 {
@@ -12129,9 +12191,25 @@
12129
12191
  }
12130
12192
 
12131
12193
  .seed-tag-group-item__root--size_t4 {
12194
+ --tag-group-item-inline-icon-offset: calc(.65em - var(--seed-line-height-t4) / 2);
12195
+ --tag-group-item-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .35em);
12196
+ --tag-group-item-prefix-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .35em);
12197
+ --tag-group-item-suffix-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .35em);
12198
+ --seed-icon-size: var(--seed-dimension-x3_5);
12199
+ --seed-icon-font-size: var(--seed-font-size-t4);
12132
12200
  --seed-prefix-icon-size: var(--seed-dimension-x3_5);
12201
+ --seed-prefix-icon-font-size: var(--seed-font-size-t4);
12133
12202
  --seed-suffix-icon-size: var(--seed-dimension-x3_5);
12134
- --seed-icon-size: var(--seed-dimension-x3_5);
12203
+ --seed-suffix-icon-font-size: var(--seed-font-size-t4);
12204
+ }
12205
+
12206
+ @supports (top: 1cap) {
12207
+ .seed-tag-group-item__root--size_t4 {
12208
+ --tag-group-item-inline-icon-offset: calc(1em - var(--seed-line-height-t4) / 2 - .5cap);
12209
+ --tag-group-item-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .5cap);
12210
+ --tag-group-item-prefix-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .5cap);
12211
+ --tag-group-item-suffix-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .5cap);
12212
+ }
12135
12213
  }
12136
12214
 
12137
12215
  .seed-tag-group-item__label--size_t4 {
@@ -12139,10 +12217,22 @@
12139
12217
  line-height: var(--seed-line-height-t4);
12140
12218
  }
12141
12219
 
12220
+ .seed-tag-group-item__root--weight_regular {
12221
+ --seed-icon-font-weight: var(--seed-font-weight-regular);
12222
+ --seed-prefix-icon-font-weight: var(--seed-font-weight-regular);
12223
+ --seed-suffix-icon-font-weight: var(--seed-font-weight-regular);
12224
+ }
12225
+
12142
12226
  .seed-tag-group-item__label--weight_regular {
12143
12227
  font-weight: var(--seed-font-weight-regular);
12144
12228
  }
12145
12229
 
12230
+ .seed-tag-group-item__root--weight_bold {
12231
+ --seed-icon-font-weight: var(--seed-font-weight-bold);
12232
+ --seed-prefix-icon-font-weight: var(--seed-font-weight-bold);
12233
+ --seed-suffix-icon-font-weight: var(--seed-font-weight-bold);
12234
+ }
12235
+
12146
12236
  .seed-tag-group-item__label--weight_bold {
12147
12237
  font-weight: var(--seed-font-weight-bold);
12148
12238
  }
@@ -13643,6 +13733,7 @@
13643
13733
  scroll-snap-align: center;
13644
13734
  -webkit-user-select: none;
13645
13735
  user-select: none;
13736
+ outline-color: #0000;
13646
13737
  display: flex;
13647
13738
  }
13648
13739
 
@@ -13747,6 +13838,7 @@
13747
13838
  scroll-snap-align: center;
13748
13839
  -webkit-user-select: none;
13749
13840
  user-select: none;
13841
+ outline-color: #0000;
13750
13842
  justify-content: center;
13751
13843
  align-items: center;
13752
13844
  display: flex;