@seed-design/css 2.8.3 → 2.9.1

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 (40) hide show
  1. package/all.css +58 -26
  2. package/all.layered.css +58 -26
  3. package/base.css +6 -0
  4. package/base.layered.css +6 -0
  5. package/package.json +1 -1
  6. package/recipes/app-bar-main.css +2 -1
  7. package/recipes/app-bar-main.layered.css +2 -1
  8. package/recipes/app-bar.css +5 -3
  9. package/recipes/app-bar.layered.css +5 -3
  10. package/recipes/app-screen.css +5 -1
  11. package/recipes/app-screen.layered.css +6 -6
  12. package/recipes/bottom-sheet.css +4 -0
  13. package/recipes/bottom-sheet.layered.css +5 -1
  14. package/recipes/content-dialog.css +10 -6
  15. package/recipes/content-dialog.layered.css +10 -6
  16. package/recipes/dialog.css +6 -0
  17. package/recipes/dialog.layered.css +6 -0
  18. package/recipes/menu-sheet.css +5 -0
  19. package/recipes/menu-sheet.layered.css +5 -0
  20. package/recipes/side-panel.css +10 -6
  21. package/recipes/side-panel.layered.css +10 -6
  22. package/recipes/snackbar-region.css +3 -3
  23. package/recipes/snackbar-region.layered.css +3 -3
  24. package/vars/component/alert-dialog.d.ts +2 -0
  25. package/vars/component/bottom-sheet.d.ts +3 -0
  26. package/vars/component/bottom-sheet.mjs +1 -0
  27. package/vars/component/dialog.d.ts +6 -2
  28. package/vars/component/help-bubble.d.ts +2 -1
  29. package/vars/component/menu-sheet.d.ts +5 -0
  30. package/vars/component/menu-sheet.mjs +1 -0
  31. package/vars/component/menu.d.ts +2 -1
  32. package/vars/component/select.d.ts +2 -1
  33. package/vars/component/side-panel.d.ts +10 -7
  34. package/vars/component/snackbar.d.ts +1 -0
  35. package/vars/component/top-navigation.d.ts +1 -4
  36. package/vars/component/top-navigation.mjs +1 -4
  37. package/all.layered.min.css +0 -1
  38. package/all.min.css +0 -1
  39. package/base.layered.min.css +0 -1
  40. package/base.min.css +0 -1
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
 
@@ -2063,8 +2069,9 @@
2063
2069
  }
2064
2070
 
2065
2071
  .seed-app-bar__root--theme_cupertino {
2066
- height: calc(44px + var(--seed-safe-area-top));
2067
- 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));
2068
2075
  padding-top: var(--seed-safe-area-top);
2069
2076
  }
2070
2077
 
@@ -2088,7 +2095,8 @@
2088
2095
 
2089
2096
  .seed-app-bar__root--theme_android {
2090
2097
  height: calc(56px + var(--seed-safe-area-top));
2091
- 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));
2092
2100
  padding-top: var(--seed-safe-area-top);
2093
2101
  }
2094
2102
 
@@ -2162,7 +2170,8 @@
2162
2170
  text-align: center;
2163
2171
  top: var(--seed-safe-area-top);
2164
2172
  bottom: 0;
2165
- 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));
2166
2175
  pointer-events: none;
2167
2176
  justify-content: center;
2168
2177
  align-items: center;
@@ -2212,9 +2221,11 @@
2212
2221
  .seed-app-screen__layer {
2213
2222
  z-index: var(--z-index-layer);
2214
2223
  box-sizing: border-box;
2215
- -webkit-overflow-scrolling: touch;
2216
2224
  width: 100%;
2217
2225
  height: 100%;
2226
+ padding-left: var(--seed-safe-area-left);
2227
+ padding-right: var(--seed-safe-area-right);
2228
+ -webkit-overflow-scrolling: touch;
2218
2229
  position: absolute;
2219
2230
  inset-inline: 0;
2220
2231
  overflow-y: scroll;
@@ -2240,11 +2251,7 @@
2240
2251
  inset-inline: 0;
2241
2252
  }
2242
2253
 
