@simplysm/angular 14.0.48 → 14.0.51

package/docs/styling/variables.md

@@ -0,0 +1,147 @@
+# CSS Custom Properties
+
+`:root`에 선언되는 CSS 커스텀 프로퍼티. SCSS `$vars` 맵에서 `mixins.writeVars()`로 생성된다.
+
+## Theme Colors
+
+OKLCH 기반 17+5 색상 팔레트. 각 테마 그룹에 7단계 shade가 존재한다.
+
+**테마 그룹**: gray, blue-gray, primary, secondary, info, success, warning, danger
+
+**Shade 단계**: lightest (+90%), lighter (+75%), light (+60%), default, dark (-10%), darker (-25%), darkest (-40%)
+
+| Property Pattern | Description |
+|------------------|-------------|
+| `--theme-{group}-lightest` | 가장 밝은 단계 |
+| `--theme-{group}-lighter` | 밝은 단계 |
+| `--theme-{group}-light` | 약간 밝은 단계 |
+| `--theme-{group}-default` | 기본 단계 |
+| `--theme-{group}-dark` | 약간 어두운 단계 |
+| `--theme-{group}-darker` | 어두운 단계 |
+| `--theme-{group}-darkest` | 가장 어두운 단계 |
+
+**기본 색상 매핑** (OKLCH):
+
+| Theme Group | Base Color |
+|-------------|------------|
+| gray | `oklch(0.707 0.022 261.325)` (gray) |
+| blue-gray | `oklch(0.704 0.04 256.788)` (slate) |
+| primary | `oklch(0.707 0.165 254.624)` (blue) |
+| secondary | `oklch(0.707 0.165 254.624)` (blue) |
+| info | `oklch(0.789 0.154 211.53)` (cyan) |
+| success | `oklch(0.841 0.238 128.85)` (lime) |
+| warning | `oklch(0.75 0.183 55.934)` (orange) |
+| danger | `oklch(0.704 0.191 22.216)` (red) |
+
+## Transparency
+
+| Property | Default | Description |
+|----------|---------|-------------|
+| `--trans-darkest` | `rgba(0, 0, 0, 0.5)` | 가장 어두운 투명 |
+| `--trans-darker` | `rgba(0, 0, 0, 0.4)` | |
+| `--trans-dark` | `rgba(0, 0, 0, 0.3)` | |
+| `--trans-default` | `rgba(0, 0, 0, 0.2)` | |
+| `--trans-light` | `rgba(0, 0, 0, 0.1)` | |
+| `--trans-lighter` | `rgba(0, 0, 0, 0.05)` | |
+| `--trans-lightest` | `rgba(0, 0, 0, 0.03)` | |
+| `--trans-rev-default` | `rgba(255, 255, 255, 0.1)` | 역방향 투명 |
+| `--trans-rev-light` | `rgba(255, 255, 255, 0.2)` | |
+| `--trans-rev-lighter` | `rgba(255, 255, 255, 0.3)` | |
+| `--trans-rev-lightest` | `rgba(255, 255, 255, 0.4)` | |
+
+## Text Colors
+
+| Property | Default | Description |
+|----------|---------|-------------|
+| `--text-trans-dark` | `black` | 강조 텍스트 |
+| `--text-trans-default` | `rgba(0, 0, 0, 0.87)` | 기본 텍스트 |
+| `--text-trans-light` | `rgba(0, 0, 0, 0.6)` | 보조 텍스트 |
+| `--text-trans-lighter` | `rgba(0, 0, 0, 0.38)` | 비활성 텍스트 |
+| `--text-trans-lightest` | `rgba(0, 0, 0, 0.2)` | 최소 텍스트 |
+| `--text-trans-rev-default` | `white` | 역방향 기본 텍스트 |
+| `--text-trans-rev-dark` | `rgba(255, 255, 255, 0.7)` | 역방향 강조 텍스트 |
+| `--text-trans-rev-darker` | `rgba(255, 255, 255, 0.5)` | 역방향 더 강조 |
+
+## Font Size
+
+| Property | Default | Description |
+|----------|---------|-------------|
+| `--font-size-h1` | `2rem` | h1 |
+| `--font-size-h2` | `1.5rem` | h2 |
+| `--font-size-h3` | `1.3333rem` | h3 |
+| `--font-size-h4` | `1.1667rem` | h4 |
+| `--font-size-h5` | `1rem` | h5 |
+| `--font-size-h6` | `0.9167rem` | h6 |
+| `--font-size-lg` | `1.1667rem` | 큰 폰트 |
+| `--font-size-default` | `1rem` | 기본 폰트 |
+| `--font-size-sm` | `0.9167rem` | 작은 폰트 |
+
+## Gap (Spacing)
+
+| Property | Default | Description |
+|----------|---------|-------------|
+| `--gap-xxs` | `0.0833rem` | 초소형 |
+| `--gap-xs` | `0.1667rem` | 소형 |
+| `--gap-sm` | `0.3333rem` | 중소형 |
+| `--gap-default` | `0.5rem` | 기본 |
+| `--gap-lg` | `0.6667rem` | 중대형 |
+| `--gap-xl` | `1rem` | 대형 |
+| `--gap-xxl` | `1.5rem` | 초대형 |
+| `--gap-0` | `0` | 없음 |
+| `--gap-auto` | `auto` | 자동 |
+
+## Border
+
+| Property | Default | Description |
+|----------|---------|-------------|
+| `--border-color-lighter` | `var(--theme-gray-lightest)` | 가장 밝은 border |
+| `--border-color-light` | `var(--theme-gray-lighter)` | 밝은 border |
+| `--border-color-default` | `var(--theme-gray-light)` | 기본 border |
+| `--border-color-dark` | `var(--theme-gray-default)` | 어두운 border |
+| `--border-color-darker` | `var(--theme-gray-dark)` | 가장 어두운 border |
+| `--border-radius-xs` | `var(--gap-xxs)` | |
+| `--border-radius-sm` | `var(--gap-xs)` | |
+| `--border-radius-default` | `var(--gap-sm)` | |
+| `--border-radius-lg` | `var(--gap-default)` | |
+| `--border-radius-xl` | `var(--gap-lg)` | |
+| `--border-radius-xxl` | `var(--gap-xl)` | |
+
+## Layout & Z-Index
+
+| Property | Default | Description |
+|----------|---------|-------------|
+| `--line-height` | `1.5em` | 기본 line-height |
+| `--font-family` | `sans-serif` | 기본 폰트 패밀리 |
+| `--font-family-monospace` | `monospace` | 코드 폰트 패밀리 |
+| `--background-color` | `white` | 페이지 배경색 |
+| `--background-rev-color` | `black` | 역방향 배경색 |
+| `--control-color` | `white` | 컨트롤 배경색 |
+| `--busy-overlay-bg` | `rgba(255, 255, 255, 0.6)` | busy 오버레이 배경 |
+| `--animation-duration` | `0.2s` | 애니메이션 지속 시간 |
+| `--elevation-size` | `0.0833rem` | elevation 단위 |
+| `--sidebar-width` | `15em` | 사이드바 너비 |
+| `--topbar-height` | `3em` | 탑바 높이 |
+| `--z-index-toast` | `9999` | 토스트 z-index |
+| `--z-index-busy` | `9998` | busy z-index |
+| `--z-index-dropdown` | `5000` | 드롭다운 z-index |
+| `--z-index-modal` | `4000` | 모달 z-index |
+| `--z-index-sidebar` | `3000` | 사이드바 z-index |
+
+## Sheet
+
+| Property | Default | Description |
+|----------|---------|-------------|
+| `--sheet-pv` | `var(--gap-xs)` | 시트 셀 수직 padding |
+| `--sheet-ph` | `var(--gap-sm)` | 시트 셀 수평 padding |
+| `--sheet-bg` | `var(--theme-gray-lightest)` | 시트 배경색 |
+
+## Breakpoints (SCSS 전용)
+
+CSS 커스텀 프로퍼티가 아닌 SCSS 변수. media query에서 사용된다.
+
+| Variable | Value | Description |
+|----------|-------|-------------|
+| `$breakpoint-mobile` | `520px` | 모바일 |
+| `$breakpoint-xxs` | `800px` | 초소형 |
+| `$breakpoint-xs` | `1024px` | 소형 |
+| `$breakpoint-sm` | `1280px` | 중소형 |

