@sellmate/design-system 0.0.26 → 0.0.27

package/dist/cjs/{sd-button_12.cjs.entry.js → sd-button_13.cjs.entry.js}

@@ -707,6 +707,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) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: '5d1533618d656320e6a7aae01bcfcda6765f44d2' }, index.h("svg", { key: '12387df275b92341a8a879724d56428f715a5b60', class: "sd-loading-spinner text-positive", width: "72px", height: "72px", viewBox: "25 25 50 50" }, index.h("circle", { key: '777d5328b6d247166fb64d3d720be714eb8c4663', 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 = {
@@ -787,12 +799,12 @@ const SdPagination = class {
         }
     }
     render() {
-        return (index.h("div", { key: '2707331958e2c375b570590a8742655bacb1aa4d', class: this.paginationClasses }, index.h("div", { key: 'e98573b80c04454ea0b30f6cb7fe1974028a0464', 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: '442749b854a4033cd4eba7941ac69b0af3d70955', class: this.paginationClasses }, index.h("div", { key: '9ae405c342ec1a812312bc2abc5759d811e806c4', 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: 'ccb867eccaece5ecbdcef7abe0e4d333fb169d11', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), index.h("div", { key: '0ec1e8a3a815919d9c8f1a5539778b2cc541772e', class: "append-btns" }, this.renderNextButtons())));
     }
     static get watchers() { return {
         "currentPage": ["onPropChange"],
@@ -919,7 +931,7 @@ const SdPortal = class {
         this.sdClose.emit();
     }
     render() {
-        return index.h("slot", { key: '4f344b083ff3a2d32d1a23f99e90687aeeb676b1' });
+        return index.h("slot", { key: '64f974db091753e7f2d5712483d32a7c1585b37b' });
     }
 };
 
@@ -1202,7 +1214,7 @@ const SdSelectOption = class {
         }
     };
     render() {
-        return (index.h(index.Host, { key: '23d87df53fa083e6c9aceb1956de51800117df9f' }, index.h("div", { key: '569c5d35098350fa4d186ba838925de4f966c491', class: {
+        return (index.h(index.Host, { key: 'b571989b755f8e39c95cab49f11ef7935e4bc8c7' }, index.h("div", { key: 'af95f0a7ad90141eb7a9db91b0cfd0c66c7d4920', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,
@@ -1224,13 +1236,14 @@ 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{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.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 td,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table 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:last-of-type td{border-bottom:none}.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__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 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{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.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 td,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table 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{position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table 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 tbody tr:last-of-type td{border-bottom:none}.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__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) {
         index.registerInstance(this, hostRef);
         this.sdSelectChange = index.createEvent(this, "sdSelectChange");
         this.sdPageChange = index.createEvent(this, "sdPageChange");
+        this.sdRowsPerPageChange = index.createEvent(this, "sdRowsPerPageChange");
     }
     get el() { return index.getElement(this); }
     columns;
@@ -1244,6 +1257,7 @@ const SdTable = class {
     stickyHeader = false;
     stickyColumn = { left: 0, right: 0 };
     noDataLabel = '데이터가 없습니다.';
+    isLoading = false;
     pagination;
     bodyCellRenderer;
     useInternalPagination = false;
@@ -1256,6 +1270,7 @@ const SdTable = class {
     ];
     sdSelectChange;
     sdPageChange;
+    sdRowsPerPageChange;
     currentPage = this.pagination?.page || 1;
     innerRows = [];
     innerSelected = new Set();
@@ -1416,9 +1431,7 @@ const SdTable = class {
             }, style: this.getStickyStyle(colIdx) }, index.h("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, index.h("slot", { name: `header-cell-${col.name}` }, index.h("div", { class: "sd-th__content--label" }, col.label)), col.usePageMoveIcon && index.h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (index.h("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(colIdx, evt) }))))))));
     }
     renderBody() {
-        if (!this.paginatedRows.length)
-            return (index.h("tbody", { part: "tbody-empty" }, index.h("tr", null, index.h("td", { colSpan: this.visibleColumns.length + (this.selectable ? 1 : 0) }, this.noDataLabel))));
-        return (index.h("tbody", null, this.paginatedRows.map((row, rowIdx) => (index.h("tr", { key: row[this.rowKey], class: "hover:bg-Grey_Lighten-6" }, this.selectable && (index.h("td", { class: {
+        return (index.h("tbody", { ...(!this.paginatedRows.length && { part: 'tbody-empty' }) }, this.isLoading && (index.h("div", { class: "sd-table__loading" }, index.h("sd-loading-spinner", null))), !this.paginatedRows.length ? (index.h("tr", null, index.h("td", { colSpan: this.visibleColumns.length + (this.selectable ? 1 : 0) }, index.h("slot", { name: "no-data" }, this.noDataLabel)))) : (index.h(index.h.Fragment, null, this.paginatedRows.map((row, rowIdx) => (index.h("tr", { key: row[this.rowKey], class: "hover:bg-Grey_Lighten-6" }, this.selectable && (index.h("td", { class: {
                 'sd-td': true,
                 'sd-td--selected': true,
                 'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
@@ -1437,13 +1450,13 @@ const SdTable = class {
                         colIdx === this.visibleColumns.length - this.stickyColumn.right),
                     [`${column.tdClass}`]: Boolean(column.tdClass),
                 }, style: this.getStickyStyle(colIdx) }, index.h("slot", { name: `body-cell-${column.name}-${rowIdx}` }, rendered ? (typeof rendered === 'string' ? (index.h("span", { innerHTML: rendered })) : (rendered)) : (this.getCellValue(column, row)))));
-        }))))));
+        }))))))));
     }
     render() {
-        return (index.h(index.Host, { key: 'b73fefde2c99c864002a2e778b02a306d4c8c32d' }, index.h("div", { key: '4fbf588871e3b8cb92e087cbde59aa9280ba75cd', class: "sd-table__wrapper", style: {
+        return (index.h(index.Host, { key: '941eac6f220c2eb336748b19d7d62421954d7b2d' }, index.h("div", { key: '9e1753e83333aca00ff3e1b85746a1a9f14ceed3', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, index.h("div", { key: '92d69eaf8e499fd5b3a0ebb3d77353c8285949e5', class: "sd-table__container" }, index.h("div", { key: '590fd93058983bab3bc829e7c6ce4e058365287f', class: "sd-table__middle" }, index.h("table", { key: 'c1fd46586bd9429377dfff9df94550cb5437b05a', part: "table", class: this.sdTableClasses }, this.renderHeader(), this.renderBody())), index.h("div", { key: '89a48072c9f6b84d062e4e127b5858657003fc87', class: "sd-table__bottom" })), this.pagination && this.innerRows.length > 0 && (index.h("div", { key: '526c024bc5493b8a3abb4f7887ec221e38dd2937', class: "sd-table__pagination" }, index.h("sd-pagination", { key: 'f607579ff98e70f2c6975139a17c7fc48b940a19', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => {
+            } }, index.h("div", { key: '1a1077fc7cf1056ec1756e87cb47485e96b66d60', class: "sd-table__container" }, index.h("div", { key: '13dce57546577aef35abe3e6e2f9fe8155ee0d9c', class: "sd-table__middle" }, index.h("table", { key: '7fbc368f33cfd222732ca45f07ab3876f4739fce', part: "table", class: this.sdTableClasses }, this.renderHeader(), this.renderBody())), index.h("div", { key: 'a96bdcb80985577f8f24d79ba0356be7926f84fc', class: "sd-table__bottom" })), this.pagination && this.innerRows.length > 0 && (index.h("div", { key: '111c1d44684dc1f795250f2be51a31959e9c62e2', class: "sd-table__pagination" }, index.h("sd-pagination", { key: '349f9cac77c2212e3d533c8fe62e1ab2ebbe461c', 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);
                 }
@@ -1451,20 +1464,26 @@ const SdTable = class {
                     this.currentPage = e.detail;
                     this.sdPageChange.emit(this.currentPage);
                 }
-            } }), this.useRowsPerPageSelect && (index.h("sd-select", { key: '683424acaf3961dcf681e8a04275cdba6bdf9928', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => {
-                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.useRowsPerPageSelect && (index.h("sd-select", { key: '1a9b338efdeaa212c5f3751dae638631b60f89d8', 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.pagination = {
-                    page: newCurrentPage,
-                    rowsPerPage: newRowsPerPage,
-                    lastPage: newLastPage,
-                };
-                this.currentPage = newCurrentPage;
-                this.sdPageChange.emit(this.currentPage);
             } })))))));
     }
     static get watchers() { return {
@@ -1524,20 +1543,20 @@ const SdTooltip = class {
             : {
                 onClick: () => (this.showTooltip = !this.showTooltip),
             };
-        return (index.h(index.Fragment, { key: 'da480a55495b1311368ae55ef8827a54ea5de766' }, 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: '74be36575fbf97c9b51577fa5b24a4fbcfcf4c6b', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, index.h("div", { key: '63707a51fcc66a3a0c91fc7d409d30f61c0b1f17', class: {
+        return (index.h(index.Fragment, { key: '7cd7f8d9ef55457296d873107fdaac4e97256fdc' }, 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: 'a0e066f0785fea9b0b1a597abf8ced1d835873ec', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, index.h("div", { key: '19bb31fd00cdeb8f8c19f80a6b3a4fee71455a47', 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: 'a2c557e1457c293ef4a6fb3e23a70c9ff5b0b027', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '7e7e471bb288680875fbbaa1d7b7df34b636c76f', class: {
+            } }, index.h("i", { key: '276fd33d6abb331aa55f94591f847674a3c7a4ea', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: 'dfe808944a15600e16b52dff6e4b9381cdefaf53', class: {
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
-            } })), index.h("div", { key: 'c7f7a093907053c100fdb5f247d09d984f8cddd8', class: "sd-tooltip-menu__content", ref: el => {
+            } })), index.h("div", { key: '1f22593facecb915ef6a7a6c4cd4abba09ffce8c', 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: '14925b4653ca984bd6adf99f6297713dc8b2bafa' }, this.el.textContent)), this.useClose && (index.h("div", { key: '1a02cee06eaaf9068396fb0b489c93e23ba5c8b7', class: "sd-tooltip-menu__close-button" }, index.h("button", { key: '40973df40b2ec2ab887a47c7f3e466f6cae4e69f', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, index.h("sd-icon", { key: 'a02e35f80ae7d3c1414577ce253a67d6dfd64bc0', name: "close", size: "12", color: "#AAAAAA" })))))))));
+            } }, !this.slotContent && index.h("span", { key: '7a2c28f8a6f45327420a7fd95bfbcdc2c968524d' }, this.el.textContent)), this.useClose && (index.h("div", { key: '61bfeb5e1aba5931ecdadd35532237124514dee3', class: "sd-tooltip-menu__close-button" }, index.h("button", { key: '16266831474067749dff6f6acfdec1a4e881e171', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, index.h("sd-icon", { key: 'fedf37e33d95da2683a37289966626f9ed3c0853', name: "close", size: "12", color: "#AAAAAA" })))))))));
     }
 };
 SdTooltip.style = sdTooltipCss;
@@ -1690,7 +1709,7 @@ const SdTooltipPortal = class {
         this.sdClose.emit();
     }
     render() {
-        return index.h("slot", { key: '641dacdeceb023695ced987731591783daa6b88e' });
+        return index.h("slot", { key: '231704dc9edcd17203b0ecd491558f585c57f9bd' });
     }
 };
 
@@ -1699,6 +1718,7 @@ exports.sd_checkbox = SdCheckbox;
 exports.sd_guide = SdGuide;
 exports.sd_icon = SdIcon;
 exports.sd_input = SdInput;
+exports.sd_loading_spinner = SdLoadingSpinner;
 exports.sd_pagination = SdPagination;
 exports.sd_portal = SdPortal;
 exports.sd_select = SdSelect;
@@ -1706,4 +1726,4 @@ exports.sd_select_option = SdSelectOption;
 exports.sd_table = SdTable;
 exports.sd_tooltip = SdTooltip;
 exports.sd_tooltip_portal = SdTooltipPortal;
-//# sourceMappingURL=sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table.sd-tooltip.sd-tooltip-portal.entry.cjs.js.map
+//# sourceMappingURL=sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table.sd-tooltip.sd-tooltip-portal.entry.cjs.js.map

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

@@ -39,11 +39,11 @@ const SdPopover = class {
         this.showPopover = false;
     };
     render() {
-        return (index.h(index.Fragment, { key: 'fb877e8d016d13fb33b49a1a4dbfed9fc01b1336' }, 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-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })), this.showPopover && (index.h("sd-tooltip-portal", { key: '02208721da61cb84086a57c823f8e31775fdbd5e', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, index.h("div", { key: '3f3c4fc690dac5061bda08af37121e2b98374979', class: {
+        return (index.h(index.Fragment, { key: 'cf3343eff82b136b3c1d55f3adc1ce7bd815c144' }, 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-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })), this.showPopover && (index.h("sd-tooltip-portal", { key: '254f14cafcc6f5dc4494360fc754656536b08a3a', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, index.h("div", { key: 'f375fdf55aed6f3b8b4705fbaa3467b4c1eae7fd', class: {
                 'sd-popover-menu': true,
                 [`sd-popover-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, index.h("i", { key: '6f0df95bafc2cbf564fd0e5a133c89f03c3a924b', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '535acee0be86db4ed58d6cc1631732541f1e475e' })), index.h("div", { key: 'd4366800a8cbd5a1f9630344a5ca4241b0eaa8dd', class: "sd-popover-menu__content" }, this.menuTitle && index.h("div", { key: '1cd9de3129988c5d26be0ded5b03520ab591cb9a', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (index.h("div", { key: '5aae57948bd5e0fd98e73a8ae504b77ce6cdbe07', class: "sd-popover-menu__messages" }, this.messages.map(message => (index.h("div", null, message))))), this.buttons.length > 0 && (index.h("div", { key: '814ac9ba0b2cf4367bb4cd5e688fa5433fee7126', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (index.h("sd-button", { ...button })))))), this.useClose && (index.h("button", { key: 'a21ad0a5e28f8609b2f9d9accd0be5d81ed9de5b', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, index.h("sd-icon", { key: '10738ec0926ea5fbc0b30b5c8c08b6cc37bf47d3', name: "close", size: "12", color: "#AAAAAA" }))))))));
+            } }, index.h("i", { key: '5e4eede6dc40190223ffeaa49d2bdffd32e2defd', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '47c81c26ac958b000a451dc6c81c8752d314b0e0' })), index.h("div", { key: '13af261b03ae81c25f7b6791dec18d3948ff4e32', class: "sd-popover-menu__content" }, this.menuTitle && index.h("div", { key: '8024032ddaca5046ff0da49cb97ea7883a07dfd5', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (index.h("div", { key: '68067a6b751f77dfaab56fcfdcfd9635f057d8c3', class: "sd-popover-menu__messages" }, this.messages.map(message => (index.h("div", null, message))))), this.buttons.length > 0 && (index.h("div", { key: 'f49814504de9e8f84929ae85c73df5797689947e', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (index.h("sd-button", { ...button })))))), this.useClose && (index.h("button", { key: 'ca1b3244636936e4ae870c201501933a82f2fc46', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, index.h("sd-icon", { key: '518c4817f3f6eb54883426f6dd3acb683d3d30b4', name: "close", size: "12", color: "#AAAAAA" }))))))));
     }
     static get watchers() { return {
         "show": ["watchShowHandler"]

package/dist/cjs/sd-select-multiple.cjs.entry.js

@@ -215,11 +215,11 @@ const SdSelectMultiple = class extends selectKeyboardNavigation.BaseDropdownEven
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (index.h(index.Host, { key: '8a237d4dc7f743a7685b440cd654d51629765a20', style: style }, index.h("div", { key: 'c1240092508fbb9e9b638803171847b174da9062', class: {
+        return (index.h(index.Host, { key: '4ed0861a16ef427fdd526a3993325bc47a427f9a', style: style }, index.h("div", { key: 'c918e7e5dc13e53a20ba63bd0b9216fae24733f2', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,
-            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), index.h("div", { key: 'b99913866f316d7eacffd9e0e71fd58baac05c34', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), index.h("div", { key: '04aac623cfc31dfabda4a8e4840ea7f3c9fdbc28', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label) {
         if (!label)

package/dist/cjs/sd-select-option-group.cjs.entry.js

@@ -48,7 +48,7 @@ const SdSelectOptionGroup = class {
         }
     };
     render() {
-        return (index.h("div", { key: '0b921cd09e8115ed3af13fc2e9f1ecaff60f2b08', class: {
+        return (index.h("div", { key: 'eb8aac2629a851fce84ba1a17963282876a5d3c7', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -57,10 +57,10 @@ const SdSelectOptionGroup = class {
                 'sd-select__option-group--group': this.option.type === 'group',
                 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
                 'sd-select__option-group--item': this.option.type === 'item',
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, index.h("div", { key: '402a3e272f03930fe049d249c275a2acc1539bc3', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (index.h("sd-checkbox", { key: '6f8c05df6de67268636495b3d15dd5f896c8b846', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
+            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, index.h("div", { key: '3c6ce8963fa794aca439bcc03e677fdcbf5a5d91', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (index.h("sd-checkbox", { key: '28f07c5705d15dd20db627fccc8c31ba9b554bc3', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), index.h("span", { key: '4cbe65750bace072e680c251e904688c63eb6722', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (index.h("span", { key: 'af63ce7b9e377da8453049c49c5af28e411b9eec', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), index.h("span", { key: 'cef2d4c2a0183dbe0cc1e97db3337f3acd40f1cd', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (index.h("span", { key: '522c9419fc38e86e3c66b3c0ae9a63f78568547e', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
 };
 SdSelectOptionGroup.style = sdSelectOptionGroupCss;

package/dist/collection/collection-manifest.json

@@ -14,6 +14,7 @@
     "components/sd-guide/sd-guide.js",
     "components/sd-icon/sd-icon.js",
     "components/sd-input/sd-input.js",
+    "components/sd-loading-spinner/sd-loading-spinner.js",
     "components/sd-pagination/sd-pagination.js",
     "components/sd-popover/sd-popover.js",
     "components/sd-portal/sd-portal.js",

package/dist/collection/components/sd-guide/sd-guide.js

@@ -195,4 +195,9 @@ export class SdGuide {
     }
     static get elementRef() { return "el"; }
 }
+// <sd-guide id="sd-guide-1"></sd-guide>
+// <sd-guide id="sd-guide-2" type="pdf"></sd-guide>
+// <sd-guide id="sd-guide-3" type="youtube"></sd-guide>
+// <sd-guide id="sd-guide-4" type="notion"></sd-guide>
+// <sd-guide id="sd-guide-5" type="event"></sd-guide>
 //# sourceMappingURL=sd-guide.js.map

package/dist/collection/components/sd-guide/sd-guide.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-guide.js","sourceRoot":"","sources":["../../../src/components/sd-guide/sd-guide.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, State, h } from '@stencil/core';\r\nimport colors from '../../styles/color.json';\r\n\r\ntype GuideType = 'help' | 'pdf' | 'youtube' | 'notion' | 'event';\r\n\r\nconst GUIDE_LABEL = {\r\n help: '활용 TIP',\r\n pdf: 'PDF Guide',\r\n youtube: 'Video Guide',\r\n notion: '사용 가이드',\r\n event: 'Event Button',\r\n};\r\n\r\nconst GUIDE_ICON = {\r\n help: {\r\n  name: 'helpOutline',\r\n  size: 20,\r\n  color: colors.green_70,\r\n },\r\n pdf: { name: 'pdf', size: 20, color: colors.red_75 },\r\n youtube: { name: 'youtube', size: 20, color: colors.red_75 },\r\n notion: { name: 'notion', size: 16, color: colors.black },\r\n event: { name: 'event', size: 16, color: colors.brilliantblue_70 },\r\n} as const;\r\n\r\n@Component({\r\n tag: 'sd-guide',\r\n styleUrl: 'sd-guide.scss',\r\n})\r\nexport class SdGuide {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() type: GuideType = 'help';\r\n @Prop() label: string = '';\r\n @Prop() message: string | string[] = '';\r\n @Prop() guideUrl: string = '';\r\n @Prop() popupWidth?: number;\r\n\r\n @State() popupShow: boolean = false;\r\n\r\n private guideRef?: HTMLElement;\r\n\r\n private handleClickGuide = () => {\r\n  if (this.type === 'help') {\r\n   this.popupShow = !this.popupShow;\r\n   return;\r\n  }\r\n\r\n  if (this.guideUrl) {\r\n   window.open(this.guideUrl, '_blank');\r\n  }\r\n };\r\n\r\n private get guideClass(): string {\r\n  const classes = ['sd-guide', `sd-guide--${this.type}`];\r\n\r\n  if (this.popupShow) classes.push('sd-guide--active');\r\n\r\n  return classes.join(' ');\r\n }\r\n\r\n closeDropdown = () => {\r\n  this.popupShow = false;\r\n };\r\n\r\n render() {\r\n  const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];\r\n\r\n  return (\r\n   <Host\r\n    style={{\r\n     '--sd-guide-color': GUIDE_ICON[this.type].color,\r\n    }}\r\n   >\r\n    <sd-button\r\n     ref={el => (this.guideRef = el as unknown as HTMLElement)}\r\n     class={this.guideClass}\r\n     variant={this.popupShow ? 'primary' : 'outline'}\r\n     label={GUIDE_LABEL[this.type]}\r\n     size=\"sm\"\r\n     color={this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45'}\r\n     icon={iconName}\r\n     iconColor={this.popupShow ? 'white' : iconColor}\r\n     iconSize={iconSize}\r\n     noHover={this.popupShow}\r\n     onSdClick={this.handleClickGuide}\r\n    />\r\n    {this.type === 'help' && this.popupShow && (\r\n     <sd-portal\r\n      open={this.popupShow}\r\n      parentRef={this.guideRef}\r\n      onSdClose={this.closeDropdown}\r\n      offset={[0, 4]}\r\n     >\r\n      <div\r\n       class=\"sd-guide__popup\"\r\n       style={{ width: this.popupWidth ? this.popupWidth + 'px' : '426px' } as any}\r\n      >\r\n       <sd-button\r\n        class=\"sd-guide__popup__close\"\r\n        icon=\"close\"\r\n        color={colors.grey_65}\r\n        size=\"md\"\r\n        variant=\"ghost\"\r\n        noHover\r\n        // buttonStyle={{ padding: '0px', minHeight: '0px' }}\r\n        onSdClick={this.closeDropdown}\r\n       />\r\n       <div class=\"sd-guide__popup__header\">\r\n        <sd-icon name=\"helpOutline\" size={24} color={colors.green_65} />\r\n        <h3 class=\"sd-guide__popup__title\">{this.label || GUIDE_LABEL[this.type]}</h3>\r\n       </div>\r\n       <ul class=\"sd-guide__popup__list\">{this.renderListItem(this.message)}</ul>\r\n      </div>\r\n     </sd-portal>\r\n    )}\r\n   </Host>\r\n  );\r\n }\r\n\r\n // 현재 2depth까지만 스타일 적용\r\n renderListItem(message: string | string[], depth: number = 0): HTMLElement[] {\r\n  const listItems: HTMLElement[] = [];\r\n\r\n  if (Array.isArray(message)) {\r\n   const depthMsg = message.map(msg => this.renderListItem(msg, depth + 1));\r\n   listItems.push(...depthMsg.flat());\r\n  } else {\r\n   listItems.push(this.renderLi(message, depth));\r\n  }\r\n\r\n  return listItems;\r\n }\r\n\r\n renderLi = (message: string, depth: number) => {\r\n  const listContent = message.replace(/ /gi, '&nbsp;');\r\n  return (\r\n   <li class={`sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}`}>\r\n    <p innerHTML={listContent}></p>\r\n   </li>\r\n  );\r\n };\r\n}\r\n"]}
+{"version":3,"file":"sd-guide.js","sourceRoot":"","sources":["../../../src/components/sd-guide/sd-guide.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, State, h } from '@stencil/core';\r\nimport colors from '../../styles/color.json';\r\n\r\ntype GuideType = 'help' | 'pdf' | 'youtube' | 'notion' | 'event';\r\n\r\nconst GUIDE_LABEL = {\r\n help: '활용 TIP',\r\n pdf: 'PDF Guide',\r\n youtube: 'Video Guide',\r\n notion: '사용 가이드',\r\n event: 'Event Button',\r\n};\r\n\r\nconst GUIDE_ICON = {\r\n help: {\r\n  name: 'helpOutline',\r\n  size: 20,\r\n  color: colors.green_70,\r\n },\r\n pdf: { name: 'pdf', size: 20, color: colors.red_75 },\r\n youtube: { name: 'youtube', size: 20, color: colors.red_75 },\r\n notion: { name: 'notion', size: 16, color: colors.black },\r\n event: { name: 'event', size: 16, color: colors.brilliantblue_70 },\r\n} as const;\r\n\r\n@Component({\r\n tag: 'sd-guide',\r\n styleUrl: 'sd-guide.scss',\r\n})\r\nexport class SdGuide {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() type: GuideType = 'help';\r\n @Prop() label: string = '';\r\n @Prop() message: string | string[] = '';\r\n @Prop() guideUrl: string = '';\r\n @Prop() popupWidth?: number;\r\n\r\n @State() popupShow: boolean = false;\r\n\r\n private guideRef?: HTMLElement;\r\n\r\n private handleClickGuide = () => {\r\n  if (this.type === 'help') {\r\n   this.popupShow = !this.popupShow;\r\n   return;\r\n  }\r\n\r\n  if (this.guideUrl) {\r\n   window.open(this.guideUrl, '_blank');\r\n  }\r\n };\r\n\r\n private get guideClass(): string {\r\n  const classes = ['sd-guide', `sd-guide--${this.type}`];\r\n\r\n  if (this.popupShow) classes.push('sd-guide--active');\r\n\r\n  return classes.join(' ');\r\n }\r\n\r\n closeDropdown = () => {\r\n  this.popupShow = false;\r\n };\r\n\r\n render() {\r\n  const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];\r\n\r\n  return (\r\n   <Host\r\n    style={{\r\n     '--sd-guide-color': GUIDE_ICON[this.type].color,\r\n    }}\r\n   >\r\n    <sd-button\r\n     ref={el => (this.guideRef = el as unknown as HTMLElement)}\r\n     class={this.guideClass}\r\n     variant={this.popupShow ? 'primary' : 'outline'}\r\n     label={GUIDE_LABEL[this.type]}\r\n     size=\"sm\"\r\n     color={this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45'}\r\n     icon={iconName}\r\n     iconColor={this.popupShow ? 'white' : iconColor}\r\n     iconSize={iconSize}\r\n     noHover={this.popupShow}\r\n     onSdClick={this.handleClickGuide}\r\n    />\r\n    {this.type === 'help' && this.popupShow && (\r\n     <sd-portal\r\n      open={this.popupShow}\r\n      parentRef={this.guideRef}\r\n      onSdClose={this.closeDropdown}\r\n      offset={[0, 4]}\r\n     >\r\n      <div\r\n       class=\"sd-guide__popup\"\r\n       style={{ width: this.popupWidth ? this.popupWidth + 'px' : '426px' } as any}\r\n      >\r\n       <sd-button\r\n        class=\"sd-guide__popup__close\"\r\n        icon=\"close\"\r\n        color={colors.grey_65}\r\n        size=\"md\"\r\n        variant=\"ghost\"\r\n        noHover\r\n        // buttonStyle={{ padding: '0px', minHeight: '0px' }}\r\n        onSdClick={this.closeDropdown}\r\n       />\r\n       <div class=\"sd-guide__popup__header\">\r\n        <sd-icon name=\"helpOutline\" size={24} color={colors.green_65} />\r\n        <h3 class=\"sd-guide__popup__title\">{this.label || GUIDE_LABEL[this.type]}</h3>\r\n       </div>\r\n       <ul class=\"sd-guide__popup__list\">{this.renderListItem(this.message)}</ul>\r\n      </div>\r\n     </sd-portal>\r\n    )}\r\n   </Host>\r\n  );\r\n }\r\n\r\n // 현재 2depth까지만 스타일 적용\r\n renderListItem(message: string | string[], depth: number = 0): HTMLElement[] {\r\n  const listItems: HTMLElement[] = [];\r\n\r\n  if (Array.isArray(message)) {\r\n   const depthMsg = message.map(msg => this.renderListItem(msg, depth + 1));\r\n   listItems.push(...depthMsg.flat());\r\n  } else {\r\n   listItems.push(this.renderLi(message, depth));\r\n  }\r\n\r\n  return listItems;\r\n }\r\n\r\n renderLi = (message: string, depth: number) => {\r\n  const listContent = message.replace(/ /gi, '&nbsp;');\r\n  return (\r\n   <li class={`sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}`}>\r\n    <p innerHTML={listContent}></p>\r\n   </li>\r\n  );\r\n };\r\n}\r\n\r\n// <sd-guide id=\"sd-guide-1\"></sd-guide>\r\n// <sd-guide id=\"sd-guide-2\" type=\"pdf\"></sd-guide>\r\n// <sd-guide id=\"sd-guide-3\" type=\"youtube\"></sd-guide>\r\n// <sd-guide id=\"sd-guide-4\" type=\"notion\"></sd-guide>\r\n// <sd-guide id=\"sd-guide-5\" type=\"event\"></sd-guide>\r\n"]}

package/dist/collection/components/sd-loading-spinner/sd-loading-spinner.css

@@ -0,0 +1,41 @@
+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;
+  }
+}

package/dist/collection/components/sd-loading-spinner/sd-loading-spinner.js

@@ -0,0 +1,18 @@
+import { Host, h } from "@stencil/core";
+export class SdLoadingSpinner {
+    render() {
+        return (h(Host, { key: '5d1533618d656320e6a7aae01bcfcda6765f44d2' }, h("svg", { key: '12387df275b92341a8a879724d56428f715a5b60', class: "sd-loading-spinner text-positive", width: "72px", height: "72px", viewBox: "25 25 50 50" }, h("circle", { key: '777d5328b6d247166fb64d3d720be714eb8c4663', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+    }
+    static get is() { return "sd-loading-spinner"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-loading-spinner.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-loading-spinner.css"]
+        };
+    }
+}
+//# sourceMappingURL=sd-loading-spinner.js.map

package/dist/collection/components/sd-loading-spinner/sd-loading-spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-loading-spinner.js","sourceRoot":"","sources":["../../../src/components/sd-loading-spinner/sd-loading-spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAMnD,MAAM,OAAO,gBAAgB;IAC5B,MAAM;QACL,OAAO,CACN,EAAC,IAAI;YACJ,4DAAK,KAAK,EAAC,kCAAkC,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,aAAa;gBAC7F,+DACC,KAAK,EAAC,MAAM,EACZ,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,kBACR,GAAG,uBACE,IAAI,GACb,CACL,CACA,CACP,CAAC;IACH,CAAC;;;;;;;;CACD","sourcesContent":["import { Component, Host, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-loading-spinner',\r\n styleUrl: 'sd-loading-spinner.scss',\r\n})\r\nexport class SdLoadingSpinner {\r\n render() {\r\n  return (\r\n   <Host>\r\n    <svg class=\"sd-loading-spinner text-positive\" width=\"72px\" height=\"72px\" viewBox=\"25 25 50 50\">\r\n     <circle\r\n      class=\"path\"\r\n      cx=\"50\"\r\n      cy=\"50\"\r\n      r=\"20\"\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"5\"\r\n      stroke-miterlimit=\"10\"\r\n     ></circle>\r\n    </svg>\r\n   </Host>\r\n  );\r\n }\r\n}\r\n"]}

package/dist/collection/components/sd-pagination/sd-pagination.js

@@ -73,12 +73,12 @@ export class SdPagination {
         }
     }
     render() {
-        return (h("div", { key: '2707331958e2c375b570590a8742655bacb1aa4d', class: this.paginationClasses }, h("div", { key: 'e98573b80c04454ea0b30f6cb7fe1974028a0464', 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: '442749b854a4033cd4eba7941ac69b0af3d70955', class: this.paginationClasses }, h("div", { key: '9ae405c342ec1a812312bc2abc5759d811e806c4', 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: 'ccb867eccaece5ecbdcef7abe0e4d333fb169d11', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '0ec1e8a3a815919d9c8f1a5539778b2cc541772e', class: "append-btns" }, this.renderNextButtons())));
     }
     static get is() { return "sd-pagination"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-popover/sd-popover.js

@@ -31,11 +31,11 @@ export class SdPopover {
         this.showPopover = false;
     };
     render() {
-        return (h(Fragment, { key: 'fb877e8d016d13fb33b49a1a4dbfed9fc01b1336' }, 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-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })), this.showPopover && (h("sd-tooltip-portal", { key: '02208721da61cb84086a57c823f8e31775fdbd5e', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '3f3c4fc690dac5061bda08af37121e2b98374979', class: {
+        return (h(Fragment, { key: 'cf3343eff82b136b3c1d55f3adc1ce7bd815c144' }, 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-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })), this.showPopover && (h("sd-tooltip-portal", { key: '254f14cafcc6f5dc4494360fc754656536b08a3a', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: 'f375fdf55aed6f3b8b4705fbaa3467b4c1eae7fd', class: {
                 'sd-popover-menu': true,
                 [`sd-popover-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, h("i", { key: '6f0df95bafc2cbf564fd0e5a133c89f03c3a924b', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '535acee0be86db4ed58d6cc1631732541f1e475e' })), h("div", { key: 'd4366800a8cbd5a1f9630344a5ca4241b0eaa8dd', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: '1cd9de3129988c5d26be0ded5b03520ab591cb9a', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '5aae57948bd5e0fd98e73a8ae504b77ce6cdbe07', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '814ac9ba0b2cf4367bb4cd5e688fa5433fee7126', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: 'a21ad0a5e28f8609b2f9d9accd0be5d81ed9de5b', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '10738ec0926ea5fbc0b30b5c8c08b6cc37bf47d3', name: "close", size: "12", color: "#AAAAAA" }))))))));
+            } }, h("i", { key: '5e4eede6dc40190223ffeaa49d2bdffd32e2defd', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '47c81c26ac958b000a451dc6c81c8752d314b0e0' })), h("div", { key: '13af261b03ae81c25f7b6791dec18d3948ff4e32', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: '8024032ddaca5046ff0da49cb97ea7883a07dfd5', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '68067a6b751f77dfaab56fcfdcfd9635f057d8c3', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: 'f49814504de9e8f84929ae85c73df5797689947e', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: 'ca1b3244636936e4ae870c201501933a82f2fc46', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '518c4817f3f6eb54883426f6dd3acb683d3d30b4', name: "close", size: "12", color: "#AAAAAA" }))))))));
     }
     static get is() { return "sd-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sd-portal/sd-portal.js

@@ -113,7 +113,7 @@ export class SdPortal {
         this.sdClose.emit();
     }
     render() {
-        return h("slot", { key: '4f344b083ff3a2d32d1a23f99e90687aeeb676b1' });
+        return h("slot", { key: '64f974db091753e7f2d5712483d32a7c1585b37b' });
     }
     static get is() { return "sd-portal"; }
     static get properties() {

package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js

@@ -24,7 +24,7 @@ export class SdSelectOption {
         }
     };
     render() {
-        return (h(Host, { key: '23d87df53fa083e6c9aceb1956de51800117df9f' }, h("div", { key: '569c5d35098350fa4d186ba838925de4f966c491', class: {
+        return (h(Host, { key: 'b571989b755f8e39c95cab49f11ef7935e4bc8c7' }, h("div", { key: 'af95f0a7ad90141eb7a9db91b0cfd0c66c7d4920', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,

package/dist/collection/components/sd-select-multiple/sd-select-multiple.js

@@ -208,11 +208,11 @@ export class SdSelectMultiple extends BaseDropdownEvent {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (h(Host, { key: '8a237d4dc7f743a7685b440cd654d51629765a20', style: style }, h("div", { key: 'c1240092508fbb9e9b638803171847b174da9062', class: {
+        return (h(Host, { key: '4ed0861a16ef427fdd526a3993325bc47a427f9a', style: style }, h("div", { key: 'c918e7e5dc13e53a20ba63bd0b9216fae24733f2', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,
-            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: 'b99913866f316d7eacffd9e0e71fd58baac05c34', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: '04aac623cfc31dfabda4a8e4840ea7f3c9fdbc28', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label) {
         if (!label)

package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js

@@ -39,7 +39,7 @@ export class SdSelectOptionGroup {
         }
     };
     render() {
-        return (h("div", { key: '0b921cd09e8115ed3af13fc2e9f1ecaff60f2b08', class: {
+        return (h("div", { key: 'eb8aac2629a851fce84ba1a17963282876a5d3c7', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -48,10 +48,10 @@ export class SdSelectOptionGroup {
                 'sd-select__option-group--group': this.option.type === 'group',
                 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
                 'sd-select__option-group--item': this.option.type === 'item',
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: '402a3e272f03930fe049d249c275a2acc1539bc3', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '6f8c05df6de67268636495b3d15dd5f896c8b846', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
+            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: '3c6ce8963fa794aca439bcc03e677fdcbf5a5d91', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '28f07c5705d15dd20db627fccc8c31ba9b554bc3', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), h("span", { key: '4cbe65750bace072e680c251e904688c63eb6722', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: 'af63ce7b9e377da8453049c49c5af28e411b9eec', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), h("span", { key: 'cef2d4c2a0183dbe0cc1e97db3337f3acd40f1cd', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: '522c9419fc38e86e3c66b3c0ae9a63f78568547e', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
     static get is() { return "sd-select-option-group"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-table/sd-table.css

@@ -180,6 +180,22 @@
   border-left: 1px solid #cccccc;
   border-right: 1px solid #cccccc;
 }
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody {
+  position: relative;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table 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 tbody tr:last-of-type td {
   border-bottom: none;
 }