sellmate-design-system-react 9.0.0-beta.26 → 9.0.0-beta.28

package/dist/lib/floating-height.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Radix Floating Content 를 창 높이 안에 가두기 위한 헬퍼 — floating-width.ts 의 높이 버전.
+ *
+ * Radix 는 충돌이 나면 위치만 밀 뿐(shift) 높이는 줄이지 않는다 — 콘텐츠가 창보다 높으면
+ * 밀려난 자리에서 그대로 화면 밖으로 삐져나간다. 실제로 줄이려면 size 미들웨어가 계산해
+ * 두는 available-height 를 상한으로 직접 걸어야 한다.
+ */
+/** Radix Popover 계열(SPortal·SSelect·SChipInput·SPopover·STooltip 등)이 노출하는 가용 높이. */
+export declare const POPOVER_AVAILABLE_HEIGHT = "var(--radix-popover-content-available-height)";
+/** Radix DropdownMenu 계열(SDropdownButton)이 노출하는 가용 높이. */
+export declare const DROPDOWN_AVAILABLE_HEIGHT = "var(--radix-dropdown-menu-content-available-height)";
+/**
+ * 높이 제약을 가용 높이 안으로 가둔다. 값이 없으면 가용 높이 자체가 상한이 된다.
+ */
+export declare function clampToAvailableHeight(value: string | number | undefined, availableHeight: string): string;

package/dist/llms-full.txt

@@ -2083,6 +2083,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 | typo-body-sm-bold | 12px | 700 | 20px |
 | typo-body-md-default | 14px | 400 | 24px |
 | typo-body-md-medium | 14px | 500 | 24px |
+| typo-body-md-semibold | 14px | 600 | 24px |
 | typo-body-md-bold | 14px | 700 | 24px |
 | typo-body-lg-default | 16px | 400 | 26px |
 | typo-body-lg-medium | 16px | 500 | 26px |
