@sellmate/design-system 1.20.0 → 1.21.0

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

@@ -5,31 +5,56 @@ import { CHIP_LAYOUT, CHIP_COLORS, CHIP_TYPOGRAPHY } from "../sd-chip/sd-chip.co
 export class SdChipInput {
     static SUGGESTIONS_VIEWPORT_PADDING = 8;
     host;
+    /** 칩 값 목록 */
     values = [];
+    /** 칩별 에러 상태 목록 또는 값으로 에러 여부를 반환하는 함수 */
     errors = [];
+    /** 칩별 비활성 상태 목록 또는 값으로 비활성 여부를 반환하는 함수 */
     disabledChips = [];
+    /** 입력 필드 크기 */
     size = 'sm';
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 입력 placeholder */
     placeholder = '입력해 주세요.';
+    /** 폼 연동용 name 속성 */
     name = nanoid();
+    /** 유효성 검사 규칙 목록 */
     rules = [];
+    /** 에러 상태 여부 */
     error = false;
+    /** 입력 초기화 버튼 표시 여부 */
     useReset = false;
+    /** 최대 입력 가능한 칩 개수 (없으면 제한 없음) */
     maxCount;
+    /** 중복 에러 메시지에 표시할 항목 이름 (없으면 기본 메시지 사용) */
     duplicateLabel;
+    /** 자동완성 후보 목록 */
     suggestions = [];
+    /** 자동완성 목록 로딩 중 여부 */
     loadingSuggestions = false;
+    /** 추천 항목 목록 (입력값이 없을 때 표시) */
     recommendedItems = [];
+    /** 추천 항목 로딩 중 여부 */
     loadingRecommendedItems = false;
     // sd-field props
+    /** 레이블 텍스트 */
     label = '';
+    /** 레이블 너비 */
     labelWidth = '';
+    /** 필드 하단 힌트 텍스트 */
     hint = '';
+    /** 에러 메시지 */
     errorMessage = '';
+    /** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
     width = '';
+    /** 필드 상태 (없으면 rules 결과로 자동 결정) */
     status;
+    /** 레이블 영역 아이콘 */
     icon = undefined;
+    /** 레이블 툴팁 텍스트 */
     labelTooltip = '';
+    /** 레이블 툴팁 상세 옵션 */
     labelTooltipProps = null;
     internalValues = [];
     internalErrors = [];
@@ -96,19 +121,27 @@ export class SdChipInput {
         }
         return this.disabledChips?.[index] ?? false;
     }
+    /** 칩 목록 변경 시 전체 값 배열을 전달합니다. */
     update;
+    /** 입력 필드 포커스 진입 시 발생합니다. */
     focusEvent;
+    /** 입력 필드 포커스 이탈 시 발생합니다. */
     blurEvent;
+    /** 입력값 변경 시 현재 입력 중인 문자열을 전달합니다. */
     inputEvent;
+    /** 유효성 검사를 실행합니다. */
     async sdValidate() {
         return this.formField?.sdValidate();
     }
+    /** 값과 유효성 상태를 초기화합니다. */
     async sdReset() {
         return this.formField?.sdReset();
     }
+    /** 유효성 상태만 초기화합니다. */
     async sdResetValidate() {
         return this.formField?.sdResetValidation();
     }
+    /** 입력 필드에 포커스를 이동합니다. */
     async sdFocus() {
         return this.formField?.sdFocus();
     }
