@seed-design/css 2.9.0 → 2.9.2

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 (28) hide show
  1. package/all.css +39 -16
  2. package/all.layered.css +39 -16
  3. package/all.layered.min.css +1 -1
  4. package/all.min.css +1 -1
  5. package/package.json +1 -1
  6. package/recipes/bottom-sheet.css +4 -0
  7. package/recipes/bottom-sheet.layered.css +5 -1
  8. package/recipes/content-dialog.css +10 -6
  9. package/recipes/content-dialog.layered.css +10 -6
  10. package/recipes/dialog.css +6 -0
  11. package/recipes/dialog.layered.css +6 -0
  12. package/recipes/menu-sheet.css +5 -0
  13. package/recipes/menu-sheet.layered.css +5 -0
  14. package/recipes/side-panel.css +10 -6
  15. package/recipes/side-panel.layered.css +10 -6
  16. package/recipes/snackbar-region.css +3 -3
  17. package/recipes/snackbar-region.layered.css +3 -3
  18. package/vars/component/alert-dialog.d.ts +2 -0
  19. package/vars/component/bottom-sheet.d.ts +3 -0
  20. package/vars/component/bottom-sheet.mjs +1 -0
  21. package/vars/component/dialog.d.ts +6 -2
  22. package/vars/component/help-bubble.d.ts +2 -1
  23. package/vars/component/menu-sheet.d.ts +5 -0
  24. package/vars/component/menu-sheet.mjs +1 -0
  25. package/vars/component/menu.d.ts +2 -1
  26. package/vars/component/select.d.ts +2 -1
  27. package/vars/component/side-panel.d.ts +10 -7
  28. package/vars/component/snackbar.d.ts +1 -0
package/all.css CHANGED
@@ -2848,6 +2848,8 @@
2848
2848
 
2849
2849
  .seed-bottom-sheet__positioner {
2850
2850
  overscroll-behavior-y: none;
2851
+ padding-left: var(--seed-safe-area-left);
2852
+ padding-right: var(--seed-safe-area-right);
2851
2853
  --sheet-z-index: 2;
2852
2854
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
2853
2855
  justify-content: center;
@@ -2877,9 +2879,10 @@
2877
2879
  word-break: break-all;
2878
2880
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
2879
2881
  background: var(--seed-color-bg-layer-floating);
2882
+ max-width: 480px;
2883
+ max-height: min(.9 * 100%, 100% - var(--seed-safe-area-top));
2880
2884
  border-top-left-radius: var(--seed-radius-r6);
2881
2885
  border-top-right-radius: var(--seed-radius-r6);
2882
- max-width: 480px;
2883
2886
  padding-bottom: var(--seed-safe-area-bottom);
2884
2887
  touch-action: none;
2885
2888
  will-change: transform;
@@ -2974,6 +2977,7 @@
2974
2977
  align-items: var(--seed-box-align-items);
2975
2978
  flex-direction: column;
2976
2979
  display: flex;
2980
+ overflow-y: auto;
2977
2981
  }
2978
2982
 
