@seed-design/css 1.2.2 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/css",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",

package/recipes/app-bar.css

@@ -267,7 +267,7 @@
     --seed-exit-scale: 1;
 }
 .seed-app-bar__root--tone_layer:before {
-    background-color: var(--seed-color-bg-layer-default);
+    background: var(--seed-box-background, var(--seed-color-bg-layer-default));
 }
 .seed-app-bar__icon--tone_layer {
     color: var(--seed-icon-color, var(--seed-color-fg-neutral));

package/recipes/aspect-ratio.css

@@ -1,6 +1,4 @@
 .seed-aspect-ratio {
-    position: relative;
-    overflow: hidden;
     --seed-aspect-ratio-padding: 75%;
 }
 .seed-aspect-ratio::before {

package/recipes/bottom-sheet.css

@@ -144,7 +144,7 @@
 }
 .seed-bottom-sheet__title--headerAlign_left[data-show-close-button] {
     padding-left: var(--seed-dimension-spacing-x-global-gutter);
-    padding-right: 50px;
+    padding-right: 56px;
 }
 .seed-bottom-sheet__header--headerAlign_center {
     justify-content: center;
@@ -155,8 +155,8 @@
     padding-right: var(--seed-dimension-spacing-x-global-gutter);
 }
 .seed-bottom-sheet__title--headerAlign_center[data-show-close-button] {
-    padding-left: 60px;
-    padding-right: 60px;
+    padding-left: 56px;
+    padding-right: 56px;
 }
 .seed-bottom-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open])[data-snap-points='false']:not([data-animation-done='true']) {
     animation-name: fade-in;

package/recipes/segmented-control.css

@@ -48,7 +48,7 @@
     font-size: var(--seed-font-size-t5);
     line-height: var(--seed-line-height-t5);
     color: var(--seed-color-fg-neutral-subtle);
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing);
 }
 .seed-segmented-control__item:is(:checked, [data-checked]) {
     color: var(--seed-color-fg-neutral);
@@ -63,7 +63,9 @@
 }
 .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
     background-color: var(--seed-color-palette-gray-100);
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
 }
 .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):not(:is(:checked, [data-checked])):is(:active, [data-active]) {
     background-color: var(--seed-color-bg-neutral-weak-pressed);
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
 }

package/recipes/slider.css

@@ -96,18 +96,19 @@
     top: 50%;
     box-sizing: border-box;
     background: var(--seed-color-bg-neutral-inverted);
-    padding-left: var(--seed-dimension-x1_5);
-    padding-right: var(--seed-dimension-x1_5);
-    padding-top: var(--seed-dimension-x0_5);
-    padding-bottom: var(--seed-dimension-x0_5);
-    border-radius: var(--seed-radius-r1);
+    padding-left: var(--seed-dimension-x2);
+    padding-right: var(--seed-dimension-x2);
+    padding-top: var(--seed-dimension-x1);
+    padding-bottom: var(--seed-dimension-x1);
+    border-radius: var(--seed-radius-r1_5);
     color: var(--seed-color-fg-neutral-inverted);
-    font-size: var(--seed-font-size-t1);
-    line-height: var(--seed-line-height-t1);
+    font-size: var(--seed-font-size-t3);
+    line-height: var(--seed-line-height-t3);
     font-weight: var(--seed-font-weight-medium);
     white-space: pre-wrap;
     text-align: center;
     width: max-content;
+    min-width: calc(var(--seed-dimension-x2) * 2 + var(--seed-dimension-x2));
 }
 .seed-slider__valueIndicatorRoot[data-dir='ltr'] {
     left: calc(var(--indicator-label-position) * 1% + var(--indicator-label-offset));
@@ -122,7 +123,7 @@
     animation-timing-function: var(--seed-timing-function-enter);
     animation-duration: var(--seed-duration-d4);
     --seed-enter-translate-x: -50%;
-    --seed-enter-translate-y: calc(-100% - var(--seed-dimension-x5) / 2);
+    --seed-enter-translate-y: calc(-100% - var(--seed-dimension-x5) / 2 - 0.3125rem);
     --seed-enter-opacity: 0;
     --seed-enter-scale: 0.9;
 }
@@ -131,7 +132,7 @@
     animation-timing-function: var(--seed-timing-function-enter);
     animation-duration: var(--seed-duration-d4);
     --seed-enter-translate-x: 50%;
