@sellmate/design-system 1.0.76 → 1.0.78

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: '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)));
+        return (h("label", { key: '54ebe92b29a80537e2e4380ffe096a252f883d10', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: 'd18abbbf293434f07ae7dfa18b983b47cac1b774', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: '76fef910e632b541c0b33c508e6001529df5614f', class: "sd-switch__track" }, h("div", { key: 'a66f4ecca5787f00febe19216a93ec62916e0541', class: "sd-switch__knob" })), this.label && h("span", { key: '948d2b7afc6e171ee329752cb85f8e361f6bbed8', class: "sd-switch__label" }, this.label)));
     }
     static get is() { return "sd-switch"; }
     static get originalStyleUrls() {

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

@@ -0,0 +1,80 @@
+import tableTokens from "../../tokens/generated/component.table.json";
+import systemTokens from "../../tokens/generated/system.json";
+// ── Header Tokens ──
+export const TABLE_HEADER_LAYOUT = {
+    height: tableTokens.table.header.height,
+    paddingX: tableTokens.table.header.paddingX,
+    gap: tableTokens.table.header.gap,
+};
+export 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,
+};
+export const TABLE_HEADER_COLORS = {
+    bg: tableTokens.table.header.bg,
+};
+export const TABLE_HEADER_RESIZING_BAR = {
+    color: tableTokens.table.header.resizingBar.color,
+    height: tableTokens.table.header.resizingBar.height,
+};
+// ── Body Tokens ──
+export const TABLE_BODY_LAYOUT = {
+    default: {
+        height: tableTokens.table.body.default.height,
+        paddingY: tableTokens.table.body.default.paddingY,
+    },
+    dense: {
+        height: tableTokens.table.body.dense.height,
+        paddingY: tableTokens.table.body.dense.paddingY,
+    },
+    paddingX: tableTokens.table.body.paddingX,
+    framePadding: tableTokens.table.body.frame.padding,
+};
+export 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 ──
+export const TABLE_BORDER = {
+    color: tableTokens.table.border.default,
+    width: tableTokens.table.border.width.width,
+};
+export const TABLE_RADIUS = tableTokens.table.radius;
+// ── Content Tokens ──
+export const TABLE_CONTENT = {
+    gap: tableTokens.table.content.gap,
+};
+// ── Bar Tokens ──
+export const TABLE_BAR_LAYOUT = {
+    height: tableTokens.table.bar.height,
+    sectionGap: tableTokens.table.bar.section.gap,
+    dividerHeight: tableTokens.table.bar.divider.height,
+};
+export const TABLE_BAR_COLORS = {
+    count: {
+        total: tableTokens.table.bar.count.total,
+        null: tableTokens.table.bar.count.null,
+    },
+};
+// ── KeyValue Tokens ──
+export const TABLE_KEY_VALUE = {
+    bodyPadding: tableTokens.table.keyValue.body.padding,
+    height: tableTokens.table.keyValue.height,
+};
+// ── Header Icon Color Defaults ──
+const ICON_DEFAULT_COLOR = {
+    pageEdit: systemTokens.color.darkblue.strong,
+    arrowDown: systemTokens.color.darkblue.strong,
+    arrowUp: systemTokens.color.darkblue.strong,
+    updown: systemTokens.color.grey.strong,
+    pageMove: systemTokens.color.darkblue.strong,
+    star: systemTokens.color.blue.strong,
+};
+export const resolveTableIconColor = (name, override) => override ?? ICON_DEFAULT_COLOR[name];
+export const resolveSortIconName = (sort) => sort === 'asc' ? 'arrowDown' : sort === 'desc' ? 'arrowUp' : 'updown';

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

@@ -24,12 +24,12 @@ sd-table *,
   width: 100%;
   min-width: 0;
   height: var(--table-container-height, 400px);
