@sellmate/design-system 1.0.78 → 1.2.0

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index--F2wGuAi.js');
+var index = require('./index-Cw-78mnC.js');
 
 var switchTokens = {
 	"switch": {
@@ -102,7 +102,7 @@ const SdSwitch = class {
             '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
             '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
         };
-        return (index.h("label", { key: '54ebe92b29a80537e2e4380ffe096a252f883d10', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, index.h("input", { key: 'd18abbbf293434f07ae7dfa18b983b47cac1b774', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), index.h("div", { key: '76fef910e632b541c0b33c508e6001529df5614f', class: "sd-switch__track" }, index.h("div", { key: 'a66f4ecca5787f00febe19216a93ec62916e0541', class: "sd-switch__knob" })), this.label && index.h("span", { key: '948d2b7afc6e171ee329752cb85f8e361f6bbed8', class: "sd-switch__label" }, this.label)));
+        return (index.h("label", { key: 'a37c1387905456007de46a6050616b025ad06b37', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, index.h("input", { key: '5fcc9f72e177956e015e4cb009936edc60c4c3ec', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), index.h("div", { key: 'bf1fa22a94b2b245a2ddf805df4cd1c204524710', class: "sd-switch__track" }, index.h("div", { key: '11dafcd812c560acb7a63f7267f40f8ed67da95b', class: "sd-switch__knob" })), this.label && index.h("span", { key: '6609d2e33e82e843ffd5bbb2d2010de3e299f081', class: "sd-switch__label" }, this.label)));
     }
 };
 SdSwitch.style = sdSwitchCss();

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

@@ -1,11 +1,12 @@
 'use strict';
 
-var index = require('./index--F2wGuAi.js');
+var index = require('./index-Cw-78mnC.js');
 var constants = require('./constants-DJRV1upE.js');
-var sdTable_config = require('./sd-table.config-Cb0Ot3C6.js');
-require('./system-DpTN1vBC.js');
+var sdTable_config = require('./sd-table.config-BIpldZtw.js');
+require('./component.table-CMqGfEui.js');
+require('./system-VmZRYp6V.js');
 
-const urlAlphabet =
+let urlAlphabet =
   'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
 
 /* @ts-self-types="./index.d.ts" */
@@ -18,7 +19,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: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 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__wrapper{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__wrapper--radius-use-top{border-radius:0 0 var(--table-radius, 8px) var(--table-radius, 8px)}.sd-table__scroll-container{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__scroll-container--loading{overflow:hidden !important;pointer-events:none}.sd-table__scroll-container--no-data{overflow:hidden;pointer-events:none}.sd-table__no-data{position:absolute;top:36px;left:0;right:0;bottom: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-header-overlay{position:absolute;top:0;left:0;right:0;height:36px;background:rgba(255, 255, 255, 0.6);z-index:210;pointer-events:none}.sd-table__no-data-content{pointer-events:auto;min-height:60px;width:100%;display:flex;align-items:center;justify-content:center}.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);margin-top:-1px;border-radius:var(--table-radius, 8px)}.sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}`;
 
 const SdTable = class {
     constructor(hostRef) {
@@ -43,15 +44,22 @@ const SdTable = class {
     height;
     stickyHeader = false;
     stickyColumn = { left: 0, right: 0 };
+    radius = 'default';
     noDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
     resolvedNoDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
     isLoading = false;
     pagination;
     useInternalPagination = false;
     useRowsPerPageSelect = false;
+    dense = false;
     // ─── Virtual Scroll ───────────────────────────────────────────────
     useVirtualScroll = false;
-    rowHeight = 40;
+    rowHeight;
+    get effectiveRowHeight() {
+        if (this.rowHeight != null)
+            return this.rowHeight;
+        return this.dense ? Number(sdTable_config.TABLE_BODY_LAYOUT.dense.height) : Number(sdTable_config.TABLE_BODY_LAYOUT.default.height);
+    }
     virtualBuffer = 5;
     virtualEndThreshold = 10;
     // ─────────────────────────────────────────────────────────────────
@@ -74,6 +82,7 @@ const SdTable = class {
     scrolledRight = false;
     rowCount = 0;
     loadingScrollTop = 0;
+    noDataBodyHeight = 60;
     // light DOM에 sd-thead / sd-tbody 자식이 없으면 sd-table이 직접 렌더해야 함을 알리는 플래그.
     // componentWillLoad에서 한 번 결정되며, 이후 동적 토글은 지원하지 않는다.
     autoThead = false;
@@ -82,12 +91,19 @@ const SdTable = class {
     vsEnd = 0;
     lastReachEndNotifiedRowCount = -1;
     scrollContainer = null;
+    noDataContentEl = null;
+    noDataContentResizeObserver;
     onScroll;
     // 키: `${rowKey}::${field}` → { rowspan, colspan }
     spanRegistry = new Map();
+    // rowKey → Set<field>: useFrame=true인 sd-td가 있는 행을 추적한다.
+    // 하나라도 등록되면 해당 행은 dense를 무시하고 default 레이아웃으로 렌더된다.
+    useFrameRegistry = new Map();
     // 키: `${rowKey}::${field}` → sd-td의 sdClass 문자열
     // sd-tr가 td를 그릴 때 머지해서 셀-단위 커스텀 클래스를 적용한다.
     cellClassRegistry = new Map();
+    // separator 직전 행의 시각적 인덱스 집합
+    separatorPrevIndices = new Set();
     // rowKey 문자열 → rows 배열에서의 visual index.
     // rowspan 위쪽 행 스캔에서 "내 위에 있느냐"를 판정하기 위한 시각적 순서 소스.
     // rows prop이 있으면 채워지고, 없으면 비어 있어 Number(rowKey) fallback이 사용된다.
@@ -146,6 +162,7 @@ const SdTable = class {
         if (newVal) {
             this.loadingScrollTop = this.scrollContainer?.scrollTop ?? 0;
         }
+        this.syncNoDataContentObserver();
     }
     handleUseVirtualScrollChange(newVal) {
         if (newVal) {
@@ -154,7 +171,7 @@ const SdTable = class {
         }
     }
     handleColumnsChange(newCols) {
-        this.columnWidths = newCols.map(c => parseInt(c.width || '120', 10));
+        this.columnWidths = newCols.map(c => (c.autoWidth ? 0 : parseInt(c.width || '120', 10)));
         this.refreshChildrenConfig();
     }
     handleRowsChange(newRows) {
@@ -165,6 +182,7 @@ const SdTable = class {
         if (this.useVirtualScroll)
             this.propagateVirtualUpdate(true);
         this.pushRowsToChildren(newRows);
+        this.syncNoDataContentObserver();
     }
     handleRowKeyChange() {
         this.rebuildRowIndexMap();
@@ -190,10 +208,10 @@ const SdTable = class {
         this.innerSelected = new Set(newSelected);
     }
     handlePaginationChange(newVal) {
-        if (newVal?.page && newVal.page !== this.currentPage) {
+        if (newVal?.page != null && newVal.page !== this.currentPage) {
             this.currentPage = newVal.page;
         }
-        if (newVal?.rowsPerPage && newVal.rowsPerPage !== this.innerRowsPerPage) {
+        if (newVal?.rowsPerPage != null && newVal.rowsPerPage !== this.innerRowsPerPage) {
             this.innerRowsPerPage = newVal.rowsPerPage;
         }
     }
@@ -208,12 +226,12 @@ const SdTable = class {
         this.handleNoDataLabelChange(this.noDataLabel);
         this.detectChildren();
         this.innerSelected = new Set(this.selected || []);
-        this.columnWidths = (this.columns || []).map(c => parseInt(c.width || '120', 10));
+        this.columnWidths = (this.columns || []).map(c => c.autoWidth ? 0 : parseInt(c.width || '120', 10));
         this.rebuildRowIndexMap();
-        if (this.pagination?.page) {
+        if (this.pagination?.page != null) {
             this.currentPage = this.pagination.page;
         }
-        if (this.pagination?.rowsPerPage) {
+        if (this.pagination?.rowsPerPage != null) {
             this.innerRowsPerPage = this.pagination.rowsPerPage;
         }
         const el = this.el;
@@ -234,10 +252,17 @@ const SdTable = class {
         el.unregisterSpanSync = this.unregisterSpanSync.bind(this);
         el.getSpanSync = this.getSpanSync.bind(this);
         el.isCoveredSync = this.isCoveredSync.bind(this);
+        el.isVisualLastRowSync = this.isVisualLastRowSync.bind(this);
+        el.registerSeparatorSync = this.registerSeparatorSync.bind(this);
+        el.unregisterSeparatorSync = this.unregisterSeparatorSync.bind(this);
+        el.isVisualLastRowBeforeSeparatorSync = this.isVisualLastRowBeforeSeparatorSync.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);
+        el.registerUseFrameSync = this.registerUseFrameSync.bind(this);
+        el.unregisterUseFrameSync = this.unregisterUseFrameSync.bind(this);
+        el.hasUseFrameInRowSync = this.hasUseFrameInRowSync.bind(this);
         if (Array.isArray(this.rows)) {
             this.rowCount = this.rows.length;
             this.pushRowsToChildren(this.rows);
@@ -248,7 +273,7 @@ const SdTable = class {
             this.pushRowsToChildren(this.rows);
         }
         index.readTask(() => {
-            const wrapper = this.el.shadowRoot?.querySelector('.sd-table__wrapper');
+            const wrapper = this.el.shadowRoot?.querySelector('.sd-table__scroll-container');
             if (!wrapper)
                 return;
             let rafPending = false;
@@ -280,11 +305,43 @@ const SdTable = class {
                 this.propagateVirtualUpdate(); // 초기 렌더
             }
         });
+        this.syncNoDataContentObserver();
     }
     disconnectedCallback() {
         if (this.scrollContainer && this.onScroll) {
             this.scrollContainer.removeEventListener('scroll', this.onScroll);
         }
+        this.noDataContentResizeObserver?.disconnect();
+        this.noDataContentResizeObserver = undefined;
+    }
+    syncNoDataContentObserver() {
+        const isNoData = this.rowCount === 0 && !this.isLoading;
+        if (!isNoData) {
+            this.noDataContentResizeObserver?.disconnect();
+            this.noDataContentResizeObserver = undefined;
+            this.noDataBodyHeight = 60;
+            return;
+        }
+        this.observeNoDataContentHeight();
+    }
+    // observer를 붙이고 콘텐츠 높이를 측정해 noDataBodyHeight를 갱신하는 함수
+    observeNoDataContentHeight() {
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const target = this.noDataContentEl;
+        if (!target)
+            return;
+        this.noDataContentResizeObserver?.disconnect();
+        this.noDataContentResizeObserver = new ResizeObserver(() => {
+            const measured = Math.ceil(target.scrollHeight);
+            const nextHeight = Math.max(60, measured);
+            if (nextHeight !== this.noDataBodyHeight) {
+                this.noDataBodyHeight = nextHeight;
+            }
+        });
+        this.noDataContentResizeObserver.observe(target);
+        const measured = Math.ceil(target.scrollHeight);
+        this.noDataBodyHeight = Math.max(60, measured);
     }
     // light DOM(manual mode 자식)과 shadow DOM(autoThead/autoTbody fallback) 양쪽 모두에서 자식을 찾는다.
     queryChildEl(selector) {
@@ -349,8 +406,8 @@ const SdTable = class {
             return;
         this.vsStart = start;
         this.vsEnd = end;
-        const topHeight = start * this.rowHeight;
-        const bottomHeight = Math.max(0, (this.rowCount - end) * this.rowHeight);
+        const topHeight = start * this.effectiveRowHeight;
+        const bottomHeight = Math.max(0, (this.rowCount - end) * this.effectiveRowHeight);
         const tbody = this.queryChildEl('sd-tbody');
         tbody?.setSpacersSync?.(topHeight, bottomHeight);
         if (rangeChanged) {
@@ -364,7 +421,7 @@ const SdTable = class {
     getVirtualScrollConfigSync() {
         return {
             useVirtualScroll: this.useVirtualScroll,
-            rowHeight: this.rowHeight,
+            rowHeight: this.effectiveRowHeight,
             virtualBuffer: this.virtualBuffer,
             vsStart: this.vsStart,
             vsEnd: this.vsEnd,
@@ -381,10 +438,35 @@ const SdTable = class {
             scrolledLeft: this.scrolledLeft,
             scrolledRight: this.scrolledRight,
             columnWidths: this.columnWidths,
+            dense: this.dense,
         };
     }
+    registerUseFrameSync(rowKey, field) {
+        if (rowKey == null || field === '')
+            return;
+        let fields = this.useFrameRegistry.get(rowKey);
+        if (!fields) {
+            fields = new Set();
+            this.useFrameRegistry.set(rowKey, fields);
+        }
+        fields.add(field);
+    }
+    unregisterUseFrameSync(rowKey, field) {
+        if (rowKey == null || field === '')
+            return;
+        const fields = this.useFrameRegistry.get(rowKey);
+        if (!fields)
+            return;
+        fields.delete(field);
+        if (fields.size === 0)
+            this.useFrameRegistry.delete(rowKey);
+    }
+    hasUseFrameInRowSync(rowKey) {
+        const fields = this.useFrameRegistry.get(rowKey);
+        return fields != null && fields.size > 0;
+    }
     isRowSelectedSync(row) {
-        return Array.from(this.innerSelected).some(r => r[this.rowKey] === row[this.rowKey]);
+        return Array.from(this.innerSelected).some(r => r[this.rowKey ?? 'id'] === row[this.rowKey ?? 'id']);
     }
     async isRowSelected(row) {
         return this.isRowSelectedSync(row);
@@ -393,7 +475,7 @@ const SdTable = class {
         const selectedArray = Array.from(this.innerSelected);
         const exists = this.isRowSelectedSync(row);
         const newSelected = exists
-            ? selectedArray.filter(r => r[this.rowKey] !== row[this.rowKey])
+            ? selectedArray.filter(r => r[this.rowKey ?? 'id'] !== row[this.rowKey ?? 'id'])
             : [...selectedArray, row];
         if (newSelected.length === selectedArray.length)
             return;
@@ -411,8 +493,8 @@ const SdTable = class {
             this.innerSelected = new Set([...this.innerSelected, ...pageRows]);
         }
         else {
-            const currentPageKeys = rows.map(r => r[this.rowKey]);
-            this.innerSelected = new Set([...this.innerSelected].filter(r => !currentPageKeys.includes(r[this.rowKey])));
+            const currentPageKeys = rows.map(r => r[this.rowKey ?? 'id']);
+            this.innerSelected = new Set([...this.innerSelected].filter(r => !currentPageKeys.includes(r[this.rowKey ?? 'id'])));
         }
         this.selected = Array.from(this.innerSelected);
         this.sdSelectChange.emit(Array.from(this.innerSelected));
@@ -423,7 +505,7 @@ const SdTable = class {
     }
     getIsAllCheckedSync(rows) {
         const total = rows.length;
-        const selectedCount = rows.filter(row => Array.from(this.innerSelected).some(selectedRow => selectedRow[this.rowKey] === row[this.rowKey])).length;
+        const selectedCount = rows.filter(row => Array.from(this.innerSelected).some(selectedRow => selectedRow[this.rowKey ?? 'id'] === row[this.rowKey ?? 'id'])).length;
         if (selectedCount === 0)
             return false;
         if (selectedCount === total)
@@ -446,7 +528,7 @@ const SdTable = class {
         this.queryAllTr().forEach(tr => tr?.updateVisibility?.());
     }
     changeRowsPerPage(perPage) {
-        const changedRowsPerPage = perPage ? Number(perPage) : 0;
+        const changedRowsPerPage = perPage != null && perPage !== '' ? Number(perPage) : 0;
         if (!this.useInternalPagination) {
             this.sdRowsPerPageChange.emit(changedRowsPerPage);
             return;
@@ -473,7 +555,7 @@ const SdTable = class {
         const startWidth = this.columnWidths[index];
         const handleMouseMove = (moveEvent) => {
             const col = this.columns[index];
-            if (!col)
+            if (col == null)
                 return;
             const minWidth = col.minWidth || 50;
             const maxWidth = col.maxWidth || 9999;
@@ -508,13 +590,17 @@ const SdTable = class {
             this.columns.filter(c => c.visible !== false).length -
                 (this.stickyColumn?.right || 0) && i > colIdx)
             .reduce((a, b) => a + b, 0);
-        return {
+        const visibleCol = this.columns.filter(c => c.visible !== false)[colIdx];
+        const base = {
             '--sticky-left-offset': `${leftOffset}px`,
             '--sticky-right-offset': `${rightOffset}px`,
-            'width': `${this.columnWidths[colIdx]}px`,
-            'minWidth': `${this.columnWidths[colIdx]}px`,
-            'maxWidth': `${this.columnWidths[colIdx]}px`,
         };
+        if (!visibleCol?.autoWidth) {
+            base['width'] = `${this.columnWidths[colIdx]}px`;
+            base['minWidth'] = `${this.columnWidths[colIdx]}px`;
+            base['maxWidth'] = `${this.columnWidths[colIdx]}px`;
+        }
+        return base;
     }
     async getStickyStyle(colIdx) {
         return this.getStickyStyleSync(colIdx);
@@ -543,7 +629,7 @@ const SdTable = class {
         });
     }
     registerSpanSync(rowKey, field, rowspan, colspan) {
-        if (rowKey == null || !field)
+        if (rowKey == null || field === '')
             return;
         const safeRowspan = Math.max(1, Math.floor(rowspan || 1));
         const safeColspan = Math.max(1, Math.floor(colspan || 1));
@@ -562,7 +648,7 @@ const SdTable = class {
         this.requestAllTrUpdate();
     }
     unregisterSpanSync(rowKey, field) {
-        if (rowKey == null || !field)
+        if (rowKey == null || field === '')
             return;
         const key = this.spanKey(rowKey, field);
         if (!this.spanRegistry.has(key))
@@ -577,18 +663,18 @@ const SdTable = class {
     // span과 달리 다른 셀에 영향이 없으므로 형제 sd-tr 전체를 재렌더하지 않고,
     // sd-td 쪽에서 자기 부모 tr만 bumpSpansVersion으로 새로 그린다.
     registerCellClassSync(rowKey, field, cls) {
-        if (rowKey == null || !field)
+        if (rowKey == null || field === '')
             return;
         const key = this.spanKey(rowKey, field);
         const safe = (cls ?? '').trim();
-        if (!safe) {
+        if (safe === '') {
             this.cellClassRegistry.delete(key);
             return;
         }
         this.cellClassRegistry.set(key, safe);
     }
     unregisterCellClassSync(rowKey, field) {
-        if (rowKey == null || !field)
+        if (rowKey == null || field === '')
             return;
         this.cellClassRegistry.delete(this.spanKey(rowKey, field));
     }
@@ -611,7 +697,7 @@ const SdTable = class {
         // 1. 같은 행 왼쪽 스캔 — colspan으로 이 위치를 덮는 셀이 있는가
         for (let i = 0; i < colIdx; i++) {
             const c = visibleCols[i];
-            if (!c)
+            if (c == null)
                 continue;
             const field = typeof c.field === 'string' ? c.field : c.name;
             const span = this.spanRegistry.get(this.spanKey(rowKey, field));
@@ -649,6 +735,50 @@ const SdTable = class {
         }
         return false;
     }
+    // rowspan을 반영한 셀의 시각적 하단 행 인덱스를 반환한다.
+    // isVisualLastRowSync·isVisualLastRowBeforeSeparatorSync 공통 헬퍼.
+    resolveVisualBottom(rowKey, field) {
+        const myRowIdx = this.resolveRowIndex(rowKey);
+        if (myRowIdx == null)
+            return null;
+        const span = this.spanRegistry.get(this.spanKey(rowKey, field));
+        const rs = Math.max(1, span?.rowspan ?? 1);
+        return myRowIdx + rs - 1;
+    }
+    // 셀의 시각적 하단이 테이블(또는 현재 페이지)의 마지막 행인지 판정.
+    // 마지막 행에 border-bottom: none을 적용하기 위함.
+    isVisualLastRowSync(rowKey, field) {
+        if (this.rowCount <= 0)
+            return false;
+        const visualBottom = this.resolveVisualBottom(rowKey, field);
+        if (visualBottom == null)
+            return false;
+        const pageInfo = this.getPaginationInfoSync();
+        const lastVisibleIdx = pageInfo
+            ? Math.min(pageInfo.endIndex - 1, this.rowCount - 1)
+            : this.rowCount - 1;
+        return visualBottom === lastVisibleIdx;
+    }
+    registerSeparatorSync(prevRowKey) {
+        const idx = this.resolveRowIndex(prevRowKey);
+        if (idx != null)
+            this.separatorPrevIndices.add(idx);
+    }
+    unregisterSeparatorSync(prevRowKey) {
+        const idx = this.resolveRowIndex(prevRowKey);
+        if (idx != null)
+            this.separatorPrevIndices.delete(idx);
+    }
+    // 셀의 시각적 하단이 separator 바로 앞 행인지 판정.
+    // 해당 셀에 border-bottom: none을 적용하기 위함.
+    isVisualLastRowBeforeSeparatorSync(rowKey, field) {
+        if (this.separatorPrevIndices.size === 0)
+            return false;
+        const visualBottom = this.resolveVisualBottom(rowKey, field);
+        if (visualBottom == null)
+            return false;
+        return this.separatorPrevIndices.has(visualBottom);
+    }
     setRowCountSync(count) {
         const safeCount = Math.max(0, Math.floor(this.toFiniteNumber(count, 0)));
         if (safeCount !== this.rowCount) {
@@ -663,7 +793,7 @@ const SdTable = class {
         this.setRowCountSync(count);
     }
     calculateVisibleRange(scrollTop, containerHeight) {
-        const safeRowHeight = Math.max(1, this.toFiniteNumber(this.rowHeight, 40));
+        const safeRowHeight = Math.max(1, this.toFiniteNumber(this.effectiveRowHeight, 40));
         const safeBuffer = Math.max(0, Math.floor(this.toFiniteNumber(this.virtualBuffer, 5)));
         const safeScrollTop = Math.max(0, this.toFiniteNumber(scrollTop, 0));
         const safeContainerHeight = Math.max(0, this.toFiniteNumber(containerHeight, 0));
@@ -729,6 +859,12 @@ const SdTable = class {
     }
     render() {
         const resolvedTableId = this.getResolvedTableId();
+        const isNoData = this.rowCount === 0 && !this.isLoading;
+        const paginationHeight = this.pagination && this.rowCount > 0 && !this.useVirtualScroll ? 48 : 0;
+        const noDataTotalHeight = 36 + this.noDataBodyHeight;
+        const effectiveTableHeight = isNoData
+            ? `max(${this.height || '96px'}, ${noDataTotalHeight}px)`
+            : this.height || '100%';
         const hostStyle = {
             '--table-radius': `${sdTable_config.TABLE_RADIUS}px`,
             '--table-border-color': sdTable_config.TABLE_BORDER.color,
@@ -739,24 +875,25 @@ const SdTable = class {
             '--table-body-line-height': `${sdTable_config.TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
             '--table-body-text-decoration': sdTable_config.TABLE_BODY_TYPOGRAPHY.textDecoration,
         };
-        return (index.h(index.Host, { key: 'c20a7cc6d5917c9d09c699f2c40ac2b6d07747e1', style: hostStyle }, index.h("div", { key: '94f76e75da5c6ff9d0ef93b6c2aa3def4ec1766e', class: "sd-table__container", style: {
+        return (index.h(index.Host, { key: 'f7d92943fcb354f69d99c1e4fd37749cc06185c7', style: hostStyle }, index.h("div", { key: '53d6ac0eedc2c2a56c05bf5a751be43bc18f9fe7', class: "sd-table__container", style: {
                 '--table-width': this.width,
-                '--table-height': this.height,
-                '--table-container-height': `calc(${this.height || '100%'} - ${this.pagination && this.rowCount > 0 && !this.useVirtualScroll ? 48 : 0}px)`,
-            } }, index.h("div", { key: '3b98c828c7dc42de3d4f9bb645279b20d9079ac4', class: {
-                'sd-table__clip': true,
-                'sd-table__clip--has-pagination': !!(this.pagination &&
-                    this.pagination.rowsPerPage > 0 &&
-                    this.rowCount > 0 &&
-                    !this.useVirtualScroll),
-            } }, index.h("div", { key: 'b6d04ec953d7b75fb8ad8bc32e2662550d38c5c7', class: {
+                '--table-height': effectiveTableHeight,
+                '--table-container-height': `calc(${effectiveTableHeight} - ${paginationHeight}px)`,
+            } }, index.h("div", { key: 'b85980b8307b2a50ee1554262d025b58bad42e87', class: {
                 'sd-table__wrapper': true,
-                'sd-table__wrapper--loading': this.isLoading,
-                'sd-table__wrapper--no-data': this.rowCount === 0 && !this.isLoading,
-            } }, this.isLoading && (index.h("div", { key: '3050275c7ecde0aeda3ec881257be4334ebd06fc', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, index.h("sd-circle-progress", { key: '7a26c4365e4e28a5ebce1c35bb52a302440542f7', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (index.h("div", { key: '31442f92321eb4aaf5c36c5995a1c25d8069b6ea', class: "sd-table__no-data" }, index.h("slot", { key: '42f3208fb1c86d118f50e8b1974bff3ede253032', name: "no-data" }, index.h("span", { key: 'ce7368c64b3502eee2fae7a28e0508d4d1622c25' }, this.resolvedNoDataLabel)))), index.h("table", { key: '170203f34b4bb11fce0a064622265d093ccbab2a', class: this.tableClasses }, this.autoThead ? (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-thead", { rows: this.rows ?? [] }))) : (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
+                'sd-table__wrapper--radius-use-top': this.radius === 'useTop',
+            } }, index.h("div", { key: 'acf9816ceaaea06b807056606d684befebe9dcd0', class: {
+                'sd-table__scroll-container': true,
+                'sd-table__scroll-container--loading': this.isLoading,
+                'sd-table__scroll-container--no-data': isNoData,
+            } }, this.isLoading && (index.h("div", { key: '8a1a18cbf500a8e9ad519438a59e084186d9f339', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, index.h("sd-circle-progress", { key: '443ffcfb06edbae8ac94be7e8e5a94c1e2b68588', indeterminate: true }))), isNoData && (index.h(index.h.Fragment, null, index.h("div", { key: '3aefe27935a816df9658ec89adf261d11c0e8e77', class: "sd-table__no-data-header-overlay" }), index.h("div", { key: 'db89a7d1cbbf041bdd30be9e0a205147073891e2', class: "sd-table__no-data" }, index.h("div", { key: 'a9bf47e80db21c30ffa651b03b203e5e205134c9', class: "sd-table__no-data-content", ref: el => {
+                this.noDataContentEl = el;
+                if (el)
+                    this.syncNoDataContentObserver();
+            } }, index.h("slot", { key: '20f0c0b43534ef344864bf2450abb4c2a8fb704b', name: "no-data" }, index.h("span", { key: 'a19688e4da7961e7c828694124819c4e60a6700f' }, this.resolvedNoDataLabel)))))), index.h("table", { key: '2b03aa5c5d59e0ac85051f90a022b59b8dbb871a', class: this.tableClasses }, this.autoThead ? (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-thead", { rows: this.rows ?? [] }))) : (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
             this.pagination.rowsPerPage > 0 &&
             this.rowCount > 0 &&
-            !this.useVirtualScroll && (index.h("div", { key: 'cfbd5ee8e706c9ef7a2b6a4be8901b7aae47249e', class: "sd-table__pagination" }, index.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 && (index.h("sd-select", { key: '1314e296ba913600436045b4af54eb0bc1d95d0d', value: this.useInternalPagination
+            !this.useVirtualScroll && (index.h("div", { key: 'dc4a0132898490ef7e87e26a75fca8e3b2056a49', class: "sd-table__pagination" }, index.h("sd-pagination", { key: '9030b0965e8d2c1a54fce07cfc4067f49edb2375', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (index.h("sd-select", { key: '0d95ba3138da081d6c15202748ff3db1e23def01', value: this.useInternalPagination
                 ? this.innerRowsPerPage
                 : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
                 if (!this.isRowsPerPageValue(e.detail))
@@ -798,6 +935,9 @@ const SdTable = class {
         "stickyHeader": [{
                 "handleConfigChange": 0
             }],
+        "dense": [{
+                "handleConfigChange": 0
+            }],
         "selected": [{
                 "handleSelectedChange": 0
             }],

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

@@ -0,0 +1,76 @@
+'use strict';
+
+var component_table = require('./component.table-CMqGfEui.js');
+var system = require('./system-VmZRYp6V.js');
+
+// ── Header Tokens ──
+const TABLE_HEADER_LAYOUT = {
+    height: component_table.tableTokens.table.header.height,
+    paddingX: component_table.tableTokens.table.header.paddingX,
+    gap: component_table.tableTokens.table.header.gap,
+};
+const TABLE_HEADER_TYPOGRAPHY = {
+    fontFamily: component_table.tableTokens.table.header.typography.fontFamily,
+    fontWeight: component_table.tableTokens.table.header.typography.fontWeight,
+    fontSize: component_table.tableTokens.table.header.typography.fontSize,
+    lineHeight: component_table.tableTokens.table.header.typography.lineHeight,
+    textDecoration: component_table.tableTokens.table.header.typography.textDecoration,
+};
+const TABLE_HEADER_COLORS = {
+    bg: component_table.tableTokens.table.header.bg,
+};
+const TABLE_HEADER_RESIZING_BAR = {
+    color: component_table.tableTokens.table.header.resizingBar.color,
+    height: component_table.tableTokens.table.header.resizingBar.height,
+};
+// ── Body Tokens ──
+const TABLE_BODY_LAYOUT = {
+    default: {
+        height: component_table.tableTokens.table.body.default.height,
+        paddingY: component_table.tableTokens.table.body.default.paddingY,
+    },
+    dense: {
+        height: component_table.tableTokens.table.body.dense.height,
+        paddingY: component_table.tableTokens.table.body.dense.paddingY,
+    },
+    paddingX: component_table.tableTokens.table.body.paddingX};
+const TABLE_BODY_TYPOGRAPHY = {
+    fontFamily: component_table.tableTokens.table.body.typography.fontFamily,
+    fontWeight: component_table.tableTokens.table.body.typography.fontWeight,
+    fontSize: component_table.tableTokens.table.body.typography.fontSize,
+    lineHeight: component_table.tableTokens.table.body.typography.lineHeight,
+    textDecoration: component_table.tableTokens.table.body.typography.textDecoration,
+};
+// ── Frame / Border Tokens ──
+const TABLE_BORDER = {
+    color: component_table.tableTokens.table.border.color,
+    width: component_table.tableTokens.table.border.width,
+};
+const TABLE_SEPARATOR = {
+    color: component_table.tableTokens.table.separator.color,
+    width: component_table.tableTokens.table.separator.Width,
+};
+const TABLE_RADIUS = component_table.tableTokens.table.radius;
+// ── Header Icon Color Defaults ──
+const ICON_DEFAULT_COLOR = {
+    pageEdit: system.systemTokens.color.darkblue.strong,
+    arrowDown: system.systemTokens.color.darkblue.strong,
+    arrowUp: system.systemTokens.color.darkblue.strong,
+    updown: system.systemTokens.color.grey.strong,
+    pageMove: system.systemTokens.color.darkblue.strong,
+    star: system.systemTokens.color.blue.strong,
+};
+const resolveTableIconColor = (name, override) => override ?? ICON_DEFAULT_COLOR[name];
+const resolveSortIconName = (sort) => sort === 'asc' ? 'arrowDown' : sort === 'desc' ? 'arrowUp' : 'updown';
+
+exports.TABLE_BODY_LAYOUT = TABLE_BODY_LAYOUT;
+exports.TABLE_BODY_TYPOGRAPHY = TABLE_BODY_TYPOGRAPHY;
+exports.TABLE_BORDER = TABLE_BORDER;
+exports.TABLE_HEADER_COLORS = TABLE_HEADER_COLORS;
+exports.TABLE_HEADER_LAYOUT = TABLE_HEADER_LAYOUT;
+exports.TABLE_HEADER_RESIZING_BAR = TABLE_HEADER_RESIZING_BAR;
+exports.TABLE_HEADER_TYPOGRAPHY = TABLE_HEADER_TYPOGRAPHY;
+exports.TABLE_RADIUS = TABLE_RADIUS;
+exports.TABLE_SEPARATOR = TABLE_SEPARATOR;
+exports.resolveSortIconName = resolveSortIconName;
+exports.resolveTableIconColor = resolveTableIconColor;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index--F2wGuAi.js');
+var index = require('./index-Cw-78mnC.js');
 
 const tab = {
 	main: {
@@ -188,9 +188,14 @@ const SdTabs = class {
         };
     }
     render() {
-        return (index.h("div", { key: 'ff758fbab0a594c28968074a26ad92a28cd4850b', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index$1) => {
+        return (index.h("div", { key: 'dd4377850ef052d22b6eb790b7766a3521a41c1c', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index$1) => {
             const badgeName = this.getBadgeName(tab);
-            return (index.h("div", { key: `tab-${index$1}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab) }, index.h("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge !== undefined && tab.badge !== null && tab.badge !== '' && (index.h("sd-tag", { name: badgeName, label: tab.badge.toString() }))));
+            return (index.h("div", { key: `tab-${index$1}`, role: "tab", tabindex: 0, "aria-selected": tab.value === this.value ? 'true' : 'false', class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab), onKeyDown: e => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        this.handleTabClick(tab);
+                    }
+                } }, index.h("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge !== undefined && tab.badge !== null && tab.badge !== '' && (index.h("sd-tag", { name: badgeName, label: tab.badge.toString() }))));
         })));
     }
     static get watchers() { return {