@seed-design/css 2.8.3 → 2.9.1

package/recipes/app-bar.layered.css

@@ -54,8 +54,9 @@
   }
 
   .seed-app-bar__root--theme_cupertino {
-    height: calc(44px + var(--seed-safe-area-top));
-    padding-inline: var(--seed-dimension-x4);
+    height: calc(56px + var(--seed-safe-area-top));
+    padding-left: calc(var(--seed-dimension-x4) + var(--seed-safe-area-left));
+    padding-right: calc(var(--seed-dimension-x4) + var(--seed-safe-area-right));
     padding-top: var(--seed-safe-area-top);
   }
 
@@ -79,7 +80,8 @@
 
   .seed-app-bar__root--theme_android {
     height: calc(56px + var(--seed-safe-area-top));
-    padding-inline: var(--seed-dimension-x4);
+    padding-left: calc(var(--seed-dimension-x4) + var(--seed-safe-area-left));
+    padding-right: calc(var(--seed-dimension-x4) + var(--seed-safe-area-right));
     padding-top: var(--seed-safe-area-top);
   }
 

package/recipes/app-screen.css

@@ -20,6 +20,8 @@
     width: 100%;
     height: 100%;
     inset-inline: 0;
+    padding-left: var(--seed-safe-area-left);
+    padding-right: var(--seed-safe-area-right);
     overflow-y: scroll;
     -webkit-overflow-scrolling: touch;
 }
@@ -40,7 +42,7 @@
     inset-inline: 0;
 }
 .seed-app-screen__root--theme_cupertino {
-    --app-bar-height: 44px;
+    --app-bar-height: 56px;
 }
 .seed-app-screen__root--theme_android {
     --app-bar-height: 56px;
@@ -99,6 +101,8 @@
     inset-inline: 0;
     top: 0;
     margin-bottom: calc(-1 * (66px + 400px + var(--seed-safe-area-top)));
+    margin-left: calc(-1 * var(--seed-safe-area-left));
+    margin-right: calc(-1 * var(--seed-safe-area-right));
     height: calc(66px + 400px + var(--seed-safe-area-top));
     background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.35) 400px, rgba(0, 0, 0, 0.00) 100%);
     pointer-events: none;

package/recipes/app-screen.layered.css

@@ -19,9 +19,11 @@
   .seed-app-screen__layer {
     z-index: var(--z-index-layer);
     box-sizing: border-box;
-    -webkit-overflow-scrolling: touch;
     width: 100%;
     height: 100%;
+    padding-left: var(--seed-safe-area-left);
+    padding-right: var(--seed-safe-area-right);
+    -webkit-overflow-scrolling: touch;
     position: absolute;
     inset-inline: 0;
     overflow-y: scroll;
@@ -47,11 +49,7 @@
     inset-inline: 0;
   }
 
-  .seed-app-screen__root--theme_cupertino {
-    --app-bar-height: 44px;
-  }
-
-  .seed-app-screen__root--theme_android {
+  .seed-app-screen__root--theme_cupertino, .seed-app-screen__root--theme_android {
     --app-bar-height: 56px;
   }
 
@@ -118,6 +116,8 @@
     content: "";
     inset-inline: 0;
     margin-bottom: calc(-1 * (66px + 400px + var(--seed-safe-area-top)));
+    margin-left: calc(-1 * var(--seed-safe-area-left));
+    margin-right: calc(-1 * var(--seed-safe-area-right));
     height: calc(66px + 400px + var(--seed-safe-area-top));
     pointer-events: none;
     z-index: 1;

package/recipes/bottom-sheet.css

@@ -5,6 +5,8 @@
     align-items: flex-end;
     inset: 0;
     overscroll-behavior-y: none;
+    padding-left: var(--seed-safe-area-left);
+    padding-right: var(--seed-safe-area-right);
     --sheet-z-index: 2;
     z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
 }
@@ -33,6 +35,7 @@
     z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
     background: var(--seed-color-bg-layer-floating);
     max-width: 480px;
+    max-height: min(0.9 * 100%, 100% - var(--seed-safe-area-top));
     border-top-left-radius: var(--seed-radius-r6);
     border-top-right-radius: var(--seed-radius-r6);
     padding-bottom: var(--seed-safe-area-bottom);
