sellmate-design-system-react 9.0.0-beta.9 → 9.0.0-beta.91

package/dist/components/SExpansionItem/index.d.ts

@@ -1 +1 @@
-export { SExpansionItem, type SExpansionItemProps, type SExpansionItemRenderProp, type SExpansionItemRenderState, type SExpansionItemSupportingTextPosition, } from './SExpansionItem';
+export { SExpansionItem, type SExpansionItemInteraction, type SExpansionItemProps, type SExpansionItemRenderProp, type SExpansionItemRenderState, type SExpansionItemSize, type SExpansionItemSupportingTextPosition, } from './SExpansionItem';

package/dist/components/SField/README.md

@@ -10,10 +10,13 @@
 |------|------|---------|-------------|
 | `name?` | `string` | — | 폼 연동용 name 속성 |
 | `label?` | `string` | `''` | 레이블 텍스트 |
+| `controlId?` | `string` | — | 레이블이 가리킬 컨트롤의 `id`. 주면 레이블 글자가 `<label for>` 로 그 컨트롤에 이어져, **스크린리더가 레이블을 컨트롤 이름으로 읽고 레이블을 누르면 컨트롤에 포커스가 간다.** DS 입력 컴포넌트는 알아서 넘긴다 — `SField` 로 직접 컨트롤을 감쌀 때만 준다. 컨트롤이 `input`·`textarea`·`select`·`button` 이 아니면(`role` 로 만든 요소) `<label for>` 가 닿지 않으므로, 컨트롤에 `aria-labelledby={fieldLabelId(controlId)}` 를 직접 건다. |
+| `subLabel?` | `string` | `''` | 보조 레이블. 레이블 오른쪽 같은 줄에 붙는다 (예: `(선택)`, `최대 50자`). 레이블보다 한 단계 약하게 보이도록 기본 타이포(body/sm/medium)·`fg.secondary` 색을 쓴다. 레이블 폭이 모자라면 레이블이 먼저 말줄임되고 보조 레이블은 그대로 남는다. `label` 이 없으면(`addonLabel` 만 있을 때 포함) 그려지지 않는다. |
 | `icon?` | `SIconName` | — | 레이블 영역 아이콘명 (크기는 size 토큰 16px 고정) |
 | `iconColor?` | `SColor` | — | 레이블 영역 아이콘 색상. 미지정 시 currentColor 상속 |
 | `labelTooltip?` | `string` | `''` | 레이블 툴팁 텍스트 |
 | `labelTooltipProps?` | `Partial<STooltipProps>` | — | 레이블 툴팁 상세 옵션 (SdTooltipProps 대응) |
+| `labelPosition?` | `SFieldLabelPosition` | `'left'` | 레이블을 컨트롤 **왼쪽**에 둘지 **위**에 둘지. 기본은 `left` — 이 서비스의 폼은 라벨 열을 세로로 맞춰 읽는다. 라벨이 길거나 컨트롤이 좁아 한 줄에 같이 세우기 어려울 때(모달 안의 폼, 한 줄짜리 칸) `top` 을 쓴다. **한 폼 안에서는 섞지 않는다** — 라벨 시작점이 행마다 어긋나 세로 정렬이 깨진다. `top` 이면 라벨과 컨트롤 사이 간격은 `--sys-space-field-vertical-gap` 이 정한다 (sm·md 구분 없이 고정). 라벨을 줄 세우는 장치인 `labelWidth`·`labelHeight` 는 위에 선 라벨에는 뜻이 없어 무시된다 — `addonLabel` 의 폭에는 그대로 적용된다. |
 | `labelWidth?` | `number \| string` | — | 레이블/어드온 레이블 너비 (숫자=px). label·addonLabel 폭에 공통 적용 |
 | `labelHeight?` | `number \| string` | — | 레이블 박스 높이 (숫자=px). 미지정 시 size별 기본값 사용. 컨트롤 박스가 기본 필드 높이보다 큰 경우(multiline 등) 첫 행에 세로 중앙 정렬을 맞추기 위해 컨트롤 박스 높이를 넘겨받는다. |
 | `size?` | `SFieldSize` | `'sm'` | 필드 크기 |
@@ -22,15 +25,15 @@
 | `error?` | `boolean` | `false` | 에러 상태 |
 | `errorMessage?` | `string` | `''` | 에러 메시지 |
 | `status?` | `SFieldStatus` | — | 필드 상태 — 'error' | 'pass' | 'default'. 'pass'면 초록 테두리 |
