@sellmate/design-system 1.29.0 → 1.31.0

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.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.js

@@ -87,7 +87,7 @@ export class SdConfirmModal {
         const type = this.resolvedType;
         const iconName = CONFIRM_MODAL_ICON_MAP[type];
         const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
-        return (h("div", { key: '0376a60d15b1e090a6ff8d4181f8afb107d5ede3', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: 'e652536ecf9a97c19a943de4ef5ebca99323a40a', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '8bb1e4a9207681ced8f06fa1919c99104a03b71c', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: '08991739402f4a1f8b4da3af3df24eec556cf88e', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: 'ba7aad2acaacc31f6e66122648c36b3398620b5b', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '6a0ccc07791d2d4c8923c1616fe9346d4a3c92c0', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showTagBox && (h("div", { key: '0e380d6d5ffe607863bae04821098b7585016f96', class: "sd-confirm-modal__content-box" }, h("slot", { key: 'de4eddc19f18831bf59797bda48aa4eaea3fac6a', name: "tag", onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (h("sd-tag", { key: 'a63cfc4baaef0a1a8e666d5dba8528b8b135c1bc', name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel }))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '0e9ebab6b5aaf4af7282358f7ddc57dc75cd682a', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showOption && (h("div", { key: 'cd8088453591b2fbda51aac93c8284e0f3c23aa9', class: "sd-confirm-modal__option" }, h("slot", { key: '4cbe1c57b47f12ba1f3cae23b55fb694f6b00787', name: "option", onSlotchange: () => this.syncHasSlottedContent() }, this.slotLabel && (h("span", { key: 'ed7e7aa05f5e32de4a361dcf8e3f2c2207dc9981', class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), h("div", { key: '069af4cfe63733e6960dd9e35888b26a06269026', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: 'a5371149596d109bede88df34736aaff88745f18', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: '46c0406da30bd761aa4d09f70ae9bb735b8dff5f', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
+        return (h("div", { key: '8d84d72de4a8194100a22c2f19190d35da8ad9d0', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: '8d3c11e01819fc4b3a92ef2c00afab336b12a4d8', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: 'f5013d2753d946a46666c3fc4e7e5ec79ebb5bf3', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: '88ca2b2d80ec9dfe06aa6d9ae4d65a9bf365e52e', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: 'ab9ad0c312d4155a5d8985d43c31f4ab11fc9110', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '294bea4d946392e63ec152f4a109e75fd9c5a743', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showTagBox && (h("div", { key: '6ab23578df59a6c29718087fda729a256f32e725', class: "sd-confirm-modal__content-box" }, h("slot", { key: '48c21c001a4608d1b36c4a8feee99d7ee05422c7', name: "tag", onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (h("sd-tag", { key: 'fb227ba974fc9b176e90bfa906c212099c23c98b', name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel }))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '665429ebae13b9c71e4eeaf372c45dbb98b71aa8', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showOption && (h("div", { key: '589d730c0952cd6370f96984f2d0e3c9a9fe50e6', class: "sd-confirm-modal__option" }, h("slot", { key: '23a57ca4663436aabd4f606246c80d3c3aec1ecf', name: "option", onSlotchange: () => this.syncHasSlottedContent() }, this.slotLabel && (h("span", { key: '6dead5dc544f4f1ed68a50d2619a6c10f438ea67', class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), h("div", { key: '7156c27678f8f9a6de5afdbeed191a954420f1fa', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: '02a6b6ffe4218e93ceef0dad349cd122587864df', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: '6441fda6cebcc24fd48715ed85909b652725788f', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
     }
     static get is() { return "sd-confirm-modal"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-date-picker/sd-date-picker-trigger/sd-date-picker-trigger.js

@@ -38,7 +38,7 @@ export class SdDatePickerTrigger {
                 ? DATEPICKER_COLORS.icon.disabled
                 : DATEPICKER_COLORS.icon.default,
         };
-        return (h("div", { key: '60a3b3ac02181faaabc1b77bdd8923069afa0af0', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (h("div", { key: 'b52c18bc057886ed8d6b1f5d145225a4c31f0035', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-date-picker-trigger': true,
                 'sd-date-picker-trigger--disabled': this.disabled,
             }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -46,7 +46,7 @@ export class SdDatePickerTrigger {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, h("sd-icon", { key: 'cafd36605dcc7edb20f11c008abd7b434eb1d36e', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: '6d9b6fad8b60fe8d9bcc02762b688eccc66f63b3', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
+            } }, h("sd-icon", { key: 'd653fa9a79c41b39e77a6a77afba2233a977ba29', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: 'e37f745bab9ea7ac1864ce0944ffd9d1d62eecd2', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
     }
     static get is() { return "sd-date-picker-trigger"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-date-picker/sd-date-picker.js

@@ -33,6 +33,8 @@ export class SdDatePicker {
     rules = [];
     /** 에러 상태 여부 */
     error = false;
+    /** 필드 상태 (없으면 error/rules 결과로 자동 결정) */
+    status;
     /** 레이블 영역 아이콘 */
     icon = undefined;
     /** 레이블 툴팁 텍스트 */
@@ -116,9 +118,9 @@ export class SdDatePicker {
             '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
         };
-        return (h("sd-field", { key: 'f6fe03d9c87b8de3d33d641934b28f1e42a1b23a', 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, 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("div", { key: '0d77d31b48f1ee8f87f7e59f472b0335f19b00be', class: "sd-date-picker", ref: el => {
+        return (h("sd-field", { key: 'c3adbcb65f372a7c33350a747b29b5a35990c292', 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, status: this.status, disabled: this.disabled, focused: this.focused, hovered: this.hovered, 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("div", { key: 'aac9b498321c4506a6979a17de4896c4521887a1', class: "sd-date-picker", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-date-picker-trigger", { key: '003de27ec2c3c660b1c183f10af02d6d982a6069', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '719f5f0a191286d2f2d06ca41c5746f6dea569e3', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-calendar", { key: 'd4a62d31666f21f6fb9d03f09cf36d16acc1c8a9', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, h("sd-date-picker-trigger", { key: '00a558ac1c9a5af666c62c15e18e240036e1bb34', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '142098d59d8a5df4054e7a39f4d93b0ddc06109b', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-calendar", { key: '319dc85ff9a41e8b04fdaecc1c7e9e01c953014b', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get is() { return "sd-date-picker"; }
     static get originalStyleUrls() {
@@ -429,6 +431,25 @@ export class SdDatePicker {
                 "attribute": "error",
                 "defaultValue": "false"
             },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'pass' | 'error'",
+                    "resolved": "\"default\" | \"error\" | \"pass\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\uD544\uB4DC \uC0C1\uD0DC (\uC5C6\uC73C\uBA74 error/rules \uACB0\uACFC\uB85C \uC790\uB3D9 \uACB0\uC815)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status"
+            },
             "icon": {
                 "type": "unknown",
                 "mutable": false,

package/dist/collection/components/sd-date-range-picker/sd-date-range-picker-calendar/sd-date-range-picker-calendar.css

@@ -12,6 +12,9 @@ sd-date-range-picker-calendar .sd-date-range-picker-calendar {
   box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.2);
   user-select: none;
 }
+sd-date-range-picker-calendar .sd-date-range-picker-calendar--with-time {
+  height: auto;
+}
 sd-date-range-picker-calendar .sd-date-range-picker-calendar__top-bar {
   position: relative;
   display: flex;
@@ -181,4 +184,76 @@ sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--empty {
   visibility: hidden;
   pointer-events: none;
   background: transparent;
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-divider {
+  width: 100%;
+  height: 1px;
+  background: var(--range-divider);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__time {
+  display: flex;
+  flex-direction: row;
+  gap: var(--time-gap);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-section {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  gap: var(--time-section-gap);
+  padding: var(--time-padding-y) var(--time-padding-x);
+  border-radius: var(--time-radius);
+  background: var(--time-bg-default);
+  font-size: var(--time-font-size);
+  line-height: var(--time-line-height);
+  font-weight: var(--time-font-weight);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-section--active {
+  background: var(--time-bg-selected);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-date {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--time-date-gap);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-num {
+  color: var(--time-date-label);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-unit {
+  color: var(--time-date-unit);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-input-group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--time-unit-gap);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-input {
+  width: 40px;
+  height: var(--time-input-height);
+  padding: 0;
+  border: 1px solid var(--time-input-border);
+  border-radius: var(--time-input-radius);
+  background: var(--calendar-bg);
+  text-align: center;
+  font-size: var(--time-font-size);
+  line-height: var(--time-line-height);
+  font-weight: var(--time-font-weight);
+  color: var(--time-input-text);
+  box-sizing: border-box;
+  outline: none;
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-input::placeholder {
+  color: var(--time-input-placeholder);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-input:focus {
+  border-color: var(--time-input-border-focus);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-input:disabled {
+  cursor: not-allowed;
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-colon {
+  color: var(--time-date-label);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-suffix {
+  color: var(--time-date-unit);
 }