@sellmate/design-system 1.0.75 → 1.0.76

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

@@ -40,7 +40,7 @@ export class SdSwitch {
             '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
             '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
         };
-        return (h("label", { key: 'ac6a35d06ddd04bc94369014ff586766dd745bbb', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: '9ebc810e93c9dfa3bf7407f279dadbada579196e', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: '7add76be99645d6434e95305f6318fac7da0de57', class: "sd-switch__track" }, h("div", { key: 'ed90778aa4dcd6f0853029579c36cfdb8640afcf', class: "sd-switch__knob" })), this.label && h("span", { key: '70e3ddf819e77da4c693a4853ddb7f392381964e', class: "sd-switch__label" }, this.label)));
+        return (h("label", { key: '469c012285d3c8a33792a460e74d8566c384efe8', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: '9678e3325339a47e3e2d81ce3cd752c86ed0f906', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: '47348914869f5215957a652cfcf3a11807a0216f', class: "sd-switch__track" }, h("div", { key: '0676260c42e6b79acec710f0f9ba72f01a3a7c18', class: "sd-switch__knob" })), this.label && h("span", { key: 'b92597092795bff38d2acf0cff76f9c381435438', class: "sd-switch__label" }, this.label)));
     }
     static get is() { return "sd-switch"; }
     static get originalStyleUrls() {

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

@@ -11,7 +11,7 @@ sd-table *,
 }
 
 .sd-table__container {
-  height: var(--table-height, auto);
+  height: var(--table-height, 100%);
   width: var(--table-width, 100%);
   max-width: 100%;
   min-width: 0;

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

@@ -1,4 +1,4 @@
-import { h, Host, readTask, } from "@stencil/core";
+import { h, Host, readTask, forceUpdate, } from "@stencil/core";
 import { nanoid } from "nanoid";
 import { TABLE_ID_ATTR, } from "./constants";
 export class SdTable {
@@ -47,11 +47,17 @@ export class SdTable {
     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;
@@ -130,9 +136,16 @@ export class SdTable {
             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) {
@@ -155,6 +168,11 @@ export class SdTable {
         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);
@@ -203,11 +221,22 @@ export class SdTable {
             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;
     }
@@ -218,16 +247,14 @@ export class SdTable {
         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);
@@ -259,7 +286,7 @@ export class SdTable {
         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({
@@ -351,8 +378,7 @@ export class SdTable {
         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;
@@ -389,10 +415,9 @@ export class SdTable {
             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;
@@ -429,6 +454,112 @@ export class SdTable {
     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 {
+                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) {
@@ -476,6 +607,22 @@ export class SdTable {
             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 (h("sd-tr", { key: absoluteIdx, "row-key": String(absoluteIdx), row: row }));
+        });
+    }
     get tableClasses() {
         return [
             'sd-table',
@@ -495,24 +642,24 @@ export class SdTable {
     }
     render() {
         const resolvedTableId = this.getResolvedTableId();
-        return (h(Host, { key: '0b90643721a90b7bb59a6c31f6edeb313849b973' }, h("div", { key: 'e55fe4f476dbea4888a168861e7e6d6951d7d489', class: "sd-table__container", style: {
+        return (h(Host, { key: 'd73cd690ad11ce92af37b6f32374f6f891c5b677' }, h("div", { key: 'f51d23212885ad8121b9a4e895fb854f1e142bc4', 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)`,
-            } }, h("div", { key: 'de18a900037a7b2f619dd22981c30ed76f5a8111', class: {
+            } }, h("div", { key: '84b1ba7b2220ff55304b9c19e59304ca2257cff0', class: {
                 'sd-table__clip': true,
                 'sd-table__clip--has-pagination': !!(this.pagination &&
                     this.pagination.rowsPerPage > 0 &&
                     this.rowCount > 0 &&
                     !this.useVirtualScroll),
-            } }, h("div", { key: '028e0982d415033adaf420ee6b953241c8f3dbec', class: {
+            } }, h("div", { key: 'c901eba67eae29515bf0b3edcc6632b2aacf0f80', class: {
                 'sd-table__wrapper': true,
                 'sd-table__wrapper--loading': this.isLoading,
                 'sd-table__wrapper--no-data': this.rowCount === 0 && !this.isLoading,
-            } }, this.isLoading && (h("div", { key: '8c9110c9c2c26cddbbed8e1f2782ecfaafd3679c', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '51b61f91b0ecebf63fe3e65b94012963f0375e5c', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (h("div", { key: '0a7a45049014869b8164b081a251218d3c814e87', class: "sd-table__no-data" }, h("slot", { key: 'd4b6219e5dcaaa22be3360f7f0f05a8b32533890', name: "no-data" }, h("span", { key: 'c76848aad8a1d3967f3cd239090e97266e46ab3e' }, this.resolvedNoDataLabel)))), h("table", { key: '2b560d112402549c7043b337d944b0de88c3ba0e', class: this.tableClasses }, h("slot", { key: '1c4583148df6a585f389c1bed0426fa4a3cb4899', name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }), h("slot", { key: 'a5d983106de61c829f9cbeb541d1908fee48468c', name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange })))), this.pagination &&
+            } }, this.isLoading && (h("div", { key: '35a237d0203b2479dbdb77ac42c918a9375bdfd3', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '21a29981c1cdbd679f46abd2e7de7794c9ebbca9', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (h("div", { key: '07ad28bc6e7556cfe229fc1e952410f388424a7f', class: "sd-table__no-data" }, h("slot", { key: 'bf21e60f5b86614587b704bea2965b9467c7f467', name: "no-data" }, h("span", { key: 'f3d012d12e9189545b0cef52250502d46cb9a764' }, this.resolvedNoDataLabel)))), h("table", { key: '655d3dc017c6445ec454faef0e5e9837b7ee0013', class: this.tableClasses }, this.autoThead ? (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, h("sd-thead", { rows: this.rows ?? [] }))) : (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
             this.pagination.rowsPerPage > 0 &&
             this.rowCount > 0 &&
-            !this.useVirtualScroll && (h("div", { key: '004355d84e2cfc2fd38a9d4811f14fd66dc5c21b', class: "sd-table__pagination" }, 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 && (h("sd-select-v2", { key: '1f26de447da63ef0c4a24ffb49666a0687db9991', value: this.useInternalPagination
+            !this.useVirtualScroll && (h("div", { key: '7ab0b30a0c0e0a197b0f79c6b07ef5614d5d2879', class: "sd-table__pagination" }, h("sd-pagination", { key: '71d44bba5a82f4d8f7c067e525db15fe9a36c305', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select-v2", { key: 'a9ab33347db0714da188f658a2ca1902502db690', value: this.useInternalPagination
                 ? this.innerRowsPerPage
                 : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
                 if (!this.isRowsPerPageValue(e.detail))
@@ -992,7 +1139,9 @@ export class SdTable {
             "scrolledLeft": {},
             "scrolledRight": {},
             "rowCount": {},
-            "loadingScrollTop": {}
+            "loadingScrollTop": {},
+            "autoThead": {},
+            "autoTbody": {}
         };
     }
     static get events() {

package/dist/collection/components/sd-table/sd-tbody/sd-tbody.js

@@ -28,7 +28,12 @@ export class SdTbody {
         this.syncTableContext();
     }
     syncTableContext() {
-        const table = this.el.closest('sd-table');
+        // sd-table이 shadow:true이므로 fallback content로 렌더되면 closest가 경계를 못 넘는다.
+        // 그 경우 getRootNode().host(=sd-table)로 폴백한다.
+        const closest = this.el.closest('sd-table');
+        const root = this.el.getRootNode();
+        const fromShadow = root instanceof ShadowRoot ? root.host : null;
+        const table = closest ?? fromShadow;
         this.tableEl = table;
         const fromMethod = table?.getTableIdSync?.();
         const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
@@ -41,7 +46,7 @@ export class SdTbody {
     }
     render() {
         const hasRows = this.rows.length > 0;
-        return (h(Host, { key: 'e4c64dbf97185bbc6eaec4b883c65dc8ebd34ece', slot: `${this.tableId}-body` }, h("tbody", { key: 'b2fb886684a5a6055d3af659bba75dd9bc801b73', class: { 'tbody': true, 'tbody--empty': !hasRows } }, hasRows ? ([
+        return (h(Host, { key: 'bc9fbd4f08f4d77da60b083dceef4e24e2fb5532', slot: `${this.tableId}-body` }, h("tbody", { key: '81ef875cbc39f988021a211ede716a98d3ea30cd', class: { 'tbody': true, 'tbody--empty': !hasRows } }, hasRows ? ([
             this.topSpacerHeight > 0 && (h("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
             h("slot", null),
             this.bottomSpacerHeight > 0 && (h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),

package/dist/collection/components/sd-table/sd-td/sd-td.js

@@ -5,14 +5,22 @@ export class SdTd {
     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') {
@@ -21,6 +29,44 @@ export class SdTd {
     }
     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 {
+            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');
@@ -34,7 +80,7 @@ export class SdTd {
         }
     }
     render() {
-        return (h(Host, { key: '672c967273dac405ed4a47fa5939463265075681', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: 'c15e572fdf4a8c68fff8b69b586dfbf9f01dce1b' })));
+        return (h(Host, { key: 'da9ce2edb986d4b3cf1a6e5f59030009f1288250', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: '8514071bd38c4f5b1997ae7239b8585a25f97ce0' })));
     }
     static get is() { return "sd-td"; }
     static get originalStyleUrls() {
@@ -105,6 +151,44 @@ export class SdTd {
                 "setter": false,
                 "reflect": false,
                 "attribute": "align"
+            },
+            "rowspan": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rowspan"
+            },
+            "colspan": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "colspan"
             }
         };
     }
@@ -116,6 +200,12 @@ export class SdTd {
             }, {
                 "propName": "rowKey",
                 "methodName": "handleRowKeyChange"
+            }, {
+                "propName": "rowspan",
+                "methodName": "handleSpanChange"
+            }, {
+                "propName": "colspan",
+                "methodName": "handleSpanChange"
             }];
     }
 }

package/dist/collection/components/sd-table/sd-thead/sd-thead.js

@@ -38,7 +38,12 @@ export class SdThead {
         this.resolveConfig();
     }
     syncTableContext() {
-        const table = this.el.closest('sd-table');
+        // sd-table이 shadow:true이므로 fallback content로 렌더되면 closest가 경계를 못 넘는다.
+        // 그 경우 getRootNode().host(=sd-table)로 폴백한다.
+        const closest = this.el.closest('sd-table');
+        const root = this.el.getRootNode();
+        const fromShadow = root instanceof ShadowRoot ? root.host : null;
+        const table = closest ?? fromShadow;
         this.tableEl = table;
         const fromMethod = table?.getTableIdSync?.();
         const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
@@ -128,16 +133,16 @@ export class SdThead {
         const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
         const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
         const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
-        return (h(Host, { key: '2358499ef65d88005d03b1246604c0fd8eefdde1', slot: `${this.tableId}-head` }, h("thead", { key: '49bb43a19aeb83f3a60367b26dbb6535ebcec743', class: {
+        return (h(Host, { key: '5aa1e38311b542d1a0b05b55abc7ef41927508bd', slot: `${this.tableId}-head` }, h("thead", { key: '6d17753988ecd02d900d8a3bd7f2115b534b68a7', class: {
                 'thead': true,
                 'thead--sticky': this._stickyHeader,
-            } }, h("tr", { key: 'cd6388d79e9a4a5d9edbbda05601abbbefcb1ff4', class: "tr" }, this._selectable && (h("th", { key: 'fa09e82368d45e9fb1d32838ef44e609c698609d', class: {
+            } }, h("tr", { key: '9cc729603e126da2f9c8923fe29ece10c7750bb4', class: "tr" }, this._selectable && (h("th", { key: '37b2bcfa77eaf4c44465684c49ae84d566acc18b', class: {
                 'th': true,
                 'th--selected': true,
                 'sticky-left': true,
                 'sticky-left-edge': stickyLeftCount === 0,
                 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
-            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '5ab4861aecfac9495101363d5bd809d077c7dbc3', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
+            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '4284894821640ee1bdbd12b1759efb01e6c06488', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
                 'th': true,
                 [`${col.thClass}`]: Boolean(col.thClass),
                 'sticky-left': true,

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

@@ -11,6 +11,9 @@ sd-tr * {
 .tr:hover .td {
   background-color: #F9F9F9;
 }
+.tr--no-hover:hover .td {
+  background-color: white;
+}
 
 .td {
   display: table-cell;
@@ -108,4 +111,9 @@ sd-tr * {
 .tr:hover .td.sticky-left,
 .tr:hover .td.sticky-right {
   background-color: #F9F9F9;
+}
+
+.tr--no-hover:hover .td.sticky-left,
+.tr--no-hover:hover .td.sticky-right {
+  background-color: white;
 }