@simplysm/sd-claude 14.0.42 → 14.0.43

package/claude/references/sd-simplysm14/angular/docs/ui-form.md

@@ -9,19 +9,29 @@
 ```typescript
 @Component({ selector: "sd-button" })
 class SdButton {
+  type = input<"button" | "submit">("button");
+  theme = input<"primary" | "secondary" | "info" | ... | "link" | "link-primary" | ... | "link-rev">();
   inline = input(false, { transform: booleanAttribute });
   inset = input(false, { transform: booleanAttribute });
+  size = input<"sm" | "lg">();
   disabled = input(false, { transform: booleanAttribute });
+  buttonStyle = input<string>();
+  buttonClass = input<string>();
 }
 ```
 
 | Input | Type | Default | Description |
 |-------|------|---------|-------------|
+| `type` | `"button" \| "submit"` | `"button"` | 버튼 HTML 타입 |
+| `theme` | `string \| undefined` | `undefined` | 테마 (primary, secondary, info, success, warning, danger, gray, blue-gray, link, link-primary, link-secondary, link-info, link-success, link-warning, link-danger, link-gray, link-blue-gray, link-rev) |
 | `inline` | `boolean` | `false` | 인라인 표시 |
 | `inset` | `boolean` | `false` | 테두리 없는 삽입 스타일 |
+| `size` | `"sm" \| "lg" \| undefined` | `undefined` | 크기 |
 | `disabled` | `boolean` | `false` | 비활성화 |
+| `buttonStyle` | `string \| undefined` | `undefined` | 버튼 인라인 스타일 |
+| `buttonClass` | `string \| undefined` | `undefined` | 버튼 CSS 클래스 |
 
-호스트 속성: `data-sd-theme`, `data-sd-size`, `data-sd-disabled`
+호스트 속성: `data-sd-theme`, `data-sd-inline`, `data-sd-size`, `data-sd-inset`, `data-sd-disabled`
 
 ### `SdAnchor`
 
