@sellmate/design-system 0.0.48 → 0.0.49

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

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-DXo1Fhkn.js');
+var index = require('./index-Bxead0A0.js');
 var resolveColor = require('./resolveColor-CauSLF0s.js');
 var selectKeyboardNavigation = require('./select-keyboard-navigation-6fO_V4En.js');
-var tooltipArrow = require('./tooltipArrow-DNiGFQNW.js');
+var tooltipArrow = require('./tooltipArrow-C7cIAuTo.js');
 require('./color-Oz29vj7L.js');
 
 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}";
@@ -2157,7 +2157,7 @@ const SdIcon = class {
     }
     render() {
         const IconComponent = Icons[this.name]?.[this.size];
-        return (index.h("i", { key: '738453a8bc8d1b9bb67fbaaffb7de203c2982c30', class: this.getIconClasses(), style: this.iconStyle }, index.h(IconComponent, { key: '2f970609756be608b660a522949dd79cca64fcc8', color: this.resolvedColor })));
+        return (index.h("i", { key: '856cad8bb2373b0d86734443144f79770c0715ec', class: this.getIconClasses(), style: this.iconStyle }, index.h(IconComponent, { key: 'd2a06ebbda1317cb72fec996b3bf3008ba171070', color: this.resolvedColor })));
     }
 };
 SdIcon.style = sdIconCss;
@@ -2262,11 +2262,11 @@ const SdInput = class {
                 '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
             }
             : {};