2243
- .seed-app-screen__root--theme_cupertino {
2244
- --app-bar-height: 44px;
2245
- }
2246
-
2247
- .seed-app-screen__root--theme_android {
2254
+ .seed-app-screen__root--theme_cupertino, .seed-app-screen__root--theme_android {
2248
2255
  --app-bar-height: 56px;
2249
2256
  }
2250
2257
 
@@ -2311,6 +2318,8 @@
2311
2318
  content: "";
2312
2319
  inset-inline: 0;
2313
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));
2314
2323
  height: calc(66px + 400px + var(--seed-safe-area-top));
2315
2324
  pointer-events: none;
2316
2325
  z-index: 1;
@@ -2839,6 +2848,8 @@
2839
2848
 
2840
2849
  .seed-bottom-sheet__positioner {
2841
2850
  overscroll-behavior-y: none;
2851
+ padding-left: var(--seed-safe-area-left);
2852
+ padding-right: var(--seed-safe-area-right);
2842
2853
  --sheet-z-index: 2;
2843
2854
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
2844
2855
  justify-content: center;
@@ -2868,9 +2879,10 @@
2868
2879
  word-break: break-all;
2869
2880
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
2870
2881
  background: var(--seed-color-bg-layer-floating);
2882
+ max-width: 480px;
2883
+ max-height: min(.9 * 100%, 100% - var(--seed-safe-area-top));
2871
2884
  border-top-left-radius: var(--seed-radius-r6);
2872
2885
  border-top-right-radius: var(--seed-radius-r6);
2873
- max-width: 480px;
2874
2886
  padding-bottom: var(--seed-safe-area-bottom);
2875
2887
  touch-action: none;
2876
2888
  will-change: transform;
@@ -2965,6 +2977,7 @@
2965
2977
  align-items: var(--seed-box-align-items);
2966
2978
  flex-direction: column;
2967
2979
  display: flex;
2980
+ overflow-y: auto;
2968
2981
  }
2969
2982
 
2970
2983
  .seed-bottom-sheet__footer {
@@ -4159,6 +4172,10 @@
4159
4172
 
4160
4173
  .seed-content-dialog__positioner {
4161
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);
4162
4179
  --dialog-z-index: 2;
4163
4180
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
4164
4181
  justify-content: center;
@@ -4202,7 +4219,7 @@
4202
4219
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
4203
4220
  background: var(--seed-color-bg-layer-floating);
4204
4221
  border-radius: var(--seed-radius-r5);
4205
- --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)));
4206
4223
  --content-dialog-default-max-width: calc(.9 * 100%);
4207
4224
  --seed-box-width-base: var(--content-dialog-default-width);
4208
4225
  --seed-box-width-sm: var(--seed-box-width-base, initial);
@@ -4216,13 +4233,13 @@
4216
4233
  --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
4217
4234
  --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
4218
4235
  --seed-box-max-width: var(--seed-box-max-width-base, initial);
4219
- width: var(--seed-box-width);
4220
- max-width: var(--seed-box-max-width);
4221
- 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%);
4222
4239
  outline: none;
4223
4240
  flex-direction: column;
4224
4241
  flex: none;
4225
- max-height: 80dvh;
4242
+ max-height: min(80dvh, 100%);
4226
4243
  display: flex;
4227
4244
  position: relative;
4228
4245
  }
@@ -4230,7 +4247,7 @@
4230
4247
  @media (min-width: 768px) {
4231
4248
  .seed-content-dialog__content {
4232
4249
  --content-dialog-default-width: var(--content-dialog-size-width);
4233
- --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));
4234
4251
  }
4235
4252
  }
4236
4253
 
@@ -5144,6 +5161,10 @@
5144
5161
 
5145
5162
  .seed-dialog__positioner {
5146
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);
5147
5168
  --dialog-z-index: 2;
5148
5169
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
5149
5170
  justify-content: center;
@@ -5166,6 +5187,7 @@
5166
5187
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
5167
5188
  background: var(--seed-color-bg-layer-floating);
5168
5189
  max-width: 272px;
5190
+ max-height: 100%;
5169
5191
  margin: auto var(--seed-dimension-x8);
5170
5192
  border-radius: var(--seed-radius-r5);