-  border: 1px solid #E1E1E1;
-  border-radius: 8px;
+  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: 8px 8px 0 0;
+  border-radius: var(--table-radius, 8px) var(--table-radius, 8px) 0 0;
 }
 
 .sd-table__wrapper {
@@ -38,7 +38,11 @@ sd-table *,
   display: flex;
   flex-direction: column;
   position: relative;
-  font-size: 12px;
+  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;
 }
@@ -57,12 +61,16 @@ sd-table *,
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 12px;
+  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;
@@ -121,11 +129,11 @@ sd-table *,
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid #E1E1E1;
+  border: var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);
   border-top: none;
-  border-radius: 0 0 8px 8px;
+  border-radius: 0 0 var(--table-radius, 8px) var(--table-radius, 8px);
 }
-.sd-table__pagination sd-select-v2 {
+.sd-table__pagination sd-select {
   position: absolute;
   right: 10px;
   top: 50%;

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

@@ -1,6 +1,7 @@
 import { h, Host, readTask, forceUpdate, } from "@stencil/core";
 import { nanoid } from "nanoid";
 import { TABLE_ID_ATTR, } from "./constants";
+import { TABLE_RADIUS, TABLE_BORDER, TABLE_BODY_TYPOGRAPHY } from "./sd-table.config";
 export class SdTable {
     static DEFAULT_NO_DATA_LABEL = '데이터가 없습니다.';
     el;
@@ -58,6 +59,36 @@ export class SdTable {
     onScroll;
     // 키: `${rowKey}::${field}` → { rowspan, colspan }
     spanRegistry = new Map();
+    // 키: `${rowKey}::${field}` → sd-td의 sdClass 문자열
+    // sd-tr가 td를 그릴 때 머지해서 셀-단위 커스텀 클래스를 적용한다.
+    cellClassRegistry = new Map();
+    // rowKey 문자열 → rows 배열에서의 visual index.
+    // rowspan 위쪽 행 스캔에서 "내 위에 있느냐"를 판정하기 위한 시각적 순서 소스.
+    // rows prop이 있으면 채워지고, 없으면 비어 있어 Number(rowKey) fallback이 사용된다.
+    rowIndexMap = new Map();
+    rebuildRowIndexMap() {
+        this.rowIndexMap.clear();
+        if (!Array.isArray(this.rows))
+            return;
+        const field = this.rowKey;
+        this.rows.forEach((r, i) => {
+            const k = r?.[field];
+            if (k == null)
+                return;
+            this.rowIndexMap.set(String(k), i);
+        });
+    }
+    // rowKey의 시각적 행 인덱스를 돌려준다.
+    // 1) rows 기반 맵에 있으면 그 값 (임의 문자열 rowKey 지원)
+    // 2) 없으면 Number(rowKey) fallback (rows prop 없이 슬롯-온리 + 숫자 rowKey 사용 패턴)
+    // 3) 둘 다 안 되면 null — rowspan 평가 스킵
+    resolveRowIndex(rowKey) {
+        const fromMap = this.rowIndexMap.get(rowKey);
+        if (fromMap !== undefined)
+            return fromMap;
+        const n = Number(rowKey);
+        return Number.isFinite(n) ? n : null;
+    }
     toFiniteNumber(value, fallback) {
         const n = typeof value === 'number' ? value : Number(value);
         return Number.isFinite(n) ? n : fallback;
@@ -104,10 +135,14 @@ export class SdTable {
         if (!Array.isArray(newRows))
             return;
         this.rowCount = newRows.length;
+        this.rebuildRowIndexMap();
         if (this.useVirtualScroll)
             this.propagateVirtualUpdate(true);
         this.pushRowsToChildren(newRows);
     }
+    handleRowKeyChange() {
+        this.rebuildRowIndexMap();
+    }
     handleTableIdChange() {
         this.syncTableIdAttribute();
     }
@@ -148,6 +183,7 @@ export class SdTable {
         this.detectChildren();
         this.innerSelected = new Set(this.selected || []);
         this.columnWidths = (this.columns || []).map(c => parseInt(c.width || '120', 10));
+        this.rebuildRowIndexMap();
         if (this.pagination?.page) {
             this.currentPage = this.pagination.page;
         }
@@ -173,6 +209,9 @@ export class SdTable {
         el.getSpanSync = this.getSpanSync.bind(this);
         el.isCoveredSync = this.isCoveredSync.bind(this);
         el.hasRowspanSync = this.hasRowspanSync.bind(this);
+        el.registerCellClassSync = this.registerCellClassSync.bind(this);
+        el.unregisterCellClassSync = this.unregisterCellClassSync.bind(this);
+        el.getCellClassSync = this.getCellClassSync.bind(this);
         if (Array.isArray(this.rows)) {
             this.rowCount = this.rows.length;
             this.pushRowsToChildren(this.rows);
@@ -508,6 +547,28 @@ export class SdTable {
     getSpanSync(rowKey, field) {
         return this.spanRegistry.get(this.spanKey(rowKey, field));
     }
+    // sd-td의 sdClass 등록. 빈/공백만 있는 값은 해제로 취급.
+    // span과 달리 다른 셀에 영향이 없으므로 형제 sd-tr 전체를 재렌더하지 않고,
+    // sd-td 쪽에서 자기 부모 tr만 bumpSpansVersion으로 새로 그린다.
+    registerCellClassSync(rowKey, field, cls) {
+        if (rowKey == null || !field)
+            return;
+        const key = this.spanKey(rowKey, field);
+        const safe = (cls ?? '').trim();
+        if (!safe) {
+            this.cellClassRegistry.delete(key);
+            return;
+        }
+        this.cellClassRegistry.set(key, safe);
+    }
+    unregisterCellClassSync(rowKey, field) {
+        if (rowKey == null || !field)
+            return;
+        this.cellClassRegistry.delete(this.spanKey(rowKey, field));
+    }
+    getCellClassSync(rowKey, field) {
+        return this.cellClassRegistry.get(this.spanKey(rowKey, field));
+    }
     // 레지스트리에 rowspan>1 항목이 하나라도 있으면 true.
     // hover 동작을 끌지 결정하는 데 사용 — colspan만 있는 경우는 그대로 hover 유지.
     hasRowspanSync() {
@@ -533,9 +594,11 @@ export class SdTable {
             if (i + span.colspan > colIdx)
                 return true;
         }
-        // 2. 위쪽 행 스캔 — 숫자 변환 가능한 rowKey만 rowspan 평가
-        const myRowIdx = Number(rowKey);
-        if (!Number.isFinite(myRowIdx))
+        // 2. 위쪽 행 스캔 — rows 기반 visual index로 "내 위에 있느냐" 판정
+        //    rows prop이 있으면 rowIndexMap로 임의 문자열 rowKey 지원,
+        //    없으면 Number(rowKey) fallback (resolveRowIndex가 처리)
+        const myRowIdx = this.resolveRowIndex(rowKey);
+        if (myRowIdx == null)
             return false;
         for (const [key, span] of this.spanRegistry) {
             if (span.rowspan <= 1)
@@ -545,8 +608,8 @@ export class SdTable {
                 continue;
             const otherRowKey = key.slice(0, sepIdx);
             const otherField = key.slice(sepIdx + 2);
-            const otherRowIdx = Number(otherRowKey);
-            if (!Number.isFinite(otherRowIdx))
+            const otherRowIdx = this.resolveRowIndex(otherRowKey);
+            if (otherRowIdx == null)
                 continue;
             if (otherRowIdx >= myRowIdx)
                 continue;
@@ -615,12 +678,10 @@ export class SdTable {
         const allRows = this.rows ?? [];
         const pageInfo = this.getPaginationInfoSync();
         const startIdx = pageInfo?.startIndex ?? 0;
-        const displayed = pageInfo
-            ? allRows.slice(pageInfo.startIndex, pageInfo.endIndex)
-            : allRows;
+        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 }));
+            return h("sd-tr", { key: absoluteIdx, "row-key": String(absoluteIdx), row: row });
         });
     }
     get tableClasses() {
@@ -642,24 +703,34 @@ export class SdTable {
     }
     render() {
         const resolvedTableId = this.getResolvedTableId();
-        return (h(Host, { key: 'd73cd690ad11ce92af37b6f32374f6f891c5b677' }, h("div", { key: 'f51d23212885ad8121b9a4e895fb854f1e142bc4', class: "sd-table__container", style: {
+        const hostStyle = {
+            '--table-radius': `${TABLE_RADIUS}px`,
+            '--table-border-color': TABLE_BORDER.color,
+            '--table-border-width': `${TABLE_BORDER.width}px`,
+            '--table-body-font-family': TABLE_BODY_TYPOGRAPHY.fontFamily,
+            '--table-body-font-weight': TABLE_BODY_TYPOGRAPHY.fontWeight,
+            '--table-body-font-size': `${TABLE_BODY_TYPOGRAPHY.fontSize}px`,
+            '--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
+            '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
+        };
+        return (h(Host, { key: 'c20a7cc6d5917c9d09c699f2c40ac2b6d07747e1', style: hostStyle }, h("div", { key: '94f76e75da5c6ff9d0ef93b6c2aa3def4ec1766e', 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: '84b1ba7b2220ff55304b9c19e59304ca2257cff0', class: {
+            } }, h("div", { key: '3b98c828c7dc42de3d4f9bb645279b20d9079ac4', class: {
                 'sd-table__clip': true,
                 'sd-table__clip--has-pagination': !!(this.pagination &&
                     this.pagination.rowsPerPage > 0 &&
                     this.rowCount > 0 &&
                     !this.useVirtualScroll),
-            } }, h("div", { key: 'c901eba67eae29515bf0b3edcc6632b2aacf0f80', class: {
+            } }, h("div", { key: 'b6d04ec953d7b75fb8ad8bc32e2662550d38c5c7', 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: '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.isLoading && (h("div", { key: '3050275c7ecde0aeda3ec881257be4334ebd06fc', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '7a26c4365e4e28a5ebce1c35bb52a302440542f7', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (h("div", { key: '31442f92321eb4aaf5c36c5995a1c25d8069b6ea', class: "sd-table__no-data" }, h("slot", { key: '42f3208fb1c86d118f50e8b1974bff3ede253032', name: "no-data" }, h("span", { key: 'ce7368c64b3502eee2fae7a28e0508d4d1622c25' }, this.resolvedNoDataLabel)))), h("table", { key: '170203f34b4bb11fce0a064622265d093ccbab2a', 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: '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.useVirtualScroll && (h("div", { key: 'cfbd5ee8e706c9ef7a2b6a4be8901b7aae47249e', class: "sd-table__pagination" }, h("sd-pagination", { key: '57dad16199d9145fcec0c5ed46beeeac1f08af02', 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", { key: '1314e296ba913600436045b4af54eb0bc1d95d0d', value: this.useInternalPagination
                 ? this.innerRowsPerPage
                 : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
                 if (!this.isRowsPerPageValue(e.detail))
@@ -1418,6 +1489,9 @@ export class SdTable {
             }, {
                 "propName": "rows",
                 "methodName": "handleRowsChange"
+            }, {
+                "propName": "rowKey",
+                "methodName": "handleRowKeyChange"
             }, {
                 "propName": "tableId",
                 "methodName": "handleTableIdChange"

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

@@ -7,12 +7,4 @@
 
 .tbody {
   display: table-row-group;
-}
-.tbody--empty .tbody__no-data-row {
-  display: table-row;
-}
-.tbody--empty .tbody__no-data-cell {
-  display: table-cell;
-  padding: 0;
-  border-bottom: none;
 }

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

@@ -45,12 +45,11 @@ export class SdTbody {
         }
     }
     render() {
-        const hasRows = this.rows.length > 0;
-        return (h(Host, { key: 'bc9fbd4f08f4d77da60b083dceef4e24e2fb5532', slot: `${this.tableId}-body` }, h("tbody", { key: '81ef875cbc39f988021a211ede716a98d3ea30cd', class: { 'tbody': true, 'tbody--empty': !hasRows } }, hasRows ? ([
+        return (h(Host, { key: 'e474bc09fdec9d48d978ec87620b161220b5236c', slot: `${this.tableId}-body` }, h("tbody", { key: 'c74261b3f30c43e8ac8c3bdea1180f17bfc7dbc8', class: { tbody: true } }, [
             this.topSpacerHeight > 0 && (h("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
-            h("slot", null),
+            h("slot", { key: 'f686e7e8fa81e725a32592a58267d0b5cd7551e6' }),
             this.bottomSpacerHeight > 0 && (h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
-        ]) : (h("tr", { class: "tbody__no-data-row" }, h("td", { class: "tbody__no-data-cell", colSpan: 100 }, h("slot", { name: "no-data" })))))));
+        ])));
     }
     static get is() { return "sd-tbody"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,20 +7,30 @@ export class SdTd {
     align;
     rowspan;
     colspan;
-    handleFieldChange() {
+    // sd-tr가 그리는 실제 <td>에 머지될 사용자 클래스.
+    // <sd-td> 호스트는 display:contents라 호스트의 class는 시각 효과가 없기 때문에,
+    // 이 prop을 통해 sd-table 레지스트리에 등록 → sd-tr가 td 렌더 시 합쳐 사용한다.
+    sdClass;
+    handleFieldChange(_newField, oldField) {
         this.syncSlotName();
         this.syncSpanRegistration();
+        this.syncCellClassRegistration(oldField);
     }
-    handleRowKeyChange() {
+    handleRowKeyChange(_newKey, oldKey) {
         this.syncSlotName();
         this.syncSpanRegistration();
+        this.syncCellClassRegistration(undefined, oldKey);
     }
     handleSpanChange() {
         this.syncSpanRegistration();
     }
+    handleSdClassChange() {
+        this.syncCellClassRegistration();
+    }
     componentWillLoad() {
         this.syncSlotName();
         this.syncSpanRegistration();
+        this.syncCellClassRegistration();
         // slot 타이밍 엇갈림 대응: 부모 sd-tr forceUpdate로 슬롯 재매칭
         const parentTr = this.el.parentElement;
         if (parentTr?.tagName?.toLowerCase() === 'sd-tr') {
@@ -30,17 +40,20 @@ export class SdTd {
     componentDidLoad() {
         this.syncSlotName();
         this.syncSpanRegistration();
+        this.syncCellClassRegistration();
     }
     // React StrictMode에서는 disconnect/reconnect 사이클이 일어나면서
     // 동일 인스턴스의 componentWillLoad는 더 이상 호출되지 않는다.
     // 재연결 시점에도 등록 상태를 복구해야 rowspan/colspan이 유지된다.
     connectedCallback() {
         this.syncSpanRegistration();
+        this.syncCellClassRegistration();
     }
     disconnectedCallback() {
         const table = this.findTable();
-        if (table?.unregisterSpanSync && this.field && this.rowKey != null) {
-            table.unregisterSpanSync(String(this.rowKey), this.field);
+        if (table && this.field && this.rowKey != null) {
+            table.unregisterSpanSync?.(String(this.rowKey), this.field);
+            table.unregisterCellClassSync?.(String(this.rowKey), this.field);
             this.requestParentTrUpdate();
         }
     }
@@ -68,6 +81,21 @@ export class SdTd {
         table.registerSpanSync(String(this.rowKey), this.field, rs, cs);
         this.requestParentTrUpdate();
     }
+    // field/rowKey가 바뀌면 이전 키에 등록된 클래스가 남으므로 먼저 해제하고 새 키로 등록한다.
+    syncCellClassRegistration(prevField, prevRowKey) {
+        const table = this.findTable();
+        if (!table)
+            return;
+        const oldField = prevField ?? this.field;
+        const oldRowKey = prevRowKey ?? (this.rowKey != null ? String(this.rowKey) : undefined);
+        if (oldField && oldRowKey != null) {
+            table.unregisterCellClassSync?.(oldRowKey, oldField);
+        }
+        if (!table.registerCellClassSync || !this.field || this.rowKey == null)
+            return;
+        table.registerCellClassSync(String(this.rowKey), this.field, this.sdClass);
+        this.requestParentTrUpdate();
+    }
     syncSlotName() {
         const table = this.el.closest('sd-table');
         const fromMethod = table?.getTableIdSync?.();
@@ -80,7 +108,7 @@ export class SdTd {
         }
     }
     render() {
-        return (h(Host, { key: 'da9ce2edb986d4b3cf1a6e5f59030009f1288250', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: '8514071bd38c4f5b1997ae7239b8585a25f97ce0' })));
+        return (h(Host, { key: '84ce2fe2ea8ccb3eaf09e4d2559fc917bdb1077a', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: '9b8164a2eac53b927bf59638cb53c35998a75cfe' })));
     }
     static get is() { return "sd-td"; }
     static get originalStyleUrls() {
@@ -189,6 +217,25 @@ export class SdTd {
                 "setter": false,
                 "reflect": false,
                 "attribute": "colspan"
+            },
+            "sdClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sd-class"
             }
         };
     }
@@ -206,6 +253,9 @@ export class SdTd {
             }, {
                 "propName": "colspan",
                 "methodName": "handleSpanChange"
+            }, {
+                "propName": "sdClass",
+                "methodName": "handleSdClassChange"
             }];
     }
 }

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

@@ -7,7 +7,7 @@ sd-thead * {
 
 .thead {
   display: table-header-group;
-  height: 36px;
+  height: var(--table-header-height, 36px);
 }
 .thead--sticky {
   position: sticky;
@@ -22,12 +22,16 @@ sd-thead * {
 
 .th {
   display: table-cell;
-  background: #F5FAFF;
-  height: 36px;
-  padding: 0 16px;
-  font-weight: 500;
+  background: var(--table-header-bg, #F5FAFF);
+  height: var(--table-header-height, 36px);
+  padding: 0 var(--table-header-padding-x, 16px);
+  font-family: var(--table-header-font-family, inherit);
+  font-weight: var(--table-header-font-weight, 500);
+  font-size: var(--table-header-font-size, 12px);
+  line-height: var(--table-header-line-height, 20px);
+  text-decoration: var(--table-header-text-decoration, none);
   vertical-align: middle;
-  border-bottom: 1px solid #E1E1E1;
+  border-bottom: var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);
   -webkit-user-select: none;
   user-select: none;
   position: relative;
@@ -54,13 +58,13 @@ sd-thead * {
 }
 .th.sticky-left {
   position: sticky;
-  background-color: #F5FAFF;
+  background-color: var(--table-header-bg, #F5FAFF);
   z-index: 110 !important;
   left: var(--sticky-left-offset, 0);
 }
 .th.sticky-right {
   position: sticky;
-  background-color: #F5FAFF;
+  background-color: var(--table-header-bg, #F5FAFF);
   z-index: 110 !important;
   right: var(--sticky-right-offset, 0);
 }
@@ -112,7 +116,7 @@ sd-thead * {
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
-  gap: 4px;
+  gap: var(--table-header-gap, 4px);
 }
 .th__content--left {
   justify-content: flex-start;
@@ -135,11 +139,11 @@ sd-thead * {
   right: 0;
   transform: translateY(-50%);
   width: 4px;
-  height: 16px;
+  height: var(--table-header-resizer-height, 16px);
   cursor: col-resize;
   z-index: 3;
-  border-left: 1px solid #CCCCCC;
-  border-right: 1px solid #CCCCCC;
+  border-left: var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC);
+  border-right: var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC);
 }
 .th__resizer--left {
   right: auto;