@sellmate/design-system 1.20.1 → 1.21.0

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

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

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

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

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

@@ -1,9 +1,11 @@
 import { Fragment, h } from "@stencil/core";
 export class SdCard {
+    /** 테두리 표시 여부 */
     bordered = false;
+    /** 카드 루트 엘리먼트에 추가할 클래스 */
     sdClass = '';
     render() {
-        return (h(Fragment, { key: 'cda3366416a347552ffe66446f9fd1267654fa75' }, h("div", { key: '5b29d955402031dcc82df70df25fe1146787adec', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: 'f2a5c548de34d6bf32de75db76686da91d605e28' }))));
+        return (h(Fragment, { key: '1f40edfdae15a66922336229ebe49c570efa2059' }, h("div", { key: '365233f8ee792e36b6b6f1084ed1adc79787029b', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: 'd015ddda7cfb610e1def605d7077d710312514d1' }))));
     }
     static get is() { return "sd-card"; }
     static get originalStyleUrls() {
@@ -30,7 +32,7 @@ export class SdCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD14C\uB450\uB9AC \uD45C\uC2DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -50,7 +52,7 @@ export class SdCard {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCE74\uB4DC \uB8E8\uD2B8 \uC5D8\uB9AC\uBA3C\uD2B8\uC5D0 \uCD94\uAC00\uD560 \uD074\uB798\uC2A4"
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/sd-checkbox/sd-checkbox.config.js

@@ -7,9 +7,10 @@ export const CHECKBOX_LAYOUT = {
     iconSize: checkboxTokens.checkbox.icon,
 };
 export const CHECKBOX_TYPOGRAPHY = {
-    fontSize: checkboxTokens.checkbox.typography.fontSize,
-    lineHeight: checkboxTokens.checkbox.typography.lineHeight,
-    fontWeight: checkboxTokens.checkbox.typography.fontWeight,
+    fontSize: checkboxTokens.checkbox.typography.default.fontSize,
+    lineHeight: checkboxTokens.checkbox.typography.default.lineHeight,
+    fontWeight: checkboxTokens.checkbox.typography.default.fontWeight,
+    selectedFontWeight: checkboxTokens.checkbox.typography.selected.fontWeight,
 };
 export const CHECKBOX_COLORS = {
     unchecked: {
@@ -27,6 +28,7 @@ export const CHECKBOX_COLORS = {
     },
     label: checkboxTokens.checkbox.label.default,
     labelInverse: checkboxTokens.checkbox.label.inverse,
+    labelDisabled: checkboxTokens.checkbox.label.disabled,
     disabled: {
         bg: checkboxTokens.checkbox.bg.disabled,
         border: checkboxTokens.checkbox.border.disabled,

package/dist/collection/components/sd-checkbox/sd-checkbox.css

@@ -43,11 +43,24 @@ sd-checkbox .sd-checkbox__bg {
   line-height: 0;
 }
 sd-checkbox .sd-checkbox__label {
+  display: inline-flex;
+  flex-direction: column;
   font-size: var(--sd-checkbox-font-size);
   font-weight: var(--sd-checkbox-font-weight);
   color: var(--sd-checkbox-label-color);
   line-height: var(--sd-checkbox-line-height);
 }
+sd-checkbox .sd-checkbox__label::after {
+  content: attr(data-text);
+  height: 0;
+  font-weight: var(--sd-checkbox-font-weight-selected);
+  overflow: hidden;
+  visibility: hidden;
+  pointer-events: none;
+}
+sd-checkbox .sd-checkbox--checked .sd-checkbox__label, sd-checkbox .sd-checkbox--indeterminate .sd-checkbox__label {
+  font-weight: var(--sd-checkbox-font-weight-selected);
+}
 sd-checkbox .sd-checkbox--checked .sd-checkbox__bg, sd-checkbox .sd-checkbox--indeterminate .sd-checkbox__bg {
   border-color: var(--sd-checkbox-checked-bg);
   background: var(--sd-checkbox-checked-bg);
@@ -62,6 +75,9 @@ sd-checkbox .sd-checkbox--unchecked .sd-checkbox__bg {
 sd-checkbox .sd-checkbox--disabled {
   cursor: not-allowed;
 }
+sd-checkbox .sd-checkbox--disabled .sd-checkbox__label {
+  color: var(--sd-checkbox-label-disabled);
+}
 sd-checkbox .sd-checkbox--disabled .sd-checkbox__bg {
   background: var(--sd-checkbox-disabled-bg);
   border-color: var(--sd-checkbox-disabled-border);

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

@@ -93,25 +93,27 @@ export class SdCheckbox {
             '--sd-checkbox-font-size': `${CHECKBOX_TYPOGRAPHY.fontSize}px`,
             '--sd-checkbox-line-height': `${CHECKBOX_TYPOGRAPHY.lineHeight}px`,
             '--sd-checkbox-font-weight': CHECKBOX_TYPOGRAPHY.fontWeight,
+            '--sd-checkbox-font-weight-selected': CHECKBOX_TYPOGRAPHY.selectedFontWeight,
             '--sd-checkbox-unchecked-bg': CHECKBOX_COLORS.unchecked.bg,
             '--sd-checkbox-unchecked-bg-hover': CHECKBOX_COLORS.unchecked.bgHover,
             '--sd-checkbox-unchecked-border': CHECKBOX_COLORS.unchecked.border,
             '--sd-checkbox-unchecked-border-hover': CHECKBOX_COLORS.unchecked.borderHover,
             '--sd-checkbox-checked-bg': CHECKBOX_COLORS.checked.bg,
             '--sd-checkbox-label-color': CHECKBOX_COLORS.label,
+            '--sd-checkbox-label-disabled': CHECKBOX_COLORS.labelDisabled,
             '--sd-checkbox-disabled-bg': CHECKBOX_COLORS.disabled.bg,
             '--sd-checkbox-disabled-border': CHECKBOX_COLORS.disabled.border,
             '--sd-checkbox-inverse-border': CHECKBOX_COLORS.checked.borderInverse,
             '--sd-checkbox-inverse-icon': CHECKBOX_COLORS.checked.iconInverse,
             '--sd-checkbox-inverse-label': CHECKBOX_COLORS.labelInverse,
         };
-        return (h("label", { key: '1e1ba8ab22e34327cfdfb8d236aba0e1ff2806f6', class: this.checkboxClasses, style: cssVars }, h("input", { key: '82b852e0fb3ca94c460b7181ae1c575b361ddd4d', type: "checkbox", ref: el => {
+        return (h("label", { key: '3fa9a68790e4a777904d1c8ec1fc18b646a2e41b', class: this.checkboxClasses, style: cssVars }, h("input", { key: 'ecbabd8967c8c73e0b9216157d96b5d5f07777bd', type: "checkbox", ref: el => {
                 this.inputEl = el;
-            }, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), h("div", { key: 'e7a32ccbb915c857d188fecde0b388e15edebdfb', class: "sd-checkbox__bg" }, this.isChecked !== false ? (h("sd-icon", { name: this.isChecked === true ? 'checkboxCheck' : 'checkboxIndeterminate', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled
+            }, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), h("div", { key: '633c38ae79790aa5745240f68253613705f804cf', class: "sd-checkbox__bg" }, this.isChecked !== false ? (h("sd-icon", { name: this.isChecked === true ? 'checkboxCheck' : 'checkboxIndeterminate', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled
                 ? CHECKBOX_COLORS.checked.iconDisabled
                 : this.inverse
                     ? CHECKBOX_COLORS.checked.iconInverse
-                    : CHECKBOX_COLORS.checked.icon })) : null), this.label && h("span", { key: '396b7aa27a10428e5d9d24a3f523c3a384d4e463', class: "sd-checkbox__label" }, this.label)));
+                    : CHECKBOX_COLORS.checked.icon })) : null), this.label && (h("span", { key: '6e46c09aa41d4d1b0dbad75b825513d6e4e08f11', class: "sd-checkbox__label", "data-text": this.label }, this.label))));
     }
     static get is() { return "sd-checkbox"; }
     static get originalStyleUrls() {

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

@@ -2,18 +2,29 @@ import { h, } from "@stencil/core";
 import { CHIP_COLORS, CHIP_LAYOUT, CHIP_TYPOGRAPHY } from "./sd-chip.config";
 export class SdChip {
     el;
+    /** 폼 연동용 name 속성 */
     name = '';
+    /** 칩 텍스트 값 */
     value = '';
+    /** 에러 상태 여부 */
     error = false;
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 인라인 편집 가능 여부 */
     editable = true;
+    /** 편집 중 표시할 placeholder */
     placeholder = '';
+    /** 유효성 검사 규칙 목록 */
     rules = [];
     internalValue = '';
     isEditing = false;
+    /** 편집 완료 시 새 값을 전달합니다. */
     update;
+    /** 삭제 버튼 클릭 시 발생합니다. */
     delete;
+    /** 편집 모드 진입 시 발생합니다. */
     focus;
+    /** 편집 모드 이탈 시 발생합니다. */
     blur;
     inputEl;
     draftValue = '';
@@ -39,6 +50,7 @@ export class SdChip {
     disconnectedCallback() {
         this.unregisterFromForm();
     }
+    /** 유효성 검사를 실행합니다. */
     async sdValidate() {
         if (!this.rules || this.rules.length === 0) {
             this.error = false;
@@ -54,6 +66,7 @@ export class SdChip {
         this.error = false;
         return true;
     }
+    /** 값과 유효성 상태를 초기화합니다. */
     async sdReset() {
         this.internalValue = '';
         this.value = '';
@@ -62,17 +75,21 @@ export class SdChip {
         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;
     }
@@ -215,7 +232,7 @@ export class SdChip {
             '--sd-chip-font-weight': typography.fontWeight,
             '--sd-chip-line-height': typography.lineHeight,
         };
-        return (h("span", { key: 'a51c874d8f2ce5abea1dbcf878b4f1ceda0952a3', class: {
+        return (h("span", { key: '03dca835a12de78ae3c72cf50a8f1ed16b19cf00', class: {
                 'sd-chip': true,
                 [`sd-chip--${state}`]: true,
                 'sd-chip--disabled': this.disabled,
@@ -250,7 +267,7 @@ export class SdChip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD3FC \uC5F0\uB3D9\uC6A9 name \uC18D\uC131"
                 },
                 "getter": false,
                 "setter": false,
@@ -270,7 +287,7 @@ export class SdChip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCE69 \uD14D\uC2A4\uD2B8 \uAC12"
                 },
                 "getter": false,
                 "setter": false,
@@ -290,7 +307,7 @@ export class SdChip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC5D0\uB7EC \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -310,7 +327,7 @@ export class SdChip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBE44\uD65C\uC131 \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -330,7 +347,7 @@ export class SdChip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC778\uB77C\uC778 \uD3B8\uC9D1 \uAC00\uB2A5 \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -350,7 +367,7 @@ export class SdChip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD3B8\uC9D1 \uC911 \uD45C\uC2DC\uD560 placeholder"
                 },
                 "getter": false,
                 "setter": false,
@@ -377,7 +394,7 @@ export class SdChip {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC720\uD6A8\uC131 \uAC80\uC0AC \uADDC\uCE59 \uBAA9\uB85D"
                 },
                 "getter": false,
                 "setter": false,
@@ -400,7 +417,7 @@ export class SdChip {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD3B8\uC9D1 \uC644\uB8CC \uC2DC \uC0C8 \uAC12\uC744 \uC804\uB2EC\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "string",
@@ -415,7 +432,7 @@ export class SdChip {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC0AD\uC81C \uBC84\uD2BC \uD074\uB9AD \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "void",
@@ -430,7 +447,7 @@ export class SdChip {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD3B8\uC9D1 \uBAA8\uB4DC \uC9C4\uC785 \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "void",
@@ -445,7 +462,7 @@ export class SdChip {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD3B8\uC9D1 \uBAA8\uB4DC \uC774\uD0C8 \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "void",
@@ -469,7 +486,7 @@ export class SdChip {
                     "return": "Promise<boolean>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uC720\uD6A8\uC131 \uAC80\uC0AC\uB97C \uC2E4\uD589\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -486,7 +503,7 @@ export class SdChip {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uAC12\uACFC \uC720\uD6A8\uC131 \uC0C1\uD0DC\uB97C \uCD08\uAE30\uD654\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -503,7 +520,7 @@ export class SdChip {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uC720\uD6A8\uC131 \uC0C1\uD0DC\uB9CC \uCD08\uAE30\uD654\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -520,7 +537,7 @@ export class SdChip {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uC720\uD6A8\uC131 \uC0C1\uD0DC\uB9CC \uCD08\uAE30\uD654\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -537,7 +554,7 @@ export class SdChip {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uD3B8\uC9D1 \uBAA8\uB4DC\uB85C \uC804\uD658\uD558\uC5EC \uD3EC\uCEE4\uC2A4\uB97C \uC774\uB3D9\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -558,7 +575,7 @@ export class SdChip {
                     "return": "Promise<HTMLSpanElement | null>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uB124\uC774\uD2F0\uBE0C input \uC5D8\uB9AC\uBA3C\uD2B8\uB97C \uBC18\uD658\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             }

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

@@ -113,6 +113,7 @@ sd-chip-input .sd-chip-input__suggestions {
 }
 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);