sellmate-design-system-react 9.0.0-beta.92 → 9.0.0-beta.94

package/AGENTS.md

@@ -533,6 +533,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | 정해진 범위 안에서 수치 하나·구간을 끌어서 고르게 한다 | `SSlider` | §3-7-16 |
 | 바코드를 스캔해 받는다 | `SBarcodeInput` | |
 | 목록에서 하나 고르게 한다 | `SSelect` | §3-7-2 |
+| 계층(카테고리 > 세부분류)을 접고 펴며 드롭다운에서 고르게 한다 | `SSelect` `type="tree"`·`"multi_tree"` | §3-7-2 — 계층을 늘 펼쳐 보여도 되면 `default_depth`·`multi_depth` |
 | 선택지를 항상 펼쳐 두고 하나 고르게 한다 | `SRadioGroup` | §3-7-2 |
 | 버튼 모양으로 모드를 하나 고르게 한다 | `SRadioButton` | §3-7-2 |
 | 선택지마다 설명이 붙어 한 줄로는 안 된다 | `SRadioCardGroup` | §3-7-2 |
@@ -569,13 +570,14 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | 대화의 메시지 한 건을 보여준다 | `SChatMessage` | |
 | 대화 중간에 시스템이 알리는 사실을 끼운다 (상담사 배정·대화 종료 등) | `SChatSystemMessage` | 사람이 보낸 말이면 `SChatMessage` |
 | 나열한 항목을 펼쳐 하위 내용을 보여준다 | `SExpansionList` + `SExpansionItem` | §3-7-7 |
-| 부모-자식 계층을 들여쓰기로 보여준다 | `STree` | §3-7-7 |
+| 부모-자식 계층을 들여쓰기로 보여준다 | `STree` | §3-7-7 — 폼 값으로 드롭다운에서 고르는 것이면 `SSelect` `type="tree"` |
 | 계층을 이루는 행들을 여러 열로 보여준다 (카테고리 > 상품 > 옵션) | `STreeTable` | §3-7-7 — 한 줄에 라벨 하나면 `STree` |
 | 사용자가 순서를 드래그로 바꾸게 한다 | `SDraggableList` + `SDraggableItem` | §3-7-6 |
 | 날짜별 일정을 한 달치 격자로 펼쳐 보여준다 | `SCalendarBoard` | §3-7-4 |
 | 항목끼리 크기를 눈으로 견주게 한다 (채널별 매출·상품별 판매량) | `SBarChart` | 정확한 값을 읽어야 하면 `STable` — 그래프는 "어느 쪽이 큰가" 를 답하지 "얼마인가" 를 답하지 않는다 |
 | 순서가 있는 항목의 **추이**를 보여준다 (일·월별 매출 흐름, 기간별 방문 수) | `SLineChart` | 항목 순서에 뜻이 없으면(채널별·상품별) `SBarChart` — 선은 "이어진다" 는 뜻을 덤으로 얹어, 순서 없는 항목을 이으면 없는 흐름을 만든다. 항목이 대여섯 개 안쪽이고 크기를 견주는 것이 목적이면 막대가 낫다 |
 | 여러 항목의 추이를 **합계와 함께** 보여준다 (채널별 매출이 쌓여 전체가 되는 흐름) | `SLineChart stacked area` | 합계가 뜻을 갖는 값일 때만 쌓는다. 음수가 섞이거나 더해서 뜻이 없는 값(비율·평균)은 쌓지 말고 겹쳐 그린다 |
+| 항목 이름이 길어 가로축에서 서로 겹친다 (상품명·채널명, `2026-10-01` 같은 날짜) | 순서 없는 항목은 `SBarChart direction="horizontal"` — 이름 열이 가장 긴 이름에 맞춰 넓어진다. 순서가 있어 세로 축을 지켜야 하면(날짜순 막대·`SLineChart`) `rotateCategoryLabels` | 이름이 짧아 겹치지 않으면 켜지 않는다 — 켜면 늘 기울어 읽기만 나빠진다. 기울여도 너무 긴 이름은 차트가 말줄임하고 전체 이름은 툴팁에 뜬다. 말줄임 폭·각도를 직접 주지 않는다. 나란히 놓인 차트는 켜고 끄기를 맞춰야 그림 높이가 같다 |
 | 항목의 크기와 **그 안의 구성**을 함께 보여준다 (주문 상태별 내역, 유입 경로별 몫) | `SBarChart stacked` | 계열끼리 견주는 것이 목적이면 `stacked` 없이 나란히 세운다. 더해서 뜻이 없는 값(비율·평균)은 쌓지 않는다 — 합계 라벨이 거짓말이 된다 |
 | 한 시점의 **전체를 몇 개의 몫으로** 나눠 보여준다 (채널별 매출 비중, 회원 등급 구성) | `SPieChart` | 조각이 대여섯 개를 넘거나 몫끼리 크기를 견주는 것이 목적이면 `SBarChart` — 사람은 각도보다 길이를 정확히 견준다. 순서가 있는 추이(월별)는 몫이 아니라 흐름이라 `SLineChart`. 0·음수는 그려지지 않으므로 증감은 원으로 나타내지 않는다. 조각은 큰 순으로 넘긴다. 폭은 부모를 따르고 그림은 그 폭의 정사각형이다 — 폭이 필요하면 `className` 으로 폭만 주고 높이는 주지 않는다 (`SDonutChart` 도 같다) |
 | 한 시점의 전체를 몫으로 나누되 **가운데가 빈 고리 모양**으로 보여준다 (시안이 도넛일 때) | `SDonutChart` | 쓰임·데이터 규칙은 `SPieChart` 와 같고 모양만 다르다 — 시안이 정한 쪽을 쓴다. **구멍에 합계·라벨을 겹쳐 올리지 않는다.** 합계 같은 값이 필요하면 차트 바깥(카드 제목·요약 값)에 적는다. 여러 기간에 걸친 구성 변화는 원을 여러 개 늘어놓지 말고 `SBarChart stacked` |