@@ -85,6 +88,7 @@
 .seed-bottom-sheet__body {
     display: flex;
     flex-direction: column;
+    overflow-y: auto;
     --seed-box-padding-x-base: var(--seed-dimension-spacing-x-global-gutter);
     --seed-box-padding-x-sm: var(--seed-box-padding-x-base, initial);
     --seed-box-padding-x-md: var(--seed-box-padding-x-sm, initial);

package/recipes/bottom-sheet.layered.css

@@ -1,6 +1,8 @@
 @layer seed-components {
   .seed-bottom-sheet__positioner {
     overscroll-behavior-y: none;
+    padding-left: var(--seed-safe-area-left);
+    padding-right: var(--seed-safe-area-right);
     --sheet-z-index: 2;
     z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
     justify-content: center;
@@ -30,9 +32,10 @@
     word-break: break-all;
     z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
     background: var(--seed-color-bg-layer-floating);
+    max-width: 480px;
+    max-height: min(.9 * 100%, 100% - var(--seed-safe-area-top));
     border-top-left-radius: var(--seed-radius-r6);
     border-top-right-radius: var(--seed-radius-r6);
-    max-width: 480px;
     padding-bottom: var(--seed-safe-area-bottom);
     touch-action: none;
     will-change: transform;
@@ -127,6 +130,7 @@
     align-items: var(--seed-box-align-items);
     flex-direction: column;
     display: flex;
+    overflow-y: auto;
   }
 
   .seed-bottom-sheet__footer {

package/recipes/content-dialog.css

@@ -5,6 +5,10 @@
     align-items: center;
     inset: 0;
     overscroll-behavior-y: none;
+    padding-top: max(var(--seed-safe-area-top), var(--seed-safe-area-bottom));
+    padding-right: var(--seed-safe-area-right);
+    padding-bottom: max(var(--seed-safe-area-top), var(--seed-safe-area-bottom));
+    padding-left: var(--seed-safe-area-left);
     --dialog-z-index: 2;
     z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
 }
@@ -44,7 +48,7 @@
     z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
     background: var(--seed-color-bg-layer-floating);
     border-radius: var(--seed-radius-r5);
-    --content-dialog-default-width: calc(0.9 * 100vw);
+    --content-dialog-default-width: calc(0.9 * (100vw - var(--seed-safe-area-left) - var(--seed-safe-area-right)));
     --content-dialog-default-max-width: calc(0.9 * 100%);
     --seed-box-width-base: var(--content-dialog-default-width);
     --seed-box-width-sm: var(--seed-box-width-base, initial);
@@ -58,15 +62,15 @@
     --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
     --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
     --seed-box-max-width: var(--seed-box-max-width-base, initial);
-    width: var(--seed-box-width);
-    max-width: var(--seed-box-max-width);
-    max-height: calc(0.8 * 100vh);
-    max-height: calc(0.8 * 100dvh);
+    width: min(var(--seed-box-width), 100%);
+    max-width: min(var(--seed-box-max-width), 100%);
+    max-height: min(0.8 * 100vh, 100%);
+    max-height: min(0.8 * 100dvh, 100%);
 }
 @media (min-width: 768px) {
     .seed-content-dialog__content {
         --content-dialog-default-width: var(--content-dialog-size-width);
-        --content-dialog-default-max-width: calc(100vw - 2 * var(--seed-dimension-x5));
+        --content-dialog-default-max-width: calc(100vw - 2 * var(--seed-dimension-x5) - var(--seed-safe-area-left) - var(--seed-safe-area-right));
     }
 }
 .seed-content-dialog__content:is([data-state="open"], [data-open]) {

package/recipes/content-dialog.layered.css

@@ -1,6 +1,10 @@
 @layer seed-components {
   .seed-content-dialog__positioner {
     overscroll-behavior-y: none;
+    padding-top: max(var(--seed-safe-area-top), var(--seed-safe-area-bottom));
+    padding-right: var(--seed-safe-area-right);
+    padding-bottom: max(var(--seed-safe-area-top), var(--seed-safe-area-bottom));
+    padding-left: var(--seed-safe-area-left);
     --dialog-z-index: 2;
     z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
     justify-content: center;
@@ -44,7 +48,7 @@
     z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
     background: var(--seed-color-bg-layer-floating);
     border-radius: var(--seed-radius-r5);
-    --content-dialog-default-width: calc(.9 * 100vw);
+    --content-dialog-default-width: calc(.9 * (100vw - var(--seed-safe-area-left) - var(--seed-safe-area-right)));
     --content-dialog-default-max-width: calc(.9 * 100%);
     --seed-box-width-base: var(--content-dialog-default-width);
     --seed-box-width-sm: var(--seed-box-width-base, initial);
@@ -58,13 +62,13 @@
     --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
     --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
     --seed-box-max-width: var(--seed-box-max-width-base, initial);
-    width: var(--seed-box-width);
-    max-width: var(--seed-box-max-width);
-    max-height: 80vh;
+    width: min(var(--seed-box-width), 100%);
+    max-width: min(var(--seed-box-max-width), 100%);
+    max-height: min(80vh, 100%);
     outline: none;
     flex-direction: column;
     flex: none;
-    max-height: 80dvh;
+    max-height: min(80dvh, 100%);
     display: flex;
     position: relative;
   }
@@ -72,7 +76,7 @@
   @media (min-width: 768px) {
     .seed-content-dialog__content {
       --content-dialog-default-width: var(--content-dialog-size-width);
-      --content-dialog-default-max-width: calc(100vw - 2 * var(--seed-dimension-x5));
+      --content-dialog-default-max-width: calc(100vw - 2 * var(--seed-dimension-x5) - var(--seed-safe-area-left) - var(--seed-safe-area-right));
     }
   }
 

package/recipes/dialog.css

@@ -5,6 +5,10 @@
     align-items: center;
     inset: 0;
     overscroll-behavior-y: none;
+    padding-top: max(var(--seed-safe-area-top), var(--seed-safe-area-bottom));
+    padding-right: var(--seed-safe-area-right);
+    padding-bottom: max(var(--seed-safe-area-top), var(--seed-safe-area-bottom));
+    padding-left: var(--seed-safe-area-left);
     --dialog-z-index: 2;
     z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
 }
@@ -25,6 +29,8 @@
     z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
     background: var(--seed-color-bg-layer-floating);
     max-width: 272px;
+    max-height: 100%;
+    overflow-y: auto;
     margin: auto var(--seed-dimension-x8);
     border-radius: var(--seed-radius-r5);
 }

package/recipes/dialog.layered.css

@@ -1,6 +1,10 @@
 @layer seed-components {
   .seed-dialog__positioner {
     overscroll-behavior-y: none;
+    padding-top: max(var(--seed-safe-area-top), var(--seed-safe-area-bottom));
+    padding-right: var(--seed-safe-area-right);
+    padding-bottom: max(var(--seed-safe-area-top), var(--seed-safe-area-bottom));
+    padding-left: var(--seed-safe-area-left);
     --dialog-z-index: 2;
     z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
     justify-content: center;
@@ -23,6 +27,7 @@
     z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
     background: var(--seed-color-bg-layer-floating);
     max-width: 272px;
+    max-height: 100%;
     margin: auto var(--seed-dimension-x8);
     border-radius: var(--seed-radius-r5);
     outline: none;
@@ -30,6 +35,7 @@
     flex: 1;
     display: flex;
     position: relative;
+    overflow-y: auto;
   }
 
   .seed-dialog__content:is(:focus, [data-focus]) {

package/recipes/menu-sheet.css

@@ -5,6 +5,8 @@
     align-items: flex-end;
     inset: 0;
     overscroll-behavior-y: none;
+    padding-left: var(--seed-safe-area-left);
+    padding-right: var(--seed-safe-area-right);
     --sheet-z-index: 2;
     z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
 }
@@ -25,6 +27,7 @@
     z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
     background: var(--seed-color-bg-layer-floating);
     max-width: 480px;
+    max-height: min(0.9 * 100%, 100% - var(--seed-safe-area-top));
     padding-inline: var(--seed-dimension-spacing-x-global-gutter);
     padding-top: var(--menu-sheet-header-padding-top, var(--seed-dimension-x4));
     padding-bottom: calc(var(--seed-dimension-x4) + var(--seed-safe-area-bottom));
@@ -74,6 +77,7 @@
     display: flex;
     flex-direction: column;
     align-items: stretch;
+    overflow-y: auto;
     gap: var(--seed-dimension-x2_5);
 }
 .seed-menu-sheet__group {
@@ -81,6 +85,7 @@
     flex-direction: column;
     align-items: stretch;
     overflow: hidden;
+    flex-shrink: 0;
     border-radius: var(--seed-radius-r4);
 }
 .seed-menu-sheet__footer {

package/recipes/menu-sheet.layered.css

@@ -1,6 +1,8 @@
 @layer seed-components {
   .seed-menu-sheet__positioner {
     overscroll-behavior-y: none;
+    padding-left: var(--seed-safe-area-left);
+    padding-right: var(--seed-safe-area-right);
     --sheet-z-index: 2;
     z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
     justify-content: center;
@@ -23,6 +25,7 @@
     z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
     background: var(--seed-color-bg-layer-floating);
     max-width: 480px;
+    max-height: min(.9 * 100%, 100% - var(--seed-safe-area-top));
     padding-inline: var(--seed-dimension-spacing-x-global-gutter);
     padding-top: var(--menu-sheet-header-padding-top, var(--seed-dimension-x4));
     padding-bottom: calc(var(--seed-dimension-x4) + var(--seed-safe-area-bottom));
@@ -85,11 +88,13 @@
     gap: var(--seed-dimension-x2_5);
     flex-direction: column;
     display: flex;
+    overflow-y: auto;
   }
 
   .seed-menu-sheet__group {
     border-radius: var(--seed-radius-r4);
     flex-direction: column;
+    flex-shrink: 0;
     align-items: stretch;
     display: flex;
     overflow: hidden;

package/recipes/side-panel.css

@@ -40,22 +40,20 @@
     background: var(--seed-color-bg-layer-floating);
     touch-action: none;
     will-change: transform;
-    --side-panel-default-width: calc(0.8 * 100vw);
+    --side-panel-default-width: calc(0.8 * (100vw - var(--seed-safe-area-left) - var(--seed-safe-area-right)));
     --seed-box-width-base: var(--side-panel-default-width);
     --seed-box-width-sm: var(--seed-box-width-base, initial);
     --seed-box-width-md: var(--seed-box-width-sm, initial);
     --seed-box-width-lg: var(--seed-box-width-md, initial);
     --seed-box-width-xl: var(--seed-box-width-lg, initial);
     --seed-box-width: var(--seed-box-width-base, initial);
-    --seed-box-max-width-base: calc(0.8 * 100%);
+    --seed-box-max-width-base: calc(0.8 * (100% - var(--seed-safe-area-left) - var(--seed-safe-area-right)));
     --seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
     --seed-box-max-width-md: var(--seed-box-max-width-sm, initial);
     --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
     --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
     --seed-box-max-width: var(--seed-box-max-width-base, initial);
     inset-block: 0;
-    width: var(--seed-box-width);
-    max-width: var(--seed-box-max-width);
     padding-bottom: var(--seed-safe-area-bottom);
 }
 @media (min-width: 768px) {
@@ -76,14 +74,20 @@
 }
 .seed-side-panel__content[data-drawer-direction='left'] {
     left: 0;
-    padding-left: env(safe-area-inset-left, 0);
+    width: calc(var(--seed-box-width) + var(--seed-safe-area-left));
+    max-width: calc(var(--seed-box-max-width) + var(--seed-safe-area-left));
+    padding-left: var(--seed-safe-area-left);
+    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))));
 }
 .seed-side-panel__content[data-drawer-direction='left']::after {
     right: 100%;
 }
 .seed-side-panel__content[data-drawer-direction='right'] {
     right: 0;
-    padding-right: env(safe-area-inset-right, 0);
+    width: calc(var(--seed-box-width) + var(--seed-safe-area-right));
+    max-width: calc(var(--seed-box-max-width) + var(--seed-safe-area-right));
+    padding-right: var(--seed-safe-area-right);
+    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))));
 }
 .seed-side-panel__content[data-drawer-direction='right']::after {
     left: 100%;

package/recipes/side-panel.layered.css

@@ -42,21 +42,19 @@
     background: var(--seed-color-bg-layer-floating);
     touch-action: none;
     will-change: transform;
-    --side-panel-default-width: calc(.8 * 100vw);
+    --side-panel-default-width: calc(.8 * (100vw - var(--seed-safe-area-left) - var(--seed-safe-area-right)));
     --seed-box-width-base: var(--side-panel-default-width);
     --seed-box-width-sm: var(--seed-box-width-base, initial);
     --seed-box-width-md: var(--seed-box-width-sm, initial);
     --seed-box-width-lg: var(--seed-box-width-md, initial);
     --seed-box-width-xl: var(--seed-box-width-lg, initial);
     --seed-box-width: var(--seed-box-width-base, initial);
-    --seed-box-max-width-base: calc(.8 * 100%);
+    --seed-box-max-width-base: calc(.8 * (100% - var(--seed-safe-area-left) - var(--seed-safe-area-right)));
     --seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
     --seed-box-max-width-md: var(--seed-box-max-width-sm, initial);
     --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
     --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
     --seed-box-max-width: var(--seed-box-max-width-base, initial);
-    width: var(--seed-box-width);
-    max-width: var(--seed-box-max-width);
     padding-bottom: var(--seed-safe-area-bottom);
     flex-direction: column;
     display: flex;
@@ -84,7 +82,10 @@
   }
 
   .seed-side-panel__content[data-drawer-direction="left"] {
-    padding-left: env(safe-area-inset-left, 0);
+    width: calc(var(--seed-box-width) + var(--seed-safe-area-left));
+    max-width: calc(var(--seed-box-max-width) + var(--seed-safe-area-left));
+    padding-left: var(--seed-safe-area-left);
+    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))));
     left: 0;
   }
 
