@seed-design/css 3.0.1 → 3.0.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 (25) hide show
  1. package/all.css +45 -22
  2. package/all.layered.css +45 -22
  3. package/all.layered.min.css +1 -1
  4. package/all.min.css +1 -1
  5. package/package.json +1 -1
  6. package/recipes/alert-dialog.css +6 -0
  7. package/recipes/alert-dialog.layered.css +6 -0
  8. package/recipes/app-screen.css +1 -1
  9. package/recipes/app-screen.layered.css +1 -1
  10. package/recipes/app-screen.layered.mjs +1 -1
  11. package/recipes/app-screen.mjs +1 -1
  12. package/recipes/bottom-sheet.css +4 -0
  13. package/recipes/bottom-sheet.layered.css +5 -1
  14. package/recipes/dialog.css +10 -6
  15. package/recipes/dialog.layered.css +10 -6
  16. package/recipes/menu-sheet.css +5 -0
  17. package/recipes/menu-sheet.layered.css +5 -0
  18. package/recipes/page-banner.css +4 -4
  19. package/recipes/page-banner.layered.css +4 -4
  20. package/recipes/popover.css +1 -1
  21. package/recipes/popover.layered.css +1 -1
  22. package/recipes/side-panel.css +10 -6
  23. package/recipes/side-panel.layered.css +10 -6
  24. package/recipes/snackbar-region.css +3 -3
  25. package/recipes/snackbar-region.layered.css +3 -3
package/all.css CHANGED
@@ -1783,6 +1783,10 @@
1783
1783
 
1784
1784
  .seed-alert-dialog__positioner {
1785
1785
  overscroll-behavior-y: none;
1786
+ padding-top: max(var(--seed-safe-area-top), var(--seed-safe-area-bottom));
1787
+ padding-right: var(--seed-safe-area-right);
1788
+ padding-bottom: max(var(--seed-safe-area-top), var(--seed-safe-area-bottom));
1789
+ padding-left: var(--seed-safe-area-left);
1786
1790
  --dialog-z-index: 2;
1787
1791
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
1788
1792
  justify-content: center;
@@ -1805,6 +1809,7 @@
1805
1809
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
1806
1810
  background: var(--seed-color-bg-layer-floating);
1807
1811
  max-width: 272px;
1812
+ max-height: 100%;
1808
1813
  margin: auto var(--seed-dimension-x8);
1809
1814
  border-radius: var(--seed-radius-r5);
1810
1815
  outline: none;
@@ -1812,6 +1817,7 @@
1812
1817
  flex: 1;
1813
1818
  display: flex;
1814
1819
  position: relative;
1820
+ overflow-y: auto;
1815
1821
  }
1816
1822
 
1817
1823
  .seed-alert-dialog__content:is(:focus, [data-focus]) {
@@ -2234,7 +2240,7 @@
2234
2240
  top: 0;
2235
2241
  }
2236
2242
 