@@ -369,6 +402,7 @@ export class SdChipInput {
         };
         const suggestionItemStyle = {
             display: 'flex',
+            flexShrink: '0',
             alignItems: 'center',
             gap: CHIP_INPUT_SUGGESTIONS.itemGap,
             padding: `${CHIP_INPUT_SUGGESTIONS.itemPaddingY} ${CHIP_INPUT_SUGGESTIONS.itemPaddingRight} ` +
@@ -392,7 +426,7 @@ export class SdChipInput {
             fontFamily: CHIP_INPUT_SUGGESTIONS.itemFontFamily,
             color: CHIP_INPUT_SUGGESTIONS.emptyColor,
         };
-        return (h("sd-field", { key: 'ee88b5c82466b6470fcf6bd7c55b6269b81b04be', name: this.name, label: this.label, labelWidth: this.labelWidth, hint: this.hint, errorMessage: this.errorMessage, rules: [this.duplicateRule, ...(this.rules ?? [])], error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, width: this.width, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: 'e040d339e12ce0b038d195a829d4fc1795f12155', class: "sd-chip-input", ref: el => (this.chipInputRef = el), onClick: this.handleContainerClick }, (this.internalValues ?? []).map((value, i) => (h("sd-chip", { key: i, value: value, error: this.getChipError(i), disabled: this.getChipDisabled(i), editable: false, onSdRemove: () => this.handleChipRemove(i) }))), !isMaxReached && (h("div", { key: '37b6e51a5e1b5b5b37651cba797739ac74770d8a', class: {
+        return (h("sd-field", { key: '7135f3f1fe7c76276bcd780ba2cfdf391925a57b', name: this.name, label: this.label, labelWidth: this.labelWidth, hint: this.hint, errorMessage: this.errorMessage, rules: [this.duplicateRule, ...(this.rules ?? [])], error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, width: this.width, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: '8566ae7bc3bedaf6be95f29267587c49c090e73f', class: "sd-chip-input", ref: el => (this.chipInputRef = el), onClick: this.handleContainerClick }, (this.internalValues ?? []).map((value, i) => (h("sd-chip", { key: i, value: value, error: this.getChipError(i), disabled: this.getChipDisabled(i), editable: false, onSdRemove: () => this.handleChipRemove(i) }))), !isMaxReached && (h("div", { key: '00d9946c93d2e961466fa8baf617fc4ddc12d701', class: {
                 'sd-chip-input__field': true,
                 'sd-chip-input__field--filled': this.inputValue !== '',
                 'sd-chip-input__field--empty': this.inputValue === '' && this.internalValues.length > 0 && !this.focused,
@@ -400,7 +434,7 @@ export class SdChipInput {
                 ? this.inputValue
                 : this.internalValues.length === 0
                     ? this.placeholder
-                    : '' }, h("input", { key: 'f628f9dee70e60435afb8d01ed41830850bebb44', ref: el => (this.inputEl = el), class: "sd-chip-input__input", placeholder: this.internalValues.length === 0 ? this.placeholder : '', disabled: this.disabled, size: 1, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }))), showResetArea && (h("div", { key: 'd154fb5ccd1875ec6beee462a3d93b7e4480f384', class: "sd-chip-input__reset" }, this.inputValue === '' && h("span", { key: 'ae84a0b4c83ca26e3b58b48d32469bd46be29f78', class: "sd-chip-input__divider" }), this.maxCount != null && (h("span", { key: 'e5790a98cbe3e07a395ddf8b5d286ec48efcabb2', class: "sd-chip-input__max-count" }, "\uCD5C\uB300 ", this.maxCount, "\uAC1C")), this.useReset && this.internalValues.length > 0 && (h("sd-text-link", { key: '7ed1d61c9518f0cf2bdf2a6be62effb7bc90b8ab', icon: "reset", iconColor: CHIP_INPUT_RESET.iconColor, label: "\uC785\uB825 \uCD08\uAE30\uD654", underline: true, disabled: this.disabled, style: { '--sd-text-link-color': CHIP_INPUT_RESET.labelColor }, onSdClick: this.handleResetInput })))), showDropdown && (h("sd-portal", { key: '45d65cf1c364e4c3f46770f98a6c7597f6aaeb01', open: showDropdown, parentRef: this.chipInputRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, h("div", { key: '055ea7aeb71f7a4640b3ac7406f435c3f3b1d50c', class: "sd-chip-input__suggestions", role: "listbox", style: suggestionBoxStyle }, isDropdownLoading && (h("div", { key: 'fc56e57fb5c62fa39cb7b13d51fe74baca539647', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), dropdownItems.map((item, i) => (h("div", { key: item, class: {
+                    : '' }, h("input", { key: '2845394a5eaec2d5f37876a0e8938fa9d3f38263', ref: el => (this.inputEl = el), class: "sd-chip-input__input", placeholder: this.internalValues.length === 0 ? this.placeholder : '', disabled: this.disabled, size: 1, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }))), showResetArea && (h("div", { key: '7cec3884a4cace3d688e80006d6240d321ac60f3', class: "sd-chip-input__reset" }, this.inputValue === '' && h("span", { key: '761539e242437841a2703d95903f9d6b5fe3d69f', class: "sd-chip-input__divider" }), this.maxCount != null && (h("span", { key: '1b448973ba3573c94ae09b74cd24720c8ea011d3', class: "sd-chip-input__max-count" }, "\uCD5C\uB300 ", this.maxCount, "\uAC1C")), this.useReset && this.internalValues.length > 0 && (h("sd-text-link", { key: '90d7582f35b8e7a8ee3c1dba717fa87c13c1de19', icon: "reset", iconColor: CHIP_INPUT_RESET.iconColor, label: "\uC785\uB825 \uCD08\uAE30\uD654", underline: true, disabled: this.disabled, style: { '--sd-text-link-color': CHIP_INPUT_RESET.labelColor }, onSdClick: this.handleResetInput })))), showDropdown && (h("sd-portal", { key: '9495c87a4916829fe955f054a8c97d2b3fa04914', open: showDropdown, parentRef: this.chipInputRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, h("div", { key: 'ac4afd8511316f0b4b957c312a051b02fc72f20e', class: "sd-chip-input__suggestions", role: "listbox", style: suggestionBoxStyle }, isDropdownLoading && (h("div", { key: '3b6855a7ad2ef48415160544a19014d59ca38ec1', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), dropdownItems.map((item, i) => (h("div", { key: item, class: {
                 'sd-chip-input__suggestion-item': true,
                 'sd-chip-input__suggestion-item--active': i === this.activeSuggestionIndex,
             }, role: "option", tabIndex: -1, "aria-selected": i === this.activeSuggestionIndex, style: i === this.activeSuggestionIndex
@@ -440,7 +474,7 @@ export class SdChipInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCE69 \uAC12 \uBAA9\uB85D"
                 },
                 "getter": false,
                 "setter": false,
@@ -458,7 +492,7 @@ export class SdChipInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCE69\uBCC4 \uC5D0\uB7EC \uC0C1\uD0DC \uBAA9\uB85D \uB610\uB294 \uAC12\uC73C\uB85C \uC5D0\uB7EC \uC5EC\uBD80\uB97C \uBC18\uD658\uD558\uB294 \uD568\uC218"
                 },
                 "getter": false,
                 "setter": false,
@@ -476,7 +510,7 @@ export class SdChipInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCE69\uBCC4 \uBE44\uD65C\uC131 \uC0C1\uD0DC \uBAA9\uB85D \uB610\uB294 \uAC12\uC73C\uB85C \uBE44\uD65C\uC131 \uC5EC\uBD80\uB97C \uBC18\uD658\uD558\uB294 \uD568\uC218"
                 },
                 "getter": false,
                 "setter": false,
@@ -501,7 +535,7 @@ export class SdChipInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC785\uB825 \uD544\uB4DC \uD06C\uAE30"
                 },
                 "getter": false,
                 "setter": false,
@@ -521,7 +555,7 @@ export class SdChipInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBE44\uD65C\uC131 \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -541,7 +575,7 @@ export class SdChipInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC785\uB825 placeholder"
                 },
                 "getter": false,
                 "setter": false,
@@ -561,7 +595,7 @@ export class SdChipInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD3FC \uC5F0\uB3D9\uC6A9 name \uC18D\uC131"
                 },
                 "getter": false,
                 "setter": false,
@@ -588,7 +622,7 @@ export class SdChipInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC720\uD6A8\uC131 \uAC80\uC0AC \uADDC\uCE59 \uBAA9\uB85D"
                 },
                 "getter": false,
                 "setter": false,
@@ -606,7 +640,7 @@ export class SdChipInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC5D0\uB7EC \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -626,7 +660,7 @@ export class SdChipInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC785\uB825 \uCD08\uAE30\uD654 \uBC84\uD2BC \uD45C\uC2DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -646,7 +680,7 @@ export class SdChipInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCD5C\uB300 \uC785\uB825 \uAC00\uB2A5\uD55C \uCE69 \uAC1C\uC218 (\uC5C6\uC73C\uBA74 \uC81C\uD55C \uC5C6\uC74C)"
                 },
                 "getter": false,
                 "setter": false,
@@ -665,7 +699,7 @@ export class SdChipInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC911\uBCF5 \uC5D0\uB7EC \uBA54\uC2DC\uC9C0\uC5D0 \uD45C\uC2DC\uD560 \uD56D\uBAA9 \uC774\uB984 (\uC5C6\uC73C\uBA74 \uAE30\uBCF8 \uBA54\uC2DC\uC9C0 \uC0AC\uC6A9)"
                 },
                 "getter": false,
                 "setter": false,
@@ -684,7 +718,7 @@ export class SdChipInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC790\uB3D9\uC644\uC131 \uD6C4\uBCF4 \uBAA9\uB85D"
                 },
                 "getter": false,
                 "setter": false,
@@ -702,7 +736,7 @@ export class SdChipInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC790\uB3D9\uC644\uC131 \uBAA9\uB85D \uB85C\uB529 \uC911 \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -722,7 +756,7 @@ export class SdChipInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCD94\uCC9C \uD56D\uBAA9 \uBAA9\uB85D (\uC785\uB825\uAC12\uC774 \uC5C6\uC744 \uB54C \uD45C\uC2DC)"
                 },
                 "getter": false,
                 "setter": false,
@@ -740,7 +774,7 @@ export class SdChipInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCD94\uCC9C \uD56D\uBAA9 \uB85C\uB529 \uC911 \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -760,7 +794,7 @@ export class SdChipInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -780,7 +814,7 @@ export class SdChipInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uB108\uBE44"
                 },
                 "getter": false,
                 "setter": false,
@@ -800,7 +834,7 @@ export class SdChipInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD544\uB4DC \uD558\uB2E8 \uD78C\uD2B8 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -820,7 +854,7 @@ export class SdChipInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC5D0\uB7EC \uBA54\uC2DC\uC9C0"
                 },
                 "getter": false,
                 "setter": false,
@@ -840,7 +874,7 @@ export class SdChipInput {
                 "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,
@@ -860,7 +894,7 @@ export class SdChipInput {
                 "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,
@@ -884,7 +918,7 @@ export class SdChipInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uC601\uC5ED \uC544\uC774\uCF58"
                 },
                 "getter": false,
                 "setter": false,
@@ -902,7 +936,7 @@ export class SdChipInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uD234\uD301 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -929,7 +963,7 @@ export class SdChipInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uD234\uD301 \uC0C1\uC138 \uC635\uC158"
                 },
                 "getter": false,
                 "setter": false,
@@ -958,7 +992,7 @@ export class SdChipInput {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCE69 \uBAA9\uB85D \uBCC0\uACBD \uC2DC \uC804\uCCB4 \uAC12 \uBC30\uC5F4\uC744 \uC804\uB2EC\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "string[]",
@@ -973,7 +1007,7 @@ export class SdChipInput {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC785\uB825 \uD544\uB4DC \uD3EC\uCEE4\uC2A4 \uC9C4\uC785 \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "void",
@@ -988,7 +1022,7 @@ export class SdChipInput {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC785\uB825 \uD544\uB4DC \uD3EC\uCEE4\uC2A4 \uC774\uD0C8 \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "void",
@@ -1003,7 +1037,7 @@ export class SdChipInput {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC785\uB825\uAC12 \uBCC0\uACBD \uC2DC \uD604\uC7AC \uC785\uB825 \uC911\uC778 \uBB38\uC790\uC5F4\uC744 \uC804\uB2EC\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "string",
@@ -1027,7 +1061,7 @@ export class SdChipInput {
                     "return": "Promise<boolean | undefined>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uC720\uD6A8\uC131 \uAC80\uC0AC\uB97C \uC2E4\uD589\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -1044,7 +1078,7 @@ export class SdChipInput {
                     "return": "Promise<void | undefined>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uAC12\uACFC \uC720\uD6A8\uC131 \uC0C1\uD0DC\uB97C \uCD08\uAE30\uD654\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -1061,7 +1095,7 @@ export class SdChipInput {
                     "return": "Promise<void | undefined>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uC720\uD6A8\uC131 \uC0C1\uD0DC\uB9CC \uCD08\uAE30\uD654\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -1078,7 +1112,7 @@ export class SdChipInput {
                     "return": "Promise<void | undefined>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uC785\uB825 \uD544\uB4DC\uC5D0 \uD3EC\uCEE4\uC2A4\uB97C \uC774\uB3D9\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             }

package/dist/collection/components/sd-circle-progress/sd-circle-progress.js

@@ -1,9 +1,13 @@
 import { Host, h } from "@stencil/core";
 import { CIRCLE_PROGRESS_CIRCUMFERENCE, CIRCLE_PROGRESS_COLOR_MAP, CIRCLE_PROGRESS_LABEL_COLOR, CIRCLE_PROGRESS_PERCENT_ZERO_COLOR, CIRCLE_PROGRESS_RADIUS, CIRCLE_PROGRESS_STROKE_WIDTH, CIRCLE_PROGRESS_VIEWBOX_SIZE, } from "./sd-circle-progress.config";
 export class SdCircleProgress {
+    /** 불확정 상태 여부 (true면 value 무시하고 스피너처럼 애니메이션) */
     indeterminate = false;
+    /** 진행률 (0~100) */
     value = 0;
+    /** 색상 테마 */
     type = 'primary';
+    /** 원 하단에 표시할 레이블 텍스트 */
     label;
     get clampedValue() {
         if (!Number.isFinite(this.value))
@@ -27,7 +31,7 @@ export class SdCircleProgress {
         }
         const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
         const showPercent = !this.indeterminate;
-        return (h(Host, { key: 'b8dc57144fcab41a7dce8f9aff9bec4609290a8e', style: hostStyle }, h("svg", { key: '2f38f745684057e2b568da3cdbb8a940125fa920', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: 'e829f78dddbf5fb08e23b5774fe653c0019eedfd', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: '4643ac0edf25a12660791d87acebbecd8a5c2ead', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (h("span", { key: '1ccaad0864e44d09902201bde466b7867c51646f', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: '0e26d97267552ef75dcc30f94392cbc733fee636', class: "sd-circle-progress__label" }, this.label)));
+        return (h(Host, { key: '1af8807d6ce19c4326e67ae55bd40620b83e9435', style: hostStyle }, h("svg", { key: '21c2c5898ddf6f78b03964f3365e82382f90ce48', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '1d9b2e95f767008af2a5d836f16e6e47e751677a', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: '1c8f4a5b1ae8f643debf68452317d0bcc0b4ab36', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (h("span", { key: '1b15cdd56b3ac0d254d4a5304f40d3c5b1710b8d', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: 'e830db48529d87ddf788834d8731a576582662af', class: "sd-circle-progress__label" }, this.label)));
     }
     static get is() { return "sd-circle-progress"; }
     static get originalStyleUrls() {
@@ -54,7 +58,7 @@ export class SdCircleProgress {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBD88\uD655\uC815 \uC0C1\uD0DC \uC5EC\uBD80 (true\uBA74 value \uBB34\uC2DC\uD558\uACE0 \uC2A4\uD53C\uB108\uCC98\uB7FC \uC560\uB2C8\uBA54\uC774\uC158)"
                 },
                 "getter": false,
                 "setter": false,
@@ -74,7 +78,7 @@ export class SdCircleProgress {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC9C4\uD589\uB960 (0~100)"
                 },
                 "getter": false,
                 "setter": false,
@@ -101,7 +105,7 @@ export class SdCircleProgress {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC0C9\uC0C1 \uD14C\uB9C8"
                 },
                 "getter": false,
                 "setter": false,
@@ -121,7 +125,7 @@ export class SdCircleProgress {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC6D0 \uD558\uB2E8\uC5D0 \uD45C\uC2DC\uD560 \uB808\uC774\uBE14 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/sd-confirm-modal/sd-confirm-modal.js

@@ -6,20 +6,35 @@ export class SdConfirmModal {
     hasSlottedContent = false;
     customContentRef;
     slotObserver;
+    /** 모달 타입 (아이콘·버튼 색상 결정) */
     type = 'positive';
+    /** 모달 제목 */
     modalTitle = '';
+    /** 제목 엘리먼트에 추가할 클래스 */
     titleClass = '';
+    /** 콘텐츠 박스 상단 메시지 목록 */
     topMessage = [];
+    /** 콘텐츠 박스 하단 메시지 목록 */
     bottomMessage = [];
+    /** 확인 버튼 프리셋 (없으면 type에 따라 자동 결정) */
     mainButtonName;
+    /** 확인 버튼 레이블 */
     mainButtonLabel = '확인';
+    /** 취소 버튼 레이블 (없으면 취소 버튼 미표시) */
     subButtonLabel = '';
+    /** 콘텐츠 박스에 표시할 태그 프리셋 */
     tagPreset = 'square_sm_grey';
+    /** 콘텐츠 박스에 표시할 태그 레이블 */
     tagLabel = '';
+    /** 콘텐츠 박스에 표시할 텍스트 (tagLabel 없을 때 사용) */
     slotLabel = '';
+    /** 콘텐츠 박스에 직접 삽입할 HTMLElement */
     tagContents;
+    /** 닫기 버튼 클릭 시 발생합니다. */
     close;
+    /** 취소 버튼 클릭 시 발생합니다. */
     cancel;
+    /** 확인 버튼 클릭 시 발생합니다. */
     ok;
     componentWillLoad() {
         this.syncHasSlottedContent();
@@ -73,9 +88,9 @@ export class SdConfirmModal {
         const type = this.resolvedType;
         const iconName = CONFIRM_MODAL_ICON_MAP[type];
         const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
-        return (h("div", { key: '689c6d50f52e1a4c5b8f501fcc1e14f0da42fcfc', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: 'fc3aedaa2b6aa3b95b9c0ce1e766df69af86c82f', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '4560ad7ee0d8929221a47b6c1b00cac04c7b387a', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: '8689d86f85c72a9f36e94f083842fc3354d3d82c', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: '5828e937b3b1d3f34c389e73a3d953388dd30cd0', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '0f64cda9195807dbf637a463ba2bc8acc8c1ff3a', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showContentBox && (h("div", { key: 'a090330cab2dbbc99127e616f3e50420bd44b9e4', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        return (h("div", { key: '26270c4ca645f0e7e245b4bd40423bcf09029e22', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: '672b73221f8638eff70c3074614fcc90b489702e', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '895dda6ba69d41f33f9465fb9db28739da28d2e6', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: 'ace6b9da4421c28e2bb828c60cae1c1cc7547f9a', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: '3370fe954c33f8ce6a643fcc9b19f299682b43e8', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '6a6bc182c638e909a821353c188d2ef558452e17', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showContentBox && (h("div", { key: 'dba37f4ab114f3641a9f287d123fb7f94e49c00a', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
                 this.customContentRef = el;
-            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (h("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel })), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: 'a665a0ea56685496adf7c306b4a940762a8a2b3a', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), h("div", { key: '0ad69928a260ed78edd7606f89790e6afa6b2d76', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: '1f835e091b4d96cb6c95dbda88d93ce86828da2c', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: '8e3cb23cb7207e402543b009b49d23a50521db24', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
+            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (h("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel })), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: 'ed29da73d968017c44cd61540139fac24592ea70', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), h("div", { key: '608287c021f4191dcea0a0b5798381cbc8742170', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: 'a67c309617c6e1f30aa9167587e8cbb9fb961482', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: '3c1a698a8276e2924f62cf1c7e472bd34ac581a1', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
     }
     static get is() { return "sd-confirm-modal"; }
     static get originalStyleUrls() {
@@ -109,7 +124,7 @@ export class SdConfirmModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBAA8\uB2EC \uD0C0\uC785 (\uC544\uC774\uCF58\u00B7\uBC84\uD2BC \uC0C9\uC0C1 \uACB0\uC815)"
                 },
                 "getter": false,
                 "setter": false,
@@ -129,7 +144,7 @@ export class SdConfirmModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBAA8\uB2EC \uC81C\uBAA9"
                 },
                 "getter": false,
                 "setter": false,
@@ -149,7 +164,7 @@ export class SdConfirmModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC81C\uBAA9 \uC5D8\uB9AC\uBA3C\uD2B8\uC5D0 \uCD94\uAC00\uD560 \uD074\uB798\uC2A4"
                 },
                 "getter": false,
                 "setter": false,
@@ -169,7 +184,7 @@ export class SdConfirmModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCF58\uD150\uCE20 \uBC15\uC2A4 \uC0C1\uB2E8 \uBA54\uC2DC\uC9C0 \uBAA9\uB85D"
                 },
                 "getter": false,
                 "setter": false,
@@ -187,7 +202,7 @@ export class SdConfirmModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCF58\uD150\uCE20 \uBC15\uC2A4 \uD558\uB2E8 \uBA54\uC2DC\uC9C0 \uBAA9\uB85D"
                 },
                 "getter": false,
                 "setter": false,
@@ -212,7 +227,7 @@ export class SdConfirmModal {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD655\uC778 \uBC84\uD2BC \uD504\uB9AC\uC14B (\uC5C6\uC73C\uBA74 type\uC5D0 \uB530\uB77C \uC790\uB3D9 \uACB0\uC815)"
                 },
                 "getter": false,
                 "setter": false,
@@ -231,7 +246,7 @@ export class SdConfirmModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD655\uC778 \uBC84\uD2BC \uB808\uC774\uBE14"
                 },
                 "getter": false,
                 "setter": false,
@@ -251,7 +266,7 @@ export class SdConfirmModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCDE8\uC18C \uBC84\uD2BC \uB808\uC774\uBE14 (\uC5C6\uC73C\uBA74 \uCDE8\uC18C \uBC84\uD2BC \uBBF8\uD45C\uC2DC)"
                 },
                 "getter": false,
                 "setter": false,
@@ -278,7 +293,7 @@ export class SdConfirmModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCF58\uD150\uCE20 \uBC15\uC2A4\uC5D0 \uD45C\uC2DC\uD560 \uD0DC\uADF8 \uD504\uB9AC\uC14B"
                 },
                 "getter": false,
                 "setter": false,
@@ -298,7 +313,7 @@ export class SdConfirmModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCF58\uD150\uCE20 \uBC15\uC2A4\uC5D0 \uD45C\uC2DC\uD560 \uD0DC\uADF8 \uB808\uC774\uBE14"
                 },
                 "getter": false,
                 "setter": false,
@@ -318,7 +333,7 @@ export class SdConfirmModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCF58\uD150\uCE20 \uBC15\uC2A4\uC5D0 \uD45C\uC2DC\uD560 \uD14D\uC2A4\uD2B8 (tagLabel \uC5C6\uC744 \uB54C \uC0AC\uC6A9)"
                 },
                 "getter": false,
                 "setter": false,
@@ -343,7 +358,7 @@ export class SdConfirmModal {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCF58\uD150\uCE20 \uBC15\uC2A4\uC5D0 \uC9C1\uC811 \uC0BD\uC785\uD560 HTMLElement"
                 },
                 "getter": false,
                 "setter": false
@@ -364,7 +379,7 @@ export class SdConfirmModal {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB2EB\uAE30 \uBC84\uD2BC \uD074\uB9AD \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "void",
@@ -379,7 +394,7 @@ export class SdConfirmModal {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCDE8\uC18C \uBC84\uD2BC \uD074\uB9AD \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "void",
@@ -394,7 +409,7 @@ export class SdConfirmModal {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD655\uC778 \uBC84\uD2BC \uD074\uB9AD \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "void",