-    --seed-enter-translate-y: calc(-100% - var(--seed-dimension-x5) / 2);
+    --seed-enter-translate-y: calc(-100% - var(--seed-dimension-x5) / 2 - 0.3125rem);
     --seed-enter-opacity: 0;
     --seed-enter-scale: 0.9;
 }
@@ -141,7 +142,7 @@
     animation-duration: var(--seed-duration-d4);
     animation-fill-mode: forwards;
     --seed-exit-translate-x: -50%;
-    --seed-exit-translate-y: calc(-100% - var(--seed-dimension-x5) / 2);
+    --seed-exit-translate-y: calc(-100% - var(--seed-dimension-x5) / 2 - 0.3125rem);
     --seed-exit-opacity: 0;
     --seed-exit-scale: 1;
 }
@@ -151,7 +152,7 @@
     animation-duration: var(--seed-duration-d4);
     animation-fill-mode: forwards;
     --seed-exit-translate-x: 50%;
-    --seed-exit-translate-y: calc(-100% - var(--seed-dimension-x5) / 2);
+    --seed-exit-translate-y: calc(-100% - var(--seed-dimension-x5) / 2 - 0.3125rem);
     --seed-exit-opacity: 0;
     --seed-exit-scale: 1;
 }
@@ -159,8 +160,8 @@
     animation-duration: 0s;
 }
 .seed-slider__valueIndicatorArrow {
-    width: var(--seed-dimension-x2_5);
-    height: var(--seed-dimension-x2_5);
+    width: var(--seed-dimension-x2);
+    height: var(--seed-dimension-x2);
     position: absolute;
     top: 100%;
 }
@@ -175,6 +176,6 @@
 .seed-slider__valueIndicatorArrowTip {
     display: block;
     fill: var(--seed-color-bg-neutral-inverted);
-    width: var(--seed-dimension-x2_5);
-    height: 7px;
+    width: var(--seed-dimension-x2);
+    height: var(--seed-dimension-x1_5);
 }

package/vars/component/action-button.d.ts

