@sellmate/design-system 1.29.0 → 1.31.0

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-Dz490Ukt.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-C599jhDs.js';
 import { s as sanitizeInlineHtml } from './sanitize-inline-html-BE4tnQ2Z.js';
 import { m as modalTokens } from './component.modal-Cw8yDfQh.js';
 
@@ -114,7 +114,7 @@ const SdConfirmModal = class {
         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() }))));
     }
 };
 SdConfirmModal.style = sdConfirmModalCss();
@@ -213,7 +213,7 @@ const SdLoadingModal = class {
             '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
             '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
         };
-        return (h(Host, { key: '1b22ac1569044c27867745c08d3e49325192c673', style: hostStyle }, h("div", { key: '06fbf9cb54f7753a2560b208ab634a9090d5462a', class: "sd-loading-modal" }, this.resolvedState === 'error' && (h("sd-ghost-button", { key: 'fc8e95da691cefe22b47d75cacd9e4ea36695347', class: "sd-loading-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: 'ca4840db307050f8509d3a632b8f028bce18e399', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (this.progress !== undefined ? (h("sd-circle-progress", { value: this.progress })) : (h("sd-circle-progress", { indeterminate: true }))) : (h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), h("div", { key: '11b93fc8996ca64a42f09e4688267329da8a74c9', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (h("p", { class: "sd-loading-modal__message" }, message)))) : (h("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.showButton && (h("div", { key: 'b75b3cb2a48167746d583e540c48746b9590efad', class: "sd-loading-modal__button" }, h("sd-button", { key: '7c298c2f62460ecb955a53e57c841a9e7244008e', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
+        return (h(Host, { key: 'c6b6406cc751cfc007f6fbff72580a22b2975c03', style: hostStyle }, h("div", { key: '139b7397598768e526275dc8b508a333ba1e6058', class: "sd-loading-modal" }, this.resolvedState === 'error' && (h("sd-ghost-button", { key: '098c693d5da0c333fb06309be5371a5e8a6c3016', class: "sd-loading-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: 'f072a17c4c8e47e296cbf52d34414a32efa6aaa1', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (this.progress !== undefined ? (h("sd-circle-progress", { value: this.progress })) : (h("sd-circle-progress", { indeterminate: true }))) : (h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), h("div", { key: 'a2c501cfee2181b2a7dda2544e03bf1a709baaf3', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (h("p", { class: "sd-loading-modal__message" }, message)))) : (h("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.showButton && (h("div", { key: 'e9d1beef80bf8fa4a0647802ce4a6e023e74bc12', class: "sd-loading-modal__button" }, h("sd-button", { key: '63a64f356fc09cbaf56ff715d04c97b208f63945', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
     }
 };
 SdLoadingModal.style = sdLoadingModalCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-Dz490Ukt.js';
+import { r as registerInstance, c as createEvent, h } from './index-C599jhDs.js';
 
 const sdDateBoxCss = () => `.sd-date-box.sc-sd-date-box{display:flex;align-items:center;justify-content:center;width:38px;height:36px;font-size:14px;position:relative;box-sizing:border-box;text-align:center;transition:background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);border-radius:14px}.sd-date-box.sc-sd-date-box .sd-date-box__content.sc-sd-date-box{width:28px;height:28px;border-radius:14px;position:relative}.sd-date-box.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{position:relative;z-index:2;-webkit-user-select:none;user-select:none;line-height:28px}.sd-date-box.sd-date-box--disabled.sc-sd-date-box{color:#CCCCCC;cursor:default !important;pointer-events:none}.sd-date-box.sc-sd-date-box:not(.sd-date-box--disabled){color:#333333;cursor:pointer}.sd-date-box.sd-hoverable.sc-sd-date-box:hover .sd-date-box__content.sc-sd-date-box{background:#D9EAFF}.sd-date-box.sd-date-box--in-range.sc-sd-date-box:not(.sd-date-box--disabled) .sd-date-box__content.sc-sd-date-box::before{content:"";position:absolute;top:0;left:-5px;width:calc(100% + 10px);height:100%;background:#D9EAFF}.sd-date-box.sd-date-box--in-range.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{left:auto !important;width:19px !important;right:-5px}.sd-date-box.sd-date-box--in-range.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{width:19px !important}.sd-date-box.sd-date-box--in-range.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{font-weight:500}.sd-date-box.sd-date-box--selected.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;inset:0;background:#0075FF;border-radius:14px;z-index:1}.sd-date-box.sd-date-box--selected.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{color:white;font-weight:700}.sd-date-box.sd-date-box--start-date.sd-date-box--end-date.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{display:none !important}.sd-date-box.sd-date-box--today.sc-sd-date-box:not(.sd-date-box--selected) .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:28px;height:28px;border:1px solid #E1E1E1 !important;border-radius:14px}`;
 

package/dist/esm/{component.datepicker-BOxGhKKP.js → sd-date-picker.config-CdXJcOGr.js}

@@ -1,3 +1,5 @@
+import { f as fieldTokens } from './component.field-DjKOoQuF.js';
+
 const datepicker = {
 	sm: {
 		height: "28",
@@ -108,10 +110,71 @@ const datepicker = {
 			group: {
 				gap: "12"
 			}
-		}}
+		},
+		time: {
+			bg: {
+				"default": "#F9F9F9",
+				selected: "#F5FAFF"
+			},
+			date: {
+				label: "#222222",
+				unit: "#888888",
+				gap: "6"
+			},
+			radius: "8",
+			paddingX: "16",
+			paddingY: "12",
+			gap: "12",
+			section: {
+				gap: "12"
+			},
+			unit: {
+				gap: "2"
+			},
+			typography: {
+				fontWeight: "500",
+				fontSize: "12",
+				lineHeight: "20"
+			}
+		}
+	}
 };
 var datepickerTokens = {
 	datepicker: datepicker
 };
 
-export { datepickerTokens as d };
+const sm = datepickerTokens.datepicker.sm;
+const md = datepickerTokens.datepicker.md;
+const DATEPICKER_SIZE_MAP = {
+    sm: {
+        height: sm.height,
+        paddingX: sm.paddingX,
+        gap: sm.gap,
+        iconSize: sm.icon,
+        radius: sm.radius,
+        fontSize: sm.typography.fontSize,
+        lineHeight: sm.typography.lineHeight,
+        fontWeight: sm.typography.fontWeight,
+    },
+    md: {
+        height: md.height,
+        paddingX: md.paddingX,
+        gap: md.gap,
+        iconSize: md.icon,
+        radius: md.radius,
+        fontSize: md.typography.fontSize,
+        lineHeight: md.typography.lineHeight,
+        fontWeight: md.typography.fontWeight,
+    },
+};
+const DATEPICKER_COLORS = {
+    border: datepickerTokens.datepicker.border,
+    bg: datepickerTokens.datepicker.bg,
+    icon: datepickerTokens.datepicker.icon,
+    text: {
+        ...datepickerTokens.datepicker.text,
+        hint: fieldTokens.field.hint.color,
+    },
+};
+
+export { DATEPICKER_COLORS as D, DATEPICKER_SIZE_MAP as a, datepickerTokens as d };

package/dist/esm/sd-date-picker_8.entry.js

@@ -1,10 +1,9 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Dz490Ukt.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-C599jhDs.js';
 import { n as nanoid } from './index-CCwNgVmC.js';
-import { D as DATEPICKER_COLORS, a as DATEPICKER_SIZE_MAP } from './sd-date-picker.config-krRuSUsA.js';
+import { D as DATEPICKER_COLORS, a as DATEPICKER_SIZE_MAP } from './sd-date-picker.config-CdXJcOGr.js';
+import { f as fieldTokens } from './component.field-DjKOoQuF.js';
 import { l as listBoxTokens } from './component.listBox-DlJaYVWf.js';
 import { i as inputTokens } from './component.textinput-e0ABNkP6.js';
-import { f as fieldTokens } from './component.field-DjKOoQuF.js';
-import './component.datepicker-BOxGhKKP.js';
 
 const sdDatePickerCss = () => `sd-date-picker{display:inline-flex}sd-date-picker sd-portal{display:none}sd-date-picker .sd-date-picker{position:relative;width:100%;height:100%}`;
 
@@ -45,6 +44,8 @@ const SdDatePicker = class {
     rules = [];
     /** 에러 상태 여부 */
     error = false;
+    /** 필드 상태 (없으면 error/rules 결과로 자동 결정) */
+    status;
     /** 레이블 영역 아이콘 */
     icon = undefined;
     /** 레이블 툴팁 텍스트 */
@@ -128,9 +129,9 @@ const SdDatePicker = class {
             '--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 watchers() { return {
         "isOpen": [{
@@ -160,6 +161,11 @@ const SdDateRangePicker = class {
     selectable;
     /** 최대 선택 가능한 날짜 범위 (일 단위) */
     maxRange;
+    /**
+     * 시간(시:분) 선택 푸터 사용 여부.
+     * true이면 value는 "YYYY-MM-DD HH:mm" 형식이 되고, 캘린더 하단에 시작·종료 시간 입력이 표시됩니다.
+     */
+    useTimePicker = false;
     /** 비활성 상태 여부 */
     disabled = false;
     /** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
@@ -181,6 +187,8 @@ const SdDateRangePicker = class {
     rules = [];
     /** 에러 상태 여부 */
     error = false;
+    /** 필드 상태 (없으면 error/rules 결과로 자동 결정) */
+    status;
     /** 레이블 영역 아이콘 */
     icon = undefined;
     /** 레이블 툴팁 텍스트 */
@@ -240,7 +248,9 @@ const SdDateRangePicker = class {
         }
     };
     handleSelect = (e) => {
-        this.closeDropdown();
+        // 시간 선택 모드에서는 사용자가 시:분을 조정할 수 있도록 드롭다운을 닫지 않고 실시간 반영만 한다
+        if (!this.useTimePicker)
+            this.closeDropdown();
         this.value = e.detail;
         const nextValue = this.value;
         requestAnimationFrame(() => {
@@ -255,6 +265,14 @@ const SdDateRangePicker = class {
             return '';
         return `${this.value[0]} ~ ${this.value[1]}`;
     }
+    static DEFAULT_PLACEHOLDER = 'YYYY-MM-DD ~ YYYY-MM-DD';
+    get resolvedPlaceholder() {
+        // placeholder를 따로 지정하지 않았고 시간 선택 모드이면 시:분을 포함한 기본 placeholder를 쓴다
+        if (this.useTimePicker && this.placeholder === SdDateRangePicker.DEFAULT_PLACEHOLDER) {
+            return 'YYYY-MM-DD HH:mm ~ YYYY-MM-DD HH:mm';
+        }
+        return this.placeholder;
+    }
     disconnectedCallback() {
         if (this.closeAnimationTimer)
             clearTimeout(this.closeAnimationTimer);
@@ -268,9 +286,9 @@ const SdDateRangePicker = class {
             '--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: '00e25ab4608b5340b8be9e1dd19050968e34b758', 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: '98179e2ec90e55f83e5deff6e36fc821fc103456', class: "sd-date-range-picker", ref: el => {
+        return (h("sd-field", { key: '01098a74a5066d2328409dcdf21bb38691adf455', 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: 'dab4a666f5c144bbcbf3848528ce246c752ab906', class: "sd-date-range-picker", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-date-picker-trigger", { key: 'fe123228a851da602f0a5a8929fc20782742a24b', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: 'ee7eb14cc09fd067a8eeb9f19bd93178378d81b2', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-range-picker-calendar", { key: '8dc57a29f1ecd6811fb4538a96eea823dfebe080', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, h("sd-date-picker-trigger", { key: '5aa378df1b53a2b8cc29e159e7bda0544210a81e', displayText: this.displayText, placeholder: this.resolvedPlaceholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '8d18658004dc009d869804bdabd31155117edde3', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-range-picker-calendar", { key: '0bf96efeed4c567052e690a83a70f27df85ccc64', value: this.value, selectable: this.selectable, maxRange: this.maxRange, useTimePicker: this.useTimePicker, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get watchers() { return {
         "isOpen": [{
@@ -286,12 +304,39 @@ const filepicker = {
 		paddingX: "12",
 		gap: "8",
 		radius: "4",
+		borderWidth: "1",
 		typography: {
+			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
 			fontWeight: "400",
 			fontSize: "12",
-			lineHeight: "20"},
+			lineHeight: "20",
+			textDecoration: "none"
+		},
 		icon: "16"
 	},
+	md: {
+		height: "36",
+		paddingX: "16",
+		gap: "12",
+		radius: "6",
+		borderWidth: "1",
+		typography: {
+			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
+			fontWeight: "400",
+			fontSize: "14",
+			textDecoration: "none",
+			lineHeight: "24"
+		},
+		icon: "20"
+	},
+	border: {
+		"default": "#AAAAAA",
+		disabled: "#CCCCCC"
+	},
+	bg: {
+		"default": "#FFFFFF",
+		disabled: "#E1E1E1"
+	},
 	text: {
 		"default": "#222222",
 		placeholder: "#AAAAAA",
@@ -306,15 +351,25 @@ var filePickerTokens = {
 };
 
 const fp = filePickerTokens.filepicker;
-const FILE_PICKER_LAYOUT = {
-    height: fp.sm.height,
-    paddingX: fp.sm.paddingX,
-    gap: fp.sm.gap,
-    radius: fp.sm.radius,
-    fontSize: fp.sm.typography.fontSize,
-    lineHeight: fp.sm.typography.lineHeight,
-    fontWeight: fp.sm.typography.fontWeight,
-    iconSize: fp.sm.icon};
+const buildLayout = (s) => ({
+    height: fp[s].height,
+    paddingX: fp[s].paddingX,
+    gap: fp[s].gap,
+    radius: fp[s].radius,
+    borderWidth: fp[s].borderWidth,
+    fontSize: fp[s].typography.fontSize,
+    lineHeight: fp[s].typography.lineHeight,
+    fontWeight: fp[s].typography.fontWeight,
+    iconSize: fp[s].icon,
+    contentsGap: fieldTokens.field.contents.gap,
+});
+/** 기본(sm) 레이아웃 — 하위호환용 단일 export */
+const FILE_PICKER_LAYOUT = buildLayout('sm');
+/** size별 레이아웃 맵 */
+const FILE_PICKER_LAYOUTS = {
+    sm: FILE_PICKER_LAYOUT,
+    md: buildLayout('md'),
+};
 const FILE_PICKER_COLORS = {
     text: fp.text,
     icon: {
@@ -361,6 +416,8 @@ const SdFilePicker = class {
     /** 최대 파일 개수 */
     maxFiles;
     // sd-field 패스스루 props
+    /** 필드 크기 */
+    size = 'sm';
     /** 폼 연동용 name 속성 */
     name = nanoid();
     /** 레이블 텍스트 */
@@ -563,7 +620,7 @@ const SdFilePicker = class {
     renderChipList() {
         if (!this.hasChips())
             return null;
-        return (h("div", { class: "sd-file-picker__chip-list" }, this.internalValue.map((file, index) => (h("sd-chip", { value: file.name, onSdRemove: () => this.handleChipRemove(index) })))));
+        return (h("div", { class: "sd-file-picker__chip-list" }, this.internalValue.map((file, index) => (h("sd-chip", { value: file.name, editable: false, onSdRemove: () => this.handleChipRemove(index) })))));
     }
     renderListbox() {
         if (!this.hasChips() || !this.isListboxOpen)
@@ -589,38 +646,39 @@ const SdFilePicker = class {
     render() {
         const hasFiles = this.hasFiles();
         const displayText = this.getDisplayText();
+        const layout = FILE_PICKER_LAYOUTS[this.size] ?? FILE_PICKER_LAYOUT;
         const cssVars = {
-            '--sd-file-picker-font-size': `${FILE_PICKER_LAYOUT.fontSize}px`,
-            '--sd-file-picker-line-height': `${FILE_PICKER_LAYOUT.lineHeight}px`,
-            '--sd-file-picker-font-weight': FILE_PICKER_LAYOUT.fontWeight,
-            '--sd-file-picker-padding-x': `${FILE_PICKER_LAYOUT.paddingX}px`,
-            '--sd-file-picker-gap': `${FILE_PICKER_LAYOUT.gap}px`,
+            '--sd-file-picker-font-size': `${layout.fontSize}px`,
+            '--sd-file-picker-line-height': `${layout.lineHeight}px`,
+            '--sd-file-picker-font-weight': layout.fontWeight,
+            '--sd-file-picker-padding-x': `${layout.paddingX}px`,
+            '--sd-file-picker-gap': `${layout.gap}px`,
             '--sd-file-picker-text-color': FILE_PICKER_COLORS.text.default,
             '--sd-file-picker-placeholder-color': FILE_PICKER_COLORS.text.placeholder,
             '--sd-file-picker-disabled-color': FILE_PICKER_COLORS.text.disabled,
-            // sd-field 시스템 변수 override
-            '--sd-system-size-field-sm-height': `${FILE_PICKER_LAYOUT.height}px`,
-            '--sd-system-radius-field-sm': `${FILE_PICKER_LAYOUT.radius}px`,
+            // sd-field 시스템 변수 override (size에 맞춰)
+            [`--sd-system-size-field-${this.size}-height`]: `${layout.height}px`,
+            [`--sd-system-radius-field-${this.size}`]: `${layout.radius}px`,
         };
         const showListbox = this.multiple && this.useMultipleListBox;
-        const content = (h("div", { key: '932b5549b6b27e0fec8096127dd8fb09f682fe56', role: "button", tabindex: this.disabled ? -1 : 0, class: "sd-file-picker__content", ref: el => (this.contentRef = el), onClick: this.handleClick, onKeyDown: e => {
+        const content = (h("div", { key: 'd1c3af9860038ddb11d540af8312ad59d051524f', role: "button", tabindex: this.disabled ? -1 : 0, class: "sd-file-picker__content", ref: el => (this.contentRef = el), onClick: this.handleClick, onKeyDown: e => {
                 if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, h("input", { key: 'd10a6a2bc0606954588cee4ad77898ad28cbbe75', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder ?? 'Click to upload' }), h("sd-icon", { key: '70102b5a6ff6606423ba36601015bccc2d48f22c', name: "attachFile", size: Number(FILE_PICKER_LAYOUT.iconSize), color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: '7a0696f4f4b3ccd56c707bf2ecee59562ceb1a7b', ref: el => (this.fileNamesRef = el), class: {
+            } }, h("input", { key: '760c38cd73d0a2a3d0832c5597c0e22bf737bb06', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder ?? 'Click to upload' }), h("sd-icon", { key: '96ff0bf43eb3f17df92bd8834cd38a1ae36ad475', name: "attachFile", size: Number(layout.iconSize), color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: '0757b8b734e21fcf7bed04d7306ee3a9d202f950', ref: el => (this.fileNamesRef = el), class: {
                 'sd-file-picker__text': true,
                 'sd-file-picker__text--placeholder': !hasFiles,
                 'sd-file-picker__text--active': hasFiles,
-            } }, displayText), showListbox && hasFiles && !this.disabled && (h("sd-ghost-button", { key: 'a68ba1cd8dabf75279eba8993befef8dd03008ae', icon: "caretDown", size: "xxs", ariaLabel: "toggle file list", disabled: this.disabled, class: {
+            } }, displayText), showListbox && hasFiles && !this.disabled && (h("sd-ghost-button", { key: '8e42d38452d00256147ee65e614bdeb7040917d7', icon: "caretDown", size: "xxs", ariaLabel: "toggle file list", disabled: this.disabled, class: {
                 'sd-file-picker__caret': true,
                 'sd-file-picker__caret--open': this.isListboxOpen,
-            }, onClick: this.handleListboxToggle })), !this.disabled && hasFiles && (h("sd-ghost-button", { key: '6abcae4722ebbe7f888ce500774f3a749061ad4e', icon: "close", size: "xxs", ariaLabel: "clear", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: 'f1e3821eee58a1b126a6375a8d830a9fc9055cbe', class: "sd-file-picker__tooltip" }, displayText))));
-        return (h("div", { key: '952fbde18439ce103d62ede9e7b7a59dda408aa1', class: {
+            }, onClick: this.handleListboxToggle })), !this.disabled && hasFiles && (h("sd-ghost-button", { key: '6f65042ce5e4efa1b6ab126653d434ca77cdd790', icon: "close", size: "xxs", ariaLabel: "clear", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: 'b41146f39c384a5954dca22f2d3da767a63ef0c0', class: "sd-file-picker__tooltip" }, displayText))));
+        return (h("div", { key: '858fea100a9317ac6806ae40699e9f5608394e10', class: {
                 'sd-file-picker__wrapper': true,
                 'sd-file-picker--inline': this.inline,
                 'sd-file-picker--inline-disabled': this.inline && this.disabled,
-            }, style: cssVars }, h("sd-field", { key: '08ed598117f29d7c6977f75a73300c033bb6ec9d', borderless: this.inline, 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content), this.useMultipleListBox ? this.renderListbox() : this.renderChipList()));
+            }, style: cssVars }, h("sd-field", { key: '1b7a6a57e4e46c253bd9f77c500dabf92edc2ae0', borderless: this.inline, size: this.size, 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content), this.useMultipleListBox ? this.renderListbox() : this.renderChipList()));
     }
     static get watchers() { return {
         "value": [{
@@ -816,12 +874,12 @@ const SdInput = class {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (h("sd-field", { key: '5707ad3cdfd0194d4200899f3838e6e7ff03cb34', 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, readonly: this.readonly, 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: 'a5146f59435269a419c8273c72e7704a359108f0', class: "sd-input__content" }, h("slot", { key: 'cfa0393abc20439a7746e874215864d02d41ce17', name: "prefix" }), h("input", { key: 'bf7503a5701e237868c7be863f5d2653d074fb66', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: 'bc16a709380137d6993753892e71cab33e0fc070', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: '4053ddc137f8d104a3e619f81ca2c99fd7e52a75', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: '66c7d6a9292bf8129fea6a33d2288733c264a39f', 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, readonly: this.readonly, 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: 'b429ae6e521440eb917b17b10525ff3d3767a50d', class: "sd-input__content" }, h("slot", { key: 'dc1cd825ff1bea6484eada71d5aff621f82522c2', name: "prefix" }), h("input", { key: '93bd923644ac7660c2c9be28e4c64d39d93365c3', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: 'ec2f67a7ae01ebbaaa1f48f1e231f6fe2cfb413c', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: 'de33f6902ab5560e151ef13e01ef84eea14da17d', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
                 if (this.disabled || this.readonly)
                     return;
                 this.internalValue = '';
                 await this.formField?.sdValidate();
-            } })), this.type === 'password' && (h("sd-ghost-button", { key: '7062bbfecd4289185dc847bca0524405d6f4bbfe', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
+            } })), this.type === 'password' && (h("sd-ghost-button", { key: 'db07c28cede67dbec93454b5ea90e94f72c5f313', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
                 if (this.disabled || this.readonly)
                     return;
                 this.passwordVisible = !this.passwordVisible;
@@ -946,6 +1004,8 @@ const SdNumberInput = class {
     useButton = false;
     /** 소수점 입력 허용 여부 */
     useDecimal = false;
+    /** 소수점 이하 최대 자리수 (useDecimal일 때만 적용, 초과 입력한 소수부는 잘라냄) */
+    maxDecimalLength;
     /** 입력 값 */
     value = null;
     /** 레이블 텍스트 */
@@ -1026,6 +1086,31 @@ const SdNumberInput = class {
         const result = isNegative ? '-' + formatted : formatted;
         return decPart !== undefined && decPart !== '' ? result + '.' + decPart : String(result);
     }
+    /** useDecimal이면서 유효한 maxDecimalLength가 있을 때만 소수점 이하 제한 자리수를 반환합니다. */
+    getDecimalLimit() {
+        if (!this.useDecimal ||
+            this.maxDecimalLength === undefined ||
+            !Number.isFinite(this.maxDecimalLength)) {
+            return undefined;
+        }
+        return Math.max(0, Math.floor(this.maxDecimalLength));
+    }
+    /** 소수부를 제한 자리수로 잘라낸 문자열을 반환합니다(반올림하지 않고 잘라냄). */
+    truncateToDecimalLimit(cleaned, limit) {
+        if (!cleaned.includes('.'))
+            return cleaned;
+        const [intPart, fractionPart = ''] = cleaned.split('.');
+        const truncatedFraction = fractionPart.slice(0, limit);
+        return truncatedFraction === '' ? intPart : `${intPart}.${truncatedFraction}`;
+    }
+    /** 숫자값의 소수부를 제한 자리수로 잘라냅니다(제한이 없으면 원본 그대로). */
+    applyDecimalLimit(value) {
+        const decimalLimit = this.getDecimalLimit();
+        if (decimalLimit === undefined)
+            return value;
+        const parsed = parseFloat(this.truncateToDecimalLimit(value.toString(), decimalLimit));
+        return isNaN(parsed) ? value : parsed;
+    }
     parseInput(input) {
         if (input.trim() === '')
             return null;
@@ -1033,12 +1118,15 @@ const SdNumberInput = class {
         if (!/^-?(\d+\.?\d*|\d*\.\d+)$/.test(cleaned)) {
             return null;
         }
-        const parsed = parseFloat(cleaned);
-        if (isNaN(parsed))
-            return null;
         if (!this.useDecimal && cleaned.includes('.')) {
             return null;
         }
+        // useDecimal이면서 maxDecimalLength가 설정된 경우 소수부를 제한 자리수로 잘라냄(반올림 아님)
+        const decimalLimit = this.getDecimalLimit();
+        const normalized = decimalLimit !== undefined ? this.truncateToDecimalLimit(cleaned, decimalLimit) : cleaned;
+        const parsed = parseFloat(normalized);
+        if (isNaN(parsed))
+            return null;
         return parsed;
     }
     clampMinMax(value) {
@@ -1193,6 +1281,7 @@ const SdNumberInput = class {
         if (nextVal > this.max) {
             nextVal = this.max;
         }
+        nextVal = this.applyDecimalLimit(nextVal);
         if (nextVal === currentVal)
             return;
         this.internalValue = nextVal;
@@ -1205,6 +1294,7 @@ const SdNumberInput = class {
         if (nextVal < this.min) {
             nextVal = this.min;
         }
+        nextVal = this.applyDecimalLimit(nextVal);
         if (nextVal === currentVal)
             return;
         this.internalValue = nextVal;
@@ -1245,15 +1335,15 @@ const SdNumberInput = class {
             '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
             '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
         };
-        return (h("sd-field", { key: 'abfc6fbc218ed829eabbf33476e6feb25ed0b783', 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, readonly: this.readonly, 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("div", { key: 'ab9f55eb4dcf8b345fae2e0546833f9d4216df1d', class: {
+        return (h("sd-field", { key: 'ffa6befb9565a33e762fce231c29d7a2f663eb08', 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, readonly: this.readonly, 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("div", { key: '2fb1686b071fd69c65fc0c908807c029edc3b253', class: {
                 'sd-number-input__content': true,
                 'sd-number-input__content--no-stepper': !this.useButton,
-            } }, this.useButton && (h("button", { key: '3a12f0c1c1963790b3337f34452d9bc200e072c1', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'cae2acccfb818a25a1d2c6abe8a0accdff293931', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+            } }, this.useButton && (h("button", { key: '6b2464867bb0224f4fbcb50ea4e4bfc5386474ba', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'f65e9144ad93f4ba8d293b5af1bf9fd1286e7520', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && h("span", { key: '37a2724e2973205cd9f0083d796c556aed8c50c6', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: '5d9bfccaa121f0bc3ecaac4d8db3023d1d03dd68', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
+                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && h("span", { key: '3d89b3557f961f36b429e3cf4ae247098a412b30', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: 'c5c503b634aee3b0c8d81f855b5de1d0abe35eac', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
                 textAlign: this.useButton ? 'center' : 'right',
                 ...this.inputStyle,
-            } }), this.inputSuffix && h("span", { key: 'ba990181e4b3d100087d20b177710f09b61f23cc', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: '91666af2e343d3098bc020fb7266aa1e785783c3', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '336ea010c7e9e314c98f56f4c79c86944087912e', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && h("span", { key: '15177064a4daab2ede3af4f8758912da266f1c29', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: 'dcc1fbfe7c4e7eaa6db95fe7dc9a34f4b82ade8b', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '58eee48f37c0e942a3734a9275a9d459bc9bc420', name: "add", size: iconSize, color: this.isIncrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
                 : NUMBER_INPUT_STEPPER.icon.default }))))));
     }
@@ -1275,7 +1365,7 @@ const SdRadioGroup = class {
         registerInstance(this, hostRef);
         this.change = createEvent(this, "sdUpdate", 7);
     }
-    /** 현재 선택된 값 */
+    /** 현재 선택된 값 (미지정 시 선택 없음) */
     value;
     /** 라디오 옵션 목록 */
     options = [];
@@ -1303,8 +1393,8 @@ const SdRadioGroup = class {
         return classes.join(' ');
     }
     render() {
-        return (h("div", { key: 'e5f4051ea9b2843816a849a018b8040e7b951a55', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
-            return (h("sd-radio", { key: `radio-${option.value}`, val: String(option.value), value: String(this.value), label: option.label, disabled: this.disabled || !!option.disabled, onSdUpdate: ({ detail }) => this.handleRadioChange(detail) }));
+        return (h("div", { key: '7ee8aaf1872ac215e7d4c27e71d4a0a41c6f5e4e', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
+            return (h("sd-radio", { key: `radio-${option.value}`, val: String(option.value), value: String(this.value ?? ''), label: option.label, disabled: this.disabled || !!option.disabled, onSdUpdate: ({ detail }) => this.handleRadioChange(detail) }));
         })));
     }
     static get watchers() { return {
@@ -1605,15 +1695,15 @@ const SdSelect = class {
                 this.closeDropdown();
             },
         };
-        return (h("sd-field", { key: '13ca7b4ddb0e124e90dd2b843df9a11b7cc98487', 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
+        return (h("sd-field", { key: 'a8107af7c63f38eee519b44e33021f3d650c97a4', 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
                 this.hovered = true;
             }, onMouseLeave: () => {
                 this.hovered = false;
-            } }, h("div", { key: '3892e98679d28ed6199578f1033571fec2137143', class: "sd-select", ref: el => {
+            } }, h("div", { key: 'd1b3c4d6f1da7ca9eeb31a19db7dd7b28a94103d', class: "sd-select", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-select-trigger", { key: '150dda9f50762bedc538181d8c1e5623e8d3fbac', ref: el => {
+            } }, h("sd-select-trigger", { key: 'c2ce229c398cf35aa1cdc58a12eb7ed81f316d0d', ref: el => {
                 this.triggerComponentRef = el;
-            }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '554e158719e791600a6215223a5c0c7ac289b00a', ...portalProps }, h("sd-select-listbox", { key: 'c309fdfc53ff0c970ff33eb9eeec58636a869408', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.dropdownWidth || this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+            }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '1f67ba5abb693d49b2e332edb991bf89edbc2456', ...portalProps }, h("sd-select-listbox", { key: '108acb8763dc0cf4bd7e807643140a9f41381248', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.dropdownWidth || this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
     static get watchers() { return {
         "isOpen": [{
@@ -1783,7 +1873,7 @@ const SdTextarea = class {
             '--sd-system-size-field-sm-height': 'auto',
             '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
         };
-        return (h("sd-field", { key: '2f967ed7e9d9e419376162f9569847b931f126d5', 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, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, 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: 'aa4f554c200a1b0aeadf4cac635facfabb158b90', class: "sd-textarea__content" }, h("textarea", { key: 'fe0026af57e40e6d4fb8e16c87985352de401fa5', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
+        return (h("sd-field", { key: 'f8fd8949824938bb79f101de2e5eca7980224b09', 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, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, 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: '382441be15dd047888cf876006f1966256a503b7', class: "sd-textarea__content" }, h("textarea", { key: '5f5985ccdcc401f4aff2f47fe40003abeb76e8b3', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
     }
     static get watchers() { return {
         "value": [{