@sellmate/design-system 1.0.76 → 1.0.78

package/dist/esm/sd-table.config-Bj-EEo7N.js

@@ -0,0 +1,94 @@
+import { s as systemTokens } from './system-CZ4ltUOw.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: 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,
+};
+const resolveTableIconColor = (name, override) => override ?? ICON_DEFAULT_COLOR[name];
+const resolveSortIconName = (sort) => sort === 'asc' ? 'arrowDown' : sort === 'desc' ? 'arrowUp' : 'updown';
+
+export { TABLE_BODY_TYPOGRAPHY as T, TABLE_BORDER as a, TABLE_RADIUS as b, resolveSortIconName as c, TABLE_HEADER_RESIZING_BAR as d, TABLE_HEADER_TYPOGRAPHY as e, TABLE_HEADER_COLORS as f, TABLE_HEADER_LAYOUT as g, TABLE_BODY_LAYOUT as h, resolveTableIconColor as r };

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

@@ -1,5 +1,7 @@
-import { r as registerInstance, c as createEvent, a as getElement, d as readTask, f as forceUpdate, h, H as Host } from './index-Bp7ytJz5.js';
+import { r as registerInstance, c as createEvent, a as getElement, d as readTask, f as forceUpdate, h, H as Host } from './index-Cnwbjz1F.js';
 import { T as TABLE_ID_ATTR } from './constants-sZMi_32I.js';
+import { T as TABLE_BODY_TYPOGRAPHY, a as TABLE_BORDER, b as TABLE_RADIUS } from './sd-table.config-Bj-EEo7N.js';
+import './system-CZ4ltUOw.js';
 
 const urlAlphabet =
   'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
