@sellmate/design-system 1.28.0 → 1.31.0

package/dist/cjs/useDatePicker-j06ymWZ_.js

@@ -0,0 +1,103 @@
+'use strict';
+
+var sdDatePicker_config = require('./sd-date-picker.config-CgyNxY03.js');
+
+const CALENDAR_LAYOUT = {
+    bg: sdDatePicker_config.datepickerTokens.datepicker.calendar.bg,
+    paddingXY: sdDatePicker_config.datepickerTokens.datepicker.calendar.paddingXY,
+    gap: sdDatePicker_config.datepickerTokens.datepicker.calendar.gap,
+    radius: sdDatePicker_config.datepickerTokens.datepicker.calendar.radius,
+    header: {
+        gap: sdDatePicker_config.datepickerTokens.datepicker.calendar.header.gap,
+        divider: sdDatePicker_config.datepickerTokens.datepicker.calendar.header.divider,
+        fontSize: sdDatePicker_config.datepickerTokens.datepicker.calendar.header.typography.fontSize,
+        lineHeight: sdDatePicker_config.datepickerTokens.datepicker.calendar.header.typography.lineHeight,
+        fontWeight: sdDatePicker_config.datepickerTokens.datepicker.calendar.header.typography.fontWeight,
+    },
+    week: {
+        fontSize: sdDatePicker_config.datepickerTokens.datepicker.calendar.week.typography.fontSize,
+        lineHeight: sdDatePicker_config.datepickerTokens.datepicker.calendar.week.typography.lineHeight,
+        fontWeight: sdDatePicker_config.datepickerTokens.datepicker.calendar.week.typography.fontWeight,
+        color: sdDatePicker_config.datepickerTokens.datepicker.calendar.week.color,
+    },
+    grid: {
+        rowGap: sdDatePicker_config.datepickerTokens.datepicker.calendar.grid.rowGap,
+    },
+    day: {
+        size: sdDatePicker_config.datepickerTokens.datepicker.calendar.day.width,
+        circleSize: sdDatePicker_config.datepickerTokens.datepicker.calendar.day.circle.size,
+        circleRadius: sdDatePicker_config.datepickerTokens.datepicker.calendar.day.circle.radius,
+        defaultText: sdDatePicker_config.datepickerTokens.datepicker.calendar.day.default.text,
+        hoverText: sdDatePicker_config.datepickerTokens.datepicker.calendar.day.hover.text,
+        hoverBorder: sdDatePicker_config.datepickerTokens.datepicker.calendar.day.hover.border,
+        selectBg: sdDatePicker_config.datepickerTokens.datepicker.calendar.day.select.bg,
+        selectText: sdDatePicker_config.datepickerTokens.datepicker.calendar.day.select.text,
+        disabledText: sdDatePicker_config.datepickerTokens.datepicker.calendar.day.disabled.text,
+        fontSize: sdDatePicker_config.datepickerTokens.datepicker.calendar.day.typography.default.fontSize,
+        lineHeight: sdDatePicker_config.datepickerTokens.datepicker.calendar.day.typography.default.lineHeight,
+        fontWeight: sdDatePicker_config.datepickerTokens.datepicker.calendar.day.typography.default.fontWeight,
+        boldFontWeight: sdDatePicker_config.datepickerTokens.datepicker.calendar.day.typography.bold.fontWeight,
+        dot: {
+            size: sdDatePicker_config.datepickerTokens.datepicker.calendar.day.dot.size,
+            gap: sdDatePicker_config.datepickerTokens.datepicker.calendar.day.dot.gap,
+            paddingY: sdDatePicker_config.datepickerTokens.datepicker.calendar.day.dot.paddingY,
+        },
+    },
+    legend: {
+        fontSize: sdDatePicker_config.datepickerTokens.datepicker.calendar.legend.typography.fontSize,
+        lineHeight: sdDatePicker_config.datepickerTokens.datepicker.calendar.legend.typography.lineHeight,
+        fontWeight: sdDatePicker_config.datepickerTokens.datepicker.calendar.legend.typography.fontWeight,
+        gap: sdDatePicker_config.datepickerTokens.datepicker.calendar.legend.gap,
+        groupGap: sdDatePicker_config.datepickerTokens.datepicker.calendar.legend.group.gap,
+    },
+};
+const WEEK_LABELS = ['일', '월', '화', '수', '목', '금', '토'];
+
+const daysInMonth = (date) => {
+    const year = Number(date.split('-')[0]);
+    const month = Number(date.split('-')[1]);
+    const daysInMonth = new Date(year, month, 0).getDate(); // month에 0을 전달하면 전달의 마지막 날짜를 반환
+    return Array.from({ length: daysInMonth }, (_, i) => i + 1);
+};
+
+const getToday = () => {
+    const today = new Date();
+    const year = today.getFullYear();
+    const month = String(today.getMonth() + 1).padStart(2, '0');
+    const day = String(today.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+};
+const today = getToday();
+
+const useDatePicker = () => {
+    const formatDate = (year, month, day) => {
+        return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+    };
+    const createCalendar = (year, month) => {
+        const days = daysInMonth(`${year}-${String(month).padStart(2, '0')}-01`);
+        const firstDayIndex = new Date(year, month - 1, 1).getDay();
+        const prevMonthDays = Array.from({ length: firstDayIndex });
+        const remainingDays = (7 - ((days.length + firstDayIndex) % 7)) % 7;
+        const afterMonthDays = Array.from({ length: remainingDays });
+        return { days, prevMonthDays, afterMonthDays };
+    };
+    const calculateYearMonth = (year, month, type) => {
+        let newYear = year;
+        let newMonth = type === 'prev' ? month - 1 : month + 1;
+        if (newMonth < 1) {
+            newYear = year - 1;
+            newMonth = 12;
+        }
+        else if (newMonth > 12) {
+            newYear = year + 1;
+            newMonth = 1;
+        }
+        return { newYear, newMonth };
+    };
+    return { formatDate, createCalendar, calculateYearMonth };
+};
+
+exports.CALENDAR_LAYOUT = CALENDAR_LAYOUT;
+exports.WEEK_LABELS = WEEK_LABELS;
+exports.today = today;
+exports.useDatePicker = useDatePicker;

package/dist/collection/collection-manifest.json

@@ -5,14 +5,12 @@
     "components/sd-date-range-picker/sd-date-range-picker.js",
     "components/sd-form/sd-form.js",
     "components/sd-guide/sd-guide.js",
-    "components/sd-button/sd-button.js",
-    "components/sd-text-link/sd-text-link.js",
-    "components/sd-popover/sd-popover.js",
     "components/sd-radio/sd-radio.js",
     "components/sd-radio-button/sd-radio-button.js",
     "components/sd-radio-group/sd-radio-group.js",
     "components/sd-action-modal/sd-action-modal.js",
     "components/sd-ghost-button/sd-ghost-button.js",
+    "components/sd-button/sd-button.js",
     "components/sd-badge/sd-badge.js",
     "components/sd-barcode-input/sd-barcode-input.js",
     "components/sd-calendar/sd-calendar.js",
@@ -41,6 +39,8 @@
     "components/sd-modal-container/sd-modal-container.js",
     "components/sd-number-input/sd-number-input.js",
     "components/sd-pagination/sd-pagination.js",
+    "components/sd-popover/sd-popover.js",
+    "components/sd-text-link/sd-text-link.js",
     "components/sd-popup/sd-popup.js",
     "components/sd-select/sd-select.js",
     "components/sd-select/sd-select-trigger/sd-select-trigger.js",
@@ -48,13 +48,13 @@
     "components/sd-select/sd-select-list-item-search/sd-select-list-item-search.js",
     "components/sd-select/sd-select-listbox/sd-select-listbox.js",
     "components/sd-switch/sd-switch.js",
-    "components/sd-table/sd-table.js",
-    "components/sd-table/sd-tbody/sd-tbody.js",
-    "components/sd-table/sd-td/sd-td.js",
-    "components/sd-table/sd-thead/sd-thead.js",
-    "components/sd-table/sd-tr/sd-tr.js",
     "components/sd-tabs/sd-tabs.js",
     "components/sd-textarea/sd-textarea.js",
+    "components/sd-time-picker/sd-time-picker-trigger/sd-time-picker-trigger.js",
+    "components/sd-time-picker/sd-time-picker-selector/sd-time-picker-selector.js",
+    "components/sd-time-picker/sd-time-picker.js",
+    "components/sd-time-range-picker/sd-time-range-picker-selector/sd-time-range-picker-selector.js",
+    "components/sd-time-range-picker/sd-time-range-picker.js",
     "components/sd-toast/sd-toast.js",
     "components/sd-toast-container/sd-toast-container.js",
     "components/sd-toggle/sd-toggle.js",

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

@@ -45,7 +45,7 @@ export class SdActionModal {
         if (this.height != null && this.height !== '') {
             sizeStyle.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
         }
-        return (h("div", { key: '19ea6ad7ef8aeb5fc4a8537e388542c6c2244c71', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, h("header", { key: 'd56e8c35c88b3f4c2f279ee7e8b2f92c9e9760c5', class: "sd-action-modal__header" }, h("h2", { key: '50e3334be477751314febff5b29103cc7600201e', class: "sd-action-modal__title" }, this.modalTitle), h("div", { key: 'bc95f535e273ad97f820d548647601897b6d4253', class: "sd-action-modal__header-sub" }, h("slot", { key: '332a0923092c0ecec193d774f9b77316d41cd97c', name: "header-sub-title" })), h("sd-ghost-button", { key: '56127a67e0130b9639b7b9146604ce09f9d48e16', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: '22668cbe686a310e829c9d6052cec4b62a7bd194', class: "sd-action-modal__body" }, h("slot", { key: '58621eddef8c7423620a41a3c8c52b128554946e', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (h("footer", { key: '6c5ed286a5cfa39a1a46da606fee61767199344c', class: "sd-action-modal__footer" }, h("div", { key: 'ea0f414e3a1aecd3b150f93d544b801d633793c8', class: "sd-action-modal__footer-sub" }, h("slot", { key: '171f7df6863e49565e9bf0d7193e7c39c05462b5', name: "bottom-sub-content" })), h("sd-button", { key: '919ec31d0ab1c60fb1f186c6c404ba9452ff0dbb', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
+        return (h("div", { key: '0ea43d16b08533b5b9cfbeb6ba841e6deb9a4212', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, h("header", { key: '410e57f4bf29a2f754d86b78292e2281625d7cc7', class: "sd-action-modal__header" }, h("h2", { key: '0d27f2538b7b65d7cb0e708e431ba93bbe874e7f', class: "sd-action-modal__title" }, this.modalTitle), h("div", { key: '9ad61d454f2305165878a8e41c2165590e56b8e2', class: "sd-action-modal__header-sub" }, h("slot", { key: '7a0cdfa33590fbc743e8cace34f2963f1f413516', name: "header-sub-title" })), h("sd-ghost-button", { key: '4a216590c2a4ab28dbaf5cead04c1239c46897a6', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: 'a127cc066dc02a421b8bf79ac8c4ee9149e14988', class: "sd-action-modal__body" }, h("slot", { key: '0db445593169be7f38bde831d0024edc199720f2', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (h("footer", { key: 'ea4255f7c8d010ba6305a9cec484ea6625eab9ee', class: "sd-action-modal__footer" }, h("div", { key: 'f722674d3f478748b826ee2265412e700bcdacc4', class: "sd-action-modal__footer-sub" }, h("slot", { key: '96c8ab1d079c4824ef661e2fa0565023ac2222f4', name: "bottom-sub-content" })), h("sd-button", { key: '0d63bee0d36c827c49ddf96fe41de67d1dc4524d', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
     }
     static get is() { return "sd-action-modal"; }
     static get originalStyleUrls() {

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

@@ -5,7 +5,7 @@ export class SdBadge {
     color = 'blue';
     render() {
         const resolvedColor = BADGE_COLOR_MAP[this.color] ?? BADGE_COLOR_MAP.blue;
-        return (h("div", { key: '2531ebcfe66e33f8ac31be0299865ee8aa45ed17', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: 'a8ddd518167b90fedb4d6d26cc28b17082f5fe0b', class: "sd-badge__dot" })));
+        return (h("div", { key: '71aebd3dd22a67eeb04189ff0e7c4379ec5d6802', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: 'd40e81130d58b6a03ffe0461478ee8af50cd7cf6', class: "sd-badge__dot" })));
     }
     static get is() { return "sd-badge"; }
     static get originalStyleUrls() {

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

@@ -135,7 +135,7 @@ export class SdBarcodeInput {
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
             '--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
         };
-        return (h("sd-field", { key: '79dd05ab7f39104c2aa54c44a71cc3fe4cf7870f', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: '5470e7e6ddff60239bf1d42d78843f807a72c07b', class: "sd-barcode-input__content" }, h("slot", { key: 'ab15a2e5a9287f3c124f48f89610ab55c898b76e', name: "prefix" }), h("input", { key: 'e2edbbcfb70ec035e68735c4de7792d6c8ef177f', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: 'd2065cad4d491747a2a61b60b2bb10a7ef5b18d9', name: "suffix" }), this.clearable && this.internalValue && (h("sd-ghost-button", { key: '2b88fe6fd8c1c013c60b50584721a7c4d4f3bef5', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: 'a1b0bba7815d907fbe1bd255a852a05c83837c27', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: 'c1f5145823f0a66dd0207b2b634963360d81dfd9', class: "sd-barcode-input__content" }, h("slot", { key: '09d3d9aee00e59c6445c0f6701017dac236de9ac', name: "prefix" }), h("input", { key: 'c626ca1f66c660d340202d47b523e379c20dff0e', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: 'b0989ed15b141b29472a884302b1f25d8c8616e2', name: "suffix" }), this.clearable && this.internalValue && (h("sd-ghost-button", { key: 'ec07f8233456f8a4e039048ac2958da4ccc0709e', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
                 if (this.disabled)
                     return;
                 this.internalValue = '';

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

@@ -77,14 +77,14 @@ export class SdButton {
         const validRightIcon = isValidIcon(this.rightIcon) ? this.rightIcon : undefined;
         const iconOnly = !hasLabel && Boolean(validIcon) !== Boolean(validRightIcon);
         const accessibleName = iconOnly && this.ariaLabel.trim() !== '' ? this.ariaLabel : undefined;
-        return (h("button", { key: 'ea6482b86f91b26cd20ab635c357b655e92c2ec1', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type ?? 'button', disabled: this.disabled, "aria-label": accessibleName, style: {
+        return (h("button", { key: '2a57abd6819306be62a379861e15cfa06c626e63', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type ?? 'button', disabled: this.disabled, "aria-label": accessibleName, style: {
                 '--sd-button-bg': config.color,
                 '--sd-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
                 '--sd-button-border': PRESET_BORDER_COLORS[preset],
                 '--sd-button-text': PRESET_TEXT_COLORS[preset],
                 '--sd-button-icon': PRESET_ICON_COLORS[preset],
                 '--sd-button-accent': BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, h("span", { key: 'fd0cbd15e1edf4dc599e7eb3df3dcb1ddbd4732e', class: "sd-button__content" }, validIcon && (h("sd-icon", { key: '5ace6d85974e1c2ecb0fcf55b0330801f78f094f', class: "sd-button__icon", name: validIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })), this.label && h("span", { key: 'ef1240a6acee55def8244149b0af4e0252be558c', class: "sd-button__label" }, this.label), validRightIcon && (h("sd-icon", { key: '127de568676734d75dd801b9ea46aa35e09b558c', class: "sd-button__icon sd-button__icon--right", name: validRightIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })))));
+            }, onClick: this.handleClick }, h("span", { key: 'af0bcef670ee1d3963f9e2f19fbba369bb8fa341', class: "sd-button__content" }, validIcon && (h("sd-icon", { key: 'f2a104e410d76363981acd565ffe76132d69a420', class: "sd-button__icon", name: validIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })), this.label && h("span", { key: '0e19594ad6525841f7567aced516aa82321c83a2', class: "sd-button__label" }, this.label), validRightIcon && (h("sd-icon", { key: '01cb1bba8a4a1450c0a2cc30abfb4608190788d5', class: "sd-button__icon sd-button__icon--right", name: validRightIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })))));
     }
     static get is() { return "sd-button"; }
     static get originalStyleUrls() {

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

@@ -179,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: '317beb7cdffbba8982306539441fec46e6330d82', class: { 'sd-calendar': true, 'sd-calendar--elevated': this.elevated }, style: cssVars }, h("div", { key: '0d9e1084ee0bff994b4a00b7f2d490c0e101aa16', class: "sd-calendar__header" }, h("div", { key: '8d82438f1820721fcbcd14cf42c1ae00b3a517d9', class: "sd-calendar__nav-group" }, h("sd-ghost-button", { key: '4e3391c57c0fdf3ad95b82d82c7a130c3202229d', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), h("span", { key: '6a7cbfb0069dd1d29e195cc09a9c55a8ae52aa40', class: "sd-calendar__label" }, this.currentYear), h("sd-ghost-button", { key: '239d5e623f830e8ceeb069e78126175772af48de', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), h("span", { key: '24362199d36afc204eebe5c5f14a41705f6782d9', class: "sd-calendar__divider", "aria-hidden": "true" }), h("div", { key: '7aa04fa1fbb355d8b3fae4cca011999b4f7f5850', class: "sd-calendar__nav-group sd-calendar__nav-group-month" }, h("sd-ghost-button", { key: 'ea5d0129d4f7eecaeff5793460363e2f15c238b8', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), h("span", { key: '7a3879edb74cb71c46fc500d7c230c21e19042c4', class: "sd-calendar__label sd-calendar__label-month" }, this.currentMonth, "\uC6D4"), h("sd-ghost-button", { key: '7532053f6607d9e4940403f22fd32994128fc457', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), h("div", { key: 'ef59638defed69c325e49fc71ca0cc73a7d778bf', class: "sd-calendar__week" }, WEEK_LABELS.map(label => (h("span", { key: label, class: "sd-calendar__week-cell" }, label)))), h("div", { key: '0205b10254c75567336bc7e4ed8a26d2227ecb33', class: "sd-calendar__grid" }, this.cells.map(cell => {
+        return (h("div", { key: 'e1e0c276ef6642e811b796d6840ea2ed8860e5ef', class: { 'sd-calendar': true, 'sd-calendar--elevated': this.elevated }, style: cssVars }, h("div", { key: 'ed4cb4166fe14237a0291986caae6641f7075be7', class: "sd-calendar__header" }, h("div", { key: '83fb71b32ca4adaf6e42eee2a069d64ed67e08a2', class: "sd-calendar__nav-group" }, h("sd-ghost-button", { key: '35610f7ad609f1f694929355ab6aa363609d035f', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), h("span", { key: '413232de704c401ff38a02e9d5d05788e53d650e', class: "sd-calendar__label" }, this.currentYear), h("sd-ghost-button", { key: '5d60b66064809edaf3505659cca23e70c0702f97', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), h("span", { key: '0d137eea005ac4ee7dd21075f3954b1259a43de1', class: "sd-calendar__divider", "aria-hidden": "true" }), h("div", { key: 'b66dc00192dfd111b3afe98d7ad0ebb775de264d', class: "sd-calendar__nav-group sd-calendar__nav-group-month" }, h("sd-ghost-button", { key: '9e0087e68fe1ec2ac7d36454e135f0cd5dac71ce', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), h("span", { key: '83ff452dd50105c7515143a6fae5b33da204a945', class: "sd-calendar__label sd-calendar__label-month" }, this.currentMonth, "\uC6D4"), h("sd-ghost-button", { key: 'abc04cedfd725eb5b87ab49d451e55ab727d8fad', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), h("div", { key: 'e06706abdd90a500067b211dea6141a99c736be9', class: "sd-calendar__week" }, WEEK_LABELS.map(label => (h("span", { key: label, class: "sd-calendar__week-cell" }, label)))), h("div", { key: '11a86af0b5b297ad3cfe66e207f2e7a12e9bf869', 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);
@@ -192,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: 'a06b1cd9ec93891e3762f6334949cd23b643290f', class: "sd-calendar__divider-bottom", "aria-hidden": "true" }),
-            h("div", { key: '8dc6bd2495ab471b56ed6fa252c9e0ad5ebe8341', 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: 'd924bb7ce8ceb077cad4d35face238cbb6e39802', class: "sd-calendar__divider-bottom", "aria-hidden": "true" }),
+            h("div", { key: '2738f49b64e7a45aee0f11eac96c98b811312ad6', 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"; }

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

@@ -51,7 +51,7 @@ export class SdCallout {
     }
     render() {
         const showTitle = this.type === 'danger';
-        return (h("div", { key: '6f1f3f4b05febbac7fcfe163d641beca60a67ddb', class: "sd-callout", style: this.calloutStyle, role: "note" }, showTitle && this.renderTitle(), h("div", { key: '2e0c4050c4ed2d353cd270420abfbd6aac014015', class: "sd-callout__body" }, this.renderBody())));
+        return (h("div", { key: 'dc97a963717ac7f0eb3c18e7f56e46278775ce6b', class: "sd-callout", style: this.calloutStyle, role: "note" }, showTitle && this.renderTitle(), h("div", { key: '6f03a18f95672b95c3e24b3d113b281d40d97f35', class: "sd-callout__body" }, this.renderBody())));
     }
     static get is() { return "sd-callout"; }
     static get originalStyleUrls() {

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

@@ -5,7 +5,7 @@ export class SdCard {
     /** 카드 루트 엘리먼트에 추가할 클래스 */
     sdClass = '';
     render() {
-        return (h(Fragment, { key: 'c8835377275c2bed1a193eaf0a1db0c1c6fde960' }, h("div", { key: '37cec8daa273881a40258f632109d9490e5c6978', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: 'b1b485f3cfe056db25c79bbe15420484e61e5d1a' }))));
+        return (h(Fragment, { key: '517d48bc3444e448241974b93e31f0079d1f3ef6' }, h("div", { key: '3917d6ba9fc5e20a4f45d8c798f9b29eb6a239de', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: '430091d73c9419fdf8496f17fa1f52b5906fa1a4' }))));
     }
     static get is() { return "sd-card"; }
     static get originalStyleUrls() {

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

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import { CHECKBOX_COLORS, CHECKBOX_LAYOUT, CHECKBOX_TYPOGRAPHY } from "./sd-checkbox.config";
 export class SdCheckbox {
     el;
-    /** 현재 선택 상태 또는 배열 형태의 값 */
+    /** 현재 선택 상태 또는 배열 형태의 값 (미지정 시 미선택 상태) */
     value;
     /** 배열 모드에서의 개별 값 */
     val;
@@ -107,13 +107,13 @@ export class SdCheckbox {
             '--sd-checkbox-inverse-icon': CHECKBOX_COLORS.checked.iconInverse,
             '--sd-checkbox-inverse-label': CHECKBOX_COLORS.labelInverse,
         };
-        return (h("label", { key: '3fa9a68790e4a777904d1c8ec1fc18b646a2e41b', class: this.checkboxClasses, style: cssVars }, h("input", { key: 'ecbabd8967c8c73e0b9216157d96b5d5f07777bd', type: "checkbox", ref: el => {
+        return (h("label", { key: 'e8c51cf3c43e401dc7d5a625a424dc59203a18db', class: this.checkboxClasses, style: cssVars }, h("input", { key: '46d20e76a9c5b7a8a44bf13c7f75970dc5c05bad', 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: '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
+            }, 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: '86a6a05ee77c940ae0eb54c0839eda9c0afb988e', 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: '6e46c09aa41d4d1b0dbad75b825513d6e4e08f11', class: "sd-checkbox__label", "data-text": this.label }, this.label))));
+                    : CHECKBOX_COLORS.checked.icon })) : null), this.label && (h("span", { key: '2ef1708c384c6668f256b8a75d2c7821f06ec10f', class: "sd-checkbox__label", "data-text": this.label }, this.label))));
     }
     static get is() { return "sd-checkbox"; }
     static get originalStyleUrls() {
@@ -133,7 +133,7 @@ export class SdCheckbox {
                 "mutable": true,
                 "complexType": {
                     "original": "CheckedType",
-                    "resolved": "any[] | boolean | null",
+                    "resolved": "any[] | boolean | null | undefined",
                     "references": {
                         "CheckedType": {
                             "location": "local",
@@ -142,11 +142,11 @@ export class SdCheckbox {
                         }
                     }
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "\uD604\uC7AC \uC120\uD0DD \uC0C1\uD0DC \uB610\uB294 \uBC30\uC5F4 \uD615\uD0DC\uC758 \uAC12"
+                    "text": "\uD604\uC7AC \uC120\uD0DD \uC0C1\uD0DC \uB610\uB294 \uBC30\uC5F4 \uD615\uD0DC\uC758 \uAC12 (\uBBF8\uC9C0\uC815 \uC2DC \uBBF8\uC120\uD0DD \uC0C1\uD0DC)"
                 },
                 "getter": false,
                 "setter": false,

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

@@ -10,8 +10,8 @@ export class SdChip {
     error = false;
     /** 비활성 상태 여부 */
     disabled = false;
-    /** 인라인 편집 가능 여부 */
-    editable = true;
+    /** 인라인 편집 가능 여부 (기본값 false) */
+    editable = false;
     /** 닫기 버튼 표시 여부 */
     showRemove = true;
     /** 편집 중 표시할 placeholder */
@@ -96,11 +96,11 @@ export class SdChip {
         return this.inputEl ?? null;
     }
     /**
-     * SSR 환경에서 editable prop이 전달되지 않으면 undefined로 들어올 수 있으므로,
-     * false로 명시된 경우에만 편집 불가로 처리한다 (기본값 true).
+     * editable이 명시적으로 true일 때만 편집 가능으로 처리한다 (기본값 false — RN SChip과 일치).
+     * SSR 등에서 editable이 undefined로 들어와도 편집 불가로 안전하게 처리된다.
      */
     get isEditable() {
-        return this.editable !== false;
+        return this.editable === true;
     }
     enterEditMode = () => {
         if (this.disabled || this.isEditing || !this.isEditable)
@@ -234,7 +234,7 @@ export class SdChip {
             '--sd-chip-font-weight': typography.fontWeight,
             '--sd-chip-line-height': typography.lineHeight,
         };
-        return (h("span", { key: '2cd717bc842330a28bbc89a662deda16f59106ee', class: {
+        return (h("span", { key: '1dbe21611f38fdcd5670bddf6da42ae4581253e8', class: {
                 'sd-chip': true,
                 [`sd-chip--${state}`]: true,
                 'sd-chip--disabled': this.disabled,
@@ -349,13 +349,13 @@ export class SdChip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "\uC778\uB77C\uC778 \uD3B8\uC9D1 \uAC00\uB2A5 \uC5EC\uBD80"
+                    "text": "\uC778\uB77C\uC778 \uD3B8\uC9D1 \uAC00\uB2A5 \uC5EC\uBD80 (\uAE30\uBCF8\uAC12 false)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "editable",
-                "defaultValue": "true"
+                "defaultValue": "false"
             },
             "showRemove": {
                 "type": "boolean",

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

@@ -22,6 +22,9 @@ sd-chip-input .sd-chip-input__reset {
   gap: var(--sd-chip-input-reset-gap);
   flex-shrink: 0;
 }
+sd-chip-input .sd-chip-input__reset--end {
+  margin-left: auto;
+}
 sd-chip-input .sd-chip-input__divider {
   display: inline-block;
   width: 1px;

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

@@ -27,6 +27,8 @@ export class SdChipInput {
     useReset = false;
     /** 최대 입력 가능한 칩 개수 (없으면 제한 없음) */
     maxCount;
+    /** 최대 개수·초기화 meta 위치 (end=우측 끝으로 정렬 / inline=콘텐츠에 이어서 배치) */
+    metaPlacement = 'end';
     /** 중복 에러 메시지에 표시할 항목 이름 (없으면 기본 메시지 사용) */
     duplicateLabel;
     /** 자동완성 후보 목록 */
@@ -37,8 +39,8 @@ export class SdChipInput {
     recommendedItems = [];
     /** 추천 항목 로딩 중 여부 */
     loadingRecommendedItems = false;
-    /** 자동완성 드롭다운 최소 너비 (숫자면 px, 문자열이면 그대로 적용. 없으면 입력 필드 너비를 사용) */
-    autocompleteMinWidth;
+    /** 드롭다운(자동완성) 최소 너비 (숫자면 px, 문자열이면 그대로 적용. 기본값 200) */
+    dropdownMinWidth = 200;
     // sd-field props
     /** 레이블 텍스트 */
     label = '';
@@ -411,16 +413,16 @@ export class SdChipInput {
             ...suggestionBoxBaseStyle,
             width: `${this.chipInputRef?.offsetWidth ?? 0}px`,
         };
-        // 자동완성은 입력 중인 칩(필드) 기준으로 노출되며, 최소 너비를 유지한 채 텍스트 길이에 따라 늘어난다.
-        const autocompleteMinWidth = this.autocompleteMinWidth != null
-            ? typeof this.autocompleteMinWidth === 'number'
-                ? `${this.autocompleteMinWidth}px`
-                : this.autocompleteMinWidth
-            : `${this.fieldRef?.offsetWidth ?? 0}px`;
+        // 자동완성은 입력 중인 칩(필드) 기준으로 노출되며, 최소 너비(기본 200px)를 유지한 채 텍스트 길이에 따라 늘어난다.
+        const resolvedDropdownMinWidth = this.dropdownMinWidth == null
+            ? `${this.fieldRef?.offsetWidth ?? 0}px`
+            : typeof this.dropdownMinWidth === 'number'
+                ? `${this.dropdownMinWidth}px`
+                : this.dropdownMinWidth;
         const autocompleteBoxStyle = {
             ...suggestionBoxBaseStyle,
             width: 'max-content',
-            minWidth: autocompleteMinWidth,
+            minWidth: resolvedDropdownMinWidth,
         };
         const suggestionItemStyle = {
             display: 'flex',
@@ -448,7 +450,7 @@ export class SdChipInput {
             fontFamily: CHIP_INPUT_SUGGESTIONS.itemFontFamily,
             color: CHIP_INPUT_SUGGESTIONS.emptyColor,
         };
-        return (h("sd-field", { key: 'c5f94bcc3343549d225d8310e98d424bd74471e5', 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: '40a0d8d08b33ff454eae29e815afd0378b93d927', 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: 'c40b423a77272adaded79c3bc45af2084ef76ecf', class: {
+        return (h("sd-field", { key: '7be2526c67f5eddf5a8652211e7fb47610559d84', 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: '07534d138b631226433ed17101de70170df269cb', 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: '329ec02d448fe6da2b9cba977fc2e17fa86e358f', 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,
@@ -456,12 +458,15 @@ export class SdChipInput {
                 ? this.inputValue
                 : this.internalValues.length === 0
                     ? this.placeholder
-                    : '' }, h("input", { key: '05ff9dc453577cb53a6284b9d064ef3e572bbc83', 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("input", { key: 'bbe535cc1dd12db472b995bbe1c7d4ac43aa85e4', 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: 'f2e5336974905e3b7672567b29ad4f902ed2bcdf', class: "sd-chip-input__reset",
+        h("div", { key: '2384ba5c13e27556f8135f71c43aa8dd98922850', class: {
+                'sd-chip-input__reset': true,
+                'sd-chip-input__reset--end': this.metaPlacement === 'end',
+            }, "data-placement": this.metaPlacement,
             // 리셋 버튼 클릭 시 input blur → portal unmount → refocus → 새 portal mount로
             // 두 wrapper가 body에 잠깐 겹치는 타이밍 이슈를 방지한다.
-            onMouseDown: e => e.preventDefault() }, this.inputValue === '' && h("span", { key: '65f0bcd6086029ab9637dd6c7a64524478c11e76', class: "sd-chip-input__divider" }), this.maxCount != null && (h("span", { key: 'd4702a86e9f1ca03bf74937dfb9e0c822e9722bf', class: "sd-chip-input__max-count" }, "\uCD5C\uB300 ", this.maxCount, "\uAC1C")), this.useReset && this.internalValues.length > 0 && (h("sd-text-link", { key: '70a5d27129e37e49d8d8d7f92b6ad9471575fa71', 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 })))), h("sd-portal", { key: '24e9ac9124c514debc6df00ed663c20ac0f92bf7', class: "sd-chip-input__autocomplete-portal", open: showAutocomplete, parentRef: this.fieldRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, h("div", { key: 'd0e7697fc7a8a754d6b1ce6a34c205bbc7630a81', class: "sd-chip-input__suggestions sd-chip-input__suggestions--autocomplete", role: "listbox", style: autocompleteBoxStyle }, isAutocompleteLoading && (h("div", { key: '2709073f6174ede46b5d9e4d0c72f9b2dc207c54', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), autocompleteListItems.map((item, i) => {
+            onMouseDown: e => e.preventDefault() }, this.inputValue === '' && h("span", { key: 'b332a240d13c48f31c76cf7c5afffe69b25213e5', class: "sd-chip-input__divider" }), this.maxCount != null && (h("span", { key: '70641e0b72e6aec6e02a9cfa84e7a118b24f1355', class: "sd-chip-input__max-count" }, "\uCD5C\uB300 ", this.maxCount, "\uAC1C")), this.useReset && this.internalValues.length > 0 && (h("sd-text-link", { key: '2dba93d961187b5f2a8501038ea01beb45123a5a', 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 })))), h("sd-portal", { key: '68eea57d431b5aafecafc785febe50ead9586652', class: "sd-chip-input__autocomplete-portal", open: showAutocomplete, parentRef: this.fieldRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, h("div", { key: 'face530c9604516f06ed9c304172f64fa44d42b0', class: "sd-chip-input__suggestions sd-chip-input__suggestions--autocomplete", role: "listbox", style: autocompleteBoxStyle }, isAutocompleteLoading && (h("div", { key: '1d691afb5bf3a65991bcff925bb8c6ceffa3a688', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), autocompleteListItems.map((item, i) => {
             const isSelected = (this.internalValues ?? []).includes(item);
             const isActive = i === this.activeSuggestionIndex && !isSelected;
             return (h("div", { key: item, class: {
@@ -487,7 +492,7 @@ export class SdChipInput {
                     if (!isSelected)
                         this.addChip(item);
                 } }, h("span", { style: { flex: '1' } }, item), isSelected && (h("sd-icon", { name: "check", size: "12", style: { color: '#0075FF', flexShrink: '0' } }))));
-        }))), h("sd-portal", { key: '96424b38ffe1ec646b48fdea0b65cdb9dbc2caf7', class: "sd-chip-input__recommendation-portal", open: showRecommendations, parentRef: this.chipInputRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, h("div", { key: '2ae809c5d03b662e98252768ac3f7ac44730dbb7', class: "sd-chip-input__suggestions", role: "listbox", style: suggestionBoxStyle }, isRecommendationLoading && (h("div", { key: '3dbf23b89e923762c0ee092f9f5f724a043bd3a6', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), h("div", { key: 'ebbccb03b333bed84a88d1ca10f0e4e142211582', style: {
+        }))), h("sd-portal", { key: '44d969fb589aad9d292725e6d5fa90da814012fe', class: "sd-chip-input__recommendation-portal", open: showRecommendations, parentRef: this.chipInputRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, h("div", { key: 'e87049f20b42bfe12e8127aa51133704d4bdd233', class: "sd-chip-input__suggestions", role: "listbox", style: suggestionBoxStyle }, isRecommendationLoading && (h("div", { key: '63815fc8325a93178fd8eb1b6394bb489ae1344d', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), h("div", { key: '2598ec64253198067f3b215e79d90d256a9eb562', style: {
                 display: 'flex',
                 flexWrap: 'wrap',
                 gap: '8px',
@@ -745,6 +750,26 @@ export class SdChipInput {
                 "reflect": false,
                 "attribute": "max-count"
             },
+            "metaPlacement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'end' | 'inline'",
+                    "resolved": "\"end\" | \"inline\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uCD5C\uB300 \uAC1C\uC218\u00B7\uCD08\uAE30\uD654 meta \uC704\uCE58 (end=\uC6B0\uCE21 \uB05D\uC73C\uB85C \uC815\uB82C / inline=\uCF58\uD150\uCE20\uC5D0 \uC774\uC5B4\uC11C \uBC30\uCE58)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "meta-placement",
+                "defaultValue": "'end'"
+            },
             "duplicateLabel": {
                 "type": "string",
                 "mutable": false,
@@ -840,7 +865,7 @@ export class SdChipInput {
                 "attribute": "loading-recommended-items",
                 "defaultValue": "false"
             },
-            "autocompleteMinWidth": {
+            "dropdownMinWidth": {
                 "type": "any",
                 "mutable": false,
                 "complexType": {
@@ -852,12 +877,13 @@ export class SdChipInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "\uC790\uB3D9\uC644\uC131 \uB4DC\uB86D\uB2E4\uC6B4 \uCD5C\uC18C \uB108\uBE44 (\uC22B\uC790\uBA74 px, \uBB38\uC790\uC5F4\uC774\uBA74 \uADF8\uB300\uB85C \uC801\uC6A9. \uC5C6\uC73C\uBA74 \uC785\uB825 \uD544\uB4DC \uB108\uBE44\uB97C \uC0AC\uC6A9)"
+                    "text": "\uB4DC\uB86D\uB2E4\uC6B4(\uC790\uB3D9\uC644\uC131) \uCD5C\uC18C \uB108\uBE44 (\uC22B\uC790\uBA74 px, \uBB38\uC790\uC5F4\uC774\uBA74 \uADF8\uB300\uB85C \uC801\uC6A9. \uAE30\uBCF8\uAC12 200)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "autocomplete-min-width"
+                "attribute": "dropdown-min-width",
+                "defaultValue": "200"
             },
             "label": {
                 "type": "string",

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

@@ -45,6 +45,7 @@ sd-circle-progress[inner-value] .sd-circle-progress__percent {
   top: 40px;
   left: 50%;
   transform: translate(-50%, -50%);
+  line-height: normal;
 }
 sd-circle-progress {
   /* indeterminate 모드: 회전 + dasharray grow/shrink 애니메이션 */

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

@@ -33,7 +33,7 @@ export class SdCircleProgress {
         }
         const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
         const showPercent = !this.indeterminate;
-        return (h(Host, { key: '869ec15d8df4b3e240b70599d8ba72618cda4c87', style: hostStyle }, h("svg", { key: '446fa350f3c7e225e455f5f6c12b4aab45d20287', 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: 'c3555674067f60ab1a1458d789d62fc9bbc8015f', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: '62716c5645d957be08ea0e0818e47edda2c9e471', 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: 'b56d75c0c40cb82d4c4c87161913b28063a9d369', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: '65cfb5cd0426c7cbf5ee7aefeaf675471abccaaf', class: "sd-circle-progress__label" }, this.label)));
+        return (h(Host, { key: '7458f47e0e621f2cead4d72618edcd2bdab4b923', style: hostStyle }, h("svg", { key: 'ca0b2b99ac2e1c4a6a51b509fa37292689f4f6ff', 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: '61d09511593f23d1e88712fa45c341a45e34589d', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: 'a4875d4001db2ee091a41c0afe7a4afb0062c610', 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: 'a49f13b27e1c8ee46370ff0fc7692e7d535ddca3', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: '0c76f052dbccb5f2e33511afb5ff5d325e36d697', class: "sd-circle-progress__label" }, this.label)));
     }
     static get is() { return "sd-circle-progress"; }
     static get originalStyleUrls() {

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

@@ -52,6 +52,9 @@ sd-confirm-modal .sd-confirm-modal__content-box {
   border-radius: 8px;
   background: white;
 }
+sd-confirm-modal .sd-confirm-modal__option {
+  text-align: center;
+}
 sd-confirm-modal .sd-confirm-modal__slot-label {
   font-size: 14px;
   font-weight: 700;