@sellmate/design-system 1.20.1 → 1.22.0

package/dist/collection/components/sd-barcode-input/sd-barcode-input.js

@@ -3,38 +3,66 @@ import { nanoid } from "nanoid/non-secure";
 import { BARCODE_INPUT_COLORS, BARCODE_INPUT_SIZE_MAP, } from "./sd-barcode-input.config";
 export class SdBarcodeInput {
     host;
+    /** 입력값 */
     value = null;
+    /** 입력 필드 크기 */
     size = 'sm';
+    /** 필드 우측 어드온 레이블 */
     addonLabel = '';
+    /** 어드온 정렬 방향 */
     addonAlign = 'start';
+    /** 입력 placeholder */
     placeholder = '입력해 주세요.';
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 입력값 지우기 버튼 표시 여부 */
     clearable = false;
+    /** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
     width = '';
+    /** 유효성 검사 규칙 목록 */
     rules = [];
+    /** 마운트 시 자동 포커스 여부 */
     autoFocus = false;
+    /** 필드 상태 (없으면 rules 결과로 자동 결정) */
     status;
+    /** 필드 하단 힌트 텍스트 */
     hint = '';
+    /** 에러 메시지 */
     errorMessage = '';
+    /** 네이티브 input에 추가할 클래스 */
     inputClass = '';
+    /** 읽기 전용 여부 */
     readonly = false;
+    /** 에러 상태 여부 */
     error = false;
+    /** 포커스 상태 여부 */
     focused = false;
+    /** 호버 상태 여부 */
     hovered = false;
     // props - label
+    /** 레이블 텍스트 */
     label = '';
+    /** 레이블 너비 */
     labelWidth = '';
+    /** 레이블 영역 아이콘 */
     icon = undefined;
+    /** 레이블 툴팁 텍스트 */
     labelTooltip = '';
+    /** 레이블 툴팁 상세 옵션 */
     labelTooltipProps = null;
     //  props - custom styles
+    /** 네이티브 input에 적용할 인라인 스타일 */
     inputStyle = {};
     internalValue = null;
     nativeEl = undefined;
     formField;
+    /** 폼 연동용 name 속성 */
     name = nanoid();
+    /** 입력값 변경 시 발생합니다. */
     input;
+    /** 포커스 진입 시 발생합니다. */
     focus;
+    /** 포커스 이탈 시 발생합니다. */
     blur;
     valueChanged(newValue) {
         this.internalValue = newValue;
@@ -45,18 +73,23 @@ export class SdBarcodeInput {
             this.input?.emit(this.value);
         }
     }
+    /** 네이티브 input 엘리먼트를 반환합니다. */
     async sdGetNativeElement() {
         return this.nativeEl || null;
     }
+    /** 유효성 검사를 실행합니다. */
     async sdValidate() {
         this.formField?.sdValidate();
     }
+    /** 입력값과 유효성 상태를 초기화합니다. */
     async sdReset() {
         this.formField?.sdReset();
     }
+    /** 유효성 상태만 초기화합니다. */
     async sdResetValidate() {
         this.formField?.sdResetValidation();
     }
+    /** 입력 필드에 포커스를 이동합니다. */
     async sdFocus() {
         this.formField?.sdFocus();
     }
@@ -102,7 +135,7 @@ export class SdBarcodeInput {
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
             '--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
         };
-        return (h("sd-field", { key: '453566ff018ea2131361fcc18d6094491d3b04dd', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: '153174624e5ec10908df6f40711a7a37039ab67b', class: "sd-barcode-input__content" }, h("slot", { key: 'ce9326a5b3157ad511171f48ee95dd2ce6a6b5dd', name: "prefix" }), h("input", { key: '069c037e8c27575f70ebfed9c2b2e61817f202f5', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '7ba3162a850e8d3d787ee44aaa807bb5be54cddc', name: "suffix" }), this.clearable && this.internalValue && (h("sd-ghost-button", { key: 'f12e8083d050d96b34cad2d332d5aeb08f4f3913', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: '9f9831c9f39e4723cad6567b22155ab89856c9be', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: '1da8ce2ef66e48f269b79f22e6751ccf18ca9cc0', class: "sd-barcode-input__content" }, h("slot", { key: '06850214ee5118ff3d13266c1ade37902c19f379', name: "prefix" }), h("input", { key: '0384b010946b635cc6b19ddb1a83be593ba5806b', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '2bb5baed7b300014e52795d3a7665a580b7ff5a2', name: "suffix" }), this.clearable && this.internalValue && (h("sd-ghost-button", { key: 'fc586fdb39a1dc25eeba32c76aa86a653416c38e', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
                 if (this.disabled)
                     return;
                 this.internalValue = '';
@@ -134,7 +167,7 @@ export class SdBarcodeInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC785\uB825\uAC12"
                 },
                 "getter": false,
                 "setter": false,
@@ -161,7 +194,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC785\uB825 \uD544\uB4DC \uD06C\uAE30"
                 },
                 "getter": false,
                 "setter": false,
@@ -181,7 +214,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD544\uB4DC \uC6B0\uCE21 \uC5B4\uB4DC\uC628 \uB808\uC774\uBE14"
                 },
                 "getter": false,
                 "setter": false,
@@ -208,7 +241,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC5B4\uB4DC\uC628 \uC815\uB82C \uBC29\uD5A5"
                 },
                 "getter": false,
                 "setter": false,
@@ -228,7 +261,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC785\uB825 placeholder"
                 },
                 "getter": false,
                 "setter": false,
@@ -248,7 +281,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBE44\uD65C\uC131 \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -268,7 +301,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC785\uB825\uAC12 \uC9C0\uC6B0\uAE30 \uBC84\uD2BC \uD45C\uC2DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -288,7 +321,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD544\uB4DC \uB108\uBE44 (\uC22B\uC790\uBA74 px, \uBB38\uC790\uC5F4\uC774\uBA74 \uADF8\uB300\uB85C \uC801\uC6A9)"
                 },
                 "getter": false,
                 "setter": false,
@@ -315,7 +348,7 @@ export class SdBarcodeInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC720\uD6A8\uC131 \uAC80\uC0AC \uADDC\uCE59 \uBAA9\uB85D"
                 },
                 "getter": false,
                 "setter": false,
@@ -333,7 +366,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB9C8\uC6B4\uD2B8 \uC2DC \uC790\uB3D9 \uD3EC\uCEE4\uC2A4 \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -353,7 +386,7 @@ export class SdBarcodeInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD544\uB4DC \uC0C1\uD0DC (\uC5C6\uC73C\uBA74 rules \uACB0\uACFC\uB85C \uC790\uB3D9 \uACB0\uC815)"
                 },
                 "getter": false,
                 "setter": false,
