@seed-design/css 2.8.3 → 2.9.1

package/vars/component/side-panel.d.ts

@@ -10,10 +10,10 @@ export declare const vars: {
         "exitTimingFunction": "var(--seed-timing-function-exit)",
         "exitOpacity": "0"
       },
-      /** 하단 safe-area inset을 content의 하단 패딩으로 적용합니다. */
+      /** 하단 inset을 content의 하단 패딩으로 적용합니다. */
       "content": {
         "color": "var(--seed-color-bg-layer-floating)",
-        /** viewport 또는 parent width에 대한 mobile content width 비율입니다. */
+        /** 좌우 inset을 뺀 viewport width 또는 parent width에 대한 mobile content width 비율입니다. content의 최대 너비도 같은 기준 너비에 이 비율을 곱해 정합니다. */
         "widthFraction": "0.8",
         "enterDuration": "var(--seed-duration-d6)",
         "enterTimingFunction": "var(--seed-timing-function-enter-expressive)",
@@ -24,7 +24,7 @@ export declare const vars: {
         "gap": "var(--seed-dimension-x1_5)",
         "minHeight": "70px",
         "paddingX": "var(--seed-dimension-x6)",
-        /** 이 값은 상단 safe-area inset과 합산하여 적용합니다. */
+        /** 이 값은 상단 inset과 합산하여 적용합니다. */
         "paddingTop": "var(--seed-dimension-x6)",
         /** body의 하단 padding이며, 동시에 하단 scroll fog 그라데이션의 높이로도 사용됩니다. */
         "paddingBottom": "var(--seed-dimension-x4)",
@@ -40,7 +40,7 @@ export declare const vars: {
       },
       "footer": {
         "paddingX": "var(--seed-dimension-x6)",
-        /** 이 값은 상단 safe-area inset과 합산하여 적용합니다. */
+        /** 이 값은 상단 inset과 합산하여 적용합니다. */
         "paddingTop": "var(--seed-dimension-x4)",
         /** body의 하단 padding이며, 동시에 하단 scroll fog 그라데이션의 높이로도 사용됩니다. */
         "paddingBottom": "var(--seed-dimension-x6)"
@@ -72,24 +72,27 @@ export declare const vars: {
   },
   "sizeSmall": {
     "enabled": {
-      /** 하단 safe-area inset을 content의 하단 패딩으로 적용합니다. */
+      /** 하단 inset을 content의 하단 패딩으로 적용합니다. */
       "content": {
+        /** content 영역의 너비입니다. 패널은 붙는 쪽의 inset만큼 더 넓어지고, 늘어난 영역까지 배경으로 채워 화면 끝에 닿습니다. 소비자가 지정한 너비도 같은 방식으로 적용합니다. */
         "width": "480px"
       }
     }
   },
   "sizeMedium": {
     "enabled": {
-      /** 하단 safe-area inset을 content의 하단 패딩으로 적용합니다. */
+      /** 하단 inset을 content의 하단 패딩으로 적용합니다. */
       "content": {
+        /** content 영역의 너비입니다. 패널은 붙는 쪽의 inset만큼 더 넓어지고, 늘어난 영역까지 배경으로 채워 화면 끝에 닿습니다. 소비자가 지정한 너비도 같은 방식으로 적용합니다. */
         "width": "720px"
       }
     }
   },
   "sizeLarge": {
     "enabled": {
-      /** 하단 safe-area inset을 content의 하단 패딩으로 적용합니다. */
+      /** 하단 inset을 content의 하단 패딩으로 적용합니다. */
       "content": {
+        /** content 영역의 너비입니다. 패널은 붙는 쪽의 inset만큼 더 넓어지고, 늘어난 영역까지 배경으로 채워 화면 끝에 닿습니다. 소비자가 지정한 너비도 같은 방식으로 적용합니다. */
         "width": "960px"
       }
     }

package/vars/component/snackbar.d.ts

@@ -1,6 +1,7 @@
 export declare const vars: {
   "base": {
     "enabled": {
+      /** region은 좌우와 하단 안전 영역 경계 안쪽에 배치되므로, paddingX와 하단 쪽 paddingY는 안전 영역 경계부터 잽니다. */
       "region": {
         "paddingX": "var(--seed-dimension-x2)",
         "paddingY": "var(--seed-dimension-x2)",

package/vars/component/top-navigation.d.ts

@@ -2,6 +2,7 @@ export declare const vars: {
   "base": {
     "enabled": {
       "root": {
+        "height": "56px",
         "paddingX": "var(--seed-dimension-x1_5)"
       }
     }
@@ -9,7 +10,6 @@ export declare const vars: {
   "themeIos": {
     "enabled": {
       "root": {
-        "height": "44px",
         /** main과 left/right 영역 간 최소 간격입니다. */
         "titleMinGap": "var(--seed-dimension-x2)"
       }
@@ -17,9 +17,6 @@ export declare const vars: {
   },
   "themeAndroid": {
     "enabled": {
-      "root": {
-        "height": "56px"
-      },
       /** title과 subtitle을 포함하는 영역입니다. */
       "main": {
         "paddingLeft": "var(--seed-dimension-x1_5)"

package/vars/component/top-navigation.mjs

@@ -2,6 +2,7 @@ export const vars = {
   "base": {
     "enabled": {
       "root": {
+        "height": "56px",
         "paddingX": "var(--seed-dimension-x1_5)"
       }
     }
@@ -9,16 +10,12 @@ export const vars = {
   "themeIos": {
     "enabled": {
       "root": {
-        "height": "44px",
         "titleMinGap": "var(--seed-dimension-x2)"
       }
     }
   },
   "themeAndroid": {
     "enabled": {
-      "root": {
-        "height": "56px"
-      },
       "main": {
         "paddingLeft": "var(--seed-dimension-x1_5)"
       }