@seed-design/lynx-css 0.14.1 → 1.0.0

package/recipes/select-trigger.css

@@ -10,6 +10,13 @@
     border-width: 1px;
     border-color: var(--seed-color-stroke-neutral-weak)
 }
+.seed-select-trigger__scaleContent {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    min-width: 0
+}
 .seed-select-trigger__pressedOverlay {
     position: absolute;
     top: 0;
@@ -59,11 +66,13 @@
 }
 .seed-select-trigger__root--size_large {
     height: var(--seed-dimension-x13);
-    gap: var(--seed-dimension-x2_5);
     padding-left: var(--seed-dimension-x4);
     padding-right: var(--seed-dimension-x4);
     border-radius: var(--seed-radius-r3)
 }
+.seed-select-trigger__scaleContent--size_large {
+    gap: var(--seed-dimension-x2_5)
+}
 .seed-select-trigger__pressedOverlay--size_large {
     border-radius: var(--seed-radius-r3)
 }
@@ -85,11 +94,13 @@
 }
 .seed-select-trigger__root--size_medium {
     height: var(--seed-dimension-x10);
-    gap: var(--seed-dimension-x2);
     padding-left: var(--seed-dimension-x3_5);
     padding-right: var(--seed-dimension-x3_5);
     border-radius: var(--seed-radius-r2)
 }
+.seed-select-trigger__scaleContent--size_medium {
+    gap: var(--seed-dimension-x2)
+}
 .seed-select-trigger__pressedOverlay--size_medium {
     border-radius: var(--seed-radius-r2)
 }

package/recipes/select-trigger.d.ts

