@sellmate/design-system 1.20.0 → 1.21.0

package/dist/cjs/sd-chip-input.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 var index$1 = require('./index-BUvXpPc3.js');
 var system = require('./system-MjrAugX-.js');
 var component_listItem = require('./component.listItem-Bnh0r_CA.js');
@@ -105,7 +105,7 @@ const CHIP_INPUT_SUGGESTIONS = {
     emptyLineHeight: '20px',
 };
 
-const sdChipInputCss = () => `sd-chip-input{display:inline-flex}sd-chip-input .sd-chip-input{position:relative;width:100%;isolation:isolate;min-height:var(--sd-chip-input-min-height);display:flex;flex-flow:row wrap;align-items:center;gap:var(--sd-chip-input-chip-gap);padding:var(--sd-chip-input-padding-y) var(--sd-chip-input-padding-x);cursor:text}sd-chip-input .sd-chip-input__reset{display:inline-flex;align-items:center;gap:var(--sd-chip-input-reset-gap);flex-shrink:0}sd-chip-input .sd-chip-input__divider{display:inline-block;width:1px;height:12px;background-color:var(--sd-chip-input-divider-color);flex-shrink:0}sd-chip-input .sd-chip-input__max-count{font-size:var(--sd-chip-input-max-count-font-size);font-weight:var(--sd-chip-input-max-count-font-weight);color:var(--sd-chip-input-max-count-color);white-space:nowrap;flex-shrink:0}sd-chip-input .sd-chip-input__field{flex:0 0 auto;display:inline-grid;grid-template-columns:minmax(0, max-content);align-items:center;min-width:1ch;max-width:100%;height:var(--sd-chip-input-field-height);box-sizing:border-box;padding:0;border:none;border-radius:0;background:transparent;overflow:hidden}sd-chip-input .sd-chip-input__field::after{content:attr(data-value);grid-area:1/1;visibility:hidden;white-space:pre;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family)}sd-chip-input .sd-chip-input__field--filled{padding:0 var(--sd-chip-input-field-padding-x);border:var(--sd-chip-input-field-border-width) solid var(--sd-chip-input-field-border-color);border-radius:var(--sd-chip-input-field-radius);background:var(--sd-chip-input-field-bg)}sd-chip-input .sd-chip-input__field--empty{position:absolute;top:0;left:0;width:0;height:0;min-width:0;overflow:hidden}sd-chip-input .sd-chip-input__input{grid-area:1/1;width:100%;min-width:1ch;height:var(--sd-chip-input-field-height);margin:0;padding:0;border:none;outline:none;overflow:hidden;text-overflow:ellipsis;background:transparent;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family);color:var(--sd-chip-input-field-content)}sd-chip-input .sd-chip-input__input[disabled]{cursor:not-allowed;pointer-events:none}sd-chip-input .sd-chip-input__input::placeholder{color:var(--sd-chip-input-placeholder-color)}sd-chip-input .sd-chip-input__suggestions{display:flex;flex-direction:column;box-sizing:border-box;background:white;border-radius:var(--sd-chip-input-suggestions-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);max-height:var(--sd-chip-input-suggestions-max-height);min-height:0;overflow-y:auto;overflow-x:hidden;outline:none}sd-chip-input .sd-chip-input__suggestion-item{display:flex;align-items:center;gap:var(--sd-chip-input-suggestion-gap);padding:var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-right) var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-x);font-size:var(--sd-chip-input-suggestion-font-size);line-height:var(--sd-chip-input-suggestion-line-height);font-weight:var(--sd-chip-input-suggestion-font-weight);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestion-color);cursor:pointer;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-chip-input .sd-chip-input__suggestion-item--active{background:var(--sd-chip-input-suggestion-bg-hover);color:var(--sd-chip-input-suggestion-color-hover);font-weight:var(--sd-chip-input-suggestion-font-weight-selected)}sd-chip-input .sd-chip-input__suggestions-empty{padding:12px;text-align:center;font-size:var(--sd-chip-input-suggestions-empty-font-size);line-height:var(--sd-chip-input-suggestions-empty-line-height);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestions-empty-color)}`;
+const sdChipInputCss = () => `sd-chip-input{display:inline-flex}sd-chip-input .sd-chip-input{position:relative;width:100%;isolation:isolate;min-height:var(--sd-chip-input-min-height);display:flex;flex-flow:row wrap;align-items:center;gap:var(--sd-chip-input-chip-gap);padding:var(--sd-chip-input-padding-y) var(--sd-chip-input-padding-x);cursor:text}sd-chip-input .sd-chip-input__reset{display:inline-flex;align-items:center;gap:var(--sd-chip-input-reset-gap);flex-shrink:0}sd-chip-input .sd-chip-input__divider{display:inline-block;width:1px;height:12px;background-color:var(--sd-chip-input-divider-color);flex-shrink:0}sd-chip-input .sd-chip-input__max-count{font-size:var(--sd-chip-input-max-count-font-size);font-weight:var(--sd-chip-input-max-count-font-weight);color:var(--sd-chip-input-max-count-color);white-space:nowrap;flex-shrink:0}sd-chip-input .sd-chip-input__field{flex:0 0 auto;display:inline-grid;grid-template-columns:minmax(0, max-content);align-items:center;min-width:1ch;max-width:100%;height:var(--sd-chip-input-field-height);box-sizing:border-box;padding:0;border:none;border-radius:0;background:transparent;overflow:hidden}sd-chip-input .sd-chip-input__field::after{content:attr(data-value);grid-area:1/1;visibility:hidden;white-space:pre;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family)}sd-chip-input .sd-chip-input__field--filled{padding:0 var(--sd-chip-input-field-padding-x);border:var(--sd-chip-input-field-border-width) solid var(--sd-chip-input-field-border-color);border-radius:var(--sd-chip-input-field-radius);background:var(--sd-chip-input-field-bg)}sd-chip-input .sd-chip-input__field--empty{position:absolute;top:0;left:0;width:0;height:0;min-width:0;overflow:hidden}sd-chip-input .sd-chip-input__input{grid-area:1/1;width:100%;min-width:1ch;height:var(--sd-chip-input-field-height);margin:0;padding:0;border:none;outline:none;overflow:hidden;text-overflow:ellipsis;background:transparent;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family);color:var(--sd-chip-input-field-content)}sd-chip-input .sd-chip-input__input[disabled]{cursor:not-allowed;pointer-events:none}sd-chip-input .sd-chip-input__input::placeholder{color:var(--sd-chip-input-placeholder-color)}sd-chip-input .sd-chip-input__suggestions{display:flex;flex-direction:column;box-sizing:border-box;background:white;border-radius:var(--sd-chip-input-suggestions-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);max-height:var(--sd-chip-input-suggestions-max-height);min-height:0;overflow-y:auto;overflow-x:hidden;outline:none}sd-chip-input .sd-chip-input__suggestion-item{display:flex;flex-shrink:0;align-items:center;gap:var(--sd-chip-input-suggestion-gap);padding:var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-right) var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-x);font-size:var(--sd-chip-input-suggestion-font-size);line-height:var(--sd-chip-input-suggestion-line-height);font-weight:var(--sd-chip-input-suggestion-font-weight);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestion-color);cursor:pointer;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-chip-input .sd-chip-input__suggestion-item--active{background:var(--sd-chip-input-suggestion-bg-hover);color:var(--sd-chip-input-suggestion-color-hover);font-weight:var(--sd-chip-input-suggestion-font-weight-selected)}sd-chip-input .sd-chip-input__suggestions-empty{padding:12px;text-align:center;font-size:var(--sd-chip-input-suggestions-empty-font-size);line-height:var(--sd-chip-input-suggestions-empty-line-height);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestions-empty-color)}`;
 
 const SdChipInput = class {
     constructor(hostRef) {
@@ -117,31 +117,56 @@ const SdChipInput = class {
     }
     static SUGGESTIONS_VIEWPORT_PADDING = 8;
     get host() { return index.getElement(this); }
+    /** 칩 값 목록 */
     values = [];
+    /** 칩별 에러 상태 목록 또는 값으로 에러 여부를 반환하는 함수 */
     errors = [];
+    /** 칩별 비활성 상태 목록 또는 값으로 비활성 여부를 반환하는 함수 */
     disabledChips = [];
+    /** 입력 필드 크기 */
     size = 'sm';
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 입력 placeholder */
     placeholder = '입력해 주세요.';
+    /** 폼 연동용 name 속성 */
     name = index$1.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 = [];
@@ -208,19 +233,27 @@ const SdChipInput = class {
         }
         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();
     }
@@ -481,6 +514,7 @@ const SdChipInput = class {
         };
         const suggestionItemStyle = {
             display: 'flex',
+            flexShrink: '0',
             alignItems: 'center',
             gap: CHIP_INPUT_SUGGESTIONS.itemGap,
             padding: `${CHIP_INPUT_SUGGESTIONS.itemPaddingY} ${CHIP_INPUT_SUGGESTIONS.itemPaddingRight} ` +
@@ -504,7 +538,7 @@ const SdChipInput = class {
             fontFamily: CHIP_INPUT_SUGGESTIONS.itemFontFamily,
             color: CHIP_INPUT_SUGGESTIONS.emptyColor,
         };
-        return (index.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) }, index.h("div", { key: 'e040d339e12ce0b038d195a829d4fc1795f12155', class: "sd-chip-input", ref: el => (this.chipInputRef = el), onClick: this.handleContainerClick }, (this.internalValues ?? []).map((value, i) => (index.h("sd-chip", { key: i, value: value, error: this.getChipError(i), disabled: this.getChipDisabled(i), editable: false, onSdRemove: () => this.handleChipRemove(i) }))), !isMaxReached && (index.h("div", { key: '37b6e51a5e1b5b5b37651cba797739ac74770d8a', class: {
+        return (index.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) }, index.h("div", { key: '8566ae7bc3bedaf6be95f29267587c49c090e73f', class: "sd-chip-input", ref: el => (this.chipInputRef = el), onClick: this.handleContainerClick }, (this.internalValues ?? []).map((value, i) => (index.h("sd-chip", { key: i, value: value, error: this.getChipError(i), disabled: this.getChipDisabled(i), editable: false, onSdRemove: () => this.handleChipRemove(i) }))), !isMaxReached && (index.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,
@@ -512,7 +546,7 @@ const SdChipInput = class {
                 ? this.inputValue
                 : this.internalValues.length === 0
                     ? this.placeholder
-                    : '' }, index.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 && (index.h("div", { key: 'd154fb5ccd1875ec6beee462a3d93b7e4480f384', class: "sd-chip-input__reset" }, this.inputValue === '' && index.h("span", { key: 'ae84a0b4c83ca26e3b58b48d32469bd46be29f78', class: "sd-chip-input__divider" }), this.maxCount != null && (index.h("span", { key: 'e5790a98cbe3e07a395ddf8b5d286ec48efcabb2', class: "sd-chip-input__max-count" }, "\uCD5C\uB300 ", this.maxCount, "\uAC1C")), this.useReset && this.internalValues.length > 0 && (index.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 && (index.h("sd-portal", { key: '45d65cf1c364e4c3f46770f98a6c7597f6aaeb01', open: showDropdown, parentRef: this.chipInputRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, index.h("div", { key: '055ea7aeb71f7a4640b3ac7406f435c3f3b1d50c', class: "sd-chip-input__suggestions", role: "listbox", style: suggestionBoxStyle }, isDropdownLoading && (index.h("div", { key: 'fc56e57fb5c62fa39cb7b13d51fe74baca539647', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), dropdownItems.map((item, i) => (index.h("div", { key: item, class: {
+                    : '' }, index.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 && (index.h("div", { key: '7cec3884a4cace3d688e80006d6240d321ac60f3', class: "sd-chip-input__reset" }, this.inputValue === '' && index.h("span", { key: '761539e242437841a2703d95903f9d6b5fe3d69f', class: "sd-chip-input__divider" }), this.maxCount != null && (index.h("span", { key: '1b448973ba3573c94ae09b74cd24720c8ea011d3', class: "sd-chip-input__max-count" }, "\uCD5C\uB300 ", this.maxCount, "\uAC1C")), this.useReset && this.internalValues.length > 0 && (index.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 && (index.h("sd-portal", { key: '9495c87a4916829fe955f054a8c97d2b3fa04914', open: showDropdown, parentRef: this.chipInputRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, index.h("div", { key: 'ac4afd8511316f0b4b957c312a051b02fc72f20e', class: "sd-chip-input__suggestions", role: "listbox", style: suggestionBoxStyle }, isDropdownLoading && (index.h("div", { key: '3b6855a7ad2ef48415160544a19014d59ca38ec1', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), dropdownItems.map((item, i) => (index.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

package/dist/cjs/sd-chip.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 var sdChip_config = require('./sd-chip.config-DiLoRpct.js');
 
 const sdChipCss = () => `sd-chip{display:inline-flex;width:fit-content;max-width:100%;height:fit-content}sd-chip .sd-chip{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-chip-gap);max-width:100%;height:var(--sd-chip-height);padding:0 var(--sd-chip-padding-x);border-radius:var(--sd-chip-radius);background:var(--sd-chip-bg);color:var(--sd-chip-content);border:var(--sd-chip-border-width) solid var(--sd-chip-border-color);font-family:var(--sd-chip-font-family);font-size:var(--sd-chip-font-size);font-weight:var(--sd-chip-font-weight);line-height:var(--sd-chip-line-height);box-sizing:border-box;white-space:nowrap;overflow:hidden;-webkit-user-select:none;user-select:none}sd-chip .sd-chip--editable:not(.sd-chip--focus){cursor:text}sd-chip .sd-chip--disabled{cursor:not-allowed;opacity:0.6}sd-chip .sd-chip__label{display:inline-flex;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis}sd-chip .sd-chip__input{display:inline-block;min-width:1ch;outline:none;background:transparent;color:inherit;font:inherit;white-space:nowrap;cursor:text}sd-chip .sd-chip__input:empty::before{content:attr(data-placeholder);color:inherit;opacity:0.6;pointer-events:none}sd-chip .sd-chip__remove{flex-shrink:0}`;
@@ -14,18 +14,29 @@ const SdChip = class {
         this.blur = index.createEvent(this, "sdBlur", 7);
     }
     get el() { return index.getElement(this); }
+    /** 폼 연동용 name 속성 */
     name = '';
+    /** 칩 텍스트 값 */
     value = '';
+    /** 에러 상태 여부 */
     error = false;
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 인라인 편집 가능 여부 */
     editable = true;
+    /** 편집 중 표시할 placeholder */
     placeholder = '';
+    /** 유효성 검사 규칙 목록 */
     rules = [];
     internalValue = '';
     isEditing = false;
+    /** 편집 완료 시 새 값을 전달합니다. */
     update;
+    /** 삭제 버튼 클릭 시 발생합니다. */
     delete;
+    /** 편집 모드 진입 시 발생합니다. */
     focus;
+    /** 편집 모드 이탈 시 발생합니다. */
     blur;
     inputEl;
     draftValue = '';
@@ -51,6 +62,7 @@ const SdChip = class {
     disconnectedCallback() {
         this.unregisterFromForm();
     }
+    /** 유효성 검사를 실행합니다. */
     async sdValidate() {
         if (!this.rules || this.rules.length === 0) {
             this.error = false;
@@ -66,6 +78,7 @@ const SdChip = class {
         this.error = false;
         return true;
     }
+    /** 값과 유효성 상태를 초기화합니다. */
     async sdReset() {
         this.internalValue = '';
         this.value = '';
@@ -74,17 +87,21 @@ const SdChip = class {
         this.isEditing = false;
         this.shouldInitInput = false;
     }
+    /** 유효성 상태만 초기화합니다. */
     async sdResetValidate() {
         this.error = false;
     }
+    /** 유효성 상태만 초기화합니다. */
     async sdResetValidation() {
         this.error = false;
     }
+    /** 편집 모드로 전환하여 포커스를 이동합니다. */
     async sdFocus() {
         if (this.disabled)
             return;
         this.enterEditMode();
     }
+    /** 네이티브 input 엘리먼트를 반환합니다. */
     async sdGetNativeElement() {
         return this.inputEl ?? null;
     }
@@ -227,7 +244,7 @@ const SdChip = class {
             '--sd-chip-font-weight': typography.fontWeight,
             '--sd-chip-line-height': typography.lineHeight,
         };
-        return (index.h("span", { key: 'a51c874d8f2ce5abea1dbcf878b4f1ceda0952a3', class: {
+        return (index.h("span", { key: '03dca835a12de78ae3c72cf50a8f1ed16b19cf00', class: {
                 'sd-chip': true,
                 [`sd-chip--${state}`]: true,
                 'sd-chip--disabled': this.disabled,

package/dist/cjs/sd-circle-progress.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 var component_progress = require('./component.progress-Bmg3vAAy.js');
 var system = require('./system-MjrAugX-.js');
 
@@ -46,9 +46,13 @@ const SdCircleProgress = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
+    /** 불확정 상태 여부 (true면 value 무시하고 스피너처럼 애니메이션) */
     indeterminate = false;
+    /** 진행률 (0~100) */
     value = 0;
+    /** 색상 테마 */
     type = 'primary';
+    /** 원 하단에 표시할 레이블 텍스트 */
     label;
     get clampedValue() {
         if (!Number.isFinite(this.value))
@@ -72,7 +76,7 @@ const SdCircleProgress = class {
         }
         const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
         const showPercent = !this.indeterminate;
-        return (index.h(index.Host, { key: 'b8dc57144fcab41a7dce8f9aff9bec4609290a8e', style: hostStyle }, index.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" }, index.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 }), index.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 && (index.h("span", { key: '1ccaad0864e44d09902201bde466b7867c51646f', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && index.h("span", { key: '0e26d97267552ef75dcc30f94392cbc733fee636', class: "sd-circle-progress__label" }, this.label)));
+        return (index.h(index.Host, { key: '1af8807d6ce19c4326e67ae55bd40620b83e9435', style: hostStyle }, index.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" }, index.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 }), index.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 && (index.h("span", { key: '1b15cdd56b3ac0d254d4a5304f40d3c5b1710b8d', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && index.h("span", { key: 'e830db48529d87ddf788834d8731a576582662af', class: "sd-circle-progress__label" }, this.label)));
     }
 };
 SdCircleProgress.style = sdCircleProgressCss();

package/dist/cjs/sd-confirm-modal_2.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 var sanitizeInlineHtml = require('./sanitize-inline-html-CRCAeQ46.js');
 var component_modal = require('./component.modal-BFelrSMx.js');
 
@@ -35,20 +35,35 @@ const SdConfirmModal = class {
     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();
@@ -102,9 +117,9 @@ const SdConfirmModal = class {
         const type = this.resolvedType;
         const iconName = CONFIRM_MODAL_ICON_MAP[type];
         const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
-        return (index.h("div", { key: '689c6d50f52e1a4c5b8f501fcc1e14f0da42fcfc', class: "sd-confirm-modal" }, index.h("sd-ghost-button", { key: 'fc3aedaa2b6aa3b95b9c0ce1e766df69af86c82f', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (index.h("sd-icon", { key: '4560ad7ee0d8929221a47b6c1b00cac04c7b387a', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), index.h("h2", { key: '8689d86f85c72a9f36e94f083842fc3354d3d82c', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), index.h("div", { key: '5828e937b3b1d3f34c389e73a3d953388dd30cd0', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (index.h("div", { key: '0f64cda9195807dbf637a463ba2bc8acc8c1ff3a', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml.sanitizeInlineHtml(msg) }))))), this.showContentBox && (index.h("div", { key: 'a090330cab2dbbc99127e616f3e50420bd44b9e4', class: "sd-confirm-modal__content-box" }, this.tagContents ? (index.h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        return (index.h("div", { key: '26270c4ca645f0e7e245b4bd40423bcf09029e22', class: "sd-confirm-modal" }, index.h("sd-ghost-button", { key: '672b73221f8638eff70c3074614fcc90b489702e', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (index.h("sd-icon", { key: '895dda6ba69d41f33f9465fb9db28739da28d2e6', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), index.h("h2", { key: 'ace6b9da4421c28e2bb828c60cae1c1cc7547f9a', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), index.h("div", { key: '3370fe954c33f8ce6a643fcc9b19f299682b43e8', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (index.h("div", { key: '6a6bc182c638e909a821353c188d2ef558452e17', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml.sanitizeInlineHtml(msg) }))))), this.showContentBox && (index.h("div", { key: 'dba37f4ab114f3641a9f287d123fb7f94e49c00a', class: "sd-confirm-modal__content-box" }, this.tagContents ? (index.h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
                 this.customContentRef = el;
-            } })) : (index.h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (index.h("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel })), this.slotLabel && (index.h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (index.h("div", { key: 'a665a0ea56685496adf7c306b4a940762a8a2b3a', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml.sanitizeInlineHtml(msg) })))))), index.h("div", { key: '0ad69928a260ed78edd7606f89790e6afa6b2d76', class: "sd-confirm-modal__button" }, this.subButtonLabel && (index.h("sd-button", { key: '1f835e091b4d96cb6c95dbda88d93ce86828da2c', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), index.h("sd-button", { key: '8e3cb23cb7207e402543b009b49d23a50521db24', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
+            } })) : (index.h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (index.h("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel })), this.slotLabel && (index.h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (index.h("div", { key: 'ed29da73d968017c44cd61540139fac24592ea70', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml.sanitizeInlineHtml(msg) })))))), index.h("div", { key: '608287c021f4191dcea0a0b5798381cbc8742170', class: "sd-confirm-modal__button" }, this.subButtonLabel && (index.h("sd-button", { key: 'a67c309617c6e1f30aa9167587e8cbb9fb961482', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), index.h("sd-button", { key: '3c1a698a8276e2924f62cf1c7e472bd34ac581a1', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
     }
 };
 SdConfirmModal.style = sdConfirmModalCss();
@@ -143,13 +158,21 @@ const SdLoadingModal = class {
         index.registerInstance(this, hostRef);
         this.click = index.createEvent(this, "sdClick", 7);
     }
+    /** 모달 상태 (loading: 로딩 중, error: 에러) */
     state = 'loading';
+    /** 표시할 메시지 (배열이면 여러 줄로 렌더링) */
     message = '';
+    /** 하단 버튼 표시 여부 */
     useButton = false;
+    /** 버튼 레이블 (없으면 state에 따른 기본값 사용) */
     buttonLabel = '';
+    /** 모달 너비 */
     width;
+    /** 모달 높이 */
     height;
+    /** sd-circle-progress에 전달할 진행률 (0–100) */
     progress;
+    /** 버튼 클릭 시 발생합니다. */
     click;
     get resolvedState() {
         return this.state ?? 'loading';
@@ -188,7 +211,7 @@ const SdLoadingModal = class {
             '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
             '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
         };
-        return (index.h(index.Host, { key: '12e8bb40871556dddad6bf3e9daa1703f3a29fc3', style: hostStyle }, index.h("div", { key: 'b1f0282746a8a4ceabd120a1c366b836edb805c1', class: "sd-loading-modal" }, index.h("div", { key: '496c034608b3d31557f154f77aa7cb7c2cb9558a', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (this.progress !== undefined ? (index.h("sd-circle-progress", { value: this.progress })) : (index.h("sd-circle-progress", { indeterminate: true }))) : (index.h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), index.h("div", { key: 'e0a57ee49f6fe46680a8e2393a00014edd76d36f', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (index.h("p", { class: "sd-loading-modal__message" }, message)))) : (index.h("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (index.h("div", { key: 'bd0c91c279a7cd4d58a18f7bfd6e8c345ae00fcf', class: "sd-loading-modal__button" }, index.h("sd-button", { key: '0d03006a668333de256b2142efc9d0c374bfef45', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
+        return (index.h(index.Host, { key: '0f3719ca22408ff2739f3997e693fe0e17cb32ab', style: hostStyle }, index.h("div", { key: '25501b81a4514315bd3b408bf958f549b099c5a5', class: "sd-loading-modal" }, index.h("div", { key: 'f5e6cf6334454a8455f95544a934fc245bddbbe6', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (this.progress !== undefined ? (index.h("sd-circle-progress", { value: this.progress })) : (index.h("sd-circle-progress", { indeterminate: true }))) : (index.h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), index.h("div", { key: '7629809572661e28f9564db1d06e882cb64580e8', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (index.h("p", { class: "sd-loading-modal__message" }, message)))) : (index.h("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (index.h("div", { key: '36e1b978e1cc4ef56b8072d1d6dab83807eca951', class: "sd-loading-modal__button" }, index.h("sd-button", { key: '218cb045df7b0dafc49024fc905bd88c7b12fcff', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
     }
 };
 SdLoadingModal.style = sdLoadingModalCss();

package/dist/cjs/sd-date-box.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 
 const sdDateBoxCss = () => `.sd-date-box.sc-sd-date-box{display:flex;align-items:center;justify-content:center;width:38px;height:36px;font-size:14px;position:relative;box-sizing:border-box;text-align:center;transition:background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);border-radius:14px}.sd-date-box.sc-sd-date-box .sd-date-box__content.sc-sd-date-box{width:28px;height:28px;border-radius:14px;position:relative}.sd-date-box.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{position:relative;z-index:2;-webkit-user-select:none;user-select:none;line-height:28px}.sd-date-box.sd-date-box--disabled.sc-sd-date-box{color:#CCCCCC;cursor:default !important;pointer-events:none}.sd-date-box.sc-sd-date-box:not(.sd-date-box--disabled){color:#333333;cursor:pointer}.sd-date-box.sd-hoverable.sc-sd-date-box:hover .sd-date-box__content.sc-sd-date-box{background:#D9EAFF}.sd-date-box.sd-date-box--in-range.sc-sd-date-box:not(.sd-date-box--disabled) .sd-date-box__content.sc-sd-date-box::before{content:"";position:absolute;top:0;left:-5px;width:calc(100% + 10px);height:100%;background:#D9EAFF}.sd-date-box.sd-date-box--in-range.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{left:auto !important;width:19px !important;right:-5px}.sd-date-box.sd-date-box--in-range.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{width:19px !important}.sd-date-box.sd-date-box--in-range.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{font-weight:500}.sd-date-box.sd-date-box--selected.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;inset:0;background:#0075FF;border-radius:14px;z-index:1}.sd-date-box.sd-date-box--selected.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{color:white;font-weight:700}.sd-date-box.sd-date-box--start-date.sd-date-box--end-date.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{display:none !important}.sd-date-box.sd-date-box--today.sc-sd-date-box:not(.sd-date-box--selected) .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:28px;height:28px;border:1px solid #E1E1E1 !important;border-radius:14px}`;
 
@@ -10,15 +10,25 @@ const SdDateBox = class {
         this.click = index.createEvent(this, "sdClick", 7);
         this.mouseOver = index.createEvent(this, "sdMouseOver", 7);
     }
+    /** 표시할 날짜 값 */
     date = null;
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 선택된 날짜 여부 */
     selected = false;
+    /** 범위 시작일 여부 */
     isStartDate = false;
+    /** 범위 종료일 여부 */
     isEndDate = false;
+    /** 오늘 날짜 여부 */
     isToday = false;
+    /** 선택 범위 내 날짜 여부 */
     inRange = false;
+    /** 범위 선택에서의 역할 (start | end | 없음) */
     type = '';
+    /** 날짜 클릭 시 해당 날짜 값을 전달합니다. */
     click;
+    /** 날짜 hover 시 해당 날짜 값을 전달합니다. */
     mouseOver;
     handleClickDate() {
         if (this.disabled || this.date === undefined || this.date === '' || this.date === 0)
@@ -33,7 +43,7 @@ const SdDateBox = class {
         this.mouseOver?.emit(this.date);
     }
     render() {
-        return (index.h("div", { key: 'ab09e8112e18b04dab2d171fa6dbd8554d11e57b', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (index.h("div", { key: '8b8bc2facd0f4614a6022c48bbd026390d8599e4', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-date-box': true,
                 'sd-hoverable': !this.disabled || !this.selected || this.type === '',
                 'sd-date-box--disabled': this.disabled,
@@ -49,7 +59,7 @@ const SdDateBox = class {
                     e.preventDefault();
                     this.handleClickDate();
                 }
-            }, onMouseOver: () => this.handleHoverDate(), onFocus: () => this.handleHoverDate() }, index.h("div", { key: 'b7e418536d6de86ae4e8042a0fc59dece42f7489', class: "sd-date-box__content" }, index.h("div", { key: '41f2b2136cc60e2d1a6664852a3fadf30413de0f', class: "sd-date-box__label" }, this.date))));
+            }, onMouseOver: () => this.handleHoverDate(), onFocus: () => this.handleHoverDate() }, index.h("div", { key: 'acbd57ac0300ca143f1e75780b59b5fc107d537f', class: "sd-date-box__content" }, index.h("div", { key: 'aeff50640c285cfd75d5592e67c97e5ec55eb00c', class: "sd-date-box__label" }, this.date))));
     }
 };
 SdDateBox.style = sdDateBoxCss();