package/docs/{type-utilities.md → type-utilities/directive-input-signals.md}

@@ -1,5 +1,7 @@
 # Type Utilities
 
+컴포넌트/디렉티브 입력 시그널 타입 추출 유틸리티 모음.
+
 ## `DirectiveInputSignals`
 
 컴포넌트/디렉티브의 InputSignal 프로퍼티에서 값 타입을 추출하는 유틸리티 타입. InputSignal이 아닌 프로퍼티는 제외되며, undefined를 포함하는 필드는 optional로 변환된다.
@@ -10,7 +12,8 @@ type DirectiveInputSignals<T> = UndefToOptional<{
 }>
 ```
 
-예시:
+### 예시
+
 ```typescript
 class MyComponent {
   name = input.required<string>();
@@ -31,7 +34,7 @@ type UndefToOptional<T> = {
 }
 ```
 
-예시: `{ name: string; age: number | undefined }` -> `{ name: string; age?: number }`
+예시: `{ name: string; age: number | undefined }` → `{ name: string; age?: number }`
 
 ## `WithOptional`
 
@@ -62,7 +65,7 @@ interface SortingDef {
 
 | Field | Type | Description |
 |-------|------|-------------|
-| `key` | `string` | 정렬 키. **컬럼 `key`가 `"vendor.name"`, `"lot.goods.code"` 같은 체인 경로일 수 있다.** 따라서 `item[key]` 단순 접근 대신 `obj.getChainValue(item, key)` (from `@simplysm/core-common`)을 사용해 체인을 따라 값을 조회해야 한다 |
+| `key` | `string` | 정렬 키. **컬럼 `key`가 `"vendor.name"`, `"lot.goods.code"` 같은 체인 경로일 수 있다.** 정렬 처리 시 `item[key]` 단순 접근 대신 `obj.getChainValue(item, key)` (from `@simplysm/core-common`)를 사용해야 한다 |
 | `desc` | `boolean` | 내림차순 여부 |
 
 ## `ExpandItemDef`
@@ -85,25 +88,6 @@ interface ExpandItemDef<T> {
 | `hasChildren` | `boolean` | 자식 존재 여부 |
 | `depth` | `number` | 깊이 |
 
-## `SdSelectModal`
-
-모달 선택 컴포넌트가 구현해야 하는 인터페이스. `SdModalContentDef`를 확장.
-
-```typescript
-interface SdSelectModal<T> extends SdModalContentDef<SelectModalOutputResult<T>> {
-  selectMode: InputSignal<"single" | "multi" | undefined>;
-  selectedItemKeys: InputSignal<any[]>;
-}
-```
-
-## `SdSelectModalInfo`
-
-모달 선택 정보. `SdModalInfo`에서 selectMode/selectedItemKeys를 제외.
-
-```typescript
-type SdSelectModalInfo<T extends SdSelectModal<any>> = SdModalInfo<T, "selectMode" | "selectedItemKeys">
-```
-
 ## `SdTextfieldTypes`
 
 텍스트필드 타입별 값 타입 매핑.
@@ -139,7 +123,7 @@ const sdTextfieldTypes: (keyof SdTextfieldTypes)[] = [
 
 ## `SelectModeValue`
 
-select mode별 value 타입 매핑. `SdSelect`에서 export됨.
+select mode별 value 타입 매핑.
 
 ```typescript
 type SelectModeValue<T> = {
@@ -150,7 +134,7 @@ type SelectModeValue<T> = {
 
 ## `SdSidebarUserMenu`
 
-사이드바 사용자 메뉴 항목. `SdSidebarUser`에서 export됨.
+사이드바 사용자 메뉴 항목.
 
 ```typescript
 interface SdSidebarUserMenu {
@@ -169,7 +153,7 @@ interface SdSidebarUserMenu {
 
 ## `SdTopbarUserMenu`
 
-탑바 사용자 메뉴 항목. `SdTopbarUser`에서 export됨.
+탑바 사용자 메뉴 항목.
 
 ```typescript
 interface SdTopbarUserMenu {
@@ -185,7 +169,7 @@ interface SdTopbarUserMenu {
 
 ## `SdStatePresetDef`
 
-상태 프리셋 데이터. `SdStatePreset`에서 export됨.
+상태 프리셋 데이터.
 
 ```typescript
 interface SdStatePresetDef {
@@ -199,9 +183,11 @@ interface SdStatePresetDef {
 | `name` | `string` | 프리셋 이름 |
 | `state` | `any` | 저장된 상태 데이터 |
 
-## `SdKanbanBoardDropInfo`
+## Kanban Types
+
+### `SdKanbanBoardDropInfo`
 
-칸반 보드 드롭 정보. `SdKanbanBoard`에서 export됨.
+칸반 보드 드롭 정보.
 
 ```typescript
 interface SdKanbanBoardDropInfo<L, T> {
@@ -215,11 +201,9 @@ interface SdKanbanBoardDropInfo<L, T> {
 |-------|------|-------------|
 | `sourceKanbanValue` | `T \| undefined` | 드래그한 칸반 아이템의 값 |
 | `targetLaneValue` | `L \| undefined` | 드롭 대상 레인의 값 |
-| `targetKanbanValue` | `T \| undefined` | 드롭 대상 칸반 아이템의 값 (칸반 위에 드롭 시) |
+| `targetKanbanValue` | `T \| undefined` | 드롭 대상 칸반 아이템의 값 |
 
-## `SdKanbanDragRef`
-
-칸반 드래그 참조 인터페이스. `SdKanbanBoard`에서 export됨.
+### `SdKanbanDragRef`
 
 ```typescript
 interface SdKanbanDragRef<_L, T> {
@@ -233,9 +217,7 @@ interface SdKanbanDragRef<_L, T> {
 | `value()` | `T \| undefined` | 드래그 중인 칸반 아이템의 값 |
 | `heightOnDrag()` | `number` | 드래그 시작 시점의 요소 높이 |
 
-## `SdKanbanDropTarget`
-
-칸반 드롭 타겟 인터페이스. `SdKanbanBoard`에서 export됨.
+### `SdKanbanDropTarget`
 
 ```typescript
 interface SdKanbanDropTarget<L, T> {

package/docs/ui-data/sd-list.md

@@ -0,0 +1,37 @@
+# `SdList`
+
+리스트 컴포넌트.
+
+```typescript
+@Component({ selector: "sd-list" })
+class SdList {
+  inset = input(false, { transform: booleanAttribute });
+}
+```
+
+## Members
+
+| Member | Kind | Type | Default | Description |
+|--------|------|------|---------|-------------|
+| `inset` | input | `boolean` | `false` | 삽입 스타일 (테두리 없음) |
+
+## Related Types
+
+### `SdListItem`
+
+리스트 항목 컴포넌트. 접기/펼치기 자식 리스트를 지원한다.
+
+```typescript
+@Component({ selector: "sd-list-item" })
+class SdListItem {
+  open = model(false);
+  selected = input(false, { transform: booleanAttribute });
+  readonly = input(false, { transform: booleanAttribute });
+}
+```
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `open` | `boolean` | `false` | 자식 리스트 펼침 (two-way) |
+| `selected` | `boolean` | `false` | 선택 상태 |
+| `readonly` | `boolean` | `false` | 읽기 전용 |

package/docs/ui-data/sd-sheet.md

@@ -0,0 +1,227 @@
+# `SdSheet`
+
+스프레드시트 컴포넌트. 정렬, 컬럼 고정, 리사이즈, 페이지네이션, 설정 저장을 지원한다.
+
+```typescript
+@Component({ selector: "sd-sheet" })
+class SdSheet<T> {
+  key = input<string>();
+  items = input<T[]>([]);
+  trackByFn = input<(item: T, index: number) => unknown>();
+  selectMode = input<"single" | "multi">();
+  getItemSelectableFn = input<(item: T) => boolean | string>();
+  getChildrenFn = input<(item: T, index: number) => T[] | undefined>();
+  useAutoSort = input(false, { transform: booleanAttribute });
+  visiblePageCount = input(10);
+  totalPageCount = input(0);
+  itemsPerPage = input(0);
+  inset = input(false, { transform: booleanAttribute });
+  hideConfigBar = input(false, { transform: booleanAttribute });
+  cumulativeSelection = input(false, { transform: booleanAttribute });
+
+  itemKeydown = output<SdSheetItemKeydownEventParam<T>>();
+  cellKeydown = output<SdSheetCellKeydownEventParam<T>>();
+
+  selectedItems = model<T[]>([]);
+  expandedItems = model<T[]>([]);
+  sorts = model<SortingDef[]>([]);
+  currentPage = model(0);
+}
+```
+
+## Members
+
+| Member | Kind | Type | Default | Description |
+|--------|------|------|---------|-------------|
+| `key` | input | `string \| undefined` | `undefined` | 설정 저장 키 |
+| `items` | input | `T[]` | `[]` | 표시할 항목 |
+| `trackByFn` | input | `((item, index) => unknown) \| undefined` | `undefined` | 트랙킹 함수 |
+| `selectMode` | input | `"single" \| "multi" \| undefined` | `undefined` | 선택 모드 |
+| `getItemSelectableFn` | input | `((item) => boolean \| string) \| undefined` | `undefined` | 선택 가능 여부 함수. string은 비활성 사유 |
+| `getChildrenFn` | input | `((item, index) => T[] \| undefined) \| undefined` | `undefined` | 트리 구조 자식 반환 함수 |
+| `useAutoSort` | input | `boolean` | `false` | 클라이언트 측 자동 정렬 |
+| `visiblePageCount` | input | `number` | `10` | 한 번에 표시할 페이지 수 |
+| `totalPageCount` | input | `number` | `0` | 총 페이지 수 |
+| `itemsPerPage` | input | `number` | `0` | 페이지당 항목 수 |
+| `inset` | input | `boolean` | `false` | 삽입 스타일 |
+| `hideConfigBar` | input | `boolean` | `false` | 설정 바 숨김 |
+| `cumulativeSelection` | input | `boolean` | `false` | items 변경 시 selectedItems 유지 여부. 다중 페이지 선택 누적에 사용 |
+| `itemKeydown` | output | `SdSheetItemKeydownEventParam<T>` | - | 행 keydown 이벤트 |
+| `cellKeydown` | output | `SdSheetCellKeydownEventParam<T>` | - | 셀 keydown 이벤트 |
+| `selectedItems` | model | `T[]` | `[]` | 선택된 항목 (two-way) |
+| `expandedItems` | model | `T[]` | `[]` | 확장된 항목 (two-way) |
+| `sorts` | model | `SortingDef[]` | `[]` | 정렬 설정 (two-way) |
+| `currentPage` | model | `number` | `0` | 현재 페이지 (two-way) |
+
+### `cumulativeSelection` 사용 패턴
+
+- **선택 모달** (다중 페이지 선택 누적) → `true`. 반드시 `trackByFn` 지정 필수
+- **현재 뷰 일괄 작업** (현재 페이지 내 처리) → `false` (기본값)
+
+```html
+<sd-sheet
+  [cumulativeSelection]="viewType() === 'modal' && selectMode() === 'multi'"
+  [trackByFn]="trackById"
+>
+```
+
+> `SortingDef.key`는 `"vendor.name"` 같은 체인 경로일 수 있다. 정렬 처리 시 `obj.getChainValue(item, sort.key)` (from `@simplysm/core-common`)를 사용한다.
+
+### 실사용 예
+
+- [crud-list.md §3 최소 뼈대: 조회 전용 page](../recipes/crud-list.md#3-최소-뼈대-조회-전용-page) — items·sorts·currentPage·totalPageCount·trackByFn 기본 바인딩
+- [crud-list.md §5 확장 A: inline 편집/저장](../recipes/crud-list.md#5-확장-a-inline-편집저장) — selectMode·selectedItems·mark 연동
+- [crud-list.md §6 확장 B: 선택 기능 + 선택 삭제/복구](../recipes/crud-list.md#6-확장-b-선택-기능--선택-삭제복구) — selectMode="multi"·selectedItems 바인딩
+- [crud-list.md §8 확장 D: 선택 모달 전환](../recipes/crud-list.md#8-확장-d-선택-모달-전환) — cumulativeSelection·selectMode 조건부 적용
+- [crud-detail.md §10 확장 F: 복합 상세](../recipes/crud-detail.md#10-확장-f-복합-상세-내부-sd-sheet) — 상세 폼 내부 하위 컬렉션 편집
+
+## Related Types
+
+### `SdSheetColumn`
+
+시트 컬럼 정의 디렉티브.
+
+```typescript
+@Directive({ selector: "sd-sheet-column" })
+class SdSheetColumn<T = unknown> {
+  key = input.required<string>();
+  header = input<string | string[]>("");
+  headerStyle = input<string>();
+  tooltip = input<string>();
+  width = input<string>();
+  fixed = input(false, { transform: booleanAttribute });
+  hidden = input(false, { transform: booleanAttribute });
+  collapse = input(false, { transform: booleanAttribute });
+  disableSorting = input(false, { transform: booleanAttribute });
+  disableResizing = input(false, { transform: booleanAttribute });
+  ordering = input(0);
+}
+```
+
+Content children: `SdSheetColumnCellTemplate` (required), `#headerTpl`, `#summaryTpl`
+
+#### 실사용 예
+
+- [crud-list.md §3 최소 뼈대: 조회 전용 page](../recipes/crud-list.md#3-최소-뼈대-조회-전용-page) — key·header 기본 컬럼 정의
+- [crud-list.md §7 확장 C: inline 삭제 열](../recipes/crud-list.md#7-확장-c-inline-삭제-열) — fixed·hidden·#headerTpl 커스텀 헤더
+- [crud-detail.md §10 확장 F: 복합 상세](../recipes/crud-detail.md#10-확장-f-복합-상세-내부-sd-sheet) — 하위 컬렉션 컬럼 정의
+
+### `SdSheetColumnCellTemplate`
+
+시트 컬럼 셀 내용을 정의하는 디렉티브. `ng-template[cell]` 셀렉터.
+
+```typescript
+@Directive({ selector: "ng-template[cell]" })
+class SdSheetColumnCellTemplate<T> {
+  cell = input.required<T[]>();
+
+  static ngTemplateContextGuard<TContextItem>(
+    _dir: SdSheetColumnCellTemplate<TContextItem>,
+    _ctx: unknown,
+  ): _ctx is SdSheetCellContext<TContextItem>;
+}
+```
+
+**셀 내용 작성 지침:**
+- **일반 텍스트**: `<div class="p-xs-sm">` 로 감싸 기본 패딩 적용
+- **컨트롤 삽입**: 반드시 `[inset]="true"` + `[size]="'sm'"` 지정
+
+#### 실사용 예
+
+- [crud-list.md §3 최소 뼈대: 조회 전용 page](../recipes/crud-list.md#3-최소-뼈대-조회-전용-page) — let-item 기본 셀 렌더링
+- [crud-list.md §5 확장 A: inline 편집/저장](../recipes/crud-list.md#5-확장-a-inline-편집저장) — let-edit 조건부 편집 셀 (inset+sm 컨트롤)
+- [crud-detail.md §10 확장 F: 복합 상세](../recipes/crud-detail.md#10-확장-f-복합-상세-내부-sd-sheet) — 상세 폼 내부 하위 컬렉션 셀
+
+### `SdSheetCellContext`
+
+```typescript
+interface SdSheetCellContext<T = unknown> {
+  $implicit: T;
+  item: T;
+  index: number;
+  depth: number;
+  edit: boolean;
+}
+```
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `$implicit` | `T` | 현재 항목 (let-item으로 접근) |
+| `item` | `T` | 현재 항목 |
+| `index` | `number` | 행 인덱스 |
+| `depth` | `number` | 트리 깊이 |
+| `edit` | `boolean` | 편집 모드 여부 |
+
+### `SdSheetConfigModal`
+
+```typescript
+@Component({ selector: "sd-sheet-config-modal" })
+class SdSheetConfigModal implements SdModalContentDef<SdSheetConfig> {
+  controls = input.required<readonly SdSheetColumn[]>();
+  config = input.required<SdSheetConfig | undefined>();
+  close = output<SdSheetConfig>();
+  initialized = signal(true);
+}
+```
+
+### `SdSheetColumnDef`
+
+```typescript
+interface SdSheetColumnDef {
+  key: string;
+  header: string | string[];
+  headerStyle: string | undefined;
+  tooltip: string | undefined;
+  width: string | undefined;
+  fixed: boolean;
+  hidden: boolean;
+  collapse: boolean;
+  disableSorting: boolean;
+  disableResizing: boolean;
+  ordering: number;
+}
+```
+
+### `SdSheetConfig`
+
+```typescript
+interface SdSheetConfig {
+  columnRecord: Record<string, {
+    width?: string;
+    hidden?: boolean;
+    fixed?: boolean;
+    ordering?: number;
+  }>;
+}
+```
+
+### `SdSheetHeaderDef`
+
+```typescript
+interface SdSheetHeaderDef {
+  text: string;
+  colspan: number;
+  rowspan: number;
+  isLastRow: boolean;
+  colDef: SdSheetColumnDef | undefined;
+}
+```
+
+### `SdSheetItemKeydownEventParam`
+
+```typescript
+interface SdSheetItemKeydownEventParam<T> {
+  item: T;
+  event: KeyboardEvent;
+}
+```
+
+### `SdSheetCellKeydownEventParam`
+
+```typescript
+interface SdSheetCellKeydownEventParam<T> {
+  item: T;
+  key: string;
+  event: KeyboardEvent;
+}
+```

package/docs/ui-form/sd-additional-button.md

@@ -0,0 +1,26 @@
+# `SdAdditionalButton`
+
+주 콘텐츠 영역과 추가 동작 버튼을 나란히 배치하는 복합 컴포넌트. 콘텐츠 왼쪽 `_content` 영역과 오른쪽 `_button` 영역으로 구성된다.
+
+```typescript
+@Component({ selector: "sd-additional-button", ... })
+export class SdAdditionalButton
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `disabled` | input | `boolean` | 비활성화 여부 (기본값: `false`) |
+| `size` | input | `"sm" \| "lg" \| undefined` | 크기 |
+| `inset` | input | `boolean` | 인셋 스타일 여부 (기본값: `false`) |
+
+## Usage
+
+```html
+<sd-additional-button>
+  선택된 항목 이름
+  <sd-anchor>편집</sd-anchor>
+  <sd-button>삭제</sd-button>
+</sd-additional-button>
+```

package/docs/ui-form/sd-anchor.md

@@ -0,0 +1,31 @@
+# `SdAnchor`
+
+인라인 버튼 컴포넌트. 텍스트나 아이콘을 클릭 가능한 링크 스타일로 표시한다.
+
+```typescript
+@Component({ selector: "sd-anchor", ... })
+export class SdAnchor
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `disabled` | input | `boolean` | 비활성화 여부 (기본값: `false`) |
+| `theme` | input | `"primary" \| "secondary" \| "info" \| "success" \| "warning" \| "danger" \| "gray" \| "blue-gray"` | 색상 테마 (기본값: `"primary"`) |
+
+## Usage
+
+```html
+<sd-anchor (click)="onItemClick()">편집</sd-anchor>
+<sd-anchor [theme]="'danger'" (click)="onDeleteClick()">삭제</sd-anchor>
+<sd-anchor [disabled]="!canEdit()">설정</sd-anchor>
+```
+
+### 실사용 예
+
+- [crud-list.md §5 확장 A: inline 편집/저장](../recipes/crud-list.md#5-확장-a-inline-편집저장) — 시트 셀 내 인라인 앵커 버튼
+- [crud-list.md §7 확장 C: inline 삭제 열](../recipes/crud-list.md#7-확장-c-inline-삭제-열) — row별 삭제/복구 토글 아이콘
+- [crud-list.md §10 확장 F: 모달 편집 모드](../recipes/crud-list.md#10-확장-f-모달-편집-모드) — 행 클릭 편집 모달 열기 링크
+- [crud-detail.md §7 확장 C: modal 뷰](../recipes/crud-detail.md#7-확장-c-modal-뷰) — modal 우측 상단 액션 앵커
+- [crud-detail.md §10 확장 F: 복합 상세](../recipes/crud-detail.md#10-확장-f-복합-상세-내부-sd-sheet) — 행 삭제 아이콘 앵커