@@ -93,7 +94,10 @@
   }
 
   .seed-side-panel__content[data-drawer-direction="right"] {
-    padding-right: env(safe-area-inset-right, 0);
+    width: calc(var(--seed-box-width) + var(--seed-safe-area-right));
+    max-width: calc(var(--seed-box-max-width) + var(--seed-safe-area-right));
+    padding-right: var(--seed-safe-area-right);
+    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))));
     right: 0;
   }
 

package/recipes/snackbar-region.css

@@ -3,9 +3,9 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    left: calc(env(safe-area-inset-left, 0px));
-    right: calc(env(safe-area-inset-right, 0px));
-    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--snackbar-region-offset, 0px));
+    left: var(--seed-safe-area-left);
+    right: var(--seed-safe-area-right);
+    bottom: calc(var(--seed-safe-area-bottom) + var(--snackbar-region-offset, 0px));
     padding-inline: var(--seed-dimension-x2);
     padding-block: var(--seed-dimension-x2);
     transition-property: bottom;

package/recipes/snackbar-region.layered.css

@@ -1,9 +1,9 @@
 @layer seed-components {
   .seed-snackbar-region {
     z-index: 2147483647;
-    left: calc(env(safe-area-inset-left, 0px));
-    right: calc(env(safe-area-inset-right, 0px));
-    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--snackbar-region-offset, 0px));
+    left: var(--seed-safe-area-left);
+    right: var(--seed-safe-area-right);
+    bottom: calc(var(--seed-safe-area-bottom) + var(--snackbar-region-offset, 0px));
     padding-inline: var(--seed-dimension-x2);
     padding-block: var(--seed-dimension-x2);
     transition-property: bottom;

