sellmate-design-system-react 9.0.0-beta.102 → 9.0.0-beta.104

package/AGENTS.md

@@ -51,6 +51,7 @@
 | **오버레이** | `STooltip` `SPopover` `SPopup` `SDrawer` `SPortal` |
 | **모달** | `SModal.confirm()` `SModal.create()` + `SActionModal` `SConfirmModal` `SModalOutlet`(앱 루트 1회) |
 | **알림** | `SToast` `SToastContainer` |
+| **국제화** | `SLocaleProvider`(컴포넌트 내장 문구의 언어 — 앱 루트 1회) `useLocale` |
 
 표에 없는 UI 를 만들어야 할 때만 `div` 로 직접 조립하고, 그때도 §1-2 · §2 의 토큰 규칙을 지킨다.
 
@@ -139,6 +140,8 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 
 콤마 없는 `39000` 은 자릿수를 세어야 읽히지만 `39,000` 은 한눈에 읽힌다. 숫자를 그대로 출력하는 코드는 미완성으로 본다.
 
+**앱이 `SLocaleProvider` 로 로케일을 바꾸는 경우(§4-1)에는 `useLocale().formatNumber(v)` 로 쓴다** — 선택한 로케일의 숫자 구분을 따른다. 로케일을 바꾸지 않는 앱은 `toLocaleString()` 그대로 쓴다. **날짜는 로케일을 바꿔도 아래 `YYYY-MM-DD` 표기가 그대로다.**
+
 **번호·코드는 제외한다.** 전화번호·사업자번호·송장번호·상품코드처럼 대상을 가리키는 값은 크기를 비교하는 숫자가 아니라 **서식이 정해진 문자열**이다. 여기에 콤마를 넣으면 송장번호 `123456789` 가 `123,456,789` 로 보여 값 자체가 달라진다.
 
 **날짜는 `YYYY-MM-DD` 로 쓴다.** 자릿수를 채우고 하이픈으로 구분한다 — `2026-08-13`.
@@ -673,6 +676,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | --- | --- | --- |
 | `SModal.*` 로 띄운 모달이 그려질 자리를 만든다 | `SModalOutlet` | §4-1 |
 | `SToast` 가 그려질 자리를 만든다 | `SToastContainer` | §4-1 |
+| 컴포넌트 내장 문구(aria-label·placeholder·"전체" 등)를 사용자 언어로 바꾼다 (국제화) | `SLocaleProvider` | §4-1 |
 
 ### 3-1. 라벨/표시류 — STag vs SBadge vs SChip
 
@@ -1559,6 +1563,7 @@ tableRef.current.scrollToRow(row);                  // 복원
   - **태그의 색·이름을 밖에서 직접 주지 않는다** (`status`). `option.color`·`option.label` 은 없다 — 지금 상태가 가리키는 `options` 칸이 곧 태그다. 색이 상태의 뜻이라 둘이 어긋나면 안 되기 때문이다.
   - **상태 메뉴의 색은 칸마다 준다** — 점과 글자가 그 상태의 색으로 함께 물든다. 상태는 색 자체가 뜻이라 고르는 자리에서도 색을 보고 고른다.
   - `switch` 는 메뉴를 갖지 않는다 — 우측 문구가 "지금 값"이 아니라 보조 조작 문구라, 고를 목록이 있으면 그것은 `subSelect` 다.
+- **라벨 옆에 뱃지·카운트를 붙일 때는 `labelSlot` 을 쓴다** (`account` `select` `switch` `subSelect`). 라벨이 길면 라벨만 잘리고 슬롯은 밀리지 않는다. 행 전체가 버튼이라 **슬롯에 버튼·링크를 넣지 않는다**(button 중첩). `status` 는 태그가 라벨 자리를 차지해 받지 않는다. 텍스트를 넘기면 라벨과 같은 서체·색을 상속하고, 색을 바꿀 때는 토큰(`--sys-color-*`)으로 덮는다(고정 색은 어두운 면에서 묻힌다). 라벨 자체의 색은 바꾸지 못한다.
 - 높이·라운드·아이콘 크기·좌우 여백은 전부 토큰이 넣는다. 직접 주지 않는다.
 
 #### 3-5-8. `SAccountListBox` — 계정 행을 눌러 뜨는 계정 패널