@@ -1766,11 +1768,28 @@ tableRef.current.scrollToRow(row);                  // 복원
 - **쓰는 자리는 설정 화면·마법사(스텝)의 소수 결정이다.** 고르고 나면 뒤 화면이 통째로 바뀌거나 되돌리기 어려운 선택 — 평가 대상자 범위(전체/특정 구성원), 상담 자동 배정 방식 같은 것. 목록 필터·표 안 조건처럼 같은 선택지가 화면마다 반복 노출되는 자리에는 `SRadioGroup` 을 쓴다.
 - `SRadioCard` 단독은 `SRadioCardGroup` 이 만들 수 없는 배치에만 쓴다 — 나열은 그룹이 맡는다 (§2-2).
 - 카드 안에 상태 배지를 넣으려면 `tag` 슬롯에 `STag` 를 준다. 라벨 문자열에 "(추천)" 처럼 섞어 쓰지 않는다.
+- **한 선택지에 딸린 추가 입력(지정일·요청 사항 등)은 그 카드의 슬롯에 넣는다** — `SRadioCard` 는 `children`, `SRadioCardGroup` 은 옵션의 `content`. 카드 아래에 따로 입력을 늘어놓지 않는다. 슬롯은 서브타이틀 아래에 들여써서 놓이고 라디오의 클릭 영역 밖이라, 입력을 눌러도 카드 선택이 바뀌지 않는다. 들여쓰기·간격은 카드가 넣으므로 직접 주지 않는다. 고른 카드에만 보여주고, 카드를 `disabled` 로 두면 슬롯의 컨트롤도 함께 `disabled` 로 둔다(카드가 대신 잠그지 않는다).
 - **카드처럼 생겼다고 `SCard`/`SSectionHeaderCard` 로 감싸지 않는다.** `SRadioCard` 자체가 완결된 요소이고, 나열 간격은 `SRadioCardGroup` 의 `direction` 이 맞춘다 (§2-2).
 
+##### 후보에 상하 관계가 있으면 — depth vs tree
+
+계층은 `options` 의 `children` 으로 만든다. 평평한 `default`·`multi` 에 분류명을 라벨에 섞어 늘어놓지 않는다. 남는 선택은 **계층을 어떻게 보여주는가**와 **그룹이 값이 되는가**다.
+
+| 상황 | `type` |
+| --- | --- |
+| 그룹이 몇 개 안 돼 늘 펼쳐 둬도 한눈에 읽힌다. 그룹은 분류 헤더일 뿐 값이 아니다 | `default_depth` · `multi_depth` |
+| 그룹·단계가 많아 다 펼치면 목록이 길어진다 — 접어 두고 필요한 갈래만 편다 | `tree` · `multi_tree` |
+| **그룹 자체도 값**이다 (예: "패션의류" 전체를 하나의 조건으로 고른다) — 단일 선택 | `tree` |
+
+- **값에 무엇이 담기는가.** `default_depth`·`multi_depth`·`multi_tree` 는 언제나 **리프만** 담긴다 — `multi_tree`·`multi_depth` 의 그룹 체크박스는 그 아래 리프를 한꺼번에 넣고 뺄 뿐, 그룹의 `value` 는 값이 되지 않는다. 그룹의 `value` 가 값으로 오는 것은 `tree` 뿐이다.
+- **펼침 상태는 `SSelect` 가 쥔다.** 열 때마다 선택값을 품은 그룹이 펼쳐지고, 검색 중에는 걸린 줄이 보이도록 결과를 전부 펼친다. 앱이 펼칠 그룹을 따로 들고 있지 않는다.
+- 그룹의 `disabled` 는 그 줄의 선택만 막는다 — 마우스(화살표)로도 키보드(→)로도 접고 펴기는 되므로 아래의 고를 수 있는 자식에 닿는 길은 남는다.
+- 하위가 전부 비활성이면 `multi_tree`·depth 타입은 그룹도 함께 잠그므로 앱이 어미에 `disabled` 를 다시 달 필요가 없다. `tree` 는 그룹 자체가 값이라 하위가 막혀도 그룹은 고를 수 있다 — 그룹까지 막으려면 그룹에 `disabled` 를 직접 준다.
+- 드롭다운 없이 화면에 계층을 펼쳐 두고 여러 개를 체크하게 하는 것이면 `SSelect` 가 아니라 `STree` 다 (§3-7-7).
+
 ##### 여러 개 고른 값을 칩으로 보여줄 때 — `valueDisplay="chip"`
 
-- **`type="multi"`·`"multi_depth"` 에서 `valueDisplay="chip"` 을 주면** 선택값이 트리거에 칩으로 뜨고, 칩의 × 로 하나씩 뺄 수 있다. 기본(`text`)은 라벨을 쉼표로 이어 한 줄로 말줄임한다. 고른 값 하나하나를 확인하고 바로 빼야 하는 자리면 `chip`, 몇 개 골랐는지만 보이면 되는 조회 필터면 `text` 를 쓴다.
+- **`type="multi"`·`"multi_depth"`·`"multi_tree"` 에서 `valueDisplay="chip"` 을 주면** 선택값이 트리거에 칩으로 뜨고, 칩의 × 로 하나씩 뺄 수 있다. 기본(`text`)은 라벨을 쉼표로 이어 한 줄로 말줄임한다. 고른 값 하나하나를 확인하고 바로 빼야 하는 자리면 `chip`, 몇 개 골랐는지만 보이면 되는 조회 필터면 `text` 를 쓴다.
 - **후보가 정해진 목록에서 고르는 것이면 `SSelect` 의 `chip` 이고, 사용자가 값을 직접 타이핑해 쌓는 것이면 `SChipInput` 이다.** 목록에서 고른 값을 `SChipInput` 에 옮겨 담거나, `SSelect` 옆에 `SChip` 을 따로 나열해 선택값을 흉내 내지 않는다.
 - **단일 선택 type 에는 주지 않는다.** 무시되고 `text` 로 보인다. 단일 선택의 값 비우기는 `clearable` 이 맡는다.
 - 칩이 한 줄을 넘으면 줄바꿈하고 트리거가 그만큼 높아진다. 높이·칩 간격은 `SSelect` 가 토큰으로 넣는다 — 직접 주지 않는다.

package/dist/components/SBarChart/README.md

