@sellmate/design-system 1.20.1 → 1.22.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();
     }
@@ -189,7 +222,9 @@ export class SdChipInput {
             }
             if (event.key === 'Enter' && this.activeSuggestionIndex >= 0) {
                 event.preventDefault();
-                this.addChip(activeItems[this.activeSuggestionIndex]);
+                const selectedItem = activeItems[this.activeSuggestionIndex];
+                if (!(this.internalValues ?? []).includes(selectedItem))
+                    this.addChip(selectedItem);
                 return;
             }
         }
@@ -249,6 +284,10 @@ export class SdChipInput {
     };
     handleContainerClick = () => {
         if (!this.disabled) {
+            // 이미 포커스된 상태에서 재클릭 시 handleFocus가 다시 실행되지 않으므로
+            // suppress 플래그를 여기서 직접 해제한다.
+            this.suppressRecommendations = false;
+            this.suppressSuggestions = false;
             this.inputEl?.focus();
         }
     };
@@ -369,6 +408,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 +432,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: 'b72e33b6f204ebdf6791cc2f20d01bbb74a4203a', 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: '499114d06f4d375fed5575edd394c501f4d72691', 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: '5910a2d0e0e9cbc472baa1d9c9c3fa07e89fbdcb', 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,20 +440,38 @@ 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: {
-                '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
-                ? {
-                    ...suggestionItemStyle,
-                    background: CHIP_INPUT_SUGGESTIONS.itemBgHover,
-                    color: CHIP_INPUT_SUGGESTIONS.itemColorHover,
-                    fontWeight: CHIP_INPUT_SUGGESTIONS.itemFontWeightSelected,
-                }
-                : suggestionItemStyle, onMouseDown: e => {
-                e.preventDefault();
-                this.addChip(item);
-            } }, item)))))))));
+                    : '' }, h("input", { key: '3c1e75d691332b67a500a2d17030d5db191bdeb9', 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 && (
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        h("div", { key: '4aa212280a928b88b85dffa3d453ea8f563e1fe0', class: "sd-chip-input__reset",
+            // 리셋 버튼 클릭 시 input blur → portal unmount → refocus → 새 portal mount로
+            // 두 wrapper가 body에 잠깐 겹치는 타이밍 이슈를 방지한다.
+            onMouseDown: e => e.preventDefault() }, this.inputValue === '' && h("span", { key: 'f7faa45b57d8e38dda8cc98119357f92d914fee4', class: "sd-chip-input__divider" }), this.maxCount != null && (h("span", { key: 'dfde4ea82558414614fb2d817f7bfa1fb5d4bf5f', class: "sd-chip-input__max-count" }, "\uCD5C\uB300 ", this.maxCount, "\uAC1C")), this.useReset && this.internalValues.length > 0 && (h("sd-text-link", { key: '9b43c82c1a5d425e5b187e92b4259e7d919491e3', 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: 'aa205aacbbafcd8c3d9855268637e6da956d4a74', open: showDropdown, parentRef: this.chipInputRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, h("div", { key: '26814734f202da3a13e695ae1d0c913ea430b888', class: "sd-chip-input__suggestions", role: "listbox", style: suggestionBoxStyle }, isDropdownLoading && (h("div", { key: 'df80d11b79f67dc6cfe6503b258528efa3752265', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), dropdownItems.map((item, i) => {
+            const isSelected = (this.internalValues ?? []).includes(item);
+            const isActive = i === this.activeSuggestionIndex && !isSelected;
+            return (h("div", { key: item, class: {
+                    'sd-chip-input__suggestion-item': true,
+                    'sd-chip-input__suggestion-item--active': isActive,
+                    'sd-chip-input__suggestion-item--selected': isSelected,
+                }, role: "option", tabIndex: -1, "aria-selected": isSelected || isActive, "aria-disabled": isSelected ? 'true' : undefined, style: isSelected
+                    ? {
+                        ...suggestionItemStyle,
+                        color: '#0075FF',
+                        fontWeight: CHIP_INPUT_SUGGESTIONS.itemFontWeightSelected,
+                        cursor: 'default',
+                    }
+                    : isActive
+                        ? {
+                            ...suggestionItemStyle,
+                            background: CHIP_INPUT_SUGGESTIONS.itemBgHover,
+                            color: CHIP_INPUT_SUGGESTIONS.itemColorHover,
+                            fontWeight: CHIP_INPUT_SUGGESTIONS.itemFontWeightSelected,
+                        }
+                        : suggestionItemStyle, onMouseDown: e => {
+                    e.preventDefault();
+                    if (!isSelected)
+                        this.addChip(item);
+                } }, h("span", { style: { flex: '1' } }, item), isSelected && (h("sd-icon", { name: "check", size: "12", style: { color: '#0075FF', flexShrink: '0' } }))));
+        })))))));
     }
     static get is() { return "sd-chip-input"; }
     static get originalStyleUrls() {
@@ -440,7 +498,7 @@ export class SdChipInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCE69 \uAC12 \uBAA9\uB85D"
                 },
                 "getter": false,
                 "setter": false,
@@ -458,7 +516,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 +534,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 +559,7 @@ export class SdChipInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC785\uB825 \uD544\uB4DC \uD06C\uAE30"
                 },
                 "getter": false,
                 "setter": false,
@@ -521,7 +579,7 @@ export class SdChipInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBE44\uD65C\uC131 \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -541,7 +599,7 @@ export class SdChipInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC785\uB825 placeholder"
                 },
                 "getter": false,
                 "setter": false,
@@ -561,7 +619,7 @@ export class SdChipInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD3FC \uC5F0\uB3D9\uC6A9 name \uC18D\uC131"
                 },
                 "getter": false,
                 "setter": false,
@@ -588,7 +646,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 +664,7 @@ export class SdChipInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC5D0\uB7EC \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -626,7 +684,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 +704,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 +723,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 +742,7 @@ export class SdChipInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC790\uB3D9\uC644\uC131 \uD6C4\uBCF4 \uBAA9\uB85D"
                 },
                 "getter": false,
                 "setter": false,
@@ -702,7 +760,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 +780,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 +798,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 +818,7 @@ export class SdChipInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -780,7 +838,7 @@ export class SdChipInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uB108\uBE44"
                 },
                 "getter": false,
                 "setter": false,
@@ -800,7 +858,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 +878,7 @@ export class SdChipInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC5D0\uB7EC \uBA54\uC2DC\uC9C0"
                 },
                 "getter": false,
                 "setter": false,
@@ -840,7 +898,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 +918,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 +942,7 @@ export class SdChipInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uC601\uC5ED \uC544\uC774\uCF58"
                 },
                 "getter": false,
                 "setter": false,
@@ -902,7 +960,7 @@ export class SdChipInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uD234\uD301 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -929,7 +987,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 +1016,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 +1031,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 +1046,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 +1061,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 +1085,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 +1102,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 +1119,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 +1136,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,