@sellmate/design-system 0.0.48 → 0.0.49

package/hydrate/index.js

@@ -3341,6 +3341,15 @@ var registerComponents = (Cstrs) => {
   }
 };
 var win = window;
+var readTask = (cb) => {
+  nextTick(() => {
+    try {
+      cb();
+    } catch (e) {
+      consoleError(e);
+    }
+  });
+};
 var writeTask = (cb) => {
   nextTick(() => {
     try {
@@ -3682,7 +3691,7 @@ class SdBadge {
     label = '';
     render() {
         const resolvedColor = resolveColor(this.color);
-        return (hAsync(Host, { key: 'b88fba271994742a1a1d3379db44e8a307c5a308' }, hAsync("div", { key: '961c25f3f87dc51cd670aa18706d5a5f3517f8bf', class: `sd-badge sd-badge--${this.size}`, style: { '--sd-badge-color': resolvedColor } }, hAsync("div", { key: '2de1b86cc1e714a436cb2d2810b2646a2ac4fd7c', class: "sd-badge__dot" }), hAsync("div", { key: '89943a046b33c105155236a7e0b411dfbcd72487', class: "sd-badge__label" }, this.label))));
+        return (hAsync(Host, { key: '88cb068e4c73a9abb0c4b7c4321ec7d861ec1395' }, hAsync("div", { key: '09371f2e449a0f1db15fe08d7045313a86555f70', class: `sd-badge sd-badge--${this.size}`, style: { '--sd-badge-color': resolvedColor } }, hAsync("div", { key: '4e7bb2717bc999d06dfa861474a833448f497431', class: "sd-badge__dot" }), hAsync("div", { key: '0711cac45b6535cd67279785dfe6a89cbbd6739a', class: "sd-badge__label" }, this.label))));
     }
     static get style() { return sdBadgeCss; }
     static get cmpMeta() { return {
@@ -3789,7 +3798,7 @@ class SdCard {
     bordered = true;
     class = '';
     render() {
-        return (hAsync(Host, { key: 'b39b016a66f0df13d09ff3a1ce453bb5eda23b52' }, hAsync("div", { key: '2a22dcc5ede4067ecbb2bbbe985d95ffaee3a3a6', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.class}` }, hAsync("slot", { key: 'f73cae0097be43bcd666ade2db27c585090eca75' }))));
+        return (hAsync(Host, { key: 'e9653557b36889a75002c32bde005c7b480b2f4b' }, hAsync("div", { key: 'e34f53b49bdc412eaf82dbe21918cd6599d1d2c6', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.class}` }, hAsync("slot", { key: 'b5d06b44a1a960fe12424f43a39647a4646610d6' }))));
     }
     static get style() { return sdCardCss; }
     static get cmpMeta() { return {
@@ -4100,7 +4109,7 @@ class SdDatePicker {
         this.isOpen = false;
     };
     render() {
-        return (hAsync(Host, { key: '67bc480db5e0f16fa5af8bd75b6dde76d457b4dd', class: "sd-date-picker" }, hAsync("sd-input", { key: 'd31e41161179efb1b961ea00f7333b048e43467a', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", onClick: () => this.openMenu() }, hAsync("sd-icon", { key: '1a3c2d291628a00d217a0b20ddeb38d8590706f7', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (hAsync("sd-portal", { key: '85b52726ad96ed74cb42e1eda4e014eb8095face', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, hAsync("div", { key: 'e398ac0094ef23907b7d3a7f88b37587207ade33', class: "sd-date-picker__menu" }, hAsync("div", { key: '328de8581f0cb895bb3e6e3758a7adedbad302de', class: "sd-date-picker__header" }, hAsync("div", { key: '633feae88e423ffa6fa6eb6841a937be3558ccc5', class: "year-nav" }, hAsync("button", { key: '89c3d4593c0a2c2917003a93ac1ff0176c611d72', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, hAsync("sd-icon", { key: '140655e36c73784f4704a51a89c79ae72d237218', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("span", { key: '3917a8caec91a855b9bf6f42b3c8e856d490817a', class: "year-nav__current" }, this.currentYear), hAsync("button", { key: 'b5a7e7903594482bff30c72afaca8609b04f8aea', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, hAsync("sd-icon", { key: '49364c66f35a9a5e724644963f3ab276245241af', name: "arrowRight", size: "12", color: "#CCCCCC" }))), hAsync("div", { key: '153ee788090ed23b32cec5f660eeda741076b2a6', class: "month-nav" }, hAsync("button", { key: '33f7a059d08bd761cc6ca083f5fd1980017e3f2d', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, hAsync("sd-icon", { key: 'c641505d42a0683bea0e6b7a3db9cf6352a78d4d', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("span", { key: '5fb032ee2040e4abd333dc640c3998e3288662f2', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), hAsync("button", { key: 'da13b27ba6f74fae110383e294be1d01e0d74eb1', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, hAsync("sd-icon", { key: '223b006490c3f3a3d6d7036115da2b88e801dca7', name: "arrowRight", size: "12", color: "#CCCCCC" })))), hAsync("div", { key: '1251dd00b4cb02ebddaf1aa93e1fc8a351bee10f', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (hAsync("div", { key: day, class: "day" }, day)))), hAsync("div", { key: '474772b41df806093a4e578b67420adb6a973018', class: "sd-date-picker__body" }, [
+        return (hAsync(Host, { key: '3fe32fb440e95d43a7ba5ae40eebfec5b1f292f7', class: "sd-date-picker" }, hAsync("sd-input", { key: '8aa313f14bd0305c0d28ba8e388c5c7d2ae2d3ec', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", onClick: () => this.openMenu() }, hAsync("sd-icon", { key: '350af44747b5f87c0e25dc01fc8aa25590363d5b', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (hAsync("sd-portal", { key: '1c05d0d0b9cd54bd67b1d4411bd3ad2aded758ba', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, hAsync("div", { key: '273c93d7b9635ebfab1350568f30da3f62996003', class: "sd-date-picker__menu" }, hAsync("div", { key: '9da1cf5d0dc35f00018a2718787007749a84ca99', class: "sd-date-picker__header" }, hAsync("div", { key: 'c2afcc7006276eca26d4f0d0c91350a0dee070cf', class: "year-nav" }, hAsync("button", { key: '1b53d6e96c6f9ab93d67440450b35be096e9607b', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, hAsync("sd-icon", { key: '7acd8f69406a83bcc9fef1745523d997d1b3f219', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("span", { key: 'ad5f412960af38938d6efea1f0909293c3c6682c', class: "year-nav__current" }, this.currentYear), hAsync("button", { key: 'fe2480d51d8a8a3b09d3d0d5e5c5c53982ebd20d', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, hAsync("sd-icon", { key: 'e7175f73e5efcef04a2b33a2ee7a57d2b025c3d8', name: "arrowRight", size: "12", color: "#CCCCCC" }))), hAsync("div", { key: '76dcf13a864dffcb6a49683b590c19efb05c7367', class: "month-nav" }, hAsync("button", { key: '2d300218750da2716e2558ff3145337ee6bcfa80', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, hAsync("sd-icon", { key: '1972506ecb42922b6c742bd34186bdbf23f8d6b5', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("span", { key: '3037310072a6dcb71f2e662fb1dcfa07d44f2a70', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), hAsync("button", { key: '7cd60a470fd27f2028935748047f76945fc4fe99', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, hAsync("sd-icon", { key: 'd656f3dd638cab72e94f12036e77f46b9ab31c7f', name: "arrowRight", size: "12", color: "#CCCCCC" })))), hAsync("div", { key: '1710f916652929515916a122affda7cbdd311153', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (hAsync("div", { key: day, class: "day" }, day)))), hAsync("div", { key: '201f7499819e88f291a3889fcbe854d2e2145fde', class: "sd-date-picker__body" }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,
@@ -4273,9 +4282,9 @@ class SdDateRangePicker {
         this.isOpen = false;
     };
     render() {
-        return (hAsync(Host, { key: '01d8def2e141ae3767fb57880482845a5bfcc6ca', class: "sd-date-range-picker" }, hAsync("sd-input", { key: 'f3738314482ac84517958672d2f75cdc7cd6d354', ref: el => (this.inputEl = el), value: `${this.dateRange[0]} ~ ${this.dateRange[1]}`, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
+        return (hAsync(Host, { key: 'b5f7be556686c3bb50147ed0b28cd47698d90e5c', class: "sd-date-range-picker" }, hAsync("sd-input", { key: 'a457ab2b61354fe100fa31e1ab357649ceef63aa', ref: el => (this.inputEl = el), value: `${this.dateRange[0]} ~ ${this.dateRange[1]}`, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
                 margin: '0 0 0 8px',
-            }, onClick: () => this.openMenu() }, hAsync("sd-icon", { key: '2ca7e4428256374866a74bf550fd7fc825fca4c1', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (hAsync("sd-portal", { key: '381b44e43ed021a1200854e445f113e02112b21b', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, hAsync("div", { key: '47f31a5136e236899ac861cdd66a0424ed9507ee', class: "sd-date-range-picker__menu" }, hAsync("div", { key: '3c5c4050f4ea36e93b7cc02e0935f3898bca7523', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, hAsync("button", { key: 'b5ddf46fbc15290df316697c99502a07499452fb', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, hAsync("sd-icon", { key: 'fded6383fd7a90e80cba1b222a334764bcd1f4c2', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("div", { key: 'b8408d970c42fc373b5300ce91887010e78c29f9', class: "header-label" }, this.prevYear), hAsync("button", { key: 'bc4c97952e8ae30ad685de8f966e5b0445e5f6a0', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, hAsync("sd-icon", { key: '7dff57a2d3c44a810ab078c9418155dbadb7988d', name: "arrowRight", size: "12", color: "#CCCCCC" }))), hAsync("div", { key: '9c43dd586c0f702490093204c06102186cf27ebe', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (hAsync(Fragment, null, index === 1 && hAsync("div", { class: "separator" }), hAsync("div", { key: index, class: "calendar-container" }, hAsync("div", { class: "calendar-header" }, hAsync("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, hAsync("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
+            }, onClick: () => this.openMenu() }, hAsync("sd-icon", { key: 'cc068925914495e21172020763c18627d3c8e8a2', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (hAsync("sd-portal", { key: '0486ab86c422d98aa2e86bd4d327cc42f0e72ae9', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, hAsync("div", { key: '8b86d95d279d6f3036f2aacc0421ec4f715d91e7', class: "sd-date-range-picker__menu" }, hAsync("div", { key: '0fa223b5fdc0a8195e1fbd433c235dc4473ad146', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, hAsync("button", { key: '2d512e7ffa9461f18ca67236a0539cdabcb384ac', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, hAsync("sd-icon", { key: 'aa23e83e33bfaaaee02f771e9aa3e7f84fe7ceae', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("div", { key: '5c6e6ea57120081b466faa827e7bb014b5d20905', class: "header-label" }, this.prevYear), hAsync("button", { key: '51f89a92ca77a98283a883316981b7df08e1fcef', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, hAsync("sd-icon", { key: '19a594a16b65668db23f5e77e61db7182591ac57', name: "arrowRight", size: "12", color: "#CCCCCC" }))), hAsync("div", { key: '21073a5c2d4dd68aa4dce7be48eab0339dd3791d', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (hAsync(Fragment, null, index === 1 && hAsync("div", { class: "separator" }), hAsync("div", { key: index, class: "calendar-container" }, hAsync("div", { class: "calendar-header" }, hAsync("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, hAsync("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
             ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
             : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), hAsync("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (hAsync("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), hAsync("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (hAsync("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date ===
                 this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, Number(day))), type: this.getDateBoxType(this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, Number(day))), isToday: today ===
@@ -4358,11 +4367,11 @@ class SdGuide {
     };
     render() {
         const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (hAsync(Host, { key: '8de1cc4591dd1294a374421965322d6a958c9797', style: {
+        return (hAsync(Host, { key: 'd9bf823d000e8181c61798d9656c428c4a3cd6b6', style: {
                 '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, hAsync("sd-button", { key: '8dc820b941d8e3003f2440a4fa1ccd36be0a854e', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (hAsync("sd-portal", { key: 'd8cbafa686da33b2ced3a00fe13f673ebab247e5', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, hAsync("div", { key: 'f5048c842dcec0414ee747f69c2033b688ba1672', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, hAsync("sd-button", { key: 'a7cb87e50b7b9ff3a40742cd4881ac8c413f18a5', class: "sd-guide__popup__close", icon: "close", color: colors$1.grey_65, size: "md", variant: "ghost", noHover: true,
+            } }, hAsync("sd-button", { key: 'fd25039c644bdd6e802624f2cbef3bfb4d797220', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (hAsync("sd-portal", { key: '3bb296fa9a9419534af30fe3d2e2dd1bffe2aa53', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, hAsync("div", { key: '2aacb47b2acedceb9114737da8d061022fea27a8', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, hAsync("sd-button", { key: 'd4e3a1b49d15782a2b4cc50d6ebfc62ca19da555', class: "sd-guide__popup__close", icon: "close", color: colors$1.grey_65, size: "md", variant: "ghost", noHover: true,
             // buttonStyle={{ padding: '0px', minHeight: '0px' }}
-            onSdClick: this.closeDropdown }), hAsync("div", { key: 'dd2a7ceeb8fa28c2d430a2d10778b87db5bc576d', class: "sd-guide__popup__header" }, hAsync("sd-icon", { key: '40ccb8d9fc31c7f0c68ce4fd8aacbfdf7e4cf4dc', name: "helpOutline", size: 24, color: colors$1.green_65 }), hAsync("h3", { key: '55726b9de8d9cd996154700ffb0c5178face6916', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), hAsync("ul", { key: '3221ed8367735883cb65c8ab66b63d977eae24dd', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
+            onSdClick: this.closeDropdown }), hAsync("div", { key: 'ca5d8332066af0bac3083443488c3ebe5c064931', class: "sd-guide__popup__header" }, hAsync("sd-icon", { key: '752a3ea8dde595e459b0681b317486c3896aa71f', name: "helpOutline", size: 24, color: colors$1.green_65 }), hAsync("h3", { key: '52d5bdae6b82d9aabbf8dc98c2f05379fb8ffe7d', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), hAsync("ul", { key: '07fe0fe4f2b9831721e95f318dfcd818ee11a415', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {
@@ -6408,7 +6417,7 @@ class SdIcon {
     }
     render() {
         const IconComponent = Icons[this.name]?.[this.size];
-        return (hAsync("i", { key: '738453a8bc8d1b9bb67fbaaffb7de203c2982c30', class: this.getIconClasses(), style: this.iconStyle }, hAsync(IconComponent, { key: '2f970609756be608b660a522949dd79cca64fcc8', color: this.resolvedColor })));
+        return (hAsync("i", { key: '856cad8bb2373b0d86734443144f79770c0715ec', class: this.getIconClasses(), style: this.iconStyle }, hAsync(IconComponent, { key: 'd2a06ebbda1317cb72fec996b3bf3008ba171070', color: this.resolvedColor })));
     }
     static get style() { return sdIconCss; }
     static get cmpMeta() { return {
@@ -6528,11 +6537,11 @@ class SdInput {
                 '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
             }
             : {};
-        return (hAsync(Host, { key: '87a102220530a2e06620619967f1925f193b4794', style: inputWidth }, this.label && hAsync("div", { key: 'dec1ef5b27dadc7b2c6c0e9f5dab978b338b5a45', class: "sd-input__label" }, this.label), hAsync("label", { key: '72ba8b8b0019fd1bfc222207df4b42735457873d', class: {
+        return (hAsync(Host, { key: '0fc9bec4559137ede7daa7f2da5df00595991d5a', style: inputWidth }, this.label && hAsync("div", { key: '3fd4e7d08aca431d7743ec4249a221c77f2fefd1', class: "sd-input__label" }, this.label), hAsync("label", { key: 'bc80c41ffcb1312261b1139dcd0c390db32932df', class: {
                 'sd-input': true,
                 [this.getInputStatus()]: true,
                 'sd-input--barcode': !!this.barcode,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, hAsync("slot", { key: '7745177f5638351670adb3610325d44df156826e', name: "prefix" }), hAsync("input", { key: '976949537b8071a409d94e93f803128946d73d48', ref: el => (this.nativeEl = el), class: `sd-input__native_element ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) }), hAsync("slot", { key: 'b62387e0c2122cfb9f5599a108d54682df59fef6', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-icon", { key: 'b860d9c2387adf97d7317bba550b169ac9f4ac49', name: "close", color: "#888", class: "sd-input__clear-icon", onClick: () => {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, hAsync("slot", { key: 'b1df6c52c2dc92adde26cd535b008d35bc1c73d2', name: "prefix" }), hAsync("input", { key: '5c02cca10b415521d569151c3b05cd9b2ae4b9b7', ref: el => (this.nativeEl = el), class: `sd-input__native_element ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) }), hAsync("slot", { key: 'f85912a8f17712d0a4950a68d10d885556a1de44', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-icon", { key: '3087e7d22f06e2b29d17b37d2e95bdcbcc511bd4', name: "close", color: "#888", class: "sd-input__clear-icon", onClick: () => {
                 this.internalValue = '';
                 this.sdChange?.emit(this.internalValue);
                 this.sdInput?.emit(this.internalValue);
@@ -6579,7 +6588,7 @@ class SdLoadingSpinner {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '54446b42c83eff572c2d0d63c367a7e407d722a5' }, hAsync("svg", { key: '92ad1f0446dc5912a656512d09ab4b8b3b262156', class: "sd-loading-spinner text-positive", width: "72px", height: "72px", viewBox: "25 25 50 50" }, hAsync("circle", { key: 'b9b0c2ea5233fb5f5c784d0262c6ba526dc00622', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+        return (hAsync(Host, { key: 'd064701b25e190fc5b7feefb542cbc7d30afc3f3' }, hAsync("svg", { key: 'ec37a9ebea3e5b48817c687fae543186bb3cf29a', class: "sd-loading-spinner text-positive", width: "72px", height: "72px", viewBox: "25 25 50 50" }, hAsync("circle", { key: '0b61caa65955019ddb08ed52a51718cf3f55a6e3', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
     }
     static get style() { return sdLoadingSpinnerCss; }
     static get cmpMeta() { return {
@@ -6731,12 +6740,12 @@ class SdPagination {
         }
     }
     render() {
-        return (hAsync("div", { key: '3b65d74d4b70b8b3292a20daa5d89ffb7d9a66e7', class: this.paginationClasses }, hAsync("div", { key: 'a3be2b1c24ac6ac7ecde25223d9208e63e558bf3', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "pagination-info" }, hAsync("span", { class: "current-page" }, this.currentPage), hAsync("span", null, "/"), hAsync("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (hAsync("div", { key: 'c8c241301297c8281d02643f5a31c97f77706fff', class: this.paginationClasses }, hAsync("div", { key: '12ca5b852a648b168928934729d2215f6648bcc1', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "pagination-info" }, hAsync("span", { class: "current-page" }, this.currentPage), hAsync("span", null, "/"), hAsync("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (hAsync("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)))), hAsync("div", { key: '9c145c18eacc2ab0115d162cbb50e5ad3ea62c80', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), hAsync("div", { key: '0ff537ba6e5985be1e055f5b9eab5dd86dd11624', class: "append-btns" }, this.renderNextButtons())));
     }
     static get style() { return sdPaginationCss; }
     static get cmpMeta() { return {
@@ -6790,11 +6799,11 @@ class SdPopover {
         this.showPopover = false;
     };
     render() {
-        return (hAsync(Fragment, { key: '60031ca070a366a90f74d93908ec956076b4e8be' }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (hAsync("sd-tooltip-portal", { key: '199246e3638600c05ae9f9cab99c00540f2525ef', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, hAsync("div", { key: '204b3dcf316277e5b2ce4fab3273c7726f1485c7', class: {
+        return (hAsync(Fragment, { key: '596dfc584e73c7d7093e15a91046e14b7801138a' }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (hAsync("sd-tooltip-portal", { key: '9bf784d6946cd5fd8b6ecfd3a6e9d976f44a2a90', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, hAsync("div", { key: '409afdeee8e96ce019594cd2aaa16034e4339a35', class: {
                 'sd-popover-menu': true,
                 [`sd-popover-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, hAsync("i", { key: '344b1aace077490124078499dbcc08c3bc9af92d', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: 'be3b82a87f9292d44177927330e0b7d7b1ba2c0f' })), hAsync("div", { key: 'ac1223f53514958384fa1b3e7f3bad84933436cd', class: "sd-popover-menu__content" }, this.menuTitle && hAsync("div", { key: 'a191a3fa975ff94711a6bbc7ab2fdc4bea0d5f9c', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (hAsync("div", { key: 'a830419f35e0cdf43cf4059d1a815d4b169a4625', class: "sd-popover-menu__messages" }, this.messages.map(message => (hAsync("div", null, message))))), this.buttons.length > 0 && (hAsync("div", { key: 'd66775a5ec5899caa040e0ae53a1bce0eea3c167', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (hAsync("sd-button", { ...button })))))), this.useClose && (hAsync("button", { key: '19f1f43ec6908e51f3f5b07268f0c59c3f1db1fe', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: 'b658485e35e837c50886da6cf911d1b9d8f81ff1', name: "close", size: "12", color: "#AAAAAA" }))))))));
+            } }, hAsync("i", { key: '2ff3545fb7b13c11d4f128616a68f0a230087447', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: '3da84311b01c95d92b91327ce66e49e1d0243b37' })), hAsync("div", { key: 'aa861155d8c9194dffafd8b834e58108995f33ed', class: "sd-popover-menu__content" }, this.menuTitle && hAsync("div", { key: '534c0871ff6b909c87eba179be23c7e2fa4ce0e9', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (hAsync("div", { key: 'a601e50189ca95fa007e68edf64c1a0aa1e990d0', class: "sd-popover-menu__messages" }, this.messages.map(message => (hAsync("div", null, message))))), this.buttons.length > 0 && (hAsync("div", { key: '63ee5c3dcdf167e0b35b5ed96a516b91ff007355', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (hAsync("sd-button", { ...button })))))), this.useClose && (hAsync("button", { key: '6f8f0a6dfd113603105652686b5426e3a0313d4e', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: '9f1aedb7e6e9e519fa890856ea9c185e393f5f43', name: "close", size: "12", color: "#AAAAAA" }))))))));
     }
     static get watchers() { return {
         "show": ["watchShowHandler"]
@@ -6945,7 +6954,7 @@ class SdPortal {
         this.sdClose.emit();
     }
     render() {
-        return hAsync("slot", { key: 'b24b7f844564365e887dc8cee8b98e26a94961cd' });
+        return hAsync("slot", { key: '2f6a1908864a2b5bbe86127fbf41b6b44a599666' });
     }
     static get cmpMeta() { return {
         "$flags$": 772,
@@ -6982,10 +6991,10 @@ class SdProgress {
         error: '#FB4444',
     };
     render() {
-        return (hAsync(Host, { key: 'e5a1be5c3343e0645db107b076fac36d1a935ca7', style: {
+        return (hAsync(Host, { key: 'fa4a0bdd1e76231bc3ff349c5e94a18f1d747bf4', style: {
                 '--progress-color': this.statusColor[this.status],
                 '--progress-percentage': `${this.percentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: 'd2676df17ad3474f88d3c0972802a7b373b5652e', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: '2c356835e29ec88765f0be0efbe9ee416f1e27ea', class: "sd-progress__label" }, this.label)));
     }
     renderBarProgress() {
         return (hAsync("div", { class: `sd-progress__bar sd-progress__bar--${this.status}` }, hAsync("div", { class: ['sd-progress__bar__percent', this.percentage < 100 ? 'proceed' : ''].join(' ') }), hAsync("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.percentage, "%"), hAsync("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.percentage, "%")));
@@ -7613,11 +7622,11 @@ class SdSelectMultiple extends BaseDropdownEvent {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (hAsync(Host, { key: '0e488c3906b12e73abc6e6216e14b2b4e6a130c8', style: style }, hAsync("div", { key: '714a95f446631269a19e44d098ef0dc81c7c6fd5', class: {
+        return (hAsync(Host, { key: '71bf4aa9bb298ddd42fa2df53ffcaa75acd17811', style: style }, hAsync("div", { key: '9f0970babd424f097b82acab1e93d4922cd5a36e', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,
-            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), hAsync("div", { key: '08912b8586c926107cbcaed28b73bd6eb94d47d9', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), hAsync("div", { key: '57d243584fdf590139ec3436c473d54daa477e36', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label) {
         if (!label)
@@ -8147,7 +8156,7 @@ class SdSelectOption {
         }
     };
     render() {
-        return (hAsync(Host, { key: 'f1874b4e539573ddaa48cb2bdc9d13ea96bf350e' }, hAsync("div", { key: '5a3bbd66f6623a1c02d5e1295bb974e82883b8a1', class: {
+        return (hAsync(Host, { key: '70eafe63e44409063337d0a43846c3be869086df' }, hAsync("div", { key: '21cafb06d87968387f9b9ec91fdd09643cded1ca', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,
@@ -8233,7 +8242,7 @@ class SdSelectOptionGroup {
         }
     };
     render() {
-        return (hAsync("div", { key: 'e96411f172ed4ed5359fef2a124bf49df88e10ec', class: {
+        return (hAsync("div", { key: '1fb3028e6869ec0d77878dd577ad9f4f711edc38', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -8242,10 +8251,10 @@ class SdSelectOptionGroup {
                 'sd-select__option-group--group': this.option.type === 'group',
                 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
                 'sd-select__option-group--item': this.option.type === 'item',
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, hAsync("div", { key: 'fa9464cac1ee58b46b983f17882eeb847e3dc9b7', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (hAsync("sd-checkbox", { key: 'f9a7ab839d566671d6ee9e7164424d307a81f2d6', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
+            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, hAsync("div", { key: '5d2f2564587c376d4708921e5eb68bc1d41039ab', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (hAsync("sd-checkbox", { key: '0d4e839a0a091d47f0a07f8a248fbc71cf2b67a3', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), hAsync("span", { key: 'ee27fb5e2d14acf898c7ce1e22b8cbffe59cec31', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (hAsync("span", { key: 'aaf9552da0a665ac34848ab5649d5993133394c4', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), hAsync("span", { key: '6ff97d5a3c84e97a4712d98f04b4cf5a5fef1895', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (hAsync("span", { key: '861bc3ff0ac64af5482783e7412f1ec706fe90e4', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
     static get style() { return sdSelectOptionGroupCss; }
     static get cmpMeta() { return {
@@ -8538,7 +8547,7 @@ let SdTable$1 = class SdTable {
     }; }
 };
 
-const sdTableBackupCss = ".sd-table__wrapper .sd-table__container .sd-table__middle{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:horizontal{height:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:vertical{width:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-track{background-color:transparent}.sd-table__wrapper{height:var(--table-height, auto);width:var(--table-width, 100%);color:#222222}.sd-table__wrapper .sd-table__container{width:100%;height:var(--table-container-height, auto);position:relative;border:1px solid #e1e1e1;border-radius:8px;font-size:12px;overflow:hidden;background:#ffffff}.sd-table__wrapper .sd-table__container .sd-table__middle{overflow:auto;will-change:scroll-position}.sd-table__wrapper .sd-table__container .sd-table__middle--scrollable{height:var(--table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle--loading{overflow:hidden !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll{position:relative;height:var(--total-virtual-height, --table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr:not([aria-hidden=true]){width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true]{padding:0;border:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true]:not(.sd-table__virtual-row-spacer) td{display:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected{width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-header thead{position:sticky;top:0;z-index:120}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right{position:sticky;background-color:#f5faff;z-index:110 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right{position:sticky;background-color:white;z-index:100 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left{left:var(--sticky-left-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right{right:var(--sticky-right-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell{position:sticky;z-index:102;background-color:#f5faff}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell{position:sticky;z-index:101;background-color:white}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge:after{content:\"\";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge:after{content:\"\";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead{opacity:0.4}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead tr th.sd-th{border-bottom:1px solid rgba(225, 225, 225, 0.4) !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-td,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-th,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table .sd-th__content--label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead{height:36px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr{width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th{background:#f5faff;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #e1e1e1;-webkit-user-select:none;user-select:none;position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:4px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--left{justify-content:flex-start}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--center{justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--right{justify-content:flex-end}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #cccccc;border-right:1px solid #cccccc}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody .sd-table__loading{position:absolute;top:0;left:0;width:var(--table-width, 100%);height:var(--table-container-height, 100%);min-height:var(--table-container-height, 100%);background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td{height:44px;padding:0 16px;border-bottom:1px solid #e1e1e1;background:white;vertical-align:middle}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--left{text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--center{text-align:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--right{text-align:right}.sd-table__wrapper .sd-table__container .sd-table__bottom{background:white;text-align:center}.sd-table__wrapper .sd-table__container .sd-table__bottom .sd-table__no-data{padding-top:15%;color:#888888}.sd-table__wrapper .sd-table__pagination{position:relative;background:#f9f9f9;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #e1e1e1;border-top:none;border-radius:8px}.sd-table__wrapper .sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}.sd-table__wrapper .sd-table__virtual-spacer,.sd-table__wrapper .sd-table__virtual-row-spacer{padding:0}.sd-table__wrapper .sd-table__virtual-spacer td,.sd-table__wrapper .sd-table__virtual-row-spacer td{padding:0;border:none}.sd-table__wrapper .sd-table__virtual-spacer .sd-table__skeleton,.sd-table__wrapper .sd-table__virtual-row-spacer .sd-table__skeleton{width:100%;height:100%;background-image:repeating-linear-gradient(0deg, rgba(246, 246, 246, 0.3) 0px, rgba(225, 225, 225, 0.5) calc(var(--row-height, 44px) / 2), rgba(246, 246, 246, 0.3) var(--row-height, 44px));background-size:100% 200%;animation:skeleton-loading 1.5s ease-in-out infinite;position:relative}.sd-table__wrapper .sd-table__virtual-spacer .sd-table__skeleton::before,.sd-table__wrapper .sd-table__virtual-row-spacer .sd-table__skeleton::before{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;background-image:repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--row-height, 44px) - 1px), #e1e1e1 calc(var(--row-height, 44px) - 1px), #e1e1e1 var(--row-height, 44px));pointer-events:none}.sd-table__wrapper .sd-table__skeleton-cell{width:100%;height:20px;background:linear-gradient(90deg, rgba(246, 246, 246, 0.3) 0%, rgba(225, 225, 225, 0.5) 50%, rgba(246, 246, 246, 0.3) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:0% 0%}50%{background-position:100% 100%}100%{background-position:0% 0%}}";
+const sdTableBackupCss = ".sd-table__wrapper .sd-table__container .sd-table__middle{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:horizontal{height:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:vertical{width:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-track{background-color:transparent}.sd-table__wrapper{height:var(--table-height, auto);width:var(--table-width, 100%);color:#222222}.sd-table__wrapper .sd-table__container{width:100%;height:var(--table-container-height, auto);position:relative;border:1px solid #e1e1e1;border-radius:8px;font-size:12px;overflow:hidden;background:#ffffff}.sd-table__wrapper .sd-table__container .sd-table__middle{overflow:auto;will-change:scroll-position;min-height:var(--table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle--scrollable{height:var(--table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle--loading{overflow:hidden !important;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle--loading__spinner{position:absolute;top:0;left:0;width:var(--table-width, 100%);height:var(--table-container-height, 100%);min-height:var(--table-container-height, 100%);background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll{position:relative;height:var(--total-virtual-height, --table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr:not([aria-hidden=true]){width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true]{padding:0;border:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true]:not(.sd-table__virtual-row-spacer) td{display:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected{width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-header thead{position:sticky;top:0;z-index:120}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right{position:sticky;background-color:#f5faff;z-index:110 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right{position:sticky;background-color:white;z-index:100 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left{left:var(--sticky-left-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right{right:var(--sticky-right-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell{position:sticky;z-index:102;background-color:#f5faff}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell{position:sticky;z-index:101;background-color:white}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge:after{content:\"\";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge:after{content:\"\";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead{opacity:0.4}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead tr th.sd-th{border-bottom:1px solid rgba(225, 225, 225, 0.4) !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-td,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-th,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table .sd-th__content--label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead{height:36px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr{width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th{background:#f5faff;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #e1e1e1;-webkit-user-select:none;user-select:none;position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:4px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--left{justify-content:flex-start}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--center{justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--right{justify-content:flex-end}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #cccccc;border-right:1px solid #cccccc}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td{height:44px;padding:0 16px;border-bottom:1px solid #e1e1e1;background:white;vertical-align:middle}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--left{text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--center{text-align:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--right{text-align:right}.sd-table__wrapper .sd-table__container .sd-table__bottom{background:white;text-align:center}.sd-table__wrapper .sd-table__container .sd-table__bottom .sd-table__no-data{padding-top:15%;color:#888888}.sd-table__wrapper .sd-table__pagination{position:relative;background:#f9f9f9;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #e1e1e1;border-top:none;border-radius:8px}.sd-table__wrapper .sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}.sd-table__wrapper .sd-table__virtual-spacer,.sd-table__wrapper .sd-table__virtual-row-spacer{padding:0 !important}.sd-table__wrapper .sd-table__virtual-spacer td,.sd-table__wrapper .sd-table__virtual-row-spacer td{padding:0 !important;border:none}.sd-table__wrapper .sd-table__virtual-spacer .sd-table__skeleton,.sd-table__wrapper .sd-table__virtual-row-spacer .sd-table__skeleton{width:100%;height:100%;background-image:repeating-linear-gradient(0deg, rgba(246, 246, 246, 0.3) 0px, rgba(225, 225, 225, 0.5) calc(var(--row-height, 44px) / 2), rgba(246, 246, 246, 0.3) var(--row-height, 44px));background-size:100% 200%;animation:skeleton-loading 1.5s ease-in-out infinite;position:relative}.sd-table__wrapper .sd-table__virtual-spacer .sd-table__skeleton::before,.sd-table__wrapper .sd-table__virtual-row-spacer .sd-table__skeleton::before{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;background-image:repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--row-height, 44px) - 1px), #e1e1e1 calc(var(--row-height, 44px) - 1px), #e1e1e1 var(--row-height, 44px));pointer-events:none}.sd-table__wrapper .sd-table__skeleton-cell{width:100%;height:20px;background:linear-gradient(90deg, rgba(246, 246, 246, 0.3) 0%, rgba(225, 225, 225, 0.5) 50%, rgba(246, 246, 246, 0.3) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:0% 0%}50%{background-position:100% 100%}100%{background-position:0% 0%}}";
 
 class SdTable {
     constructor(hostRef) {
@@ -8597,6 +8606,7 @@ class SdTable {
     virtualStartColIdx = 0;
     virtualEndColIdx = 0;
     scrollLeftPosition = 0;
+    // 가상 스크롤 Raf(Request Animation Frame) 관리
     scrollRequestAnimationFrame = null;
     scrollContainer = null;
     rafScheduled = false;
@@ -8604,19 +8614,39 @@ class SdTable {
         vertical: false,
         horizontal: false,
     };
+    // 상태 캐시값
+    cachedVisibleColumns = null;
+    lastColumnsRef = null;
+    cachedVirtualRows = null;
+    cachedVirtualIndexKey = '';
+    cachedColumnOrder = null;
+    lastColumnOrderKey = '';
+    // DOM 측정 캐시값
+    cachedContainerHeight = 0;
+    cachedContainerWidth = 0;
+    // 스타일 캐시
+    stickyStyleCache = new Map();
+    // isAllChecked 캐시
+    cachedIsAllChecked;
+    lastSelectionKey = '';
+    onScroll;
     handleColumnsChange(newCols) {
         this.columnWidths = newCols.map(c => parseInt(c.width || '120', 10));
+        this.cleanUpVirtualCache();
+        this.stickyStyleCache.clear();
         if (this.useVirtualScroll.horizontal) {
             this.scheduleUpdate('horizontal');
         }
     }
     handleColumnWidthsChange() {
+        this.stickyStyleCache.clear();
         if (this.useVirtualScroll.horizontal) {
             this.scheduleUpdate('horizontal');
         }
     }
     handleRowsChange(newRows) {
         this.innerRows = [...newRows];
+        this.cleanUpVirtualCache();
         if (this.useVirtualScroll.vertical) {
             this.scheduleUpdate('vertical');
         }
@@ -8624,11 +8654,19 @@ class SdTable {
     handleSelectedChange(newSelected) {
         this.innerSelected = new Set(newSelected);
     }
+    cleanUpVirtualCache() {
+        this.cachedVisibleColumns = null;
+        this.lastColumnsRef = null;
+        this.cachedVirtualRows = null;
+        this.cachedVirtualIndexKey = '';
+        this.cachedColumnOrder = null;
+        this.lastColumnOrderKey = '';
+    }
     handlePaginationChange(newVal) {
         if (newVal?.page && newVal.page !== this.currentPage) {
             this.currentPage = newVal.page;
             if (this.useVirtualScroll.vertical && this.scrollContainer) {
-                this.scrollContainer.scrollTop = 0;
+                this.scrollContainer.scrollTo({ top: 0, behavior: 'instant' });
                 this.scrollTopPosition = 0;
                 this.calculateVisibleRange();
             }
@@ -8643,66 +8681,120 @@ class SdTable {
         }
     }
     componentDidLoad() {
-        // SSR 환경 체크
-        if (typeof window === 'undefined')
-            return;
-        const middle = this.el.querySelector('.sd-table__middle');
-        if (!middle)
-            return;
-        this.scrollContainer = middle;
-        const onScroll = () => {
-            const { scrollLeft, scrollWidth, clientWidth, scrollTop } = middle;
-            this.scrolledLeft = scrollLeft > 0;
-            this.scrolledRight = scrollLeft + clientWidth < scrollWidth;
-            // 실제 변경사항이 있을 때만 RAF 스케줄
-            const verticalChanged = this.useVirtualScroll.vertical && this.scrollTopPosition !== scrollTop;
-            const horizontalChanged = this.useVirtualScroll.horizontal && this.scrollLeftPosition !== scrollLeft;
-            if (verticalChanged || horizontalChanged) {
-                if (this.scrollRequestAnimationFrame !== null) {
-                    cancelAnimationFrame(this.scrollRequestAnimationFrame);
+        readTask(() => {
+            const middle = this.el.querySelector('.sd-table__middle');
+            if (!middle)
+                return;
+            this.onScroll = () => {
+                const scrollLeft = middle.scrollLeft;
+                const scrollWidth = middle.scrollWidth;
+                const clientWidth = middle.clientWidth;
+                const scrollTop = middle.scrollTop;
+                const verticalChanged = this.useVirtualScroll.vertical && this.scrollTopPosition !== scrollTop;
+                const horizontalChanged = this.useVirtualScroll.horizontal && this.scrollLeftPosition !== scrollLeft;
+                const newScrolledLeft = scrollLeft > 0;
+                const newScrolledRight = scrollLeft + clientWidth < scrollWidth;
+                if (this.scrolledLeft !== newScrolledLeft || this.scrolledRight !== newScrolledRight) {
+                    this.scrolledLeft = newScrolledLeft;
+                    this.scrolledRight = newScrolledRight;
                 }
-                this.scrollRequestAnimationFrame = requestAnimationFrame(() => {
-                    if (verticalChanged) {
-                        this.scrollTopPosition = scrollTop;
-                        this.calculateVisibleRange();
-                    }
-                    if (horizontalChanged) {
-                        this.scrollLeftPosition = scrollLeft;
-                        this.calculateVisibleColumnRange();
+                if (verticalChanged || horizontalChanged) {
+                    if (this.scrollRequestAnimationFrame !== null) {
+                        cancelAnimationFrame(this.scrollRequestAnimationFrame);
                     }
-                    this.scrollRequestAnimationFrame = null;
-                });
-            }
+                    this.scrollRequestAnimationFrame = requestAnimationFrame(() => {
+                        if (verticalChanged) {
+                            this.scrollTopPosition = scrollTop;
+                            this.calculateVisibleRange();
+                        }
+                        if (horizontalChanged) {
+                            this.scrollLeftPosition = scrollLeft;
+                            this.calculateVisibleColumnRange();
+                        }
+                        this.scrollRequestAnimationFrame = null;
+                    });
+                }
+            };
+            this.scrollContainer = middle;
+            requestAnimationFrame(() => {
+                if (this.scrollContainer && this.onScroll) {
+                    this.cachedContainerHeight = this.scrollContainer.clientHeight;
+                    this.cachedContainerWidth = this.scrollContainer.clientWidth;
+                    middle.addEventListener('scroll', this.onScroll, { passive: true });
+                    this.onScroll();
+                }
+            });
+        });
+    }
+    changePage(page) {
+        if (!this.useInternalPagination) {
+            this.sdPageChange.emit(page);
+            return;
+        }
+        this.currentPage = page;
+        this.sdPageChange.emit(this.currentPage);
+    }
+    changeRowsPerPage(perPage) {
+        const changedRowsPerPage = perPage ? Number(perPage) : 0;
+        if (!this.useInternalPagination) {
+            this.sdRowsPerPageChange.emit(changedRowsPerPage);
+            return;
+        }
+        const newRowsPerPage = Number(perPage || 0);
+        let newLastPage = Math.max(1, Math.ceil(this.innerRows.length / newRowsPerPage));
+        let newCurrentPage = this.currentPage;
+        if (newCurrentPage > newLastPage) {
+            newCurrentPage = newLastPage;
+        }
+        this.pagination = {
+            page: newCurrentPage,
+            rowsPerPage: newRowsPerPage,
+            lastPage: newLastPage,
         };
-        middle.addEventListener('scroll', onScroll, { passive: true });
-        onScroll();
+        this.currentPage = newCurrentPage;
+        this.sdRowsPerPageChange.emit(changedRowsPerPage);
     }
     disconnectedCallback() {
+        if (this.scrollContainer && this.onScroll) {
+            this.scrollContainer.removeEventListener('scroll', this.onScroll);
+        }
         if (this.scrollRequestAnimationFrame !== null) {
             cancelAnimationFrame(this.scrollRequestAnimationFrame);
         }
     }
     // ----- Derived getters -----
     get visibleColumns() {
-        return this.columns.filter(col => col.visible !== false);
+        if (this.cachedVisibleColumns && this.lastColumnsRef === this.columns) {
+            return this.cachedVisibleColumns;
+        }
+        this.lastColumnsRef = this.columns;
+        this.cachedVisibleColumns = this.columns.filter(col => col.visible !== false);
+        return this.cachedVisibleColumns;
     }
     get paginatedRows() {
         if (!this.pagination || !this.useInternalPagination)
             return this.innerRows;
         const { rowsPerPage = this.rows.length } = this.pagination || {};
-        const result = this.innerRows.slice((this.currentPage - 1) * rowsPerPage, this.currentPage * rowsPerPage);
-        return result;
+        return this.innerRows.slice((this.currentPage - 1) * rowsPerPage, this.currentPage * rowsPerPage);
     }
     get virtualRows() {
+        const newVirtualIndexKey = `${this.virtualStartIndex}-${this.virtualEndIndex}`;
+        if (this.cachedVirtualRows && this.cachedVirtualIndexKey === newVirtualIndexKey) {
+            return this.cachedVirtualRows;
+        }
+        this.cachedVirtualIndexKey = newVirtualIndexKey;
         if (!this.useVirtualScroll.vertical) {
-            return this.paginatedRows.map((row, idx) => ({ row, actualIndex: idx }));
+            this.cachedVirtualRows = this.paginatedRows.map((row, idx) => ({ row, actualIndex: idx }));
         }
-        return this.paginatedRows
-            .slice(this.virtualStartIndex, this.virtualEndIndex + 1)
-            .map((row, relativeIdx) => ({
-            row,
-            actualIndex: this.virtualStartIndex + relativeIdx,
-        }));
+        else {
+            this.cachedVirtualRows = this.paginatedRows
+                .slice(this.virtualStartIndex, this.virtualEndIndex + 1)
+                .map((row, relativeIdx) => ({
+                row,
+                actualIndex: this.virtualStartIndex + relativeIdx,
+            }));
+        }
+        return this.cachedVirtualRows;
     }
     get topSpacerHeight() {
         if (!this.useVirtualScroll.vertical || this.virtualStartIndex === 0)
@@ -8775,6 +8867,7 @@ class SdTable {
         if (newSelected.length === selectedArray.length)
             return;
         this.innerSelected = new Set(newSelected);
+        this.cachedIsAllChecked = undefined;
         this.sdSelectChange.emit(Array.from(this.innerSelected));
     }
     toggleSelectAll(checked) {
@@ -8786,16 +8879,29 @@ class SdTable {
             const currentPageKeys = this.paginatedRows.map(r => r[this.rowKey]);
             this.innerSelected = new Set([...this.innerSelected].filter(r => !currentPageKeys.includes(r[this.rowKey])));
         }
+        this.cachedIsAllChecked = undefined;
         this.sdSelectChange.emit(Array.from(this.innerSelected));
     }
     get isAllChecked() {
+        const selectionKey = `${this.paginatedRows.length}-${this.innerSelected.size}`;
+        if (this.cachedIsAllChecked !== undefined && this.lastSelectionKey === selectionKey) {
+            return this.cachedIsAllChecked;
+        }
         const total = this.paginatedRows.length;
         const selectedCount = this.paginatedRows.filter(row => Array.from(this.innerSelected).some(selectedRow => selectedRow[this.rowKey] === row[this.rowKey])).length;
-        if (selectedCount === 0)
-            return false; // 아무것도 안 선택됨
-        if (selectedCount === total)
-            return true; // 전부 선택됨
-        return null; // 일부만 선택됨
+        let result;
+        if (selectedCount === 0) {
+            result = false; // 아무것도 안 선택됨
+        }
+        else if (selectedCount === total) {
+            result = true; // 전부 선택됨
+        }
+        else {
+            result = null; // 일부만 선택됨
+        }
+        this.cachedIsAllChecked = result;
+        this.lastSelectionKey = selectionKey;
+        return result;
     }
     // RAF 통합 관리
     scheduleUpdate(type) {
@@ -8821,13 +8927,22 @@ class SdTable {
             return;
         }
         const scrollTop = this.scrollTopPosition;
-        const containerHeight = this.scrollContainer?.clientHeight || 0;
+        let containerHeight = this.cachedContainerHeight;
+        if (containerHeight === 0 && this.scrollContainer) {
+            containerHeight = this.scrollContainer.clientHeight;
+            this.cachedContainerHeight = containerHeight;
+        }
+        const bufferSize = this.virtualBufferSize.vertical || 5;
         const startIndex = Math.floor(scrollTop / this.virtualRowHeight);
         const visibleCount = Math.ceil(containerHeight / this.virtualRowHeight);
-        const endIndex = startIndex + visibleCount;
-        const bufferSize = this.virtualBufferSize.vertical || 5;
-        this.virtualStartIndex = Math.max(0, startIndex - bufferSize);
-        this.virtualEndIndex = Math.min(this.paginatedRows.length - 1, endIndex + bufferSize);
+        const endIndex = startIndex + visibleCount - 1;
+        const newStartIndex = Math.max(0, startIndex - bufferSize);
+        const newEndIndex = Math.min(this.paginatedRows.length - 1, endIndex + bufferSize);
+        // 실제로 변경된 경우에만 상태 업데이트
+        if (this.virtualStartIndex !== newStartIndex || this.virtualEndIndex !== newEndIndex) {
+            this.virtualStartIndex = newStartIndex;
+            this.virtualEndIndex = newEndIndex;
+        }
     }
     // 가로 가상 스크롤 렌더링 계산
     calculateVisibleColumnRange() {
@@ -8837,7 +8952,12 @@ class SdTable {
             return;
         }
         const scrollLeft = this.scrollLeftPosition;
-        const containerWidth = this.scrollContainer?.clientWidth || 0;
+        // 캐시된 값 사용, 없으면 측정 후 캐시
+        let containerWidth = this.cachedContainerWidth;
+        if (containerWidth === 0 && this.scrollContainer) {
+            containerWidth = this.scrollContainer.clientWidth;
+            this.cachedContainerWidth = containerWidth;
+        }
         const stickyLeftCount = this.stickyColumn.left || 0;
         const stickyRightCount = this.stickyColumn.right || 0;
         // 가상 스크롤 컬럼 - sticky column 제외
@@ -8877,22 +8997,34 @@ class SdTable {
             }
         }
         const bufferSize = this.virtualBufferSize.horizontal || 5;
-        this.virtualStartColIdx = Math.max(0, startIdx - bufferSize);
-        this.virtualEndColIdx = Math.min(virtualColumns.length - 1, endIdx + bufferSize);
+        const newStartColIdx = Math.max(0, startIdx - bufferSize);
+        const newEndColIdx = Math.min(virtualColumns.length - 1, endIdx + bufferSize);
+        // 실제로 변경된 경우에만 상태 업데이트
+        if (this.virtualStartColIdx !== newStartColIdx || this.virtualEndColIdx !== newEndColIdx) {
+            this.virtualStartColIdx = newStartColIdx;
+            this.virtualEndColIdx = newEndColIdx;
+        }
     }
     // ----- Helpers -----
     getStickyStyle(colIdx) {
+        // 캐시된 스타일이 있으면 반환
+        if (this.stickyStyleCache.has(colIdx)) {
+            return this.stickyStyleCache.get(colIdx);
+        }
         const leftOffset = this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) + (this.selectable ? 52 : 0);
         const rightOffset = this.columnWidths
             .filter((_, i) => i >= this.visibleColumns.length - (this.stickyColumn.right || 0) && i > colIdx)
             .reduce((a, b) => a + b, 0);
-        return {
+        const style = {
             '--sticky-left-offset': `${leftOffset}px`,
             '--sticky-right-offset': `${rightOffset}px`,
             'width': `${this.columnWidths[colIdx]}px`,
             'minWidth': `${this.columnWidths[colIdx]}px`,
             'maxWidth': `${this.columnWidths[colIdx]}px`,
         };
+        // 스타일 캐시에 저장
+        this.stickyStyleCache.set(colIdx, style);
+        return style;
     }
     handleResize(index, event) {
         // SSR 환경 체크
@@ -8922,6 +9054,10 @@ class SdTable {
         return format ? format(value, row) : value;
     }
     getColumnRenderedInOrder() {
+        const orderKey = `${this.visibleColumns.length}-${this.virtualStartColIdx}-${this.virtualEndColIdx}`;
+        if (this.cachedColumnOrder && this.lastColumnOrderKey === orderKey) {
+            return this.cachedColumnOrder;
+        }
         const stickyLeftCount = this.stickyColumn.left || 0;
         const stickyRightCount = this.stickyColumn.right || 0;
         // Sticky left 컬럼들
@@ -8932,13 +9068,15 @@ class SdTable {
                 .slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount)
                 .slice(this.virtualStartColIdx, this.virtualEndColIdx + 1)
             : this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
-        return {
+        this.cachedColumnOrder = {
             stickyLeftCount,
             stickyRightCount,
             stickyLeftCols,
             middleCols,
             stickyRightCols,
         };
+        this.lastColumnOrderKey = orderKey;
+        return this.cachedColumnOrder;
     }
     // ----- Render -----
     renderHead() {
@@ -8976,7 +9114,7 @@ class SdTable {
         }))));
     }
     renderBody() {
-        return (hAsync("tbody", { ...(!this.paginatedRows.length && { part: 'tbody-empty' }), class: `sd-table-tbody ${this.useVirtualScroll.vertical ? 'sd-table-tbody--virtual-scroll' : ''}`, style: { '--total-virtual-height': `${this.totalVirtualHeight}px` } }, this.isLoading && (hAsync("div", { class: "sd-table__loading" }, hAsync("sd-loading-spinner", null))), this.useVirtualScroll.vertical && this.topSpacerHeight > 0 && this.renderSpacerRow('top'), this.paginatedRows.length > 0 &&
+        return (hAsync("tbody", { ...(!this.paginatedRows.length && { part: 'tbody-empty' }), class: `sd-table-tbody ${this.useVirtualScroll.vertical ? 'sd-table-tbody--virtual-scroll' : ''}`, style: { '--total-virtual-height': `${this.totalVirtualHeight}px` } }, this.useVirtualScroll.vertical && this.topSpacerHeight > 0 && this.renderSpacerRow('top'), this.paginatedRows.length > 0 &&
             this.virtualRows.map(({ row, actualIndex }) => this.renderRow(row, actualIndex)), this.useVirtualScroll.vertical &&
             this.bottomSpacerHeight > 0 &&
             this.renderSpacerRow('bottom')));
@@ -9046,44 +9184,16 @@ class SdTable {
             }, "aria-hidden": "true" }, hAsync("div", { class: "sd-table__skeleton-cell" })));
     }
     render() {
-        return (hAsync(Host, { key: '658ead41c51d9f031c0334d91cad9a06811721b9' }, hAsync("div", { key: 'c98a48d31b16cbd934e4ae47b55bcfeaa5db2520', class: "sd-table__wrapper", style: {
+        return (hAsync(Host, { key: '8c01d8c3b3428d0fccb37e337fd12412c7aee51a' }, hAsync("div", { key: 'be41d64f4b9daaa1440f2a89e253ce487894758e', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, hAsync("div", { key: '080fc2b81b016c4876cf90502952e49a5e468534', class: "sd-table__container", style: {
+            } }, hAsync("div", { key: '580c4ca69d5374585eeacc756561e5caf2ea6e29', class: "sd-table__container", style: {
                 '--table-container-height': `calc(${this.height} - ${this.pagination && this.innerRows.length > 0 ? 48 : 0}px)`,
-            } }, hAsync("div", { key: 'd56754a7cd4acc0505bb36d2d8a116a20d19c0e4', class: {
+            } }, hAsync("div", { key: '2832a6e9078923daeefa28512450950abfca0aad', class: {
                 'sd-table__middle': true,
                 'sd-table__middle--scrollable': this.paginatedRows.length > 0,
                 'sd-table__middle--loading': this.isLoading,
-            } }, hAsync("table", { key: '39d620db8e2f9ea585f8c73222687f59aaa830e6', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), hAsync("div", { key: 'dcd87252620d5fb95deda064e2a7b4e6871c9dc1', class: "sd-table__bottom" }, !this.paginatedRows.length && (hAsync("div", { key: 'd31ea2dbc747385fb7f7a733725e0e34f24f4489', class: "sd-table__no-data" }, hAsync("slot", { key: '8375b5f42dafa7d430ad33226500d2a84b099990', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (hAsync("div", { key: '2b231be27d05c5bb52ff1c0ced255f10be449068', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '45676f7c4c931896c6414fa8beb6a6c23e203e92', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => {
-                if (!this.useInternalPagination) {
-                    this.sdPageChange.emit(e.detail);
-                }
-                else {
-                    this.currentPage = e.detail;
-                    this.sdPageChange.emit(this.currentPage);
-                }
-            } }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: '3f65639b064a27993dc62a8e4a5dc86b16aec4f8', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => {
-                const changedRowsPerPage = e.detail.value ? Number(e.detail.value) : 0;
-                if (!this.useInternalPagination) {
-                    this.sdRowsPerPageChange.emit(changedRowsPerPage);
-                }
-                else {
-                    const newRowsPerPage = Number(e.detail.value || 0);
-                    let newLastPage = Math.max(1, Math.ceil(this.innerRows.length / newRowsPerPage));
-                    let newCurrentPage = this.currentPage;
-                    if (newCurrentPage > newLastPage) {
-                        newCurrentPage = newLastPage;
-                    }
-                    this.pagination = {
-                        page: newCurrentPage,
-                        rowsPerPage: newRowsPerPage,
-                        lastPage: newLastPage,
-                    };
-                    this.currentPage = newCurrentPage;
-                    this.sdRowsPerPageChange.emit(changedRowsPerPage);
-                }
-            } })))))));
+            } }, this.isLoading && (hAsync("div", { key: '696cc35d6d3c58dabf92aa49dbff9a7034a0ed64', class: "sd-table__middle--loading__spinner" }, hAsync("sd-loading-spinner", { key: '8cbd272006b64c4a6e10c87c58313a0792358451' }))), hAsync("table", { key: 'de78dba38361cfebe39f8c3cddb57a1c93861ff6', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), hAsync("div", { key: '662407b29c2ea446d96553dd548bec11e8179185', class: "sd-table__bottom" }, !this.paginatedRows.length && (hAsync("div", { key: '3a475142c5da9cc40f92b761923415893a1366fa', class: "sd-table__no-data" }, hAsync("slot", { key: '49e90e85516b6656c7019b4b33a50f6b36d949a8', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (hAsync("div", { key: '460a669cb3841fdc7745e4acb774729910890b42', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '971f5e41f8df09f4455cdf41f969e5f47d2aac99', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: 'ed37b8efc95ae51bf4c903a5c7c5a068ec9bfcca', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => this.changeRowsPerPage(e.detail.value) })))))));
     }
     static get watchers() { return {
         "columns": ["handleColumnsChange"],
@@ -9181,7 +9291,7 @@ class SdTag {
     }
     render() {
         const tagClasses = this.getTagClasses();
-        return (hAsync("span", { key: '674d187602c90a83016377bd8c25bd288aa819ec', class: tagClasses, style: {
+        return (hAsync("span", { key: '982a1d00b05ea1978c001d0898b8d95a57f92ff5', class: tagClasses, style: {
                 '--tag-bg-color': this.bgColor,
                 '--tag-text-color': this.textColor,
             }, "aria-label": this.label || 'tag' }, this.renderContent()));
@@ -9211,7 +9321,7 @@ class SdTbody {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: 'b94310b0ad1566cf9ccbac3ccdc5fbcdd2e53f8c' }, hAsync("slot", { key: '382fb835aa4516adad374443556084703b8560c3' })));
+        return (hAsync(Host, { key: 'f981fe2f39d8d1f292f018fba5f6f28f6606fc12' }, hAsync("slot", { key: 'ae556a0c16e782d1842fabc1cb54a495b88f1ce5' })));
     }
     static get style() { return sdTbodyCss; }
     static get cmpMeta() { return {
@@ -9235,11 +9345,11 @@ class SdTd {
     tdStyle;
     tdClass;
     render() {
-        return (hAsync(Host, { key: '87c947cf0092ac524cdfed0be5f1703685a64db6', role: "cell", class: {
+        return (hAsync(Host, { key: '3fe3f8f4ec5b068bda0edd22ebbc5c973ae75b15', role: "cell", class: {
                 'sd-td': true,
                 [`sd-td--${this.align}`]: true,
                 [this.tdClass || '']: Boolean(this.tdClass),
-            }, style: this.tdStyle }, hAsync("slot", { key: '4369629e345d8cc5bb17166d6877dba421522e4d' })));
+            }, style: this.tdStyle }, hAsync("slot", { key: 'f94a99bafb7723389304e01f809b3003deda067c' })));
     }
     static get style() { return sdTdCss; }
     static get cmpMeta() { return {
@@ -9264,7 +9374,7 @@ class SdTh {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: 'cf30b704166adc6d7de5ade8d455d34ecf575199', role: "columnheader" }, hAsync("slot", { key: '7863306b924a749aba5ba55f70b8b3d5c205d133' })));
+        return (hAsync(Host, { key: '59aee067627e3ac7c23ea5d9f9401c19a00203bd', role: "columnheader" }, hAsync("slot", { key: 'ea015f9ebcdccd3e08aab46af4e2a8bcb46e4a3a' })));
     }
     static get style() { return sdThCss; }
     static get cmpMeta() { return {
@@ -9325,20 +9435,20 @@ class SdTooltip {
             : {
                 onClick: () => (this.showTooltip = !this.showTooltip),
             };
-        return (hAsync(Fragment, { key: 'fc892ba2872491bca673db93fed5c4b724c7141d' }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (hAsync("sd-tooltip-portal", { key: 'd6b8099b49ffc120c05bd797e3eb2c2c9c40238e', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, hAsync("div", { key: '06eca5d091eec639a556472605140bdccf6c4869', class: {
+        return (hAsync(Fragment, { key: 'ca85f7063d836f7a33d893d262aea709e0db1d00' }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (hAsync("sd-tooltip-portal", { key: 'ab8656db09fc630085a684ef124486551e33f910', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, hAsync("div", { key: 'ccd2369218d5b4dcb23280760c584f214beea932', class: {
                 'sd-tooltip-menu': true,
                 [`sd-tooltip-menu--${this.type}`]: true,
                 [`sd-tooltip-menu--${this.placement}`]: true,
                 'sd-tooltip-menu--with-close': this.useClose,
                 [`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,
-            } }, hAsync("i", { key: '38ad3f0461c6578140e9a0f253c1f0cd5343f0bf', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: '58b5d5e25512f191ee652c34815f8ad33a496a31', class: {
+            } }, hAsync("i", { key: '077a1c19e4fa7a54a80dff168950ee0327240724', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: '09d265c0412099b0bc64e6a5297011d7f4e74bb3', class: {
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
-            } })), hAsync("div", { key: 'a29c4aa221aa9b833b9b0de101b658f5c5351ec0', class: "sd-tooltip-menu__content", ref: el => {
+            } })), hAsync("div", { key: '13a0d079cae19cf77c55b9aa3b8325dc1d4daf82', class: "sd-tooltip-menu__content", ref: el => {
                 if (el && this.slotContent && !el.hasChildNodes()) {
                     el.appendChild(this.slotContent.cloneNode(true));
                 }
-            } }, !this.slotContent && hAsync("span", { key: 'a9e016d086156d522980b99187c9b040ccb232b9' }, this.el.textContent)), this.useClose && (hAsync("div", { key: 'ae54793f18dcb7e759bd4ea2d7570cd56f45eb9a', class: "sd-tooltip-menu__close-button" }, hAsync("button", { key: '1c3dc26d1bba1eaaed42757dae9a38613a86aea8', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: '3b7f9dafaa7f1a3686f123a12acae6b35fd1849d', name: "close", size: "12", color: "#AAAAAA" })))))))));
+            } }, !this.slotContent && hAsync("span", { key: '79315652fc9db9aca0f06ef0f402d3302b909275' }, this.el.textContent)), this.useClose && (hAsync("div", { key: '5ab0323020a5d3f2c13d690a906fde8de9df36c9', class: "sd-tooltip-menu__close-button" }, hAsync("button", { key: 'deed089b5bb820f54471d44ff0c69e69ffcddf22', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: '6c93da0c7f425ad1111b68c508476db74462e2ad', name: "close", size: "12", color: "#AAAAAA" })))))))));
     }
     static get style() { return sdTooltipCss; }
     static get cmpMeta() { return {
@@ -9514,7 +9624,7 @@ class SdTooltipPortal {
         this.sdClose.emit();
     }
     render() {
-        return hAsync("slot", { key: 'b8c60526ca9acb16821b1952b526fad452d1d5e7' });
+        return hAsync("slot", { key: '959737d1d7012ea468ab11bf2f1a8444e5274d4e' });
     }
     static get cmpMeta() { return {
         "$flags$": 777,
@@ -9540,7 +9650,7 @@ class SdTr {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '2cfec32649fa440cb44f83392c439e58dcb24644', role: "row" }, hAsync("slot", { key: '0146af3690a7a6445b65893f86e0b9e5cd1d8a02' })));
+        return (hAsync(Host, { key: '90de593581b21ca801462331e50126899946bf43', role: "row" }, hAsync("slot", { key: '58eb2f9b52a36495afe40899d45bd6d1ba62b5d4' })));
     }
     static get style() { return sdTrCss; }
     static get cmpMeta() { return {