@@ -2939,12 +2940,17 @@ export interface SChipFilterFieldBase {
 ```ts
 /** 프리셋으로 기간을 고르는 필터 — datepicker-range·datepicker-statistics */
 export interface SChipFilterPresetsField extends SChipFilterFieldBase {
-  /** 프리셋 라디오 목록. datepicker-range에서 지정하지 않으면 프리셋 없이 기간 피커 하나만 놓이고,
-   *  datepicker-statistics에서 지정하지 않으면 일별·월별·분기별·반기별·연도별·사용자 지정 기본 목록을 쓴다 */
+  /** 프리셋 라디오 목록. 지정하지 않으면 타입별 기본 목록을 쓴다 —
+   *  datepicker-range: 오늘·지난 7일·지난 30일·사용자 지정,
+   *  datepicker-statistics: 일별·월별·분기별·반기별·연도별·사용자 지정.
+   *  프리셋 라디오 없이 캘린더(datepicker-range) 하나만 두려면 presets: [] 를 명시한다 */
   presets?: SChipFilterDatePreset[];
   /** 선택 가능 범위 */
   selectable?: [string, string];
-  /** "사용자 지정" 프리셋으로 기간을 고를 때의 최대 선택 일수 */
+  /** "사용자 지정" 프리셋으로 기간을 고를 때의 최대 선택 일수.
+   *  지정하지 않아도 presets에 custom 프리셋이 있으면 기본 90일이 적용된다 — 무제한 기간
+   *  집계·조회로 백엔드에 과도한 요청이 가는 것을 막기 위한 안전장치. 다른 상한이 필요하면
+   *  이 값을 직접 지정한다 */
   maxRange?: number;
 }
 ```
@@ -3001,10 +3007,10 @@ export interface SChipFilterDatePreset {
 
 - [SDatePicker](../SDatePicker)
 - [SDateRangePicker](../SDateRangePicker)
-- [SGhostButton](../SGhostButton)
 - [SIcon](../SIcon)
 - [SRadio](../SRadio)
 - [SRadioButton](../SRadioButton)
+- [SSearchInput](../SSearchInput)
 - [STag](../STag)
 - [STextLink](../STextLink)
 - [STooltip](../STooltip)
@@ -4343,7 +4349,6 @@ export type SGhostButtonIntent = 'default' | 'danger' | 'action' | 'subAction' |
  - [SBarcodeInput](../SBarcodeInput)
  - [SCalendar](../SCalendar)
  - [SChip](../SChip)
- - [SChipFilter](../SChipFilter)
  - [SDatePicker](../SDatePicker)
  - [SDateRangePicker](../SDateRangePicker)
  - [SFilePicker](../SFilePicker)
@@ -4885,6 +4890,7 @@ export type SLayoutHeader = SGnbHeader;
 |------|------|---------|-------------|
 | `value?` | `number` | `0` | 진행률 (0–100) |
 | `type?` | `SLinearProgressType` | `'primary'` | 색상 타입 |
+| `size?` | `SLinearProgressSize` | `'sm'` | 바 높이. xs 는 바 안에 퍼센트 텍스트를 넣지 않는다 |
 | `indeterminate?` | `boolean` | `false` | 진행률 없이 무한 애니메이션 |
 | `label?` | `string` | — | 하단 레이블 |
 | `className?` | `string` | — |  |
@@ -4898,6 +4904,12 @@ export type SLayoutHeader = SGnbHeader;
 export type SLinearProgressType = 'primary' | 'error' | 'complete';
 ```
 
+### SLinearProgressSize
+
+```ts
+export type SLinearProgressSize = 'xs' | 'sm' | 'md';
+```
+
 ---
 
 # SList
@@ -5890,7 +5902,7 @@ export interface SRadioButtonOption {
 ### SRadioButtonSize
 
 ```ts
-export type SRadioButtonSize = 'xs' | 'sm';
+export type SRadioButtonSize = 'xs' | 'sm' | 'md';
 ```
 
 ## Dependencies
@@ -5978,6 +5990,7 @@ export type SSearchInputSize = SFieldSize;
 
 ### Used by
 
+ - [SChipFilter](../SChipFilter)
  - [SSelect](../SSelect)
 
 ### Depends on
@@ -6085,7 +6098,7 @@ export type SSectionHeaderCardChildren = ReactNode;
 | `error?` | `boolean` | `false` | 에러 상태 |
 | `rules?` | `Rule[]` | — | 유효성 규칙 — 닫힐 때 자동 검증 |
 | `labelTooltipProps?` | `Partial<STooltipProps>` | — | 레이블 툴팁 상세 옵션 |
-| `dropdownHeight?` | `string` | `'260px'` | 드롭다운 최대 높이 |
+| `dropdownHeight?` | `string` | `'640px'` | 드롭다운 최대 높이. 기본 640px — 창이 이보다 작으면 창 안에 남는 만큼까지만 채워진다 |
 | `dropdownWidth?` | `string` | — | 드롭다운 너비 (없으면 트리거 너비). 창보다 넓게 줘도 창 폭까지만 벌어진다. |
 | `maxDropdownWidth?` | `string` | `'640px'` | 드롭다운 최대 너비. 창이 이보다 좁으면 창 폭이 상한이 된다. |
 | `label?` | `string` | — |  |
@@ -6664,6 +6677,7 @@ export interface STabOption {
 | `shape?` | `STagShape` | `'square'` | 모양 |
 | `size?` | `STagSize` | `'sm'` | 크기 |
 | `color?` | `STagColor` | `'grey'` | 색상 |
+| `deep?` | `boolean` | `false` | 진한 배경(deep) 버전. 배경에 강조색을 채우고 텍스트·아이콘을 반전색으로 쓴다 |
 | `label?` | `string` | `''` | 레이블 텍스트 |
 | `icon?` | `SIconName` | — | 아이콘명 |
 | `iconLeft?` | `boolean` | `true` | 아이콘을 레이블 왼쪽에 배치 |

package/dist/llms.txt

@@ -2084,6 +2084,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 | typo-body-sm-bold | 12px | 700 | 20px |
 | typo-body-md-default | 14px | 400 | 24px |
 | typo-body-md-medium | 14px | 500 | 24px |
+| typo-body-md-semibold | 14px | 600 | 24px |
 | typo-body-md-bold | 14px | 700 | 24px |
 | typo-body-lg-default | 16px | 400 | 26px |
 | typo-body-lg-medium | 16px | 500 | 26px |

package/dist/styles.css

@@ -364,15 +364,15 @@
     --opacity-040: 40%;
     --opacity-060: 60%;
     --z-raised: 1;
-    --shadow-normal-xs: 0px 0px 16px -4px rgba(34,34,34,0.12), 2px 4px 6px -2px rgba(34,34,34,0.1);
-    --shadow-normal-sm: 0px 0px 24px -6px rgba(34,34,34,0.12), 4px 8px 16px -4px rgba(34,34,34,0.1);
-    --shadow-normal-md: 0px 8px 36px -6px rgba(34,34,34,0.16), 4px 12px 16px -4px rgba(34,34,34,0.12);
+    --shadow-normal-xs: 0px 0px 16px -4px rgba(34,34,34,0.12), 2px 2px 6px -2px rgba(34,34,34,0.16);
+    --shadow-normal-sm: 0px 0px 24px -6px rgba(34,34,34,0.12), 4px 4px 16px -4px rgba(34,34,34,0.2);
+    --shadow-normal-md: 0px 8px 36px -6px rgba(34,34,34,0.16), 4px 8px 12px -4px rgba(34,34,34,0.16);
     --shadow-spread-sm: 0px 0px 8px 0px rgba(34,34,34,0.1);
     --shadow-spread-md: 0px 0px 24px 0px rgba(34,34,34,0.2);
     --shadow-focus: 0px 0px 8px 0px rgba(0,117,255,0.25);
-    --shadow-overlay: 0px 0px 16px -4px rgba(34,34,34,0.12), 2px 4px 6px -2px rgba(34,34,34,0.1);
-    --shadow-floating: 0px 0px 24px -6px rgba(34,34,34,0.12), 4px 8px 16px -4px rgba(34,34,34,0.1);
-    --shadow-dialog: 0px 8px 36px -6px rgba(34,34,34,0.16), 4px 12px 16px -4px rgba(34,34,34,0.12);
+    --shadow-overlay: 0px 0px 16px -4px rgba(34,34,34,0.12), 2px 2px 6px -2px rgba(34,34,34,0.16);
+    --shadow-floating: 0px 0px 24px -6px rgba(34,34,34,0.12), 4px 4px 16px -4px rgba(34,34,34,0.2);
+    --shadow-dialog: 0px 8px 36px -6px rgba(34,34,34,0.16), 4px 8px 12px -4px rgba(34,34,34,0.16);
     --animate-linear-indeterminate: linear-indeterminate 1.2s linear infinite;
     --animate-circle-spin: circle-spin 2s linear infinite;
     --animate-circle-arc: circle-arc 1.5s ease-in-out infinite;
@@ -1099,12 +1099,6 @@
   .h-sd-48 {
     height: var(--spacing-sd-48);
   }
-  .max-h-\[220px\] {
-    max-height: 220px;
-  }
-  .max-h-\[240px\] {
-    max-height: 240px;
-  }
   .max-h-\[calc\(100dvh-48px\)\] {
     max-height: calc(100dvh - 48px);
   }
@@ -1998,10 +1992,6 @@
     border-top-left-radius: 4px;
     border-bottom-left-radius: 4px;
   }
-  .rounded-l-\[var\(--cmp-radioButton-radius\)\] {
-    border-top-left-radius: var(--cmp-radioButton-radius);
-    border-bottom-left-radius: var(--cmp-radioButton-radius);
-  }
   .rounded-l-\[var\(--cmp-select-sm-radius\)\] {
     border-top-left-radius: var(--cmp-select-sm-radius);
     border-bottom-left-radius: var(--cmp-select-sm-radius);
@@ -2017,10 +2007,6 @@
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
   }
-  .rounded-r-\[var\(--cmp-radioButton-radius\)\] {
-    border-top-right-radius: var(--cmp-radioButton-radius);
-    border-bottom-right-radius: var(--cmp-radioButton-radius);
-  }
   .rounded-r-\[var\(--cmp-select-sm-radius\)\] {
     border-top-right-radius: var(--cmp-select-sm-radius);
     border-bottom-right-radius: var(--cmp-select-sm-radius);
@@ -3549,7 +3535,7 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .shadow-floating {
-    --tw-shadow: 0px 0px 24px -6px var(--tw-shadow-color, rgba(34,34,34,0.12)), 4px 8px 16px -4px var(--tw-shadow-color, rgba(34,34,34,0.1));
+    --tw-shadow: 0px 0px 24px -6px var(--tw-shadow-color, rgba(34,34,34,0.12)), 4px 4px 16px -4px var(--tw-shadow-color, rgba(34,34,34,0.2));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .shadow-none {
@@ -3557,11 +3543,11 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .shadow-normal-md {
-    --tw-shadow: 0px 8px 36px -6px var(--tw-shadow-color, rgba(34,34,34,0.16)), 4px 12px 16px -4px var(--tw-shadow-color, rgba(34,34,34,0.12));
+    --tw-shadow: 0px 8px 36px -6px var(--tw-shadow-color, rgba(34,34,34,0.16)), 4px 8px 12px -4px var(--tw-shadow-color, rgba(34,34,34,0.16));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .shadow-normal-sm {
-    --tw-shadow: 0px 0px 24px -6px var(--tw-shadow-color, rgba(34,34,34,0.12)), 4px 8px 16px -4px var(--tw-shadow-color, rgba(34,34,34,0.1));
+    --tw-shadow: 0px 0px 24px -6px var(--tw-shadow-color, rgba(34,34,34,0.12)), 4px 4px 16px -4px var(--tw-shadow-color, rgba(34,34,34,0.2));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .ring {
@@ -3576,12 +3562,6 @@
     outline-style: var(--tw-outline-style);
     outline-width: 2px;
   }
-  .outline-offset-\[-2px\] {
-    outline-offset: -2px;
-  }
-  .outline-\(--sys-color-border-accent\) {
-    outline-color: var(--sys-color-border-accent);
-  }
   .outline-\[var\(--color-border-accent\)\] {
     outline-color: var(--color-border-accent);
   }
@@ -3801,12 +3781,6 @@
       top: 0;
     }
   }
-  .before\:top-\[-5px\] {
-    &::before {
-      content: var(--tw-content);
-      top: -5px;
-    }
-  }
   .before\:right-0 {
     &::before {
       content: var(--tw-content);
@@ -3861,10 +3835,10 @@
       flex-shrink: 0;
     }
   }
-  .before\:bg-\(--sys-color-border-accent\) {
+  .before\:bg-\(--sys-color-fg-accentLight\) {
     &::before {
       content: var(--tw-content);
-      background-color: var(--sys-color-border-accent);
+      background-color: var(--sys-color-fg-accentLight);
     }
   }
   .before\:content-\[\'\'\] {
@@ -3885,60 +3859,6 @@
       content: var(--tw-content);
     }
   }
-  .after\:absolute {
-    &::after {
-      content: var(--tw-content);
-      position: absolute;
-    }
-  }
-  .after\:right-0 {
-    &::after {
-      content: var(--tw-content);
-      right: 0;
-    }
-  }
-  .after\:bottom-\[-1px\] {
-    &::after {
-      content: var(--tw-content);
-      bottom: -1px;
-    }
-  }
-  .after\:bottom-\[-5px\] {
-    &::after {
-      content: var(--tw-content);
-      bottom: -5px;
-    }
-  }
-  .after\:left-0 {
-    &::after {
-      content: var(--tw-content);
-      left: 0;
-    }
-  }
-  .after\:z-10 {
-    &::after {
-      content: var(--tw-content);
-      z-index: 10;
-    }
-  }
-  .after\:h-\[2px\] {
-    &::after {
-      content: var(--tw-content);
-      height: 2px;
-    }
-  }
-  .after\:bg-\(--sys-color-border-accent\) {
-    &::after {
-      content: var(--tw-content);
-      background-color: var(--sys-color-border-accent);
-    }
-  }
-  .after\:content-\[\'\'\] {
-    &::after {
-      --tw-content: '';
-      content: var(--tw-content);
-    }
-  }
   .last\:border-b-0 {
     &:last-child {
       border-bottom-style: var(--tw-border-style);
@@ -5741,7 +5661,10 @@
   --cmp-radioButton-xs-paddingX: 8px;
   --cmp-radioButton-sm-height: 28px;
   --cmp-radioButton-sm-paddingX: 12px;
-  --cmp-radioButton-radius: 4px;
+  --cmp-radioButton-md-height: 36px;
+  --cmp-radioButton-md-paddingX: 20px;
+  --cmp-radioButton-radius-sm: 4px;
+  --cmp-radioButton-radius-md: 6px;
   --cmp-radioButton-border-width: 1px;
   --cmp-radioButton-border-default: #CCCCCC;
   --cmp-radioButton-border-select: #0075FF;
@@ -5755,6 +5678,22 @@
   --cmp-radioButton-content-select: #0075FF;
   --cmp-radioButton-content-disabled: #888888;
   --cmp-radioButton-group-gap: -1px;
+  --cmp-radioCard-radius: 8px;
+  --cmp-radioCard-paddingX: 16px;
+  --cmp-radioCard-paddingY: 8px;
+  --cmp-radioCard-border-width: 1px;
+  --cmp-radioCard-border-default: #E1E1E1;
+  --cmp-radioCard-border-selected: #93C4FF;
+  --cmp-radioCard-border-hover: #AAAAAA;
+  --cmp-radioCard-bg-default: #FFFFFF;
+  --cmp-radioCard-bg-selected: #EFF6FF;
+  --cmp-radioCard-bg-hover: #F9F9F9;
+  --cmp-radioCard-bg-disabled: #EEEEEE;
+  --cmp-radioCard-gap: 8px;
+  --cmp-radioCard-label-color: #222222;
+  --cmp-radioCard-subtitle-paddingLeft: 24px;
+  --cmp-radioCard-subtitle-color: #555555;
+  --cmp-radioCard-group-gap: 8px;
   --cmp-listBoxItem-paddingY: 4px;
   --cmp-listBoxItem-paddingRight: 12px;
   --cmp-listBoxItem-gap: 8px;
@@ -6046,20 +5985,30 @@
   --cmp-tag-md-radius: 8px;
   --cmp-tag-red-content: #FB4444;
   --cmp-tag-red-bg: #FCEFEF;
+  --cmp-tag-red-deep-bg: #FB4444;
   --cmp-tag-orange-content: #FF6B00;
   --cmp-tag-orange-bg: #FEF1EA;
+  --cmp-tag-orange-deep-bg: #FF6B00;
   --cmp-tag-yellow-content: #916C0D;
   --cmp-tag-yellow-bg: #FFF7DD;
+  --cmp-tag-yellow-deep-bg: #FFC700;
+  --cmp-tag-yellow-deep-content: #222222;
   --cmp-tag-green-content: #00973C;
   --cmp-tag-green-bg: #E8F9EF;
+  --cmp-tag-green-deep-bg: #00973C;
   --cmp-tag-blue-content: #0075FF;
   --cmp-tag-blue-bg: #E6F1FF;
+  --cmp-tag-blue-deep-bg: #0075FF;
   --cmp-tag-darkblue-content: #006AC1;
   --cmp-tag-darkblue-bg: #EAF5FE;
+  --cmp-tag-darkblue-deep-bg: #006AC1;
   --cmp-tag-indigo-content: #004290;
   --cmp-tag-indigo-bg: #EFF6FF;
+  --cmp-tag-indigo-deep-bg: #004290;
   --cmp-tag-grey-content: #737373;
   --cmp-tag-grey-bg: #EEEEEE;
+  --cmp-tag-grey-deep-bg: #737373;
+  --cmp-tag-deep-content: #FFFFFF;
   --cmp-tag-group-gap: 8px;
   --cmp-badge-size: 6px;
   --cmp-badge-radius: 9999px;
@@ -6225,7 +6174,9 @@
   --cmp-guide-contents-icon: #00973C;
   --cmp-guide-contents-radius: 8px;
   --cmp-guide-contents-depth-paddingLeft: 24px;
-  --cmp-progress-linear-height: 20px;
+  --cmp-progress-linear-height-xs: 12px;
+  --cmp-progress-linear-height-sm: 20px;
+  --cmp-progress-linear-height-md: 24px;
   --cmp-progress-linear-radius: 9999px;
   --cmp-progress-linear-gap: 12px;
   --cmp-progress-circular-size: 80px;
@@ -6515,7 +6466,6 @@
   --cmp-listDraggableItem-bordered-border-hover: #AAAAAA;
   --cmp-listDraggableItem-bordered-dragging-bg: #EFF6FF;
   --cmp-listDraggableItem-bordered-dragging-border-color: #2D8DFF;
-  --cmp-listDraggableItem-bordered-dragging-border-width: 2px;
   --cmp-listDraggableItem-border-default: #E1E1E1;
   --cmp-listDraggableItem-border-width-default: 1px;
   --cmp-listDraggableItem-text-default: #222222;
@@ -6722,6 +6672,12 @@
     font-weight: 500;
     line-height: 24px;
   }
+  .typo-body-md-semibold {
+    font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 24px;
+  }
   .typo-body-md-bold {
     font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
     font-size: 14px;

package/dist/theme.css

@@ -329,15 +329,15 @@
   --opacity-040: 40%;
   --opacity-060: 60%;
   --z-raised: 1;
-  --shadow-normal-xs: 0px 0px 16px -4px rgba(34,34,34,0.12), 2px 4px 6px -2px rgba(34,34,34,0.1);
-  --shadow-normal-sm: 0px 0px 24px -6px rgba(34,34,34,0.12), 4px 8px 16px -4px rgba(34,34,34,0.1);
-  --shadow-normal-md: 0px 8px 36px -6px rgba(34,34,34,0.16), 4px 12px 16px -4px rgba(34,34,34,0.12);
+  --shadow-normal-xs: 0px 0px 16px -4px rgba(34,34,34,0.12), 2px 2px 6px -2px rgba(34,34,34,0.16);
+  --shadow-normal-sm: 0px 0px 24px -6px rgba(34,34,34,0.12), 4px 4px 16px -4px rgba(34,34,34,0.2);
+  --shadow-normal-md: 0px 8px 36px -6px rgba(34,34,34,0.16), 4px 8px 12px -4px rgba(34,34,34,0.16);
   --shadow-spread-sm: 0px 0px 8px 0px rgba(34,34,34,0.1);
   --shadow-spread-md: 0px 0px 24px 0px rgba(34,34,34,0.2);
   --shadow-focus: 0px 0px 8px 0px rgba(0,117,255,0.25);
-  --shadow-overlay: 0px 0px 16px -4px rgba(34,34,34,0.12), 2px 4px 6px -2px rgba(34,34,34,0.1);
-  --shadow-floating: 0px 0px 24px -6px rgba(34,34,34,0.12), 4px 8px 16px -4px rgba(34,34,34,0.1);
-  --shadow-dialog: 0px 8px 36px -6px rgba(34,34,34,0.16), 4px 12px 16px -4px rgba(34,34,34,0.12);
+  --shadow-overlay: 0px 0px 16px -4px rgba(34,34,34,0.12), 2px 2px 6px -2px rgba(34,34,34,0.16);
+  --shadow-floating: 0px 0px 24px -6px rgba(34,34,34,0.12), 4px 4px 16px -4px rgba(34,34,34,0.2);
+  --shadow-dialog: 0px 8px 36px -6px rgba(34,34,34,0.16), 4px 8px 12px -4px rgba(34,34,34,0.16);
 }
 
 /* 시맨틱 토큰 (별칭 해석값) — var()로 참조 */
@@ -673,7 +673,10 @@
   --cmp-radioButton-xs-paddingX: 8px;
   --cmp-radioButton-sm-height: 28px;
   --cmp-radioButton-sm-paddingX: 12px;
-  --cmp-radioButton-radius: 4px;
+  --cmp-radioButton-md-height: 36px;
+  --cmp-radioButton-md-paddingX: 20px;
+  --cmp-radioButton-radius-sm: 4px;
+  --cmp-radioButton-radius-md: 6px;
   --cmp-radioButton-border-width: 1px;
   --cmp-radioButton-border-default: #CCCCCC;
   --cmp-radioButton-border-select: #0075FF;
@@ -687,6 +690,22 @@
   --cmp-radioButton-content-select: #0075FF;
   --cmp-radioButton-content-disabled: #888888;
   --cmp-radioButton-group-gap: -1px;
+  --cmp-radioCard-radius: 8px;
+  --cmp-radioCard-paddingX: 16px;
+  --cmp-radioCard-paddingY: 8px;
+  --cmp-radioCard-border-width: 1px;
+  --cmp-radioCard-border-default: #E1E1E1;
+  --cmp-radioCard-border-selected: #93C4FF;
+  --cmp-radioCard-border-hover: #AAAAAA;
+  --cmp-radioCard-bg-default: #FFFFFF;
+  --cmp-radioCard-bg-selected: #EFF6FF;
+  --cmp-radioCard-bg-hover: #F9F9F9;
+  --cmp-radioCard-bg-disabled: #EEEEEE;
+  --cmp-radioCard-gap: 8px;
+  --cmp-radioCard-label-color: #222222;
+  --cmp-radioCard-subtitle-paddingLeft: 24px;
+  --cmp-radioCard-subtitle-color: #555555;
+  --cmp-radioCard-group-gap: 8px;
   --cmp-listBoxItem-paddingY: 4px;
   --cmp-listBoxItem-paddingRight: 12px;
   --cmp-listBoxItem-gap: 8px;
@@ -978,20 +997,30 @@
   --cmp-tag-md-radius: 8px;
   --cmp-tag-red-content: #FB4444;
   --cmp-tag-red-bg: #FCEFEF;
+  --cmp-tag-red-deep-bg: #FB4444;
   --cmp-tag-orange-content: #FF6B00;
   --cmp-tag-orange-bg: #FEF1EA;
+  --cmp-tag-orange-deep-bg: #FF6B00;
   --cmp-tag-yellow-content: #916C0D;
   --cmp-tag-yellow-bg: #FFF7DD;
+  --cmp-tag-yellow-deep-bg: #FFC700;
+  --cmp-tag-yellow-deep-content: #222222;
   --cmp-tag-green-content: #00973C;
   --cmp-tag-green-bg: #E8F9EF;
+  --cmp-tag-green-deep-bg: #00973C;
   --cmp-tag-blue-content: #0075FF;
   --cmp-tag-blue-bg: #E6F1FF;
+  --cmp-tag-blue-deep-bg: #0075FF;
   --cmp-tag-darkblue-content: #006AC1;
   --cmp-tag-darkblue-bg: #EAF5FE;
+  --cmp-tag-darkblue-deep-bg: #006AC1;
   --cmp-tag-indigo-content: #004290;
   --cmp-tag-indigo-bg: #EFF6FF;
+  --cmp-tag-indigo-deep-bg: #004290;
   --cmp-tag-grey-content: #737373;
   --cmp-tag-grey-bg: #EEEEEE;
+  --cmp-tag-grey-deep-bg: #737373;
+  --cmp-tag-deep-content: #FFFFFF;
   --cmp-tag-group-gap: 8px;
   --cmp-badge-size: 6px;
   --cmp-badge-radius: 9999px;
@@ -1157,7 +1186,9 @@
   --cmp-guide-contents-icon: #00973C;
   --cmp-guide-contents-radius: 8px;
   --cmp-guide-contents-depth-paddingLeft: 24px;
-  --cmp-progress-linear-height: 20px;
+  --cmp-progress-linear-height-xs: 12px;
+  --cmp-progress-linear-height-sm: 20px;
+  --cmp-progress-linear-height-md: 24px;
   --cmp-progress-linear-radius: 9999px;
   --cmp-progress-linear-gap: 12px;
   --cmp-progress-circular-size: 80px;
@@ -1447,7 +1478,6 @@
   --cmp-listDraggableItem-bordered-border-hover: #AAAAAA;
   --cmp-listDraggableItem-bordered-dragging-bg: #EFF6FF;
   --cmp-listDraggableItem-bordered-dragging-border-color: #2D8DFF;
-  --cmp-listDraggableItem-bordered-dragging-border-width: 2px;
   --cmp-listDraggableItem-border-default: #E1E1E1;
   --cmp-listDraggableItem-border-width-default: 1px;
   --cmp-listDraggableItem-text-default: #222222;
@@ -1667,6 +1697,12 @@
     font-weight: 500;
     line-height: 24px;
   }
+  .typo-body-md-semibold {
+    font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 24px;
+  }
   .typo-body-md-bold {
     font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
     font-size: 14px;

package/eslint/scale.gen.mjs

@@ -10,7 +10,7 @@ export const TEXT_SIZES = [10,11,12,13,14,16,18,20,24,28,32];
 export const RADIUS = ["2","4","6","8","full","control-sm","control-md","feedback-xs-square","feedback-sm-square","feedback-pill","field-sm","field-md","navigation","item-bordered"];
 
 /** 타이포그래피 프리셋 클래스 */
-export const TYPO_PRESETS = ["typo-body-lg-bold","typo-body-lg-default","typo-body-lg-medium","typo-body-md-bold","typo-body-md-default","typo-body-md-medium","typo-body-sm-bold","typo-body-sm-default","typo-body-sm-medium","typo-body-sm-semibold","typo-body-xs-default","typo-control-lg","typo-control-md-default","typo-control-md-underline","typo-control-sm-default","typo-control-sm-underline","typo-control-xs-bold","typo-control-xs-default","typo-control-xs-medium","typo-control-xs-underline","typo-feedback-md-bold","typo-feedback-md-medium","typo-feedback-md-underline","typo-feedback-sm-bold","typo-feedback-sm-medium","typo-feedback-sm-regular","typo-feedback-sm-underline","typo-feedback-xs","typo-field-lg-bold","typo-field-lg-default","typo-field-lg-medium","typo-field-md-bold","typo-field-md-default","typo-field-md-medium","typo-field-sm-bold","typo-field-sm-default","typo-field-sm-medium","typo-field-xs-default","typo-heading-lg","typo-heading-md","typo-heading-sm","typo-heading-xs","typo-heading-xxs","typo-item-md-default","typo-item-md-selected","typo-item-sm-default","typo-item-sm-selected","typo-navigation-lg-medium","typo-navigation-lg-semibold","typo-navigation-md-bold","typo-navigation-sm-bold","typo-navigation-sm-default","typo-navigation-sm-medium","typo-navigation-xs-bold","typo-navigation-xs-medium","typo-table-accent","typo-table-body","typo-table-header"];
+export const TYPO_PRESETS = ["typo-body-lg-bold","typo-body-lg-default","typo-body-lg-medium","typo-body-md-bold","typo-body-md-default","typo-body-md-medium","typo-body-md-semibold","typo-body-sm-bold","typo-body-sm-default","typo-body-sm-medium","typo-body-sm-semibold","typo-body-xs-default","typo-control-lg","typo-control-md-default","typo-control-md-underline","typo-control-sm-default","typo-control-sm-underline","typo-control-xs-bold","typo-control-xs-default","typo-control-xs-medium","typo-control-xs-underline","typo-feedback-md-bold","typo-feedback-md-medium","typo-feedback-md-underline","typo-feedback-sm-bold","typo-feedback-sm-medium","typo-feedback-sm-regular","typo-feedback-sm-underline","typo-feedback-xs","typo-field-lg-bold","typo-field-lg-default","typo-field-lg-medium","typo-field-md-bold","typo-field-md-default","typo-field-md-medium","typo-field-sm-bold","typo-field-sm-default","typo-field-sm-medium","typo-field-xs-default","typo-heading-lg","typo-heading-md","typo-heading-sm","typo-heading-xs","typo-heading-xxs","typo-item-md-default","typo-item-md-selected","typo-item-sm-default","typo-item-sm-selected","typo-navigation-lg-medium","typo-navigation-lg-semibold","typo-navigation-md-bold","typo-navigation-sm-bold","typo-navigation-sm-default","typo-navigation-sm-medium","typo-navigation-xs-bold","typo-navigation-xs-medium","typo-table-accent","typo-table-body","typo-table-header"];
 
 /** 색상 유틸리티 키 (text-*, bg-*, border-* 공통) */
 export const COLORS = ["bg-accent","bg-accentBright","bg-accentFaint","bg-accentLight","bg-brand","bg-caution","bg-danger","bg-dangerLight","bg-deep","bg-frame","bg-neutralBright","bg-neutralLight","bg-progress","bg-screen","bg-subtle","bg-success","bg-successLight","bg-tableHeader","bg-warning","black","blue-strong","blue-subtle","border-accent","border-accentLight","border-bold","border-danger","border-default","border-strong","border-success","border-warning","brilliantblue-05","brilliantblue-10","brilliantblue-20","brilliantblue-25","brilliantblue-40","brilliantblue-50","brilliantblue-60","brilliantblue-70","brilliantblue-75","brilliantblue-80","brilliantblue-85","brilliantblue-90","brilliantblue-95","brilliantblue-99","control-bg-inverseHover","danger-15","danger-20","danger-30","danger-45","danger-60","danger-70","danger-75","danger-80","danger-85","danger-90","danger-95","danger-99","danger-strong","danger-subtle","darkblue-strong","darkblue-subtle","disabled-bg","disabled-border","disabled-icon","disabled-text","divider-default","fg-accent","fg-accentLight","fg-brand","fg-danger","fg-dangerLight","fg-deep","fg-inverse","fg-primary","fg-quaternary","fg-secondary","fg-subtleCool","fg-subtleWarm","fg-success","fg-successLight","fg-tertiary","fg-warning","field-bg-default","field-bg-hover","field-bg-readOnly","field-border-danger","field-border-default","field-border-focus","field-border-hover","field-border-success","field-icon-default","field-text-default","field-text-placeholder","field-text-readOnly","green-15","green-25","green-45","green-55","green-65","green-70","green-75","green-80","green-85","green-90","green-95","green-99","green-strong","green-subtle","grey-05","grey-10","grey-20","grey-25","grey-30","grey-35","grey-45","grey-50","grey-55","grey-60","grey-65","grey-70","grey-80","grey-85","grey-90","grey-95","grey-strong","grey-subtle","indigo-strong","indigo-subtle","lightblue-strong","lightblue-subtle","link-accent","navigation-gnb-bg-dark","navigation-gnb-bg-system","oceanblue-15","oceanblue-25","oceanblue-50","oceanblue-60","oceanblue-65","oceanblue-70","oceanblue-75","oceanblue-80","oceanblue-85","oceanblue-90","oceanblue-95","oceanblue-99","olive-05","olive-10","olive-15","olive-20","olive-30","olive-45","olive-55","olive-65","olive-70","olive-80","olive-90","olive-95","orange-10","orange-20","orange-35","orange-45","orange-55","orange-60","orange-65","orange-75","orange-85","orange-90","orange-95","orange-99","orange-strong","orange-subtle","primary-05","primary-10","primary-20","primary-25","primary-40","primary-50","primary-60","primary-70","primary-75","primary-80","primary-85","primary-90","primary-95","primary-99","red-15","red-20","red-30","red-45","red-60","red-70","red-75","red-80","red-85","red-90","red-95","red-99","red-strong","red-subtle","steelblue-10","steelblue-25","steelblue-45","steelblue-60","steelblue-65","steelblue-70","steelblue-75","steelblue-80","steelblue-85","steelblue-90","steelblue-95","steelblue-99","success-15","success-25","success-45","success-55","success-65","success-70","success-75","success-80","success-85","success-90","success-95","success-99","success-strong","success-subtle","warning-10","warning-20","warning-35","warning-45","warning-55","warning-60","warning-65","warning-75","warning-85","warning-90","warning-95","warning-99","warning-strong","warning-subtle","white","yellow-10","yellow-20","yellow-25","yellow-30","yellow-40","yellow-45","yellow-50","yellow-60","yellow-70","yellow-80","yellow-90","yellow-95","yellow-moderate","yellow-strong","yellow-subtle"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sellmate-design-system-react",
-  "version": "9.0.0-beta.26",
+  "version": "9.0.0-beta.28",
   "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
   "license": "UNLICENSED",
   "keywords": [