2237
- .seed-app-screen__layer--tone_transparent-gradient_true-layerOffsetBottom_none:before {
2243
+ .seed-app-screen__layer--tone_transparent-gradient_true-layerOffsetTop_none:before {
2238
2244
  transform: translateY(-400px);
2239
2245
  }
2240
2246
 
@@ -2808,6 +2814,8 @@
2808
2814
 
2809
2815
  .seed-bottom-sheet__positioner {
2810
2816
  overscroll-behavior-y: none;
2817
+ padding-left: var(--seed-safe-area-left);
2818
+ padding-right: var(--seed-safe-area-right);
2811
2819
  --sheet-z-index: 2;
2812
2820
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
2813
2821
  justify-content: center;
@@ -2837,9 +2845,10 @@
2837
2845
  word-break: break-all;
2838
2846
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
2839
2847
  background: var(--seed-color-bg-layer-floating);
2848
+ max-width: 480px;
2849
+ max-height: min(.9 * 100%, 100% - var(--seed-safe-area-top));
2840
2850
  border-top-left-radius: var(--seed-radius-r6);
2841
2851
  border-top-right-radius: var(--seed-radius-r6);
2842
- max-width: 480px;
2843
2852
  padding-bottom: var(--seed-safe-area-bottom);
2844
2853
  touch-action: none;
2845
2854
  will-change: transform;
@@ -2934,6 +2943,7 @@
2934
2943
  align-items: var(--seed-box-align-items);
2935
2944
  flex-direction: column;
2936
2945
  display: flex;
2946
+ overflow-y: auto;
2937
2947
  }
2938
2948
 
2939
2949
  .seed-bottom-sheet__footer {
@@ -4791,6 +4801,10 @@
4791
4801
 
4792
4802
  .seed-dialog__positioner {
4793
4803
  overscroll-behavior-y: none;
4804
+ padding-top: max(var(--seed-safe-area-top), var(--seed-safe-area-bottom));
4805
+ padding-right: var(--seed-safe-area-right);
4806
+ padding-bottom: max(var(--seed-safe-area-top), var(--seed-safe-area-bottom));
4807
+ padding-left: var(--seed-safe-area-left);
4794
4808
  --dialog-z-index: 2;
4795
4809
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
4796
4810
  justify-content: center;
@@ -4834,7 +4848,7 @@
4834
4848
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
4835
4849
  background: var(--seed-color-bg-layer-floating);
4836
4850
  border-radius: var(--seed-radius-r5);
4837
- --dialog-default-width: calc(.9 * 100vw);
4851
+ --dialog-default-width: calc(.9 * (100vw - var(--seed-safe-area-left) - var(--seed-safe-area-right)));
4838
4852
  --dialog-default-max-width: calc(.9 * 100%);
4839
4853
  --seed-box-width-base: var(--dialog-default-width);
4840
4854
  --seed-box-width-sm: var(--seed-box-width-base, initial);
@@ -4848,13 +4862,13 @@
4848
4862
  --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
4849
4863
  --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
4850
4864
  --seed-box-max-width: var(--seed-box-max-width-base, initial);
4851
- width: var(--seed-box-width);
4852
- max-width: var(--seed-box-max-width);
4853
- max-height: 80vh;
4865
+ width: min(var(--seed-box-width), 100%);
4866
+ max-width: min(var(--seed-box-max-width), 100%);
4867
+ max-height: min(80vh, 100%);
4854
4868
  outline: none;
4855
4869
  flex-direction: column;
4856
4870
  flex: none;
4857
- max-height: 80dvh;
4871
+ max-height: min(80dvh, 100%);
4858
4872
  display: flex;
4859
4873
  position: relative;
4860
4874
  }
@@ -4862,7 +4876,7 @@
4862
4876
  @media (min-width: 768px) {
4863
4877
  .seed-dialog__content {
4864
4878
  --dialog-default-width: var(--dialog-size-width);
4865
- --dialog-default-max-width: calc(100vw - 2 * var(--seed-dimension-x5));
4879
+ --dialog-default-max-width: calc(100vw - 2 * var(--seed-dimension-x5) - var(--seed-safe-area-left) - var(--seed-safe-area-right));
4866
4880
  }
4867
4881
  }
4868
4882
 
@@ -7084,6 +7098,8 @@
7084
7098
 
7085
7099
  .seed-menu-sheet__positioner {
7086
7100
  overscroll-behavior-y: none;
7101
+ padding-left: var(--seed-safe-area-left);
7102
+ padding-right: var(--seed-safe-area-right);
7087
7103
  --sheet-z-index: 2;
7088
7104
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
7089
7105
  justify-content: center;
@@ -7106,6 +7122,7 @@
7106
7122
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
7107
7123
  background: var(--seed-color-bg-layer-floating);
7108
7124
  max-width: 480px;
7125
+ max-height: min(.9 * 100%, 100% - var(--seed-safe-area-top));
7109
7126
  padding-inline: var(--seed-dimension-spacing-x-global-gutter);
7110
7127
  padding-top: var(--menu-sheet-header-padding-top, var(--seed-dimension-x4));
7111
7128
  padding-bottom: calc(var(--seed-dimension-x4) + var(--seed-safe-area-bottom));
@@ -7168,11 +7185,13 @@
7168
7185
  gap: var(--seed-dimension-x2_5);
7169
7186
  flex-direction: column;
7170
7187
  display: flex;
7188
+ overflow-y: auto;
7171
7189
  }
7172
7190
 
7173
7191
  .seed-menu-sheet__group {
7174
7192
  border-radius: var(--seed-radius-r4);
7175
7193
  flex-direction: column;
7194
+ flex-shrink: 0;
7176
7195
  align-items: stretch;
7177
7196
  display: flex;
7178
7197
  overflow: hidden;
@@ -7690,7 +7709,7 @@
7690
7709
  }
7691
7710
 
7692
7711
  .seed-page-banner__closeButton--tone_informative-variant_solid {
7693
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
7712
+ --seed-suffix-icon-color: var(--seed-color-fg-on-informative-solid);
7694
7713
  }
7695
7714
 
7696
7715
  .seed-page-banner__root--tone_positive-variant_weak {
@@ -7742,7 +7761,7 @@
7742
7761
  }
7743
7762
 
7744
7763
  .seed-page-banner__closeButton--tone_positive-variant_solid {
7745
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
7764
+ --seed-suffix-icon-color: var(--seed-color-fg-on-positive-solid);
7746
7765
  }
7747
7766
 
7748
7767
  .seed-page-banner__root--tone_warning-variant_weak {
@@ -7794,7 +7813,7 @@
7794
7813
  }
7795
7814
 
7796
7815
  .seed-page-banner__closeButton--tone_warning-variant_solid {
7797
- --seed-suffix-icon-color: var(--seed-color-palette-static-black-alpha-900);
7816
+ --seed-suffix-icon-color: var(--seed-color-fg-on-warning-solid);
7798
7817
  }
7799
7818
 
7800
7819
  .seed-page-banner__root--tone_critical-variant_weak {
@@ -7846,7 +7865,7 @@
7846
7865
  }
7847
7866
 
7848
7867
  .seed-page-banner__closeButton--tone_critical-variant_solid {
7849
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
7868
+ --seed-suffix-icon-color: var(--seed-color-fg-on-critical-solid);
7850
7869
  }
7851
7870
 
7852
7871
  .seed-page-banner__root--tone_magic-variant_weak {
@@ -8095,7 +8114,7 @@
8095
8114
  --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
8096
8115
  --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
8097
8116
  --seed-box-max-width: var(--seed-box-max-width-base, initial);
8098
- width: var(--seed-box-width);
8117
+ width: min(var(--seed-box-width), var(--seed-popover-available-width, var(--seed-box-width)));
8099
8118
  min-width: min(320px, var(--seed-popover-available-width, 320px));
8100
8119
  max-width: var(--seed-box-max-width);
8101
8120
  max-height: min(600px, var(--seed-popover-available-height, 600px));
@@ -10157,21 +10176,19 @@
10157
10176
  background: var(--seed-color-bg-layer-floating);
10158
10177
  touch-action: none;
10159
10178
  will-change: transform;
10160
- --side-panel-default-width: calc(.8 * 100vw);
10179
+ --side-panel-default-width: calc(.8 * (100vw - var(--seed-safe-area-left) - var(--seed-safe-area-right)));
10161
10180
  --seed-box-width-base: var(--side-panel-default-width);
10162
10181
  --seed-box-width-sm: var(--seed-box-width-base, initial);
10163
10182
  --seed-box-width-md: var(--seed-box-width-sm, initial);
10164
10183
  --seed-box-width-lg: var(--seed-box-width-md, initial);
10165
10184
  --seed-box-width-xl: var(--seed-box-width-lg, initial);
10166
10185
  --seed-box-width: var(--seed-box-width-base, initial);
10167
- --seed-box-max-width-base: calc(.8 * 100%);
10186
+ --seed-box-max-width-base: calc(.8 * (100% - var(--seed-safe-area-left) - var(--seed-safe-area-right)));
10168
10187
  --seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
10169
10188
  --seed-box-max-width-md: var(--seed-box-max-width-sm, initial);
10170
10189
  --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
10171
10190
  --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
10172
10191
  --seed-box-max-width: var(--seed-box-max-width-base, initial);
10173
- width: var(--seed-box-width);
10174
- max-width: var(--seed-box-max-width);
10175
10192
  padding-bottom: var(--seed-safe-area-bottom);
10176
10193
  flex-direction: column;
10177
10194
  display: flex;
@@ -10199,7 +10216,10 @@
10199
10216
  }
10200
10217
 
10201
10218
  .seed-side-panel__content[data-drawer-direction="left"] {
10202
- padding-left: env(safe-area-inset-left, 0);
10219
+ width: calc(var(--seed-box-width) + var(--seed-safe-area-left));
10220
+ max-width: calc(var(--seed-box-max-width) + var(--seed-safe-area-left));
10221
+ padding-left: var(--seed-safe-area-left);
10222
+ 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))));
10203
10223
  left: 0;