@@ -31,9 +41,15 @@ class SdButton {
 @Component({ selector: "sd-anchor" })
 class SdAnchor {
   disabled = input(false, { transform: booleanAttribute });
+  theme = input<"primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray">("primary");
 }
 ```
 
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `disabled` | `boolean` | `false` | 비활성화 |
+| `theme` | `string` | `"primary"` | 테마 색상 |
+
 ### `SdAdditionalButton`
 
 추가 동작 버튼. 드롭다운 포함.
@@ -41,6 +57,7 @@ class SdAnchor {
 ```typescript
 @Component({ selector: "sd-additional-button" })
 class SdAdditionalButton {
+  size = input<"sm" | "lg">();
   inset = input(false, { transform: booleanAttribute });
 }
 ```
@@ -51,28 +68,32 @@ class SdAdditionalButton {
 
 ```typescript
 @Component({ selector: "sd-modal-select-button" })
-class SdModalSelectButton<T> {
+class SdModalSelectButton<T extends object, K, M extends keyof SelectModeValue<K>> {
   modal = input.required<SdSelectModalInfo<SdSelectModal<T>>>();
-  value = model<SelectModeValue<any>[any]>();
+  value = model<SelectModeValue<K>[M]>();
+  selectedItems = model<T[]>([]);
   disabled = input(false, { transform: booleanAttribute });
   required = input(false, { transform: booleanAttribute });
   inset = input(false, { transform: booleanAttribute });
-  selectMode = input<"single" | "multi">("single");
-  searchIcon = input(tablerSearch);
+  size = input<"sm" | "lg">();
+  selectMode = input<M>("single" as M);
   modalOptions = input<SdModalOptions>();
+  searchIcon = input(tablerSearch);
 }
 ```
 
 | Input | Type | Default | Description |
 |-------|------|---------|-------------|
 | `modal` | `SdSelectModalInfo<...>` | required | 모달 정보 |
-| `value` | `any` | - | 선택된 값 (two-way) |
+| `value` | `SelectModeValue<K>[M]` | - | 선택된 값 (two-way) |
+| `selectedItems` | `T[]` | `[]` | 선택된 항목 객체 배열 (two-way) |
 | `disabled` | `boolean` | `false` | 비활성화 |
 | `required` | `boolean` | `false` | 필수 (지우기 버튼 숨김) |
 | `inset` | `boolean` | `false` | 삽입 스타일 |
-| `selectMode` | `"single" \| "multi"` | `"single"` | 선택 모드 |
+| `size` | `"sm" \| "lg" \| undefined` | `undefined` | 크기 |
+| `selectMode` | `M` | `"single"` | 선택 모드 |
+| `modalOptions` | `SdModalOptions \| undefined` | `undefined` | 모달 옵션 |
 | `searchIcon` | `string` | `tablerSearch` | 검색 아이콘 |
-| `modalOptions` | `SdModalOptions \| undefined` | - | 모달 옵션 |
 
 ## Inputs
 
@@ -83,20 +104,30 @@ class SdModalSelectButton<T> {
 ```typescript
 @Component({ selector: "sd-textfield" })
 class SdTextfield<K extends keyof SdTextfieldTypes> {
+  value = model<SdTextfieldTypes[K]>();
   type = input.required<K>();
-  value = model<SdTextfieldTypes[K] | undefined>();
+  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 });
-  useNumberComma = input(true, { transform: booleanAttribute });
-  inline = input(false, { transform: booleanAttribute });
-  inset = input(false, { transform: booleanAttribute });
-  placeholder = input<string>();
-  format = input<string>();
   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>();
 }
 ```
 
@@ -104,13 +135,28 @@ class SdTextfield<K extends keyof SdTextfieldTypes> {
 |-------|------|---------|-------------|
 | `type` | `keyof SdTextfieldTypes` | required | 입력 타입 (number, text, password, color, email, format, date, month, year, datetime, datetime-sec, time, time-sec) |
 | `value` | `SdTextfieldTypes[K] \| undefined` | - | 값 (two-way) |
+| `placeholder` | `string \| undefined` | `undefined` | 플레이스홀더 |
+| `title` | `string \| undefined` | `undefined` | title 속성 (없으면 placeholder 사용) |
+| `inputStyle` | `string \| undefined` | `undefined` | input 인라인 스타일 |
+| `inputClass` | `string \| undefined` | `undefined` | input CSS 클래스 |
 | `disabled` | `boolean` | `false` | 비활성화 |
 | `readonly` | `boolean` | `false` | 읽기 전용 |
 | `required` | `boolean` | `false` | 필수 |
+| `min` | `SdTextfieldTypes[K] \| undefined` | `undefined` | 최소값 |
+| `max` | `SdTextfieldTypes[K] \| undefined` | `undefined` | 최대값 |
+| `minlength` | `number \| undefined` | `undefined` | 최소 길이 |
+| `maxlength` | `number \| undefined` | `undefined` | 최대 길이 |
+| `pattern` | `string \| undefined` | `undefined` | 입력 패턴 (정규식) |
+| `validatorFn` | `((value) => string \| undefined) \| undefined` | `undefined` | 커스텀 유효성 검증 함수 (에러 메시지 반환) |
+| `format` | `string \| undefined` | `undefined` | format 타입에서 사용할 포맷 문자열 |
+| `step` | `number \| undefined` | `undefined` | 증감 단위 |
+| `autocomplete` | `string \| undefined` | `undefined` | autocomplete 속성 |
 | `useNumberComma` | `boolean` | `true` | number 타입에서 천 단위 쉼표 사용 |
+| `minDigits` | `number \| undefined` | `undefined` | number 타입 최소 자릿수 |
 | `inline` | `boolean` | `false` | 인라인 표시 |
 | `inset` | `boolean` | `false` | 삽입 스타일 |
-| `format` | `string \| undefined` | - | format 타입에서 사용할 포맷 문자열 |
+| `size` | `"sm" \| "lg" \| undefined` | `undefined` | 크기 |
+| `theme` | `string \| undefined` | `undefined` | 테마 |
 
 ### `SdTextarea`
 
@@ -120,11 +166,19 @@ class SdTextfield<K extends keyof SdTextfieldTypes> {
 @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>();
 }
 ```
 
