@sellmate/design-system 1.20.1 → 1.21.0

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;

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

@@ -7,29 +7,49 @@ export type DateRangeValue = [string, string] | null;
 export declare class SdDateRangePicker {
     private static readonly CLOSE_ANIMATION_DURATION;
     el: HTMLElement;
+    /** 선택된 날짜 범위 [시작일, 종료일] (YYYY-MM-DD) */
     value: DateRangeValue;
+    /** 입력 필드 크기 */
     size: DatePickerSize;
+    /** 미선택 시 표시할 placeholder */
     placeholder: string;
+    /** 선택 가능한 날짜 범위 [시작일, 종료일] */
     selectable?: [string, string];
+    /** 최대 선택 가능한 날짜 범위 (일 단위) */
     maxRange?: number;
+    /** 비활성 상태 여부 */
     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;
+    /** 날짜 범위 선택 완료 시 [시작일, 종료일]을 전달합니다. */
     update: EventEmitter<DateRangeValue>;
+    /** 달력 월/년 이동 시 현재 보여지는 연·월을 전달합니다. */
     viewChange: EventEmitter<{
         year: number;
         month: number;
@@ -37,10 +57,14 @@ export declare class SdDateRangePicker {
     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-dropdown-button/sd-dropdown-button.d.ts

@@ -3,10 +3,15 @@ import { BaseDropdownEvent } from '../../utils/base-dropdown-event';
 import { type DropdownButtonItem, type DropdownButtonName, type DropdownButtonValue } from './sd-dropdown-button.config';
 export declare class SdDropdownButton extends BaseDropdownEvent {
     el: HTMLElement;
+    /** 버튼 프리셋 이름 (크기와 색상 조합) */
     name: DropdownButtonName;
+    /** 버튼 레이블 */
     label: string;
+    /** 드롭다운 메뉴 아이템 목록 */
     items: DropdownButtonItem[];
+    /** 비활성 상태 여부 */
     disabled: boolean;
+    /** 레이블 버튼과 드롭다운 토글을 분리하는 split 모드 여부 */
     split: boolean;
     private static readonly CLOSE_ANIMATION_DURATION;
     isOpen: boolean;
@@ -16,15 +21,20 @@ export declare class SdDropdownButton extends BaseDropdownEvent {
     private splitContainerRef?;
     private menuRef?;
     private closeAnimationTimer?;
+    /** 메뉴 아이템 선택 시 해당 아이템의 value를 전달합니다. */
     click: EventEmitter<DropdownButtonValue>;
+    /** split 모드에서 레이블 버튼 클릭 시 발생합니다. */
     buttonClick: EventEmitter<void>;
+    /** 드롭다운 열림/닫힘 상태 변경 시 발생합니다. */
     dropDownShow: EventEmitter<{
         isOpen: boolean;
     }>;
     handleOpenChange(isOpen: boolean): void;
     componentWillLoad(): void;
     disconnectedCallback(): void;
+    /** 드롭다운 메뉴를 엽니다. */
     sdOpen(): Promise<void>;
+    /** 드롭다운 메뉴를 닫습니다. */
     sdClose(): Promise<void>;
     closeDropdown: () => void;
     protected handleDocumentClick(event: Event): void;