-        return (index.h(index.Host, { key: '87a102220530a2e06620619967f1925f193b4794', style: inputWidth }, this.label && index.h("div", { key: 'dec1ef5b27dadc7b2c6c0e9f5dab978b338b5a45', class: "sd-input__label" }, this.label), index.h("label", { key: '72ba8b8b0019fd1bfc222207df4b42735457873d', class: {
+        return (index.h(index.Host, { key: '0fc9bec4559137ede7daa7f2da5df00595991d5a', style: inputWidth }, this.label && index.h("div", { key: '3fd4e7d08aca431d7743ec4249a221c77f2fefd1', class: "sd-input__label" }, this.label), index.h("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 }, index.h("slot", { key: '7745177f5638351670adb3610325d44df156826e', name: "prefix" }), index.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) }), index.h("slot", { key: 'b62387e0c2122cfb9f5599a108d54682df59fef6', name: "suffix" }), this.clearable && this.internalValue && (index.h("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 }, index.h("slot", { key: 'b1df6c52c2dc92adde26cd535b008d35bc1c73d2', name: "prefix" }), index.h("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) }), index.h("slot", { key: 'f85912a8f17712d0a4950a68d10d885556a1de44', name: "suffix" }), this.clearable && this.internalValue && (index.h("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);
@@ -2286,7 +2286,7 @@ const SdLoadingSpinner = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '54446b42c83eff572c2d0d63c367a7e407d722a5' }, index.h("svg", { key: '92ad1f0446dc5912a656512d09ab4b8b3b262156', class: "sd-loading-spinner text-positive", width: "72px", height: "72px", viewBox: "25 25 50 50" }, index.h("circle", { key: 'b9b0c2ea5233fb5f5c784d0262c6ba526dc00622', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+        return (index.h(index.Host, { key: 'd064701b25e190fc5b7feefb542cbc7d30afc3f3' }, index.h("svg", { key: 'ec37a9ebea3e5b48817c687fae543186bb3cf29a', class: "sd-loading-spinner text-positive", width: "72px", height: "72px", viewBox: "25 25 50 50" }, index.h("circle", { key: '0b61caa65955019ddb08ed52a51718cf3f55a6e3', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
     }
 };
 SdLoadingSpinner.style = sdLoadingSpinnerCss;
@@ -2365,12 +2365,12 @@ const SdPagination = class {
         }
     }
     render() {
-        return (index.h("div", { key: '3b65d74d4b70b8b3292a20daa5d89ffb7d9a66e7', class: this.paginationClasses }, index.h("div", { key: 'a3be2b1c24ac6ac7ecde25223d9208e63e558bf3', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "pagination-info" }, index.h("span", { class: "current-page" }, this.currentPage), index.h("span", null, "/"), index.h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (index.h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (index.h("div", { key: 'c8c241301297c8281d02643f5a31c97f77706fff', class: this.paginationClasses }, index.h("div", { key: '12ca5b852a648b168928934729d2215f6648bcc1', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "pagination-info" }, index.h("span", { class: "current-page" }, this.currentPage), index.h("span", null, "/"), index.h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (index.h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'pagination-btn': true,
                 'pagination-btn--selected': this.currentPage === n,
             }, disabled: this.currentPage === n, style: {
                 '--pagination-btn-width': `${this.buttonWidth}px`,
-            }, onClick: () => this.handlePageChange(n) }, n)))), index.h("div", { key: '9c145c18eacc2ab0115d162cbb50e5ad3ea62c80', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), index.h("div", { key: '0ff537ba6e5985be1e055f5b9eab5dd86dd11624', class: "append-btns" }, this.renderNextButtons())));
     }
 };
 SdPagination.style = sdPaginationCss;
@@ -2493,7 +2493,7 @@ const SdPortal = class {
         this.sdClose.emit();
     }
     render() {
-        return index.h("slot", { key: 'b24b7f844564365e887dc8cee8b98e26a94961cd' });
+        return index.h("slot", { key: '2f6a1908864a2b5bbe86127fbf41b6b44a599666' });
     }
 };
 
@@ -2776,7 +2776,7 @@ const SdSelectOption = class {
         }
     };
     render() {
-        return (index.h(index.Host, { key: 'f1874b4e539573ddaa48cb2bdc9d13ea96bf350e' }, index.h("div", { key: '5a3bbd66f6623a1c02d5e1295bb974e82883b8a1', class: {
+        return (index.h(index.Host, { key: '70eafe63e44409063337d0a43846c3be869086df' }, index.h("div", { key: '21cafb06d87968387f9b9ec91fdd09643cded1ca', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,
@@ -2798,7 +2798,7 @@ const SdSelectOption = class {
 };
 SdSelectOption.style = sdSelectOptionCss;
 
-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%}}";
 
 const SdTable = class {
     constructor(hostRef) {
@@ -2857,6 +2857,7 @@ const SdTable = class {
     virtualStartColIdx = 0;
     virtualEndColIdx = 0;
     scrollLeftPosition = 0;
+    // 가상 스크롤 Raf(Request Animation Frame) 관리
     scrollRequestAnimationFrame = null;
     scrollContainer = null;
     rafScheduled = false;
@@ -2864,19 +2865,39 @@ const SdTable = class {
         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');
         }
@@ -2884,11 +2905,19 @@ const SdTable = class {
     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();
             }
@@ -2903,66 +2932,120 @@ const SdTable = class {
         }
     }
     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);
+        index.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 }));
+        }
+        else {
+            this.cachedVirtualRows = this.paginatedRows
+                .slice(this.virtualStartIndex, this.virtualEndIndex + 1)
+                .map((row, relativeIdx) => ({
+                row,
+                actualIndex: this.virtualStartIndex + relativeIdx,
+            }));
         }
-        return 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)
@@ -3035,6 +3118,7 @@ const SdTable = class {
         if (newSelected.length === selectedArray.length)
             return;
         this.innerSelected = new Set(newSelected);
+        this.cachedIsAllChecked = undefined;
         this.sdSelectChange.emit(Array.from(this.innerSelected));
     }
     toggleSelectAll(checked) {
@@ -3046,16 +3130,29 @@ const SdTable = class {
             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) {
@@ -3081,13 +3178,22 @@ const SdTable = class {
             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() {
@@ -3097,7 +3203,12 @@ const SdTable = class {
             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 제외
@@ -3137,22 +3248,34 @@ const SdTable = class {
             }
         }
         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 환경 체크
@@ -3182,6 +3305,10 @@ const SdTable = class {
         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 컬럼들
@@ -3192,13 +3319,15 @@ const SdTable = class {
                 .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() {
@@ -3236,7 +3365,7 @@ const SdTable = class {
         }))));
     }
     renderBody() {
-        return (index.h("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 && (index.h("div", { class: "sd-table__loading" }, index.h("sd-loading-spinner", null))), this.useVirtualScroll.vertical && this.topSpacerHeight > 0 && this.renderSpacerRow('top'), this.paginatedRows.length > 0 &&
+        return (index.h("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')));
@@ -3306,44 +3435,16 @@ const SdTable = class {
             }, "aria-hidden": "true" }, index.h("div", { class: "sd-table__skeleton-cell" })));
     }
     render() {
-        return (index.h(index.Host, { key: '658ead41c51d9f031c0334d91cad9a06811721b9' }, index.h("div", { key: 'c98a48d31b16cbd934e4ae47b55bcfeaa5db2520', class: "sd-table__wrapper", style: {
+        return (index.h(index.Host, { key: '8c01d8c3b3428d0fccb37e337fd12412c7aee51a' }, index.h("div", { key: 'be41d64f4b9daaa1440f2a89e253ce487894758e', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, index.h("div", { key: '080fc2b81b016c4876cf90502952e49a5e468534', class: "sd-table__container", style: {
+            } }, index.h("div", { key: '580c4ca69d5374585eeacc756561e5caf2ea6e29', class: "sd-table__container", style: {
                 '--table-container-height': `calc(${this.height} - ${this.pagination && this.innerRows.length > 0 ? 48 : 0}px)`,
-            } }, index.h("div", { key: 'd56754a7cd4acc0505bb36d2d8a116a20d19c0e4', class: {
+            } }, index.h("div", { key: '2832a6e9078923daeefa28512450950abfca0aad', class: {
                 'sd-table__middle': true,
                 'sd-table__middle--scrollable': this.paginatedRows.length > 0,
                 'sd-table__middle--loading': this.isLoading,
-            } }, index.h("table", { key: '39d620db8e2f9ea585f8c73222687f59aaa830e6', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), index.h("div", { key: 'dcd87252620d5fb95deda064e2a7b4e6871c9dc1', class: "sd-table__bottom" }, !this.paginatedRows.length && (index.h("div", { key: 'd31ea2dbc747385fb7f7a733725e0e34f24f4489', class: "sd-table__no-data" }, index.h("slot", { key: '8375b5f42dafa7d430ad33226500d2a84b099990', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (index.h("div", { key: '2b231be27d05c5bb52ff1c0ced255f10be449068', class: "sd-table__pagination" }, index.h("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 && (index.h("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 && (index.h("div", { key: '696cc35d6d3c58dabf92aa49dbff9a7034a0ed64', class: "sd-table__middle--loading__spinner" }, index.h("sd-loading-spinner", { key: '8cbd272006b64c4a6e10c87c58313a0792358451' }))), index.h("table", { key: 'de78dba38361cfebe39f8c3cddb57a1c93861ff6', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), index.h("div", { key: '662407b29c2ea446d96553dd548bec11e8179185', class: "sd-table__bottom" }, !this.paginatedRows.length && (index.h("div", { key: '3a475142c5da9cc40f92b761923415893a1366fa', class: "sd-table__no-data" }, index.h("slot", { key: '49e90e85516b6656c7019b4b33a50f6b36d949a8', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (index.h("div", { key: '460a669cb3841fdc7745e4acb774729910890b42', class: "sd-table__pagination" }, index.h("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 && (index.h("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"],
@@ -3403,20 +3504,20 @@ const SdTooltip = class {
             : {
                 onClick: () => (this.showTooltip = !this.showTooltip),
             };
-        return (index.h(index.Fragment, { key: 'fc892ba2872491bca673db93fed5c4b724c7141d' }, this.label ? (index.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 })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (index.h("sd-tooltip-portal", { key: 'd6b8099b49ffc120c05bd797e3eb2c2c9c40238e', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, index.h("div", { key: '06eca5d091eec639a556472605140bdccf6c4869', class: {
+        return (index.h(index.Fragment, { key: 'ca85f7063d836f7a33d893d262aea709e0db1d00' }, this.label ? (index.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 })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (index.h("sd-tooltip-portal", { key: 'ab8656db09fc630085a684ef124486551e33f910', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, index.h("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,
-            } }, index.h("i", { key: '38ad3f0461c6578140e9a0f253c1f0cd5343f0bf', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '58b5d5e25512f191ee652c34815f8ad33a496a31', class: {
+            } }, index.h("i", { key: '077a1c19e4fa7a54a80dff168950ee0327240724', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '09d265c0412099b0bc64e6a5297011d7f4e74bb3', class: {
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
-            } })), index.h("div", { key: 'a29c4aa221aa9b833b9b0de101b658f5c5351ec0', class: "sd-tooltip-menu__content", ref: el => {
+            } })), index.h("div", { key: '13a0d079cae19cf77c55b9aa3b8325dc1d4daf82', class: "sd-tooltip-menu__content", ref: el => {
                 if (el && this.slotContent && !el.hasChildNodes()) {
                     el.appendChild(this.slotContent.cloneNode(true));
                 }
-            } }, !this.slotContent && index.h("span", { key: 'a9e016d086156d522980b99187c9b040ccb232b9' }, this.el.textContent)), this.useClose && (index.h("div", { key: 'ae54793f18dcb7e759bd4ea2d7570cd56f45eb9a', class: "sd-tooltip-menu__close-button" }, index.h("button", { key: '1c3dc26d1bba1eaaed42757dae9a38613a86aea8', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, index.h("sd-icon", { key: '3b7f9dafaa7f1a3686f123a12acae6b35fd1849d', name: "close", size: "12", color: "#AAAAAA" })))))))));
+            } }, !this.slotContent && index.h("span", { key: '79315652fc9db9aca0f06ef0f402d3302b909275' }, this.el.textContent)), this.useClose && (index.h("div", { key: '5ab0323020a5d3f2c13d690a906fde8de9df36c9', class: "sd-tooltip-menu__close-button" }, index.h("button", { key: 'deed089b5bb820f54471d44ff0c69e69ffcddf22', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, index.h("sd-icon", { key: '6c93da0c7f425ad1111b68c508476db74462e2ad', name: "close", size: "12", color: "#AAAAAA" })))))))));
     }
 };
 SdTooltip.style = sdTooltipCss;
@@ -3570,7 +3671,7 @@ const SdTooltipPortal = class {
         this.sdClose.emit();
     }
     render() {
-        return index.h("slot", { key: 'b8c60526ca9acb16821b1952b526fad452d1d5e7' });
+        return index.h("slot", { key: '959737d1d7012ea468ab11bf2f1a8444e5274d4e' });
     }
 };
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXo1Fhkn.js');
+var index = require('./index-Bxead0A0.js');
 
 const sdCardCss = "sd-card{display:block;height:fit-content}sd-card .sd-card{border-radius:8px;background:white}sd-card .sd-card.sd-card--bordered{border:1px solid #e1e1e1}";
 
@@ -11,7 +11,7 @@ const SdCard = class {
     bordered = true;
     class = '';
     render() {
-        return (index.h(index.Host, { key: 'b39b016a66f0df13d09ff3a1ce453bb5eda23b52' }, index.h("div", { key: '2a22dcc5ede4067ecbb2bbbe985d95ffaee3a3a6', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.class}` }, index.h("slot", { key: 'f73cae0097be43bcd666ade2db27c585090eca75' }))));
+        return (index.h(index.Host, { key: 'e9653557b36889a75002c32bde005c7b480b2f4b' }, index.h("div", { key: 'e34f53b49bdc412eaf82dbe21918cd6599d1d2c6', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.class}` }, index.h("slot", { key: 'b5d06b44a1a960fe12424f43a39647a4646610d6' }))));
     }
 };
 SdCard.style = sdCardCss;