@@ -20,6 +20,7 @@
 | `tickCount?` | `number` | `8` | 값 축 눈금 개수 |
 | `barSize?` | `number` | `BAR_SIZE_MAX` | 막대 두께 상한(px, 24~80). 낮추면 좌우 여백 상한도 같은 비율로 따라 내려온다 |
 | `showValueLabel?` | `boolean` | `true` | 막대마다 값을 적는다 |
+| `rotateCategoryLabels?` | `boolean` | `false` | 항목 이름을 -45° 기울인다. 이름이 막대 묶음 폭보다 길어 서로 겹칠 때 쓴다. 기울여도 너무 긴 이름은 말줄임되고, 전체 이름은 툴팁 제목에서 읽힌다. 이름이 아주 길면 기울이기보다 `direction='horizontal'` 이 먼저다. 세로 막대에서만 쓴다 — 가로 막대는 이름 열이 가장 긴 이름에 맞춰 넓어지므로 무시한다 |
 | `showLegend?` | `boolean` | `true` | 범례를 보인다 |
 | `legendPosition?` | `SBarChartLegendPosition` | `'top'` | 범례 위치 |
 | `showTooltip?` | `boolean` | `true` | 막대에 마우스를 올리면 값 상자를 띄운다 |

package/dist/components/SBarChart/SBarChart.d.ts

