@sellmate/design-system 0.0.43 → 0.0.45

package/dist/esm/{sd-button_15.entry.js → sd-button_12.entry.js}

@@ -1,9 +1,10 @@
 import { r as registerInstance, c as createEvent, a as getElement, h, H as Host, F as Fragment } from './index-B2T3tS5r.js';
-import { r as resolveColor, c as colors } from './resolveColor-BYf-ybt2.js';
+import { r as resolveColor } from './resolveColor-CswQ9y2Q.js';
 import { B as BaseDropdownEvent, S as SelectKeyboardNavigation } from './select-keyboard-navigation-C2JaR3A6.js';
 import { T as TooltipArrow } from './tooltipArrow-Pa2XQhpp.js';
+import './color-CgyTlXBV.js';
 
-const sdButtonCss = ".sd-button{text-decoration:none;cursor:pointer;border-radius: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}.sd-button--xs{padding:0 8px;font-size:12px;font-weight:500;line-height:20px;min-height:24px}.sd-button--sm{padding:0 12px;font-size:12px;font-weight:500;line-height:20px;min-height:28px}.sd-button--md{padding:0 20px;font-size:16px;font-weight:500;line-height:26px;min-height:34px}.sd-button--lg{padding:0 28px;font-size:18px;font-weight:500;line-height:30px;min-height:62px}.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: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:1px solid #cccccc;background:#e1e1e1;color:#888888;cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:fit-content;height:fit-content;aspect-ratio:1/1}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:4px;z-index:1;font-weight:500}";
+const sdButtonCss = "sd-button{display:inline-block;width:fit-content;height:fit-content}.sd-button{text-decoration:none;cursor:pointer;border-radius: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}.sd-button--xs{padding:0 8px;font-size:12px;font-weight:500;line-height:20px;min-height:24px}.sd-button--sm{padding:0 12px;font-size:12px;font-weight:500;line-height:20px;min-height:28px}.sd-button--md{padding:0 20px;font-size:16px;font-weight:500;line-height:26px;min-height:34px}.sd-button--lg{padding:0 28px;font-size:18px;font-weight:500;line-height:30px;min-height:62px}.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: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:1px solid #cccccc;background:#e1e1e1;color:#888888;cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:fit-content;height:fit-content;aspect-ratio:1/1}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:4px;z-index:1;font-weight:500}";
 
 const ICON_SIZES = {
     xs: 12,
@@ -145,83 +146,6 @@ const SdCheckbox = class {
 };
 SdCheckbox.style = sdCheckboxCss;
 
-const sdGuideCss = "@charset \"UTF-8\";.sd-button{text-decoration:none;cursor:pointer;border-radius: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}.sd-button--xs{padding:0 8px;font-size:12px;font-weight:500;line-height:20px;min-height:24px}.sd-button--sm{padding:0 12px;font-size:12px;font-weight:500;line-height:20px;min-height:28px}.sd-button--md{padding:0 20px;font-size:16px;font-weight:500;line-height:26px;min-height:34px}.sd-button--lg{padding:0 28px;font-size:18px;font-weight:500;line-height:30px;min-height:62px}.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: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:1px solid #cccccc;background:#e1e1e1;color:#888888;cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:fit-content;height:fit-content;aspect-ratio:1/1}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:4px;z-index:1;font-weight:500}sd-guide{display:inline-block;height:fit-content}sd-guide .sd-guide{display:inline-block}sd-guide .sd-guide .sd-button{padding:0 16px 0 12px;border-radius:16px;color:#333333 !important;display:flex;align-items:center;transition:none}sd-guide .sd-guide .sd-button .sd-button__content{color:#333333 !important}sd-guide .sd-guide .sd-button .sd-button__content .sd-button__label{color:#333333 !important;margin-left:4px}sd-guide .sd-guide--active .sd-button{border:1px solid #12b553}sd-guide .sd-guide--active .sd-button .sd-button__content .sd-button__label{color:white !important}.sd-guide__popup{position:relative;padding:20px 32px;border-radius:8px;box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.1);background:white}.sd-guide__popup>.sd-guide__popup__close{position:absolute;top:12px;right:12px}.sd-guide__popup__header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.sd-guide__popup__header .sd-guide__popup__title{margin-top:0;font-size:16px;font-weight:700;line-height:26px;color:#333333}.sd-guide__popup__list{width:100%;padding:0;margin:0}.sd-guide__popup__list__item{display:flex;width:100%;align-items:start;list-style:none;color:#333333;font-size:12px;font-weight:400}.sd-guide__popup__list__item p{width:100%;padding:0;margin:0;word-wrap:break-word;word-break:break-word;white-space:normal;overflow-wrap:break-word;min-width:0}.sd-guide__popup__list__item::before{display:block;content:\"-\";width:6px;color:#333333;font-size:12px;font-weight:400;margin-left:10px;margin-right:12px;flex-shrink:0}.sd-guide__popup__list__item--depth-2::before{content:\"•\"}.sd-guide__popup__list__item--depth-2{padding-left:26px}";
-
-const GUIDE_LABEL = {
-    help: '활용 TIP',
-    pdf: 'PDF Guide',
-    youtube: 'Video Guide',
-    notion: '사용 가이드',
-    event: 'Event Button',
-};
-const GUIDE_ICON = {
-    help: {
-        name: 'helpOutline',
-        size: 20,
-        color: colors.green_70,
-    },
-    pdf: { name: 'pdf', size: 20, color: colors.red_75 },
-    youtube: { name: 'youtube', size: 20, color: colors.red_75 },
-    notion: { name: 'notion', size: 16, color: colors.black },
-    event: { name: 'event', size: 16, color: colors.brilliantblue_70 },
-};
-const SdGuide = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    get el() { return getElement(this); }
-    type = 'help';
-    label = '';
-    message = '';
-    guideUrl = '';
-    popupWidth;
-    popupShow = false;
-    guideRef;
-    handleClickGuide = () => {
-        if (this.type === 'help') {
-            this.popupShow = !this.popupShow;
-            return;
-        }
-        if (this.guideUrl) {
-            window.open(this.guideUrl, '_blank');
-        }
-    };
-    get guideClass() {
-        const classes = ['sd-guide', `sd-guide--${this.type}`];
-        if (this.popupShow)
-            classes.push('sd-guide--active');
-        return classes.join(' ');
-    }
-    closeDropdown = () => {
-        this.popupShow = false;
-    };
-    render() {
-        const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (h(Host, { key: '151e2b8148ed0dc26f97fd81902be88edc10933a', style: {
-                '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, h("sd-button", { key: '05d6fdf5721d1ef5be5646227b6db112560f944e', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', 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 && (h("sd-portal", { key: '63b86edca7f72a5a74477140d01be873bc2a6fbc', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '8a5cae088afd50f005a10eebcf66ae57f3661710', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: '2734f07d8b9fcbbeaa2942c9219461f5888e38b0', class: "sd-guide__popup__close", icon: "close", color: colors.grey_65, size: "md", variant: "ghost", noHover: true,
-            // buttonStyle={{ padding: '0px', minHeight: '0px' }}
-            onSdClick: this.closeDropdown }), h("div", { key: '5b602905d247032b7bb09c1635de094505295178', class: "sd-guide__popup__header" }, h("sd-icon", { key: '9156d751748598fbe657626899d5e6730a0c0ba2', name: "helpOutline", size: 24, color: colors.green_65 }), h("h3", { key: '881b74e449725b1953b6a81c4c042748ae609319', class: "sd-guide__popup__title" }, this.label || GUIDE_LABEL[this.type])), h("ul", { key: '51a13a02e2c1beefcfc11a1cdc602f433572e157', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
-    }
-    // 현재 2depth까지만 스타일 적용
-    renderListItem(message, depth = 0) {
-        const listItems = [];
-        if (Array.isArray(message)) {
-            const depthMsg = message.map(msg => this.renderListItem(msg, depth + 1));
-            listItems.push(...depthMsg.flat());
-        }
-        else {
-            listItems.push(this.renderLi(message, depth));
-        }
-        return listItems;
-    }
-    renderLi = (message, depth) => {
-        const listContent = message.replace(/ /gi, ' ');
-        return (h("li", { class: `sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}` }, h("p", { innerHTML: listContent })));
-    };
-};
-SdGuide.style = sdGuideCss;
-
 const Add8 = (props) => (h("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, h("path", { d: "M3.99969 0.633484C4.16537 0.633484 4.29948 0.767622 4.2995 0.933289V3.69989H7.06708C7.23245 3.70014 7.36672 3.8343 7.36688 3.99969C7.36688 4.16523 7.23255 4.29925 7.06708 4.2995H4.2995V7.06708C4.29925 7.23255 4.16523 7.36688 3.99969 7.36688C3.8343 7.36672 3.70014 7.23245 3.69989 7.06708V4.2995H0.933289C0.767622 4.29948 0.633484 4.16537 0.633484 3.99969C0.633648 3.83416 0.767724 3.69991 0.933289 3.69989H3.69989V0.933289C3.69991 0.767724 3.83416 0.633648 3.99969 0.633484Z", fill: "currentColor" })));
 
 const Add10 = (props) => (h("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, h("path", { d: "M5 0.766602C5.22088 0.766602 5.40034 0.946123 5.40039 1.16699V4.59961H8.83398C9.05461 4.59978 9.23317 4.77939 9.2334 5C9.2334 5.22081 9.05475 5.40022 8.83398 5.40039H5.40039V8.83398C5.40021 9.05475 5.22081 9.2334 5 9.2334C4.77939 9.23317 4.59979 9.05461 4.59961 8.83398V5.40039H1.16699C0.946123 5.40034 0.766602 5.22088 0.766602 5C0.766833 4.77931 0.946265 4.59966 1.16699 4.59961H4.59961V1.16699C4.59966 0.946265 4.77931 0.766833 5 0.766602Z", fill: "currentColor" })));
@@ -2231,7 +2155,7 @@ const SdIcon = class {
     }
     render() {
         const IconComponent = Icons[this.name]?.[this.size];
-        return (h("i", { key: '6e960b0cd16604be33d46a82e51f681cb3c16cbf', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: '61ed4a9607f3dcc656b991b0705e6623d1c690db', color: this.resolvedColor })));
+        return (h("i", { key: '738453a8bc8d1b9bb67fbaaffb7de203c2982c30', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: '2f970609756be608b660a522949dd79cca64fcc8', color: this.resolvedColor })));
     }
 };
 SdIcon.style = sdIconCss;
@@ -2336,11 +2260,11 @@ const SdInput = class {
                 '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
             }
             : {};
-        return (h(Host, { key: '331f9b3473c6fbd88b05013dc9a3fdd8d88a8a43', style: inputWidth }, this.label && h("div", { key: '9f998c7e3e0350cb4c81fb40881bf60bd85262fd', class: "sd-input__label" }, this.label), h("label", { key: '201572ad47dcbae9da7ea68247e3af729c815578', class: {
+        return (h(Host, { key: '87a102220530a2e06620619967f1925f193b4794', style: inputWidth }, this.label && h("div", { key: 'dec1ef5b27dadc7b2c6c0e9f5dab978b338b5a45', class: "sd-input__label" }, this.label), h("label", { key: '72ba8b8b0019fd1bfc222207df4b42735457873d', class: {
                 'sd-input': true,
                 [this.getInputStatus()]: true,
                 'sd-input--barcode': !!this.barcode,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("slot", { key: '976c8e1a97dc03ffe30216f2b9a331da1e5e80bd', name: "prefix" }), h("input", { key: '42bb9cfd1864294550422f23f7989cf391da732a', 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) }), h("slot", { key: '55a23ec021df0f071eeef45092cd71527ede09c5', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: 'a96f46a1b1fce96da2547c40173b3f044686813e', name: "close", color: "#888", class: "sd-input__clear-icon", onClick: () => {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("slot", { key: '7745177f5638351670adb3610325d44df156826e', name: "prefix" }), h("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) }), h("slot", { key: 'b62387e0c2122cfb9f5599a108d54682df59fef6', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: 'b860d9c2387adf97d7317bba550b169ac9f4ac49', name: "close", color: "#888", class: "sd-input__clear-icon", onClick: () => {
                 this.internalValue = '';
                 this.sdChange?.emit(this.internalValue);
                 this.sdInput?.emit(this.internalValue);
@@ -2353,6 +2277,18 @@ const SdInput = class {
 };
 SdInput.style = sdInputCss;
 
+const sdLoadingSpinnerCss = "sd-loading-spinner{display:block}sd-loading-spinner .sd-loading-spinner{animation:sd-loading-spin 2s linear infinite;transform-origin:center center}sd-loading-spinner .sd-loading-spinner .path{animation:sd-loading-spin-path 1.5s ease-in-out infinite}@keyframes sd-loading-spin{0%{transform:rotate3d(0, 0, 1, 0deg)}25%{transform:rotate3d(0, 0, 1, 90deg)}50%{transform:rotate3d(0, 0, 1, 180deg)}75%{transform:rotate3d(0, 0, 1, 270deg)}100%{transform:rotate3d(0, 0, 1, 359deg)}}@keyframes sd-loading-spin-path{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35px}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124px}}";
+
+const SdLoadingSpinner = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: '54446b42c83eff572c2d0d63c367a7e407d722a5' }, h("svg", { key: '92ad1f0446dc5912a656512d09ab4b8b3b262156', class: "sd-loading-spinner text-positive", width: "72px", height: "72px", viewBox: "25 25 50 50" }, h("circle", { key: 'b9b0c2ea5233fb5f5c784d0262c6ba526dc00622', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+    }
+};
+SdLoadingSpinner.style = sdLoadingSpinnerCss;
+
 const sdPaginationCss = ".sd-pagination{display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;gap:8px;color:#555555;width:100%;font-size:12px}.sd-pagination .prepend-btns{display:flex;flex-flow:row nowrap;align-items:center;gap:8px;width:60px}.sd-pagination .prepend-btns button{width:26px;height:26px;border:0;background:none}.sd-pagination .prepend-btns button:hover{border:1px solid #006ac1;border-radius:14px}.sd-pagination .append-btns{display:flex;flex-flow:row nowrap;align-items:center;gap:8px;width:60px}.sd-pagination .append-btns button{width:26px;height:26px;border:0;background:none}.sd-pagination .append-btns button:hover{border:1px solid #006ac1;border-radius:14px}.sd-pagination .pagination-btn{display:flex;align-items:center;justify-content:center;border-radius:14px;outline:none;border:none;cursor:pointer;height:26px;color:#555555;width:var(--pagination-btn-width, 26px)}.sd-pagination .pagination-btn--selected{background-color:#006ac1;color:white}.sd-pagination .pagination-btn:hover{border:1px solid #006ac1}.sd-pagination--simple .pagination-info{line-height:26px;display:flex;flex-flow:row nowrap;align-items:center;gap:8px}.sd-pagination--simple .pagination-info .current-page,.sd-pagination--simple .pagination-info .last-page{padding:0 2px}";
 
 const BUTTON_WIDTH = {
@@ -2372,12 +2308,6 @@ const SdPagination = class {
     lastPage = 1;
     simple = false;
     pageChange;
-    onPropChange() {
-        console.log('Pagination props changed', {
-            currentPage: this.currentPage,
-            lastPage: this.lastPage,
-        });
-    }
     get paginationClasses() {
         const classes = ['sd-pagination'];
         if (this.simple) {
@@ -2433,17 +2363,13 @@ const SdPagination = class {
         }
     }
     render() {
-        return (h("div", { key: 'c200da844c5cd3bac4693979edfd4936fca50e96', class: this.paginationClasses }, h("div", { key: 'aebfbdc184eb7c71e05db5fd42ec8b5f6bf3603f', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (h("div", { key: '3b65d74d4b70b8b3292a20daa5d89ffb7d9a66e7', class: this.paginationClasses }, h("div", { key: 'a3be2b1c24ac6ac7ecde25223d9208e63e558bf3', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (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)))), h("div", { key: '9b15a86715af6e7f4aa89bd43494211449d7b683', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '9c145c18eacc2ab0115d162cbb50e5ad3ea62c80', class: "append-btns" }, this.renderNextButtons())));
     }
-    static get watchers() { return {
-        "currentPage": ["onPropChange"],
-        "lastPage": ["onPropChange"]
-    }; }
 };
 SdPagination.style = sdPaginationCss;
 
@@ -2565,7 +2491,7 @@ const SdPortal = class {
         this.sdClose.emit();
     }
     render() {
-        return h("slot", { key: '120ce8e686e5935293738aa5a470b960dfd518c5' });
+        return h("slot", { key: 'b24b7f844564365e887dc8cee8b98e26a94961cd' });
     }
 };
 
@@ -2773,11 +2699,11 @@ const SdSelect = class extends BaseDropdownEvent {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (h(Host, { key: '8706a1e60e18e90e05429bb838de6d3a4da6d4bc', style: style }, h("div", { key: 'fbec6760ae66d6ca43c504ab7ab6e1655d72b267', class: {
+        return (h(Host, { key: '94880c07678eb6a478c9c80de0c42c5c7724936e', style: style }, h("div", { key: '872f918214118adb99b50533c323e9de7ca27353', class: {
                 'sd-select': true,
                 'sd-select--open': this.isOpen,
                 'sd-select--disabled': this.disabled,
-            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: 'b8ecf2553fc65a009cda2fabe3d4fdafdd4cf57c', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: '30e44d67c6d8b81c59c798ffa4de43337de6f195', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label) {
         if (!label)
@@ -2848,7 +2774,7 @@ const SdSelectOption = class {
         }
     };
     render() {
-        return (h(Host, { key: '70e4b495a158c9da1b2a5d6298a5053f70b84a7b' }, h("div", { key: '6c37c08ce1cb4654bf8ea53ceb52daee1dcfe79f', class: {
+        return (h(Host, { key: 'f1874b4e539573ddaa48cb2bdc9d13ea96bf350e' }, h("div", { key: '5a3bbd66f6623a1c02d5e1295bb974e82883b8a1', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,
@@ -2870,7 +2796,7 @@ const SdSelectOption = class {
 };
 SdSelectOption.style = sdSelectOptionCss;
 
-const sdTableCss = ".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:auto;border:1px solid #e1e1e1;border-radius:8px;font-size:12px;overflow:hidden}.sd-table__wrapper .sd-table__container .sd-table__middle{overflow:auto;will-change:scroll-position;height:var(--table-height, auto)}.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;position:relative}.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 sd-tr{width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-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 sd-tr sd-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 sd-tr sd-th.sd-th .sd-th__content--left{justify-content:flex-start}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th.sd-th .sd-th__content--center{justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th.sd-th .sd-th__content--right{justify-content:flex-end}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-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 sd-tbody .sd-table__loading{position:absolute;top:0;left:0;width:100%;height:calc(var(--table-height, auto) - 36px);min-height:calc(100% - 36px);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 sd-tbody sd-tr:last-of-type sd-td{border-bottom:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody sd-tr sd-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 sd-tbody sd-tr sd-td.sd-td--left{text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody sd-tr sd-td.sd-td--center{text-align:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody sd-tr sd-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__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%)}";
+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-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-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, 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] 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:100%;height:100%;min-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%)}";
 
 const SdTable = class {
     constructor(hostRef) {
@@ -2902,6 +2828,9 @@ const SdTable = class {
         { label: '50개씩 보기', value: 50 },
         { label: '100개씩 보기', value: 100 },
     ];
+    useVirtualScroll = false; // 가상 스크롤 사용 여부
+    virtualRowHeight = 44; // 가상 스크롤 사용시 각 행의 높이 - 가상 스크롤 사용시 필수값
+    virtualBufferSize = 5; // 가상 스크롤 위아래 버퍼 크기
     sdSelectChange;
     sdPageChange;
     sdRowsPerPageChange;
@@ -2911,23 +2840,42 @@ const SdTable = class {
     columnWidths = [];
     scrolledLeft = false;
     scrolledRight = false;
+    virtualStartIndex = 0; // 렌더링 시작 인덱스
+    virtualEndIndex = 0; // 렌더링 종료 인덱스
+    scrollTopPosition = 0;
+    scrollRequestAnimationFrame = null;
+    scrollContainer = null;
     handleColumnsChange(newCols) {
         this.columnWidths = newCols.map(c => parseInt(c.width || '120', 10));
     }
     handleRowsChange(newRows) {
         this.innerRows = [...newRows];
+        if (this.useVirtualScroll) {
+            requestAnimationFrame(() => {
+                this.calculateVisibleRange();
+            });
+        }
     }
     handleSelectedChange(newSelected) {
         this.innerSelected = new Set(newSelected);
     }
     handlePaginationChange(newVal) {
-        if (newVal?.page && newVal.page !== this.currentPage)
+        if (newVal?.page && newVal.page !== this.currentPage) {
             this.currentPage = newVal.page;
+            if (this.useVirtualScroll && this.scrollContainer) {
+                this.scrollContainer.scrollTop = 0;
+                this.scrollTopPosition = 0;
+                this.calculateVisibleRange();
+            }
+        }
     }
     componentWillLoad() {
         this.innerRows = [...(this.rows || [])];
         this.innerSelected = new Set(this.selected);
         this.columnWidths = (this.columns || []).map(c => parseInt(c.width || '120', 10));
+        if (this.pagination?.page) {
+            this.currentPage = this.pagination.page;
+        }
     }
     componentDidLoad() {
         // SSR 환경 체크
@@ -2936,14 +2884,30 @@ const SdTable = class {
         const middle = this.el.querySelector('.sd-table__middle');
         if (!middle)
             return;
+        this.scrollContainer = middle;
         const onScroll = () => {
-            const { scrollLeft, scrollWidth, clientWidth } = middle;
+            const { scrollLeft, scrollWidth, clientWidth, scrollTop } = middle;
             this.scrolledLeft = scrollLeft > 0;
             this.scrolledRight = scrollLeft + clientWidth < scrollWidth;
+            if (this.useVirtualScroll) {
+                if (this.scrollRequestAnimationFrame !== null) {
+                    cancelAnimationFrame(this.scrollRequestAnimationFrame);
+                }
+                this.scrollRequestAnimationFrame = requestAnimationFrame(() => {
+                    this.scrollTopPosition = scrollTop;
+                    this.calculateVisibleRange();
+                    this.scrollRequestAnimationFrame = null;
+                });
+            }
         };
         middle.addEventListener('scroll', onScroll, { passive: true });
         onScroll();
     }
+    disconnectedCallback() {
+        if (this.scrollRequestAnimationFrame !== null) {
+            cancelAnimationFrame(this.scrollRequestAnimationFrame);
+        }
+    }
     // ----- Derived getters -----
     get visibleColumns() {
         return this.columns.filter(col => col.visible !== false);
@@ -2955,6 +2919,33 @@ const SdTable = class {
         const result = this.innerRows.slice((this.currentPage - 1) * rowsPerPage, this.currentPage * rowsPerPage);
         return result;
     }
+    get virtualRows() {
+        if (!this.useVirtualScroll) {
+            return 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,
+        }));
+    }
+    get topSpacerHeight() {
+        if (!this.useVirtualScroll || this.virtualStartIndex === 0)
+            return 0;
+        return this.virtualStartIndex * this.virtualRowHeight;
+    }
+    get bottomSpacerHeight() {
+        if (!this.useVirtualScroll)
+            return 0;
+        const remainingRows = this.paginatedRows.length - this.virtualEndIndex - 1;
+        return remainingRows > 0 ? remainingRows * this.virtualRowHeight : 0;
+    }
+    get totalVirtualHeight() {
+        if (!this.useVirtualScroll)
+            return 0;
+        return this.paginatedRows.length * this.virtualRowHeight;
+    }
     get lastPageNumber() {
         const { lastPage, rowsPerPage = this.rows.length } = this.pagination || {};
         return lastPage ?? Math.max(1, Math.ceil(this.rows.length / rowsPerPage));
@@ -2975,20 +2966,21 @@ const SdTable = class {
             .join(' ');
     }
     // ----- Selection -----
-    //  private isRowSelected(row: Row): boolean {
-    //   return Array.from(this.innerSelected).some(r => r[this.rowKey] === row[this.rowKey]);
-    //  }
-    //  private updateRowSelect(row: Row) {
-    //   const selectedArray = Array.from(this.innerSelected);
-    //   const exists = this.isRowSelected(row);
-    //   const newSelected = exists
-    //    ? selectedArray.filter(r => r[this.rowKey] !== row[this.rowKey])
-    //    : [...selectedArray, row];
-    //   // 동일 상태면 set하지 않음 → 불필요 렌더 방지
-    //   if (newSelected.length === selectedArray.length) return;
-    //   this.innerSelected = new Set(newSelected);
-    //   this.sdSelectChange.emit(Array.from(this.innerSelected));
-    //  }
+    isRowSelected(row) {
+        return Array.from(this.innerSelected).some(r => r[this.rowKey] === row[this.rowKey]);
+    }
+    updateRowSelect(row) {
+        const selectedArray = Array.from(this.innerSelected);
+        const exists = this.isRowSelected(row);
+        const newSelected = exists
+            ? selectedArray.filter(r => r[this.rowKey] !== row[this.rowKey])
+            : [...selectedArray, row];
+        // 동일 상태면 set하지 않음 → 불필요 렌더 방지
+        if (newSelected.length === selectedArray.length)
+            return;
+        this.innerSelected = new Set(newSelected);
+        this.sdSelectChange.emit(Array.from(this.innerSelected));
+    }
     toggleSelectAll(checked) {
         if (checked) {
             const pageRows = new Set([...this.paginatedRows]);
@@ -3009,6 +3001,20 @@ const SdTable = class {
             return true; // 전부 선택됨
         return null; // 일부만 선택됨
     }
+    calculateVisibleRange() {
+        if (!this.useVirtualScroll) {
+            this.virtualStartIndex = 0;
+            this.virtualEndIndex = this.paginatedRows.length - 1;
+            return;
+        }
+        const scrollTop = this.scrollTopPosition;
+        const containerHeight = this.scrollContainer?.clientHeight || 0;
+        const startIndex = Math.floor(scrollTop / this.virtualRowHeight);
+        const visibleCount = Math.ceil(containerHeight / this.virtualRowHeight);
+        const endIndex = startIndex + visibleCount;
+        this.virtualStartIndex = Math.max(0, startIndex - this.virtualBufferSize);
+        this.virtualEndIndex = Math.min(this.paginatedRows.length - 1, endIndex + this.virtualBufferSize);
+    }
     // ----- Helpers -----
     getStickyStyle(colIdx) {
         const leftOffset = this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) + (this.selectable ? 52 : 0);
@@ -3030,7 +3036,12 @@ const SdTable = class {
         const startX = event.clientX;
         const startWidth = this.columnWidths[index];
         const handleMouseMove = (moveEvent) => {
-            const newWidth = Math.max(startWidth + moveEvent.clientX - startX, 50);
+            const targetColumn = this.columnWidths[index];
+            if (!targetColumn)
+                return;
+            const minWidth = this.columns[index]?.minWidth || 50;
+            const maxWidth = this.columns[index]?.maxWidth || 9999;
+            const newWidth = Math.min(Math.max(startWidth + moveEvent.clientX - startX, minWidth), maxWidth);
             this.columnWidths = this.columnWidths.map((width, idx) => (idx === index ? newWidth : width));
         };
         const handleMouseUp = () => {
@@ -3040,20 +3051,20 @@ const SdTable = class {
         document.addEventListener('mousemove', handleMouseMove);
         document.addEventListener('mouseup', handleMouseUp);
     }
-    //  private getCellValue(column: SdTableColumn, row: Row) {
-    //   const { field, format, name } = column;
-    //   const value = typeof field === 'function' ? field(row) : field ? row[field] : row[name];
-    //   return format ? format(value, row) : value;
-    //  }
+    getCellValue(column, row) {
+        const { field, format, name } = column;
+        const value = typeof field === 'function' ? field(row) : field ? row[field] : row[name];
+        return format ? format(value, row) : value;
+    }
     // ----- Render -----
     renderHeader() {
-        return (h("thead", null, h("sd-tr", null, this.selectable && (h("sd-th", { class: {
+        return (h("thead", null, h("tr", null, this.selectable && (h("th", { class: {
                 'sd-th': true,
                 'sd-th--selected': true,
                 'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
             }, style: {
                 '--sticky-left-offset': '0px',
-            } }, h("sd-checkbox", { checked: this.isAllChecked, disabled: !this.paginatedRows.length, onSdChange: (e) => this.toggleSelectAll(e.detail) }))), this.visibleColumns.map((col, colIdx) => (h("sd-th", { key: col.name, class: {
+            } }, h("sd-checkbox", { checked: this.isAllChecked, disabled: !this.paginatedRows.length, onSdChange: (e) => this.toggleSelectAll(e.detail) }))), this.visibleColumns.map((col, colIdx) => (h("th", { key: col.name, class: {
                 'sd-th': true,
                 [`${col.thClass}`]: Boolean(col.thClass),
                 'sticky-left': Boolean(this.stickyColumn.left && colIdx < this.stickyColumn.left),
@@ -3061,13 +3072,50 @@ const SdTable = class {
                 'sticky-left-edge': Boolean(this.stickyColumn.left && colIdx === this.stickyColumn.left - 1),
                 'sticky-right-edge': Boolean(this.stickyColumn.right &&
                     colIdx === this.visibleColumns.length - this.stickyColumn.right),
-            }, style: this.getStickyStyle(colIdx) }, h("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, h("slot", { name: `header-cell-${col.name}` }, h("div", { class: "sd-th__content--label" }, col.label)), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (h("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(colIdx, evt) }))))))));
+            }, style: { ...col.thStyle, ...this.getStickyStyle(colIdx) } }, h("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, h("slot", { name: `header-cell-${col.name}` }, h("div", { class: "sd-th__content--label" }, col.label)), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (h("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(colIdx, evt) }))))))));
+    }
+    renderBody() {
+        return (h("tbody", { ...(!this.paginatedRows.length && { part: 'tbody-empty' }), class: `sd-table-tbody ${this.useVirtualScroll ? 'sd-table-tbody--virtual-scroll' : ''}`, style: { '--total-virtual-height': `${this.totalVirtualHeight}px` } }, this.isLoading && (h("div", { class: "sd-table__loading" }, h("sd-loading-spinner", null))), this.useVirtualScroll && this.topSpacerHeight > 0 && (h("tr", { key: "virtual-top-spacer", style: {
+                height: `${this.topSpacerHeight}px`,
+            }, "aria-hidden": "true" })), this.paginatedRows.length > 0 &&
+            this.virtualRows.map(({ row, actualIndex }) => this.renderRow(row, actualIndex)), this.useVirtualScroll && this.bottomSpacerHeight > 0 && (h("tr", { key: "virtual-bottom-spacer", style: {
+                height: `${this.bottomSpacerHeight}px`,
+            }, "aria-hidden": "true" }))));
+    }
+    renderRow(row, rowIdx) {
+        return (h("tr", { key: row[this.rowKey], class: "hover:bg-Grey_Lighten-6", style: this.useVirtualScroll
+                ? {
+                    height: `${this.virtualRowHeight}px`,
+                }
+                : {} }, this.selectable && (h("td", { class: {
+                'sd-td': true,
+                'sd-td--selected': true,
+                'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
+            }, style: {
+                '--sticky-left-offset': '0px',
+            } }, h("sd-checkbox", { checked: this.isRowSelected(row), disabled: !this.paginatedRows.length, onSdChange: () => this.updateRowSelect(row) }))), this.visibleColumns.map((column, colIdx) => {
+            const rendered = this.bodyCellRenderer?.(column, row);
+            return (h("td", { key: column.name, part: `td-${column.name}`, class: {
+                    'sd-td': true,
+                    [`sd-td--${column.align || 'left'}`]: true,
+                    'sticky-left': Boolean(this.stickyColumn.left && colIdx < this.stickyColumn.left),
+                    'sticky-right': Boolean(this.stickyColumn.right && colIdx >= this.visibleColumns.length - this.stickyColumn.right),
+                    'sticky-left-edge': Boolean(this.stickyColumn.left && colIdx === this.stickyColumn.left - 1),
+                    'sticky-right-edge': Boolean(this.stickyColumn.right &&
+                        colIdx === this.visibleColumns.length - this.stickyColumn.right),
+                    [`${column.tdClass}`]: Boolean(column.tdClass),
+                }, style: this.getStickyStyle(colIdx) }, h("slot", { name: `body-cell-${column.name}-${rowIdx}` }, rendered ? (typeof rendered === 'string' ? (h("span", { innerHTML: rendered })) : (rendered)) : (this.getCellValue(column, row)))));
+        })));
     }
     render() {
-        return (h(Host, { key: 'f5a96627bda89ab76d03781d8a84931cfac9d4d9' }, h("div", { key: '8f96a9381579acb56b5551de90b2f1dcb02db2ef', class: "sd-table__wrapper", style: {
+        return (h(Host, { key: 'd115d90e244b233e0387352e7c26b3dea94e26a5' }, h("div", { key: '8c4f4b675a8448e9acddc5411a6ab2cb3ef489c5', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, h("div", { key: 'acf8435ff60702d0b54477edcea0f7a92dfe66ca', class: "sd-table__container" }, h("div", { key: 'ec02d6ceb21021c1cb9605a5bda1d0f44fbbd5af', class: "sd-table__middle", role: "table" }, h("div", { key: '40544c9ab218f8931ce2add45e1d8adb83423472', part: "table", class: this.sdTableClasses }, this.renderHeader(), h("sd-tbody", { key: '706311e5a9ddddacadcf632b22a25871cc066ce3' }, h("slot", { key: 'f6c415352bb3b3f91acf5852e3b6b53bd6567238' })))), h("div", { key: '5b95f5bb444839da29ded159327c7e09f3a07a58', class: "sd-table__bottom" })), this.pagination && this.innerRows.length > 0 && (h("div", { key: 'bdfadea5466840f4185bef70e06392cbc4b9d87b', class: "sd-table__pagination" }, h("sd-pagination", { key: '0683704cd48839846201048097836b337e4cf534', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => {
+            } }, h("div", { key: 'dd5c88ed37ab202dacb295c503ff2184b6440f5b', class: "sd-table__container" }, h("div", { key: '5cf3e8b5c99a486e494803319d76a7e32cf0f9a9', class: {
+                'sd-table__middle': true,
+                'sd-table__middle--scrollable': this.paginatedRows.length > 0,
+                'sd-table__middle--loading': this.isLoading,
+            } }, h("table", { key: 'e73f16d894af4ef1c9ed657db6c1bc98ce855961', part: "table", class: this.sdTableClasses }, this.renderHeader(), this.renderBody())), h("div", { key: '462ad10d70dcff218b39a68a610cef43fe976de6', class: "sd-table__bottom" }, !this.paginatedRows.length && (h("div", { key: '865e54d58c0f7b67d7ad6b323f671bb837e074e4', class: "sd-table__no-data" }, h("slot", { key: '29b4a7f1eeaf588a4e6eed9d58adfd366b0dcce0', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (h("div", { key: '870b309d1876ea9880342d1d5da70619bb8fcaad', class: "sd-table__pagination" }, h("sd-pagination", { key: '1f037172e2220912c9f81a106ae6dcc30e267273', 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);
                 }
@@ -3075,7 +3123,7 @@ const SdTable = class {
                     this.currentPage = e.detail;
                     this.sdPageChange.emit(this.currentPage);
                 }
-            } }), this.useRowsPerPageSelect && (h("sd-select", { key: '6a555c46a088cf181b820da1b3ab312bf5e50c04', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => {
+            } }), this.useRowsPerPageSelect && (h("sd-select", { key: 'c767d22ce24a4c10886eeee8410362ac9391b22d', 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);
@@ -3104,31 +3152,7 @@ const SdTable = class {
         "pagination": ["handlePaginationChange"]
     }; }
 };
-SdTable.style = sdTableCss;
-
-const sdTbodyCss = "sd-tbody{display:table-row-group}";
-
-const SdTbody = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    render() {
-        return (h(Host, { key: '210b6c0005314fab15c92697347a3f21dd70ef6f' }, h("slot", { key: 'ea78b27ab6c8b131d4940d1b2fea20d90e6393f3' })));
-    }
-};
-SdTbody.style = sdTbodyCss;
-
-const sdThCss = "sd-th{display:table-cell;padding:12px;font-weight:bold;text-align:left;border-bottom:2px solid #ddd;background-color:#f1f1f1}";
-
-const SdTh = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    render() {
-        return (h(Host, { key: '1c1c403a374a1d575739457ea011e72cbbae2a8a', role: "columnheader" }, h("slot", { key: 'f5653df6fc113940f3c6fae07a74b43f5f116dae' })));
-    }
-};
-SdTh.style = sdThCss;
+SdTable.style = sdTableBackupCss;
 
 const sdTooltipCss = "sd-tooltip [slot=content]{display:none}sd-tooltip .sd-tooltip{position:relative;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.sd-tooltip-menu{width:fit-content;padding:8px 16px;border-radius:4px;font-size:12px;position:relative;box-sizing:border-box;display:flex;align-items:start;justify-content:center;gap:12px}.sd-tooltip-menu--with-close{padding-right:12px !important}.sd-tooltip-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-tooltip-menu__arrow svg{width:100%;height:100%}.sd-tooltip-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-tooltip-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-tooltip-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-tooltip-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-tooltip-menu__content{line-height:20px;font-weight:500}.sd-tooltip-menu__content p{margin:0}.sd-tooltip-menu__close-button{padding-top:4px;display:flex}.sd-tooltip-menu__close-button button{padding:0;background:none;border:none;cursor:pointer}";
 
@@ -3178,20 +3202,20 @@ const SdTooltip = class {
             : {
                 onClick: () => (this.showTooltip = !this.showTooltip),
             };
-        return (h(Fragment, { key: '11cc88df1f3afd9c6227f7e0bbf908605ab32f31' }, this.label ? (h("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 })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-tooltip-portal", { key: 'b1c1d591b08d76b576ae307c752ff5399bf4e7ee', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, h("div", { key: '836d1ce210fb6358d92ac65a992ec111d53ef0a5', class: {
+        return (h(Fragment, { key: 'fc892ba2872491bca673db93fed5c4b724c7141d' }, this.label ? (h("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 })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-tooltip-portal", { key: 'd6b8099b49ffc120c05bd797e3eb2c2c9c40238e', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, h("div", { key: '06eca5d091eec639a556472605140bdccf6c4869', 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,
-            } }, h("i", { key: '43f7dfc3afde28f61d1b2a757f605c22712568dd', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '58ddae5a489c5ae5ca8208f3e1d2003373a68d4e', class: {
+            } }, h("i", { key: '38ad3f0461c6578140e9a0f253c1f0cd5343f0bf', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '58b5d5e25512f191ee652c34815f8ad33a496a31', class: {
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
-            } })), h("div", { key: '259e21849cbd581f4b83247bb609efc3adffc62d', class: "sd-tooltip-menu__content", ref: el => {
+            } })), h("div", { key: 'a29c4aa221aa9b833b9b0de101b658f5c5351ec0', class: "sd-tooltip-menu__content", ref: el => {
                 if (el && this.slotContent && !el.hasChildNodes()) {
                     el.appendChild(this.slotContent.cloneNode(true));
                 }
-            } }, !this.slotContent && h("span", { key: '43aeb9bc7b62f880a80b14771a8a49f9af45dfe3' }, this.el.textContent)), this.useClose && (h("div", { key: '1d71390a6abec398a0f0be0955bc089116f880a0', class: "sd-tooltip-menu__close-button" }, h("button", { key: 'f3ff311db0b8633a2b7b692c9e6b51f5171bcaa7', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, h("sd-icon", { key: '6dc3a1234ba43406659707cb64b3fa21e96f25d2', name: "close", size: "12", color: "#AAAAAA" })))))))));
+            } }, !this.slotContent && h("span", { key: 'a9e016d086156d522980b99187c9b040ccb232b9' }, this.el.textContent)), this.useClose && (h("div", { key: 'ae54793f18dcb7e759bd4ea2d7570cd56f45eb9a', class: "sd-tooltip-menu__close-button" }, h("button", { key: '1c3dc26d1bba1eaaed42757dae9a38613a86aea8', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, h("sd-icon", { key: '3b7f9dafaa7f1a3686f123a12acae6b35fd1849d', name: "close", size: "12", color: "#AAAAAA" })))))))));
     }
 };
 SdTooltip.style = sdTooltipCss;
@@ -3345,21 +3369,9 @@ const SdTooltipPortal = class {
         this.sdClose.emit();
     }
     render() {
-        return h("slot", { key: '918c09f6f9b248a6ba08e622c375b63adb36d0c3' });
-    }
-};
-
-const sdTrCss = "sd-tr{display:table-row}";
-
-const SdTr = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    render() {
-        return (h(Host, { key: '2dc11b6c66458e889e231c422c06b5ddee7ae88a', role: "row" }, h("slot", { key: '66640e770921eda343e2798a0b167bae5db1fbca' })));
+        return h("slot", { key: 'b8c60526ca9acb16821b1952b526fad452d1d5e7' });
     }
 };
-SdTr.style = sdTrCss;
 
-export { SdButton as sd_button, SdCheckbox as sd_checkbox, SdGuide as sd_guide, SdIcon as sd_icon, SdInput as sd_input, SdPagination as sd_pagination, SdPortal as sd_portal, SdSelect as sd_select, SdSelectOption as sd_select_option, SdTable as sd_table, SdTbody as sd_tbody, SdTh as sd_th, SdTooltip as sd_tooltip, SdTooltipPortal as sd_tooltip_portal, SdTr as sd_tr };
-//# sourceMappingURL=sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table.sd-tbody.sd-th.sd-tooltip.sd-tooltip-portal.sd-tr.entry.js.map
+export { SdButton as sd_button, SdCheckbox as sd_checkbox, SdIcon as sd_icon, SdInput as sd_input, SdLoadingSpinner as sd_loading_spinner, SdPagination as sd_pagination, SdPortal as sd_portal, SdSelect as sd_select, SdSelectOption as sd_select_option, SdTable as sd_table_backup, SdTooltip as sd_tooltip, SdTooltipPortal as sd_tooltip_portal };
+//# sourceMappingURL=sd-button.sd-checkbox.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table-backup.sd-tooltip.sd-tooltip-portal.entry.js.map