@@ -21,15 +21,15 @@ export declare const vars: {
       "label": {
         "color": "var(--seed-color-palette-static-white)"
       },
-      /** Icon Only 레이아웃에서 사용되는 아이콘 슬롯입니다. */
+      /** layout=iconOnly에서 사용되는 아이콘 슬롯입니다. */
       "icon": {
         "color": "var(--seed-color-palette-static-white)"
       },
-      /** 주로 액션의 의미를 보조합니다. */
+      /** 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다. */
       "prefixIcon": {
         "color": "var(--seed-color-palette-static-white)"
       },
-      /** Chevron처럼 동작을 보조하는 역할입니다. */
+      /** Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다. */
       "suffixIcon": {
         "color": "var(--seed-color-palette-static-white)"
       },
@@ -50,15 +50,15 @@ export declare const vars: {
       "label": {
         "color": "var(--seed-color-fg-disabled)"
       },
-      /** Icon Only 레이아웃에서 사용되는 아이콘 슬롯입니다. */
+      /** layout=iconOnly에서 사용되는 아이콘 슬롯입니다. */
       "icon": {
         "color": "var(--seed-color-fg-disabled)"
       },
-      /** 주로 액션의 의미를 보조합니다. */
+      /** 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다. */
       "prefixIcon": {
         "color": "var(--seed-color-fg-disabled)"
       },
-      /** Chevron처럼 동작을 보조하는 역할입니다. */
+      /** Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다. */
       "suffixIcon": {
         "color": "var(--seed-color-fg-disabled)"
       }
@@ -80,15 +80,15 @@ export declare const vars: {
       "label": {
         "color": "var(--seed-color-fg-neutral-inverted)"
       },
-      /** Icon Only 레이아웃에서 사용되는 아이콘 슬롯입니다. */
+      /** layout=iconOnly에서 사용되는 아이콘 슬롯입니다. */
       "icon": {
         "color": "var(--seed-color-fg-neutral-inverted)"
       },
-      /** 주로 액션의 의미를 보조합니다. */
+      /** 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다. */
       "prefixIcon": {
         "color": "var(--seed-color-fg-neutral-inverted)"
       },
-      /** Chevron처럼 동작을 보조하는 역할입니다. */
+      /** Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다. */
       "suffixIcon": {
         "color": "var(--seed-color-fg-neutral-inverted)"
       },
@@ -109,15 +109,15 @@ export declare const vars: {
       "label": {
         "color": "var(--seed-color-fg-disabled)"
       },
-      /** Icon Only 레이아웃에서 사용되는 아이콘 슬롯입니다. */
+      /** layout=iconOnly에서 사용되는 아이콘 슬롯입니다. */
       "icon": {
         "color": "var(--seed-color-fg-disabled)"
       },
-      /** 주로 액션의 의미를 보조합니다. */
+      /** 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다. */
       "prefixIcon": {
         "color": "var(--seed-color-fg-disabled)"
       },
-      /** Chevron처럼 동작을 보조하는 역할입니다. */
+      /** Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다. */
       "suffixIcon": {
         "color": "var(--seed-color-fg-disabled)"
       }
@@ -139,15 +139,15 @@ export declare const vars: {
       "label": {
         "color": "var(--seed-color-fg-neutral)"
       },
-      /** Icon Only 레이아웃에서 사용되는 아이콘 슬롯입니다. */
+      /** layout=iconOnly에서 사용되는 아이콘 슬롯입니다. */
       "icon": {
         "color": "var(--seed-color-fg-neutral)"
       },
-      /** 주로 액션의 의미를 보조합니다. */
+      /** 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다. */
       "prefixIcon": {
         "color": "var(--seed-color-fg-neutral)"
       },
-      /** Chevron처럼 동작을 보조하는 역할입니다. */
+      /** Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다. */
       "suffixIcon": {
         "color": "var(--seed-color-fg-neutral)"
       },
@@ -168,15 +168,15 @@ export declare const vars: {
       "label": {
         "color": "var(--seed-color-fg-disabled)"
       },
-      /** Icon Only 레이아웃에서 사용되는 아이콘 슬롯입니다. */
+      /** layout=iconOnly에서 사용되는 아이콘 슬롯입니다. */
       "icon": {
         "color": "var(--seed-color-fg-disabled)"
       },
-      /** 주로 액션의 의미를 보조합니다. */
+      /** 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다. */
       "prefixIcon": {
         "color": "var(--seed-color-fg-disabled)"
       },
-      /** Chevron처럼 동작을 보조하는 역할입니다. */
+      /** Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다. */
       "suffixIcon": {
         "color": "var(--seed-color-fg-disabled)"
       }
@@ -198,15 +198,15 @@ export declare const vars: {
       "label": {
         "color": "var(--seed-color-palette-static-white)"
       },
-      /** Icon Only 레이아웃에서 사용되는 아이콘 슬롯입니다. */
+      /** layout=iconOnly에서 사용되는 아이콘 슬롯입니다. */
       "icon": {
         "color": "var(--seed-color-palette-static-white)"
       },
-      /** 주로 액션의 의미를 보조합니다. */
+      /** 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다. */
       "prefixIcon": {
         "color": "var(--seed-color-palette-static-white)"
       },
-      /** Chevron처럼 동작을 보조하는 역할입니다. */
+      /** Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다. */
       "suffixIcon": {
         "color": "var(--seed-color-palette-static-white)"
       },
@@ -227,15 +227,15 @@ export declare const vars: {
       "label": {
         "color": "var(--seed-color-fg-disabled)"
       },
-      /** Icon Only 레이아웃에서 사용되는 아이콘 슬롯입니다. */
+      /** layout=iconOnly에서 사용되는 아이콘 슬롯입니다. */
       "icon": {
         "color": "var(--seed-color-fg-disabled)"
       },
-      /** 주로 액션의 의미를 보조합니다. */
+      /** 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다. */
       "prefixIcon": {
         "color": "var(--seed-color-fg-disabled)"
       },
-      /** Chevron처럼 동작을 보조하는 역할입니다. */
+      /** Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다. */
       "suffixIcon": {
         "color": "var(--seed-color-fg-disabled)"
       }
@@ -247,7 +247,7 @@ export declare const vars: {
     }
   },
   /**
-   * Solid 타입과 함께 사용할 수 없으며, Brand Outline과 조합하여 사용하는 것을 권장합니다.
+   * variant=brandSolid, neutralSolid, criticalSolid와 함께 사용할 수 없으며, variant=brandOutline과 조합하여 사용하는 것을 권장합니다.
    */
   "variantNeutralOutline": {
     "enabled": {
@@ -259,15 +259,15 @@ export declare const vars: {
       "label": {
         "color": "var(--seed-color-fg-neutral)"
       },
-      /** Icon Only 레이아웃에서 사용되는 아이콘 슬롯입니다. */
+      /** layout=iconOnly에서 사용되는 아이콘 슬롯입니다. */
       "icon": {
         "color": "var(--seed-color-fg-neutral)"
       },
-      /** 주로 액션의 의미를 보조합니다. */
+      /** 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다. */
       "prefixIcon": {
         "color": "var(--seed-color-fg-neutral)"
       },
-      /** Chevron처럼 동작을 보조하는 역할입니다. */
+      /** Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다. */
       "suffixIcon": {
         "color": "var(--seed-color-fg-neutral)"
       },
@@ -289,15 +289,15 @@ export declare const vars: {
       "label": {
         "color": "var(--seed-color-fg-disabled)"
       },
-      /** Icon Only 레이아웃에서 사용되는 아이콘 슬롯입니다. */
+      /** layout=iconOnly에서 사용되는 아이콘 슬롯입니다. */
       "icon": {
         "color": "var(--seed-color-fg-disabled)"
       },
-      /** 주로 액션의 의미를 보조합니다. */
+      /** 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다. */
       "prefixIcon": {
         "color": "var(--seed-color-fg-disabled)"
       },
-      /** Chevron처럼 동작을 보조하는 역할입니다. */
+      /** Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다. */
       "suffixIcon": {
         "color": "var(--seed-color-fg-disabled)"
       }
@@ -309,7 +309,7 @@ export declare const vars: {
     }
   },
   /**
-   * Solid 타입과 함께 사용할 수 없으며, Neutral Outline과 조합하여 사용하는 것을 권장합니다.
+   * variant=brandSolid, neutralSolid, criticalSolid와 함께 사용할 수 없으며, variant=neutralOutline과 조합하여 사용하는 것을 권장합니다.
    */
   "variantBrandOutline": {
     "enabled": {
@@ -321,15 +321,15 @@ export declare const vars: {
       "label": {
         "color": "var(--seed-color-fg-brand)"
       },
-      /** Icon Only 레이아웃에서 사용되는 아이콘 슬롯입니다. */
+      /** layout=iconOnly에서 사용되는 아이콘 슬롯입니다. */
       "icon": {
         "color": "var(--seed-color-fg-brand)"
       },
-      /** 주로 액션의 의미를 보조합니다. */
+      /** 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다. */
       "prefixIcon": {
         "color": "var(--seed-color-fg-brand)"
       },
-      /** Chevron처럼 동작을 보조하는 역할입니다. */
+      /** Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다. */
       "suffixIcon": {
         "color": "var(--seed-color-fg-brand)"
       },
@@ -351,15 +351,15 @@ export declare const vars: {
       "label": {
         "color": "var(--seed-color-fg-disabled)"
       },
-      /** Icon Only 레이아웃에서 사용되는 아이콘 슬롯입니다. */
+      /** layout=iconOnly에서 사용되는 아이콘 슬롯입니다. */
       "icon": {
         "color": "var(--seed-color-fg-disabled)"
       },
-      /** 주로 액션의 의미를 보조합니다. */
+      /** 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다. */
       "prefixIcon": {
         "color": "var(--seed-color-fg-disabled)"
       },
-      /** Chevron처럼 동작을 보조하는 역할입니다. */
+      /** Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다. */
       "suffixIcon": {
         "color": "var(--seed-color-fg-disabled)"
       }
@@ -371,7 +371,7 @@ export declare const vars: {
     }
   },
   /**
-   * 배경 없이 텍스트와 아이콘만 표시됩니다.
+   * 배경 없이 텍스트와 아이콘만 표시됩니다. 모두 동일한 색상을 사용하는 조건에서 icon, prefix icon, suffix icon, label에 정의된 color를 변경할 수 있으며, label의 fontWeight를 `$font-weight.regular` 또는 `$font-weight.medium`으로 변경하여 주목도를 조절할 수 있습니다.
    */
   "variantGhost": {
     "enabled": {
@@ -381,15 +381,15 @@ export declare const vars: {
       "label": {
         "color": "var(--seed-color-fg-neutral)"
       },
-      /** Icon Only 레이아웃에서 사용되는 아이콘 슬롯입니다. */
+      /** layout=iconOnly에서 사용되는 아이콘 슬롯입니다. */
       "icon": {
         "color": "var(--seed-color-fg-neutral)"
       },
-      /** 주로 액션의 의미를 보조합니다. */
+      /** 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다. */
       "prefixIcon": {
         "color": "var(--seed-color-fg-neutral)"
       },
-      /** Chevron처럼 동작을 보조하는 역할입니다. */
+      /** Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다. */
       "suffixIcon": {
         "color": "var(--seed-color-fg-neutral)"
       },
@@ -410,15 +410,15 @@ export declare const vars: {
       "label": {
         "color": "var(--seed-color-fg-disabled)"
       },
-      /** Icon Only 레이아웃에서 사용되는 아이콘 슬롯입니다. */
+      /** layout=iconOnly에서 사용되는 아이콘 슬롯입니다. */
       "icon": {
         "color": "var(--seed-color-fg-disabled)"
       },
-      /** 주로 액션의 의미를 보조합니다. */
+      /** 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다. */
       "prefixIcon": {
         "color": "var(--seed-color-fg-disabled)"
       },
-      /** Chevron처럼 동작을 보조하는 역할입니다. */
+      /** Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다. */
       "suffixIcon": {
         "color": "var(--seed-color-fg-disabled)"
       }
@@ -455,11 +455,11 @@ export declare const vars: {
         "paddingX": "var(--seed-dimension-x3_5)",
         "paddingY": "var(--seed-dimension-x1_5)"
       },
-      /** 주로 액션의 의미를 보조합니다. */
+      /** 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다. */
       "prefixIcon": {
         "size": "var(--seed-dimension-x3_5)"
       },
-      /** Chevron처럼 동작을 보조하는 역할입니다. */
+      /** Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다. */
       "suffixIcon": {
         "size": "var(--seed-dimension-x3_5)"
       },
@@ -471,7 +471,7 @@ export declare const vars: {
   },
   /**
    * - `size=xsmall`: 작은 공간에서 효율적으로 사용할 수 있는 Pill 형태로 제공됩니다.
-   * - `layout=iconOnly`: 아이콘만으로 의미를 전달하기 때문에 접근성이 떨어집니다. 꼭 필요한 경우에만 사용하는 것을 권장합니다.
+   * - `layout=iconOnly`: 아이콘만으로 의미를 전달하기 때문에 접근성이 떨어집니다. 꼭 필요한 경우에만 접근성 레이블과 함께 사용하는 것을 권장합니다.
    */
   "sizeXsmallLayoutIconOnly": {
     "enabled": {
@@ -480,7 +480,7 @@ export declare const vars: {
         "paddingX": "var(--seed-dimension-x1_5)",
         "paddingY": "var(--seed-dimension-x1_5)"
       },
-      /** Icon Only 레이아웃에서 사용되는 아이콘 슬롯입니다. */
+      /** layout=iconOnly에서 사용되는 아이콘 슬롯입니다. */
       "icon": {
         "size": "var(--seed-dimension-x3_5)"
       }
@@ -512,11 +512,11 @@ export declare const vars: {
         "paddingX": "var(--seed-dimension-x3_5)",
         "paddingY": "var(--seed-dimension-x2)"
       },
-      /** 주로 액션의 의미를 보조합니다. */
+      /** 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다. */
       "prefixIcon": {
         "size": "var(--seed-dimension-x3_5)"
       },
-      /** Chevron처럼 동작을 보조하는 역할입니다. */
+      /** Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다. */
       "suffixIcon": {
         "size": "var(--seed-dimension-x3_5)"
       },
@@ -528,7 +528,7 @@ export declare const vars: {
   },
   /**
    * - `size=small`: 화면 중앙에서 범용적으로 사용됩니다.
-   * - `layout=iconOnly`: 아이콘만으로 의미를 전달하기 때문에 접근성이 떨어집니다. 꼭 필요한 경우에만 사용하는 것을 권장합니다.
+   * - `layout=iconOnly`: 아이콘만으로 의미를 전달하기 때문에 접근성이 떨어집니다. 꼭 필요한 경우에만 접근성 레이블과 함께 사용하는 것을 권장합니다.
    */
   "sizeSmallLayoutIconOnly": {
     "enabled": {
@@ -537,7 +537,7 @@ export declare const vars: {
         "paddingX": "var(--seed-dimension-x2)",
         "paddingY": "var(--seed-dimension-x2)"
       },
-      /** Icon Only 레이아웃에서 사용되는 아이콘 슬롯입니다. */
+      /** layout=iconOnly에서 사용되는 아이콘 슬롯입니다. */
       "icon": {
         "size": "var(--seed-dimension-x4)"
       }
@@ -569,11 +569,11 @@ export declare const vars: {
         "paddingX": "var(--seed-dimension-x4)",
         "paddingY": "var(--seed-dimension-x2_5)"
       },
-      /** 주로 액션의 의미를 보조합니다. */
+      /** 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다. */
       "prefixIcon": {
         "size": "var(--seed-dimension-x4)"
       },
-      /** Chevron처럼 동작을 보조하는 역할입니다. */
+      /** Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다. */
       "suffixIcon": {
         "size": "var(--seed-dimension-x4)"
       },
@@ -585,7 +585,7 @@ export declare const vars: {
   },
   /**
    * - `size=medium`: 화면 중앙에서 범용적으로 사용됩니다.
-   * - `layout=iconOnly`: 아이콘만으로 의미를 전달하기 때문에 접근성이 떨어집니다. 꼭 필요한 경우에만 사용하는 것을 권장합니다.
+   * - `layout=iconOnly`: 아이콘만으로 의미를 전달하기 때문에 접근성이 떨어집니다. 꼭 필요한 경우에만 접근성 레이블과 함께 사용하는 것을 권장합니다.
    */
   "sizeMediumLayoutIconOnly": {
     "enabled": {
@@ -594,7 +594,7 @@ export declare const vars: {
         "paddingX": "var(--seed-dimension-x2_5)",
         "paddingY": "var(--seed-dimension-x2_5)"
       },
-      /** Icon Only 레이아웃에서 사용되는 아이콘 슬롯입니다. */
+      /** layout=iconOnly에서 사용되는 아이콘 슬롯입니다. */
       "icon": {
         "size": "18px"
       }
@@ -626,11 +626,11 @@ export declare const vars: {
         "paddingX": "var(--seed-dimension-x5)",
         "paddingY": "var(--seed-dimension-x3_5)"
       },
-      /** 주로 액션의 의미를 보조합니다. */
+      /** 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다. */
       "prefixIcon": {
         "size": "22px"
       },
-      /** Chevron처럼 동작을 보조하는 역할입니다. */
+      /** Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다. */
       "suffixIcon": {
         "size": "22px"
       },
@@ -642,7 +642,7 @@ export declare const vars: {
   },
   /**
    * - `size=large`: 주로 CTA 역할로 사용됩니다.
-   * - `layout=iconOnly`: 아이콘만으로 의미를 전달하기 때문에 접근성이 떨어집니다. 꼭 필요한 경우에만 사용하는 것을 권장합니다.
+   * - `layout=iconOnly`: 아이콘만으로 의미를 전달하기 때문에 접근성이 떨어집니다. 꼭 필요한 경우에만 접근성 레이블과 함께 사용하는 것을 권장합니다.
    */
   "sizeLargeLayoutIconOnly": {
     "enabled": {
@@ -651,7 +651,7 @@ export declare const vars: {
         "paddingX": "var(--seed-dimension-x3_5)",
         "paddingY": "var(--seed-dimension-x3_5)"
       },
-      /** Icon Only 레이아웃에서 사용되는 아이콘 슬롯입니다. */
+      /** layout=iconOnly에서 사용되는 아이콘 슬롯입니다. */
       "icon": {
         "size": "22px"
       }

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

@@ -54,7 +54,7 @@ export declare const vars: {
   "headerAlignmentLeftCloseButtonTrue": {
     "enabled": {
       "title": {
-        "paddingRight": "50px",
+        "paddingRight": "56px",
         "paddingLeft": "var(--seed-dimension-spacing-x-global-gutter)"
       }
     }
@@ -70,8 +70,8 @@ export declare const vars: {
   "headerAlignmentCenterCloseButtonTrue": {
     "enabled": {
       "title": {
-        "paddingLeft": "60px",
-        "paddingRight": "60px"
+        "paddingLeft": "56px",
+        "paddingRight": "56px"
       }
     }
   },

package/vars/component/bottom-sheet.mjs

@@ -54,7 +54,7 @@ export const vars = {
   "headerAlignmentLeftCloseButtonTrue": {
     "enabled": {
       "title": {
-        "paddingRight": "50px",
+        "paddingRight": "56px",
         "paddingLeft": "var(--seed-dimension-spacing-x-global-gutter)"
       }
     }
@@ -70,8 +70,8 @@ export const vars = {
   "headerAlignmentCenterCloseButtonTrue": {
     "enabled": {
       "title": {
-        "paddingLeft": "60px",
-        "paddingRight": "60px"
+        "paddingLeft": "56px",
+        "paddingRight": "56px"
       }
     }
   },