@@ -31,7 +31,7 @@ declare type SelectTriggerVariantMap = {
 
 export declare type SelectTriggerVariantProps = Partial<SelectTriggerVariant>;
 
-export declare type SelectTriggerSlotName = "root" | "pressedOverlay" | "value" | "placeholder" | "prefixIcon" | "suffixIcon";
+export declare type SelectTriggerSlotName = "root" | "scaleContent" | "pressedOverlay" | "value" | "placeholder" | "prefixIcon" | "suffixIcon";
 
 export declare const selectTriggerVariantMap: SelectTriggerVariantMap;
 

package/recipes/select-trigger.mjs

@@ -6,6 +6,10 @@ const selectTriggerSlotNames = [
     "root",
     "seed-select-trigger__root"
   ],
+  [
+    "scaleContent",
+    "seed-select-trigger__scaleContent"
+  ],
   [
     "pressedOverlay",
     "seed-select-trigger__pressedOverlay"

package/recipes/select.css

@@ -1,17 +1,5 @@
 .seed-select__positioner {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 0
-}
-.seed-select__backdrop {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0
+    z-index: 99
 }
 .seed-select__content {
     position: absolute;

package/recipes/select.d.ts

@@ -19,7 +19,7 @@ declare type SelectVariantMap = {
 
 export declare type SelectVariantProps = Partial<SelectVariant>;
 
-export declare type SelectSlotName = "positioner" | "backdrop" | "content" | "scrollArea" | "scrollContent" | "group" | "groupLabel" | "separator";
+export declare type SelectSlotName = "positioner" | "content" | "scrollArea" | "scrollContent" | "group" | "groupLabel" | "separator";
 
 export declare const selectVariantMap: SelectVariantMap;
 

package/recipes/select.mjs

@@ -6,10 +6,6 @@ const selectSlotNames = [
     "positioner",
     "seed-select__positioner"
   ],
-  [
-    "backdrop",
-    "seed-select__backdrop"
-  ],
   [
     "content",
     "seed-select__content"

package/recipes/slider-marker.css

@@ -3,8 +3,8 @@
     top: 0;
     bottom: 0;
     width: max-content;
-    left: calc(var(--slider-marker-left, 0%) + var(--slider-marker-offset, 0px));
-    color: var(--slider-marker-color, var(--seed-color-fg-neutral-muted));
+    left: calc(var(--slider-marker-left, 0%) + var(--seed-dimension-x5) * var(--slider-marker-offset-ratio, 0));
+    color: var(--seed-color-fg-neutral-muted);
     font-weight: var(--seed-font-weight-regular);
     font-size: var(--seed-font-size-t3);
     line-height: var(--seed-line-height-t3)

package/recipes/slider-tick.css

@@ -2,7 +2,7 @@
     position: absolute;
     top: 50%;
     height: 100%;
-    left: calc(var(--slider-tick-left, 0%) + var(--slider-tick-offset, 0px));
+    left: calc(var(--slider-tick-left, 0%) + var(--seed-dimension-x5) * var(--slider-tick-offset-ratio, 0));
     background-color: var(--seed-color-fg-on-neutral-solid);
     transform: translate(-50%, -50%)
 }

package/recipes/slider.css

@@ -32,7 +32,7 @@
 .seed-slider__thumb {
     position: absolute;
     top: 50%;
-    left: calc(var(--slider-thumb-left, 0%) + var(--slider-thumb-offset, 0px));
+    left: calc(var(--slider-thumb-left, 0%) + var(--seed-dimension-x5) * var(--slider-thumb-offset-ratio, 0));
     width: var(--seed-dimension-x5);
     height: var(--seed-dimension-x5);
     background-color: var(--seed-color-bg-neutral-solid);
@@ -51,6 +51,7 @@
     top: 50%;
     left: calc(var(--slider-value-indicator-left, 0%) + var(--slider-value-indicator-offset, 0px));
     width: max-content;
+    height: max-content;
     padding-top: 8px;
     padding-right: 8px;
     padding-bottom: 8px;
@@ -99,7 +100,6 @@
     line-height: var(--seed-line-height-t3);
     font-weight: var(--seed-font-weight-medium);
     flex-shrink: 0;
-    white-space: nowrap;
     text-align: center
 }
 .seed-slider__track--disabled_true {
@@ -111,9 +111,6 @@
 .seed-slider__thumb--disabled_true {
     background-color: var(--seed-color-fg-disabled)
 }
-.seed-slider__markers--disabled_true {
-    --slider-marker-color: var(--seed-color-fg-disabled)
-}
 .seed-slider__range--dragging_true {
     transition: none
 }

package/recipes/tabs.css

@@ -3,10 +3,7 @@
 }
 .seed-tabs__list {
     position: relative;
-    background-color: var(--seed-color-bg-layer-default);
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    border-bottom-color: var(--seed-color-stroke-neutral-muted)
+    background-color: var(--seed-color-bg-layer-default)
 }
 .seed-tabs__listContent {
     display: flex;
@@ -15,7 +12,9 @@
     flex-wrap: nowrap;
     align-items: stretch;
     width: max-content;
-    min-width: 100%
+    min-width: 100%;
+    padding-bottom: 1px;
+    box-shadow: inset 0 -1px 0 0 var(--seed-color-stroke-neutral-muted)
 }
 .seed-tabs__carousel {
     display: flex;
@@ -34,9 +33,9 @@
     left: 0px;
     bottom: 0px;
     height: 2px;
-    width: var(--tabs-indicator-width, 0px);
     background-color: var(--seed-color-fg-neutral);
-    transform: translateX(var(--tabs-indicator-x, 0px));
+    box-sizing: border-box;
+    background-clip: content-box;
     transition-property: transform, width;
     transition-duration: var(--seed-duration-d4);
     transition-timing-function: var(--seed-timing-function-easing)
@@ -62,8 +61,8 @@
     padding-right: 0px
 }
 .seed-tabs__indicator--triggerLayout_fill {
-    transform: translateX(calc(var(--tabs-indicator-x, 0px) + var(--seed-dimension-spacing-x-global-gutter)));
-    width: calc(var(--tabs-indicator-width, 0px) - 2 * var(--seed-dimension-spacing-x-global-gutter))
+    padding-left: var(--seed-dimension-spacing-x-global-gutter);
+    padding-right: var(--seed-dimension-spacing-x-global-gutter)
 }
 .seed-tabs__trigger--triggerLayout_fill {
     flex: 1
@@ -73,8 +72,9 @@
     padding-right: var(--seed-dimension-spacing-x-global-gutter)
 }
 .seed-tabs__indicator--triggerLayout_hug {
-    transform: translateX(calc(var(--tabs-indicator-x, 0px) + var(--seed-dimension-spacing-x-global-gutter) + 0px));
-    width: calc(var(--tabs-indicator-width, 0px) - 2 * 0px)
+    left: var(--seed-dimension-spacing-x-global-gutter);
+    padding-left: 0px;
+    padding-right: 0px
 }
 .seed-tabs__root--contentLayout_fill {
     display: flex;

package/recipes/wheel-picker.css

@@ -0,0 +1,151 @@
+.seed-wheel-picker__root {
+    position: relative;
+    width: 100%;
+    z-index: 0;
+    overflow: hidden;
+    background-color: var(--seed-color-bg-layer-floating);
+}
+.seed-wheel-picker__scrollFog {
+    position: relative;
+    z-index: 1;
+    height: 100%;
+    overflow: hidden;
+}
+.seed-wheel-picker__columns {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+}
+.seed-wheel-picker__column {
+    position: relative;
+    flex-shrink: 0;
+    width: max-content;
+    height: 100%;
+}
+.seed-wheel-picker__track {
+    color: var(--seed-color-fg-disabled);
+}
+.seed-wheel-picker__sizingContent {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: max-content;
+    height: 0;
+    overflow: hidden;
+    opacity: 0;
+    pointer-events: none;
+}
+.seed-wheel-picker__item {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    color: var(--seed-color-fg-disabled);
+}
+.seed-wheel-picker__item text {
+    color: var(--seed-color-fg-disabled);
+}
+.seed-wheel-picker__itemLabel {
+    display: flex;
+    flex-direction: row;
+    flex-shrink: 0;
+    width: max-content;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    padding-left: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4);
+    font-weight: var(--seed-font-weight-medium);
+    color: var(--seed-color-fg-disabled);
+}
+.seed-wheel-picker__itemText {
+    font-weight: var(--seed-font-weight-medium);
+    color: var(--seed-color-fg-disabled);
+}
+.seed-wheel-picker__selectionIndicator {
+    position: absolute;
+    z-index: 0;
+    left: var(--seed-dimension-x4);
+    right: var(--seed-dimension-x4);
+    top: 50%;
+    transform: translateY(-50%);
+    border-radius: var(--seed-radius-r2);
+    background-color: var(--seed-color-bg-neutral-weak);
+    pointer-events: none;
+}
+.seed-wheel-picker__root--size_small {
+    height: var(--seed-wheel-picker-viewport-size, 180px);
+}
+.seed-wheel-picker__selectionIndicator--size_small {
+    height: var(--seed-wheel-picker-item-size, 36px);
+}
+.seed-wheel-picker__itemLabel--size_small {
+    font-size: var(--seed-font-size-t7-static);
+    line-height: var(--seed-line-height-t7-static);
+}
+.seed-wheel-picker__itemText--size_small {
+    font-size: var(--seed-font-size-t7-static);
+    line-height: var(--seed-line-height-t7-static);
+}
+.seed-wheel-picker__root--size_medium {
+    height: var(--seed-wheel-picker-viewport-size, 220px);
+}
+.seed-wheel-picker__selectionIndicator--size_medium {
+    height: var(--seed-wheel-picker-item-size, 44px);
+}
+.seed-wheel-picker__itemLabel--size_medium {
+    font-size: var(--seed-font-size-t10-static);
+    line-height: var(--seed-line-height-t10-static);
+}
+.seed-wheel-picker__itemText--size_medium {
+    font-size: var(--seed-font-size-t10-static);
+    line-height: var(--seed-line-height-t10-static);
+}
+.seed-wheel-picker__track--selected_true {
+    color: var(--seed-color-fg-neutral);
+}
+.seed-wheel-picker__item--selected_true {
+    color: var(--seed-color-fg-neutral);
+}
+.seed-wheel-picker__item--selected_true text {
+    color: var(--seed-color-fg-neutral);
+}
+.seed-wheel-picker__itemLabel--selected_true {
+    color: var(--seed-color-fg-neutral);
+}
+.seed-wheel-picker__itemText--selected_true {
+    color: var(--seed-color-fg-neutral);
+}
+.seed-wheel-picker__track--disabled_true {
+    color: var(--seed-color-fg-disabled);
+}
+.seed-wheel-picker__item--disabled_true {
+    color: var(--seed-color-fg-disabled);
+}
+.seed-wheel-picker__item--disabled_true text {
+    color: var(--seed-color-fg-disabled);
+}
+.seed-wheel-picker__itemLabel--disabled_true {
+    color: var(--seed-color-fg-disabled);
+}
+.seed-wheel-picker__itemText--disabled_true {
+    color: var(--seed-color-fg-disabled);
+}
+.seed-wheel-picker__track--selected_true-disabled_true {
+    color: var(--seed-color-fg-disabled);
+}
+.seed-wheel-picker__item--selected_true-disabled_true {
+    color: var(--seed-color-fg-disabled);
+}
+.seed-wheel-picker__item--selected_true-disabled_true text {
+    color: var(--seed-color-fg-disabled);
+}
+.seed-wheel-picker__itemLabel--selected_true-disabled_true {
+    color: var(--seed-color-fg-disabled);
+}
+.seed-wheel-picker__itemText--selected_true-disabled_true {
+    color: var(--seed-color-fg-disabled);
+}

package/recipes/wheel-picker.d.ts

@@ -0,0 +1,32 @@
+declare interface WheelPickerVariant {
+  /**
+  * @default "medium"
+  */
+  size: "small" | "medium";
+/**
+  * @default false
+  */
+  selected: boolean;
+/**
+  * @default false
+  */
+  disabled: boolean;
+}
+
+declare type WheelPickerVariantMap = {
+  [key in keyof WheelPickerVariant]: Array<WheelPickerVariant[key]>;
+};
+
+export declare type WheelPickerVariantProps = Partial<WheelPickerVariant>;
+
+export declare type WheelPickerSlotName = "root" | "scrollFog" | "columns" | "column" | "track" | "sizingContent" | "item" | "itemLabel" | "itemText" | "selectionIndicator";
+
+export declare const wheelPickerVariantMap: WheelPickerVariantMap;
+
+export declare const wheelPicker: ((
+  props?: WheelPickerVariantProps,
+) => Record<WheelPickerSlotName, string>) & {
+  splitVariantProps: <T extends WheelPickerVariantProps>(
+    props: T,
+  ) => [WheelPickerVariantProps, Omit<T, keyof WheelPickerVariantProps>];
+}

package/recipes/wheel-picker.mjs

@@ -0,0 +1,90 @@
+import './wheel-picker.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const wheelPickerSlotNames = [
+  [
+    "root",
+    "seed-wheel-picker__root"
+  ],
+  [
+    "scrollFog",
+    "seed-wheel-picker__scrollFog"
+  ],
+  [
+    "columns",
+    "seed-wheel-picker__columns"
+  ],
+  [
+    "column",
+    "seed-wheel-picker__column"
+  ],
+  [
+    "track",
+    "seed-wheel-picker__track"
+  ],
+  [
+    "sizingContent",
+    "seed-wheel-picker__sizingContent"
+  ],
+  [
+    "item",
+    "seed-wheel-picker__item"
+  ],
+  [
+    "itemLabel",
+    "seed-wheel-picker__itemLabel"
+  ],
+  [
+    "itemText",
+    "seed-wheel-picker__itemText"
+  ],
+  [
+    "selectionIndicator",
+    "seed-wheel-picker__selectionIndicator"
+  ]
+];
+
+const defaultVariant = {
+  "size": "medium",
+  "selected": false,
+  "disabled": false
+};
+
+const compoundVariants = [
+  {
+    "selected": true,
+    "disabled": true
+  }
+];
+
+export const wheelPickerVariantMap = {
+  "size": [
+    "small",
+    "medium"
+  ],
+  "selected": [
+    true,
+    false
+  ],
+  "disabled": [
+    true,
+    false
+  ]
+};
+
+export const wheelPickerVariantKeys = Object.keys(wheelPickerVariantMap);
+
+export function wheelPicker(props) {
+  return Object.fromEntries(
+    wheelPickerSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(wheelPicker, { splitVariantProps: (props) => splitVariantProps(props, wheelPickerVariantMap) });
+
+// @recipe(seed): wheel-picker

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/page-banner-close-button.d.ts

@@ -55,7 +55,7 @@ export declare const vars: {
   "tonePositiveVariantSolid": {
     "enabled": {
       "icon": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-positive-solid)"
       }
     }
   },
@@ -75,7 +75,7 @@ export declare const vars: {
   "toneInformativeVariantSolid": {
     "enabled": {
       "icon": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-informative-solid)"
       }
     }
   },
@@ -95,7 +95,7 @@ export declare const vars: {
   "toneWarningVariantSolid": {
     "enabled": {
       "icon": {
-        "color": "var(--seed-color-palette-static-black-alpha-900)"
+        "color": "var(--seed-color-fg-on-warning-solid)"
       }
     }
   },
@@ -115,7 +115,7 @@ export declare const vars: {
   "toneCriticalVariantSolid": {
     "enabled": {
       "icon": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-critical-solid)"
       }
     }
   },