@@ -14,7 +16,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, 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: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) {
@@ -81,6 +83,36 @@ const SdTable = class {
     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;
@@ -127,10 +159,14 @@ const SdTable = class {
         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();
     }
@@ -171,6 +207,7 @@ const SdTable = class {
         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;
         }
@@ -196,6 +233,9 @@ const SdTable = class {
         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);
@@ -531,6 +571,28 @@ const SdTable = class {
     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() {
@@ -556,9 +618,11 @@ const SdTable = class {
             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)
@@ -568,8 +632,8 @@ const SdTable = class {
                 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;
@@ -638,12 +702,10 @@ const SdTable = class {
         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() {
@@ -665,24 +727,34 @@ const SdTable = class {
     }
     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))
@@ -703,6 +775,9 @@ const SdTable = class {
         "rows": [{
                 "handleRowsChange": 0
             }],
+        "rowKey": [{
+                "handleRowKeyChange": 0
+            }],
         "tableId": [{
                 "handleTableIdChange": 0
             }],

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-Bp7ytJz5.js';
+import { r as registerInstance, c as createEvent, h } from './index-Cnwbjz1F.js';
 
 const tab = {
 	main: {
@@ -186,7 +186,7 @@ const SdTabs = class {
         };
     }
     render() {
-        return (h("div", { key: '3698b7b43e74ff053d61d5ce696b987373fd27d6', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
+        return (h("div", { key: 'ff758fbab0a594c28968074a26ad92a28cd4850b', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
             const badgeName = this.getBadgeName(tab);
             return (h("div", { key: `tab-${index}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab) }, h("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge !== undefined && tab.badge !== null && tab.badge !== '' && (h("sd-tag", { name: badgeName, label: tab.badge.toString() }))));
         })));

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-Bp7ytJz5.js';
+import { r as registerInstance, h } from './index-Cnwbjz1F.js';
 
 const tag = {
 	xs: {
@@ -170,7 +170,7 @@ const SdTag = class {
     render() {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (h("span", { key: 'def10730670f37a62fa76b507f7f15a1b1f956fc', class: "sd-tag", style: {
+        return (h("span", { key: '3e7a6602ee73f56e5709711ac735460230de7e58', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -180,7 +180,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, h("span", { key: '32082536736e20074263632aa29f36bc7709db39', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: '8da56711cb12127f96195404799581480280507f', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
 };
 SdTag.style = sdTagCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, a as getElement, f as forceUpdate, h, H as Host } from './index-Bp7ytJz5.js';
+import { r as registerInstance, a as getElement, f as forceUpdate, h, H as Host } from './index-Cnwbjz1F.js';
 import { T as TABLE_ID_ATTR } from './constants-sZMi_32I.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,20 +13,30 @@ const SdTd = class {
     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') {
@@ -36,17 +46,20 @@ const SdTd = class {
     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();
         }
     }
@@ -74,6 +87,21 @@ const SdTd = class {
         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?.();
@@ -86,7 +114,7 @@ const SdTd = class {
         }
     }
     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 watchers() { return {
         "field": [{
@@ -100,6 +128,9 @@ const SdTd = class {
             }],
         "colspan": [{
                 "handleSpanChange": 0
+            }],
+        "sdClass": [{
+                "handleSdClassChange": 0
             }]
     }; }
 };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-Bp7ytJz5.js';
+import { r as registerInstance, c as createEvent, h } from './index-Cnwbjz1F.js';
 
 const textLink = {
 	gap: "4",
@@ -71,16 +71,16 @@ const SdTextLink = class {
             '--sd-text-link-text-decoration': typo.textDecoration,
             ...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
         };
-        return (h("span", { key: '77c1aa4a4a6297af9431947b7146db2ddfad52b5', class: {
+        return (h("span", { key: '9bd62ac603764a5938f3c72bac3a8bf893dfb233', class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.icon && (h("sd-icon", { key: '6f760b3c7e0adccd2aa08cb662cca90a3d3a227b', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: '3ff017970956d8e5cb72b4d6e26d33aaf0551e76', class: labelClassName }, this.label), this.useArrow && (h("span", { key: '8332cbe3b2283ce866044e55804e35338569a38f', class: "sd-text-link__arrow", style: {
+            }, style: cssVars, onClick: this.handleClick }, this.icon && (h("sd-icon", { key: '9d63aea3c45c4962e5766e7059a166a85e7a357f', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: 'dc73d60dd1e593c597a6b5dd977db380c21ff680', class: labelClassName }, this.label), this.useArrow && (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',
-            } }, h("sd-icon", { key: '2fa166ef60f6d1ee933450146bc667ee89dad2ce', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
+            } }, h("sd-icon", { key: 'a5c8fb48e66f4a6820da1a54cedd7b1a13c5dcec', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
     }
 };
 SdTextLink.style = sdTextLinkCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Bp7ytJz5.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Cnwbjz1F.js';
 import { n as nanoid } from './index-CCwNgVmC.js';
 import { i as inputTokens } from './component.textinput-ByhWX2NK.js';
 
@@ -128,7 +128,7 @@ const SdTextarea = class {
             '--sd-system-size-field-sm-height': 'auto',
             '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
         };
-        return (h("sd-field", { key: 'a77834af45e2ca7abaa019d18b6108a51f0cf4ae', 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 }, h("div", { key: '2cbc8ef4febeab89eb336cb29d34abdbf9f2f080', class: "sd-textarea__content" }, h("textarea", { key: '3b09e30b4e42affc7f03fb8a354387b57e5ee0fe', 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 (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 }, h("div", { key: 'a36ffabff714596bf780f2a63ccfde3e02eadda7', class: "sd-textarea__content" }, 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/esm/sd-toast-container.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Bp7ytJz5.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Cnwbjz1F.js';
 
 const DEFAULT_DURATION = 4000;
 const DEFAULT_MAX_VISIBLE = 3;
@@ -232,7 +232,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 (h("div", { key: '5057793be2d6ce213edc84d58f7273248646dc19', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (h("div", { key: '925f4bf56626e8c722051afa65aa64f2a50007db', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

package/dist/esm/sd-toast.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-Bp7ytJz5.js';
+import { r as registerInstance, c as createEvent, h } from './index-Cnwbjz1F.js';
 
 const toast = {
 	icon: "16",
@@ -21,8 +21,7 @@ const toast = {
 	accent: {
 		bg: "#005CC9",
 		content: "#FFFFFF"
-	}
-};
+	}};
 var toastTokens = {
 	toast: toast
 };
@@ -55,10 +54,10 @@ const SdToast = class {
     render() {
         const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
         const iconSize = Number(TOAST_LAYOUT.iconSize);
-        return (h("div", { key: '77954c9d285339cb48032eec5eca0dcbe308affc', style: {
+        return (h("div", { key: 'f5db941adee41c3d2c57c2c7a12d94d03dcdebb6', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
-            } }, h("div", { key: '73c792f19982140f91397a3ec7d6e22914ca316f', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: 'cc140bfd043b0d0cd6a7697053f736dac707f86b', class: "sd-toast__icon" }, h("sd-icon", { key: '85f38036cd39cb4d0f4a43ef0d307ef9faa03eb1', name: this.icon, size: iconSize, color: typeConfig.content }))), h("div", { key: '4d36e34a9ccac80fc2ed01f33b1e2aa80d70c78b', class: "sd-toast__content" }, h("span", { key: '9105d37004bbde90e8a7118ca5a58a6e4d6953f5', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: 'fdaabae7d8efb6540ce770cc5783b286789cdb3c', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (h("sd-ghost-button", { key: 'c5985e50041b8f3e8c77e142fd06afaf0537de47', class: "sd-toast__close", icon: "close", intent: this.type === 'caution' ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, h("div", { key: '68362fac26744fc7e805a18c589f4aff5845edc1', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '8ec7941b469b6d0242ab68b7928a9dbf6e75bb5f', class: "sd-toast__icon" }, h("sd-icon", { key: 'c057a100de91cecc3435bfa6a95c928727eb1836', name: this.icon, size: iconSize, color: typeConfig.content }))), h("div", { key: '21e84dd6cdf7efa52611da532a0983268c7c2cb2', class: "sd-toast__content" }, h("span", { key: '99c370fe3d4a54103fbccef395afadf2923f3613', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '3ce7109c2d1f5cd03f4fcc6bb01ede14c6400734', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (h("sd-ghost-button", { key: '2cf982fd1fe538533ceff61bbdecdacd2d69e51c', class: "sd-toast__close", icon: "close", intent: this.type === 'caution' ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
 };
 SdToast.style = sdToastCss();

package/dist/esm/sd-toggle.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-Bp7ytJz5.js';
+import { r as registerInstance, c as createEvent, h } from './index-Cnwbjz1F.js';
 
 const toggle = {
 	height: "28",
@@ -118,7 +118,7 @@ const SdToggle = class {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (h("label", { key: 'e9bb126d92605cdd3a88ff1840aa79a4b66c7cf8', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '41c18a29c10ae91b84ecd6d2619a40ab99f5d151', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (h("label", { key: '9ef981165b998f43ec23f3bb1cf0ef385962d7fb', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '6b6d2a89f43036f624c7bc291b2c5aa7a93c8f0a', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/esm/{system-BgFLSKqC.js → system-CZ4ltUOw.js}

@@ -2,12 +2,18 @@ const color = {
 	bg: {
 		accent: {
 			"default": "#0075FF"}},
-	content: {
+	fg: {
 		primary: "#222222",
 		secondary: "#555555",
 		tertiary: "#888888",
 		inverse: "#FFFFFF"
-	}};
+	},
+	blue: {
+		strong: "#0075FF"},
+	darkblue: {
+		strong: "#006AC1"},
+	grey: {
+		strong: "#737373"}};
 var systemTokens = {
 	color: color
 };

package/dist/esm/{tooltipArrow-BHRQVawd.js → tooltipArrow-D8sr81Xw.js}

@@ -1,4 +1,4 @@
-import { h } from './index-Bp7ytJz5.js';
+import { h } from './index-Cnwbjz1F.js';
 
 const TooltipArrow = (props) => (h("svg", { width: "16", height: "12", viewBox: "0 0 16 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, h("path", { d: "M8.83205 10.7519C8.43623 11.3457 7.56377 11.3457 7.16795 10.7519L1.04907e-06 -1.39876e-06L16 0L8.83205 10.7519Z", fill: "currentColor" })));
 

package/dist/types/components/{sd-select-v2/sd-select-v2-list-item/sd-select-v2-list-item.d.ts → sd-select/sd-select-list-item/sd-select-list-item.d.ts}

@@ -1,7 +1,7 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { type SelectV2Option } from '../sd-select-v2.config';
-export declare class SdSelectV2ListItem {
-    option: SelectV2Option;
+import { type SelectOption } from '../sd-select.config';
+export declare class SdSelectListItem {
+    option: SelectOption;
     depth: number;
     isSelected: boolean | null;
     isFocused: boolean;
@@ -10,7 +10,7 @@ export declare class SdSelectV2ListItem {
         selected: number;
         total: number;
     };
-    listItemClick: EventEmitter<SelectV2Option>;
+    listItemClick: EventEmitter<SelectOption>;
     private get isGroup();
     private get isSelectable();
     private get depthKey();

package/dist/types/components/{sd-select-v2/sd-select-v2-list-item-search/sd-select-v2-list-item-search.d.ts → sd-select/sd-select-list-item-search/sd-select-list-item-search.d.ts}

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-export declare class SdSelectV2ListItemSearch {
+export declare class SdSelectListItemSearch {
     isScrolled: boolean;
     private searchText;
     searchFilter: EventEmitter<string>;