@@ -1912,7 +1917,7 @@ useEffect(() => {
 | `STimePicker` | md | lg |
 | `STimeRangePicker` | md | lg (오전/오후 표시는 두 사이즈 모두 lg) |
 
-`SDatePicker`·`SDateRangePicker` 에 `showWeekday` 를 켜면 날짜 뒤에 요일이 붙어(`2026-10-19 월요일`) 붙는 글자(띄어쓰기 + 요일 3자) 폭만큼 위 표의 하한·상한이 넓어진다 — 등급이 바뀌는 것이 아니다. 늘어난 폭은 컴포넌트가 스스로 잡으므로 요일 때문에 `width` 를 따로 주지 않는다. 표시만 바뀌고 값 형식은 그대로라, **요일을 붙이려고 값을 가공하거나 `hint` 에 요일을 따로 적지 않는다.**
+`SDatePicker`·`SDateRangePicker` 에 `showWeekday` 를 켜면 날짜 뒤에 요일이 붙어(`2026-10-19 월요일`) 붙는 글자(띄어쓰기 + 요일) 폭만큼 위 표의 하한·상한이 넓어진다 — 등급이 바뀌는 것이 아니다. 늘어난 폭은 컴포넌트가 스스로 잡으므로(요일 문구는 `SLocaleProvider` 로케일을 따라 `2026-10-19 Monday` 처럼 바뀌고, 폭도 그에 맞춰 잡힌다) 요일 때문에 `width` 를 따로 주지 않는다. 표시만 바뀌고 값 형식은 그대로라, **요일을 붙이려고 값을 가공하거나 `hint` 에 요일을 따로 적지 않는다.**
 
 `SDateRangePicker` 가 한 등급씩 위인 것은 값이 `YYYY-MM-DD ~ YYYY-MM-DD` 로 두 배가 넘기 때문이다. 같은 이유로 `STimeRangePicker` 의 오전/오후 모드도 sm 에서 한 등급 위를 쓴다 — 그 모드의 최소 폭이 md 등급을 이미 넘어, 그대로 두면 하한이 상한을 넘어 상한이 무력해진다.
 
@@ -2457,6 +2462,23 @@ import { SModalOutlet } from 'sellmate-design-system-react';
 
 `SModal.confirm/loading/create` 로 띄운 모달이 그려지는 자리다. outlet 이 앱 트리 안에 있어야 모달이 앱의 Context(QueryClient·Router·Theme 등)를 상속한다 — outlet 이 없으면 모달은 뜨지만 별도 React 루트라 Provider 가 닿지 않는다(§3-3-4). 모달은 언제나 `body` 로 portal 되므로 outlet 을 어디에 두든 레이아웃에는 영향이 없고, **셸 안에 넣을 필요도 없다.** 토스트를 쓴다면 `SToastContainer` 도 같은 자리에 둔다.
 
+**컴포넌트가 내장한 문구(aria-label·placeholder·"전체" 등)의 언어는 `SLocaleProvider` 가 정한다 — 앱 루트에 한 번 두고, `SModalOutlet` 은 그 안쪽에 둔다.** 안쪽에 두어야 명령형 모달도 같은 로케일을 상속한다. Provider 가 없으면 한국어다.
+
+```tsx
+import { SLocaleProvider, SModalOutlet } from 'sellmate-design-system-react';
+
+<SLocaleProvider locale={userLocale}>
+  <RouterProvider router={router} />
+  <SModalOutlet />
+</SLocaleProvider>;
+```
+
+- 지원 로케일은 `SLOCALES` 에 있다. `en-US` 처럼 지역이 붙어도 되고, **지원하지 않는 값은 예외 없이 한국어로 폴백한다.** `zh` 는 간체 문구라 `zh-TW` 도 간체로 나온다.
+- **`ja`·`zh` 문구는 원어민 검수 전 초안이다.** 사용자에게 노출하기 전에 검수한다.
+- 일부 문구만 바꾸려면 `messages` 로 덮어쓴다 — 나머지는 로케일 문구를 유지한다. `messages` 는 모듈 상수나 `useMemo` 로 안정시킨다(렌더마다 새 객체를 만들면 하위 컴포넌트가 매번 다시 그려진다).
+- 개별 prop(`placeholder` 등)을 직접 주면 로케일 문구보다 prop 이 우선한다. **내장 문구를 앱이 직접 번역해 prop 으로 넘기지 않는다** — Provider 가 이미 처리한다.
+- 컴포넌트가 사용자에게 보여 주는 내장 문구는 모두 로케일을 따른다 — 날짜·시간 컴포넌트의 요일·월·오전/오후 라벨, `SEditor` 툴바, `rules` 의 기본 오류 문구(`false` 를 돌려줄 때)까지 포함한다. **날짜 값의 형식(`YYYY-MM-DD`)은 그대로다.** 개발자에게 던지는 예외·콘솔 메시지는 한국어로 남는다. 예외는 앱이 정하는 데이터다 — 서비스 이름 목록(`SLauncherListBox`)과 `rules` 가 직접 돌려준 오류 문구, 앱이 넘긴 `label`·`options` 는 Provider 가 바꾸지 않는다.
+
 **최소 너비는 `SLayout` 이 보장한다 — 앱이 `min-w-*` 를 직접 주지 않는다.** 창이 최소 너비(`SLAYOUT_MIN_WIDTH`, GNB 포함한 전체 기준)보다 좁아지면 GNB·상단바는 제자리에 남고 **`SPage` 안에만 가로 스크롤이 생긴다.** 문서(브라우저 창)에는 가로 스크롤이 생기지 않는다. 그래서 셸을 감싸는 요소에 `min-width` 나 `overflow-x` 를 걸지 않는다 — 걸면 창 전체가 스크롤되어 GNB 가 화면 밖으로 밀린다.
 
 **창이 최소 너비보다 넓을 때 본문을 어떻게 세울지는 `SPage` 의 `contentWidth` 가 정한다 — 폭을 직접 계산하지 않는다.** 넓은 모니터에서 본문이 끝까지 늘어나 성기어지는 화면이 있으므로 세 가지 중 하나를 고른다.

package/dist/components/SAccountListBox/accountListBox.config.d.ts

@@ -7,7 +7,10 @@ export declare const ACCOUNT_LIST_BOX_ICONS: {
     readonly language: "global";
     readonly logout: "logout";
 };
-/** 행 라벨 기본값 — 시안 문구. 앱이 바꿀 수 있다 */
+/**
+ * 행 라벨의 한국어 시안 문구. 컴포넌트는 이 값이 아니라 `SLocaleProvider` 로케일(`accountListBox.*`)을 따른다 —
+ * 앱이 `label` 로 직접 주면 그 값이 우선한다. 시안 문구를 참조하는 소비 앱을 위해 남겨 둔다.
+ */
 export declare const ACCOUNT_LIST_BOX_LABELS: {
     readonly accountSetting: "계정 설정";
     readonly language: "언어 변경";

package/dist/components/SBarcodeInput/README.md

@@ -13,7 +13,7 @@
 | `clearable?` | `boolean` | `false` |  |
 | `autoFocus?` | `boolean` | — |  |
 | `name?` | `string` | — |  |
-| `placeholder?` | `string` | `'입력해 주세요.'` |  |
+| `placeholder?` | `string` | — | 생략하면 `SLocaleProvider` 로케일의 기본 문구(ko: "입력해 주세요.")를 쓴다 |
 | `disabled?` | `boolean` | `false` |  |
 | `readOnly?` | `boolean` | `false` |  |
 | `rules?` | `Rule[]` | — |  |

package/dist/components/SBarcodeInput/SBarcodeInput.d.ts

@@ -16,6 +16,7 @@ export interface SBarcodeInputProps {
     clearable?: boolean;
     autoFocus?: boolean;
     name?: string;
+    /** 생략하면 `SLocaleProvider` 로케일의 기본 문구(ko: "입력해 주세요.")를 쓴다 */
     placeholder?: string;
     disabled?: boolean;
     readOnly?: boolean;

package/dist/components/SCalendarBoard/CalendarDayEventListBox.d.ts

@@ -6,7 +6,7 @@ import type { SCalendarBoardEvent } from './types';
  * 칸에서 자라난 것처럼 보이게 하기 위함이다. 위치와 최소 높이는 SCalendarBoard 가 정하고,
  * 그보다 내용이 길면 자라다 상한에서 멈춘다.
  */
-export declare function CalendarDayEventListBox({ date, events, onEventClick, minWidth, minHeight, onClose, closeLabel, }: {
+export declare function CalendarDayEventListBox({ date, events, onEventClick, minWidth, minHeight, onClose, closeLabel: closeLabelProp, }: {
     /** YYYY-MM-DD */
     date: string;
     /**

package/dist/components/SCalendarBoard/README.md

@@ -18,7 +18,7 @@
 | `dayColors?` | `Record<string, SCalendarBoardDayColor>` | — | 날짜별 칸 배경. 키는 `YYYY-MM-DD`, 없는 날짜는 `'default'` 다. 그날의 성격(마감·완료·휴무 등)을 칸 전체로 알릴 때 쓴다 — 일정 하나의 색은 `events[].color` 다. |
 | `dayContent?` | `Record<string, ReactNode>` | — | 날짜별 칸 본문. 키는 `YYYY-MM-DD`, 준 날짜는 **일정 자리를 통째로 이 내용이 차지한다** — 그날의 `events` 는 그리지 않고 목록 판도 열리지 않는다. 일정으로 표현되지 않는 것(재고 현황· 매출 요약 같은 그날치 요약)을 칸에 그대로 얹을 때 쓴다. |
 | `focusedEventId?` | `string \| null` | — | 집중할 일정의 `id`. 그 일정만 또렷하게 남고 **나머지 일정과 "N개 더보기" 는 흐려진다** — 판 밖의 무언가(목록의 행 등)에 손이 닿았을 때 판에서 그에 대응하는 일정을 짚어 주는 데 쓴다. 그 일정이 칸에 담기는 줄 수를 넘겨 **"N개 더보기" 에 접혀 있으면, 그 "더보기" 자리에 대신 그려져** 집중하는 동안만 드러난다. 이미 보이고 있으면 자리는 그대로다 — 어느 쪽이든 다른 일정의 줄 배정은 달라지지 않으므로, 집중이 오가도 판이 출렁이지 않는다. 자리를 내준 칸은 그 동안 "더보기" 를 그리지 않는다(한 줄에 둘을 넣을 수 없다). 거기 남은 일정은 칸을 눌러 목록 판으로 본다. `id` 가 없는 일정은 지목할 수 없다. |
-| `todayLabel?` | `string` | `'오늘'` | 헤더 오른쪽 "오늘" 버튼 레이블. 빈 문자열이면 버튼을 그리지 않는다 |
+| `todayLabel?` | `string` | — | 헤더 오른쪽 "오늘" 버튼 레이블. 빈 문자열이면 버튼을 그리지 않는다 |
 | `moreLabel?` | `string` | — | "N개" 뒤에 붙는 말 |
 | `headerRight?` | `ReactNode` | — | 헤더 오른쪽 끝에 붙일 추가 컨트롤 |
 | `className?` | `string` | — |  |

package/dist/components/SCalendarBoard/SCalendarBoard.d.ts

@@ -80,4 +80,4 @@ export interface SCalendarBoardProps {
  * 보일지" 를 정한다 — 그래서 놓는 자리에 높이를 주어야 한다 (`<div className="h-[640px]">` ·
  * `SPage` 본문의 남은 높이 등). 높이를 주지 않으면 칸이 `dayCard.minHeight` 로 주저앉는다.
  */
-export declare function SCalendarBoard({ year, month, defaultYear, defaultMonth, onViewChange, selectable, value, onValueChange, events, dayColors, dayContent, focusedEventId, onEventClick, onMoreClick, todayLabel, moreLabel, headerRight, className, style, }: SCalendarBoardProps): import("react").JSX.Element;
+export declare function SCalendarBoard({ year, month, defaultYear, defaultMonth, onViewChange, selectable, value, onValueChange, events, dayColors, dayContent, focusedEventId, onEventClick, onMoreClick, todayLabel: todayLabelProp, moreLabel, headerRight, className, style, }: SCalendarBoardProps): import("react").JSX.Element;

package/dist/components/SChatInput/README.md

@@ -9,7 +9,7 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `value?` | `string` | `''` | 입력값 (제어) |
-| `placeholder?` | `string` | `DEFAULT_PLACEHOLDER` | 안내 문구. 세 제품이 같은 말로 서도록 기본값을 쥐고 있다 |
+| `placeholder?` | `string` | — | 안내 문구. 생략하면 `SLocaleProvider` 로케일의 기본 문구(ko: "메시지를 입력해 주세요...")를 쓴다 |
 | `disabled?` | `boolean` | `false` | 비활성 |
 | `hasAttachments?` | `boolean` | `false` | 보낼 첨부가 쌓여 있는지. 켜면 글이 비어도 전송 버튼이 열린다 — 파일·이미지만 보낼 수 있다. 첨부 목록은 앱이 쥐므로 입력창은 그 유무만 받는다. 첨부를 받는 대화면 쌓인 첨부 수로 켠다. |
 | `attachAccept?` | `string` | — | 파일 선택 창에서 고를 수 있는 형식 (`<input accept>` 와 같다). 예: `'image/*,.pdf'` |

package/dist/components/SChatInput/SChatInput.d.ts

@@ -8,7 +8,7 @@ export interface SChatInputProps extends Omit<TextareaHTMLAttributes<HTMLTextAre
     value?: string;
     /** 값 변경 */
     onValueChange?: (value: string) => void;
-    /** 안내 문구. 세 제품이 같은 말로 서도록 기본값을 쥐고 있다 */
+    /** 안내 문구. 생략하면 `SLocaleProvider` 로케일의 기본 문구(ko: "메시지를 입력해 주세요...")를 쓴다 */
     placeholder?: string;
     /** 비활성 */
     disabled?: boolean;

package/dist/components/SConfirmModal/README.md

@@ -23,7 +23,7 @@
 | `tagSlot?` | `ReactNode` | — | 콘텐츠 박스 tag 위치 커스텀 콘텐츠 (미지정 시 tagLabel 기반 STag) |
 | `optionSlot?` | `ReactNode` | — | 콘텐츠 박스에서 태그 오른쪽 커스텀 콘텐츠 (미지정 시 slotLabel 텍스트) |
 | `contentSlot?` | `ReactNode` | — | 콘텐츠 박스 바로 아래에 통으로 들어가는 커스텀 콘텐츠 (전체 폭) |
-| `mainButtonLabel?` | `string` | `'확인'` | 메인(확인) 버튼에 찍히는 글자 |
+| `mainButtonLabel?` | `string` | — | 메인(확인) 버튼에 찍히는 글자. 생략하면 `SLocaleProvider` 로케일의 기본 문구(ko: "확인")를 쓴다 |
 | `mainButtonOutline?` | `boolean` | — | 메인 버튼을 아웃라인(테두리)으로 세울지. 지정하지 않으면 `type` 이 정한다 — positive·negative 는 채운 버튼, default 는 아웃라인. **색은 여기서 고르지 않는다.** `type` 이 정한다(positive=primary / negative=danger / default=neutral) — 아이콘·제목이 말하는 것과 버튼 색이 어긋나면 읽는 사람이 헷갈리므로 그 조합은 타입에서 막는다. 글자는 `mainButtonLabel` 이다. `type="default"` 에 `false` 를 주면 테두리 없는 흰 버튼이 된다(neutral 은 solid·outline 이 같은 흰 면이고 테두리 유무만 다르다). 확인 버튼이 눌러야 할 것으로 안 읽히므로 권하지 않는다. |
 | `mainButtonDisabled?` | `boolean` | `false` | 메인 버튼을 눌리지 않게 한다. **기본값 `false`.** 모달 안에서 **아직 확정할 수 없을 때** 쓴다 — 동의 체크를 아직 안 했거나, `contentSlot` 의 입력이 덜 찼거나, 확인 뒤에 나갈 요청이 이미 나가는 중일 때. **왜 못 누르는지는 화면이 말해야 한다.** 흐려진 버튼만 남으면 사용자는 고장으로 읽는다 — 못 채운 것을 `bottomMessage` 나 `contentSlot` 안에서 함께 보인다. 서브(취소) 버튼은 따라 잠기지 않는다. 확정하지 못하는 상태일수록 **나가는 길은 열려 있어야** 하기 때문이다. 그래서 서브 버튼을 막는 prop 은 두지 않는다. |
 | `subButtonLabel?` | `string` | — | 서브 버튼에 찍히는 글자. **주지 않는 것이 기본이다** — 비어 있으면 버튼이 아예 서지 않고 확인 하나만 남는다. **`onCancel` 이 닫는 것 말고 따로 할 일이 있을 때만 준다.** 눌러도 창만 닫힌다면 X 버튼이 이미 그 일을 하므로(X 는 늘 서 있고, `persistent` 를 켜지 않았으면 백드롭·ESC 로도 닫힌다) 같은 일을 하는 버튼을 하나 더 세우지 않는다. 되묻는 모달이라고 해서 예외가 아니다 — "삭제할까요?" 에 답하지 않고 나가는 것은 X 로 충분하다. 그래서 서브 버튼이 설 자리는 **확인과 대등한 두 번째 선택지**다. 그때 글자는 `취소`·`닫기` 가 아니라 그 버튼이 하는 일의 이름이 된다. ```tsx ✅ { mainButtonLabel: '자동 취소', subButtonLabel: '수동 처리' } // 두 갈래를 고르게 한다 ❌ { mainButtonLabel: '삭제', subButtonLabel: '취소' } // X 가 이미 하는 일 ``` |

package/dist/components/SConfirmModal/SConfirmModal.d.ts

@@ -29,7 +29,7 @@ export interface SConfirmModalProps {
     optionSlot?: ReactNode;
     /** 콘텐츠 박스 바로 아래에 통으로 들어가는 커스텀 콘텐츠 (전체 폭) */
     contentSlot?: ReactNode;
-    /** 메인(확인) 버튼에 찍히는 글자 */
+    /** 메인(확인) 버튼에 찍히는 글자. 생략하면 `SLocaleProvider` 로케일의 기본 문구(ko: "확인")를 쓴다 */
     mainButtonLabel?: string;
     /**
      * 메인 버튼을 아웃라인(테두리)으로 세울지. 지정하지 않으면 `type` 이 정한다 —
@@ -81,4 +81,4 @@ export interface SConfirmModalProps {
     onClose?: () => void;
 }
 /** SConfirmModal — sd-confirm-modal 포팅. 아이콘+제목+메시지+태그+확인/취소 버튼. */
-export declare function SConfirmModal({ open, onOpenChange, persistent, type, modalTitle, titleClassName, topMessage, bottomMessage, tagLabel, tagShape, tagSize, tagColor, slotLabel, tagSlot, optionSlot, contentSlot, mainButtonLabel, mainButtonOutline, mainButtonDisabled, subButtonLabel, onOk, onCancel, onClose, }: SConfirmModalProps): import("react").JSX.Element;
+export declare function SConfirmModal({ open, onOpenChange, persistent, type, modalTitle, titleClassName, topMessage, bottomMessage, tagLabel, tagShape, tagSize, tagColor, slotLabel, tagSlot, optionSlot, contentSlot, mainButtonLabel: mainButtonLabelProp, mainButtonOutline, mainButtonDisabled, subButtonLabel, onOk, onCancel, onClose, }: SConfirmModalProps): import("react").JSX.Element;

package/dist/components/SEditor/README.md

@@ -59,7 +59,7 @@
 |------|------|---------|-------------|
 | `value?` | `string` | — | 값 (제어) — HTML 문자열 |
 | `defaultValue?` | `string` | — | 초기값 (비제어) — HTML 문자열 |
-| `placeholder?` | `string` | `'내용을 입력해 주세요.'` | 빈 문서에 보일 안내 문구 |
+| `placeholder?` | `string` | — | 빈 문서에 보일 안내 문구. 생략하면 `SLocaleProvider` 로케일의 기본 문구(ko: "내용을 입력해 주세요.")를 쓴다 |
 | `minHeight?` | `number \| string` | `200` | 편집 영역 최소 높이 (숫자=px) |
 | `maxHeight?` | `number \| string` | — | 편집 영역 최대 높이 (숫자=px). 넘으면 편집 영역 안에서만 스크롤한다 |
 | `simple?` | `boolean` | `false` | **글자에 거는 서식만** 남긴다 — 목록·정렬·인용·코드·링크·이미지·구분선이 빠진다. 막대와 버블 메뉴 양쪽에 함께 걸린다 (한쪽에만 남으면 아무것도 막지 못한다). 받은 글의 문단 구조까지 작성자를 따라가면 곤란한 자리 — 좁은 칸의 메모·사유·짧은 안내문 — 에 쓴다. 반대로 서식이 아예 필요 없다면 `SEditor` 가 아니라 `STextarea` 다. |

package/dist/components/SEditor/SEditor.d.ts

@@ -30,7 +30,7 @@ export interface SEditorProps {
     defaultValue?: string;
     /** 값 변경 (sdUpdate) — 빈 문서면 빈 문자열을 준다 */
     onValueChange?: (html: string) => void;
-    /** 빈 문서에 보일 안내 문구 */
+    /** 빈 문서에 보일 안내 문구. 생략하면 `SLocaleProvider` 로케일의 기본 문구(ko: "내용을 입력해 주세요.")를 쓴다 */
     placeholder?: string;
     /** 편집 영역 최소 높이 (숫자=px) */
     minHeight?: number | string;

package/dist/components/SEditor/editor.config.d.ts

@@ -47,6 +47,10 @@ export declare const SEDITOR_SIMPLE_BUBBLE_MENU: SEditorToolbarItem[];
 /** 제목 단계 — 본문 12px 위로 14 / 16 / 18 (DS 타이포 heading sm·md·lg) */
 export declare const SEDITOR_HEADING_LEVELS: readonly [1, 2, 3];
 export type SEditorHeadingLevel = (typeof SEDITOR_HEADING_LEVELS)[number];
+/**
+ * 저장된 HTML 을 읽는 화면이 제목 단계를 부를 때 쓰는 한국어 기본 라벨이다.
+ * 에디터 툴바는 이 값이 아니라 `SLocaleProvider` 로케일(`editor.heading`·`editor.headingBody`)을 따른다.
+ */
 export declare const SEDITOR_HEADING_LABELS: Record<SEditorHeadingLevel | 0, string>;
 /**
  * 글자 크기 선택지 (px) — 워드프로세서의 눈금과 같은 단계다.
@@ -78,7 +82,10 @@ export interface SEditorColorOption {
  * 이미 저장된 글도 따라간다. 대신 **DS `theme.css` 가 없는 환경(메일 본문 등)으로 그대로
  * 내보내면 색이 풀린다** — 그런 반출이 필요하면 내보내는 쪽에서 토큰을 실제 색으로 푼다.
  */
-export declare const SEDITOR_DEFAULT_COLORS: SEditorColorOption[];
+export declare const SEDITOR_DEFAULT_COLORS: (SEditorColorOption & {
+    /** 로케일 메시지(`editor.*`)에서 라벨을 찾는 키 — `label` 은 한국어 기본값이다 */
+    key: 'colorDefault' | 'colorSecondary' | 'colorMuted' | 'colorAccent' | 'colorBrand' | 'colorSuccess' | 'colorWarning' | 'colorDanger';
+})[];
 /**
  * ProseMirror 가 만드는 요소에 붙는 클래스 — 자식 선택자의 기준점이 된다.
  *

package/dist/components/SFooter/README.md

@@ -50,7 +50,7 @@ export type SFooterSize = 'sm' | 'md';
  * **`size` 만 뺀다.** 버튼 크기는 놓이는 위치가 정하므로 footer 의 `size` 가 정한다
  * (AGENTS.md §3-5-2) — 버튼이 자기 크기를 따로 주장할 자리가 아니다.
  *
- * `label`·`color` 는 주지 않으면 footer 가 주 액션 기본값(`'확인'`·`'primary'`)으로 잡는다.
+ * `label`·`color` 는 주지 않으면 footer 가 주 액션 기본값(로케일의 "확인"·`'primary'`)으로 잡는다.
  * 파괴적 액션이라 `danger` 가 필요한 경우는 열어 둔다 (§3-5-3).
  */
 export type SFooterButton = Omit<SButtonProps, 'size'>;

package/dist/components/SFooter/SFooter.d.ts

@@ -18,7 +18,7 @@ export type SFooterSize = 'sm' | 'md';
  * **`size` 만 뺀다.** 버튼 크기는 놓이는 위치가 정하므로 footer 의 `size` 가 정한다
  * (AGENTS.md §3-5-2) — 버튼이 자기 크기를 따로 주장할 자리가 아니다.
  *
- * `label`·`color` 는 주지 않으면 footer 가 주 액션 기본값(`'확인'`·`'primary'`)으로 잡는다.
+ * `label`·`color` 는 주지 않으면 footer 가 주 액션 기본값(로케일의 "확인"·`'primary'`)으로 잡는다.
  * 파괴적 액션이라 `danger` 가 필요한 경우는 열어 둔다 (§3-5-3).
  */
 export type SFooterButton = Omit<SButtonProps, 'size'>;

package/dist/components/SGnbSystem/gnbSystem.config.d.ts

@@ -118,7 +118,3 @@ export declare const GNB_SYSTEM_LAYOUT: {
  * 전용 토큰이 없어 시안 값을 상수로 둔다.
  */
 export declare const GNB_SYSTEM_ALERT_DOT_SIZE = 6;
-/** 알림 버튼 기본 라벨 */
-export declare const GNB_SYSTEM_ALERT_LABEL = "\uC54C\uB9BC";
-/** 설정 버튼 기본 라벨 */
-export declare const GNB_SYSTEM_SETTING_LABEL = "\uC124\uC815";

package/dist/components/SGuide/README.md

@@ -9,7 +9,7 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `type?` | `SGuideType` | `'tip'` | 가이드 타입 (tip: 팝업, notion: 외부 링크) |
-| `label?` | `string` | `''` | 버튼 레이블 (없으면 type 기본값) |
+| `label?` | `string` | `''` | 버튼 레이블. 생략하면 type 별 기본 문구(tip: "활용 TIP", notion: "사용법 안내" — `SLocaleProvider` 로케일을 따른다) |
 | `message?` | `SGuideMessage` | `''` | 팝업 메시지 (배열이면 리스트, 중첩 배열이면 depth 표현) |
 | `url?` | `string` | `''` | notion 타입 클릭 시 이동 URL |
 | `popupTitle?` | `string` | `''` | 팝업 제목 (없으면 type 기본값) |

package/dist/components/SGuide/SGuide.d.ts

@@ -5,7 +5,7 @@ export type SGuideMessage = string | SGuideMessage[];
 export interface SGuideProps {
     /** 가이드 타입 (tip: 팝업, notion: 외부 링크) */
     type?: SGuideType;
-    /** 버튼 레이블 (없으면 type 기본값) */
+    /** 버튼 레이블. 생략하면 type 별 기본 문구(tip: "활용 TIP", notion: "사용법 안내" — `SLocaleProvider` 로케일을 따른다) */
     label?: string;
     /** 팝업 메시지 (배열이면 리스트, 중첩 배열이면 depth 표현) */
     message?: SGuideMessage;

package/dist/components/SIcon/README.md

@@ -9,7 +9,7 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `name` | `SIconName` | — | 아이콘명 |
-| `size?` | `number \| string` | `24` | 아이콘 크기(px 또는 CSS 길이). 토큰 크기 `var(--cmp-…)` 도 그대로 넘긴다 |
+| `size?` | `number \| string` | `24` | 아이콘 크기(px 또는 CSS 길이). 토큰 크기 `var(--cmp-…)` 도 그대로 넘긴다. 8 · 10 · 12 · 16 · 20 · 24 · 32 에서는 stroke 아이콘의 선 두께가 화면 px 로 고정돼 작게 줄여도 선이 흐려지지 않는다. 그 밖의 크기와 CSS 길이는 선 두께가 크기에 비례해 줄어든다 |
 | `color?` | `SColor` | — | 아이콘 색상. 팔레트 키(`grey_65`, `red_95` …) 또는 임의 CSS 색상. 미지정 시 currentColor 상속 |
 | `rotate?` | `0 \| 90 \| 180 \| 270` | — | 회전 각도 |
 | `label?` | `string` | — | 접근성 라벨. 없으면 aria-hidden 처리 |

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

@@ -4,7 +4,11 @@ import { type SIconName } from './icons.gen';
 export interface SIconProps {
     /** 아이콘명 */
     name: SIconName;
-    /** 아이콘 크기(px 또는 CSS 길이). 토큰 크기 `var(--cmp-…)` 도 그대로 넘긴다 */
+    /**
+     * 아이콘 크기(px 또는 CSS 길이). 토큰 크기 `var(--cmp-…)` 도 그대로 넘긴다.
+     * 8 · 10 · 12 · 16 · 20 · 24 · 32 에서는 stroke 아이콘의 선 두께가 화면 px 로 고정돼 작게 줄여도
+     * 선이 흐려지지 않는다. 그 밖의 크기와 CSS 길이는 선 두께가 크기에 비례해 줄어든다
+     */
     size?: number | string;
     /** 아이콘 색상. 팔레트 키(`grey_65`, `red_95` …) 또는 임의 CSS 색상. 미지정 시 currentColor 상속 */
     color?: SColor;

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

@@ -1,7 +1,9 @@
 import type { SVGProps } from 'react';
 export type IconRenderProps = {
     size?: number | string;
-} & SVGProps<SVGSVGElement>;
+    /** stroke 아이콘의 선 두께(화면 px). 주면 크기와 무관하게 고정되고, 없으면 24 격자 기준 1.5 로 함께 축소된다 */
+    strokeWidth?: number;
+} & Omit<SVGProps<SVGSVGElement>, 'strokeWidth'>;
 export declare const ICONS: {
     readonly account: (p: IconRenderProps) => import("react").JSX.Element;
     readonly add: (p: IconRenderProps) => import("react").JSX.Element;
@@ -55,6 +57,7 @@ export declare const ICONS: {
     readonly coupon: (p: IconRenderProps) => import("react").JSX.Element;
     readonly dashboard: (p: IconRenderProps) => import("react").JSX.Element;
     readonly date: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly dollar: (p: IconRenderProps) => import("react").JSX.Element;
     readonly dot: (p: IconRenderProps) => import("react").JSX.Element;
     readonly download: (p: IconRenderProps) => import("react").JSX.Element;
     readonly drag: (p: IconRenderProps) => import("react").JSX.Element;
@@ -62,6 +65,8 @@ export declare const ICONS: {
     readonly etc: (p: IconRenderProps) => import("react").JSX.Element;
     readonly event: (p: IconRenderProps) => import("react").JSX.Element;
     readonly focus: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly fullscreen: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly fullscreenExit: (p: IconRenderProps) => import("react").JSX.Element;
     readonly global: (p: IconRenderProps) => import("react").JSX.Element;
     readonly helpFill: (p: IconRenderProps) => import("react").JSX.Element;
     readonly helpOutline: (p: IconRenderProps) => import("react").JSX.Element;

package/dist/components/SMeatballButton/README.md

@@ -11,8 +11,8 @@
 | `size?` | `SMeatballButtonSize` | `'sm'` | 버튼 크기 |
 | `intent?` | `SMeatballButtonIntent` | `'default'` | 색상 의도. 어두운 배경 위에서는 inverse |
 | `items?` | `SMeatballButtonItem[]` | `[]` | 메뉴 항목 목록 |
-| `tooltipText?` | `string` | `'기능 더 보기'` | 호버 시 표시할 툴팁 텍스트. 빈 문자열이면 툴팁을 띄우지 않는다. 메뉴가 열려 있는 동안은 숨는다. |
-| `ariaLabel?` | `string` | — | 스크린리더용 접근성 레이블. 미지정 시 tooltipText, 그것도 비면 '기능 더 보기' |
+| `tooltipText?` | `string` | — | 호버 시 표시할 툴팁 텍스트. 빈 문자열이면 툴팁을 띄우지 않는다. 메뉴가 열려 있는 동안은 숨는다. 생략하면 `SLocaleProvider` 로케일의 기본 문구(ko: "기능 더 보기")를 쓴다. |
+| `ariaLabel?` | `string` | — | 스크린리더용 접근성 레이블. 미지정 시 tooltipText, 그것도 비면 로케일의 기본 문구(ko: '기능 더 보기') |
 | `disabled?` | `boolean` | `false` | 비활성 |
 | `className?` | `string` | — | 버튼을 감싸는 요소의 클래스. 위치 조정(absolute 배치 등)용 |
 | `style?` | `CSSProperties` | — | 버튼을 감싸는 요소의 스타일. 위치 조정용 |

package/dist/components/SMeatballButton/SMeatballButton.d.ts

@@ -18,9 +18,12 @@ export interface SMeatballButtonProps {
     intent?: SMeatballButtonIntent;
     /** 메뉴 항목 목록 */
     items?: SMeatballButtonItem[];
-    /** 호버 시 표시할 툴팁 텍스트. 빈 문자열이면 툴팁을 띄우지 않는다. 메뉴가 열려 있는 동안은 숨는다. */
+    /**
+     * 호버 시 표시할 툴팁 텍스트. 빈 문자열이면 툴팁을 띄우지 않는다. 메뉴가 열려 있는 동안은 숨는다.
+     * 생략하면 `SLocaleProvider` 로케일의 기본 문구(ko: "기능 더 보기")를 쓴다.
+     */
     tooltipText?: string;
-    /** 스크린리더용 접근성 레이블. 미지정 시 tooltipText, 그것도 비면 '기능 더 보기' */
+    /** 스크린리더용 접근성 레이블. 미지정 시 tooltipText, 그것도 비면 로케일의 기본 문구(ko: '기능 더 보기') */
     ariaLabel?: string;
     /** 비활성 */
     disabled?: boolean;

package/dist/components/SModalContainer/README.md

@@ -9,7 +9,7 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `open?` | `boolean` | — | 표시 여부 (제어) |
-| `ariaTitle?` | `string` | `'모달'` | 접근성 제목 (스크린리더용). 시각 제목은 children이 담당 |
+| `ariaTitle?` | `string` | — | 접근성 제목 (스크린리더용). 시각 제목은 children이 담당. 생략하면 `SLocaleProvider` 로케일의 기본 문구(ko: "모달")를 쓴다. |
 | `showClose?` | `boolean` | `false` | 우측 상단 닫기 버튼 |
 | `persistent?` | `boolean` | `true` | 백드롭 클릭·ESC로 닫히지 않고 흔들림(shake) 애니메이션 (sd-modal-container persistent). **기본값 true** — 모달은 작성 중인 내용을 잃지 않도록 임의 닫힘을 막는 것이 기본이다. 닫기 경로는 X 버튼과 모달 안의 버튼뿐이다. false로 주면 백드롭·ESC 닫기가 열린다. |
 | `width?` | `number \| string` | — | 너비/높이 |

package/dist/components/SModalContainer/SModalContainer.d.ts

@@ -9,7 +9,10 @@ export interface SModalContainerProps {
     open?: boolean;
     /** 표시 상태 변경 */
     onOpenChange?: (open: boolean) => void;
-    /** 접근성 제목 (스크린리더용). 시각 제목은 children이 담당 */
+    /**
+     * 접근성 제목 (스크린리더용). 시각 제목은 children이 담당.
+     * 생략하면 `SLocaleProvider` 로케일의 기본 문구(ko: "모달")를 쓴다.
+     */
     ariaTitle?: string;
     /** 우측 상단 닫기 버튼 */
     showClose?: boolean;
@@ -38,4 +41,4 @@ export interface SModalContainerProps {
  * 소비자는 직접 import 할 수 없고, SConfirmModal/SActionModal/SLoadingModal 세 모달의
  * 공통 컨테이너로만 조합해 쓴다. barrel(src/index.ts)에 다시 추가하지 말 것.
  */
-export declare function SModalContainer({ open, onOpenChange, ariaTitle, showClose, onClose, persistent, width, height, children, className, style, }: SModalContainerProps): import("react").JSX.Element;
+export declare function SModalContainer({ open, onOpenChange, ariaTitle: ariaTitleProp, showClose, onClose, persistent, width, height, children, className, style, }: SModalContainerProps): import("react").JSX.Element;

package/dist/components/SNumberInput/README.md

@@ -23,7 +23,7 @@
 | `inputStyle?` | `CSSProperties` | — | 네이티브 input style |
 | `autoFocus?` | `boolean` | — | 마운트 시 자동 포커스 |
 | `name?` | `string` | — | 폼 연동 name |
-| `placeholder?` | `string` | `'입력해 주세요.'` |  |
+| `placeholder?` | `string` | — |  |
 | `disabled?` | `boolean` | `false` |  |
 | `readOnly?` | `boolean` | `false` |  |
 | `rules?` | `Rule[]` | — | 유효성 규칙 — blur 시 검증 |

package/dist/components/SSearchInput/README.md

@@ -10,7 +10,7 @@
 |------|------|---------|-------------|
 | `value?` | `string \| number` | — | 값 (제어) |
 | `size?` | `SSearchInputSize` | `'sm'` | 크기 |
-| `placeholder?` | `string` | `'결과 내 검색'` | 플레이스홀더 |
+| `placeholder?` | `string` | — | 플레이스홀더. 생략하면 `SLocaleProvider` 로케일의 기본 문구(ko: "결과 내 검색")를 쓴다 |
 | `clearable?` | `boolean` | `false` | 지우기 버튼 — 값이 있을 때만 나타난다 |
 | `disabled?` | `boolean` | `false` | 비활성 |
 | `width?` | `SFieldWidth` | — | 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이. 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다. 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다. 미지정 시 부모 폭을 채운다. |

package/dist/components/SSearchInput/SSearchInput.d.ts

@@ -16,7 +16,7 @@ export interface SSearchInputProps extends Omit<InputHTMLAttributes<HTMLInputEle
     onSearch?: (value: string) => void;
     /** 크기 */
     size?: SSearchInputSize;
-    /** 플레이스홀더 */
+    /** 플레이스홀더. 생략하면 `SLocaleProvider` 로케일의 기본 문구(ko: "결과 내 검색")를 쓴다 */
     placeholder?: string;
     /** 지우기 버튼 — 값이 있을 때만 나타난다 */
     clearable?: boolean;

package/dist/components/SSelect/README.md

@@ -16,8 +16,8 @@
 | `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` | `'전체'` | 전체선택 레이블 |
-| `placeholder?` | `string` | `'선택'` | placeholder |
+| `allSelectedLabel?` | `string` | — | 전체선택 레이블. 생략하면 `SLocaleProvider` 로케일의 기본 문구(ko: "전체")를 쓴다 |
+| `placeholder?` | `string` | — | placeholder. 생략하면 `SLocaleProvider` 로케일의 기본 문구(ko: "선택")를 쓴다 |
 | `disabled?` | `boolean` | `false` | 비활성 |
 | `clearable?` | `boolean` | `false` | 선택값 지우기(×) 버튼 노출. 선택값이 있고 비활성이 아닐 때만 나타나며, 누르면 드롭다운을 열지 않고 값만 비운다. |
 | `error?` | `boolean` | `false` | 에러 상태 |

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

@@ -75,9 +75,9 @@ export interface SSelectProps<TValue extends SSelectChangeValue = SSelectChangeV
     showSearch?: boolean;
     /** 전체선택 옵션 사용 (multi 전용) */
     showSelectAll?: boolean;
-    /** 전체선택 레이블 */
+    /** 전체선택 레이블. 생략하면 `SLocaleProvider` 로케일의 기본 문구(ko: "전체")를 쓴다 */
     allSelectedLabel?: string;
-    /** placeholder */
+    /** placeholder. 생략하면 `SLocaleProvider` 로케일의 기본 문구(ko: "선택")를 쓴다 */
     placeholder?: string;
     /** 비활성 */
     disabled?: boolean;

package/dist/components/SStepper/README.md

@@ -13,7 +13,7 @@
 | `size?` | `SStepperSize` | `'sm'` | 크기 |
 | `vertical?` | `boolean` | `false` | 세로형 여부 |
 | `clickable?` | `boolean` | — | 단계 클릭 가능 여부. 미지정 시 가로형=false, 세로형=true |
-| `ariaLabel?` | `string` | `'진행 단계'` | 접근성 레이블 |
+| `ariaLabel?` | `string` | — | 접근성 레이블. 생략하면 `SLocaleProvider` 로케일의 기본 문구(ko: "진행 단계")를 쓴다 |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 

package/dist/components/SStepper/SStepper.d.ts

@@ -13,7 +13,7 @@ export interface SStepperProps {
     clickable?: boolean;
     /** 단계 선택 시 호출 */
     onValueChange?: (value: string, item: SStepperItem, index: number) => void;
-    /** 접근성 레이블 */
+    /** 접근성 레이블. 생략하면 `SLocaleProvider` 로케일의 기본 문구(ko: "진행 단계")를 쓴다 */
     ariaLabel?: string;
     className?: string;
     style?: CSSProperties;
@@ -22,7 +22,7 @@ export interface SStepperProps {
  * ref 로 노출되는 커스텀 툴팁 제어 API. 세로형 전용 — items 중 error 가 true 인 첫 번째
  * 아이템의 텍스트+뱃지 영역에 표시된다.
  *
- * 지금은 대상(첫 번째 error 아이템 하나)·문구·스타일이 hover 툴팁(ERROR_TOOLTIP_MESSAGE, danger)과
+ * 지금은 대상(첫 번째 error 아이템 하나)·문구·스타일이 hover 툴팁(로케일의 stepper.errorTooltip, danger)과
  * 동일하게 고정되어 있다 — 열고 닫는 타이밍만 소비자가 제어한다. 대상 아이템을 지정하거나
  * content·type 을 커스터마이즈하는 기능은 필요해지면 추가한다(지금은 만들지 않음).
  */

package/dist/components/SSystemActionButton/README.md

@@ -10,6 +10,7 @@
 |------|------|---------|-------------|
 | `type` | `'account'` | — | 계정 행 |
 | `label?` | `string` | — | 라벨 텍스트 |
+| `labelSlot?` | `ReactNode` | — | 라벨 오른쪽에 붙는 표시용 요소(뱃지·카운트 등). 라벨이 길면 라벨만 잘리고 이 요소는 밀리지 않는다. 텍스트를 넘기면 라벨과 같은 서체·색을 상속한다 — 색을 바꾸려면 넘기는 쪽에서 토큰(`--sys-color-*`)으로 덮고, 고정 색은 `dark`·`darker` 면에서 묻히니 세 색 모두에서 확인한다. 라벨 자체의 색은 바꾸지 못한다. 행 전체가 버튼이라 **버튼·링크 같은 조작 요소는 넣지 않는다**(button 중첩). |
 | `option` | `SSystemActionButtonAccountOption` | — | 누르면 뜨는 계정 리스트박스. **필수다** — 계정 행은 늘 이 패널의 트리거이고, 눌러도 아무것도 뜨지 않는 계정 행은 없다. 아이콘은 `user` 로 고정이라 여기서 받지 않는다. |
 
 ### SSystemActionButtonBase
@@ -29,6 +30,7 @@
 |------|------|---------|-------------|
 | `type` | `'account' \| 'select' \| 'switch' \| 'subSelect' \| 'status'` | — | 계정 행 |
 | `label?` | `string` | — | 라벨 텍스트 |
+| `labelSlot?` | `ReactNode` | — | 라벨 오른쪽에 붙는 표시용 요소(뱃지·카운트 등). 라벨이 길면 라벨만 잘리고 이 요소는 밀리지 않는다. 텍스트를 넘기면 라벨과 같은 서체·색을 상속한다 — 색을 바꾸려면 넘기는 쪽에서 토큰(`--sys-color-*`)으로 덮고, 고정 색은 `dark`·`darker` 면에서 묻히니 세 색 모두에서 확인한다. 라벨 자체의 색은 바꾸지 못한다. 행 전체가 버튼이라 **버튼·링크 같은 조작 요소는 넣지 않는다**(button 중첩). |
 | `option?` | `<union 5종>` | — | 누르면 뜨는 계정 리스트박스. **필수다** — 계정 행은 늘 이 패널의 트리거이고, 눌러도 아무것도 뜨지 않는 계정 행은 없다. 아이콘은 `user` 로 고정이라 여기서 받지 않는다. |
 
 ### SSystemActionButtonSelect
@@ -39,6 +41,7 @@
 |------|------|---------|-------------|
 | `type` | `'select'` | — | 화살표만 붙는 행 |
 | `label?` | `string` | — | 라벨 텍스트 |
+| `labelSlot?` | `ReactNode` | — | 라벨 오른쪽에 붙는 표시용 요소(뱃지·카운트 등). 라벨이 길면 라벨만 잘리고 이 요소는 밀리지 않는다. 텍스트를 넘기면 라벨과 같은 서체·색을 상속한다 — 색을 바꾸려면 넘기는 쪽에서 토큰(`--sys-color-*`)으로 덮고, 고정 색은 `dark`·`darker` 면에서 묻히니 세 색 모두에서 확인한다. 라벨 자체의 색은 바꾸지 못한다. 행 전체가 버튼이라 **버튼·링크 같은 조작 요소는 넣지 않는다**(button 중첩). |
 | `option?` | `SSystemActionButtonIconOption` | — | 선행 아이콘. 아이콘 없이 라벨만 두는 행이면 통째로 생략한다 |
 
 ### SSystemActionButtonStatus
@@ -49,6 +52,7 @@
 |------|------|---------|-------------|
 | `type` | `'status'` | — | 라벨 자리에 상태 태그가 들어가는 행 |
 | `label?` | `never` | — | 태그가 라벨 자리를 차지하므로 받지 않는다 |
+| `labelSlot?` | `never` | — | 태그가 라벨 자리를 차지하므로 받지 않는다 |
 | `option` | `SSystemActionButtonStatusOption` | — | 상태 태그 + 고를 목록. **필수다** — 상태 행은 늘 그 상태를 바꾸는 메뉴의 트리거다. |
 
 ### SSystemActionButtonSubSelect
@@ -59,6 +63,7 @@
 |------|------|---------|-------------|
 | `type` | `'subSelect'` | — | 우측에 지금 선택된 값이 붙는 행 |
 | `label?` | `string` | — | 라벨 텍스트 |
+| `labelSlot?` | `ReactNode` | — | 라벨 오른쪽에 붙는 표시용 요소(뱃지·카운트 등). 라벨이 길면 라벨만 잘리고 이 요소는 밀리지 않는다. 텍스트를 넘기면 라벨과 같은 서체·색을 상속한다 — 색을 바꾸려면 넘기는 쪽에서 토큰(`--sys-color-*`)으로 덮고, 고정 색은 `dark`·`darker` 면에서 묻히니 세 색 모두에서 확인한다. 라벨 자체의 색은 바꾸지 못한다. 행 전체가 버튼이라 **버튼·링크 같은 조작 요소는 넣지 않는다**(button 중첩). |
 | `option` | `SSystemActionButtonSubSelectOption` | — | 선행 아이콘 + 우측 값 + 고를 목록 |
 
 ### SSystemActionButtonSwitch
@@ -69,6 +74,7 @@
 |------|------|---------|-------------|
 | `type` | `'switch'` | — | 우측에 보조 조작 문구가 붙는 행 |
 | `label?` | `string` | — | 라벨 텍스트 |
+| `labelSlot?` | `ReactNode` | — | 라벨 오른쪽에 붙는 표시용 요소(뱃지·카운트 등). 라벨이 길면 라벨만 잘리고 이 요소는 밀리지 않는다. 텍스트를 넘기면 라벨과 같은 서체·색을 상속한다 — 색을 바꾸려면 넘기는 쪽에서 토큰(`--sys-color-*`)으로 덮고, 고정 색은 `dark`·`darker` 면에서 묻히니 세 색 모두에서 확인한다. 라벨 자체의 색은 바꾸지 못한다. 행 전체가 버튼이라 **버튼·링크 같은 조작 요소는 넣지 않는다**(button 중첩). |
 | `option?` | `SSystemActionButtonTextOption` | — | 선행 아이콘 + 우측 액션 텍스트. 둘 다 두지 않으면 통째로 생략한다 |
 
 ### SSystemActionButtonText
@@ -79,6 +85,7 @@
 |------|------|---------|-------------|
 | `type` | `'switch' \| 'subSelect'` | — | 우측에 보조 조작 문구가 붙는 행 |
 | `label?` | `string` | — | 라벨 텍스트 |
+| `labelSlot?` | `ReactNode` | — | 라벨 오른쪽에 붙는 표시용 요소(뱃지·카운트 등). 라벨이 길면 라벨만 잘리고 이 요소는 밀리지 않는다. 텍스트를 넘기면 라벨과 같은 서체·색을 상속한다 — 색을 바꾸려면 넘기는 쪽에서 토큰(`--sys-color-*`)으로 덮고, 고정 색은 `dark`·`darker` 면에서 묻히니 세 색 모두에서 확인한다. 라벨 자체의 색은 바꾸지 못한다. 행 전체가 버튼이라 **버튼·링크 같은 조작 요소는 넣지 않는다**(button 중첩). |
 | `option?` | `SSystemActionButtonTextOption \| SSystemActionButtonSubSelectOption` | — | 선행 아이콘 + 우측 액션 텍스트. 둘 다 두지 않으면 통째로 생략한다 |
 
 ## Types