@@ -135,14 +189,30 @@ class SdTextarea {
 ```typescript
 @Component({ selector: "sd-numpad" })
 class SdNumpad {
-  value = model<number | undefined>();
+  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();
 }
 ```
 
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `placeholder` | `string \| undefined` | `undefined` | 플레이스홀더 |
+| `value` | `number \| undefined` | - | 값 (two-way) |
+| `required` | `boolean` | `false` | 필수 |
+| `inputDisabled` | `boolean` | `false` | 입력 필드 비활성화 |
+| `useEnterButton` | `boolean` | `false` | 엔터 버튼 표시 |
+| `useMinusButton` | `boolean` | `false` | 마이너스 버튼 표시 |
+
+| Output | Type | Description |
+|--------|------|-------------|
+| `enterButtonClick` | `void` | 엔터 버튼 클릭 시 발생 |
+
 ### `SdRange`
 
 범위 슬라이더 컴포넌트.
@@ -151,8 +221,9 @@ class SdNumpad {
 @Component({ selector: "sd-range" })
 class SdRange<K extends keyof SdTextfieldTypes> {
   type = input.required<K>();
-  from = model<SdTextfieldTypes[K] | undefined>();
-  to = model<SdTextfieldTypes[K] | undefined>();
+  from = model<SdTextfieldTypes[K]>();
+  to = model<SdTextfieldTypes[K]>();
+  inputStyle = input<string>();
   required = input(false, { transform: booleanAttribute });
   disabled = input(false, { transform: booleanAttribute });
 }
@@ -165,12 +236,20 @@ class SdRange<K extends keyof SdTextfieldTypes> {
 ```typescript
 @Component({ selector: "sd-date-range-picker" })
 class SdDateRangePicker {
-  from = model<DateOnly | undefined>();
-  to = model<DateOnly | undefined>();
+  periodType = model<"일" | "월" | "범위">("범위");
+  from = model<DateOnly>();
+  to = model<DateOnly>();
   required = input(false, { transform: booleanAttribute });
 }
 ```
 
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `periodType` | `"일" \| "월" \| "범위"` | `"범위"` | 기간 선택 타입 (two-way) |
+| `from` | `DateOnly \| undefined` | - | 시작일 (two-way) |
+| `to` | `DateOnly \| undefined` | - | 종료일 (two-way) |
+| `required` | `boolean` | `false` | 필수 |
+
 ## Choice
 
 ### `SdStatePreset`
@@ -181,9 +260,17 @@ class SdDateRangePicker {
 @Component({ selector: "sd-state-preset" })
 class SdStatePreset {
   key = input.required<string>();
+  state = model<any>();
+  size = input<"sm" | "lg">();
 }
 ```
 
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `key` | `string` | required | 프리셋 저장 키 |
+| `state` | `any` | - | 상태 데이터 (two-way) |
+| `size` | `"sm" \| "lg" \| undefined` | `undefined` | 크기 |
+
 ### `SdStatePresetDef`
 
 ```typescript
@@ -208,22 +295,30 @@ interface SdStatePresetDef {
 @Component({ selector: "sd-checkbox" })
 class SdCheckbox {
   value = model(false);
+  canChangeFn = input<(item: boolean) => boolean | Promise<boolean>>(() => true);
   icon = input(tablerCheck);
   radio = input(false, { transform: booleanAttribute });
   disabled = input(false, { transform: booleanAttribute });
+  size = input<"sm" | "lg">();
   inline = input(false, { transform: booleanAttribute });
   inset = input(false, { transform: booleanAttribute });
+  theme = input<"primary" | "secondary" | ...>();
+  contentStyle = input<string>();
 }
 ```
 
 | Input | Type | Default | Description |
 |-------|------|---------|-------------|
 | `value` | `boolean` | `false` | 체크 여부 (two-way) |
+| `canChangeFn` | `(item: boolean) => boolean \| Promise<boolean>` | `() => true` | 값 변경 가능 여부 함수 |
 | `icon` | `string` | `tablerCheck` | 체크 아이콘 |
 | `radio` | `boolean` | `false` | 라디오 버튼 스타일 |
 | `disabled` | `boolean` | `false` | 비활성화 |
+| `size` | `"sm" \| "lg" \| undefined` | `undefined` | 크기 |
 | `inline` | `boolean` | `false` | 인라인 표시 |
 | `inset` | `boolean` | `false` | 삽입 스타일 |
+| `theme` | `string \| undefined` | `undefined` | 테마 색상 |
+| `contentStyle` | `string \| undefined` | `undefined` | 컨텐츠 인라인 스타일 |
 
 ### `SdSwitch`
 
@@ -233,9 +328,12 @@ class SdCheckbox {
 @Component({ selector: "sd-switch" })
 class SdSwitch {
   value = model(false);
+  canChangeFn = input<(item: boolean) => boolean | Promise<boolean>>(() => true);
   disabled = input(false, { transform: booleanAttribute });
   inline = input(false, { transform: booleanAttribute });
   inset = input(false, { transform: booleanAttribute });
+  size = input<"sm" | "lg">();
+  theme = input<string>();
 }
 ```
 
@@ -276,36 +374,71 @@ class SdTiptapEditor {
   disabled = input(false, { transform: booleanAttribute });
   readonly = input(false, { transform: booleanAttribute });
   required = input(false, { transform: booleanAttribute });
+  placeholder = input<string>();
+  validatorFn = input<(value: string | undefined) => string | undefined>();
+  extensions = input<AnyExtension[]>();
 }
 ```
 
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `value` | `string \| undefined` | - | HTML 콘텐츠 (two-way) |
+| `disabled` | `boolean` | `false` | 비활성화 |
+| `readonly` | `boolean` | `false` | 읽기 전용 |
+| `required` | `boolean` | `false` | 필수 |
+| `placeholder` | `string \| undefined` | `undefined` | 플레이스홀더 |
+| `validatorFn` | `((value) => string \| undefined) \| undefined` | `undefined` | 커스텀 유효성 검증 함수 |
+| `extensions` | `AnyExtension[] \| undefined` | `undefined` | 추가 TipTap 확장 |
+
 ## Select
 
 ### `SdSelect`
 
-드롭다운 선택 컴포넌트. single/multi/multi-with-header 모드를 지원한다.
+드롭다운 선택 컴포넌트. single/multi 모드를 지원한다.
 
 ```typescript
 @Component({ selector: "sd-select" })
 class SdSelect<T, M extends keyof SelectModeValue<T>> {
-  value = model<SelectModeValue<T>[M]>();
   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 });
-  size = input<"sm" | "lg">();
+  multiSelectionDisplayDirection = input<"vertical">();
+  items = input<T[]>();
+  getChildrenFn = input<(item: T) => T[] | undefined>();
+  contentClass = input<string>();
+  contentStyle = input<string>();
 }
 ```
 
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `selectMode` | `M` | `"single"` | 선택 모드 |
+| `value` | `SelectModeValue<any>[M]` | - | 선택된 값 (two-way) |
+| `placeholder` | `string \| undefined` | `undefined` | 플레이스홀더 |
+| `disabled` | `boolean` | `false` | 비활성화 |
+| `inline` | `boolean` | `false` | 인라인 표시 |
+| `inset` | `boolean` | `false` | 삽입 스타일 |
+| `size` | `"sm" \| "lg" \| undefined` | `undefined` | 크기 |
+| `required` | `boolean` | `false` | 필수 |
+| `hideSelectAll` | `boolean` | `false` | multi 모드에서 전체 선택 숨김 |
+| `multiSelectionDisplayDirection` | `"vertical" \| undefined` | `undefined` | multi 모드 표시 방향 |
+| `items` | `T[] \| undefined` | `undefined` | 항목 배열 (selectMode가 "multi"일 때 내부 목록 렌더링용) |
+| `getChildrenFn` | `((item) => T[] \| undefined) \| undefined` | `undefined` | 트리 구조 자식 함수 |
+| `contentClass` | `string \| undefined` | `undefined` | 컨텐츠 CSS 클래스 |
+| `contentStyle` | `string \| undefined` | `undefined` | 컨텐츠 인라인 스타일 |
+
 ### `SelectModeValue`
 
 ```typescript
 type SelectModeValue<T> = {
-  single: T | undefined;
   multi: T[];
-  "multi-with-header": T[];
+  single: T;
 }
 ```
 
@@ -335,11 +468,23 @@ class SdSelectButton<T> { }
 
 ### `SdForm`
 
-폼 래퍼 컴포넌트. submit 이벤트 처리, 유효성 검증, busy 관리.
+폼 래퍼 컴포넌트. `<form>` 태그를 렌더링하며 submit 이벤트 처리 및 유효성 검증을 수행한다.
 
 ```typescript
 @Component({ selector: "sd-form" })
-class SdForm { }
+class SdForm {
+  formSubmit = output<SubmitEvent>();
+  formInvalid = output();
+
+  requestSubmit(): void;
+}
 ```
 
-`<form>` 태그를 렌더링하며 submit 이벤트를 처리한다.
+| Output | Type | Description |
+|--------|------|-------------|
+| `formSubmit` | `SubmitEvent` | 유효성 검증 통과 시 발생 |
+| `formInvalid` | `void` | 유효성 검증 실패 시 발생 (`reportValidity()` 호출 후) |
+
+| Method | Description |
+|--------|-------------|
+| `requestSubmit()` | 프로그래밍 방식으로 submit 트리거 |

package/claude/references/sd-simplysm14/angular/docs/ui-layout.md

@@ -16,12 +16,16 @@ class 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` | 크기 조절 가능 여부 |
 
 ## `SdGap`
@@ -39,11 +43,16 @@ class SdGap { }
 
 ```typescript
 @Component({ selector: "sd-kanban-board" })
-class SdKanbanBoard {
-  drop = output<SdKanbanBoardDropInfo>();
+class SdKanbanBoard<L, T> {
+  selectedValues = model<T[]>([]);
+  drop = output<SdKanbanBoardDropInfo<L, T>>();
 }
 ```
 
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `selectedValues` | `T[]` | `[]` | 선택된 칸반 아이템 값 배열 (two-way) |
+
 ### `SdKanbanBoardDropInfo`
 
 ```typescript
@@ -94,16 +103,20 @@ interface SdKanbanDropTarget<L, T> {
 
 ```typescript
 @Component({ selector: "sd-kanban" })
-class SdKanban {
+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`
 
@@ -111,10 +124,11 @@ class SdKanban {
 
 ```typescript
 @Component({ selector: "sd-kanban-lane" })
-class SdKanbanLane {
+class SdKanbanLane<L, T> {
   busy = input(false, { transform: booleanAttribute });
   useCollapse = input(false, { transform: booleanAttribute });
   collapse = model(false);
+  value = input<L>();
 }
 ```
 
@@ -123,3 +137,4 @@ class SdKanbanLane {
 | `busy` | `boolean` | `false` | busy 상태 |
 | `useCollapse` | `boolean` | `false` | 접기 기능 사용 |
 | `collapse` | `boolean` | `false` | 접힘 상태 (two-way) |
+| `value` | `L \| undefined` | `undefined` | 레인의 값 |

package/claude/references/sd-simplysm14/angular/docs/ui-navigation.md

@@ -105,9 +105,19 @@ class SdSidebar { }
 
 ```typescript
 @Component({ selector: "sd-sidebar-menu" })
-class SdSidebarMenu { }
+class SdSidebarMenu {
+  menus = input<SdMenu[]>([]);
+  layout = input<"accordion" | "flat">();
+  getMenuIsSelectedFn = input<(menu: SdMenu) => boolean>();
+}
 ```
 
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `menus` | `SdMenu[]` | `[]` | 메뉴 항목 |
+| `layout` | `"accordion" \| "flat" \| undefined` | `undefined` | 레이아웃 모드 |
+| `getMenuIsSelectedFn` | `((menu) => boolean) \| undefined` | `undefined` | 커스텀 메뉴 선택 여부 함수 |
+
 ### `SdSidebarUser`
 
 사이드바 사용자 영역 컴포넌트.
@@ -162,9 +172,17 @@ class SdTopbar { }
 
 ```typescript
 @Component({ selector: "sd-topbar-menu" })
-class SdTopbarMenu { }
+class SdTopbarMenu {
+  menus = input<SdMenu[]>([]);
+  getMenuIsSelectedFn = input<(menu: SdMenu) => boolean>();
+}
 ```
 
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `menus` | `SdMenu[]` | `[]` | 메뉴 항목 |
+| `getMenuIsSelectedFn` | `((menu) => boolean) \| undefined` | `undefined` | 커스텀 메뉴 선택 여부 함수 |
+
 ### `SdTopbarUser`
 
 탑바 사용자 영역 컴포넌트.

package/claude/references/sd-simplysm14/angular/docs/ui-overlay.md

@@ -38,22 +38,25 @@ class SdDropdownPopup { }
 @Component({ selector: "sd-modal" })
 class SdModal {
   open = model(false);
+  key = input<string | undefined>(undefined);
   title = input("");
   hideHeader = input(false);
   hideCloseButton = input(false);
+  headerStyle = input<string | undefined>(undefined);
   useCloseByBackdrop = input(true);
   useCloseByEscapeKey = input(true);
   float = input(false);
   fill = input(false);
   resizable = input(false);
   movable = input(false);
-  position = input<"bottom-right" | "top-right">();
-  minHeightPx = input<number>();
-  minWidthPx = input<number>();
-  heightPx = input<number>();
-  widthPx = input<number>();
-  headerStyle = input<string>();
-  noFirstControlFocusing = input(false);
+  position = input<"bottom-right" | "top-right" | undefined>(undefined);
+  minHeightPx = input<number | undefined>(undefined);
+  minWidthPx = input<number | undefined>(undefined);
+  heightPx = input<number | undefined>(undefined);
+  widthPx = input<number | undefined>(undefined);
+  actionTplRef = input<TemplateRef<any> | undefined>(undefined);
+
+  closeRequest = output<void>();
 }
 ```
 
@@ -70,7 +73,11 @@ class SdModal {
 | `resizable` | `boolean` | `false` | 크기 조절 가능 |
 | `movable` | `boolean` | `false` | 이동 가능 |
 | `position` | `"bottom-right" \| "top-right"` | - | 위치 프리셋 |
-| `noFirstControlFocusing` | `boolean` | `false` | 자동 포커스 비활성화 |
+| `actionTplRef` | `TemplateRef<any> \| undefined` | `undefined` | 헤더 액션 영역 템플릿 (SdModalProvider에서 설정) |
+
+| Output | Type | Description |
+|--------|------|-------------|
+| `closeRequest` | `void` | 배경 클릭, ESC 키, 닫기 버튼으로 닫기 요청 시 발생 |
 
 ### `SdPromptModal`
 
@@ -109,9 +116,9 @@ class SdConfirmModal implements SdModalContentDef<boolean> {
 class SdToast {
   open = model(false);
   useProgress = input(false, { transform: booleanAttribute });
+  theme = input<SdToastTheme>("info");
   progress = model(0);
-  theme = input<SdToastTheme>();
-  message = signal<string>("");
+  message = model<string | undefined>(undefined);
 }
 ```
 
@@ -136,13 +143,15 @@ busy 표시 컨테이너 컴포넌트. spinner/bar/cube 3가지 타입을 지원
 @Component({ selector: "sd-busy-container" })
 class SdBusyContainer {
   busy = input(false, { transform: booleanAttribute });
-  type = input<SdBusyType>("bar");
-  message = input<string>();
+  message = input<string | undefined>(undefined);
+  type = input<SdBusyType | undefined>(undefined);
+  progressPercent = input<number | undefined>(undefined);
 }
 ```
 
 | Input | Type | Default | Description |
 |-------|------|---------|-------------|
 | `busy` | `boolean` | `false` | busy 상태 |
-| `type` | `SdBusyType` | `"bar"` | 표시 유형 (spinner, bar, cube) |
-| `message` | `string \| undefined` | - | busy 메시지 |
+| `message` | `string \| undefined` | `undefined` | busy 메시지 |
+| `type` | `SdBusyType \| undefined` | `undefined` | 표시 유형 (spinner, bar, cube). undefined이면 부모의 SdBusyProvider.type 사용 |
+| `progressPercent` | `number \| undefined` | `undefined` | 진행률 (0-100). 설정 시 progress bar로 표시 |

package/claude/references/sd-simplysm14/angular/docs/ui-visual.md

@@ -7,15 +7,19 @@
 ```typescript
 @Component({ selector: "sd-label" })
 class SdLabel {
+  theme = input<"primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray">();
+  color = input<string>();
   clickable = input(false, { transform: booleanAttribute });
 }
 ```
 
 | Input | Type | Default | Description |
 |-------|------|---------|-------------|
+| `theme` | `string \| undefined` | `undefined` | 테마 색상 |
+| `color` | `string \| undefined` | `undefined` | 커스텀 CSS 색상 |
 | `clickable` | `boolean` | `false` | 클릭 가능 여부 |
 
-호스트 속성: `data-sd-theme` (primary, secondary, info, success, warning, danger, gray, blue-gray)
+호스트 속성: `data-sd-theme`
 
 ## `SdNote`
 
@@ -24,12 +28,16 @@ class SdLabel {
 ```typescript
 @Component({ selector: "sd-note" })
 class SdNote {
+  theme = input<"primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray">();
+  size = input<"sm" | "lg">();
   inset = input(false, { transform: booleanAttribute });
 }
 ```
 
 | Input | Type | Default | Description |
 |-------|------|---------|-------------|
+| `theme` | `string \| undefined` | `undefined` | 테마 색상 |
+| `size` | `"sm" \| "lg" \| undefined` | `undefined` | 크기 |
 | `inset` | `boolean` | `false` | 삽입 스타일 (테두리 없음) |
 
 호스트 속성: `data-sd-theme`
@@ -41,17 +49,19 @@ class SdNote {
 ```typescript
 @Component({ selector: "sd-progress" })
 class SdProgress {
+  inset = input(false, { transform: booleanAttribute });
+  size = input<"sm" | "lg">();
   theme = input.required<"primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray">();
   value = input.required<number>();
-  inset = input(false, { transform: booleanAttribute });
 }
 ```
 
 | Input | Type | Default | Description |
 |-------|------|---------|-------------|
+| `inset` | `boolean` | `false` | 삽입 스타일 |
+| `size` | `"sm" \| "lg" \| undefined` | `undefined` | 크기 |
 | `theme` | `string` | required | 테마 색상 |
 | `value` | `number` | required | 진행률 (0-100) |
-| `inset` | `boolean` | `false` | 삽입 스타일 |
 
 ## `SdCalendar`
 
@@ -84,16 +94,14 @@ class SdCalendar<T> {
 @Component({ selector: "sd-barcode" })
 class SdBarcode {
   type = input.required<BarcodeType>();
-  value = input.required<string>();
-  scale = input(2);
+  value = input<string>();
 }
 ```
 
 | Input | Type | Default | Description |
 |-------|------|---------|-------------|
 | `type` | `BarcodeType` | required | 바코드 타입 |
-| `value` | `string` | required | 바코드 값 |
-| `scale` | `number` | `2` | 렌더링 스케일 |
+| `value` | `string \| undefined` | `undefined` | 바코드 값. 빈 문자열이거나 undefined이면 빈 출력 |
 
 ### `BarcodeType`