@@ -372,7 +405,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD544\uB4DC \uD558\uB2E8 \uD78C\uD2B8 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -392,7 +425,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC5D0\uB7EC \uBA54\uC2DC\uC9C0"
                 },
                 "getter": false,
                 "setter": false,
@@ -412,7 +445,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB124\uC774\uD2F0\uBE0C input\uC5D0 \uCD94\uAC00\uD560 \uD074\uB798\uC2A4"
                 },
                 "getter": false,
                 "setter": false,
@@ -432,7 +465,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC77D\uAE30 \uC804\uC6A9 \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -452,7 +485,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC5D0\uB7EC \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -472,7 +505,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD3EC\uCEE4\uC2A4 \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -492,7 +525,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD638\uBC84 \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -512,7 +545,7 @@ export class SdBarcodeInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -532,7 +565,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uB108\uBE44"
                 },
                 "getter": false,
                 "setter": false,
@@ -557,7 +590,7 @@ export class SdBarcodeInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uC601\uC5ED \uC544\uC774\uCF58"
                 },
                 "getter": false,
                 "setter": false,
@@ -575,7 +608,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uD234\uD301 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -602,7 +635,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uD234\uD301 \uC0C1\uC138 \uC635\uC158"
                 },
                 "getter": false,
                 "setter": false,