-| `focused?` | `boolean` | `false` | 포커스 상태 (제어/반영) |
-| `hovered?` | `boolean` | `false` | 호버 상태 (제어/반영) |
+| `focused?` | `boolean` | `false` | 포커스 상태를 밖에서 지정한다. 필드를 감싼 쪽이 포커스를 쥐고 있어(커스텀 트리거·복합 컨트롤) 필드 자신은 `:focus-within` 이 걸리지 않을 때 쓴다. 켜면 강조 테두리·링이 error/pass 보다 우선한다. |
+| `hovered?` | `boolean` | `false` | 호버 상태를 밖에서 지정한다. `focused` 와 같은 이유로 쓰며, 강조도 같다 — 실제 `:hover` 와 구분되지 않는 모양이어야 밖에서 흉내 낸 것이 티가 나지 않는다. |
 | `rules?` | `Rule[]` | — | 유효성 규칙 (검증은 컨트롤에서 수행, API 패리티) |
 | `hint?` | `string` | `''` | 하단 힌트 |
 | `disabled?` | `boolean` | `false` | 비활성 |
 | `readOnly?` | `boolean` | `false` | 읽기 전용 (회색 배경) |
-| `width?` | `number \| string` | — | 컨트롤 너비 (숫자=px). 지정하면 필드가 부모 폭을 다 먹지 않고 (레이블 + width) 만큼만 차지한다. 다른 요소와 나란히 놓으려면 부모를 flex 로 두면 된다. |
-| `minWidth?` | `number \| string` | — | 컨트롤 최소 너비 (숫자=px). 하한선만 지정하며 필드는 계속 부모 폭을 채운다 |
-| `maxWidth?` | `number \| string` | — | 컨트롤 최대 너비 (숫자=px). 상한선만 지정하며 필드는 그 아래에서 부모 폭을 채운다. `width` 와 달리 hug 로 전환하지 않는다 — 부모가 좁으면 같이 좁아지고, 넓어도 여기서 멈춘다. 값 길이가 정해진 컨트롤(날짜·시간)이 `width="100%"` 를 받아 행 전체로 늘어나는 것을 막는 데 쓴다. **라벨은 상한에 들어가지 않는다** — 라벨은 컨트롤의 형제라 이 상한 밖이다. `addonLabel` 은 테두리 박스 안이라 상한을 나눠 먹으므로, `labelWidth`(= addon 폭)만큼 상한을 자동으로 늘린다. addon 이 있는데 `labelWidth` 가 없으면 폭을 알 수 없어 상한을 걸지 않는다 — 컨트롤이 잘리는 것보다 넓은 편이 낫다. |
+| `width?` | `SFieldWidth` | — | 컨트롤 너비. 지정하면 필드가 부모 폭을 다 먹지 않고 (레이블 + width) 만큼만 차지한다. 다른 요소와 나란히 놓으려면 부모를 flex 로 두면 된다. **폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`)으로 준다** — `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다. 등급은 `maxLength`(= 스키마 상한)로 고르고, 상한이 `xl` 을 넘거나 상한이 없으면 `"100%"` 로 둔다. (`sellmate/field-width-grade` 가 검사한다) 숫자는 px, 그 밖의 문자열은 CSS 길이 그대로다. |
+| `minWidth?` | `SFieldWidth` | — | 컨트롤 최소 너비 (등급 · 숫자=px · CSS 길이). 하한선만 지정하며 필드는 계속 부모 폭을 채운다 |
+| `maxWidth?` | `SFieldWidth` | — | 컨트롤 최대 너비 (등급 · 숫자=px · CSS 길이). 상한선만 지정하며 필드는 그 아래에서 부모 폭을 채운다. `width` 와 달리 hug 로 전환하지 않는다 — 부모가 좁으면 같이 좁아지고, 넓어도 여기서 멈춘다. 값 길이가 정해진 컨트롤(날짜·시간)이 `width="100%"` 를 받아 행 전체로 늘어나는 것을 막는 데 쓴다. **라벨은 상한에 들어가지 않는다** — 라벨은 컨트롤의 형제라 이 상한 밖이다. `addonLabel` 은 테두리 박스 안이라 상한을 나눠 먹으므로, `labelWidth`(= addon 폭)만큼 상한을 자동으로 늘린다. addon 이 있는데 `labelWidth` 가 없으면 폭을 알 수 없어 상한을 걸지 않는다 — 컨트롤이 잘리는 것보다 넓은 편이 낫다. |
 | `multiline?` | `boolean` | `false` | 멀티라인(textarea) — 컨트롤 높이를 고정하지 않고 min-height만 적용 |
 | `borderless?` | `boolean` | `false` | 테두리 박스 제거 (inline 컨트롤용) — border/배경/hover·focus 강조만 사라지고 label·hint·errorMessage 등 나머지 필드 구성은 그대로 동작한다. |
 | `children?` | `ReactNode` | — | 실제 컨트롤 (input/select 등) — 테두리 없이 렌더, 테두리는 SField가 제공 |
@@ -50,6 +53,32 @@
 |--------|------|-------------|
 | `focus` | `() => void` | 내부 컨트롤에 포커스하고 필드를 화면에 스크롤합니다. |
 
+## Types
+
+### SFieldLabelPosition
+
+```ts
+export type SFieldLabelPosition = 'left' | 'top';
+```
+
+### SFieldSize
+
+```ts
+export type SFieldSize = 'sm' | 'md';
+```
+
+### SFieldAddonAlign
+
+```ts
+export type SFieldAddonAlign = 'start' | 'center' | 'end';
+```
+
+### SFieldStatus
+
+```ts
+export type SFieldStatus = 'default' | 'pass' | 'error';
+```
+
 ## Dependencies
 
 ### Used by