2979
2983
  .seed-bottom-sheet__footer {
@@ -4168,6 +4172,10 @@
4168
4172
 
4169
4173
  .seed-content-dialog__positioner {
4170
4174
  overscroll-behavior-y: none;
4175
+ padding-top: max(var(--seed-safe-area-top), var(--seed-safe-area-bottom));
4176
+ padding-right: var(--seed-safe-area-right);
4177
+ padding-bottom: max(var(--seed-safe-area-top), var(--seed-safe-area-bottom));
4178
+ padding-left: var(--seed-safe-area-left);
4171
4179
  --dialog-z-index: 2;
4172
4180
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
4173
4181
  justify-content: center;
@@ -4211,7 +4219,7 @@
4211
4219
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
4212
4220
  background: var(--seed-color-bg-layer-floating);
4213
4221
  border-radius: var(--seed-radius-r5);
4214
- --content-dialog-default-width: calc(.9 * 100vw);
4222
+ --content-dialog-default-width: calc(.9 * (100vw - var(--seed-safe-area-left) - var(--seed-safe-area-right)));
4215
4223
  --content-dialog-default-max-width: calc(.9 * 100%);
4216
4224
  --seed-box-width-base: var(--content-dialog-default-width);
4217
4225
  --seed-box-width-sm: var(--seed-box-width-base, initial);
@@ -4225,13 +4233,13 @@
4225
4233
  --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
4226
4234
  --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
4227
4235
  --seed-box-max-width: var(--seed-box-max-width-base, initial);
4228
- width: var(--seed-box-width);
4229
- max-width: var(--seed-box-max-width);
4230
- max-height: 80vh;
4236
+ width: min(var(--seed-box-width), 100%);
4237
+ max-width: min(var(--seed-box-max-width), 100%);
4238
+ max-height: min(80vh, 100%);
4231
4239
  outline: none;
4232
4240
  flex-direction: column;
4233
4241
  flex: none;
4234
- max-height: 80dvh;
4242
+ max-height: min(80dvh, 100%);
4235
4243
  display: flex;
4236
4244
  position: relative;
4237
4245
  }
@@ -4239,7 +4247,7 @@
4239
4247
  @media (min-width: 768px) {
4240
4248
  .seed-content-dialog__content {
4241
4249
  --content-dialog-default-width: var(--content-dialog-size-width);
4242
- --content-dialog-default-max-width: calc(100vw - 2 * var(--seed-dimension-x5));
4250
+ --content-dialog-default-max-width: calc(100vw - 2 * var(--seed-dimension-x5) - var(--seed-safe-area-left) - var(--seed-safe-area-right));
4243
4251
  }
4244
4252
  }
4245
4253
 
@@ -5153,6 +5161,10 @@
5153
5161
 
5154
5162
  .seed-dialog__positioner {
5155
5163
  overscroll-behavior-y: none;
5164
+ padding-top: max(var(--seed-safe-area-top), var(--seed-safe-area-bottom));
5165
+ padding-right: var(--seed-safe-area-right);
5166
+ padding-bottom: max(var(--seed-safe-area-top), var(--seed-safe-area-bottom));
5167
+ padding-left: var(--seed-safe-area-left);
5156
5168
  --dialog-z-index: 2;
5157
5169
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
5158
5170
  justify-content: center;
@@ -5175,6 +5187,7 @@
5175
5187
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
5176
5188
  background: var(--seed-color-bg-layer-floating);
5177
5189
  max-width: 272px;
5190
+ max-height: 100%;
5178
5191
  margin: auto var(--seed-dimension-x8);
5179
5192
  border-radius: var(--seed-radius-r5);
5180
5193
  outline: none;
@@ -5182,6 +5195,7 @@
5182
5195
  flex: 1;
5183
5196
  display: flex;
5184
5197
  position: relative;
5198
+ overflow-y: auto;
5185
5199
  }
5186
5200
 
5187
5201
  .seed-dialog__content:is(:focus, [data-focus]) {
@@ -7797,6 +7811,8 @@
7797
7811
 
7798
7812
  .seed-menu-sheet__positioner {
7799
7813
  overscroll-behavior-y: none;
7814
+ padding-left: var(--seed-safe-area-left);
7815
+ padding-right: var(--seed-safe-area-right);
7800
7816
  --sheet-z-index: 2;
7801
7817
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
7802
7818
  justify-content: center;
@@ -7819,6 +7835,7 @@
7819
7835
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
7820
7836
  background: var(--seed-color-bg-layer-floating);
7821
7837
  max-width: 480px;
7838
+ max-height: min(.9 * 100%, 100% - var(--seed-safe-area-top));
7822
7839
  padding-inline: var(--seed-dimension-spacing-x-global-gutter);
7823
7840
  padding-top: var(--menu-sheet-header-padding-top, var(--seed-dimension-x4));
7824
7841
  padding-bottom: calc(var(--seed-dimension-x4) + var(--seed-safe-area-bottom));
@@ -7881,11 +7898,13 @@
7881
7898
  gap: var(--seed-dimension-x2_5);
7882
7899
  flex-direction: column;
7883
7900
  display: flex;
7901
+ overflow-y: auto;
7884
7902
  }
7885
7903
 
7886
7904
  .seed-menu-sheet__group {
7887
7905
  border-radius: var(--seed-radius-r4);
7888
7906
  flex-direction: column;
7907
+ flex-shrink: 0;
7889
7908
  align-items: stretch;
7890
7909
  display: flex;
7891
7910
  overflow: hidden;
@@ -10637,21 +10656,19 @@
10637
10656
  background: var(--seed-color-bg-layer-floating);
10638
10657
  touch-action: none;
10639
10658
  will-change: transform;
10640
- --side-panel-default-width: calc(.8 * 100vw);
10659
+ --side-panel-default-width: calc(.8 * (100vw - var(--seed-safe-area-left) - var(--seed-safe-area-right)));
10641
10660
  --seed-box-width-base: var(--side-panel-default-width);
10642
10661
  --seed-box-width-sm: var(--seed-box-width-base, initial);
10643
10662
  --seed-box-width-md: var(--seed-box-width-sm, initial);
10644
10663
  --seed-box-width-lg: var(--seed-box-width-md, initial);
10645
10664
  --seed-box-width-xl: var(--seed-box-width-lg, initial);
10646
10665
  --seed-box-width: var(--seed-box-width-base, initial);
10647
- --seed-box-max-width-base: calc(.8 * 100%);
10666
+ --seed-box-max-width-base: calc(.8 * (100% - var(--seed-safe-area-left) - var(--seed-safe-area-right)));
10648
10667
  --seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
10649
10668
  --seed-box-max-width-md: var(--seed-box-max-width-sm, initial);
10650
10669
  --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
10651
10670
  --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
10652
10671
  --seed-box-max-width: var(--seed-box-max-width-base, initial);
10653
- width: var(--seed-box-width);
10654
- max-width: var(--seed-box-max-width);
10655
10672
  padding-bottom: var(--seed-safe-area-bottom);
10656
10673
  flex-direction: column;
10657
10674
  display: flex;
@@ -10679,7 +10696,10 @@
10679
10696
  }
10680
10697
 
10681
10698
  .seed-side-panel__content[data-drawer-direction="left"] {
10682
- padding-left: env(safe-area-inset-left, 0);
10699
+ width: calc(var(--seed-box-width) + var(--seed-safe-area-left));
10700
+ max-width: calc(var(--seed-box-max-width) + var(--seed-safe-area-left));
10701
+ padding-left: var(--seed-safe-area-left);
10702
+ padding-right: max(0px, var(--seed-safe-area-right) - (100% - var(--seed-safe-area-left) - min(var(--seed-box-width), var(--seed-box-max-width))));
10683
10703
  left: 0;
10684
10704
  }
10685
10705
 
@@ -10688,7 +10708,10 @@
10688
10708
  }
10689
10709
 
10690
10710
  .seed-side-panel__content[data-drawer-direction="right"] {
10691
- padding-right: env(safe-area-inset-right, 0);
10711
+ width: calc(var(--seed-box-width) + var(--seed-safe-area-right));
10712
+ max-width: calc(var(--seed-box-max-width) + var(--seed-safe-area-right));
10713
+ padding-right: var(--seed-safe-area-right);
10714
+ padding-left: max(0px, var(--seed-safe-area-left) - (100% - var(--seed-safe-area-right) - min(var(--seed-box-width), var(--seed-box-max-width))));
10692
10715
  right: 0;
10693
10716
  }
10694
10717
 
@@ -11407,9 +11430,9 @@
11407
11430
 
11408
11431
  .seed-snackbar-region {
11409
11432
  z-index: 2147483647;
11410
- left: calc(env(safe-area-inset-left, 0px));
11411
- right: calc(env(safe-area-inset-right, 0px));
11412
- bottom: calc(env(safe-area-inset-bottom, 0px) + var(--snackbar-region-offset, 0px));
11433
+ left: var(--seed-safe-area-left);
11434
+ right: var(--seed-safe-area-right);
11435
+ bottom: calc(var(--seed-safe-area-bottom) + var(--snackbar-region-offset, 0px));
11413
11436
  padding-inline: var(--seed-dimension-x2);
11414
11437
  padding-block: var(--seed-dimension-x2);
11415
11438
  transition-property: bottom;
package/all.layered.css CHANGED
@@ -3097,6 +3097,8 @@
3097
3097
 
3098
3098
  .seed-bottom-sheet__positioner {
3099
3099
  overscroll-behavior-y: none;
3100
+ padding-left: var(--seed-safe-area-left);
3101
+ padding-right: var(--seed-safe-area-right);
3100
3102
  --sheet-z-index: 2;
3101
3103
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
3102
3104
  justify-content: center;
@@ -3126,9 +3128,10 @@
3126
3128
  word-break: break-all;
3127
3129
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
3128
3130
  background: var(--seed-color-bg-layer-floating);
3131
+ max-width: 480px;
3132
+ max-height: min(.9 * 100%, 100% - var(--seed-safe-area-top));
3129
3133
  border-top-left-radius: var(--seed-radius-r6);
3130
3134
  border-top-right-radius: var(--seed-radius-r6);
3131
- max-width: 480px;
3132
3135
  padding-bottom: var(--seed-safe-area-bottom);
3133
3136
  touch-action: none;
3134
3137
  will-change: transform;
@@ -3223,6 +3226,7 @@
3223
3226
  align-items: var(--seed-box-align-items);
3224
3227
  flex-direction: column;
3225
3228
  display: flex;
3229
+ overflow-y: auto;
3226
3230
  }
3227
3231
 
3228
3232
  .seed-bottom-sheet__footer {
@@ -4417,6 +4421,10 @@
4417
4421
 
4418
4422
  .seed-content-dialog__positioner {
4419
4423
  overscroll-behavior-y: none;
4424
+ padding-top: max(var(--seed-safe-area-top), var(--seed-safe-area-bottom));
4425
+ padding-right: var(--seed-safe-area-right);
4426
+ padding-bottom: max(var(--seed-safe-area-top), var(--seed-safe-area-bottom));
4427
+ padding-left: var(--seed-safe-area-left);
4420
4428
  --dialog-z-index: 2;
4421
4429
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
4422
4430
  justify-content: center;
@@ -4460,7 +4468,7 @@
4460
4468
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
4461
4469
  background: var(--seed-color-bg-layer-floating);
4462
4470
  border-radius: var(--seed-radius-r5);
4463
- --content-dialog-default-width: calc(.9 * 100vw);
4471
+ --content-dialog-default-width: calc(.9 * (100vw - var(--seed-safe-area-left) - var(--seed-safe-area-right)));
4464
4472
  --content-dialog-default-max-width: calc(.9 * 100%);
4465
4473
  --seed-box-width-base: var(--content-dialog-default-width);
4466
4474
  --seed-box-width-sm: var(--seed-box-width-base, initial);
@@ -4474,13 +4482,13 @@
4474
4482
  --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
4475
4483
  --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
4476
4484
  --seed-box-max-width: var(--seed-box-max-width-base, initial);
4477
- width: var(--seed-box-width);
4478
- max-width: var(--seed-box-max-width);
4479
- max-height: 80vh;
4485
+ width: min(var(--seed-box-width), 100%);
4486
+ max-width: min(var(--seed-box-max-width), 100%);
4487
+ max-height: min(80vh, 100%);
4480
4488
  outline: none;
4481
4489
  flex-direction: column;
4482
4490
  flex: none;
4483
- max-height: 80dvh;
4491
+ max-height: min(80dvh, 100%);
4484
4492
  display: flex;
4485
4493
  position: relative;
4486
4494
  }
@@ -4488,7 +4496,7 @@
4488
4496
  @media (min-width: 768px) {
4489
4497
  .seed-content-dialog__content {
4490
4498
  --content-dialog-default-width: var(--content-dialog-size-width);
4491
- --content-dialog-default-max-width: calc(100vw - 2 * var(--seed-dimension-x5));
4499
+ --content-dialog-default-max-width: calc(100vw - 2 * var(--seed-dimension-x5) - var(--seed-safe-area-left) - var(--seed-safe-area-right));
4492
4500
  }
4493
4501
  }
4494
4502
 
@@ -5402,6 +5410,10 @@
5402
5410
 
5403
5411
  .seed-dialog__positioner {
5404
5412
  overscroll-behavior-y: none;
5413
+ padding-top: max(var(--seed-safe-area-top), var(--seed-safe-area-bottom));
5414
+ padding-right: var(--seed-safe-area-right);
5415
+ padding-bottom: max(var(--seed-safe-area-top), var(--seed-safe-area-bottom));
5416
+ padding-left: var(--seed-safe-area-left);
5405
5417
  --dialog-z-index: 2;
5406
5418
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
5407
5419
  justify-content: center;
@@ -5424,6 +5436,7 @@
5424
5436
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
5425
5437
  background: var(--seed-color-bg-layer-floating);
5426
5438
  max-width: 272px;
5439
+ max-height: 100%;
5427
5440
  margin: auto var(--seed-dimension-x8);
5428
5441
  border-radius: var(--seed-radius-r5);
5429
5442
  outline: none;
@@ -5431,6 +5444,7 @@
5431
5444
  flex: 1;
5432
5445
  display: flex;
5433
5446
  position: relative;
5447
+ overflow-y: auto;
5434
5448
  }
5435
5449
 
5436
5450
  .seed-dialog__content:is(:focus, [data-focus]) {
@@ -8046,6 +8060,8 @@
8046
8060
 
8047
8061
  .seed-menu-sheet__positioner {
8048
8062
  overscroll-behavior-y: none;
8063
+ padding-left: var(--seed-safe-area-left);
8064
+ padding-right: var(--seed-safe-area-right);
8049
8065
  --sheet-z-index: 2;
8050
8066
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
8051
8067
  justify-content: center;
@@ -8068,6 +8084,7 @@
8068
8084
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
8069
8085
  background: var(--seed-color-bg-layer-floating);
8070
8086
  max-width: 480px;
8087
+ max-height: min(.9 * 100%, 100% - var(--seed-safe-area-top));
8071
8088
  padding-inline: var(--seed-dimension-spacing-x-global-gutter);
8072
8089
  padding-top: var(--menu-sheet-header-padding-top, var(--seed-dimension-x4));
8073
8090
  padding-bottom: calc(var(--seed-dimension-x4) + var(--seed-safe-area-bottom));
@@ -8130,11 +8147,13 @@
8130
8147
  gap: var(--seed-dimension-x2_5);
8131
8148
  flex-direction: column;
8132
8149
  display: flex;
8150
+ overflow-y: auto;
8133
8151
  }
8134
8152
 
8135
8153
  .seed-menu-sheet__group {
8136
8154
  border-radius: var(--seed-radius-r4);
8137
8155
  flex-direction: column;
8156
+ flex-shrink: 0;
8138
8157
  align-items: stretch;
8139
8158
  display: flex;
8140
8159
  overflow: hidden;
@@ -10886,21 +10905,19 @@
10886
10905
  background: var(--seed-color-bg-layer-floating);
10887
10906
  touch-action: none;
10888
10907
  will-change: transform;
10889
- --side-panel-default-width: calc(.8 * 100vw);
10908
+ --side-panel-default-width: calc(.8 * (100vw - var(--seed-safe-area-left) - var(--seed-safe-area-right)));
10890
10909
  --seed-box-width-base: var(--side-panel-default-width);
10891
10910
  --seed-box-width-sm: var(--seed-box-width-base, initial);
10892
10911
  --seed-box-width-md: var(--seed-box-width-sm, initial);
10893
10912
  --seed-box-width-lg: var(--seed-box-width-md, initial);
10894
10913
  --seed-box-width-xl: var(--seed-box-width-lg, initial);
10895
10914
  --seed-box-width: var(--seed-box-width-base, initial);
10896
- --seed-box-max-width-base: calc(.8 * 100%);
10915
+ --seed-box-max-width-base: calc(.8 * (100% - var(--seed-safe-area-left) - var(--seed-safe-area-right)));
10897
10916
  --seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
10898
10917
  --seed-box-max-width-md: var(--seed-box-max-width-sm, initial);
10899
10918
  --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
10900
10919
  --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
10901
10920
  --seed-box-max-width: var(--seed-box-max-width-base, initial);
10902
- width: var(--seed-box-width);
10903
- max-width: var(--seed-box-max-width);
10904
10921
  padding-bottom: var(--seed-safe-area-bottom);
10905
10922
  flex-direction: column;
10906
10923
  display: flex;
@@ -10928,7 +10945,10 @@
10928
10945
  }
10929
10946
 
10930
10947
  .seed-side-panel__content[data-drawer-direction="left"] {
10931
- padding-left: env(safe-area-inset-left, 0);
10948
+ width: calc(var(--seed-box-width) + var(--seed-safe-area-left));
10949
+ max-width: calc(var(--seed-box-max-width) + var(--seed-safe-area-left));
10950
+ padding-left: var(--seed-safe-area-left);
10951
+ padding-right: max(0px, var(--seed-safe-area-right) - (100% - var(--seed-safe-area-left) - min(var(--seed-box-width), var(--seed-box-max-width))));
10932
10952
  left: 0;
10933
10953
  }
10934
10954
 
@@ -10937,7 +10957,10 @@
10937
10957
  }
10938
10958
 
10939
10959
  .seed-side-panel__content[data-drawer-direction="right"] {
10940
- padding-right: env(safe-area-inset-right, 0);
10960
+ width: calc(var(--seed-box-width) + var(--seed-safe-area-right));
10961
+ max-width: calc(var(--seed-box-max-width) + var(--seed-safe-area-right));
10962
+ padding-right: var(--seed-safe-area-right);
10963
+ padding-left: max(0px, var(--seed-safe-area-left) - (100% - var(--seed-safe-area-right) - min(var(--seed-box-width), var(--seed-box-max-width))));
10941
10964
  right: 0;
10942
10965
  }
10943
10966
 
@@ -11656,9 +11679,9 @@
11656
11679
 
11657
11680
  .seed-snackbar-region {
11658
11681
  z-index: 2147483647;
11659
- left: calc(env(safe-area-inset-left, 0px));
11660
- right: calc(env(safe-area-inset-right, 0px));
11661
- bottom: calc(env(safe-area-inset-bottom, 0px) + var(--snackbar-region-offset, 0px));
11682
+ left: var(--seed-safe-area-left);
11683
+ right: var(--seed-safe-area-right);
11684
+ bottom: calc(var(--seed-safe-area-bottom) + var(--snackbar-region-offset, 0px));
11662
11685
  padding-inline: var(--seed-dimension-x2);
11663
11686
  padding-block: var(--seed-dimension-x2);
11664
11687
  transition-property: bottom;