10204
10224
  }
10205
10225
 
@@ -10208,7 +10228,10 @@
10208
10228
  }
10209
10229
 
10210
10230
  .seed-side-panel__content[data-drawer-direction="right"] {
10211
- padding-right: env(safe-area-inset-right, 0);
10231
+ width: calc(var(--seed-box-width) + var(--seed-safe-area-right));
10232
+ max-width: calc(var(--seed-box-max-width) + var(--seed-safe-area-right));
10233
+ padding-right: var(--seed-safe-area-right);
10234
+ 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))));
10212
10235
  right: 0;
10213
10236
  }
10214
10237
 
@@ -10906,9 +10929,9 @@
10906
10929
 
10907
10930
  .seed-snackbar-region {
10908
10931
  z-index: 2147483647;
10909
- left: calc(env(safe-area-inset-left, 0px));
10910
- right: calc(env(safe-area-inset-right, 0px));
10911
- bottom: calc(env(safe-area-inset-bottom, 0px) + var(--snackbar-region-offset, 0px));
10932
+ left: var(--seed-safe-area-left);
10933
+ right: var(--seed-safe-area-right);
10934
+ bottom: calc(var(--seed-safe-area-bottom) + var(--snackbar-region-offset, 0px));
10912
10935
  padding-inline: var(--seed-dimension-x2);
10913
10936
  padding-block: var(--seed-dimension-x2);
10914
10937
  transition-property: bottom;
package/all.layered.css CHANGED
@@ -2032,6 +2032,10 @@
2032
2032
 
2033
2033
  .seed-alert-dialog__positioner {
2034
2034
  overscroll-behavior-y: none;
2035
+ padding-top: max(var(--seed-safe-area-top), var(--seed-safe-area-bottom));
2036
+ padding-right: var(--seed-safe-area-right);
2037
+ padding-bottom: max(var(--seed-safe-area-top), var(--seed-safe-area-bottom));
2038
+ padding-left: var(--seed-safe-area-left);
2035
2039
  --dialog-z-index: 2;
2036
2040
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
2037
2041
  justify-content: center;
@@ -2054,6 +2058,7 @@
2054
2058
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
2055
2059
  background: var(--seed-color-bg-layer-floating);
2056
2060
  max-width: 272px;
2061
+ max-height: 100%;
2057
2062
  margin: auto var(--seed-dimension-x8);
2058
2063
  border-radius: var(--seed-radius-r5);
2059
2064
  outline: none;
@@ -2061,6 +2066,7 @@
2061
2066
  flex: 1;
2062
2067
  display: flex;
2063
2068
  position: relative;
2069
+ overflow-y: auto;
2064
2070
  }
2065
2071
 
2066
2072
  .seed-alert-dialog__content:is(:focus, [data-focus]) {
@@ -2483,7 +2489,7 @@
2483
2489
  top: 0;
2484
2490
  }
2485
2491
 
2486
- .seed-app-screen__layer--tone_transparent-gradient_true-layerOffsetBottom_none:before {
2492
+ .seed-app-screen__layer--tone_transparent-gradient_true-layerOffsetTop_none:before {
2487
2493
  transform: translateY(-400px);
2488
2494
  }
2489
2495
 
@@ -3057,6 +3063,8 @@
3057
3063
 
3058
3064
  .seed-bottom-sheet__positioner {
3059
3065
  overscroll-behavior-y: none;
3066
+ padding-left: var(--seed-safe-area-left);
3067
+ padding-right: var(--seed-safe-area-right);
3060
3068
  --sheet-z-index: 2;
3061
3069
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
3062
3070
  justify-content: center;
@@ -3086,9 +3094,10 @@
3086
3094
  word-break: break-all;
3087
3095
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
3088
3096
  background: var(--seed-color-bg-layer-floating);
3097
+ max-width: 480px;
3098
+ max-height: min(.9 * 100%, 100% - var(--seed-safe-area-top));
3089
3099
  border-top-left-radius: var(--seed-radius-r6);
3090
3100
  border-top-right-radius: var(--seed-radius-r6);
3091
- max-width: 480px;
3092
3101
  padding-bottom: var(--seed-safe-area-bottom);
3093
3102
  touch-action: none;
3094
3103
  will-change: transform;
@@ -3183,6 +3192,7 @@
3183
3192
  align-items: var(--seed-box-align-items);
3184
3193
  flex-direction: column;
3185
3194
  display: flex;
3195
+ overflow-y: auto;
3186
3196
  }
3187
3197
 
3188
3198
  .seed-bottom-sheet__footer {
@@ -5040,6 +5050,10 @@
5040
5050
 
5041
5051
  .seed-dialog__positioner {
5042
5052
  overscroll-behavior-y: none;
5053
+ padding-top: max(var(--seed-safe-area-top), var(--seed-safe-area-bottom));
5054
+ padding-right: var(--seed-safe-area-right);
5055
+ padding-bottom: max(var(--seed-safe-area-top), var(--seed-safe-area-bottom));
5056
+ padding-left: var(--seed-safe-area-left);
5043
5057
  --dialog-z-index: 2;
5044
5058
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
5045
5059
  justify-content: center;
@@ -5083,7 +5097,7 @@
5083
5097
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
5084
5098
  background: var(--seed-color-bg-layer-floating);
5085
5099
  border-radius: var(--seed-radius-r5);
5086
- --dialog-default-width: calc(.9 * 100vw);
5100
+ --dialog-default-width: calc(.9 * (100vw - var(--seed-safe-area-left) - var(--seed-safe-area-right)));
5087
5101
  --dialog-default-max-width: calc(.9 * 100%);
5088
5102
  --seed-box-width-base: var(--dialog-default-width);
5089
5103
  --seed-box-width-sm: var(--seed-box-width-base, initial);
@@ -5097,13 +5111,13 @@
5097
5111
  --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
5098
5112
  --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
5099
5113
  --seed-box-max-width: var(--seed-box-max-width-base, initial);
5100
- width: var(--seed-box-width);
5101
- max-width: var(--seed-box-max-width);
5102
- max-height: 80vh;
5114
+ width: min(var(--seed-box-width), 100%);
5115
+ max-width: min(var(--seed-box-max-width), 100%);
5116
+ max-height: min(80vh, 100%);
5103
5117
  outline: none;
5104
5118
  flex-direction: column;
5105
5119
  flex: none;
5106
- max-height: 80dvh;
5120
+ max-height: min(80dvh, 100%);
5107
5121
  display: flex;
5108
5122
  position: relative;
5109
5123
  }
@@ -5111,7 +5125,7 @@
5111
5125
  @media (min-width: 768px) {
5112
5126
  .seed-dialog__content {
5113
5127
  --dialog-default-width: var(--dialog-size-width);
5114
- --dialog-default-max-width: calc(100vw - 2 * var(--seed-dimension-x5));
5128
+ --dialog-default-max-width: calc(100vw - 2 * var(--seed-dimension-x5) - var(--seed-safe-area-left) - var(--seed-safe-area-right));
5115
5129
  }
5116
5130
  }
5117
5131
 
@@ -7333,6 +7347,8 @@
7333
7347
 
7334
7348
  .seed-menu-sheet__positioner {
7335
7349
  overscroll-behavior-y: none;
7350
+ padding-left: var(--seed-safe-area-left);
7351
+ padding-right: var(--seed-safe-area-right);
7336
7352
  --sheet-z-index: 2;
7337
7353
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
7338
7354
  justify-content: center;
@@ -7355,6 +7371,7 @@
7355
7371
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
7356
7372
  background: var(--seed-color-bg-layer-floating);
7357
7373
  max-width: 480px;
7374
+ max-height: min(.9 * 100%, 100% - var(--seed-safe-area-top));
7358
7375
  padding-inline: var(--seed-dimension-spacing-x-global-gutter);
7359
7376
  padding-top: var(--menu-sheet-header-padding-top, var(--seed-dimension-x4));
7360
7377
  padding-bottom: calc(var(--seed-dimension-x4) + var(--seed-safe-area-bottom));
@@ -7417,11 +7434,13 @@
7417
7434
  gap: var(--seed-dimension-x2_5);
7418
7435
  flex-direction: column;
7419
7436
  display: flex;
7437
+ overflow-y: auto;
7420
7438
  }
7421
7439
 
7422
7440
  .seed-menu-sheet__group {
7423
7441
  border-radius: var(--seed-radius-r4);
7424
7442
  flex-direction: column;
7443
+ flex-shrink: 0;
7425
7444
  align-items: stretch;
7426
7445
  display: flex;
7427
7446
  overflow: hidden;
@@ -7939,7 +7958,7 @@
7939
7958
  }
7940
7959
 
7941
7960
  .seed-page-banner__closeButton--tone_informative-variant_solid {
7942
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
7961
+ --seed-suffix-icon-color: var(--seed-color-fg-on-informative-solid);
7943
7962
  }
7944
7963
 
7945
7964
  .seed-page-banner__root--tone_positive-variant_weak {
@@ -7991,7 +8010,7 @@
7991
8010
  }
7992
8011
 
7993
8012
  .seed-page-banner__closeButton--tone_positive-variant_solid {
7994
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
8013
+ --seed-suffix-icon-color: var(--seed-color-fg-on-positive-solid);
7995
8014
  }
7996
8015
 
7997
8016
  .seed-page-banner__root--tone_warning-variant_weak {
@@ -8043,7 +8062,7 @@
8043
8062
  }
8044
8063
 
8045
8064
  .seed-page-banner__closeButton--tone_warning-variant_solid {
8046
- --seed-suffix-icon-color: var(--seed-color-palette-static-black-alpha-900);
8065
+ --seed-suffix-icon-color: var(--seed-color-fg-on-warning-solid);
8047
8066
  }
8048
8067
 
8049
8068
  .seed-page-banner__root--tone_critical-variant_weak {
@@ -8095,7 +8114,7 @@
8095
8114
  }
8096
8115
 
8097
8116
  .seed-page-banner__closeButton--tone_critical-variant_solid {
8098
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
8117
+ --seed-suffix-icon-color: var(--seed-color-fg-on-critical-solid);
8099
8118
  }
8100
8119
 
8101
8120
  .seed-page-banner__root--tone_magic-variant_weak {
@@ -8344,7 +8363,7 @@
8344
8363
  --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
8345
8364
  --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
8346
8365
  --seed-box-max-width: var(--seed-box-max-width-base, initial);
8347
- width: var(--seed-box-width);
8366
+ width: min(var(--seed-box-width), var(--seed-popover-available-width, var(--seed-box-width)));
8348
8367
  min-width: min(320px, var(--seed-popover-available-width, 320px));
8349
8368
  max-width: var(--seed-box-max-width);
8350
8369
  max-height: min(600px, var(--seed-popover-available-height, 600px));
@@ -10406,21 +10425,19 @@
10406
10425
  background: var(--seed-color-bg-layer-floating);
10407
10426
  touch-action: none;
10408
10427
  will-change: transform;
10409
- --side-panel-default-width: calc(.8 * 100vw);
10428
+ --side-panel-default-width: calc(.8 * (100vw - var(--seed-safe-area-left) - var(--seed-safe-area-right)));
10410
10429
  --seed-box-width-base: var(--side-panel-default-width);
10411
10430
  --seed-box-width-sm: var(--seed-box-width-base, initial);
10412
10431
  --seed-box-width-md: var(--seed-box-width-sm, initial);
10413
10432
  --seed-box-width-lg: var(--seed-box-width-md, initial);
10414
10433
  --seed-box-width-xl: var(--seed-box-width-lg, initial);
10415
10434
  --seed-box-width: var(--seed-box-width-base, initial);
10416
- --seed-box-max-width-base: calc(.8 * 100%);
10435
+ --seed-box-max-width-base: calc(.8 * (100% - var(--seed-safe-area-left) - var(--seed-safe-area-right)));
10417
10436
  --seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
10418
10437
  --seed-box-max-width-md: var(--seed-box-max-width-sm, initial);
10419
10438
  --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
10420
10439
  --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
10421
10440
  --seed-box-max-width: var(--seed-box-max-width-base, initial);
10422
- width: var(--seed-box-width);
10423
- max-width: var(--seed-box-max-width);
10424
10441
  padding-bottom: var(--seed-safe-area-bottom);
10425
10442
  flex-direction: column;
10426
10443
  display: flex;
@@ -10448,7 +10465,10 @@
10448
10465
  }
10449
10466
 
10450
10467
  .seed-side-panel__content[data-drawer-direction="left"] {
10451
- padding-left: env(safe-area-inset-left, 0);
10468
+ width: calc(var(--seed-box-width) + var(--seed-safe-area-left));
10469
+ max-width: calc(var(--seed-box-max-width) + var(--seed-safe-area-left));
10470
+ padding-left: var(--seed-safe-area-left);
10471
+ 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))));
10452
10472
  left: 0;
