@sellmate/design-system 1.0.21 → 1.0.23

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

@@ -1,35 +1,20 @@
 'use strict';
 
-var index = require('./index-D-PnW6jc.js');
+var index = require('./index-Qvv0fGgj.js');
+var component_button = require('./component.button-C6xBMwHf.js');
 var resolveColor = require('./resolveColor-4RlaGD62.js');
 var useDatePicker = require('./useDatePicker-cK_XK_P6.js');
-var selectKeyboardNavigation = require('./select-keyboard-navigation-CtstKOb3.js');
-var tooltipArrow = require('./tooltipArrow-CMyNLSC-.js');
-
-const size = {
-	xs: {
-		icon: "12"
-	},
-	sm: {
-		icon: "16"
-	},
-	md: {
-		icon: "20"
-	},
-	lg: {
-		icon: "24"
-	}
-};
-var buttonTokens = {
-	size: size};
+var selectKeyboardNavigation = require('./select-keyboard-navigation-s2wP37xZ.js');
+var baseDropdownEvent = require('./base-dropdown-event-BTPlZ1KF.js');
+var tooltipArrow = require('./tooltipArrow-Mb2Dhc7T.js');
 
 const sdButtonCss = () => `sd-button{display:inline-flex;width:fit-content;height:fit-content}.sd-button{--sd-button-height:34px;--sd-button-padding-x:20px;--sd-button-gap:8px;--sd-button-font-family:inherit;--sd-button-font-size:16px;--sd-button-font-weight:500;--sd-button-text-decoration:none;--sd-button-label-min-width:auto;--sd-button-icon-only-size:var(--sd-button-height);text-decoration:none;cursor:pointer;border-radius:var(--sd-button-radius-default, 4px);transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border:none;padding:0 var(--sd-button-padding-x);min-width:var(--sd-button-min-width, auto);min-height:var(--sd-button-height);font-family:var(--sd-button-font-family);font-size:var(--sd-button-font-size);font-weight:var(--sd-button-font-weight);text-decoration:var(--sd-button-text-decoration)}.sd-button--xs{--sd-button-height:var(--sd-button-xs-height, 24px);--sd-button-padding-x:var(--sd-button-xs-padding-x, 8px);--sd-button-gap:var(--sd-button-xs-gap, 4px);--sd-button-font-family:var(--sd-button-xs-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-xs-typography-font-size, 12px);--sd-button-font-weight:var(--sd-button-xs-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-xs-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-xs-min-width, auto);--sd-button-icon-only-size:var(--sd-button-icon-only-xs-width, var(--sd-button-height));line-height:20px}.sd-button--sm{--sd-button-height:var(--sd-button-sm-height, 28px);--sd-button-padding-x:var(--sd-button-sm-padding-x, 12px);--sd-button-gap:var(--sd-button-sm-gap, 6px);--sd-button-font-family:var(--sd-button-sm-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-sm-typography-font-size, 12px);--sd-button-font-weight:var(--sd-button-sm-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-sm-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-sm-min-width, auto);--sd-button-icon-only-size:var(--sd-button-icon-only-sm-width, var(--sd-button-height));line-height:20px}.sd-button--md{--sd-button-height:var(--sd-button-md-height, 34px);--sd-button-padding-x:var(--sd-button-md-padding-x, 20px);--sd-button-gap:var(--sd-button-md-gap, 8px);--sd-button-font-family:var(--sd-button-md-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-md-typography-font-size, 16px);--sd-button-font-weight:var(--sd-button-md-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-md-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-md-min-width, auto);--sd-button-icon-only-size:var(--sd-button-icon-only-md-width, var(--sd-button-height));line-height:26px}.sd-button--lg{--sd-button-height:var(--sd-button-lg-height, 62px);--sd-button-padding-x:var(--sd-button-lg-padding-x, 28px);--sd-button-gap:var(--sd-button-lg-gap, 12px);--sd-button-font-family:var(--sd-button-lg-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-lg-typography-font-size, 18px);--sd-button-font-weight:var(--sd-button-lg-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-lg-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-lg-min-width, auto);--sd-button-icon-only-size:var(--sd-button-icon-only-lg-width, var(--sd-button-height));line-height:30px}.sd-button--has-label{--sd-button-min-width:var(--sd-button-label-min-width, auto)}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:"";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:var(--sd-button-border-width-default, 1px) solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:var(--sd-button-border-width-default, 1px) solid var(--sd-button-border-disabled, #CCCCCC);background:var(--sd-button-bg-disabled, #E1E1E1);color:var(--sd-button-content-disabled, #888888);cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:var(--sd-button-icon-only-size, var(--sd-button-height));min-width:var(--sd-button-icon-only-size, var(--sd-button-height));height:var(--sd-button-icon-only-size, var(--sd-button-height))}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-button-gap);z-index:1;font-weight:inherit}`;
 
 const ICON_SIZES = {
-    xs: Number(buttonTokens.size.xs.icon),
-    sm: Number(buttonTokens.size.sm.icon),
-    md: Number(buttonTokens.size.md.icon),
-    lg: Number(buttonTokens.size.lg.icon),
+    xs: Number(component_button.buttonTokens.size.xs.icon),
+    sm: Number(component_button.buttonTokens.size.sm.icon),
+    md: Number(component_button.buttonTokens.size.md.icon),
+    lg: Number(component_button.buttonTokens.size.lg.icon),
 };
 const SdButton = class {
     constructor(hostRef) {
@@ -388,10 +373,10 @@ const SdDateRangePicker = class {
         this.setHoverDate(hoverDate);
     }
     render() {
-        return (index.h("div", { key: '96cd4e99ae976517e7b24c5ff3046af976adc5cb', class: {
+        return (index.h("div", { key: '1862958ea2e972700ea83ed61f0285f09cf52c02', class: {
                 'sd-date-range-picker': true,
                 'sd-date-range-picker--disabled': this.disabled,
-            } }, index.h("sd-input", { key: 'a84838a1a84d990b289f0b753ccf3e2f45da4770', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, index.h("sd-icon", { key: 'd926c672dcf457a68ebe644b32c90a03ba29b175', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: '0af519c7ac2ade00972e23b9ecb0344989d87f51', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, index.h("div", { key: 'd9109e573215092c6b386ae27ac7377c4347df4c', class: "sd-date-range-picker__menu" }, index.h("div", { key: 'ca4743a26ed0571bc3b63218a32a113e50dbd81a', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, index.h("button", { key: '6f0fe1ede6d171e749a241fbeec32056250709b9', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, index.h("sd-icon", { key: '821526a069a845f271b0e5db607f747efe4e610c', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("div", { key: 'e9402009c8b034953d7ff4be5a4eea64d7fed21d', class: "header-label" }, this.prevYear), index.h("button", { key: 'b752631ab64e32a4a39c13898cc3db5e25897c4b', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, index.h("sd-icon", { key: '62c6e0004ff1a0d8f260e11b9d17ea7ccca942ee', name: "arrowRight", size: "12", color: "#CCCCCC" }))), index.h("div", { key: '3a05a7e02664be8d9dfb85d0bada03a2d352af12', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index$1) => (index.h(index.Fragment, null, index$1 === 1 && index.h("div", { class: "separator" }), index.h("div", { key: index$1, class: "calendar-container" }, index.h("div", { class: "calendar-header" }, index.h("button", { type: "button", name: "month", title: "Month", class: index$1 === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index$1 === 0 ? 'prev' : 'next') }, index.h("sd-icon", { name: index$1 === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index$1 === 0
+            } }, index.h("sd-input", { key: '808670f22b59401c0125dd1191a6180cc6f72799', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, index.h("sd-icon", { key: '123e8beb77c3fceaaa3a8d994f8a8539fe35d317', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: '448c174030598565f910df316002d78bdfec3f89', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, index.h("div", { key: 'b5cf493587c7831e59a6156df87cb56be6bd585b', class: "sd-date-range-picker__menu" }, index.h("div", { key: 'c044d5377d0d88affecaa61eec2a2239b87158d8', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, index.h("button", { key: 'c497891fe1d06b8f6c1a79000edc0e4f4fd79735', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, index.h("sd-icon", { key: 'ad899e9daec0752b744bc73e9cbd99c6a731b7db', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("div", { key: '595ac699adc90e8b15775ce47a2cda8bbc2f5c25', class: "header-label" }, this.prevYear), index.h("button", { key: '684ce75f14b08cd57ce6f019a1dfb3ab384b0c11', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, index.h("sd-icon", { key: '31dde7526d0ee3e7abf965eea6f825d557e7c745', name: "arrowRight", size: "12", color: "#CCCCCC" }))), index.h("div", { key: '3e70334c95d29f302f2dc6d1cb7fbb3603c74a48', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index$1) => (index.h(index.Fragment, null, index$1 === 1 && index.h("div", { class: "separator" }), index.h("div", { key: index$1, class: "calendar-container" }, index.h("div", { class: "calendar-header" }, index.h("button", { type: "button", name: "month", title: "Month", class: index$1 === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index$1 === 0 ? 'prev' : 'next') }, index.h("sd-icon", { name: index$1 === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index$1 === 0
             ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
             : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), index.h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (index.h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), index.h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (index.h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date === this.formatDate(index$1, Number(day))), type: this.getDateBoxType(this.formatDate(index$1, Number(day))), isToday: useDatePicker.today === this.formatDate(index$1, Number(day)), disabled: !day ? true : this.isDisabledDate(this.formatDate(index$1, Number(day))), inRange: this.isDateInRange(this.formatDate(index$1, Number(day))), isStartDate: this.dateRange[0] === this.formatDate(index$1, Number(day)), isEndDate: this.dateRange[1] === this.formatDate(index$1, Number(day)), onSdClick: () => this.handleDateClick(index$1, Number(day)), onSdMouseOver: () => this.handleDateHover(index$1, Number(day)) }))))))))))))));
     }
@@ -523,15 +508,15 @@ const SdField = class {
         }
     }
     render() {
-        return (index.h("div", { key: '3c69abe493110b5665795706a9ae0e525f213aca', class: {
+        return (index.h("div", { key: '9ed0e615761d5c76dff1e95318b131bde22cd376', class: {
                 'sd-field': true,
                 'sd-field--has-label': !!this.label,
                 'sd-field--has-label-inside': !!this.label && this.insideLabel,
                 [this.fieldStatus]: !!this.fieldStatus,
-            } }, index.h("div", { key: 'decc6821b7172f5ecc2343472014c08674725904', class: "sd-field__wrapper" }, this.renderLabel(this.label), index.h("div", { key: 'ca5e93f049db10ecaaaab091fdf394ac4b55e292', class: {
+            } }, index.h("div", { key: '6d051479c9874f3c765d50096db80c73c4fc461b', class: "sd-field__wrapper" }, this.renderLabel(this.label), index.h("div", { key: '64ea18d481f0ad689ed984cd40837717fb37a751', class: {
                 'sd-field__control': true,
                 'sd-field__control--label-inside ': !!this.label && this.insideLabel,
-            } }, index.h("slot", { key: '7ee38983d32985f4b4a035830bcdca0e14b2cf71' }))), this.errorMsg && index.h("div", { key: 'c2d6ef860ced48657b906806f2618594b094ea79', class: "sd-field__error-message" }, this.errorMsg)));
+            } }, index.h("slot", { key: '8e043b3e476e0d574612c892f6c8c0bca28c117f' }))), this.errorMsg && index.h("div", { key: '22d42bacdbdfe85dbe08395d21e59a06946986f5', class: "sd-field__error-message" }, this.errorMsg)));
     }
     renderLabel(label) {
         if (!label)
@@ -692,7 +677,7 @@ const SdFloatingPopover = class {
         this.close.emit();
     }
     render() {
-        return index.h("slot", { key: '2f33d335a7cf00ace576aed610a0e77d711a5b10' });
+        return index.h("slot", { key: 'fe02da5ce55072c8fa313e467967f2a1c18f86bb' });
     }
 };
 SdFloatingPopover.style = sdFloatingPortalCss();
@@ -2706,7 +2691,7 @@ const SdIcon = class {
     }
     render() {
         const IconComponent = Icons[this.name]?.[this.size];
-        return (index.h("i", { key: '1d6a48769c99bbfe9576016e24766b8c82ab570e', class: this.getIconClasses(), style: this.iconStyle }, index.h(IconComponent, { key: '3fdb4195ef13656e79b402a4eae2fb0210fb3a97', color: this.resolvedColor })));
+        return (index.h("i", { key: '69b8654e2fd745282c1878306a5c464ba0995468', class: this.getIconClasses(), style: this.iconStyle }, index.h(IconComponent, { key: '64b00309d5ad7787c4fbf2c200719fd74062ccbd', color: this.resolvedColor })));
     }
 };
 SdIcon.style = sdIconCss();
@@ -2804,7 +2789,7 @@ const SdInput = class {
         }
     };
     render() {
-        return (index.h("sd-field", { key: '87f02ba890fd952f89eb86d200318038137ba1a4', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, index.h("label", { key: '0bb5824067b33c178b1f60ececdccfe0a3d5f294', class: "sd-input__content", style: { width: '100%' } }, index.h("slot", { key: '6f67712b4ca708ba511c57379a6b5118732f146a', name: "prefix" }), index.h("input", { key: 'b337a1161dedb41ed29a690fa963c0ac60dd0c79', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type, 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 }), index.h("slot", { key: 'bf45d9fd71551dc6a3bb96cdc44512796beee923', name: "suffix" }), this.clearable && this.internalValue && (index.h("sd-icon", { key: 'aed0a5d9115ba8b7601dc62423349bee1a9978c7', name: "close", color: "grey_65", size: "16", class: "sd-input__clear-icon", onClick: async () => {
+        return (index.h("sd-field", { key: '7f32214220ee8dc3e830597b84f846096b48b305', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, index.h("label", { key: '71b1f7ce70d475e28f1d9f29c9a49b3f2f548f53', class: "sd-input__content", style: { width: '100%' } }, index.h("slot", { key: 'c0c92d686b4cee0930716a47a701459c3afc41ff', name: "prefix" }), index.h("input", { key: '1cdacf0a76d118c0711bae5b1263650c195db838', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type, 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 }), index.h("slot", { key: '7786756fca59c02dfb159f10e2925f73b64f0366', name: "suffix" }), this.clearable && this.internalValue && (index.h("sd-icon", { key: '82b24cae340687d7412ec5210548ad92e33be744', name: "close", color: "grey_65", size: "16", class: "sd-input__clear-icon", onClick: async () => {
                 this.internalValue = '';
                 await this.formField?.sdValidate();
             } })))));
@@ -2831,7 +2816,7 @@ const SdLoadingSpinner = class {
         return resolveColor.resolveColor(this.color);
     }
     render() {
-        return (index.h(index.Fragment, { key: 'c3b3448fcc65334af3246f80157b195ec5595afe' }, index.h("svg", { key: '24701b65d17e56434cf46b72dbd5acec208b5dc8', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, index.h("circle", { key: 'e19c68c082348d36eecd05fa561eee91182349f2', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+        return (index.h(index.Fragment, { key: '2b60d18fe2f1dc23d90c5552202cdea60a91b2c0' }, index.h("svg", { key: 'd8e8716433c206019384899897b052d28d486f92', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, index.h("circle", { key: 'c9aaffe398dd40ccea3a2d8a89cb880e3eeb5a6d', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
     }
 };
 SdLoadingSpinner.style = sdLoadingSpinnerCss();
@@ -3126,17 +3111,17 @@ const SdNumberInput = class {
         const inputStyles = {
             textAlign: this.useButton ? 'center' : 'right',
         };
-        return (index.h("sd-field", { key: '7aa387eeb5850052e121931b3f8183373b4319aa', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), style: inputWidth }, index.h("label", { key: 'f5bbb6c76e32de4aefe59c6958a38e1a560f05c9', class: {
+        return (index.h("sd-field", { key: 'e72a01e264aa4d680aa740f5098e3be9bb7ac8ac', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), style: inputWidth }, index.h("label", { key: '3006df4eaf22ecf7e9ad330270623ba7cbbf9c9a', class: {
                 'sd-number-input': true,
                 [this.getInputStatus()]: true,
                 'sd-number-input--with-buttons': this.useButton,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, index.h("input", { key: 'fc26b7cf0d121025c9a748b158640e03188d72d3', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__input ${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, style: inputStyles, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.useButton && (index.h("div", { key: 'c9325ea7dd19c02fead55a0d63ac0b7b16143d08', class: "sd-number-input__buttons" }, index.h("button", { key: 'ec96811ce7046a3fe9506ca0635db97413d8283a', type: "button", class: {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, index.h("input", { key: 'e52177d9c7266a1630d9287fdc155f12a5dc7cca', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__input ${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, style: inputStyles, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.useButton && (index.h("div", { key: '18f45963c22ee6a1cdd52e45b41191c3726328ce', class: "sd-number-input__buttons" }, index.h("button", { key: '73658fecb2300094b1880cae4595975b777b802a', type: "button", class: {
                 'sd-number-input__button': true,
                 'sd-number-input__button--decrement': true,
-            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, index.h("sd-icon", { key: '70311a7723356ecc88125042d366bf567b0b5a2a', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), index.h("button", { key: 'b7086218dc98fec4287e4becb0d834634fd52055', type: "button", class: {
+            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, index.h("sd-icon", { key: 'd2b4d8eb6b7f5dd30ba704c7d7b35051a5b0df7b', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), index.h("button", { key: 'ddcd2255b7870657afbb6549cdc185a804aa3dbf', type: "button", class: {
                 'sd-number-input__button': true,
                 'sd-number-input__button--increment': true,
-            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, index.h("sd-icon", { key: 'b945a1561978dc4bba1868fa57652e94a6bcfc34', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
+            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, index.h("sd-icon", { key: '971098976698154e8e644a93265dc746177c2ce0', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
     }
     static get watchers() { return {
         "value": [{
@@ -3224,12 +3209,12 @@ const SdPagination = class {
         }
     }
     render() {
-        return (index.h("div", { key: 'feed08139c382f91539bc316a967ed1738529688', class: this.paginationClasses }, index.h("div", { key: '42c908d7a685f2acab29a94d040e4f4c513fff38', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "pagination-info" }, index.h("span", { class: "current-page" }, this.currentPage), index.h("span", null, "/"), index.h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (index.h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (index.h("div", { key: '8ab0a0f2dfb17154eaba138aa0688606500be296', class: this.paginationClasses }, index.h("div", { key: '04b985f2d3e06ef35b18d6d375021499f36952f1', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "pagination-info" }, index.h("span", { class: "current-page" }, this.currentPage), index.h("span", null, "/"), index.h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (index.h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'pagination-btn': true,
                 'pagination-btn--selected': this.currentPage === n,
             }, disabled: this.currentPage === n, style: {
                 '--pagination-btn-width': `${this.buttonWidth}px`,
-            }, onClick: () => this.handlePageChange(n) }, n)))), index.h("div", { key: '2be11ae773c0bce71ecaf53f99daff3f5b2d567d', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), index.h("div", { key: 'c2ef87605487622bed06cac8d13d180f4af23e76', class: "append-btns" }, this.renderNextButtons())));
     }
 };
 SdPagination.style = sdPaginationCss();
@@ -3250,25 +3235,31 @@ const SdPortal = class {
     wrapper;
     rafId;
     isInsideClick = false;
+    handleObservedScroll = () => this.updatePosition();
     resizeObserver;
     mutationObserver;
+    scrollParents = [];
+    isObserved = false;
+    handleOpenChange() {
+        this.syncPortalState();
+    }
     componentDidLoad() {
         this.container = this.resolveContainer();
-        this.createWrapper();
-        this.moveSlotContent();
-        this.updatePosition();
-        this.observeParent();
+        this.syncPortalState();
     }
     componentDidRender() {
-        if (!this.wrapper)
-            return;
-        this.wrapper.style.display = this.open ? 'block' : 'none';
-        if (this.open)
-            this.updatePosition();
+        this.syncPortalState();
     }
     disconnectedCallback() {
         this.unobserveParent();
-        this.wrapper?.remove();
+        if (this.wrapper?.parentNode) {
+            try {
+                this.wrapper.parentNode.removeChild(this.wrapper);
+            }
+            catch {
+                // Stencil spec mock DOM can already detach the wrapper before this callback runs.
+            }
+        }
     }
     resolveContainer() {
         const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;
@@ -3283,6 +3274,26 @@ const SdPortal = class {
         });
         this.container.appendChild(this.wrapper);
     }
+    ensureWrapper() {
+        if (this.wrapper)
+            return;
+        this.container ||= this.resolveContainer();
+        this.createWrapper();
+        this.moveSlotContent();
+    }
+    syncPortalState() {
+        if (!this.open) {
+            this.wrapper && (this.wrapper.style.display = 'none');
+            this.unobserveParent();
+            return;
+        }
+        this.ensureWrapper();
+        if (!this.wrapper)
+            return;
+        this.wrapper.style.display = 'block';
+        this.observeParent();
+        this.updatePosition();
+    }
     moveSlotContent() {
         if (!this.wrapper)
             return;
@@ -3324,19 +3335,57 @@ const SdPortal = class {
     }
     // parentRef의 이동 / 크기변경 감지
     observeParent() {
-        if (!this.parentRef)
+        if (!this.parentRef || this.isObserved)
             return;
-        this.resizeObserver = new ResizeObserver(() => this.updatePosition());
-        this.resizeObserver.observe(this.parentRef);
-        this.mutationObserver = new MutationObserver(() => this.updatePosition());
-        this.mutationObserver.observe(document.body, {
-            childList: true,
-            subtree: true,
-        });
+        this.observeScrollParents(this.parentRef);
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => this.updatePosition());
+            this.resizeObserver.observe(this.parentRef);
+        }
+        if (typeof MutationObserver !== 'undefined') {
+            this.mutationObserver = new MutationObserver(() => this.updatePosition());
+            this.mutationObserver.observe(document.body, {
+                childList: true,
+                subtree: true,
+            });
+        }
+        this.isObserved = true;
     }
     unobserveParent() {
+        if (!this.isObserved)
+            return;
+        this.unobserveScrollParents();
         this.resizeObserver?.disconnect();
+        this.resizeObserver = undefined;
         this.mutationObserver?.disconnect();
+        this.mutationObserver = undefined;
+        this.isObserved = false;
+    }
+    observeScrollParents(element) {
+        const nextScrollParents = this.getScrollParents(element);
+        nextScrollParents.forEach(parent => {
+            parent.addEventListener('scroll', this.handleObservedScroll, { passive: true });
+        });
+        this.scrollParents = nextScrollParents;
+    }
+    unobserveScrollParents() {
+        this.scrollParents.forEach(parent => {
+            parent.removeEventListener('scroll', this.handleObservedScroll);
+        });
+        this.scrollParents = [];
+    }
+    getScrollParents(element) {
+        const scrollParents = [];
+        let currentElement = element.parentElement;
+        while (currentElement) {
+            const { overflow, overflowX, overflowY } = getComputedStyle(currentElement);
+            const isScrollable = [overflow, overflowX, overflowY].some(value => /(auto|scroll|overlay)/.test(value));
+            if (isScrollable) {
+                scrollParents.push(currentElement);
+            }
+            currentElement = currentElement.parentElement;
+        }
+        return scrollParents;
     }
     // 외부 클릭 감지
     handleMouseDown(e) {
@@ -3352,8 +3401,13 @@ const SdPortal = class {
         this.close.emit();
     }
     render() {
-        return index.h("slot", { key: 'ba2bf5df16f9bef0acef1ac8a08b090a23d02bc7' });
+        return index.h("slot", { key: 'ceaa6bed28e3b1bd1a539091434fd7acee6a0e4b' });
     }
+    static get watchers() { return {
+        "open": [{
+                "handleOpenChange": 0
+            }]
+    }; }
 };
 
 const sdRadioCss = () => `sd-radio{display:inline-flex;width:fit-content;height:fit-content}sd-radio .sd-radio{cursor:pointer}sd-radio .sd-radio label{display:inline-flex;width:fit-content;align-items:center;gap:8px;cursor:pointer}sd-radio .sd-radio label input{display:inline-block;position:relative;appearance:none;margin:0;width:16px;height:16px;border:1px solid #888888;border-radius:50%;accent-color:#0075FF;background-color:white;cursor:pointer}sd-radio .sd-radio label input:checked{border-color:#0075FF;background-color:white}sd-radio .sd-radio label input:checked::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;border-radius:50%;background-color:#0075FF}sd-radio .sd-radio label input:disabled{border-color:#CCCCCC;background-color:#EEEEEE}sd-radio .sd-radio label input:disabled:checked::before{background-color:#CCCCCC}sd-radio .sd-radio label input:not(:disabled):hover{border-color:#0075FF;background-color:#D9EAFF}sd-radio .sd-radio--disabled{cursor:not-allowed !important}sd-radio .sd-radio--disabled label{cursor:not-allowed !important}sd-radio .sd-radio--disabled label input{cursor:not-allowed !important}`;
@@ -3393,7 +3447,7 @@ SdRadio.style = sdRadioCss();
 
 const sdSelectCss = () => `sd-select{display:inline-flex;flex-flow:column nowrap;height:fit-content}sd-select *:focus,sd-select *:focus-visible,sd-select *:focus-within{outline:none !important}sd-select .sd-select{width:100%}sd-select .sd-select .sd-select__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;height:100%;align-items:center}sd-select .sd-select .sd-select__trigger .sd-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select .sd-select .sd-select__trigger .sd-select__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select .sd-select .sd-select__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select .sd-select .sd-select__arrow--open{transform:rotate(180deg)}`;
 
-const SdSelect = class extends selectKeyboardNavigation.BaseDropdownEvent {
+const SdSelect = class extends baseDropdownEvent.BaseDropdownEvent {
     constructor(hostRef) {
         super();
         index.registerInstance(this, hostRef);
@@ -3713,10 +3767,10 @@ const SdSelectDropdown = class {
         this.isScrolled = scrollTop > 0;
     };
     render() {
-        return (index.h("div", { key: 'ff55e2e133114accc2641a0025bdcf551eda3511', class: {
+        return (index.h("div", { key: '5e56cf091a3c3d510bf932933c33a8c3d85e23ef', class: {
                 'sd-select-dropdown': true,
                 'sd-select-dropdown--ready': this.isDropdownReady,
-            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (index.h("sd-select-search-input", { key: 'bfcee14aa06a9a259dd8e67013ed1074c1f9c318', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index$1) => (index.h("slot", { name: `option-${option.value}` }, index.h("sd-select-option", { option: option, index: index$1, isSelected: this.isOptionSelected(option.value), isFocused: index$1 === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (index.h("slot", { name: "option-placeholder" }, index.h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
+            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (index.h("sd-select-search-input", { key: 'd965a2a5f31507fb6dca30968edf6334d42b4160', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index$1) => (index.h("slot", { name: `option-${option.value}` }, index.h("sd-select-option", { option: option, index: index$1, isSelected: this.isOptionSelected(option.value), isFocused: index$1 === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (index.h("slot", { name: "option-placeholder" }, index.h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
     }
     static get watchers() { return {
         "filteredOptions": [{
@@ -3763,7 +3817,7 @@ const SdSelectOption = class {
         }
     };
     render() {
-        return (index.h("div", { key: 'a4fcca24b0bdde4f4665585c6cede84bd3b64d59', class: {
+        return (index.h("div", { key: '2f88e7ffe5bce12bc3f352d47d0ebed51a1c69ac', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,
@@ -3809,17 +3863,17 @@ const SdSelectSearchInput = class {
         input?.focus({ preventScroll: true });
     }
     render() {
-        return (index.h("div", { key: 'b19a029ef82d876c984c1f827d7a0f29bb823f5d', class: {
+        return (index.h("div", { key: 'da5faa18fac3c974dcfef4050efe580edcb1bb42', class: {
                 'sd-select-search-input': true,
                 'sd-select-search-input--scrolled': !!this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, index.h("sd-input", { key: '8e27f40e1b507f0c5cb2d4bde48750cd0089a9da', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
+            }, onClick: event => event.stopPropagation() }, index.h("sd-input", { key: 'c469ef89d7600626b19ecd94416849825736ff9f', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
                 this.searchInput.emit(String(event?.detail));
             }, onSdFocus: () => {
                 this.searchFocus.emit();
             }, onKeyDown: event => {
                 if (event.code === 'Enter')
                     event.stopPropagation();
-            } }, index.h("sd-icon", { key: '2b38a07cbc0bb0d7dd020ece45f18bdff4c262e5', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
+            } }, index.h("sd-icon", { key: '478a6adda3b53aabf614028bd57a8f987f93cdb6', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
     }
 };
 SdSelectSearchInput.style = sdSelectSearchInputCss();
@@ -4719,10 +4773,10 @@ const SdTextarea = class {
     }
     render() {
         const maxLengthCounter = this.getMaxLengthCounter();
-        return (index.h("div", { key: '888d11be57629e83e1215daddab63351a323672f', class: {
+        return (index.h("div", { key: '5f087de7fd28e3f5fa3315c37b8974e7f5878149', class: {
                 'sd-textarea': true,
                 [this.getTextareaStatus()]: true,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, index.h("div", { key: '1f91a1e435b2dba1817ce181f91bdf3829142682', class: "sd-textarea__content" }, index.h("textarea", { key: 'd883f4cdfd56220cf4382893f94a469f7afd7ff2', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (index.h("div", { key: 'e9350d8e49eb87b2caddfc24079ece0d59c79739', class: "sd-textarea__footer" }, this.helpText !== undefined && index.h("span", { key: 'cda9e2b8b0c15fbc7356597d4363d438688c8e4e', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && index.h("span", { key: '491e990142e07837169e84a3fcc3e80c00bc7153', class: "sd-textarea__counter" }, maxLengthCounter)))));
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, index.h("div", { key: 'fb9e5c4e98cadbf1a694bce4f9fed498bdc8e7cd', class: "sd-textarea__content" }, index.h("textarea", { key: 'b0414813c34a127becd94ec6fc2e516c375d8eea', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (index.h("div", { key: 'fe3f278f3a7d438f8fce8ca4043e00ec0220efd6', class: "sd-textarea__footer" }, this.helpText !== undefined && index.h("span", { key: '16d15de3ff1e49de16b67088d52f7f2848f2e283', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && index.h("span", { key: '84b4adbd09b7af30dbc68b5f3e6473e97fe4c76e', class: "sd-textarea__counter" }, maxLengthCounter)))));
     }
     static get watchers() { return {
         "value": [{

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-D-PnW6jc.js');
+var index = require('./index-Qvv0fGgj.js');
 
 const sdCardCss = () => `sd-card{display:block;height:fit-content}sd-card .sd-card{border-radius:8px;background:white}sd-card .sd-card--bordered{border:1px solid #E1E1E1}`;
 
@@ -11,7 +11,7 @@ const SdCard = class {
     bordered = false;
     sdClass = '';
     render() {
-        return (index.h(index.Fragment, { key: '155504b50cb1c21fc1f847af8a9e8b685f7881ef' }, index.h("div", { key: 'c461e3e40da44586da5e02ad508bf59942a9e82a', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, index.h("slot", { key: '0c0ee023155c08c565c3496c44699a900666b084' }))));
+        return (index.h(index.Fragment, { key: '3999f64f54054b3a1662fac4aacf9f6898acb957' }, index.h("div", { key: '666b8e849b92a5e75d259ff079237911fd591cdd', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, index.h("slot", { key: 'dc8f4ae80e9aca7a0aecaed81f45d40e7df2c067' }))));
     }
 };
 SdCard.style = sdCardCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-D-PnW6jc.js');
+var index = require('./index-Qvv0fGgj.js');
 var useDatePicker = require('./useDatePicker-cK_XK_P6.js');
 
 const sdDatePickerCss = () => `.sd-date-picker.sc-sd-date-picker{width:100%;display:inline-block}.sd-date-picker.sc-sd-date-picker .sd-date-picker--disabled.sc-sd-date-picker .date-icon.sc-sd-date-picker{cursor:not-allowed !important;color:#888888 !important}.sd-date-picker.sc-sd-date-picker .sd-date-picker__input.sc-sd-date-picker{text-align:center !important}.sd-date-picker__menu.sc-sd-date-picker{width:304px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker{display:flex;flex-flow:row nowrap;align-items:center;gap:20px;font-size:14px;padding:0 5px;height:24px;line-height:24px}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .year-nav.sc-sd-date-picker,.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .month-nav.sc-sd-date-picker{display:flex;flex-flow:row nowrap;align-items:center;gap:12px}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .year-nav.sc-sd-date-picker button.sc-sd-date-picker,.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .month-nav.sc-sd-date-picker button.sc-sd-date-picker{background:none;border:none;cursor:pointer;margin:0;padding:0}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .year-nav__current.sc-sd-date-picker{width:40px;text-align:center}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .month-nav__current.sc-sd-date-picker{width:100px;text-align:center}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__days.sc-sd-date-picker{margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px;padding:0 5px}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__days.sc-sd-date-picker .day.sc-sd-date-picker{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__body.sc-sd-date-picker{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}`;
@@ -84,7 +84,7 @@ const SdDatePicker = class {
         this.isOpen = false;
     };
     render() {
-        return (index.h("div", { key: 'bb17d32f08d998e599c90cf1a7a35b17e19d3dc4', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, index.h("sd-input", { key: 'ae028d5999a8df40a83b0d77d2dd5c2e0d0d8eb0', ref: el => (this.inputEl = el), value: this.value, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, index.h("sd-icon", { key: 'fbb954703d19161ab4507696a21278d5b4962b25', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: 'a335d5d317718e30be14fdb4aa1a63cb1347b929', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, index.h("div", { key: '38deef7127db10c91a51b8d6cb017d85fce25888', class: "sd-date-picker__menu" }, index.h("div", { key: 'f2ef8eb33086103df65b434360ecc1aac2949bf9', class: "sd-date-picker__header" }, index.h("div", { key: '8b949551a157de1e2ded7f1de621ccacd136126e', class: "year-nav" }, index.h("button", { key: 'b1bbd712094885223c21f030c32914d14f3904c2', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, index.h("sd-icon", { key: '7bb6f5f216d02cde59eff87fcaebc32eccbaac25', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("span", { key: '645c12556fe1b9f1d1c8f7c4cfe73c3b65ad7431', class: "year-nav__current" }, this.currentYear), index.h("button", { key: 'f6cb58c23effd1aa0566aaacf41170482f03df51', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, index.h("sd-icon", { key: 'e92ef17b8d50e5115a159d2dd984e738a920f065', name: "arrowRight", size: "12", color: "#CCCCCC" }))), index.h("div", { key: '73018a9ca04929f4be017631e8e49a73cef71855', class: "month-nav" }, index.h("button", { key: '0983ca35486b8ad29c09740848b4288b602d0cd9', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, index.h("sd-icon", { key: '2c9257564786287f825c83391f3e05745c23cf9a', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("span", { key: '0b9e048eeea62c452671b74db468aa5587e8ddbf', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), index.h("button", { key: '3ead15a341d5e361e7fb9b1cb2842e5a38b0e03c', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, index.h("sd-icon", { key: 'a3dbd8606dd51f72f1c315f2eea7ff089a95e6fa', name: "arrowRight", size: "12", color: "#CCCCCC" })))), index.h("div", { key: '6bbadc79157ae64bf492a965b78d014dcd968ea6', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (index.h("div", { key: day, class: "day" }, day)))), index.h("div", { key: '972c00769b40eff8015b68e0a9479a6c7c6009db', class: "sd-date-picker__body" }, [
+        return (index.h("div", { key: 'cd2f9c240e1e67806d1d9334937a905330d29a1f', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, index.h("sd-input", { key: '1d77404494bd1fadf15d82dfabecbf61b73e5da8', ref: el => (this.inputEl = el), value: this.value, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, index.h("sd-icon", { key: '627b76b7d276cff34224a130bb2596ca6f2ff49e', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: '9dd006a9051c22dd8084ae9cb72e82c9c0b9be2b', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, index.h("div", { key: '5090eb945c7241f3224b3d2c7a5a96221cc46c04', class: "sd-date-picker__menu" }, index.h("div", { key: 'fa127745062937dfe4f04773b7d6afa74d13bd7a', class: "sd-date-picker__header" }, index.h("div", { key: '7c59917872614d1351a3dfe3783017bd6bc6b75c', class: "year-nav" }, index.h("button", { key: '9e27d2d76ca72820d57c2d9ebc40fa842129da22', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, index.h("sd-icon", { key: '17c8f872b7cfb2825d4c9528b5838487b97529f0', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("span", { key: '41999c78367c90bc4d1d9bfdeb6e3d29d44df2c2', class: "year-nav__current" }, this.currentYear), index.h("button", { key: '52953ec66118afd480e7ce6207a551f18b61ac6d', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, index.h("sd-icon", { key: 'e740bcc2a23f4df850b4e2579ce0cae14419313c', name: "arrowRight", size: "12", color: "#CCCCCC" }))), index.h("div", { key: '7fac86c6405a3936a1f0bdb51e5ca61463ef463a', class: "month-nav" }, index.h("button", { key: '62e22a2063c7ea972bf74ea08af0d519a5250b3f', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, index.h("sd-icon", { key: 'fa53cbb5f2e61a3b1f0807639ce2c81516a1ca57', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("span", { key: '57eb7eaf1e3a11ba69cf4ef4af9852541abd7902', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), index.h("button", { key: '08a783b73efd7a5df2638df7c8bcac5411b2e642', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, index.h("sd-icon", { key: '4a5bb4f4e6f3105fc9fda008eb51a47efe606b81', name: "arrowRight", size: "12", color: "#CCCCCC" })))), index.h("div", { key: '8dd540a7188716446b2e9bcda707d7458a2ea817', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (index.h("div", { key: day, class: "day" }, day)))), index.h("div", { key: 'f2da8d2325cb2fb9cb89d9c93d850cefc62235bf', class: "sd-date-picker__body" }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,