@@ -58,11 +87,13 @@
  - [SChipInput](../SChipInput)
  - [SDatePicker](../SDatePicker)
  - [SDateRangePicker](../SDateRangePicker)
+ - [SEditor](../SEditor)
  - [SFilePicker](../SFilePicker)
  - [SInput](../SInput)
  - [SNumberInput](../SNumberInput)
  - [SSearchInput](../SSearchInput)
  - [SSelect](../SSelect)
+ - [SSlider](../SSlider)
  - [STextarea](../STextarea)
  - [STimePicker](../STimePicker)
  - [STimeRangePicker](../STimeRangePicker)
@@ -82,11 +113,13 @@ graph TD;
   SChipInput --> SField
   SDatePicker --> SField
   SDateRangePicker --> SField
+  SEditor --> SField
   SFilePicker --> SField
   SInput --> SField
   SNumberInput --> SField
   SSearchInput --> SField
   SSelect --> SField
+  SSlider --> SField
   STextarea --> SField
   STimePicker --> SField
   STimeRangePicker --> SField

package/dist/components/SField/SField.d.ts

@@ -3,9 +3,11 @@ import { type SIconName } from '../SIcon';
 import { type STooltipProps } from '../STooltip';
 import { type SColor } from '../../lib/color';
 import { type Rule } from '../../lib/form';
+import { type SFieldWidth } from '../../lib/field-width';
 export type SFieldSize = 'sm' | 'md';
 export type SFieldAddonAlign = 'start' | 'center' | 'end';
 export type SFieldStatus = 'default' | 'pass' | 'error';