10453
10473
  }
10454
10474
 
@@ -10457,7 +10477,10 @@
10457
10477
  }
10458
10478
 
10459
10479
  .seed-side-panel__content[data-drawer-direction="right"] {
10460
- padding-right: env(safe-area-inset-right, 0);
10480
+ width: calc(var(--seed-box-width) + var(--seed-safe-area-right));
10481
+ max-width: calc(var(--seed-box-max-width) + var(--seed-safe-area-right));
10482
+ padding-right: var(--seed-safe-area-right);
10483
+ 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))));
10461
10484
  right: 0;
10462
10485
  }
10463
10486
 
@@ -11155,9 +11178,9 @@
11155
11178
 
11156
11179
  .seed-snackbar-region {
11157
11180
  z-index: 2147483647;
11158
- left: calc(env(safe-area-inset-left, 0px));
11159
- right: calc(env(safe-area-inset-right, 0px));
11160
- bottom: calc(env(safe-area-inset-bottom, 0px) + var(--snackbar-region-offset, 0px));
11181
+ left: var(--seed-safe-area-left);
11182
+ right: var(--seed-safe-area-right);
11183
+ bottom: calc(var(--seed-safe-area-bottom) + var(--snackbar-region-offset, 0px));
11161
11184
  padding-inline: var(--seed-dimension-x2);
11162
11185
  padding-block: var(--seed-dimension-x2);
11163
11186
  transition-property: bottom;