@sellmate/design-system 1.0.75 → 1.0.77

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

@@ -1,7 +1,9 @@
 'use strict';
 
-var index = require('./index-Dptupbm0.js');
+var index = require('./index-CaGGRpd8.js');
 var constants = require('./constants-DJRV1upE.js');
+var sdTable_config = require('./sd-table.config-hnNodd18.js');
+require('./system-DRemSdU1.js');
 
 const urlAlphabet =
   'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
@@ -16,7 +18,7 @@ let nanoid = (size = 21) => {
   return id
 };
 
-const sdTableCss = () => `sd-table,:host{display:block;width:100%;max-width:100%;min-width:0}sd-table *,:host *{box-sizing:border-box}.sd-table__container{height:var(--table-height, auto);width:var(--table-width, 100%);max-width:100%;min-width:0;color:#222222;display:flex;flex-direction:column}.sd-table__clip{width:100%;min-width:0;height:var(--table-container-height, 400px);border:1px solid #E1E1E1;border-radius:8px;overflow:hidden}.sd-table__clip--has-pagination{border-radius:8px 8px 0 0}.sd-table__wrapper{width:100%;height:100%;display:flex;flex-direction:column;position:relative;font-size:12px;overflow:auto;background:#FFFFFF}.sd-table__wrapper--loading{overflow:hidden !important;pointer-events:none}.sd-table__wrapper--no-data{overflow:hidden;pointer-events:none}.sd-table__no-data{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:#888888;pointer-events:none;z-index:200;background:rgba(255, 255, 255, 0.6)}.sd-table__loading{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none}.sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table--selectable sd-thead,.sd-table--selectable sd-tbody{--selectable:true}.sd-table--sticky-header sd-thead thead{position:sticky;top:0;z-index:120}.sd-table--sticky-column sd-thead,.sd-table--sticky-column sd-tbody{--sticky-column:true}.sd-table--scrolled-left sd-thead,.sd-table--scrolled-left sd-tbody{--scrolled-left:true}.sd-table--scrolled-right sd-thead,.sd-table--scrolled-right sd-tbody{--scrolled-right:true}.sd-table--resizable sd-thead{--resizable:true}.sd-table--no-data sd-thead{opacity:0.4}.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:0 0 8px 8px}.sd-table__pagination sd-select-v2{position:absolute;right:10px;top:50%;transform:translateY(-50%)}`;
+const sdTableCss = () => `sd-table,:host{display:block;width:100%;max-width:100%;min-width:0}sd-table *,:host *{box-sizing:border-box}.sd-table__container{height:var(--table-height, 100%);width:var(--table-width, 100%);max-width:100%;min-width:0;color:#222222;display:flex;flex-direction:column}.sd-table__clip{width:100%;min-width:0;height:var(--table-container-height, 400px);border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);border-radius:var(--table-radius, 8px);overflow:hidden}.sd-table__clip--has-pagination{border-radius:var(--table-radius, 8px) var(--table-radius, 8px) 0 0}.sd-table__wrapper{width:100%;height:100%;display:flex;flex-direction:column;position:relative;font-family:var(--table-body-font-family, inherit);font-weight:var(--table-body-font-weight, 400);font-size:var(--table-body-font-size, 12px);line-height:var(--table-body-line-height, 20px);text-decoration:var(--table-body-text-decoration, none);overflow:auto;background:#FFFFFF}.sd-table__wrapper--loading{overflow:hidden !important;pointer-events:none}.sd-table__wrapper--no-data{overflow:hidden;pointer-events:none}.sd-table__no-data{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:var(--table-body-font-size, 12px);color:#888888;pointer-events:none;z-index:200;background:rgba(255, 255, 255, 0.6)}.sd-table__no-data ::slotted(*),.sd-table__no-data span{pointer-events:auto}.sd-table__loading{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none}.sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table--selectable sd-thead,.sd-table--selectable sd-tbody{--selectable:true}.sd-table--sticky-header sd-thead thead{position:sticky;top:0;z-index:120}.sd-table--sticky-column sd-thead,.sd-table--sticky-column sd-tbody{--sticky-column:true}.sd-table--scrolled-left sd-thead,.sd-table--scrolled-left sd-tbody{--scrolled-left:true}.sd-table--scrolled-right sd-thead,.sd-table--scrolled-right sd-tbody{--scrolled-right:true}.sd-table--resizable sd-thead{--resizable:true}.sd-table--no-data sd-thead{opacity:0.4}.sd-table__pagination{position:relative;background:#F9F9F9;height:48px;display:flex;align-items:center;justify-content:center;border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);border-top:none;border-radius:0 0 var(--table-radius, 8px) var(--table-radius, 8px)}.sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}`;
 
 const SdTable = class {
     constructor(hostRef) {
@@ -72,11 +74,17 @@ const SdTable = class {
     scrolledRight = false;
     rowCount = 0;
     loadingScrollTop = 0;
+    // light DOM에 sd-thead / sd-tbody 자식이 없으면 sd-table이 직접 렌더해야 함을 알리는 플래그.
+    // componentWillLoad에서 한 번 결정되며, 이후 동적 토글은 지원하지 않는다.
+    autoThead = false;
+    autoTbody = false;
     vsStart = 0;
     vsEnd = 0;
     lastReachEndNotifiedRowCount = -1;
     scrollContainer = null;
     onScroll;
+    // 키: `${rowKey}::${field}` → { rowspan, colspan }
+    spanRegistry = new Map();
     toFiniteNumber(value, fallback) {
         const n = typeof value === 'number' ? value : Number(value);
         return Number.isFinite(n) ? n : fallback;
@@ -155,9 +163,16 @@ const SdTable = class {
             this.innerRowsPerPage = newVal.rowsPerPage;
         }
     }
+    detectChildren() {
+        const hasThead = !!this.el.querySelector(':scope > sd-thead');
+        const hasTbody = !!this.el.querySelector(':scope > sd-tbody');
+        this.autoThead = !hasThead;
+        this.autoTbody = !hasTbody;
+    }
     componentWillLoad() {
         this.syncTableIdAttribute();
         this.handleNoDataLabelChange(this.noDataLabel);
+        this.detectChildren();
         this.innerSelected = new Set(this.selected || []);
         this.columnWidths = (this.columns || []).map(c => parseInt(c.width || '120', 10));
         if (this.pagination?.page) {
@@ -180,6 +195,11 @@ const SdTable = class {
         el.getTableIdSync = () => this.getResolvedTableId();
         el.getVirtualScrollConfigSync = this.getVirtualScrollConfigSync.bind(this);
         el.calculateVisibleRange = this.calculateVisibleRange.bind(this);
+        el.registerSpanSync = this.registerSpanSync.bind(this);
+        el.unregisterSpanSync = this.unregisterSpanSync.bind(this);
+        el.getSpanSync = this.getSpanSync.bind(this);
+        el.isCoveredSync = this.isCoveredSync.bind(this);
+        el.hasRowspanSync = this.hasRowspanSync.bind(this);
         if (Array.isArray(this.rows)) {
             this.rowCount = this.rows.length;
             this.pushRowsToChildren(this.rows);
@@ -228,11 +248,22 @@ const SdTable = class {
             this.scrollContainer.removeEventListener('scroll', this.onScroll);
         }
     }
+    // light DOM(manual mode 자식)과 shadow DOM(autoThead/autoTbody fallback) 양쪽 모두에서 자식을 찾는다.
+    queryChildEl(selector) {
+        return (this.el.querySelector(selector) ??
+            this.el.shadowRoot?.querySelector(selector) ??
+            null);
+    }
+    queryAllTr() {
+        const light = Array.from(this.el.querySelectorAll('sd-tr'));
+        const shadow = Array.from(this.el.shadowRoot?.querySelectorAll('sd-tr') ?? []);
+        return [...light, ...shadow];
+    }
     pushRowsToChildren(rows) {
-        const tbody = this.el.querySelector('sd-tbody');
+        const tbody = this.queryChildEl('sd-tbody');
         if (tbody)
             tbody.rows = rows;
-        const thead = this.el.querySelector('sd-thead');
+        const thead = this.queryChildEl('sd-thead');
         if (thead)
             thead.rows = rows;
     }
@@ -243,16 +274,14 @@ const SdTable = class {
         this.refreshChildrenConfig();
     };
     refreshChildrenSelection() {
-        const thead = this.el.querySelector('sd-thead');
-        const rows = this.el.querySelectorAll('sd-tr');
+        const thead = this.queryChildEl('sd-thead');
         thead?.refreshSelection?.();
-        rows.forEach(tr => tr?.refreshSelection?.());
+        this.queryAllTr().forEach(tr => tr?.refreshSelection?.());
     }
     refreshChildrenConfig() {
-        const thead = this.el.querySelector('sd-thead');
-        const rows = this.el.querySelectorAll('sd-tr');
+        const thead = this.queryChildEl('sd-thead');
         thead?.refreshConfig?.();
-        rows.forEach(tr => tr?.refreshConfig?.());
+        this.queryAllTr().forEach(tr => tr?.refreshConfig?.());
     }
     maybeEmitVirtualReachEnd(start, end) {
         const threshold = Math.max(1, this.virtualEndThreshold);
@@ -284,7 +313,7 @@ const SdTable = class {
         this.vsEnd = end;
         const topHeight = start * this.rowHeight;
         const bottomHeight = Math.max(0, (this.rowCount - end) * this.rowHeight);
-        const tbody = this.el.querySelector('sd-tbody');
+        const tbody = this.queryChildEl('sd-tbody');
         tbody?.setSpacersSync?.(topHeight, bottomHeight);
         if (rangeChanged) {
             this.sdVirtualUpdate.emit({
@@ -376,8 +405,7 @@ const SdTable = class {
         this.updateRowsVisibility();
     }
     updateRowsVisibility() {
-        const rows = this.el.querySelectorAll('sd-tr');
-        rows.forEach(tr => tr?.updateVisibility?.());
+        this.queryAllTr().forEach(tr => tr?.updateVisibility?.());
     }
     changeRowsPerPage(perPage) {
         const changedRowsPerPage = perPage ? Number(perPage) : 0;
@@ -414,10 +442,9 @@ const SdTable = class {
             const delta = moveEvent.clientX - startX;
             const newWidth = Math.min(Math.max(startWidth + (reversed ? -delta : delta), minWidth), maxWidth);
             this.columnWidths = this.columnWidths.map((width, idx) => (idx === index ? newWidth : width));
-            const thead = this.el.querySelector('sd-thead');
-            const rows = this.el.querySelectorAll('sd-tr');
+            const thead = this.queryChildEl('sd-thead');
             thead?.setColumnWidths?.(this.columnWidths);
-            rows.forEach(tr => tr?.setColumnWidths?.(this.columnWidths));
+            this.queryAllTr().forEach(tr => tr?.setColumnWidths?.(this.columnWidths));
             const stickyRightCount = this.stickyColumn?.right || 0;
             const visibleColCount = this.columns.filter(c => c.visible !== false).length;
             const isRightStickyEdgeResizer = stickyRightCount > 0 && index === visibleColCount - stickyRightCount;
@@ -454,6 +481,112 @@ const SdTable = class {
     async getStickyStyle(colIdx) {
         return this.getStickyStyleSync(colIdx);
     }
+    // ─── rowspan / colspan registry ─────────────────────────────────
+    // sd-td가 mount/unmount 시 자기 (rowKey, field)와 span을 등록한다.
+    // sd-tr는 render마다 isCoveredSync로 자신의 셀 위치가 다른 셀의 span에
+    // 덮였는지 판정해 <td>를 그릴지 결정한다.
+    spanKey(rowKey, field) {
+        return `${rowKey}::${field}`;
+    }
+    // span 등록은 sd-td의 lifecycle에서 비동기적으로 일어나므로,
+    // 등록/해제 직후 형제 sd-tr들이 새 레지스트리 상태로 다시 그려져야
+    // 덮인 셀이 사라지거나 다시 나타난다.
+    // forceUpdate는 React 래퍼 환경에서 prop 동기화 사이클과 부딪혀 누락되는
+    // 경우가 있어, sd-tr의 @State (spansVersion)을 통해 재렌더를 강제한다.
+    requestAllTrUpdate() {
+        this.queryAllTr().forEach(tr => {
+            const trAny = tr;
+            if (typeof trAny.bumpSpansVersion === 'function') {
+                trAny.bumpSpansVersion();
+            }
+            else {
+                index.forceUpdate(tr);
+            }
+        });
+    }
+    registerSpanSync(rowKey, field, rowspan, colspan) {
+        if (rowKey == null || !field)
+            return;
+        const safeRowspan = Math.max(1, Math.floor(rowspan || 1));
+        const safeColspan = Math.max(1, Math.floor(colspan || 1));
+        const key = this.spanKey(rowKey, field);
+        const prev = this.spanRegistry.get(key);
+        if (safeRowspan === 1 && safeColspan === 1) {
+            if (!prev)
+                return;
+            this.spanRegistry.delete(key);
+            this.requestAllTrUpdate();
+            return;
+        }
+        if (prev && prev.rowspan === safeRowspan && prev.colspan === safeColspan)
+            return;
+        this.spanRegistry.set(key, { rowspan: safeRowspan, colspan: safeColspan });
+        this.requestAllTrUpdate();
+    }
+    unregisterSpanSync(rowKey, field) {
+        if (rowKey == null || !field)
+            return;
+        const key = this.spanKey(rowKey, field);
+        if (!this.spanRegistry.has(key))
+            return;
+        this.spanRegistry.delete(key);
+        this.requestAllTrUpdate();
+    }
+    getSpanSync(rowKey, field) {
+        return this.spanRegistry.get(this.spanKey(rowKey, field));
+    }
+    // 레지스트리에 rowspan>1 항목이 하나라도 있으면 true.
+    // hover 동작을 끌지 결정하는 데 사용 — colspan만 있는 경우는 그대로 hover 유지.
+    hasRowspanSync() {
+        for (const span of this.spanRegistry.values()) {
+            if (span.rowspan > 1)
+                return true;
+        }
+        return false;
+    }
+    isCoveredSync(rowKey, colIdx, columns) {
+        if (this.spanRegistry.size === 0)
+            return false;
+        const visibleCols = columns.filter(c => c.visible !== false);
+        // 1. 같은 행 왼쪽 스캔 — colspan으로 이 위치를 덮는 셀이 있는가
+        for (let i = 0; i < colIdx; i++) {
+            const c = visibleCols[i];
+            if (!c)
+                continue;
+            const field = typeof c.field === 'string' ? c.field : c.name;
+            const span = this.spanRegistry.get(this.spanKey(rowKey, field));
+            if (!span)
+                continue;
+            if (i + span.colspan > colIdx)
+                return true;
+        }
+        // 2. 위쪽 행 스캔 — 숫자 변환 가능한 rowKey만 rowspan 평가
+        const myRowIdx = Number(rowKey);
+        if (!Number.isFinite(myRowIdx))
+            return false;
+        for (const [key, span] of this.spanRegistry) {
+            if (span.rowspan <= 1)
+                continue;
+            const sepIdx = key.indexOf('::');
+            if (sepIdx < 0)
+                continue;
+            const otherRowKey = key.slice(0, sepIdx);
+            const otherField = key.slice(sepIdx + 2);
+            const otherRowIdx = Number(otherRowKey);
+            if (!Number.isFinite(otherRowIdx))
+                continue;
+            if (otherRowIdx >= myRowIdx)
+                continue;
+            if (otherRowIdx + span.rowspan <= myRowIdx)
+                continue;
+            const otherColIdx = visibleCols.findIndex(c => (typeof c.field === 'string' ? c.field : c.name) === otherField);
+            if (otherColIdx < 0)
+                continue;
+            if (otherColIdx <= colIdx && otherColIdx + span.colspan > colIdx)
+                return true;
+        }
+        return false;
+    }
     setRowCountSync(count) {
         const safeCount = Math.max(0, Math.floor(this.toFiniteNumber(count, 0)));
         if (safeCount !== this.rowCount) {
@@ -501,6 +634,20 @@ const SdTable = class {
             return null;
         return { from: this.vsStart, to: this.vsEnd };
     }
+    // autoTbody fallback에서 sd-table이 직접 sd-tr을 만들어내는 경로.
+    // 가상 스크롤은 사용자가 직접 SdTbody+SdTr을 작성해야 하므로 빈 배열을 반환한다.
+    renderAutoRows() {
+        if (this.useVirtualScroll)
+            return null;
+        const allRows = this.rows ?? [];
+        const pageInfo = this.getPaginationInfoSync();
+        const startIdx = pageInfo?.startIndex ?? 0;
+        const displayed = pageInfo ? allRows.slice(pageInfo.startIndex, pageInfo.endIndex) : allRows;
+        return displayed.map((row, i) => {
+            const absoluteIdx = startIdx + i;
+            return index.h("sd-tr", { key: absoluteIdx, "row-key": String(absoluteIdx), row: row });
+        });
+    }
     get tableClasses() {
         return [
             'sd-table',
@@ -520,24 +667,34 @@ const SdTable = class {
     }
     render() {
         const resolvedTableId = this.getResolvedTableId();
-        return (index.h(index.Host, { key: '0b90643721a90b7bb59a6c31f6edeb313849b973' }, index.h("div", { key: 'e55fe4f476dbea4888a168861e7e6d6951d7d489', class: "sd-table__container", style: {
+        const hostStyle = {
+            '--table-radius': `${sdTable_config.TABLE_RADIUS}px`,
+            '--table-border-color': sdTable_config.TABLE_BORDER.color,
+            '--table-border-width': `${sdTable_config.TABLE_BORDER.width}px`,
+            '--table-body-font-family': sdTable_config.TABLE_BODY_TYPOGRAPHY.fontFamily,
+            '--table-body-font-weight': sdTable_config.TABLE_BODY_TYPOGRAPHY.fontWeight,
+            '--table-body-font-size': `${sdTable_config.TABLE_BODY_TYPOGRAPHY.fontSize}px`,
+            '--table-body-line-height': `${sdTable_config.TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
+            '--table-body-text-decoration': sdTable_config.TABLE_BODY_TYPOGRAPHY.textDecoration,
+        };
+        return (index.h(index.Host, { key: '1a80b7c3589a8a2eefaabf24ed895c927543aac4', style: hostStyle }, index.h("div", { key: 'd97aa6c04948153671e26066b6df02e206fc35e6', class: "sd-table__container", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
                 '--table-container-height': `calc(${this.height || '100%'} - ${this.pagination && this.rowCount > 0 && !this.useVirtualScroll ? 48 : 0}px)`,
-            } }, index.h("div", { key: 'de18a900037a7b2f619dd22981c30ed76f5a8111', class: {
+            } }, index.h("div", { key: '0e13dbbe062953c93a0acaaf5c00ca40a5b7e245', class: {
                 'sd-table__clip': true,
                 'sd-table__clip--has-pagination': !!(this.pagination &&
                     this.pagination.rowsPerPage > 0 &&
                     this.rowCount > 0 &&
                     !this.useVirtualScroll),
-            } }, index.h("div", { key: '028e0982d415033adaf420ee6b953241c8f3dbec', class: {
+            } }, index.h("div", { key: 'c800ecac543d1540d9b6c9faf06753c9dc10aaf3', class: {
                 'sd-table__wrapper': true,
                 'sd-table__wrapper--loading': this.isLoading,
                 'sd-table__wrapper--no-data': this.rowCount === 0 && !this.isLoading,
-            } }, this.isLoading && (index.h("div", { key: '8c9110c9c2c26cddbbed8e1f2782ecfaafd3679c', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, index.h("sd-circle-progress", { key: '51b61f91b0ecebf63fe3e65b94012963f0375e5c', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (index.h("div", { key: '0a7a45049014869b8164b081a251218d3c814e87', class: "sd-table__no-data" }, index.h("slot", { key: 'd4b6219e5dcaaa22be3360f7f0f05a8b32533890', name: "no-data" }, index.h("span", { key: 'c76848aad8a1d3967f3cd239090e97266e46ab3e' }, this.resolvedNoDataLabel)))), index.h("table", { key: '2b560d112402549c7043b337d944b0de88c3ba0e', class: this.tableClasses }, index.h("slot", { key: '1c4583148df6a585f389c1bed0426fa4a3cb4899', name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }), index.h("slot", { key: 'a5d983106de61c829f9cbeb541d1908fee48468c', name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange })))), this.pagination &&
+            } }, this.isLoading && (index.h("div", { key: '656bc53538c8513e014f31f1e976fd66ce79c7aa', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, index.h("sd-circle-progress", { key: '74078add6860fc95e238d89335d57e205e751cd6', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (index.h("div", { key: '18a33a7247bde3d08472f8082325c76217734e5d', class: "sd-table__no-data" }, index.h("slot", { key: '966cb066f721695013a3e5a1a64543544b09fa77', name: "no-data" }, index.h("span", { key: 'd335a9b1b2e847b267cefb9d12f7265c5f67f394' }, this.resolvedNoDataLabel)))), index.h("table", { key: '8fd0a2428bfd4dd6a574bbb02139088c31408866', class: this.tableClasses }, this.autoThead ? (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-thead", { rows: this.rows ?? [] }))) : (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
             this.pagination.rowsPerPage > 0 &&
             this.rowCount > 0 &&
-            !this.useVirtualScroll && (index.h("div", { key: '004355d84e2cfc2fd38a9d4811f14fd66dc5c21b', class: "sd-table__pagination" }, index.h("sd-pagination", { key: '463586c7e57782a7989962f73cb3d4e8c04f5bce', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (index.h("sd-select-v2", { key: '1f26de447da63ef0c4a24ffb49666a0687db9991', value: this.useInternalPagination
+            !this.useVirtualScroll && (index.h("div", { key: '6f483b1a23456bbe42ff769a50c9de5638e7754f', class: "sd-table__pagination" }, index.h("sd-pagination", { key: '841c545c23de8b4bba4cce3c9f6608d16f7b4e54', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (index.h("sd-select", { key: 'a67e17bf3067953169ffa119ee41b1d7f46c2058', value: this.useInternalPagination
                 ? this.innerRowsPerPage
                 : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
                 if (!this.isRowsPerPageValue(e.detail))

package/dist/cjs/sd-table.config-hnNodd18.js

@@ -0,0 +1,105 @@
+'use strict';
+
+var system = require('./system-DRemSdU1.js');
+
+const table = {
+	header: {
+		height: "36",
+		paddingX: "16",
+		gap: "4",
+		bg: "#F5FAFF",
+		typography: {
+			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
+			fontWeight: "500",
+			fontSize: "12",
+			lineHeight: "20",
+			textDecoration: "none"
+		},
+		resizingBar: {
+			color: "#CCCCCC",
+			height: "16"
+		}
+	},
+	body: {
+		"default": {
+			height: "44"},
+		paddingX: "16",
+		typography: {
+			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
+			fontWeight: "400",
+			fontSize: "12",
+			lineHeight: "20",
+			textDecoration: "none"
+		}
+	},
+	border: {
+		"default": "#E1E1E1",
+		width: {
+			width: "1"
+		}
+	},
+	radius: "8"};
+var tableTokens = {
+	table: table
+};
+
+// ── Header Tokens ──
+const TABLE_HEADER_LAYOUT = {
+    height: tableTokens.table.header.height,
+    paddingX: tableTokens.table.header.paddingX,
+    gap: tableTokens.table.header.gap,
+};
+const TABLE_HEADER_TYPOGRAPHY = {
+    fontFamily: tableTokens.table.header.typography.fontFamily,
+    fontWeight: tableTokens.table.header.typography.fontWeight,
+    fontSize: tableTokens.table.header.typography.fontSize,
+    lineHeight: tableTokens.table.header.typography.lineHeight,
+    textDecoration: tableTokens.table.header.typography.textDecoration,
+};
+const TABLE_HEADER_COLORS = {
+    bg: tableTokens.table.header.bg,
+};
+const TABLE_HEADER_RESIZING_BAR = {
+    color: tableTokens.table.header.resizingBar.color,
+    height: tableTokens.table.header.resizingBar.height,
+};
+// ── Body Tokens ──
+const TABLE_BODY_LAYOUT = {
+    default: {
+        height: tableTokens.table.body.default.height},
+    paddingX: tableTokens.table.body.paddingX};
+const TABLE_BODY_TYPOGRAPHY = {
+    fontFamily: tableTokens.table.body.typography.fontFamily,
+    fontWeight: tableTokens.table.body.typography.fontWeight,
+    fontSize: tableTokens.table.body.typography.fontSize,
+    lineHeight: tableTokens.table.body.typography.lineHeight,
+    textDecoration: tableTokens.table.body.typography.textDecoration,
+};
+// ── Frame / Border Tokens ──
+const TABLE_BORDER = {
+    color: tableTokens.table.border.default,
+    width: tableTokens.table.border.width.width,
+};
+const TABLE_RADIUS = tableTokens.table.radius;
+// ── Header Icon Color Defaults ──
+const ICON_DEFAULT_COLOR = {
+    pageEdit: system.systemTokens.color.darkblue.strong,
+    arrowDown: system.systemTokens.color.darkblue.strong,
+    arrowUp: system.systemTokens.color.darkblue.strong,
+    updown: system.systemTokens.color.grey.strong,
+    pageMove: system.systemTokens.color.darkblue.strong,
+    star: system.systemTokens.color.blue.strong,
+};
+const resolveTableIconColor = (name, override) => override ?? ICON_DEFAULT_COLOR[name];
+const resolveSortIconName = (sort) => sort === 'asc' ? 'arrowDown' : sort === 'desc' ? 'arrowUp' : 'updown';
+
+exports.TABLE_BODY_LAYOUT = TABLE_BODY_LAYOUT;
+exports.TABLE_BODY_TYPOGRAPHY = TABLE_BODY_TYPOGRAPHY;
+exports.TABLE_BORDER = TABLE_BORDER;
+exports.TABLE_HEADER_COLORS = TABLE_HEADER_COLORS;
+exports.TABLE_HEADER_LAYOUT = TABLE_HEADER_LAYOUT;
+exports.TABLE_HEADER_RESIZING_BAR = TABLE_HEADER_RESIZING_BAR;
+exports.TABLE_HEADER_TYPOGRAPHY = TABLE_HEADER_TYPOGRAPHY;
+exports.TABLE_RADIUS = TABLE_RADIUS;
+exports.resolveSortIconName = resolveSortIconName;
+exports.resolveTableIconColor = resolveTableIconColor;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dptupbm0.js');
+var index = require('./index-CaGGRpd8.js');
 
 const tab = {
 	main: {
@@ -188,7 +188,7 @@ const SdTabs = class {
         };
     }
     render() {
-        return (index.h("div", { key: '390edfad274caa06df38af9d04580015a1744a44', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index$1) => {
+        return (index.h("div", { key: 'ff758fbab0a594c28968074a26ad92a28cd4850b', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index$1) => {
             const badgeName = this.getBadgeName(tab);
             return (index.h("div", { key: `tab-${index$1}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab) }, index.h("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge !== undefined && tab.badge !== null && tab.badge !== '' && (index.h("sd-tag", { name: badgeName, label: tab.badge.toString() }))));
         })));

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dptupbm0.js');
+var index = require('./index-CaGGRpd8.js');
 
 const tag = {
 	xs: {
@@ -172,7 +172,7 @@ const SdTag = class {
     render() {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (index.h("span", { key: 'da19900d267d2b2f000e1790133966a7976bcded', class: "sd-tag", style: {
+        return (index.h("span", { key: '3e7a6602ee73f56e5709711ac735460230de7e58', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -182,7 +182,7 @@ const SdTag = class {
                 '--sd-tag-font-weight': config.fontWeight,
                 '--sd-tag-line-height': config.lineHeight,
                 '--sd-tag-radius': config.radius,
-            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, index.h("span", { key: 'e426021988395058367872ac23658586b2895764', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, index.h("span", { key: '8da56711cb12127f96195404799581480280507f', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
 };
 SdTag.style = sdTagCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dptupbm0.js');
+var index = require('./index-CaGGRpd8.js');
 var constants = require('./constants-DJRV1upE.js');
 
 const sdTdCss = () => `sd-td *{box-sizing:border-box}sd-td{display:contents}sd-td.align-left{text-align:left}sd-td.align-center{text-align:center}sd-td.align-right{text-align:right}`;
@@ -13,14 +13,22 @@ const SdTd = class {
     field;
     rowKey;
     align;
+    rowspan;
+    colspan;
     handleFieldChange() {
         this.syncSlotName();
+        this.syncSpanRegistration();
     }
     handleRowKeyChange() {
         this.syncSlotName();
+        this.syncSpanRegistration();
+    }
+    handleSpanChange() {
+        this.syncSpanRegistration();
     }
     componentWillLoad() {
         this.syncSlotName();
+        this.syncSpanRegistration();
         // slot 타이밍 엇갈림 대응: 부모 sd-tr forceUpdate로 슬롯 재매칭
         const parentTr = this.el.parentElement;
         if (parentTr?.tagName?.toLowerCase() === 'sd-tr') {
@@ -29,6 +37,44 @@ const SdTd = class {
     }
     componentDidLoad() {
         this.syncSlotName();
+        this.syncSpanRegistration();
+    }
+    // React StrictMode에서는 disconnect/reconnect 사이클이 일어나면서
+    // 동일 인스턴스의 componentWillLoad는 더 이상 호출되지 않는다.
+    // 재연결 시점에도 등록 상태를 복구해야 rowspan/colspan이 유지된다.
+    connectedCallback() {
+        this.syncSpanRegistration();
+    }
+    disconnectedCallback() {
+        const table = this.findTable();
+        if (table?.unregisterSpanSync && this.field && this.rowKey != null) {
+            table.unregisterSpanSync(String(this.rowKey), this.field);
+            this.requestParentTrUpdate();
+        }
+    }
+    findTable() {
+        return this.el.closest('sd-table');
+    }
+    requestParentTrUpdate() {
+        const parentTr = this.el.parentElement;
+        if (parentTr?.tagName?.toLowerCase() !== 'sd-tr')
+            return;
+        const trAny = parentTr;
+        if (typeof trAny.bumpSpansVersion === 'function') {
+            trAny.bumpSpansVersion();
+        }
+        else {
+            index.forceUpdate(parentTr);
+        }
+    }
+    syncSpanRegistration() {
+        const table = this.findTable();
+        if (!table?.registerSpanSync || !this.field || this.rowKey == null)
+            return;
+        const rs = Math.max(1, Math.floor(Number(this.rowspan) || 1));
+        const cs = Math.max(1, Math.floor(Number(this.colspan) || 1));
+        table.registerSpanSync(String(this.rowKey), this.field, rs, cs);
+        this.requestParentTrUpdate();
     }
     syncSlotName() {
         const table = this.el.closest('sd-table');
@@ -42,7 +88,7 @@ const SdTd = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '672c967273dac405ed4a47fa5939463265075681', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: 'c15e572fdf4a8c68fff8b69b586dfbf9f01dce1b' })));
+        return (index.h(index.Host, { key: '1702396f538453cf26beb81b63926ea73b7baa89', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: 'bd04afefd83178f48eb93b4e7d189386a817ff72' })));
     }
     static get watchers() { return {
         "field": [{
@@ -50,6 +96,12 @@ const SdTd = class {
             }],
         "rowKey": [{
                 "handleRowKeyChange": 0
+            }],
+        "rowspan": [{
+                "handleSpanChange": 0
+            }],
+        "colspan": [{
+                "handleSpanChange": 0
             }]
     }; }
 };

package/dist/cjs/sd-text-link.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dptupbm0.js');
+var index = require('./index-CaGGRpd8.js');
 
 const textLink = {
 	gap: "4",
@@ -73,16 +73,16 @@ const SdTextLink = class {
             '--sd-text-link-text-decoration': typo.textDecoration,
             ...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
         };
-        return (index.h("span", { key: '1128254cddacf5869f320ce2b788b06646f27d7f', class: {
+        return (index.h("span", { key: '9bd62ac603764a5938f3c72bac3a8bf893dfb233', class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.icon && (index.h("sd-icon", { key: '52c069d637a2ccf9cd4e7bd1ab3a62ea981d2e1e', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: '99a09359c75c2eb6c2e2ef6b9e3b87d92c3f7810', class: labelClassName }, this.label), this.useArrow && (index.h("span", { key: 'c7e77454d9d002c0e043dc71a418c65ecd60cff5', class: "sd-text-link__arrow", style: {
+            }, style: cssVars, onClick: this.handleClick }, this.icon && (index.h("sd-icon", { key: '9d63aea3c45c4962e5766e7059a166a85e7a357f', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: 'dc73d60dd1e593c597a6b5dd977db380c21ff680', class: labelClassName }, this.label), this.useArrow && (index.h("span", { key: '2b25dfb6ae2f857b674341427f93ee34e4691893', class: "sd-text-link__arrow", style: {
                 width: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 height: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-            } }, index.h("sd-icon", { key: '677c88823b02084449cd2dec83cc6bd27dfb8006', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
+            } }, index.h("sd-icon", { key: 'a5c8fb48e66f4a6820da1a54cedd7b1a13c5dcec', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
     }
 };
 SdTextLink.style = sdTextLinkCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dptupbm0.js');
+var index = require('./index-CaGGRpd8.js');
 var index$1 = require('./index-BUvXpPc3.js');
 var component_textinput = require('./component.textinput-BpXDeZPD.js');
 
@@ -130,7 +130,7 @@ const SdTextarea = class {
             '--sd-system-size-field-sm-height': 'auto',
             '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
         };
-        return (index.h("sd-field", { key: '345a70f335ee103a4e45c75e17559359beec01c9', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: 'dc09d61d06f3cefb15dce980e293a266fdf3d79d', class: "sd-textarea__content" }, index.h("textarea", { key: '085de248d7376e0d19d3588bc836bd5ad17cb335', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
+        return (index.h("sd-field", { key: 'ca7dc6c13d22ba43cd99ee1e976599d7efb1eceb', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: 'a36ffabff714596bf780f2a63ccfde3e02eadda7', class: "sd-textarea__content" }, index.h("textarea", { key: 'b7f8a55b7ee4dfc394c380a97e21c6cc34d12b9b', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
     }
     static get watchers() { return {
         "value": [{

package/dist/cjs/sd-toast-container.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dptupbm0.js');
+var index = require('./index-CaGGRpd8.js');
 
 const DEFAULT_DURATION = 4000;
 const DEFAULT_MAX_VISIBLE = 3;
@@ -234,7 +234,7 @@ const SdToastContainer = class {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (index.h("div", { key: '601c4c5aa55df02459866607ca7c59da53c2eda5', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (index.h("div", { key: '925f4bf56626e8c722051afa65aa64f2a50007db', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {