@sellmate/design-system 1.20.1 → 1.22.0

package/dist/esm/sd-toast-container.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-CAxodB5I.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-C7HJ-NfO.js';
 
 const DEFAULT_DURATION = 4000;
 const DEFAULT_MAX_VISIBLE = 3;
@@ -19,15 +19,22 @@ const SdToastContainer = class {
         this.toastDismiss = createEvent(this, "sdToastDismiss", 7);
     }
     get el() { return getElement(this); }
+    /** 토스트 표시 위치 */
     position = 'bottom-center';
+    /** 동시에 표시할 최대 토스트 수 */
     maxVisible = DEFAULT_MAX_VISIBLE;
+    /** 자동 닫힘 지연 시간 (ms, 0이면 자동 닫힘 없음) */
     defaultDuration = DEFAULT_DURATION;
+    /** z-index */
     zIndex = DEFAULT_Z_INDEX;
     toasts = [];
     expanded = false;
     toastRefs = new Map();
+    /** 토스트가 표시될 때 발생합니다. */
     toastShow;
+    /** 토스트가 제거될 때 발생합니다. */
     toastDismiss;
+    /** 토스트를 생성하고 ID를 반환합니다. */
     async create(options) {
         const id = `toast-${++toastIdCounter}`;
         const entry = { id, options, state: 'entering' };
@@ -52,9 +59,11 @@ const SdToastContainer = class {
         this.toastShow.emit({ id });
         return id;
     }
+    /** 지정한 ID의 토스트를 닫습니다. */
     async dismiss(id) {
         this.startDismiss(id);
     }
+    /** 모든 토스트를 닫습니다. */
     async dismissAll() {
         (this.toasts || []).forEach(t => this.startDismiss(t.id));
     }
@@ -232,7 +241,7 @@ const SdToastContainer = class {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (h("div", { key: 'f5b2cb8f4d1286bbd8f7cd648916294397ed4742', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (h("div", { key: 'b75aeffdddcd16267169ae99305ef5f475f53950', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

package/dist/esm/sd-toast.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-CAxodB5I.js';
+import { r as registerInstance, c as createEvent, h } from './index-C7HJ-NfO.js';
 
 const toast = {
 	icon: "16",
@@ -66,14 +66,23 @@ const SdToast = class {
         this.close = createEvent(this, "sdClose", 7);
         this.buttonClick = createEvent(this, "sdButtonClick", 7);
     }
+    /** 좌측 아이콘명 */
     icon;
+    /** 표시할 메시지 */
     message;
+    /** 우측 링크 URL */
     link;
+    /** 링크 표시 레이블 (없으면 URL 표시) */
     linkLabel;
+    /** 우측 버튼 레이블 */
     buttonLabel;
+    /** 닫기 버튼 표시 여부 */
     useClose = false;
+    /** 토스트 타입 (색상/아이콘 프리셋) */
     type = 'default';
+    /** 닫기 버튼 클릭 또는 자동 닫힘 시 발생합니다. */
     close;
+    /** 우측 버튼 클릭 시 발생합니다. */
     buttonClick;
     render() {
         const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
@@ -82,12 +91,12 @@ const SdToast = class {
         const linkColor = typeConfig.linkColor ?? typeConfig.content;
         const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
         const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
-        return (h("div", { key: '45a278a76dde70b17794763fa35365ac8d634194', style: {
+        return (h("div", { key: 'ee54d9d9821821e0c422725c94d465f1e2df7bc6', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
                 '--sd-toast-icon': iconColor,
                 '--sd-toast-link': linkColor,
-            } }, h("div", { key: 'eb00957c65514153867322942ed111d24622c75b', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: 'd30f442041ea963e86f8558f3ed07ceb28049ae9', class: "sd-toast__icon" }, h("sd-icon", { key: '04e57935a4fe4344f3eb1338cfc436bef449805e', name: this.icon, size: iconSize, color: iconColor }))), h("div", { key: '02270cd25d409d44bbd1d7932b074494d2cbeca1', class: "sd-toast__content" }, h("span", { key: '5f180c70d130fc04b16901c69a399f6effa328b9', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '4fd2adab87dbdaae94c21483f66256ce773ae965', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: '2c60553150114d6d5b99a2e86b35b4a85c4a34a4', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (h("sd-ghost-button", { key: 'c3e01391b713286b65a05352dd39ab98790564f8', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, h("div", { key: 'b258e4b49fe530c778c0003516a2ad159805158a', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '850a02dd996c7d1ca214b887e0d3d9899972e319', class: "sd-toast__icon" }, h("sd-icon", { key: '50d2817b160bd767a509956338347ee09a34a845', name: this.icon, size: iconSize, color: iconColor }))), h("div", { key: '0200da1ef6cfa9fcafa4cacf08998a33847038dc', class: "sd-toast__content" }, h("span", { key: 'af039afb2f457acded350ae2323e0bc59765a09e', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '98fdcf360ca632e9f919e01ab0dce8369a1ebe79', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: '45202c0f969ab64e50265ee81f34fc14def26ce2', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (h("sd-ghost-button", { key: '48f30258527ae7a8a96db9609f096f5d216246ff', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
 };
 SdToast.style = sdToastCss();

package/dist/esm/sd-toggle.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-CAxodB5I.js';
+import { r as registerInstance, c as createEvent, h } from './index-C7HJ-NfO.js';
 
 const toggle = {
 	height: "28",
@@ -74,9 +74,13 @@ const SdToggle = class {
         registerInstance(this, hostRef);
         this.change = createEvent(this, "sdUpdate", 7);
     }
+    /** 현재 선택 상태 */
     value = false;
+    /** 표시할 레이블 텍스트 */
     label = '';
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 상태가 변경될 때 발생합니다. */
     change;
     get toggleClasses() {
         const classes = ['sd-toggle'];
@@ -118,7 +122,7 @@ const SdToggle = class {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (h("label", { key: '9ef981165b998f43ec23f3bb1cf0ef385962d7fb', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '6b6d2a89f43036f624c7bc291b2c5aa7a93c8f0a', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (h("label", { key: '1a03763c5cfcb5159b69e62a9db9893297082e2b', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '099cbbb02ebf283883ab7fe748f605491ae84808', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/esm/{tooltipArrow-DLr6VvUK.js → tooltipArrow-Bgf3crs7.js}

@@ -1,4 +1,4 @@
-import { h } from './index-CAxodB5I.js';
+import { h } from './index-C7HJ-NfO.js';
 
 const TooltipArrow = (props) => (h("svg", { width: "16", height: "12", viewBox: "0 0 16 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, h("path", { d: "M8.83205 10.7519C8.43623 11.3457 7.56377 11.3457 7.16795 10.7519L1.04907e-06 -1.39876e-06L16 0L8.83205 10.7519Z", fill: "currentColor" })));
 

package/dist/types/components/sd-action-modal/sd-action-modal.d.ts

@@ -1,11 +1,17 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import type { ButtonProps } from '../sd-button/sd-button.config';
 export declare class SdActionModal {
+    /** 모달 헤더에 표시할 제목 */
     modalTitle: string;
+    /** 하단 확인 버튼의 props (없으면 footer 미표시) */
     buttonProps?: ButtonProps;
+    /** 모달 너비 (숫자면 px, 문자열이면 그대로 적용) */
     width?: string | number;
+    /** 모달 높이 (숫자면 px, 문자열이면 그대로 적용) */
     height?: string | number;
+    /** 닫기 버튼 클릭 시 발생 */
     close: EventEmitter<void>;
+    /** 확인 버튼 클릭 시 발생 */
     ok: EventEmitter<void>;
     render(): any;
 }

package/dist/types/components/sd-badge/sd-badge.d.ts

@@ -1,5 +1,6 @@
 import { type BadgeColor } from './sd-badge.config';
 export declare class SdBadge {
+    /** 뱃지 색상 */
     color: BadgeColor;
     render(): any;
 }

package/dist/types/components/sd-barcode-input/sd-barcode-input.d.ts

@@ -5,45 +5,78 @@ import { type BarcodeInputSize } from './sd-barcode-input.config';
 import { type FieldAddonAlign } from '../sd-field/sd-field.config';
 export declare class SdBarcodeInput {
     host: HTMLElement;
+    /** 입력값 */
     value?: string | number | null;
+    /** 입력 필드 크기 */
     size: BarcodeInputSize;
+    /** 필드 우측 어드온 레이블 */
     addonLabel: string;
+    /** 어드온 정렬 방향 */
     addonAlign: FieldAddonAlign;
+    /** 입력 placeholder */
     placeholder: string;
+    /** 비활성 상태 여부 */
     disabled: boolean;
+    /** 입력값 지우기 버튼 표시 여부 */
     clearable: boolean;
+    /** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
     width: string | number;
+    /** 유효성 검사 규칙 목록 */
     rules?: Rule[];
+    /** 마운트 시 자동 포커스 여부 */
     autoFocus: boolean;
+    /** 필드 상태 (없으면 rules 결과로 자동 결정) */
     status?: 'default' | 'pass' | 'error';
+    /** 필드 하단 힌트 텍스트 */
     hint: string;
+    /** 에러 메시지 */
     errorMessage: string;
+    /** 네이티브 input에 추가할 클래스 */
     inputClass: string;
+    /** 읽기 전용 여부 */
     readonly: boolean;
+    /** 에러 상태 여부 */
     error: boolean;
+    /** 포커스 상태 여부 */
     focused: boolean;
+    /** 호버 상태 여부 */
     hovered: boolean;
+    /** 레이블 텍스트 */
     label?: string;
+    /** 레이블 너비 */
     labelWidth: string | number;
+    /** 레이블 영역 아이콘 */
     icon?: IconProps;
+    /** 레이블 툴팁 텍스트 */
     labelTooltip: string;
+    /** 레이블 툴팁 상세 옵션 */
     labelTooltipProps: SdTooltipProps | null;
+    /** 네이티브 input에 적용할 인라인 스타일 */
     inputStyle: {
         [key: string]: string;
     };
     private internalValue;
     private nativeEl;
     private formField?;
+    /** 폼 연동용 name 속성 */
     name: string;
+    /** 입력값 변경 시 발생합니다. */
     input?: EventEmitter<string | number | null>;
+    /** 포커스 진입 시 발생합니다. */
     focus?: EventEmitter<Event>;
+    /** 포커스 이탈 시 발생합니다. */
     blur?: EventEmitter<Event>;
     valueChanged(newValue: string | number | null): void;
     internalValueChanged(newValue: string | number | null): void;
+    /** 네이티브 input 엘리먼트를 반환합니다. */
     sdGetNativeElement(): Promise<HTMLInputElement | null>;
+    /** 유효성 검사를 실행합니다. */
     sdValidate(): Promise<void>;
+    /** 입력값과 유효성 상태를 초기화합니다. */
     sdReset(): Promise<void>;
+    /** 유효성 상태만 초기화합니다. */
     sdResetValidate(): Promise<void>;
+    /** 입력 필드에 포커스를 이동합니다. */
     sdFocus(): Promise<void>;
     componentWillLoad(): void;
     componentDidLoad(): void;

package/dist/types/components/sd-button/sd-button.d.ts

@@ -1,13 +1,21 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { type ButtonName, type ButtonType } from './sd-button.config';
 export declare class SdButton {
+    /** 버튼 프리셋 이름 (크기와 색상 조합) */
     name: ButtonName;
+    /** 버튼 텍스트 레이블 */
     label: string;
+    /** 레이블 왼쪽에 표시할 아이콘 */
     icon?: IconName;
+    /** 레이블 오른쪽에 표시할 아이콘 */
     rightIcon?: IconName;
+    /** 아이콘 전용 버튼일 때 스크린리더용 레이블 */
     ariaLabel: string;
+    /** 비활성 상태 여부 */
     disabled: boolean;
+    /** 네이티브 button type 속성 */
     type: ButtonType;
+    /** 클릭 시 발생합니다. */
     click: EventEmitter<MouseEvent>;
     private hasWarnedMissingAriaLabel;
     private handleClick;

package/dist/types/components/sd-calendar/sd-calendar.d.ts

@@ -1,13 +1,19 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { type CalendarEventGroup } from './sd-calendar.config';
 export declare class SdCalendar {
+    /** 선택된 날짜 (YYYY-MM-DD) */
     value: string | null;
+    /** 선택 가능한 날짜 범위 [시작일, 종료일] (YYYY-MM-DD, 빈 문자열이면 제한 없음) */
     selectable?: [string, string];
+    /** 캘린더에 표시할 이벤트 그룹 목록 */
     events?: CalendarEventGroup[];
+    /** 카드 형태의 그림자 여부 */
     elevated: boolean;
     private currentYear;
     private currentMonth;
+    /** 날짜 선택 시 선택된 날짜(YYYY-MM-DD)를 전달합니다. */
     update: EventEmitter<string>;
+    /** 월/년 네비게이션 변경 시 현재 보여지는 연·월을 전달합니다. */
     viewChange: EventEmitter<{
         year: number;
         month: number;

package/dist/types/components/sd-callout/sd-callout.d.ts

@@ -1,6 +1,8 @@
 import { type CalloutType } from './sd-callout.config';
 export declare class SdCallout {
+    /** 콜아웃 타입 (색상·아이콘 조합 결정) */
     type: CalloutType;
+    /** 표시할 메시지 목록 (문자열 배열로 중첩 리스트 표현 가능) */
     message: (string | string[])[];
     private get calloutStyle();
     private renderListItem;

package/dist/types/components/sd-card/sd-card.d.ts

@@ -1,5 +1,7 @@
 export declare class SdCard {
+    /** 테두리 표시 여부 */
     bordered: boolean;
+    /** 카드 루트 엘리먼트에 추가할 클래스 */
     sdClass?: string;
     render(): any;
 }

package/dist/types/components/sd-checkbox/sd-checkbox.config.d.ts

@@ -9,6 +9,7 @@ export declare const CHECKBOX_TYPOGRAPHY: {
     fontSize: string;
     lineHeight: string;
     fontWeight: string;
+    selectedFontWeight: string;
 };
 export declare const CHECKBOX_COLORS: {
     unchecked: {
@@ -26,6 +27,7 @@ export declare const CHECKBOX_COLORS: {
     };
     label: string;
     labelInverse: string;
+    labelDisabled: string;
     disabled: {
         bg: string;
         border: string;

package/dist/types/components/sd-chip/sd-chip.d.ts

@@ -3,18 +3,29 @@ import { ValidatableField } from '../sd-form/sd-form';
 import { Rule } from '../../types/form';
 export declare class SdChip implements ValidatableField {
     el: HTMLElement;
+    /** 폼 연동용 name 속성 */
     name: string;
+    /** 칩 텍스트 값 */
     value: string;
+    /** 에러 상태 여부 */
     error: boolean;
+    /** 비활성 상태 여부 */
     disabled: boolean;
+    /** 인라인 편집 가능 여부 */
     editable: boolean;
+    /** 편집 중 표시할 placeholder */
     placeholder: string;
+    /** 유효성 검사 규칙 목록 */
     rules?: Rule[];
     internalValue: string;
     isEditing: boolean;
+    /** 편집 완료 시 새 값을 전달합니다. */
     update: EventEmitter<string>;
+    /** 삭제 버튼 클릭 시 발생합니다. */
     delete: EventEmitter<void>;
+    /** 편집 모드 진입 시 발생합니다. */
     focus: EventEmitter<void>;
+    /** 편집 모드 이탈 시 발생합니다. */
     blur: EventEmitter<void>;
     private inputEl?;
     private draftValue;
@@ -23,11 +34,17 @@ export declare class SdChip implements ValidatableField {
     componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
+    /** 유효성 검사를 실행합니다. */
     sdValidate(): Promise<boolean>;
+    /** 값과 유효성 상태를 초기화합니다. */
     sdReset(): Promise<void>;
+    /** 유효성 상태만 초기화합니다. */
     sdResetValidate(): Promise<void>;
+    /** 유효성 상태만 초기화합니다. */
     sdResetValidation(): Promise<void>;
+    /** 편집 모드로 전환하여 포커스를 이동합니다. */
     sdFocus(): Promise<void>;
+    /** 네이티브 input 엘리먼트를 반환합니다. */
     sdGetNativeElement(): Promise<HTMLSpanElement | null>;
     /**
      * SSR 환경에서 editable prop이 전달되지 않으면 undefined로 들어올 수 있으므로,

package/dist/types/components/sd-chip-input/sd-chip-input.d.ts

@@ -5,30 +5,55 @@ import { type ChipInputSize } from './sd-chip-input.config';
 export declare class SdChipInput {
     private static readonly SUGGESTIONS_VIEWPORT_PADDING;
     host: HTMLElement;
+    /** 칩 값 목록 */
     values: string[];
+    /** 칩별 에러 상태 목록 또는 값으로 에러 여부를 반환하는 함수 */
     errors: boolean[] | ((value: string) => boolean);
+    /** 칩별 비활성 상태 목록 또는 값으로 비활성 여부를 반환하는 함수 */
     disabledChips: boolean[] | ((value: string) => boolean);
+    /** 입력 필드 크기 */
     size: ChipInputSize;
+    /** 비활성 상태 여부 */
     disabled: boolean;
+    /** 입력 placeholder */
     placeholder: string;
+    /** 폼 연동용 name 속성 */
     name: string;
+    /** 유효성 검사 규칙 목록 */
     rules?: Rule[];
+    /** 에러 상태 여부 */
     error: boolean;
+    /** 입력 초기화 버튼 표시 여부 */
     useReset: boolean;
+    /** 최대 입력 가능한 칩 개수 (없으면 제한 없음) */
     maxCount?: number;
+    /** 중복 에러 메시지에 표시할 항목 이름 (없으면 기본 메시지 사용) */
     duplicateLabel?: string;
+    /** 자동완성 후보 목록 */
     suggestions: string[];
+    /** 자동완성 목록 로딩 중 여부 */
     loadingSuggestions: boolean;
+    /** 추천 항목 목록 (입력값이 없을 때 표시) */
     recommendedItems: string[];
+    /** 추천 항목 로딩 중 여부 */
     loadingRecommendedItems: boolean;
+    /** 레이블 텍스트 */
     label?: string;
+    /** 레이블 너비 */
     labelWidth: string | number;
+    /** 필드 하단 힌트 텍스트 */
     hint: string;
+    /** 에러 메시지 */
     errorMessage: string;
+    /** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
     width: string | number;
+    /** 필드 상태 (없으면 rules 결과로 자동 결정) */
     status?: 'default' | 'pass' | 'error';
+    /** 레이블 영역 아이콘 */
     icon?: IconProps;
+    /** 레이블 툴팁 텍스트 */
     labelTooltip: string;
+    /** 레이블 툴팁 상세 옵션 */
     labelTooltipProps: SdTooltipProps | null;
     private internalValues;
     private internalErrors;
@@ -51,13 +76,21 @@ export declare class SdChipInput {
     private isDuplicateChip;
     private getChipError;
     private getChipDisabled;
+    /** 칩 목록 변경 시 전체 값 배열을 전달합니다. */
     update: EventEmitter<string[]>;
+    /** 입력 필드 포커스 진입 시 발생합니다. */
     focusEvent: EventEmitter<void>;
+    /** 입력 필드 포커스 이탈 시 발생합니다. */
     blurEvent: EventEmitter<void>;
+    /** 입력값 변경 시 현재 입력 중인 문자열을 전달합니다. */
     inputEvent: EventEmitter<string>;
+    /** 유효성 검사를 실행합니다. */
     sdValidate(): Promise<boolean | undefined>;
+    /** 값과 유효성 상태를 초기화합니다. */
     sdReset(): Promise<void | undefined>;
+    /** 유효성 상태만 초기화합니다. */
     sdResetValidate(): Promise<void | undefined>;
+    /** 입력 필드에 포커스를 이동합니다. */
     sdFocus(): Promise<void | undefined>;
     private addChip;
     private handleChipRemove;

package/dist/types/components/sd-circle-progress/sd-circle-progress.d.ts

@@ -1,8 +1,12 @@
 import { type CircleProgressType } from './sd-circle-progress.config';
 export declare class SdCircleProgress {
+    /** 불확정 상태 여부 (true면 value 무시하고 스피너처럼 애니메이션) */
     indeterminate: boolean;
+    /** 진행률 (0~100) */
     value: number;
+    /** 색상 테마 */
     type: CircleProgressType;
+    /** 원 하단에 표시할 레이블 텍스트 */
     label?: string;
     private get clampedValue();
     render(): any;

package/dist/types/components/sd-confirm-modal/sd-confirm-modal.d.ts

@@ -5,20 +5,35 @@ export declare class SdConfirmModal {
     private hasSlottedContent;
     private customContentRef?;
     private slotObserver?;
+    /** 모달 타입 (아이콘·버튼 색상 결정) */
     type: ConfirmModalType;
+    /** 모달 제목 */
     modalTitle: string;
+    /** 제목 엘리먼트에 추가할 클래스 */
     titleClass: string;
+    /** 콘텐츠 박스 상단 메시지 목록 */
     topMessage: string[];
+    /** 콘텐츠 박스 하단 메시지 목록 */
     bottomMessage: string[];
+    /** 확인 버튼 프리셋 (없으면 type에 따라 자동 결정) */
     mainButtonName?: ConfirmModalMainButton;
+    /** 확인 버튼 레이블 */
     mainButtonLabel: string;
+    /** 취소 버튼 레이블 (없으면 취소 버튼 미표시) */
     subButtonLabel: string;
+    /** 콘텐츠 박스에 표시할 태그 프리셋 */
     tagPreset: TagName;
+    /** 콘텐츠 박스에 표시할 태그 레이블 */
     tagLabel: string;
+    /** 콘텐츠 박스에 표시할 텍스트 (tagLabel 없을 때 사용) */
     slotLabel: string;
+    /** 콘텐츠 박스에 직접 삽입할 HTMLElement */
     tagContents?: HTMLElement;
+    /** 닫기 버튼 클릭 시 발생합니다. */
     close: EventEmitter<void>;
+    /** 취소 버튼 클릭 시 발생합니다. */
     cancel: EventEmitter<void>;
+    /** 확인 버튼 클릭 시 발생합니다. */
     ok: EventEmitter<void>;
     componentWillLoad(): void;
     componentDidLoad(): void;

package/dist/types/components/sd-date-box/sd-date-box.d.ts

@@ -1,15 +1,25 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export type Type = 'start' | 'end' | '';
 export declare class SdDateBox {
+    /** 표시할 날짜 값 */
     date: number | string | null;
+    /** 비활성 상태 여부 */
     disabled: boolean;
+    /** 선택된 날짜 여부 */
     selected: boolean;
+    /** 범위 시작일 여부 */
     isStartDate: boolean;
+    /** 범위 종료일 여부 */
     isEndDate: boolean;
+    /** 오늘 날짜 여부 */
     isToday: boolean;
+    /** 선택 범위 내 날짜 여부 */
     inRange: boolean;
+    /** 범위 선택에서의 역할 (start | end | 없음) */
     type: Type;
+    /** 날짜 클릭 시 해당 날짜 값을 전달합니다. */
     click?: EventEmitter<number | string | null>;
+    /** 날짜 hover 시 해당 날짜 값을 전달합니다. */
     mouseOver?: EventEmitter<number | string | null>;
     private handleClickDate;
     private handleHoverDate;

package/dist/types/components/sd-date-picker/sd-date-picker-trigger/sd-date-picker-trigger.d.ts

@@ -1,10 +1,15 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 import { type DatePickerSize } from '../sd-date-picker.config';
 export declare class SdDatePickerTrigger {
+    /** 표시할 날짜 텍스트 */
     displayText: string;
+    /** 입력 힌트 텍스트 */
     placeholder: string;
+    /** 비활성 상태 여부 */
     disabled: boolean;
+    /** 트리거 크기 */
     size: DatePickerSize;
+    /** 트리거 클릭 시 발생합니다. */
     triggerClick: EventEmitter<void>;
     private handleClick;
     render(): any;

package/dist/types/components/sd-date-picker/sd-date-picker.d.ts

@@ -6,28 +6,47 @@ import { type FieldAddonAlign } from '../sd-field/sd-field.config';
 export declare class SdDatePicker {
     private static readonly CLOSE_ANIMATION_DURATION;
     el: HTMLElement;
+    /** 선택된 날짜 (YYYY-MM-DD) */
     value: string | null;
+    /** 입력 필드 크기 */
     size: DatePickerSize;
+    /** 날짜 미선택 시 표시할 placeholder */
     placeholder: string;
+    /** 선택 가능한 날짜 범위 [시작일, 종료일] */
     selectable?: [string, string];
+    /** 비활성 상태 여부 */
     disabled: boolean;
+    /** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
     width: string | number;
+    /** 레이블 텍스트 */
     label: string;
+    /** 레이블 너비 */
     labelWidth: string | number;
+    /** 필드 우측 어드온 레이블 */
     addonLabel: string;
+    /** 어드온 정렬 방향 */
     addonAlign: FieldAddonAlign;
+    /** 필드 하단 힌트 텍스트 */
     hint: string;
+    /** 에러 메시지 */
     errorMessage: string;
+    /** 유효성 검사 규칙 목록 */
     rules?: Rule[];
+    /** 에러 상태 여부 */
     error: boolean;
+    /** 레이블 영역 아이콘 */
     icon?: IconProps;
+    /** 레이블 툴팁 텍스트 */
     labelTooltip: string;
+    /** 레이블 툴팁 상세 옵션 */
     labelTooltipProps: SdTooltipProps | null;
     private isOpen;
     private isAnimatingOut;
     private focused;
     private hovered;
+    /** 날짜 선택 시 선택된 날짜(YYYY-MM-DD)를 전달합니다. */
     update: EventEmitter<string | null>;
+    /** 달력 월/년 이동 시 현재 보여지는 연·월을 전달합니다. */
     viewChange: EventEmitter<{
         year: number;
         month: number;
@@ -35,10 +54,14 @@ export declare class SdDatePicker {
     private triggerRef?;
     private formField?;
     private closeAnimationTimer?;
+    /** 폼 연동용 name 속성 */
     name: string;
     watchIsOpen(newValue: boolean): void;
+    /** 유효성 검사를 실행합니다. */
     sdValidate(): Promise<boolean | undefined>;
+    /** 값과 유효성 상태를 초기화합니다. */
     sdReset(): Promise<void | undefined>;
+    /** 유효성 상태만 초기화합니다. */
     sdResetValidate(): Promise<void | undefined>;
     private closeDropdown;
     private handleTriggerClick;

package/dist/types/components/sd-date-range-picker/sd-date-range-picker-calendar/sd-date-range-picker-calendar.d.ts

@@ -1,14 +1,19 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 export declare class SdDateRangePickerCalendar {
+    /** 선택된 날짜 범위 [시작일, 종료일] */
     value: [string, string] | null;
+    /** 선택 가능한 날짜 범위 제한 */
     selectable?: [string, string];
+    /** 최대 선택 가능 일 수 */
     maxRange?: number;
     private currentYear;
     private currentMonth;
     private pendingStart;
     private hoverDate;
     private displayValue;
+    /** 날짜 범위 선택 시 발생합니다. */
     select: EventEmitter<[string, string]>;
+    /** 달력 뷰가 변경될 때 발생합니다. */
     viewChange: EventEmitter<{
         year: number;
         month: number;