@@ -70,6 +70,13 @@ export interface SBarChartProps {
     barSize?: number;
     /** 막대마다 값을 적는다 */
     showValueLabel?: boolean;
+    /**
+     * 항목 이름을 -45° 기울인다. 이름이 막대 묶음 폭보다 길어 서로 겹칠 때 쓴다.
+     * 기울여도 너무 긴 이름은 말줄임되고, 전체 이름은 툴팁 제목에서 읽힌다.
+     * 이름이 아주 길면 기울이기보다 `direction='horizontal'` 이 먼저다.
+     * 세로 막대에서만 쓴다 — 가로 막대는 이름 열이 가장 긴 이름에 맞춰 넓어지므로 무시한다
+     */
+    rotateCategoryLabels?: boolean;
     /** 범례를 보인다 */
     showLegend?: boolean;
     /** 범례 위치 */

package/dist/components/SBarcodeInput/README.md

@@ -63,6 +63,7 @@ export type SBarcodeInputSize = SFieldSize;
 
 - [SField](../SField)
 - [SGhostButton](../SGhostButton)
+- [STag](../STag)
 
 ### Graph
 
@@ -70,5 +71,6 @@ export type SBarcodeInputSize = SFieldSize;
 graph TD;
   SBarcodeInput --> SField
   SBarcodeInput --> SGhostButton
+  SBarcodeInput --> STag
   style SBarcodeInput fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SButton/button.config.d.ts

@@ -26,7 +26,8 @@ export declare const BUTTON_SIZE_CONFIG: Record<SButtonSize, {
     height: string;
     paddingX: string;
     gap: string;
-    iconSize: number;
+    iconSize: string;
+    iconOnlyWidth: string;
     fontSize: number;
     fontWeight: number;
     radius: string;

package/dist/components/SChatAttachedFile/chatAttachedFile.config.d.ts

@@ -14,8 +14,8 @@ export declare const CHAT_ATTACHED_FILE_CONFIG: {
     readonly contentGap: "gap-(--cmp-chatAttachedFile-content-gap)";
     /** 클립 아이콘이 앉는 칩 — 내부 패딩·면·라운드 (높이는 아이콘+패딩이 정한다) */
     readonly tile: "p-(--cmp-chatAttachedFile-icon-wrapper-padding) rounded-(--cmp-chatAttachedFile-icon-wrapper-radius) bg-(--cmp-chatAttachedFile-icon-wrapper-bg)";
-    /** 칩 안 클립 아이콘 크기(px). SVG width/height 는 속성값이라 CSS 변수를 못 받아 값으로 둔다 (토큰 값과 동일) */
-    readonly iconSize: 16;
+    /** 칩 안 클립 아이콘 크기 */
+    readonly iconSize: "var(--cmp-chatAttachedFile-icon-size)";
     /** 파일명 타이포 프리셋 */
     readonly nameTypo: "typo-body-sm-default";
     /** 파일명 텍스트색 */

package/dist/components/SChatFile/chatFile.config.d.ts

@@ -21,8 +21,8 @@ export declare const CHAT_FILE_CONFIG: {
      * 디자인팀에 `icon.wrapper.bg.hover` 를 요청해 나오는 대로 갈아끼운다.
      */
     readonly tile: "p-(--cmp-chatFile-icon-wrapper-padding) rounded-(--cmp-chatFile-icon-wrapper-radius) bg-(--cmp-chatFile-icon-wrapper-bg) group-hover/chat-file:bg-(--sys-color-bg-frame)";
-    /** 칩 안 클립 아이콘 크기(px). SVG width/height 는 속성값이라 CSS 변수를 못 받아 값으로 둔다 (토큰 값과 동일) */
-    readonly iconSize: 20;
+    /** 칩 안 클립 아이콘 크기 */
+    readonly iconSize: "var(--cmp-chatFile-icon-size)";
     /** 파일명 타이포 프리셋 */
     readonly nameTypo: "typo-body-md-bold";
     /** 파일명·부가정보 텍스트색 */

package/dist/components/SCheckbox/README.md

@@ -36,6 +36,7 @@ export type SCheckboxValue = boolean | unknown[] | null;
 ### Used by
 
  - [SKeyValueTable](../SKeyValueTable)
+ - [SSelect](../SSelect)
  - [STable](../STable)
  - [STree](../STree)
 
@@ -49,6 +50,7 @@ export type SCheckboxValue = boolean | unknown[] | null;
 graph TD;
   SCheckbox --> SIcon
   SKeyValueTable --> SCheckbox
+  SSelect --> SCheckbox
   STable --> SCheckbox
   STree --> SCheckbox
   style SCheckbox fill:#f9f,stroke:#333,stroke-width:4px

package/dist/components/SChipFilter/README.md

@@ -400,6 +400,7 @@ export interface SChipFilterDatePreset {
 
 - [SDatePicker](../SDatePicker)
 - [SDateRangePicker](../SDateRangePicker)
+- [SGhostButton](../SGhostButton)
 - [SIcon](../SIcon)
 - [SRadio](../SRadio)
 - [SRadioButton](../SRadioButton)
@@ -414,6 +415,7 @@ export interface SChipFilterDatePreset {
 graph TD;
   SChipFilter --> SDatePicker
   SChipFilter --> SDateRangePicker
+  SChipFilter --> SGhostButton
   SChipFilter --> SIcon
   SChipFilter --> SRadio
   SChipFilter --> SRadioButton

package/dist/components/SGhostButton/README.md

@@ -54,6 +54,7 @@ export type SGhostButtonIntent =
  - [SChatAttachedFile](../SChatAttachedFile)
  - [SChatInput](../SChatInput)
  - [SChip](../SChip)
+ - [SChipFilter](../SChipFilter)
  - [SDatePicker](../SDatePicker)
  - [SDateRangePicker](../SDateRangePicker)
  - [SFilePicker](../SFilePicker)
@@ -66,6 +67,7 @@ export type SGhostButtonIntent =
  - [SPage](../SPage)
  - [SPopover](../SPopover)
  - [SSearchInput](../SSearchInput)
+ - [SSelect](../SSelect)
  - [STable](../STable)
  - [STimePicker](../STimePicker)
  - [STimeRangePicker](../STimeRangePicker)
@@ -91,6 +93,7 @@ graph TD;
   SChatAttachedFile --> SGhostButton
   SChatInput --> SGhostButton
   SChip --> SGhostButton
+  SChipFilter --> SGhostButton
   SDatePicker --> SGhostButton
   SDateRangePicker --> SGhostButton
   SFilePicker --> SGhostButton
@@ -103,6 +106,7 @@ graph TD;
   SPage --> SGhostButton
   SPopover --> SGhostButton
   SSearchInput --> SGhostButton
+  SSelect --> SGhostButton
   STable --> SGhostButton
   STimePicker --> SGhostButton
   STimeRangePicker --> SGhostButton

package/dist/components/SGnb/gnb.config.d.ts

@@ -43,10 +43,14 @@ export declare const GNB_MENU: Record<SGnbType, {
     depth2PaddingLeft: string;
     depth3PaddingLeft: string;
     depth1Icon: string;
+    depth1Typo: string;
+    itemTypo: string;
+    itemTypoSelected: string;
     depth1FontSize: number;
     depth1LineHeight: number;
     depth1FontWeight: number;
     itemFontSize: number;
+    /** 하위 메뉴 하이픈 자리표시자 높이(px) = item 타이포 line-height */
     itemLineHeight: number;
     itemFontWeight: number;
     itemFontWeightSelected: number;
@@ -91,6 +95,8 @@ export declare const GNB_RAIL: {
     itemPaddingBottom: string;
     itemRadius: string;
     itemIcon: string;
+    itemTypo: string;
+    itemTypoSelected: string;
     itemFontSize: number;
     itemLineHeight: number;
     itemFontWeight: number;

package/dist/components/SIcon/README.md

@@ -9,7 +9,7 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `name` | `SIconName` | — | 아이콘명 |
-| `size?` | `number \| string` | `24` | 아이콘 크기(px 또는 CSS 길이) |
+| `size?` | `number \| string` | `24` | 아이콘 크기(px 또는 CSS 길이). 토큰 크기 `var(--cmp-…)` 도 그대로 넘긴다 |
 | `color?` | `SColor` | — | 아이콘 색상. 팔레트 키(`grey_65`, `red_95` …) 또는 임의 CSS 색상. 미지정 시 currentColor 상속 |
 | `rotate?` | `0 \| 90 \| 180 \| 270` | — | 회전 각도 |
 | `label?` | `string` | — | 접근성 라벨. 없으면 aria-hidden 처리 |
@@ -48,6 +48,7 @@
  - [SLauncherListBox](../SLauncherListBox)
  - [SListItem](../SListItem)
  - [SLoadingModal](../SLoadingModal)
+ - [SMeatballButton](../SMeatballButton)
  - [SNumberInput](../SNumberInput)
  - [SPagination](../SPagination)
  - [SPopover](../SPopover)
@@ -63,6 +64,7 @@
  - [STimeRangePicker](../STimeRangePicker)
  - [SToast](../SToast)
  - [STooltip](../STooltip)
+ - [STree](../STree)
 
 ### Graph
 
@@ -96,6 +98,7 @@ graph TD;
   SLauncherListBox --> SIcon
   SListItem --> SIcon
   SLoadingModal --> SIcon
+  SMeatballButton --> SIcon
   SNumberInput --> SIcon
   SPagination --> SIcon
   SPopover --> SIcon
@@ -111,5 +114,6 @@ graph TD;
   STimeRangePicker --> SIcon
   SToast --> SIcon
   STooltip --> SIcon
+  STree --> SIcon
   style SIcon fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SIcon/SIcon.d.ts

@@ -4,7 +4,7 @@ import { type SIconName } from './icons.gen';
 export interface SIconProps {
     /** 아이콘명 */
     name: SIconName;
-    /** 아이콘 크기(px 또는 CSS 길이) */
+    /** 아이콘 크기(px 또는 CSS 길이). 토큰 크기 `var(--cmp-…)` 도 그대로 넘긴다 */
     size?: number | string;
     /** 아이콘 색상. 팔레트 키(`grey_65`, `red_95` …) 또는 임의 CSS 색상. 미지정 시 currentColor 상속 */
     color?: SColor;

package/dist/components/SInput/README.md

@@ -57,6 +57,7 @@
 
 - [SField](../SField)
 - [SGhostButton](../SGhostButton)
+- [STag](../STag)
 
 ### Graph
 
@@ -64,6 +65,7 @@
 graph TD;
   SInput --> SField
   SInput --> SGhostButton
+  SInput --> STag
   SEditor --> SInput
   SKeyValueTable --> SInput
   style SInput fill:#f9f,stroke:#333,stroke-width:4px

package/dist/components/SLauncherListBox/launcherListBox.config.d.ts

@@ -94,13 +94,8 @@ export declare const LAUNCHER_LIST_BOX_LAYOUT: {
     readonly radius: string;
     /** 패널 상하좌우 여백 */
     readonly padding: string;
-    /**
-     * 패널 그림자.
-     * 토큰(`component.gnb.launcher.listBox.shadow` = `{shadow.floating}`)은 값이 배열이라
-     * `--cmp-*` 로 나오지 않는다 — 생성기가 스칼라만 내보내기 때문이다. 그래서 그 별칭이
-     * 가리키는 스케일 토큰을 직접 쓴다(같은 값이다).
-     */
-    readonly shadow: "var(--shadow-floating)";
+    /** 패널 그림자 */
+    readonly shadow: string;
     /** 줄 왼쪽 여백 */
     readonly itemPaddingLeft: string;
     /** 줄 오른쪽 여백 — 왼쪽보다 좁다(오른쪽 끝은 hover 아이콘 자리다) */

package/dist/components/SLineChart/README.md

@@ -22,6 +22,7 @@
 | `tickCount?` | `number` | `8` | 값 축 눈금 개수 |
 | `showPoint?` | `boolean` | `true` | 데이터 지점마다 점을 찍는다. 꺼도 짚은 항목의 점은 뜬다 |
 | `showValueLabel?` | `boolean` | `false` | 점마다 값을 적는다. 기본은 끔 — 선 그래프는 항목이 많은 데이터에 쓰는 일이 잦아 숫자가 서로 붙는다. 항목이 대여섯 개 안쪽일 때만 켠다 |
+| `rotateCategoryLabels?` | `boolean` | `false` | 항목 이름을 -45° 기울인다. 이름이 점 간격보다 길어 서로 겹칠 때 쓴다. 기울여도 너무 긴 이름은 말줄임되고, 전체 이름은 툴팁 제목에서 읽힌다 |
 | `showLegend?` | `boolean` | `true` | 범례를 보인다 |
 | `legendPosition?` | `SLineChartLegendPosition` | `'top'` | 범례 위치 |
 | `showTooltip?` | `boolean` | `true` | 항목에 마우스를 올리면 값 상자를 띄운다 |

package/dist/components/SLineChart/SLineChart.d.ts

@@ -78,6 +78,11 @@ export interface SLineChartProps {
      * 숫자가 서로 붙는다. 항목이 대여섯 개 안쪽일 때만 켠다
      */
     showValueLabel?: boolean;
+    /**
+     * 항목 이름을 -45° 기울인다. 이름이 점 간격보다 길어 서로 겹칠 때 쓴다.
+     * 기울여도 너무 긴 이름은 말줄임되고, 전체 이름은 툴팁 제목에서 읽힌다
+     */
+    rotateCategoryLabels?: boolean;
     /** 범례를 보인다 */
     showLegend?: boolean;
     /** 범례 위치 */

package/dist/components/SLineChart/lineChart.config.d.ts

@@ -48,8 +48,7 @@ export declare const POINT_HOVER_RADIUS = 6;
 export declare const POINT_HALO_RADIUS = 12;
 export declare const POINT_HALO_OPACITY = "var(--cmp-chart-line-point-opacity-bg)";
 /**
- * 짚은 점이 실제로 차지하는 반지름 — 바탕 원까지다. 툴팁이 이만큼 비켜서고,
- * 양끝 점이 잘리지 않게 스크롤 컨테이너도 이만큼 넓어진다.
+ * 짚은 점이 실제로 차지하는 반지름 — 바탕 원까지다. 툴팁이 이만큼 비켜선다.
  */
 export declare const POINT_HOVER_EXTENT = 12;
 /**

package/dist/components/SLoadingModal/README.md

@@ -15,8 +15,8 @@
 | `message?` | `string \| string[]` | — | 메시지 (없으면 state 기본값) |
 | `showButton?` | `boolean` | `false` | 하단 버튼 표시 |
 | `buttonLabel?` | `string` | — | 버튼 레이블 (없으면 state 기본값) |
-| `width?` | `number \| string` | `520` |  |
-| `height?` | `number \| string` | `320` |  |
+| `width?` | `number \| string` | `'var(--cmp-modal-loading-width)'` |  |
+| `height?` | `number \| string` | `'var(--cmp-modal-loading-height)'` |  |
 
 #### Events
 

package/dist/components/SMeatballButton/README.md

@@ -57,11 +57,13 @@ export type SMeatballButtonItem = SDropdownButtonItem;
 ### Depends on
 
 - [SGhostButton](../SGhostButton)
+- [SIcon](../SIcon)
 
 ### Graph
 
 ```mermaid
 graph TD;
   SMeatballButton --> SGhostButton
+  SMeatballButton --> SIcon
   style SMeatballButton fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SNumberInput/README.md

@@ -73,6 +73,7 @@ export type SNumberInputSize = SFieldSize;
 
 - [SField](../SField)
 - [SIcon](../SIcon)
+- [STag](../STag)
 
 ### Graph
 
@@ -80,6 +81,7 @@ export type SNumberInputSize = SFieldSize;
 graph TD;
   SNumberInput --> SField
   SNumberInput --> SIcon
+  SNumberInput --> STag
   SKeyValueTable --> SNumberInput
   style SNumberInput fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SRadioCard/README.md

@@ -32,6 +32,7 @@
 | `value?` | `SRadioValue \| null` | — | 그룹의 현재 선택 값 |
 | `label` | `string` | — | 라벨 (첫 줄) |
 | `subtitle?` | `string` | — | 서브타이틀 (둘째 줄). 라벨 왼쪽 끝에 맞춰 들여쓴다 |
+| `children?` | `ReactNode` | — | 서브타이틀 아래 슬롯. 서브타이틀처럼 라벨 왼쪽 끝에 맞춰 들여쓴다. 카드 테두리 안이지만 라디오의 클릭 영역 밖이라, 입력·버튼 같은 컨트롤을 넣어도 누를 때 카드가 선택되지 않는다 |
 | `tag?` | `Omit<STagProps, 'size'>` | — | 라벨 오른쪽에 붙일 태그. `STag` 의 props 를 그대로 받되 크기는 `xs` 로 고정된다 |
 | `disabled?` | `boolean` | `false` | 비활성 |
 | `name?` | `string` | — | native radio name (form-agnostic 그룹핑) |
@@ -56,6 +57,8 @@ export interface SRadioCardOption {
   label: string;
   /** 서브타이틀 (둘째 줄) */
   subtitle?: string;
+  /** 서브타이틀 아래 슬롯 (`SRadioCard` 의 `children`). 라디오의 클릭 영역 밖이다 */
+  content?: ReactNode;
   /** 라벨 오른쪽에 붙일 태그 (`STag` props, 크기는 `xs` 고정) */
   tag?: Omit<STagProps, 'size'>;
   /** 이 옵션만 비활성 */

package/dist/components/SRadioCard/SRadioCard.d.ts

@@ -1,4 +1,4 @@
-import { type CSSProperties } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 import { type SRadioValue } from '../SRadio';
 import { type STagProps } from '../STag';
 export interface SRadioCardProps {
@@ -10,6 +10,11 @@ export interface SRadioCardProps {
     label: string;
     /** 서브타이틀 (둘째 줄). 라벨 왼쪽 끝에 맞춰 들여쓴다 */
     subtitle?: string;
+    /**
+     * 서브타이틀 아래 슬롯. 서브타이틀처럼 라벨 왼쪽 끝에 맞춰 들여쓴다.
+     * 카드 테두리 안이지만 라디오의 클릭 영역 밖이라, 입력·버튼 같은 컨트롤을 넣어도 누를 때 카드가 선택되지 않는다
+     */
+    children?: ReactNode;
     /** 라벨 오른쪽에 붙일 태그. `STag` 의 props 를 그대로 받되 크기는 `xs` 로 고정된다 */
     tag?: Omit<STagProps, 'size'>;
     /** 비활성 */
@@ -26,4 +31,4 @@ export interface SRadioCardProps {
  * 카드 전체가 클릭 영역이며 `value === val` 이면 선택 상태다.
  * 선택지마다 설명이 붙어 한 줄짜리 `SRadio` 로는 담기 어려울 때 쓴다.
  */
-export declare function SRadioCard({ val, value, label, subtitle, tag, disabled, name, onValueChange, className, style, }: SRadioCardProps): import("react").JSX.Element;
+export declare function SRadioCard({ val, value, label, subtitle, children, tag, disabled, name, onValueChange, className, style, }: SRadioCardProps): import("react").JSX.Element;

package/dist/components/SRadioCard/SRadioCardGroup.d.ts

@@ -1,4 +1,4 @@
-import { type CSSProperties } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 import { type SRadioValue } from '../SRadio';
 import { type STagProps } from '../STag';
 export interface SRadioCardOption {
@@ -8,6 +8,8 @@ export interface SRadioCardOption {
     label: string;
     /** 서브타이틀 (둘째 줄) */
     subtitle?: string;
+    /** 서브타이틀 아래 슬롯 (`SRadioCard` 의 `children`). 라디오의 클릭 영역 밖이다 */
+    content?: ReactNode;
     /** 라벨 오른쪽에 붙일 태그 (`STag` props, 크기는 `xs` 고정) */
     tag?: Omit<STagProps, 'size'>;
     /** 이 옵션만 비활성 */

package/dist/components/SSelect/README.md

@@ -12,8 +12,8 @@
 | `valueAsPrimitive?` | `boolean` | `false` | `value`·`onValueChange` 가 옵션 객체 대신 원시값(string|number)을 주고받는다. **기본값 `false`(옵션 객체)는 유지한다** — 원본(sd-select) 호환 때문이고, 뒤집으면 이 값을 주지 않던 화면이 조용히 다른 모양의 값을 받게 되어 타입으로도 잡히지 않는다. 새로 쓰는 화면은 켜는 쪽이 다루기 쉽다 — 서버로 보내는 것도, 폼 상태에 담는 것도 결국 값 하나이기 때문이다. |
 | `name?` | `string` | — | 폼 연동용 name 속성 |
 | `options?` | `SSelectOption[]` | `[]` | 옵션 목록 (children으로 계층 표현) |
-| `type?` | `SSelectType` | `'default'` | 타입: default | multi | default_depth | multi_depth |
-| `valueDisplay?` | `SSelectValueDisplay` | `'text'` | 트리거에 선택값을 보여주는 방식. - `text`: 선택 라벨을 쉼표로 이어 한 줄로 보여준다. 넘치면 말줄임한다. - `chip`: 선택값마다 칩을 낸다. 칩의 × 를 누르면 그 값만 선택에서 빠지고, 드롭다운은 열리지 않는다. 칩이 한 줄을 넘으면 줄바꿈하고 트리거가 그만큼 높아진다. `chip` 은 `multi`·`multi_depth` 에서만 동작한다. 단일 선택 type 에서는 무시하고 `text` 로 보여준다. 전체 선택이면 칩 대신 `allSelectedLabel` 을 보여준다. `multi_depth` 에서 그룹의 하위 리프를 전부 고르면 리프 칩 대신 그룹명 칩 하나로 묶고, 그 칩의 × 는 그룹의 리프를 한꺼번에 뺀다. 비활성(select 자체나 해당 옵션)인 칩에는 × 를 내지 않는다. |
+| `type?` | `SSelectType` | `'default'` | 타입 — 단일/다중 선택과 계층을 어떻게 보여주는지를 정한다. - `default` · `multi`: 평평한 목록 - `default_depth` · `multi_depth`: 계층을 늘 펼친 그룹 헤더로 보여준다. `default_depth` 의 그룹은 고를 수 없고, `multi_depth` 의 그룹 체크박스는 하위 리프를 한꺼번에 토글한다. - `tree` · `multi_tree`: 계층을 접고 펼 수 있는 트리로 보여준다. 처음에는 접혀 있고, 열 때 선택값을 품은 그룹만 펼친다. 검색 중에는 걸린 줄이 보이도록 전부 펼친다. `tree` 는 그룹(부모)도 값으로 고를 수 있다. `multi_tree` 의 그룹 체크박스는 하위 리프를 한꺼번에 토글하고, 방출값에는 리프만 담긴다(`multi_depth` 와 같다). 키보드 → 는 그룹을 펼치거나(펼쳐져 있으면 첫 자식으로 들어가고), ← 는 접거나 부모 줄로 올라간다. 검색 입력에 포커스가 있으면 커서가 그 방향 끝에 닿아 있을 때만 트리 조작으로 쓴다. 그룹의 `disabled` 는 선택만 막고 접고 펴기는 그대로 된다. `tree` 는 하위가 전부 비활성이어도 그룹을 고를 수 있다 (그룹까지 막으려면 그룹에 `disabled` 를 직접 준다). 드롭다운 안의 줄은 `STree` 와 같은 모양(연결선·화살표·체크박스·라벨 타이포)으로 그린다. |
+| `valueDisplay?` | `SSelectValueDisplay` | `'text'` | 트리거에 선택값을 보여주는 방식. - `text`: 선택 라벨을 쉼표로 이어 한 줄로 보여준다. 넘치면 말줄임한다. - `chip`: 선택값마다 칩을 낸다. 칩의 × 를 누르면 그 값만 선택에서 빠지고, 드롭다운은 열리지 않는다. 칩이 한 줄을 넘으면 줄바꿈하고 트리거가 그만큼 높아진다. `chip` 은 `multi`·`multi_depth`·`multi_tree` 에서만 동작한다. 단일 선택 type 에서는 무시하고 `text` 로 보여준다. 전체 선택이면 칩 대신 `allSelectedLabel` 을 보여준다. `multi_depth`·`multi_tree` 에서 그룹의 하위 리프를 전부 고르면 리프 칩 대신 그룹명 칩 하나로 묶고, 그 칩의 × 는 그룹의 리프를 한꺼번에 뺀다. 비활성(select 자체나 해당 옵션)인 칩에는 × 를 내지 않는다. |
 | `showSearch?` | `boolean` | `false` | 검색 입력 사용 |
 | `showSelectAll?` | `boolean` | `false` | 전체선택 옵션 사용 (multi 전용) |
 | `allSelectedLabel?` | `string` | `'전체'` | 전체선택 레이블 |
@@ -61,7 +61,7 @@
 
 | Method | Type | Description |
 |--------|------|-------------|
-| `focus` | `() => void` | 트리거 버튼에 포커스 (sdFocus) |
+| `focus` | `() => void` | 트리거(combobox)에 포커스 (sdFocus) |
 | `open` | `() => void` | 드롭다운 열기 (sdOpen) |
 
 ## Types
@@ -94,7 +94,8 @@ export interface SSelectOption {
 ### SSelectType
 
 ```ts
-export type SSelectType = 'default' | 'multi' | 'default_depth' | 'multi_depth';
+export type SSelectType =
+  'default' | 'multi' | 'default_depth' | 'multi_depth' | 'tree' | 'multi_tree';
 ```
 
 ### SSelectValueDisplay
@@ -113,8 +114,10 @@ export type SSelectValueDisplay = 'text' | 'chip';
 
 ### Depends on
 
+- [SCheckbox](../SCheckbox)
 - [SCircleProgress](../SCircleProgress)
 - [SField](../SField)
+- [SGhostButton](../SGhostButton)
 - [SIcon](../SIcon)
 - [SPortal](../SPortal)
 - [SSearchInput](../SSearchInput)
@@ -123,8 +126,10 @@ export type SSelectValueDisplay = 'text' | 'chip';
 
 ```mermaid
 graph TD;
+  SSelect --> SCheckbox
   SSelect --> SCircleProgress
   SSelect --> SField
+  SSelect --> SGhostButton
   SSelect --> SIcon
   SSelect --> SPortal
   SSelect --> SSearchInput

package/dist/components/SSelect/SSelect.d.ts

@@ -8,7 +8,7 @@ import { type SSelectOption, type SSelectType, type SSelectValueDisplay } from '
 import { type SFieldWidth } from '../../lib/field-width';
 export type { SSelectOption, SSelectType, SSelectValueDisplay } from './select.config';
 export interface SSelectHandle {
-    /** 트리거 버튼에 포커스 (sdFocus) */
+    /** 트리거(combobox)에 포커스 (sdFocus) */
     focus: () => void;
     /** 드롭다운 열기 (sdOpen) */
     open: () => void;
@@ -42,7 +42,21 @@ export interface SSelectProps<TValue extends SSelectChangeValue = SSelectChangeV
     name?: string;
     /** 옵션 목록 (children으로 계층 표현) */
     options?: SSelectOption[];
-    /** 타입: default | multi | default_depth | multi_depth */
+    /**
+     * 타입 — 단일/다중 선택과 계층을 어떻게 보여주는지를 정한다.
+     * - `default` · `multi`: 평평한 목록
+     * - `default_depth` · `multi_depth`: 계층을 늘 펼친 그룹 헤더로 보여준다.
+     *   `default_depth` 의 그룹은 고를 수 없고, `multi_depth` 의 그룹 체크박스는 하위 리프를 한꺼번에 토글한다.
+     * - `tree` · `multi_tree`: 계층을 접고 펼 수 있는 트리로 보여준다. 처음에는 접혀 있고, 열 때 선택값을 품은
+     *   그룹만 펼친다. 검색 중에는 걸린 줄이 보이도록 전부 펼친다.
+     *   `tree` 는 그룹(부모)도 값으로 고를 수 있다. `multi_tree` 의 그룹 체크박스는 하위 리프를 한꺼번에
+     *   토글하고, 방출값에는 리프만 담긴다(`multi_depth` 와 같다).
+     *   키보드 → 는 그룹을 펼치거나(펼쳐져 있으면 첫 자식으로 들어가고), ← 는 접거나 부모 줄로 올라간다.
+     *   검색 입력에 포커스가 있으면 커서가 그 방향 끝에 닿아 있을 때만 트리 조작으로 쓴다.
+     *   그룹의 `disabled` 는 선택만 막고 접고 펴기는 그대로 된다. `tree` 는 하위가 전부 비활성이어도 그룹을 고를 수 있다
+     *   (그룹까지 막으려면 그룹에 `disabled` 를 직접 준다).
+     *   드롭다운 안의 줄은 `STree` 와 같은 모양(연결선·화살표·체크박스·라벨 타이포)으로 그린다.
+     */
     type?: SSelectType;
     /**
      * 트리거에 선택값을 보여주는 방식.
@@ -50,9 +64,9 @@ export interface SSelectProps<TValue extends SSelectChangeValue = SSelectChangeV
      * - `chip`: 선택값마다 칩을 낸다. 칩의 × 를 누르면 그 값만 선택에서 빠지고, 드롭다운은 열리지 않는다.
      *   칩이 한 줄을 넘으면 줄바꿈하고 트리거가 그만큼 높아진다.
      *
-     * `chip` 은 `multi`·`multi_depth` 에서만 동작한다. 단일 선택 type 에서는 무시하고 `text` 로 보여준다.
+     * `chip` 은 `multi`·`multi_depth`·`multi_tree` 에서만 동작한다. 단일 선택 type 에서는 무시하고 `text` 로 보여준다.
      * 전체 선택이면 칩 대신 `allSelectedLabel` 을 보여준다.
-     * `multi_depth` 에서 그룹의 하위 리프를 전부 고르면 리프 칩 대신 그룹명 칩 하나로 묶고,
+     * `multi_depth`·`multi_tree` 에서 그룹의 하위 리프를 전부 고르면 리프 칩 대신 그룹명 칩 하나로 묶고,
      * 그 칩의 × 는 그룹의 리프를 한꺼번에 뺀다.
      * 비활성(select 자체나 해당 옵션)인 칩에는 × 를 내지 않는다.
      */

package/dist/components/SSelect/select.config.d.ts

@@ -4,7 +4,7 @@ export interface SSelectOption {
     disabled?: boolean;
     children?: SSelectOption[];
 }
-export type SSelectType = 'default' | 'multi' | 'default_depth' | 'multi_depth';
+export type SSelectType = 'default' | 'multi' | 'default_depth' | 'multi_depth' | 'tree' | 'multi_tree';
 /** 트리거에 선택값을 보여주는 방식 — 쉼표로 이은 텍스트 | 값마다 칩 */
 export type SSelectValueDisplay = 'text' | 'chip';
 export interface FlatOption {
@@ -12,12 +12,18 @@ export interface FlatOption {
     label: string;
     disabled: boolean;
     depth: number;
-    /** children 을 가진 그룹(비선택) 노드 */
+    /** children 을 가진 그룹 노드 — 그 자체가 값이 되는 것은 `tree` 타입뿐이다 */
     isGroup: boolean;
     raw: string | number;
 }
-/** 트리 옵션을 depth 정보를 유지한 평탄 리스트로 변환. */
-export declare function flattenOptions(options: SSelectOption[], depth?: number): FlatOption[];
+/**
+ * 트리 옵션을 depth 정보를 유지한 평탄 리스트로 변환.
+ *
+ * @param inheritDisabled 하위가 전부 비활성인 그룹을 비활성으로 칠 것인가. 그룹이 값이 아닌 타입에서는
+ *   고를 것이 없는 그룹이라 잠그는 게 맞지만, 그룹 자체가 값인 `tree` 에서는 자식이 막혔다고 그룹까지
+ *   고를 수 없게 되면 안 된다 — 그때는 그룹에 직접 준 `disabled` 만 본다.
+ */
+export declare function flattenOptions(options: SSelectOption[], depth?: number, inheritDisabled?: boolean): FlatOption[];
 /** 선택 가능한(비그룹) 옵션만 */
 export declare const selectableOptions: (flat: FlatOption[]) => FlatOption[];
 /**
@@ -27,6 +33,30 @@ export declare const selectableOptions: (flat: FlatOption[]) => FlatOption[];
  * (multi_depth 부모 체크박스의 상태/카운트/토글 계산에 사용)
  */
 export declare function collectGroupLeafValues(flat: FlatOption[], groupIndex: number): string[];
+/**
+ * 트리 타입에서 접힌 그룹의 자손을 걷어내고 화면에 남는 줄만 돌려준다.
+ * `sourceIndex[i]` 는 남은 i 번째 줄이 입력 `rows` 에서 몇 번째였는가 — 접힌 그룹의 하위 리프는
+ * 화면에 없어도 그룹 체크박스가 세야 하므로, 그 계산은 입력 `rows` 기준으로 한다.
+ */
+export declare function visibleTreeRows(rows: FlatOption[], isExpanded: (group: FlatOption) => boolean): {
+    rows: FlatOption[];
+    sourceIndex: number[];
+};
+/**
+ * 트리 줄마다의 자리 정보 — 화면에 남은 줄(접힘·검색 반영 뒤) 기준이다.
+ * - `isLast`·`ancestorLast`: 연결선용. 자기가 같은 부모 아래 마지막 줄인가, 조상(depth 1 부터 부모까지)이
+ *   각자 마지막 줄인가. STree 가 재귀로 내려가며 넘기는 값과 같은 모양을 펴진 목록에서 구한다.
+ * - `posInSet`·`setSize`: 같은 부모 아래 몇 번째 / 형제가 모두 몇 개. 가상 스크롤로 일부 줄만 DOM 에
+ *   있어도 보조기기가 창 안 줄을 트리 전부로 읽지 않게 `aria-posinset`·`aria-setsize` 로 알린다.
+ */
+export declare function treeLineInfo(rows: FlatOption[]): {
+    isLast: boolean;
+    ancestorLast: boolean[];
+    posInSet: number;
+    setSize: number;
+}[];
+/** 선택값을 품은 그룹들의 value — 트리를 열 때 고른 항목이 보이도록 펼쳐 둘 그룹이다 */
+export declare function ancestorGroupValues(flat: FlatOption[], selected: Set<string>): Set<string>;
 /** 라벨에 HTML 태그가 있는지 (원본 isHtmlLabel) */
 export declare const isHtmlLabel: (label: string) => boolean;
 /** HTML 라벨에서 태그를 제거한 텍스트 (검색 매칭용, 원본 extractText) */