package/vars/component/alert-dialog.d.ts

@@ -10,9 +10,11 @@ export declare const vars: {
         "exitTimingFunction": "var(--seed-timing-function-exit)",
         "exitOpacity": "0"
       },
+      /** content는 가로 기준으로 안전 영역의 가운데에 놓입니다. 세로 기준으로는 상단과 하단 inset 중 큰 값을 위아래에 똑같이 두어 화면 가운데에 놓이고, 높이는 그 사이 높이를 넘지 않습니다. */
       "content": {
         "color": "var(--seed-color-bg-layer-floating)",
         "cornerRadius": "var(--seed-radius-r5)",
+        /** content와 좌우 안전 영역 경계 사이의 최소 간격입니다. 화면 끝이 아니라 안전 영역 경계부터 잽니다. */
         "marginX": "var(--seed-dimension-x8)",
         "marginY": "var(--seed-dimension-x16)",
         "maxWidth": "272px",

package/vars/component/bottom-sheet.d.ts

@@ -10,9 +10,12 @@ export declare const vars: {
         "exitTimingFunction": "var(--seed-timing-function-exit)",
         "exitOpacity": "0"
       },
+      /** content는 가로 기준으로 안전 영역의 가운데에 놓이고, 하단 inset을 content의 하단 패딩으로 적용합니다. */
       "content": {
         "color": "var(--seed-color-bg-layer-floating)",
         "maxWidth": "480px",
+        /** inset을 빼지 않은 viewport height 또는 parent height에 대한 최대 비율입니다. 최대 높이는 min(maxHeightFraction × 높이, 상단 inset을 뺀 높이)이므로, content는 상단 안전 영역 경계까지만 커집니다. */
+        "maxHeightFraction": "0.9",
         "topCornerRadius": "var(--seed-radius-r6)",
         "enterDuration": "var(--seed-duration-d6)",
         "enterTimingFunction": "var(--seed-timing-function-enter-expressive)",

package/vars/component/bottom-sheet.mjs

@@ -13,6 +13,7 @@ export const vars = {
       "content": {
         "color": "var(--seed-color-bg-layer-floating)",
         "maxWidth": "480px",
+        "maxHeightFraction": "0.9",
         "topCornerRadius": "var(--seed-radius-r6)",
         "enterDuration": "var(--seed-duration-d6)",
         "enterTimingFunction": "var(--seed-timing-function-enter-expressive)",

package/vars/component/dialog.d.ts

@@ -10,13 +10,15 @@ export declare const vars: {
         "exitTimingFunction": "var(--seed-timing-function-exit)",
         "exitOpacity": "0"
       },
+      /** content는 가로 기준으로 안전 영역의 가운데에 놓이고, 소비자가 지정한 너비는 안전 영역의 너비를 기준으로 합니다. 세로 기준으로는 상단과 하단 inset 중 큰 값을 위아래에 똑같이 두어 화면 가운데에 놓입니다. */
       "content": {
         "color": "var(--seed-color-bg-layer-floating)",
         "cornerRadius": "var(--seed-radius-r5)",
-        /** viewport width 또는 parent width에 대한 비율입니다. viewport `md` 미만에서 적용합니다. */
+        /** 좌우 inset을 뺀 viewport width 또는 parent width에 대한 비율입니다. viewport `md` 미만에서 적용합니다. */
         "widthFraction": "0.9",
-        /** viewport height 또는 parent height에 대한 최대 비율입니다. */
+        /** viewport height 또는 parent height에 대한 최대 비율입니다. 최대 높이는 min(maxHeightFraction × 높이, 상단과 하단 inset 중 큰 값을 위아래에서 각각 뺀 높이)입니다. */
         "maxHeightFraction": "0.8",
+        /** viewport `md` 이상에서 content와 좌우 안전 영역 경계 사이에 두는 최소 간격입니다. */
         "marginX": "var(--seed-dimension-x5)",
         "enterDuration": "var(--seed-duration-d4)",
         "enterTimingFunction": "var(--seed-timing-function-enter-expressive)",
@@ -76,6 +78,7 @@ export declare const vars: {
   },
   "sizeMedium": {
     "enabled": {
+      /** content는 가로 기준으로 안전 영역의 가운데에 놓이고, 소비자가 지정한 너비는 안전 영역의 너비를 기준으로 합니다. 세로 기준으로는 상단과 하단 inset 중 큰 값을 위아래에 똑같이 두어 화면 가운데에 놓입니다. */
       "content": {
         "maxWidth": "480px"
       }
@@ -83,6 +86,7 @@ export declare const vars: {
   },
   "sizeLarge": {
     "enabled": {
+      /** content는 가로 기준으로 안전 영역의 가운데에 놓이고, 소비자가 지정한 너비는 안전 영역의 너비를 기준으로 합니다. 세로 기준으로는 상단과 하단 inset 중 큰 값을 위아래에 똑같이 두어 화면 가운데에 놓입니다. */
       "content": {
         "maxWidth": "800px"
       }

package/vars/component/help-bubble.d.ts

@@ -7,6 +7,7 @@ export declare const vars: {
         "paddingX": "var(--seed-dimension-x3)",
         "paddingY": "var(--seed-dimension-x2_5)",
         "gap": "var(--seed-dimension-x1)",
+        /** 가용 너비(overflowPadding 참고)가 이보다 작으면 가용 너비로 축소됩니다. */
         "maxWidth": "280px",
         "enterScale": "0.9",
         "enterOpacity": "0",
@@ -16,7 +17,7 @@ export declare const vars: {
         "exitOpacity": "0",
         "exitDuration": "var(--seed-duration-d4)",
         "exitTimingFunction": "var(--seed-timing-function-easing)",
-        /** 말풍선과 뷰포트 경계 사이의 최소 간격을 정의합니다. */
+        /** 말풍선과 안전 영역 경계 사이의 최소 간격을 정의합니다. 말풍선은 화면 끝에서 inset + overflowPadding만큼 안쪽에 배치되며, 가용 너비도 같은 기준으로 계산합니다. */
         "overflowPadding": "var(--seed-dimension-x4)"
       },
       "arrow": {

package/vars/component/menu-sheet.d.ts

@@ -10,11 +10,15 @@ export declare const vars: {
         "exitTimingFunction": "var(--seed-timing-function-exit)",
         "exitOpacity": "0"
       },
+      /** content는 가로 기준으로 안전 영역의 가운데에 놓입니다. */
       "content": {
         "color": "var(--seed-color-bg-layer-floating)",
         "maxWidth": "480px",
+        /** inset을 빼지 않은 viewport height 또는 parent height에 대한 최대 비율입니다. 최대 높이는 min(maxHeightFraction × 높이, 상단 inset을 뺀 높이)이므로, content는 상단 안전 영역 경계까지만 커집니다. */
+        "maxHeightFraction": "0.9",
         "paddingX": "var(--seed-dimension-spacing-x-global-gutter)",
         "paddingTop": "var(--seed-dimension-x6)",
+        /** 이 값은 하단 inset과 합산하여 적용합니다. */
         "paddingBottom": "var(--seed-dimension-x4)",
         "topCornerRadius": "var(--seed-radius-r5)",
         "enterDuration": "var(--seed-duration-d6)",
@@ -24,6 +28,7 @@ export declare const vars: {
       },
       "header": {
         "gap": "var(--seed-dimension-x1)",
+        /** 이 값은 하단 inset과 합산하여 적용합니다. */
         "paddingBottom": "var(--seed-dimension-x4)"
       },
       "title": {

package/vars/component/menu-sheet.mjs

@@ -13,6 +13,7 @@ export const vars = {
       "content": {
         "color": "var(--seed-color-bg-layer-floating)",
         "maxWidth": "480px",
+        "maxHeightFraction": "0.9",
         "paddingX": "var(--seed-dimension-spacing-x-global-gutter)",
         "paddingTop": "var(--seed-dimension-x6)",
         "paddingBottom": "var(--seed-dimension-x4)",

package/vars/component/menu.d.ts

@@ -17,8 +17,9 @@ export declare const vars: {
         "gap": "var(--seed-dimension-x2)",
         /** 트리거와 메뉴 사이의 간격을 정의합니다. */
         "gutter": "var(--seed-dimension-x2)",
-        /** 메뉴와 뷰포트 경계 사이의 최소 간격을 정의합니다. */
+        /** 메뉴와 안전 영역 경계 사이의 최소 간격을 정의합니다. 메뉴는 화면 끝에서 inset + overflowPadding만큼 안쪽에 배치되며, 가용 높이도 같은 기준으로 계산합니다. */
         "overflowPadding": "var(--seed-dimension-x2)",
+        /** 가용 높이(overflowPadding 참고)가 이보다 작으면 가용 높이로 축소됩니다. */
         "maxHeight": "480px"
       },
       "groupLabel": {

package/vars/component/select.d.ts

@@ -17,8 +17,9 @@ export declare const vars: {
         "gap": "var(--seed-dimension-x2)",
         /** 트리거와 목록 사이의 간격을 정의합니다. */
         "gutter": "var(--seed-dimension-x2)",
-        /** 목록과 뷰포트 경계 사이의 최소 간격을 정의합니다. */
+        /** 목록과 안전 영역 경계 사이의 최소 간격을 정의합니다. 목록은 화면 끝에서 inset + overflowPadding만큼 안쪽에 배치되며, 가용 높이도 같은 기준으로 계산합니다. */
         "overflowPadding": "var(--seed-dimension-x2)",
+        /** 가용 높이(overflowPadding 참고)가 이보다 작으면 가용 높이로 축소됩니다. */
         "maxHeight": "480px"
       },
       "groupLabel": {