@@ -620,7 +653,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB124\uC774\uD2F0\uBE0C input\uC5D0 \uC801\uC6A9\uD560 \uC778\uB77C\uC778 \uC2A4\uD0C0\uC77C"
                 },
                 "getter": false,
                 "setter": false,
@@ -638,7 +671,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD3FC \uC5F0\uB3D9\uC6A9 name \uC18D\uC131"
                 },
                 "getter": false,
                 "setter": false,
@@ -662,7 +695,7 @@ export class SdBarcodeInput {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC785\uB825\uAC12 \uBCC0\uACBD \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "string | number | null",
@@ -677,7 +710,7 @@ export class SdBarcodeInput {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD3EC\uCEE4\uC2A4 \uC9C4\uC785 \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "Event",
@@ -699,7 +732,7 @@ export class SdBarcodeInput {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD3EC\uCEE4\uC2A4 \uC774\uD0C8 \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "Event",
@@ -734,7 +767,7 @@ export class SdBarcodeInput {
                     "return": "Promise<HTMLInputElement | null>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uB124\uC774\uD2F0\uBE0C input \uC5D8\uB9AC\uBA3C\uD2B8\uB97C \uBC18\uD658\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -751,7 +784,7 @@ export class SdBarcodeInput {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uC720\uD6A8\uC131 \uAC80\uC0AC\uB97C \uC2E4\uD589\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -768,7 +801,7 @@ export class SdBarcodeInput {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uC785\uB825\uAC12\uACFC \uC720\uD6A8\uC131 \uC0C1\uD0DC\uB97C \uCD08\uAE30\uD654\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -785,7 +818,7 @@ export class SdBarcodeInput {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uC720\uD6A8\uC131 \uC0C1\uD0DC\uB9CC \uCD08\uAE30\uD654\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -802,7 +835,7 @@ export class SdBarcodeInput {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uC785\uB825 \uD544\uB4DC\uC5D0 \uD3EC\uCEE4\uC2A4\uB97C \uC774\uB3D9\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             }

package/dist/collection/components/sd-button/sd-button.js

@@ -3,13 +3,21 @@ import { Icons } from "../assets/index";
 import { BUTTON_CONFIG, BUTTON_FOCUS_RING_COLOR, BUTTON_ICON_SIZES, PRESET_BORDER_COLORS, PRESET_TEXT_COLORS, PRESET_ICON_COLORS, PRESET_HOVER_BACKGROUNDS, getPresetName, isButtonName, } from "./sd-button.config";
 const isValidIcon = (icon) => icon != null && icon in Icons;
 export class SdButton {
+    /** 버튼 프리셋 이름 (크기와 색상 조합) */
     name = 'primary_sm';
+    /** 버튼 텍스트 레이블 */
     label = '';
+    /** 레이블 왼쪽에 표시할 아이콘 */
     icon;
+    /** 레이블 오른쪽에 표시할 아이콘 */
     rightIcon;
+    /** 아이콘 전용 버튼일 때 스크린리더용 레이블 */
     ariaLabel = '';
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 네이티브 button type 속성 */
     type = 'button';
+    /** 클릭 시 발생합니다. */
     click;
     hasWarnedMissingAriaLabel = false;
     handleClick = (event) => {
@@ -69,14 +77,14 @@ export class SdButton {
         const validRightIcon = isValidIcon(this.rightIcon) ? this.rightIcon : undefined;
         const iconOnly = !hasLabel && Boolean(validIcon) !== Boolean(validRightIcon);
         const accessibleName = iconOnly && this.ariaLabel.trim() !== '' ? this.ariaLabel : undefined;
-        return (h("button", { key: 'da3228e64ba27430283d55a49d3e13b2112929b6', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type ?? 'button', disabled: this.disabled, "aria-label": accessibleName, style: {
+        return (h("button", { key: 'ea6482b86f91b26cd20ab635c357b655e92c2ec1', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type ?? 'button', disabled: this.disabled, "aria-label": accessibleName, style: {
                 '--sd-button-bg': config.color,
                 '--sd-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
                 '--sd-button-border': PRESET_BORDER_COLORS[preset],
                 '--sd-button-text': PRESET_TEXT_COLORS[preset],
                 '--sd-button-icon': PRESET_ICON_COLORS[preset],
                 '--sd-button-accent': BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, h("span", { key: '22f4dac854314abb3edf3f6d4746057337d2d1c6', class: "sd-button__content" }, validIcon && (h("sd-icon", { key: 'cd88155fa1783071fe6bee390df47daa96133eab', class: "sd-button__icon", name: validIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })), this.label && h("span", { key: '27798d8db1d633ef99572982bddf40fbca415ed7', class: "sd-button__label" }, this.label), validRightIcon && (h("sd-icon", { key: '6393eb128f66a88b7ad1b5f2c1cec5654af07fae', class: "sd-button__icon sd-button__icon--right", name: validRightIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })))));
+            }, onClick: this.handleClick }, h("span", { key: 'fd0cbd15e1edf4dc599e7eb3df3dcb1ddbd4732e', class: "sd-button__content" }, validIcon && (h("sd-icon", { key: '5ace6d85974e1c2ecb0fcf55b0330801f78f094f', class: "sd-button__icon", name: validIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })), this.label && h("span", { key: 'ef1240a6acee55def8244149b0af4e0252be558c', class: "sd-button__label" }, this.label), validRightIcon && (h("sd-icon", { key: '127de568676734d75dd801b9ea46aa35e09b558c', class: "sd-button__icon sd-button__icon--right", name: validRightIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })))));
     }
     static get is() { return "sd-button"; }
     static get originalStyleUrls() {
@@ -110,7 +118,7 @@ export class SdButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBC84\uD2BC \uD504\uB9AC\uC14B \uC774\uB984 (\uD06C\uAE30\uC640 \uC0C9\uC0C1 \uC870\uD569)"
                 },
                 "getter": false,
                 "setter": false,
@@ -130,7 +138,7 @@ export class SdButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBC84\uD2BC \uD14D\uC2A4\uD2B8 \uB808\uC774\uBE14"
                 },
                 "getter": false,
                 "setter": false,
@@ -155,7 +163,7 @@ export class SdButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uC67C\uCABD\uC5D0 \uD45C\uC2DC\uD560 \uC544\uC774\uCF58"
                 },
                 "getter": false,
                 "setter": false,
@@ -179,7 +187,7 @@ export class SdButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uC624\uB978\uCABD\uC5D0 \uD45C\uC2DC\uD560 \uC544\uC774\uCF58"
                 },
                 "getter": false,
                 "setter": false,
@@ -198,7 +206,7 @@ export class SdButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC544\uC774\uCF58 \uC804\uC6A9 \uBC84\uD2BC\uC77C \uB54C \uC2A4\uD06C\uB9B0\uB9AC\uB354\uC6A9 \uB808\uC774\uBE14"
                 },
                 "getter": false,
                 "setter": false,
@@ -218,7 +226,7 @@ export class SdButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBE44\uD65C\uC131 \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -245,7 +253,7 @@ export class SdButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB124\uC774\uD2F0\uBE0C button type \uC18D\uC131"
                 },
                 "getter": false,
                 "setter": false,
@@ -264,7 +272,7 @@ export class SdButton {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD074\uB9AD \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "MouseEvent",

package/dist/collection/components/sd-calendar/sd-calendar.js

@@ -3,13 +3,19 @@ import { today } from "../../utils/date";
 import { useDatePicker } from "../../modules/useDatePicker";
 import { CALENDAR_LAYOUT, WEEK_LABELS } from "./sd-calendar.config";
 export class SdCalendar {
+    /** 선택된 날짜 (YYYY-MM-DD) */
     value = null;
+    /** 선택 가능한 날짜 범위 [시작일, 종료일] (YYYY-MM-DD, 빈 문자열이면 제한 없음) */
     selectable;
+    /** 캘린더에 표시할 이벤트 그룹 목록 */
     events;
+    /** 카드 형태의 그림자 여부 */
     elevated = false;
     currentYear;
     currentMonth;
+    /** 날짜 선택 시 선택된 날짜(YYYY-MM-DD)를 전달합니다. */
     update;
+    /** 월/년 네비게이션 변경 시 현재 보여지는 연·월을 전달합니다. */
     viewChange;
     dateUtil = useDatePicker();
     _eventMapCache;
@@ -173,7 +179,7 @@ export class SdCalendar {
         const eventMap = this.eventMap;
         const legend = this.legendItems;
         const hasEvents = (this.events?.length ?? 0) > 0;
-        return (h("div", { key: 'c8456b5c2b6617cef1aacd140d600458e9b05f32', class: { 'sd-calendar': true, 'sd-calendar--elevated': this.elevated }, style: cssVars }, h("div", { key: '9b73abcc81e28e3f791dcd3a5d1b1284b76c71b3', class: "sd-calendar__header" }, h("div", { key: '89e582eb5c4ad7ee7ea3e4e7d8139a25c32cd09e', class: "sd-calendar__nav-group" }, h("sd-ghost-button", { key: '75b3bb651ed6c840f85b50869d3d074fbdda10d7', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), h("span", { key: '2be9c1dc4e9ab339890a8f066fc416bace8a3d6a', class: "sd-calendar__label" }, this.currentYear), h("sd-ghost-button", { key: 'fe38866bac1c10dc66e0392eb2d9efe7f12ba225', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), h("span", { key: '7552892c7247f6a10aa7cd53dede0e2464e45647', class: "sd-calendar__divider", "aria-hidden": "true" }), h("div", { key: '09a142cb6e71f95c3f9c60be100441b6a5543b00', class: "sd-calendar__nav-group sd-calendar__nav-group-month" }, h("sd-ghost-button", { key: '12f116ed4b1f5dc57a682d1af5ef244f797cb347', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), h("span", { key: '5adfc5a6469fde17d1bea030c84be29fea151601', class: "sd-calendar__label sd-calendar__label-month" }, this.currentMonth, "\uC6D4"), h("sd-ghost-button", { key: '1f1b44b1cd201e0ec45b696dbb70d36f3e81f21c', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), h("div", { key: 'b866d161ea35935cc5ead385c0b30015e9d5838d', class: "sd-calendar__week" }, WEEK_LABELS.map(label => (h("span", { key: label, class: "sd-calendar__week-cell" }, label)))), h("div", { key: 'a63bf0d78122c6c2f668497a3c902d30a8e74c3f', class: "sd-calendar__grid" }, this.cells.map(cell => {
+        return (h("div", { key: '1ff9f894078f4b24d52c738509878ee504e02c6b', class: { 'sd-calendar': true, 'sd-calendar--elevated': this.elevated }, style: cssVars }, h("div", { key: 'a4e894dbf3c808ba1a2a6711997c956c8b4525c0', class: "sd-calendar__header" }, h("div", { key: 'd559c861937fd51cab7e4cc39cfece49bed20037', class: "sd-calendar__nav-group" }, h("sd-ghost-button", { key: '6b793f2a07cc9c26a8b517d7a4d0cc065305a19f', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), h("span", { key: '324fa08a3583543a75cfd6a3cfeb8450586c9265', class: "sd-calendar__label" }, this.currentYear), h("sd-ghost-button", { key: 'd0951fe7bf84f58348e0ad2ed9e89531daa68242', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), h("span", { key: '953a382082f5be65a1df7dab23faae8be1975bfa', class: "sd-calendar__divider", "aria-hidden": "true" }), h("div", { key: 'aa751f69f3864875d4e6f16a816660cb8636281f', class: "sd-calendar__nav-group sd-calendar__nav-group-month" }, h("sd-ghost-button", { key: '7fe05970e9385cf8b744b16abce6a536ba639d8d', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), h("span", { key: '0f528c7bde86f64f482a5a6b433beef2456e5832', class: "sd-calendar__label sd-calendar__label-month" }, this.currentMonth, "\uC6D4"), h("sd-ghost-button", { key: '3ddbb8f64f86fda85e5f8c6963cc4e11a95e8a37', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), h("div", { key: 'de37bc97970b23c49757ff103f62a5ef8c3deb2a', class: "sd-calendar__week" }, WEEK_LABELS.map(label => (h("span", { key: label, class: "sd-calendar__week-cell" }, label)))), h("div", { key: '218d4ff90b67bfcea0fb52984338b5bf486ec6b1', class: "sd-calendar__grid" }, this.cells.map(cell => {
             const isSelected = cell.inCurrentMonth && this.value !== '' && this.value === cell.date;
             const isToday = cell.inCurrentMonth && today === cell.date;
             const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);
@@ -186,8 +192,8 @@ export class SdCalendar {
                     'sd-calendar__day--disabled': isDisabled,
                 }, disabled: !cell.inCurrentMonth || isDisabled, tabindex: !cell.inCurrentMonth ? -1 : undefined, "aria-hidden": !cell.inCurrentMonth ? 'true' : undefined, onClick: () => cell.inCurrentMonth && this.handleDayClick(cell) }, h("span", { class: "sd-calendar__day-circle" }, cell.inCurrentMonth ? cell.day : ''), hasEvents && (h("span", { class: "sd-calendar__dot-row", "aria-hidden": "true" }, dayEvents?.map((ev, i) => (h("span", { key: `${ev.color}|${ev.label}|${i}`, class: "sd-calendar__dot", style: { backgroundColor: ev.color } })))))));
         })), legend.length > 0 && [
-            h("span", { key: '79a0c77b04cc46c5278502e7062c13e3113a8ee2', class: "sd-calendar__divider-bottom", "aria-hidden": "true" }),
-            h("div", { key: '7b87c016d96a48efabcbc3b684a6fea78004f790', class: "sd-calendar__legend" }, legend.map(item => (h("span", { key: `${item.color}|${item.label}`, class: "sd-calendar__legend-item" }, h("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { class: "sd-calendar__legend-label" }, item.label))))),
+            h("span", { key: '713522194a9052e28b970f5eb6ad34941f7b6459', class: "sd-calendar__divider-bottom", "aria-hidden": "true" }),
+            h("div", { key: 'fffe4cf9c14362c14e04be5cab0172c73490137f', class: "sd-calendar__legend" }, legend.map(item => (h("span", { key: `${item.color}|${item.label}`, class: "sd-calendar__legend-item" }, h("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { class: "sd-calendar__legend-label" }, item.label))))),
         ]));
     }
     static get is() { return "sd-calendar"; }
@@ -215,7 +221,7 @@ export class SdCalendar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC120\uD0DD\uB41C \uB0A0\uC9DC (YYYY-MM-DD)"
                 },
                 "getter": false,
                 "setter": false,
@@ -235,7 +241,7 @@ export class SdCalendar {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC120\uD0DD \uAC00\uB2A5\uD55C \uB0A0\uC9DC \uBC94\uC704 [\uC2DC\uC791\uC77C, \uC885\uB8CC\uC77C] (YYYY-MM-DD, \uBE48 \uBB38\uC790\uC5F4\uC774\uBA74 \uC81C\uD55C \uC5C6\uC74C)"
                 },
                 "getter": false,
                 "setter": false
@@ -259,7 +265,7 @@ export class SdCalendar {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCE98\uB9B0\uB354\uC5D0 \uD45C\uC2DC\uD560 \uC774\uBCA4\uD2B8 \uADF8\uB8F9 \uBAA9\uB85D"
                 },
                 "getter": false,
                 "setter": false
@@ -276,7 +282,7 @@ export class SdCalendar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCE74\uB4DC \uD615\uD0DC\uC758 \uADF8\uB9BC\uC790 \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -301,7 +307,7 @@ export class SdCalendar {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB0A0\uC9DC \uC120\uD0DD \uC2DC \uC120\uD0DD\uB41C \uB0A0\uC9DC(YYYY-MM-DD)\uB97C \uC804\uB2EC\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "string",
@@ -316,7 +322,7 @@ export class SdCalendar {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC6D4/\uB144 \uB124\uBE44\uAC8C\uC774\uC158 \uBCC0\uACBD \uC2DC \uD604\uC7AC \uBCF4\uC5EC\uC9C0\uB294 \uC5F0\u00B7\uC6D4\uC744 \uC804\uB2EC\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "{ year: number; month: number }",

package/dist/collection/components/sd-callout/sd-callout.js

@@ -2,7 +2,9 @@ import { h } from "@stencil/core";
 import { CALLOUT_LAYOUT, CALLOUT_TYPE_CONFIG, CALLOUT_TYPOGRAPHY, DANGER_TITLE_LABEL, TYPE_ICON, } from "./sd-callout.config";
 import { sanitizeInlineHtml } from "../../utils/html/sanitize-inline-html";
 export class SdCallout {
+    /** 콜아웃 타입 (색상·아이콘 조합 결정) */
     type = 'default';
+    /** 표시할 메시지 목록 (문자열 배열로 중첩 리스트 표현 가능) */
     message = [];
     get calloutStyle() {
         const typeConfig = CALLOUT_TYPE_CONFIG[this.type] ?? CALLOUT_TYPE_CONFIG.default;
@@ -49,7 +51,7 @@ export class SdCallout {
     }
     render() {
         const showTitle = this.type === 'danger';
-        return (h("div", { key: '545b90999ad57577156a214468102ae5090e6f3e', class: "sd-callout", style: this.calloutStyle, role: "note" }, showTitle && this.renderTitle(), h("div", { key: '14e021beb9b1c9deb63490e17baf9bb72caefe0d', class: "sd-callout__body" }, this.renderBody())));
+        return (h("div", { key: 'd608e8393a52dec8074ae6e8c4c80f59eb88891f', class: "sd-callout", style: this.calloutStyle, role: "note" }, showTitle && this.renderTitle(), h("div", { key: '9950ae86dab1f76b7009b89b3dcb91ebfcff978b', class: "sd-callout__body" }, this.renderBody())));
     }
     static get is() { return "sd-callout"; }
     static get originalStyleUrls() {
@@ -83,7 +85,7 @@ export class SdCallout {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCF5C\uC544\uC6C3 \uD0C0\uC785 (\uC0C9\uC0C1\u00B7\uC544\uC774\uCF58 \uC870\uD569 \uACB0\uC815)"
                 },
                 "getter": false,
                 "setter": false,
@@ -103,7 +105,7 @@ export class SdCallout {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD45C\uC2DC\uD560 \uBA54\uC2DC\uC9C0 \uBAA9\uB85D (\uBB38\uC790\uC5F4 \uBC30\uC5F4\uB85C \uC911\uCCA9 \uB9AC\uC2A4\uD2B8 \uD45C\uD604 \uAC00\uB2A5)"
                 },
                 "getter": false,
                 "setter": false,