@simplysm/angular 14.0.51 → 14.0.53

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

@@ -1,26 +0,0 @@
-# `SdNumpad`
-
-숫자 패드 입력 컴포넌트. 버튼을 클릭하여 숫자를 입력한다.
-
-```typescript
-@Component({ selector: "sd-numpad", ... })
-export class SdNumpad
-```
-
-## Members
-
-| Member | Kind | Type | Description |
-|--------|------|------|-------------|
-| `value` | model | `number \| undefined` | 숫자 값 |
-| `placeholder` | input | `string \| undefined` | 플레이스홀더 |
-| `required` | input | `boolean` | 필수 여부 (기본값: `false`) |
-| `inputDisabled` | input | `boolean` | 상단 텍스트 입력 비활성화 (기본값: `false`) |
-| `useEnterButton` | input | `boolean` | 확인 버튼 표시 (기본값: `false`) |
-| `useMinusButton` | input | `boolean` | 부호 반전 버튼 표시 (기본값: `false`) |
-| `enterButtonClick` | output | `void` | 확인 버튼 클릭 이벤트 |
-
-## Usage
-
-```html
-<sd-numpad [(value)]="quantity" [useEnterButton]="true" (enterButtonClick)="onConfirm()" />
-```

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

@@ -1,26 +0,0 @@
-# `SdRange`
-
-범위 입력 컴포넌트. `from`/`to` 두 개의 `SdTextfield`를 나란히 배치한다.
-
-```typescript
-@Component({ selector: "sd-range", ... })
-export class SdRange<K extends keyof SdTextfieldTypes>
-```
-
-## Members
-
-| Member | Kind | Type | Description |
-|--------|------|------|-------------|
-| `type` | input (required) | `K` | 텍스트필드 타입 (`SdTextfieldTypes`의 키) |
-| `from` | model | `SdTextfieldTypes[K] \| undefined` | 시작 값 |
-| `to` | model | `SdTextfieldTypes[K] \| undefined` | 종료 값 |
-| `inputStyle` | input | `string \| undefined` | 인라인 스타일 |
-| `required` | input | `boolean` | 필수 여부 (기본값: `false`) |
-| `disabled` | input | `boolean` | 비활성화 (기본값: `false`) |
-
-## Usage
-
-```html
-<sd-range [type]="'date'" [(from)]="startDate" [(to)]="endDate" />
-<sd-range [type]="'number'" [(from)]="minValue" [(to)]="maxValue" />
-```

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

@@ -1,68 +0,0 @@
-# `SdSelect`
-
-드롭다운 선택 컴포넌트. single/multi 모드를 지원한다.
-
-```typescript
-@Component({ selector: "sd-select" })
-class SdSelect<T, M extends keyof SelectModeValue<T>> {
-  selectMode = input("single" as M);
-  value = model<SelectModeValue<any>[M]>();
-  placeholder = input<string>();
-  disabled = input(false, { transform: booleanAttribute });
-  inline = input(false, { transform: booleanAttribute });
-  inset = input(false, { transform: booleanAttribute });
-  size = input<"sm" | "lg">();
-  required = input(false, { transform: booleanAttribute });
-  hideSelectAll = input(false, { transform: booleanAttribute });
-  multiSelectionDisplayDirection = input<"vertical">();
-  items = input<T[]>();
-  getChildrenFn = input<(item: T) => T[] | undefined>();
-  contentClass = input<string>();
-  contentStyle = input<string>();
-}
-```
-
-## Members
-
-| Member | Kind | Type | Default | Description |
-|--------|------|------|---------|-------------|
-| `selectMode` | input | `M` | `"single"` | 선택 모드 |
-| `value` | model | `SelectModeValue<any>[M]` | - | 선택된 값 (two-way) |
-| `placeholder` | input | `string \| undefined` | `undefined` | 플레이스홀더 |
-| `disabled` | input | `boolean` | `false` | 비활성화 |
-| `inline` | input | `boolean` | `false` | 인라인 표시 |
-| `inset` | input | `boolean` | `false` | 삽입 스타일 |
-| `size` | input | `"sm" \| "lg" \| undefined` | `undefined` | 크기 |
-| `required` | input | `boolean` | `false` | 필수 |
-| `hideSelectAll` | input | `boolean` | `false` | multi 모드에서 전체 선택 숨김 |
-| `multiSelectionDisplayDirection` | input | `"vertical" \| undefined` | `undefined` | multi 모드 표시 방향 |
-| `items` | input | `T[] \| undefined` | `undefined` | 항목 배열 |
-| `getChildrenFn` | input | `((item) => T[] \| undefined) \| undefined` | `undefined` | 트리 구조 자식 함수 |
-| `contentClass` | input | `string \| undefined` | `undefined` | 트리거 영역 CSS 클래스 |
-| `contentStyle` | input | `string \| undefined` | `undefined` | 트리거 영역 인라인 스타일 |
-
-**스타일 적용**: `contentClass`/`contentStyle`은 트리거 영역(선택값 텍스트와 드롭다운 화살표가 함께 놓인 박스)에만 적용된다.
-
-## Related Types
-
-### `SdSelectItem`
-
-드롭다운 선택 항목.
-
-```typescript
-@Component({ selector: "sd-select-item" })
-class SdSelectItem<T> {
-  value = input.required<T>();
-  disabled = input(false, { transform: booleanAttribute });
-  hidden = input(false, { transform: booleanAttribute });
-}
-```
-
-### `SdSelectButton`
-
-버튼 스타일 선택 컴포넌트.
-
-```typescript
-@Component({ selector: "sd-select-button" })
-class SdSelectButton<T> { }
-```