5171
5193
  outline: none;
@@ -5173,6 +5195,7 @@
5173
5195
  flex: 1;
5174
5196
  display: flex;
5175
5197
  position: relative;
5198
+ overflow-y: auto;
5176
5199
  }
5177
5200
 
5178
5201
  .seed-dialog__content:is(:focus, [data-focus]) {
@@ -7788,6 +7811,8 @@
7788
7811
 
7789
7812
  .seed-menu-sheet__positioner {
7790
7813
  overscroll-behavior-y: none;
7814
+ padding-left: var(--seed-safe-area-left);
7815
+ padding-right: var(--seed-safe-area-right);
7791
7816
  --sheet-z-index: 2;
7792
7817
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
7793
7818
  justify-content: center;
@@ -7810,6 +7835,7 @@
7810
7835
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
7811
7836
  background: var(--seed-color-bg-layer-floating);
7812
7837
  max-width: 480px;
7838
+ max-height: min(.9 * 100%, 100% - var(--seed-safe-area-top));
7813
7839
  padding-inline: var(--seed-dimension-spacing-x-global-gutter);
7814
7840
  padding-top: var(--menu-sheet-header-padding-top, var(--seed-dimension-x4));
7815
7841
  padding-bottom: calc(var(--seed-dimension-x4) + var(--seed-safe-area-bottom));
@@ -7872,11 +7898,13 @@
7872
7898
  gap: var(--seed-dimension-x2_5);
7873
7899
  flex-direction: column;
7874
7900
  display: flex;
7901
+ overflow-y: auto;
7875
7902
  }
7876
7903
 
7877
7904
  .seed-menu-sheet__group {
7878
7905
  border-radius: var(--seed-radius-r4);
7879
7906
  flex-direction: column;
7907
+ flex-shrink: 0;
7880
7908
  align-items: stretch;
7881
7909
  display: flex;
7882
7910
  overflow: hidden;
@@ -10628,21 +10656,19 @@
10628
10656
  background: var(--seed-color-bg-layer-floating);
10629
10657
  touch-action: none;
10630
10658
  will-change: transform;
10631
- --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)));
10632
10660
  --seed-box-width-base: var(--side-panel-default-width);
10633
10661
  --seed-box-width-sm: var(--seed-box-width-base, initial);
10634
10662
  --seed-box-width-md: var(--seed-box-width-sm, initial);
10635
10663
  --seed-box-width-lg: var(--seed-box-width-md, initial);
10636
10664
  --seed-box-width-xl: var(--seed-box-width-lg, initial);
10637
10665
  --seed-box-width: var(--seed-box-width-base, initial);
10638
- --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)));
10639
10667
  --seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
10640
10668
  --seed-box-max-width-md: var(--seed-box-max-width-sm, initial);
10641
10669
  --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
10642
10670
  --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
10643
10671
  --seed-box-max-width: var(--seed-box-max-width-base, initial);
10644
- width: var(--seed-box-width);
10645
- max-width: var(--seed-box-max-width);
10646
10672
  padding-bottom: var(--seed-safe-area-bottom);
10647
10673
  flex-direction: column;
10648
10674
  display: flex;
@@ -10670,7 +10696,10 @@
10670
10696
  }
10671
10697
 
10672
10698
  .seed-side-panel__content[data-drawer-direction="left"] {
10673
- 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))));
10674
10703
  left: 0;
10675
10704
  }
10676
10705
 
@@ -10679,7 +10708,10 @@
10679
10708
  }
10680
10709
 
10681
10710
  .seed-side-panel__content[data-drawer-direction="right"] {
10682
- 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))));
10683
10715
  right: 0;
10684
10716
  }
10685
10717
 
@@ -11398,9 +11430,9 @@
11398
11430
 
11399
11431
  .seed-snackbar-region {
11400
11432
  z-index: 2147483647;
11401
- left: calc(env(safe-area-inset-left, 0px));
11402
- right: calc(env(safe-area-inset-right, 0px));
11403
- 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));
11404
11436
  padding-inline: var(--seed-dimension-x2);
11405
11437
  padding-block: var(--seed-dimension-x2);