+export type SFieldLabelPosition = 'left' | 'top';
 /** ref로 노출되는 UX 메서드 (sd-field @Method sdFocus 대응) */
 export interface SFieldHandle {
     /** 내부 컨트롤에 포커스하고 필드를 화면에 스크롤합니다. */
@@ -16,6 +18,22 @@ export interface SFieldProps {
     name?: string;
     /** 레이블 텍스트 */
     label?: string;
+    /**
+     * 레이블이 가리킬 컨트롤의 `id`. 주면 레이블 글자가 `<label for>` 로 그 컨트롤에 이어져,
+     * **스크린리더가 레이블을 컨트롤 이름으로 읽고 레이블을 누르면 컨트롤에 포커스가 간다.**
+     *
+     * DS 입력 컴포넌트는 알아서 넘긴다 — `SField` 로 직접 컨트롤을 감쌀 때만 준다. 컨트롤이
+     * `input`·`textarea`·`select`·`button` 이 아니면(`role` 로 만든 요소) `<label for>` 가 닿지 않으므로,
+     * 컨트롤에 `aria-labelledby={fieldLabelId(controlId)}` 를 직접 건다.
+     */
+    controlId?: string;
+    /**
+     * 보조 레이블. 레이블 오른쪽 같은 줄에 붙는다 (예: `(선택)`, `최대 50자`).
+     * 레이블보다 한 단계 약하게 보이도록 기본 타이포(body/sm/medium)·`fg.secondary` 색을 쓴다.
+     * 레이블 폭이 모자라면 레이블이 먼저 말줄임되고 보조 레이블은 그대로 남는다.
+     * `label` 이 없으면(`addonLabel` 만 있을 때 포함) 그려지지 않는다.
+     */
+    subLabel?: string;
     /** 레이블 영역 아이콘명 (크기는 size 토큰 16px 고정) */
     icon?: SIconName;
     /** 레이블 영역 아이콘 색상. 미지정 시 currentColor 상속 */
@@ -24,6 +42,18 @@ export interface SFieldProps {
     labelTooltip?: string;
     /** 레이블 툴팁 상세 옵션 (SdTooltipProps 대응) */
     labelTooltipProps?: Partial<STooltipProps>;
+    /**
+     * 레이블을 컨트롤 **왼쪽**에 둘지 **위**에 둘지.
+     *
+     * 기본은 `left` — 이 서비스의 폼은 라벨 열을 세로로 맞춰 읽는다. 라벨이 길거나 컨트롤이
+     * 좁아 한 줄에 같이 세우기 어려울 때(모달 안의 폼, 한 줄짜리 칸) `top` 을 쓴다.
+     * **한 폼 안에서는 섞지 않는다** — 라벨 시작점이 행마다 어긋나 세로 정렬이 깨진다.
+     *
+     * `top` 이면 라벨과 컨트롤 사이 간격은 `--sys-space-field-vertical-gap` 이 정한다
+     * (sm·md 구분 없이 고정). 라벨을 줄 세우는 장치인 `labelWidth`·`labelHeight` 는
+     * 위에 선 라벨에는 뜻이 없어 무시된다 — `addonLabel` 의 폭에는 그대로 적용된다.
+     */
+    labelPosition?: SFieldLabelPosition;
     /** 레이블/어드온 레이블 너비 (숫자=px). label·addonLabel 폭에 공통 적용 */
     labelWidth?: number | string;
     /**
@@ -44,9 +74,15 @@ export interface SFieldProps {
     errorMessage?: string;
     /** 필드 상태 — 'error' | 'pass' | 'default'. 'pass'면 초록 테두리 */
     status?: SFieldStatus;
-    /** 포커스 상태 (제어/반영) */
+    /**
+     * 포커스 상태를 밖에서 지정한다. 필드를 감싼 쪽이 포커스를 쥐고 있어(커스텀 트리거·복합 컨트롤)
+     * 필드 자신은 `:focus-within` 이 걸리지 않을 때 쓴다. 켜면 강조 테두리·링이 error/pass 보다 우선한다.
+     */
     focused?: boolean;
-    /** 호버 상태 (제어/반영) */
+    /**
+     * 호버 상태를 밖에서 지정한다. `focused` 와 같은 이유로 쓰며, 강조도 같다 —
+     * 실제 `:hover` 와 구분되지 않는 모양이어야 밖에서 흉내 낸 것이 티가 나지 않는다.
+     */
     hovered?: boolean;
     /** 유효성 규칙 (검증은 컨트롤에서 수행, API 패리티) */
     rules?: Rule[];
@@ -57,14 +93,19 @@ export interface SFieldProps {
     /** 읽기 전용 (회색 배경) */
     readOnly?: boolean;
     /**
-     * 컨트롤 너비 (숫자=px). 지정하면 필드가 부모 폭을 다 먹지 않고 (레이블 + width) 만큼만 차지한다.
+     * 컨트롤 너비. 지정하면 필드가 부모 폭을 다 먹지 않고 (레이블 + width) 만큼만 차지한다.
      * 다른 요소와 나란히 놓으려면 부모를 flex 로 두면 된다.
+     *
+     * **폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`)으로 준다** — `--cmp-field-width-*` 토큰으로 풀리므로
+     * 토큰이 바뀌면 화면이 따라간다. 등급은 `maxLength`(= 스키마 상한)로 고르고, 상한이 `xl` 을
+     * 넘거나 상한이 없으면 `"100%"` 로 둔다. (`sellmate/field-width-grade` 가 검사한다)
+     * 숫자는 px, 그 밖의 문자열은 CSS 길이 그대로다.
      */
-    width?: number | string;
-    /** 컨트롤 최소 너비 (숫자=px). 하한선만 지정하며 필드는 계속 부모 폭을 채운다 */
-    minWidth?: number | string;
+    width?: SFieldWidth;
+    /** 컨트롤 최소 너비 (등급 · 숫자=px · CSS 길이). 하한선만 지정하며 필드는 계속 부모 폭을 채운다 */
+    minWidth?: SFieldWidth;
     /**
-     * 컨트롤 최대 너비 (숫자=px). 상한선만 지정하며 필드는 그 아래에서 부모 폭을 채운다.
+     * 컨트롤 최대 너비 (등급 · 숫자=px · CSS 길이). 상한선만 지정하며 필드는 그 아래에서 부모 폭을 채운다.
      *
      * `width` 와 달리 hug 로 전환하지 않는다 — 부모가 좁으면 같이 좁아지고, 넓어도 여기서 멈춘다.
      * 값 길이가 정해진 컨트롤(날짜·시간)이 `width="100%"` 를 받아 행 전체로 늘어나는 것을 막는 데 쓴다.
@@ -74,7 +115,7 @@ export interface SFieldProps {
      * 상한을 자동으로 늘린다. addon 이 있는데 `labelWidth` 가 없으면 폭을 알 수 없어 상한을
      * 걸지 않는다 — 컨트롤이 잘리는 것보다 넓은 편이 낫다.
      */
-    maxWidth?: number | string;
+    maxWidth?: SFieldWidth;
     /** 멀티라인(textarea) — 컨트롤 높이를 고정하지 않고 min-height만 적용 */
     multiline?: boolean;
     /**
@@ -89,6 +130,16 @@ export interface SFieldProps {
     onMouseEnter?: () => void;
     onMouseLeave?: () => void;
 }
+/**
+ * `controlId` 를 받은 SField 가 레이블 글자에 붙이는 id. `<label for>` 가 닿지 않는 컨트롤
+ * (`role` 로 만든 요소)은 `aria-labelledby` 로 이 id 를 가리킨다.
+ */
+export declare const fieldLabelId: (controlId: string) => string;
+/**
+ * DS 입력 컴포넌트가 SField 에 넘길 `controlId` 를 정한다. 앱이 컨트롤에 `id` 를 줬으면 그것을
+ * 쓴다 — 앱의 `<label for>`·테스트 선택자가 그 id 를 이미 가리키고 있을 수 있다.
+ */
+export declare function useFieldControlId(id?: string): string;
 /**
  * SField — sd-field 포팅. 폼 컨트롤 래퍼.
  * ★ SField 가 컨트롤 테두리 박스(border/radius/bg + hover/focus/error/disabled 상태)를 소유하고,

package/dist/components/SField/index.d.ts

@@ -1 +1 @@
-export { SField, type SFieldHandle, type SFieldProps, type SFieldSize, type SFieldAddonAlign, type SFieldStatus, } from './SField';
+export { SField, fieldLabelId, type SFieldHandle, type SFieldProps, type SFieldSize, type SFieldAddonAlign, type SFieldStatus, type SFieldLabelPosition, } from './SField';

package/dist/components/SFilePicker/README.md

@@ -11,11 +11,11 @@
 | `value?` | `SFilePickerValue` | `null` |  |
 | `placeholder?` | `string` | `'Click to upload'` |  |
 | `disabled?` | `boolean` | `false` |  |
-| `focused?` | `boolean` | `false` | 포커스 상태 여부 |
-| `hovered?` | `boolean` | `false` | 호버 상태 여부 |
+| `focused?` | `boolean` | `false` | 포커스 상태를 밖에서 지정한다 — 강조 테두리·링이 즉시 걸린다 (SField 로 그대로 넘어간다) |
+| `hovered?` | `boolean` | `false` | 호버 상태를 밖에서 지정한다 — 강조는 `focused` 와 같다 (SField 로 그대로 넘어간다) |
 | `inline?` | `boolean` | `false` | 인라인 표시 — SField 테두리 박스만 사라지고 label/rules/hint 는 그대로 동작 |
 | `multiple?` | `boolean` | `false` |  |
-| `useMultipleListBox?` | `boolean` | `false` | multiple 파일 목록을 필드 아래 칩 대신, caret(▼) 클릭 시 열리는 리스트박스 카드로 표시 (바깥 클릭 시 닫힘) |
+| `showMultipleListBox?` | `boolean` | `false` | multiple 파일 목록을 필드 아래 칩 대신, caret(▼) 클릭 시 열리는 리스트박스 카드로 표시 (바깥 클릭 시 닫힘) |
 | `accept?` | `string` | — |  |
 | `maxFileSize?` | `number \| string` | — |  |
 | `maxTotalSize?` | `number \| string` | — |  |
@@ -25,6 +25,8 @@
 | `status?` | `SFieldStatus` | — |  |
 | `size?` | `SFieldSize` | `'sm'` |  |
 | `label?` | `string` | — |  |
+| `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다). |
+| `subLabel?` | `string` | — | 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다). |
 | `labelWidth?` | `number \| string` | — |  |
 | `icon?` | `SIconName` | — |  |
 | `iconColor?` | `SColor` | — |  |
@@ -35,7 +37,7 @@
 | `hint?` | `string` | — |  |
 | `error?` | `boolean` | — |  |
 | `errorMessage?` | `string` | — |  |
-| `width?` | `number \| string` | — |  |
+| `width?` | `SFieldWidth` | — | 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이. 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다. 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다. |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 
@@ -46,6 +48,20 @@
 | `onValueChange` | `(value: SFilePickerValue) => void` | 파일 변경 (sdUpdate) |
 | `onReject` | `(detail: { files: File[]; reason: SFilePickerRejectReason }) => void` | 제한 초과 거부 (sdReject) |
 
+## Types
+
+### SFilePickerValue
+
+```ts
+export type SFilePickerValue = File[] | File | null;
+```
+
+### SFilePickerRejectReason
+
+```ts
+export type SFilePickerRejectReason = 'max-file-size' | 'max-total-size' | 'max-files';
+```
+
 ## Dependencies
 
 ### Used by

package/dist/components/SFilePicker/SFilePicker.d.ts

@@ -1,9 +1,10 @@
 import { type CSSProperties } from 'react';
-import { type SFieldSize, type SFieldAddonAlign, type SFieldStatus } from '../SField';
+import { type SFieldSize, type SFieldAddonAlign, type SFieldStatus, type SFieldLabelPosition } from '../SField';
 import { type SIconName } from '../SIcon';
 import { type SColor } from '../../lib/color';
 import { type Rule } from '../../lib/form';
 import { type STooltipProps } from '../STooltip';
+import { type SFieldWidth } from '../../lib/field-width';
 export type SFilePickerValue = File[] | File | null;
 export type SFilePickerRejectReason = 'max-file-size' | 'max-total-size' | 'max-files';
 export interface SFilePickerProps {
@@ -17,15 +18,15 @@ export interface SFilePickerProps {
     }) => void;
     placeholder?: string;
     disabled?: boolean;
-    /** 포커스 상태 여부 */
+    /** 포커스 상태를 밖에서 지정한다 — 강조 테두리·링이 즉시 걸린다 (SField 로 그대로 넘어간다) */
     focused?: boolean;
-    /** 호버 상태 여부 */
+    /** 호버 상태를 밖에서 지정한다 — 강조는 `focused` 와 같다 (SField 로 그대로 넘어간다) */
     hovered?: boolean;
     /** 인라인 표시 — SField 테두리 박스만 사라지고 label/rules/hint 는 그대로 동작 */
     inline?: boolean;
     multiple?: boolean;
     /** multiple 파일 목록을 필드 아래 칩 대신, caret(▼) 클릭 시 열리는 리스트박스 카드로 표시 (바깥 클릭 시 닫힘) */
-    useMultipleListBox?: boolean;
+    showMultipleListBox?: boolean;
     accept?: string;
     maxFileSize?: number | string;
     maxTotalSize?: number | string;
@@ -35,6 +36,20 @@ export interface SFilePickerProps {
     status?: SFieldStatus;
     size?: SFieldSize;
     label?: string;
+    /**
+     * 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    labelPosition?: SFieldLabelPosition;
+    /**
+     * 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    subLabel?: string;
     labelWidth?: number | string;
     icon?: SIconName;
     iconColor?: SColor;
@@ -45,9 +60,14 @@ export interface SFilePickerProps {
     hint?: string;
     error?: boolean;
     errorMessage?: string;
-    width?: number | string;
+    /**
+     * 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이.
+     * 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다.
+     * 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다.
+     */
+    width?: SFieldWidth;
     className?: string;
     style?: CSSProperties;
 }
 /** SFilePicker — sd-file-picker 포팅. 단일/다중 파일 + 크기·개수 검증 + 칩 목록. */
-export declare function SFilePicker({ value, onValueChange, onReject, placeholder, disabled, focused, hovered, inline, multiple, useMultipleListBox, accept, maxFileSize, maxTotalSize, maxFiles, name, rules, status, size, label, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, width, className, style, }: SFilePickerProps): import("react").JSX.Element;
+export declare function SFilePicker({ value, onValueChange, onReject, placeholder, disabled, focused, hovered, inline, multiple, showMultipleListBox, accept, maxFileSize, maxTotalSize, maxFiles, name, rules, status, size, label, labelPosition, subLabel, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, width, className, style, }: SFilePickerProps): import("react").JSX.Element;

package/dist/components/SFooter/README.md

@@ -9,6 +9,7 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `bg?` | `SFooterBg` | `'white'` | 배경색 |
+| `size?` | `SFooterSize` | `'md'` | 크기. 기본은 `md` — 오버레이 하단 액션 영역의 크기다 |
 | `left?` | `ReactNode` | — | footer 좌측 slot |
 | `children?` | `ReactNode` | — | footer 좌측 slot. left와 함께 쓰면 left 뒤에 렌더된다 |
 | `button?` | `SFooterButton` | — | 우측 기본 액션 버튼 |
@@ -16,13 +17,54 @@
 | `leftClassName?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 
+## Types
+
+### SFooterBg
+
+```ts
+export type SFooterBg = 'white' | 'grey';
+```
+
+### SFooterSize
+
+```ts
+/**
+ * footer 크기. 버튼 크기가 여기에 딸려 온다 — `md` 는 `SButton size="md"`, `sm` 은 `"sm"`.
+ *
+ * 버튼 크기를 따로 받지 않고 footer 자체를 분기하는 이유: 크기를 정하는 것은 버튼이 아니라
+ * **버튼이 놓인 자리**이기 때문이다 (AGENTS.md §3-5-2). 좌측 슬롯 버튼까지 한 벌로 맞춰야
+ * 하는데, 우측 버튼만 크기를 받으면 좌우가 어긋난 footer 를 만들 길이 열린다.
+ */
+export type SFooterSize = 'sm' | 'md';
+```
+
+### SFooterButton
+
+```ts
+/**
+ * footer 우측 기본 액션 버튼 설정 — `SButton` 의 prop 을 그대로 받는다.
+ *
+ * 골라 담은 부분집합으로 두지 않는 이유: `SButton` 에 prop 이 늘 때마다 이 목록만 조용히
+ * 뒤처져, 아이콘 하나 붙이려 해도 footer 에서는 길이 없는 상태가 된다.
+ *
+ * **`size` 만 뺀다.** 버튼 크기는 놓이는 위치가 정하므로 footer 의 `size` 가 정한다
+ * (AGENTS.md §3-5-2) — 버튼이 자기 크기를 따로 주장할 자리가 아니다.
+ *
+ * `label`·`color` 는 주지 않으면 footer 가 주 액션 기본값(`'확인'`·`'primary'`)으로 잡는다.
+ * 파괴적 액션이라 `danger` 가 필요한 경우는 열어 둔다 (§3-5-3).
+ */
+export type SFooterButton = Omit<SButtonProps, 'size'>;
+```
+
 ## Dependencies
 
 ### Used by
 
  - [SActionModal](../SActionModal)
+ - [SCard](../SCard)
  - [SDrawer](../SDrawer)
  - [SPopup](../SPopup)
+ - [SSectionHeaderCard](../SSectionHeaderCard)
 
 ### Depends on
 
@@ -34,7 +76,9 @@
 graph TD;
   SFooter --> SButton
   SActionModal --> SFooter
+  SCard --> SFooter
   SDrawer --> SFooter
   SPopup --> SFooter
+  SSectionHeaderCard --> SFooter
   style SFooter fill:#f9f,stroke:#333,stroke-width:4px
 ```

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

@@ -1,21 +1,36 @@
 import { type CSSProperties, type ReactNode } from 'react';
-import { type SButtonColor, type SButtonSize } from '../SButton';
+import { type SButtonProps } from '../SButton';
 export type SFooterBg = 'white' | 'grey';
-export interface SFooterButton {
-    label?: string;
-    color?: SButtonColor;
-    outline?: boolean;
-    size?: SButtonSize;
-    disabled?: boolean;
-    onClick?: () => void;
-}
+/**
+ * footer 크기. 버튼 크기가 여기에 딸려 온다 — `md` 는 `SButton size="md"`, `sm` 은 `"sm"`.
+ *
+ * 버튼 크기를 따로 받지 않고 footer 자체를 분기하는 이유: 크기를 정하는 것은 버튼이 아니라
+ * **버튼이 놓인 자리**이기 때문이다 (AGENTS.md §3-5-2). 좌측 슬롯 버튼까지 한 벌로 맞춰야
+ * 하는데, 우측 버튼만 크기를 받으면 좌우가 어긋난 footer 를 만들 길이 열린다.
+ */
+export type SFooterSize = 'sm' | 'md';
+/**
+ * footer 우측 기본 액션 버튼 설정 — `SButton` 의 prop 을 그대로 받는다.
+ *
+ * 골라 담은 부분집합으로 두지 않는 이유: `SButton` 에 prop 이 늘 때마다 이 목록만 조용히
+ * 뒤처져, 아이콘 하나 붙이려 해도 footer 에서는 길이 없는 상태가 된다.
+ *
+ * **`size` 만 뺀다.** 버튼 크기는 놓이는 위치가 정하므로 footer 의 `size` 가 정한다
+ * (AGENTS.md §3-5-2) — 버튼이 자기 크기를 따로 주장할 자리가 아니다.
+ *
+ * `label`·`color` 는 주지 않으면 footer 가 주 액션 기본값(`'확인'`·`'primary'`)으로 잡는다.
+ * 파괴적 액션이라 `danger` 가 필요한 경우는 열어 둔다 (§3-5-3).
+ */
+export type SFooterButton = Omit<SButtonProps, 'size'>;
 /**
  * @internal
- * 모달·드로어·팝업 하단 영역 공통 props.
+ * 모달·드로어·팝업·카드 하단 영역 공통 props.
  */
 export interface SFooterProps {
     /** 배경색 */
     bg?: SFooterBg;
+    /** 크기. 기본은 `md` — 오버레이 하단 액션 영역의 크기다 */
+    size?: SFooterSize;
     /** footer 좌측 slot */
     left?: ReactNode;
     /** footer 좌측 slot. left와 함께 쓰면 left 뒤에 렌더된다 */
@@ -27,10 +42,11 @@ export interface SFooterProps {
     style?: CSSProperties;
 }
 /**
- * SFooter — overlay 계열 내부 전용 footer.
+ * SFooter — 오버레이·카드 내부 전용 footer.
  *
  * @internal
- * SActionModal/SConfirmModal/SDrawer/SPopup 의 하단 액션 영역만 공통화한다.
+ * SActionModal/SConfirmModal/SDrawer/SPopup 과 SCard/SSectionHeaderCard 의 하단 액션 영역만
+ * 공통화한다. 소비자는 호스트 컴포넌트의 `footerLeft`·`button` prop 으로만 닿는다 —
  * 패키지 public export 에 추가하지 말 것.
  */
-export declare function SFooter({ bg, left, button, children, className, leftClassName, style, }: SFooterProps): import("react").JSX.Element;
+export declare function SFooter({ bg, size, left, button, children, className, leftClassName, style, }: SFooterProps): import("react").JSX.Element;

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

@@ -1 +1 @@
-export { SFooter, type SFooterBg, type SFooterButton, type SFooterProps } from './SFooter';
+export { SFooter, type SFooterBg, type SFooterButton, type SFooterProps, type SFooterSize, } from './SFooter';

package/dist/components/SForm/README.md

@@ -8,7 +8,7 @@
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `formClass?` | `string` | — | form 엘리먼트에 추가할 클래스 (sd-form formClass 대응) |
+| `formClassName?` | `string` | — | form 엘리먼트에 추가할 클래스 (sd-form formClassName 대응) |
 | `children?` | `ReactNode` | — |  |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
@@ -29,3 +29,14 @@
 | `reset` | `() => void` | resetValidation 별칭 — sd-form sdReset 대응. 값 리셋은 소비자(value/onChange) 책임 |
 | `focusFirstInvalid` | `() => void` | 첫 번째 실패 필드로 포커스 이동 |
 
+## Types
+
+### SFormValidationError
+
+```ts
+export interface SFormValidationError {
+  /** 검증에 실패한 필드 name 목록 (DOM 순서) */
+  names: string[];
+}
+```
+

package/dist/components/SForm/SForm.d.ts

@@ -15,8 +15,8 @@ export interface SFormHandle {
     focusFirstInvalid: () => void;
 }
 export interface SFormProps {
-    /** form 엘리먼트에 추가할 클래스 (sd-form formClass 대응) */
-    formClass?: string;
+    /** form 엘리먼트에 추가할 클래스 (sd-form formClassName 대응) */
+    formClassName?: string;
     /** 모든 필드 검증 통과 후 발생 (sd-form sdSubmit 대응) */
     onSubmit?: () => void;
     /** 검증 실패 시 실패한 필드 name 목록 전달 (sd-form sdValidationError 대응) */

package/dist/components/SGhostButton/README.md

@@ -16,6 +16,8 @@
 | `ariaExpanded?` | `boolean` | — | disclosure 버튼일 때 펼침 상태 (aria-expanded) |
 | `tooltipText?` | `string` | — | 호버 시 표시할 툴팁 텍스트 |
 | `disabled?` | `boolean` | `false` | 비활성 |
+| `href?` | `string` | — | 이동할 주소. **주면 `<button>` 대신 `<a>` 로 그린다** — 가운데 클릭·⌘클릭·주소 복사가 링크처럼 듣는다. 눌러서 다른 화면·문서로 가는 버튼이면 `onClick` 에서 `location` 을 바꾸지 말고 이것을 준다. 비활성이면 주소를 떼어 눌러도 가지 않는다. |
+| `target?` | `string` | — | `href` 를 여는 곳. `'_blank'` 면 `rel="noopener noreferrer"` 를 함께 붙인다 |
 | `anchorClassName?` | `string` | — | tooltip anchor wrapper 클래스. tooltipText가 있을 때 위치 조정용으로 사용합니다. |
 | `anchorStyle?` | `CSSProperties` | — | tooltip anchor wrapper 스타일. tooltipText가 있을 때 위치 조정용으로 사용합니다. |
 | `className?` | `string` | — |  |
@@ -25,7 +27,22 @@
 
 | Event | Type | Description |
 |-------|------|-------------|
-| `onClick` | `(e: MouseEvent<HTMLButtonElement>) => void` | 클릭 (sdClick) |
+| `onClick` | `(e: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => void` | 클릭 (sdClick). `href` 와 함께 주면 이동 전에 불린다 |
+
+## Types
+
+### SGhostButtonSize
+
+```ts
+export type SGhostButtonSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
+```
+
+### SGhostButtonIntent
+
+```ts
+export type SGhostButtonIntent =
+  'default' | 'danger' | 'action' | 'subAction' | 'complete' | 'inverse';
+```
 
 ## Dependencies
 
@@ -33,24 +50,29 @@
 
  - [SBarcodeInput](../SBarcodeInput)
  - [SCalendar](../SCalendar)
+ - [SCalendarBoard](../SCalendarBoard)
+ - [SChatAttachedFile](../SChatAttachedFile)
+ - [SChatInput](../SChatInput)
  - [SChip](../SChip)
- - [SChipFilter](../SChipFilter)
+ - [SDatePicker](../SDatePicker)
  - [SDateRangePicker](../SDateRangePicker)
  - [SFilePicker](../SFilePicker)
  - [SGnb](../SGnb)
  - [SGuide](../SGuide)
  - [SInput](../SInput)
+ - [SMeatballButton](../SMeatballButton)
  - [SModalContainer](../SModalContainer)
  - [SOverlayHeader](../SOverlayHeader)
  - [SPage](../SPage)
  - [SPopover](../SPopover)
  - [SSearchInput](../SSearchInput)
- - [SSelect](../SSelect)
+ - [STable](../STable)
  - [STimePicker](../STimePicker)
  - [STimeRangePicker](../STimeRangePicker)
  - [SToast](../SToast)
  - [STooltip](../STooltip)
  - [STree](../STree)
+ - [STreeTable](../STreeTable)
 
 ### Depends on
 
@@ -65,23 +87,28 @@ graph TD;
   SGhostButton --> STag
   SBarcodeInput --> SGhostButton
   SCalendar --> SGhostButton
+  SCalendarBoard --> SGhostButton
+  SChatAttachedFile --> SGhostButton
+  SChatInput --> SGhostButton
   SChip --> SGhostButton
-  SChipFilter --> SGhostButton
+  SDatePicker --> SGhostButton
   SDateRangePicker --> SGhostButton
   SFilePicker --> SGhostButton
   SGnb --> SGhostButton
   SGuide --> SGhostButton
   SInput --> SGhostButton
+  SMeatballButton --> SGhostButton
   SModalContainer --> SGhostButton
   SOverlayHeader --> SGhostButton
   SPage --> SGhostButton
   SPopover --> SGhostButton
   SSearchInput --> SGhostButton
-  SSelect --> SGhostButton
+  STable --> SGhostButton
   STimePicker --> SGhostButton
   STimeRangePicker --> SGhostButton
   SToast --> SGhostButton
   STooltip --> SGhostButton
   STree --> SGhostButton
+  STreeTable --> SGhostButton
   style SGhostButton fill:#f9f,stroke:#333,stroke-width:4px
 ```