package/docs/ui-form/sd-shared-data-select.md

@@ -1,52 +0,0 @@
-# `SdSharedDataSelect`
-
-공유 데이터 드롭다운 선택 컴포넌트. 검색 기능 포함. 상세 API는 [features/sd-shared-data-components.md](../features/sd-shared-data-components.md#sdshareddataselect)를 참조한다.
-
-## 시트 셀 내 사용 패턴
-
-시트 셀 안에서 사용할 때 `[inset]="true" [size]="'sm'"`을 반드시 지정한다.
-
-```html
-<sd-sheet-column [header]="'거래처'" [key]="'vendorId'">
-  <ng-template [cell]="items()" let-item let-edit="edit">
-    <sd-shared-data-select
-      [items]="sharedVendors()"
-      [inset]="true"
-      [size]="'sm'"
-      [disabled]="!canEdit()"
-      [readonly]="!edit"
-      [(value)]="item.vendorId"
-      (valueChange)="mark(items)"
-    >
-      <ng-template [itemOf]="sharedVendors()">
-        <div class="flex-row gap-sm">
-          <div>{{ item.__searchText }}</div>
-        </div>
-      </ng-template>
-    </sd-shared-data-select>
-  </ng-template>
-</sd-sheet-column>
-```
-
-## 일반 form 내 사용 패턴
-
-```html
-<sd-shared-data-select
-  [items]="sharedVendors()"
-  [(value)]="data().vendorId"
-  (valueChange)="mark(data)"
->
-  <ng-template [itemOf]="sharedVendors()">
-    <div class="flex-row gap-sm">
-      <div>{{ item.__searchText }}</div>
-    </div>
-  </ng-template>
-</sd-shared-data-select>
-```
-
-`<ng-template [itemOf]>` 패턴으로 드롭다운 항목의 표시 형식을 커스터마이징한다.
-
-### 실사용 예
-
-- [crud-list.md §5 확장 A: inline 편집/저장](../recipes/crud-list.md#5-확장-a-inline-편집저장) — 시트 셀 내 공유 데이터 선택
-- [crud-detail.md §9 확장 E: 보조 기능 영역](../recipes/crud-detail.md#9-확장-e-보조-기능-영역) — 보조 form 셀렉터

package/docs/ui-form/sd-state-preset.md

@@ -1,37 +0,0 @@
-# `SdStatePreset`
-
-화면 상태(검색 조건 등)를 로컬 스토리지에 저장하고 불러오는 프리셋 컴포넌트.
-`SdSystemConfigProvider`를 통해 설정 키 기반으로 저장한다.
-
-```typescript
-@Component({ selector: "sd-state-preset", ... })
-export class SdStatePreset
-```
-
-## Members
-
-| Member | Kind | Type | Description |
-|--------|------|------|-------------|
-| `key` | input (required) | `string` | 저장 키 (`SdSystemConfigProvider` 기반) |
-| `state` | model | `any` | 현재 상태 객체. 프리셋 클릭 시 해당 프리셋의 상태로 업데이트됨 |
-| `size` | input | `"sm" \| "lg" \| undefined` | 크기 |
-
-## Related Types
-
-### `SdStatePresetDef`
-
-```typescript
-interface SdStatePresetDef {
-  name: string;
-  state: any;
-}
-```
-
-## Usage
-
-```html
-<sd-state-preset [key]="'order-list-search'" [(state)]="searchState" />
-```
-
-> 프리셋 아이콘 클릭 → 이름 입력 모달 → 현재 `state`를 해당 이름으로 저장.
-> 저장된 프리셋 클릭 → `state`가 해당 프리셋의 값으로 업데이트됨.

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

@@ -1,27 +0,0 @@
-# `SdSwitch`
-
-토글 스위치 컴포넌트. `value` model로 on/off 상태를 관리한다.
-
-```typescript
-@Component({ selector: "sd-switch", ... })
-export class SdSwitch
-```
-
-## Members
-
-| Member | Kind | Type | Description |
-|--------|------|------|-------------|
-| `value` | model | `boolean` | on/off 상태 (기본값: `false`) |
-| `canChangeFn` | input | `(item: boolean) => boolean \| Promise<boolean>` | 변경 가드 함수 (기본값: 항상 `true`) |
-| `disabled` | input | `boolean` | 비활성화 (기본값: `false`) |
-| `inline` | input | `boolean` | 인라인 표시 (기본값: `false`) |
-| `inset` | input | `boolean` | 인셋 스타일 (기본값: `false`) |
-| `size` | input | `"sm" \| "lg" \| undefined` | 크기 |
-| `theme` | input | `"primary" \| "secondary" \| "info" \| "success" \| "warning" \| "danger" \| "gray" \| "blue-gray" \| undefined` | 색상 테마 |
-
-## Usage
-
-```html
-<sd-switch [(value)]="isActive" [theme]="'primary'" />
-<sd-switch [(value)]="isEnabled" [canChangeFn]="canChangeActiveAsync" />
-```

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

@@ -1,33 +0,0 @@
-# `SdTextarea`
-
-멀티라인 텍스트 입력 컴포넌트. 내용에 따라 행 수가 자동으로 늘어난다.
-
-```typescript
-@Component({ selector: "sd-textarea", ... })
-export class SdTextarea
-```
-
-## Members
-
-| Member | Kind | Type | Description |
-|--------|------|------|-------------|
-| `value` | model | `string \| undefined` | 입력 값 |
-| `placeholder` | input | `string \| undefined` | 플레이스홀더 텍스트 |
-| `title` | input | `string \| undefined` | 툴팁 |
-| `minRows` | input | `number` | 최소 행 수 (기본값: `1`) |
-| `disabled` | input | `boolean` | 비활성화 (기본값: `false`) |
-| `readonly` | input | `boolean` | 읽기 전용 (기본값: `false`) |
-| `required` | input | `boolean` | 필수 여부 (기본값: `false`) |
-| `inline` | input | `boolean` | 인라인 표시 (기본값: `false`) |
-| `inset` | input | `boolean` | 인셋 스타일 (기본값: `false`) |
-| `size` | input | `"sm" \| "lg" \| undefined` | 크기 |
-| `validatorFn` | input | `(value: string \| undefined) => string \| undefined` | 커스텀 유효성 검사 함수 |
-| `theme` | input | `"primary" \| "secondary" \| "info" \| "success" \| "warning" \| "danger" \| "gray" \| "blue-gray" \| undefined` | 배경 테마 |
-| `inputStyle` | input | `string \| undefined` | 인라인 스타일 |
-| `inputClass` | input | `string \| undefined` | 추가 CSS 클래스 |
-
-## Usage
-
-```html
-<sd-textarea [(value)]="description" [placeholder]="'설명을 입력하세요'" [minRows]="3" />
-```

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

@@ -1,145 +0,0 @@
-# `SdTextfield`
-
-텍스트 입력 컴포넌트. 13가지 타입을 지원한다.
-
-```typescript
-@Component({ selector: "sd-textfield" })
-class SdTextfield<K extends keyof SdTextfieldTypes> {
-  value = model<SdTextfieldTypes[K]>();
-  type = input.required<K>();
-  placeholder = input<string>();
-  title = input<string>();
-  inputStyle = input<string>();
-  inputClass = input<string>();
-  disabled = input(false, { transform: booleanAttribute });
-  readonly = input(false, { transform: booleanAttribute });
-  required = input(false, { transform: booleanAttribute });
-  min = input<SdTextfieldTypes[K]>();
-  max = input<SdTextfieldTypes[K]>();
-  minlength = input<number>();
-  maxlength = input<number>();
-  pattern = input<string>();
-  validatorFn = input<(value: SdTextfieldTypes[K] | undefined) => string | undefined>();
-  format = input<string>();
-  step = input<number>();
-  autocomplete = input<string>();
-  useNumberComma = input(true, { transform: booleanAttribute });
-  minDigits = input<number>();
-  inline = input(false, { transform: booleanAttribute });
-  inset = input(false, { transform: booleanAttribute });
-  size = input<"sm" | "lg">();
-  theme = input<string>();
-}
-```
-
-## Members
-
-| Member | Kind | Type | Default | Description |
-|--------|------|------|---------|-------------|
-| `type` | input (required) | `keyof SdTextfieldTypes` | - | 입력 타입 (number, text, password, color, email, format, date, month, year, datetime, datetime-sec, time, time-sec) |
-| `value` | model | `SdTextfieldTypes[K] \| undefined` | - | 값 (two-way) |
-| `placeholder` | input | `string \| undefined` | `undefined` | 플레이스홀더 |
-| `title` | input | `string \| undefined` | `undefined` | title 속성 |
-| `inputStyle` | input | `string \| undefined` | `undefined` | input 인라인 스타일 |
-| `inputClass` | input | `string \| undefined` | `undefined` | input CSS 클래스 |
-| `disabled` | input | `boolean` | `false` | 비활성화 |
-| `readonly` | input | `boolean` | `false` | 읽기 전용 |
-| `required` | input | `boolean` | `false` | 필수 |
-| `min` | input | `SdTextfieldTypes[K] \| undefined` | `undefined` | 최소값 |
-| `max` | input | `SdTextfieldTypes[K] \| undefined` | `undefined` | 최대값 |
-| `minlength` | input | `number \| undefined` | `undefined` | 최소 길이 |
-| `maxlength` | input | `number \| undefined` | `undefined` | 최대 길이 |
-| `pattern` | input | `string \| undefined` | `undefined` | 입력 패턴 (정규식) |
-| `validatorFn` | input | `((value) => string \| undefined) \| undefined` | `undefined` | 커스텀 유효성 검증 함수 (에러 메시지 반환) |
-| `format` | input | `string \| undefined` | `undefined` | format 타입에서 사용할 포맷 문자열 |
-| `step` | input | `number \| undefined` | `undefined` | 증감 단위 |
-| `autocomplete` | input | `string \| undefined` | `undefined` | autocomplete 속성 |
-| `useNumberComma` | input | `boolean` | `true` | number 타입에서 천 단위 쉼표 사용 |
-| `minDigits` | input | `number \| undefined` | `undefined` | number 타입 최소 자릿수 |
-| `inline` | input | `boolean` | `false` | 인라인 표시 |
-| `inset` | input | `boolean` | `false` | 삽입 스타일 |
-| `size` | input | `"sm" \| "lg" \| undefined` | `undefined` | 크기 |
-| `theme` | input | `string \| undefined` | `undefined` | 테마 |
-
-**스타일 적용**: 입력 영역 스타일은 `inputClass`/`inputStyle`을 사용한다. 호스트(`<sd-textfield>`)에 직접 `class`/`style`을 줘도 입력 영역 외형은 변경되지 않는다.
-
-### 실사용 예
-
-- [crud-list.md §3 최소 뼈대: 조회 전용 page](../recipes/crud-list.md#3-최소-뼈대-조회-전용-page) — 필터 영역 텍스트 입력
-- [crud-list.md §5 확장 A: inline 편집/저장](../recipes/crud-list.md#5-확장-a-inline-편집저장) — 시트 셀 내 편집 (inset+sm, readonly=!edit)
-- [crud-detail.md §3 최소 뼈대: 읽기 전용 상세 폼](../recipes/crud-detail.md#3-최소-뼈대-읽기-전용-상세-폼) — 읽기 전용 필드 (readonly=true)
-- [crud-detail.md §5 확장 A: 편집/저장](../recipes/crud-detail.md#5-확장-a-편집저장) — 편집 가능 필드 (disabled=!canEdit)
-- [crud-detail.md §10 확장 F: 복합 상세](../recipes/crud-detail.md#10-확장-f-복합-상세-내부-sd-sheet) — 하위 컬렉션 시트 셀 내 편집
-
-## Related Types
-
-### `SdTextarea`
-
-멀티라인 텍스트 입력 컴포넌트.
-
-```typescript
-@Component({ selector: "sd-textarea" })
-class SdTextarea {
-  value = model<string>();
-  placeholder = input<string>();
-  title = input<string>();
-  minRows = input<number>(1);
-  disabled = input(false, { transform: booleanAttribute });
-  readonly = input(false, { transform: booleanAttribute });
-  required = input(false, { transform: booleanAttribute });
-  inline = input(false, { transform: booleanAttribute });
-  inset = input(false, { transform: booleanAttribute });
-  size = input<"sm" | "lg">();
-  validatorFn = input<(value: string | undefined) => string | undefined>();
-  theme = input<string>();
-  inputStyle = input<string>();
-  inputClass = input<string>();
-}
-```
-
-### `SdNumpad`
-
-숫자 패드 컴포넌트.
-
-```typescript
-@Component({ selector: "sd-numpad" })
-class SdNumpad {
-  placeholder = input<string>();
-  value = model<number>();
-  required = input(false, { transform: booleanAttribute });
-  inputDisabled = input(false, { transform: booleanAttribute });
-  useEnterButton = input(false, { transform: booleanAttribute });
-  useMinusButton = input(false, { transform: booleanAttribute });
-  enterButtonClick = output();
-}
-```
-
-### `SdRange`
-
-범위 슬라이더 컴포넌트.
-
-```typescript
-@Component({ selector: "sd-range" })
-class SdRange<K extends keyof SdTextfieldTypes> {
-  type = input.required<K>();
-  from = model<SdTextfieldTypes[K]>();
-  to = model<SdTextfieldTypes[K]>();
-  inputStyle = input<string>();
-  required = input(false, { transform: booleanAttribute });
-  disabled = input(false, { transform: booleanAttribute });
-}
-```
-
-### `SdDateRangePicker`
-
-날짜 범위 선택기.
-
-```typescript
-@Component({ selector: "sd-date-range-picker" })
-class SdDateRangePicker {
-  periodType = model<"일" | "월" | "범위">("범위");
-  from = model<DateOnly>();
-  to = model<DateOnly>();
-  required = input(false, { transform: booleanAttribute });
-}
-```

package/docs/ui-layout/sd-dock-container.md

@@ -1,64 +0,0 @@
-# `SdDockContainer`
-
-도킹 레이아웃 컨테이너. `SdDock`과 함께 사용하여 상/하/좌/우 고정 영역을 만든다.
-
-```typescript
-@Component({ selector: "sd-dock-container" })
-class SdDockContainer { }
-```
-
-## Related Types
-
-### `SdDock`
-
-도킹 영역 컴포넌트. `SdDockContainer` 내부에서 사용.
-
-```typescript
-@Component({ selector: "sd-dock" })
-class SdDock {
-  key = input<string>();
-  position = input<"top" | "bottom" | "right" | "left">("top");
-  resizable = input(false, { transform: booleanAttribute });
-}
-```
-
-| Input | Type | Default | Description |
-|-------|------|---------|-------------|
-| `key` | `string \| undefined` | `undefined` | 리사이즈 설정 저장 키 |
-| `position` | `"top" \| "bottom" \| "right" \| "left"` | `"top"` | 도킹 위치 |
-| `resizable` | `boolean` | `false` | 크기 조절 가능 여부 |
-
-## Usage
-
-필터·도구 바는 `position="top"` (기본값이므로 생략 가능), 하단 액션 바는 `[position]="'bottom'"`으로 배치한다.
-
-```html
-<sd-dock-container>
-  <sd-dock>
-    <!-- 상단 필터/도구 바 (기본 position="top") -->
-  </sd-dock>
-  <!-- 메인 콘텐츠 -->
-  <sd-dock [position]="'bottom'">
-    <!-- 하단 액션 바 -->
-  </sd-dock>
-</sd-dock-container>
-```
-
-> **CRITICAL — modal 하단 바에 `[position]="'bottom'"` 반드시 명시**
-> 기본값은 `"top"`이다. modal 하단 액션 바에 `[position]`을 누락하면 상단에 렌더링되어 레이아웃이 깨진다.
-
-### 실사용 예
-
-- [crud-list.md §3 최소 뼈대: 조회 전용 page](../recipes/crud-list.md#3-최소-뼈대-조회-전용-page) — 필터 영역 dock(top)
-- [crud-list.md §8 확장 D: 선택 모달 전환](../recipes/crud-list.md#8-확장-d-선택-모달-전환) — modal 하단 선택 바 dock(bottom)
-- [crud-detail.md §7 확장 C: modal 뷰](../recipes/crud-detail.md#7-확장-c-modal-뷰) — modal 하단 액션 바 dock(bottom)
-- [crud-detail.md §8 확장 D: control 뷰](../recipes/crud-detail.md#8-확장-d-control-뷰) — control 상단 바 dock(top)
-
-## `SdGap`
-
-간격(gap) 컴포넌트. 요소 사이에 공간을 추가한다.
-
-```typescript
-@Component({ selector: "sd-gap" })
-class SdGap { }
-```

package/docs/ui-layout/sd-dock.md

@@ -1,37 +0,0 @@
-# `SdDock`
-
-`SdDockContainer` 내부에 배치되는 도킹 패널 컴포넌트. `position`으로 도킹 위치를 지정하고, `resizable`로 크기 조절을 허용한다.
-
-```typescript
-@Component({ selector: "sd-dock", ... })
-export class SdDock
-```
-
-## Members
-
-| Member | Kind | Type | Description |
-|--------|------|------|-------------|
-| `key` | input | `string \| undefined` | 시스템 설정 저장 키 (크기 저장에 사용) |
-| `position` | input | `"top" \| "bottom" \| "right" \| "left"` | 도킹 위치 (기본값: `"top"`) |
-| `resizable` | input | `boolean` | 크기 조절 가능 여부 (기본값: `false`) |
-
-## Usage
-
-```html
-<sd-dock-container>
-  <sd-dock [position]="'top'">
-    <!-- 상단 고정 영역 -->
-  </sd-dock>
-  <sd-dock [position]="'bottom'" [resizable]="true" [key]="'my-page-bottom-dock'">
-    <!-- 하단 조절 가능 영역 -->
-  </sd-dock>
-  <ng-content /> <!-- 나머지 영역 -->
-</sd-dock-container>
-```
-
-### 실사용 예
-
-- [crud-list.md §3 최소 뼈대: 조회 전용 page](../recipes/crud-list.md#3-최소-뼈대-조회-전용-page) — 필터 영역 dock(top)
-- [crud-list.md §8 확장 D: 선택 모달 전환](../recipes/crud-list.md#8-확장-d-선택-모달-전환) — modal 하단 선택 바 dock(bottom)
-- [crud-detail.md §7 확장 C: modal 뷰](../recipes/crud-detail.md#7-확장-c-modal-뷰) — modal 하단 액션 바 dock(bottom)
-- [crud-detail.md §8 확장 D: control 뷰](../recipes/crud-detail.md#8-확장-d-control-뷰) — control 상단 바 dock(top)

package/docs/ui-layout/sd-gap.md

@@ -1,26 +0,0 @@
-# `SdGap`
-
-레이아웃 간격 컴포넌트. 세로/가로 공백을 삽입한다.
-
-```typescript
-@Component({ selector: "sd-gap", ... })
-export class SdGap
-```
-
-## Members
-
-| Member | Kind | Type | Description |
-|--------|------|------|-------------|
-| `height` | input | `"xxs" \| "xs" \| "sm" \| "default" \| "lg" \| "xl" \| "xxl" \| undefined` | 세로 간격 (CSS 변수 `--gap-*` 기반) |
-| `heightPx` | input | `number \| undefined` | 세로 간격 (픽셀) |
-| `width` | input | `"xxs" \| "xs" \| "sm" \| "default" \| "lg" \| "xl" \| "xxl" \| undefined` | 가로 간격 (CSS 변수 `--gap-*` 기반) |
-| `widthPx` | input | `number \| undefined` | 가로 간격 (픽셀) |
-| `widthEm` | input | `number \| undefined` | 가로 간격 (em) |
-
-## Usage
-
-```html
-<sd-gap [height]="'lg'" />
-<sd-gap [width]="'default'" />
-<sd-gap [heightPx]="32" />
-```

package/docs/ui-layout/sd-kanban-board.md

@@ -1,96 +0,0 @@
-# `SdKanbanBoard`
-
-칸반 보드 컨테이너. 드래그앤드롭을 지원한다.
-
-```typescript
-@Component({ selector: "sd-kanban-board" })
-class SdKanbanBoard<L, T> {
-  selectedValues = model<T[]>([]);
-  drop = output<SdKanbanBoardDropInfo<L, T>>();
-}
-```
-
-## Members
-
-| Member | Kind | Type | Default | Description |
-|--------|------|------|---------|-------------|
-| `selectedValues` | model | `T[]` | `[]` | 선택된 칸반 아이템 값 배열 (two-way) |
-| `drop` | output | `SdKanbanBoardDropInfo<L, T>` | - | 드롭 완료 시 발생 |
-
-## Related Types
-
-### `SdKanban`
-
-칸반 아이템 컴포넌트.
-
-```typescript
-@Component({ selector: "sd-kanban" })
-class SdKanban<L, T> {
-  value = input<T>();
-  selectable = input(false, { transform: booleanAttribute });
-  draggable = input(false, { transform: booleanAttribute });
-  contentClass = input<string>();
-}
-```
-
-| Input | Type | Default | Description |
-|-------|------|---------|-------------|
-| `value` | `T \| undefined` | `undefined` | 칸반 아이템의 값 |
-| `selectable` | `boolean` | `false` | 선택 가능 여부 |
-| `draggable` | `boolean` | `false` | 드래그 가능 여부 |
-| `contentClass` | `string \| undefined` | `undefined` | 컨텐츠 CSS 클래스 |
-
-### `SdKanbanLane`
-
-칸반 레인 컴포넌트.
-
-```typescript
-@Component({ selector: "sd-kanban-lane" })
-class SdKanbanLane<L, T> {
-  busy = input(false, { transform: booleanAttribute });
-  useCollapse = input(false, { transform: booleanAttribute });
-  collapse = model(false);
-  value = input<L>();
-}
-```
-
-| Input | Type | Default | Description |
-|-------|------|---------|-------------|
-| `busy` | `boolean` | `false` | busy 상태 |
-| `useCollapse` | `boolean` | `false` | 접기 기능 사용 |
-| `collapse` | `boolean` | `false` | 접힘 상태 (two-way) |
-| `value` | `L \| undefined` | `undefined` | 레인의 값 |
-
-### `SdKanbanBoardDropInfo`
-
-```typescript
-interface SdKanbanBoardDropInfo<L, T> {
-  sourceKanbanValue?: T;
-  targetLaneValue?: L;
-  targetKanbanValue?: T;
-}
-```
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `sourceKanbanValue` | `T \| undefined` | 드래그한 칸반 아이템의 값 |
-| `targetLaneValue` | `L \| undefined` | 드롭 대상 레인의 값 |
-| `targetKanbanValue` | `T \| undefined` | 드롭 대상 칸반 아이템의 값 |
-
-### `SdKanbanDragRef`
-
-```typescript
-interface SdKanbanDragRef<_L, T> {
-  value(): T | undefined;
-  heightOnDrag(): number;
-}
-```
-
-### `SdKanbanDropTarget`
-
-```typescript
-interface SdKanbanDropTarget<L, T> {
-  targetLaneValue(): L | undefined;
-  targetKanbanValue?(): T | undefined;
-}
-```

package/docs/ui-layout/sd-kanban-lane.md

@@ -1,34 +0,0 @@
-# `SdKanbanLane`
-
-칸반 레인 컴포넌트. `SdKanbanBoard` 내부에 배치되며, `SdKanban` 아이템을 수직으로 나열한다.
-
-```typescript
-@Component({ selector: "sd-kanban-lane", ... })
-export class SdKanbanLane<L, T> implements SdKanbanDropTarget<L, T>
-```
-
-## Members
-
-| Member | Kind | Type | Description |
-|--------|------|------|-------------|
-| `value` | input | `L \| undefined` | 이 레인의 값 |
-| `busy` | input | `boolean` | 로딩 표시 (기본값: `false`) |
-| `useCollapse` | input | `boolean` | 접기 기능 사용 (기본값: `false`) |
-| `collapse` | model | `boolean` | 접힘 상태 (기본값: `false`) |
-
-## Usage
-
-```html
-<sd-kanban-board [(selectedValues)]="selectedItems">
-  @for (lane of lanes; track lane.id) {
-    <sd-kanban-lane [value]="lane">
-      <ng-template #titleTpl>{{ lane.name }}</ng-template>
-      @for (item of lane.items; track item.id) {
-        <sd-kanban [value]="item" [draggable]="true">
-          {{ item.title }}
-        </sd-kanban>
-      }
-    </sd-kanban-lane>
-  }
-</sd-kanban-board>
-```