11406
11438
  transition-property: bottom;
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
 
@@ -2312,8 +2318,9 @@
2312
2318
  }
2313
2319
 
2314
2320
  .seed-app-bar__root--theme_cupertino {
2315
- height: calc(44px + var(--seed-safe-area-top));
2316
- 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));
2317
2324
  padding-top: var(--seed-safe-area-top);
2318
2325
  }
2319
2326
 
@@ -2337,7 +2344,8 @@
2337
2344
 
2338
2345
  .seed-app-bar__root--theme_android {
2339
2346
  height: calc(56px + var(--seed-safe-area-top));
2340
- 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));
2341
2349
  padding-top: var(--seed-safe-area-top);
2342
2350
  }
2343
2351
 
@@ -2411,7 +2419,8 @@
2411
2419
  text-align: center;
2412
2420
  top: var(--seed-safe-area-top);
2413
2421
  bottom: 0;
2414
- 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));
2415
2424
  pointer-events: none;
2416
2425
  justify-content: center;
2417
2426
  align-items: center;
@@ -2461,9 +2470,11 @@
2461
2470
  .seed-app-screen__layer {
2462
2471
  z-index: var(--z-index-layer);
2463
2472
  box-sizing: border-box;
2464
- -webkit-overflow-scrolling: touch;
2465
2473
  width: 100%;
2466
2474
  height: 100%;
2475
+ padding-left: var(--seed-safe-area-left);
2476
+ padding-right: var(--seed-safe-area-right);
2477
+ -webkit-overflow-scrolling: touch;
2467
2478
  position: absolute;
2468
2479
  inset-inline: 0;
2469
2480
  overflow-y: scroll;
@@ -2489,11 +2500,7 @@
2489
2500
  inset-inline: 0;
2490
2501
  }
2491
2502
 
2492
- .seed-app-screen__root--theme_cupertino {
2493
- --app-bar-height: 44px;
2494
- }
2495
-
2496
- .seed-app-screen__root--theme_android {
2503
+ .seed-app-screen__root--theme_cupertino, .seed-app-screen__root--theme_android {
2497
2504
  --app-bar-height: 56px;
2498
2505
  }
2499
2506
 
@@ -2560,6 +2567,8 @@
2560
2567
  content: "";
2561
2568
  inset-inline: 0;
2562
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));
2563
2572
  height: calc(66px + 400px + var(--seed-safe-area-top));
2564
2573
  pointer-events: none;
2565
2574
  z-index: 1;
@@ -3088,6 +3097,8 @@
3088
3097
 
3089
3098
  .seed-bottom-sheet__positioner {
3090
3099
  overscroll-behavior-y: none;
3100
+ padding-left: var(--seed-safe-area-left);
3101
+ padding-right: var(--seed-safe-area-right);
3091
3102
  --sheet-z-index: 2;
3092
3103
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
3093
3104
  justify-content: center;
@@ -3117,9 +3128,10 @@
3117
3128
  word-break: break-all;
3118
3129
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
3119
3130
  background: var(--seed-color-bg-layer-floating);
3131
+ max-width: 480px;
3132
+ max-height: min(.9 * 100%, 100% - var(--seed-safe-area-top));
3120
3133
  border-top-left-radius: var(--seed-radius-r6);
3121
3134
  border-top-right-radius: var(--seed-radius-r6);
3122
- max-width: 480px;
3123
3135
  padding-bottom: var(--seed-safe-area-bottom);
3124
3136
  touch-action: none;
3125
3137
  will-change: transform;
@@ -3214,6 +3226,7 @@
3214
3226
  align-items: var(--seed-box-align-items);
3215
3227
  flex-direction: column;
3216
3228
  display: flex;
3229
+ overflow-y: auto;
3217
3230
  }
3218
3231
 
3219
3232
  .seed-bottom-sheet__footer {
@@ -4408,6 +4421,10 @@
4408
4421
 
4409
4422
  .seed-content-dialog__positioner {
4410
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);
4411
4428
  --dialog-z-index: 2;
4412
4429
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
4413
4430
  justify-content: center;
@@ -4451,7 +4468,7 @@
4451
4468
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
4452
4469
  background: var(--seed-color-bg-layer-floating);
4453
4470
  border-radius: var(--seed-radius-r5);
4454
- --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)));
4455
4472
  --content-dialog-default-max-width: calc(.9 * 100%);
4456
4473
  --seed-box-width-base: var(--content-dialog-default-width);
4457
4474
  --seed-box-width-sm: var(--seed-box-width-base, initial);
@@ -4465,13 +4482,13 @@
4465
4482
  --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
4466
4483
  --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
4467
4484
  --seed-box-max-width: var(--seed-box-max-width-base, initial);
4468
- width: var(--seed-box-width);
4469
- max-width: var(--seed-box-max-width);
4470
- 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%);
4471
4488
  outline: none;
4472
4489
  flex-direction: column;
4473
4490
  flex: none;
4474
- max-height: 80dvh;
4491
+ max-height: min(80dvh, 100%);
4475
4492
  display: flex;
4476
4493
  position: relative;
4477
4494
  }
@@ -4479,7 +4496,7 @@
4479
4496
  @media (min-width: 768px) {
4480
4497
  .seed-content-dialog__content {
4481
4498
  --content-dialog-default-width: var(--content-dialog-size-width);
4482
- --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));
4483
4500
  }
4484
4501
  }
4485
4502
 
@@ -5393,6 +5410,10 @@
5393
5410
 
5394
5411
  .seed-dialog__positioner {
5395
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);
5396
5417
  --dialog-z-index: 2;
5397
5418
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
5398
5419
  justify-content: center;
@@ -5415,6 +5436,7 @@
5415
5436
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
5416
5437
  background: var(--seed-color-bg-layer-floating);
5417
5438
  max-width: 272px;
5439
+ max-height: 100%;
5418
5440
  margin: auto var(--seed-dimension-x8);
5419
5441
  border-radius: var(--seed-radius-r5);
5420
5442
  outline: none;
@@ -5422,6 +5444,7 @@
5422
5444
  flex: 1;
5423
5445
  display: flex;
5424
5446
  position: relative;
5447
+ overflow-y: auto;
5425
5448
  }
5426
5449
 
5427
5450
  .seed-dialog__content:is(:focus, [data-focus]) {
@@ -8037,6 +8060,8 @@
8037
8060
 
8038
8061
  .seed-menu-sheet__positioner {
8039
8062
  overscroll-behavior-y: none;
8063
+ padding-left: var(--seed-safe-area-left);
8064
+ padding-right: var(--seed-safe-area-right);
8040
8065
  --sheet-z-index: 2;
8041
8066
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
8042
8067
  justify-content: center;
@@ -8059,6 +8084,7 @@
8059
8084
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
8060
8085
  background: var(--seed-color-bg-layer-floating);
8061
8086
  max-width: 480px;
8087
+ max-height: min(.9 * 100%, 100% - var(--seed-safe-area-top));
8062
8088
  padding-inline: var(--seed-dimension-spacing-x-global-gutter);
8063
8089
  padding-top: var(--menu-sheet-header-padding-top, var(--seed-dimension-x4));
8064
8090
  padding-bottom: calc(var(--seed-dimension-x4) + var(--seed-safe-area-bottom));
@@ -8121,11 +8147,13 @@
8121
8147
  gap: var(--seed-dimension-x2_5);
8122
8148
  flex-direction: column;
8123
8149
  display: flex;
8150
+ overflow-y: auto;
8124
8151
  }
8125
8152
 
8126
8153
  .seed-menu-sheet__group {
8127
8154
  border-radius: var(--seed-radius-r4);
8128
8155
  flex-direction: column;
8156
+ flex-shrink: 0;
8129
8157
  align-items: stretch;
8130
8158
  display: flex;
8131
8159
  overflow: hidden;
@@ -10877,21 +10905,19 @@
10877
10905
  background: var(--seed-color-bg-layer-floating);
10878
10906
  touch-action: none;
10879
10907
  will-change: transform;
10880
- --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)));
10881
10909
  --seed-box-width-base: var(--side-panel-default-width);
10882
10910
  --seed-box-width-sm: var(--seed-box-width-base, initial);
10883
10911
  --seed-box-width-md: var(--seed-box-width-sm, initial);
10884
10912
  --seed-box-width-lg: var(--seed-box-width-md, initial);
10885
10913
  --seed-box-width-xl: var(--seed-box-width-lg, initial);
10886
10914
  --seed-box-width: var(--seed-box-width-base, initial);
10887
- --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)));
10888
10916
  --seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
10889
10917
  --seed-box-max-width-md: var(--seed-box-max-width-sm, initial);
10890
10918
  --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
10891
10919
  --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
10892
10920
  --seed-box-max-width: var(--seed-box-max-width-base, initial);
10893
- width: var(--seed-box-width);
10894
- max-width: var(--seed-box-max-width);
10895
10921
  padding-bottom: var(--seed-safe-area-bottom);
10896
10922
  flex-direction: column;
10897
10923
  display: flex;
@@ -10919,7 +10945,10 @@
10919
10945
  }
10920
10946
 
10921
10947
  .seed-side-panel__content[data-drawer-direction="left"] {
10922
- 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))));
10923
10952
  left: 0;
10924
10953
  }
10925
10954
 
@@ -10928,7 +10957,10 @@
10928
10957
  }
10929
10958
 
10930
10959
  .seed-side-panel__content[data-drawer-direction="right"] {
10931
- 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))));
10932
10964
  right: 0;
10933
10965
  }
10934
10966
 
@@ -11647,9 +11679,9 @@
11647
11679
 
11648
11680
  .seed-snackbar-region {
11649
11681
  z-index: 2147483647;
11650
- left: calc(env(safe-area-inset-left, 0px));
11651
- right: calc(env(safe-area-inset-right, 0px));
11652
- 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));
11653
11685
  padding-inline: var(--seed-dimension-x2);
11654
11686
  padding-block: var(--seed-dimension-x2);
11655
11687
  transition-property: bottom;
package/base.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
 
package/base.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
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/css",
3
- "version": "2.8.3",
3
+ "version": "2.9.1",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",
package/recipes/app-bar-main.css CHANGED
@@ -35,7 +35,8 @@
35
35
  top: var(--seed-safe-area-top);
36
36
  bottom: 0;
37
37
  inset-inline: 0;
38
- padding-inline: var(--centered-title-padding-x, 0);
38
+ 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));
39
+ 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));
39
40
  pointer-events: none
40
41
  }
41
42
  .seed-app-bar-main__root--theme_android {
package/recipes/app-bar-main.layered.css CHANGED
@@ -31,7 +31,8 @@
31
31
  text-align: center;
32
32
  top: var(--seed-safe-area-top);
33
33
  bottom: 0;
34
- padding-inline: var(--centered-title-padding-x, 0);
34
+ 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));
35
+ 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));
35
36
  pointer-events: none;
36
37
  justify-content: center;
37
38
  align-items: center;
package/recipes/app-bar.css CHANGED
@@ -46,8 +46,9 @@
46
46
  flex-shrink: 0;
47
47
  }
48
48
  .seed-app-bar__root--theme_cupertino {
49
- height: calc(44px + var(--seed-safe-area-top));
50
- padding-inline: var(--seed-dimension-x4);
49
+ height: calc(56px + var(--seed-safe-area-top));
50
+ padding-left: calc(var(--seed-dimension-x4) + var(--seed-safe-area-left));
51
+ padding-right: calc(var(--seed-dimension-x4) + var(--seed-safe-area-right));
51
52
  padding-top: var(--seed-safe-area-top);
52
53
  }
53
54
  .seed-app-bar__iconButton--theme_cupertino {
@@ -66,7 +67,8 @@
66
67
  }
67
68
  .seed-app-bar__root--theme_android {
68
69
  height: calc(56px + var(--seed-safe-area-top));
69
- padding-inline: var(--seed-dimension-x4);
70
+ padding-left: calc(var(--seed-dimension-x4) + var(--seed-safe-area-left));
71
+ padding-right: calc(var(--seed-dimension-x4) + var(--seed-safe-area-right));
70
72
  padding-top: var(--seed-safe-area-top);
71
73
  }
72
74
  .seed-app-bar__iconButton--theme_android {