@sellmate/design-system 1.1.0 → 1.3.0

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, a as getElement, d as readTask, f as forceUpdate, h, H as Host } from './index-CLCoul8o.js';
+import { r as registerInstance, c as createEvent, a as getElement, d as readTask, f as forceUpdate, h, H as Host } from './index-0U6dRjlq.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-0Te8GLCI.js';
-import './component.table-BQ6at17Y.js';
+import { T as TABLE_BODY_LAYOUT, a as TABLE_BODY_TYPOGRAPHY, b as TABLE_BORDER, c as TABLE_RADIUS } from './sd-table.config-B-VgXXT7.js';
+import './component.table-BnfUIhUj.js';
 import './system-GBlVDmy4.js';
 
 let urlAlphabet =
@@ -17,7 +17,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__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;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);margin-top:-1px;border-radius: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) {
@@ -49,9 +49,15 @@ const SdTable = class {
     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(TABLE_BODY_LAYOUT.dense.height) : Number(TABLE_BODY_LAYOUT.default.height);
+    }
     virtualBuffer = 5;
     virtualEndThreshold = 10;
     // ─────────────────────────────────────────────────────────────────
@@ -74,6 +80,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 +89,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 +160,7 @@ const SdTable = class {
         if (newVal) {
             this.loadingScrollTop = this.scrollContainer?.scrollTop ?? 0;
         }
+        this.syncNoDataContentObserver();
     }
     handleUseVirtualScrollChange(newVal) {
         if (newVal) {
@@ -154,7 +169,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 +180,7 @@ const SdTable = class {
         if (this.useVirtualScroll)
             this.propagateVirtualUpdate(true);
         this.pushRowsToChildren(newRows);
+        this.syncNoDataContentObserver();
     }
     handleRowKeyChange() {
         this.rebuildRowIndexMap();
@@ -190,10 +206,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 +224,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;
@@ -235,10 +251,16 @@ const SdTable = class {
         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);
@@ -281,11 +303,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) {
@@ -350,8 +404,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) {
@@ -365,7 +419,7 @@ const SdTable = class {
     getVirtualScrollConfigSync() {
         return {
             useVirtualScroll: this.useVirtualScroll,
-            rowHeight: this.rowHeight,
+            rowHeight: this.effectiveRowHeight,
             virtualBuffer: this.virtualBuffer,
             vsStart: this.vsStart,
             vsEnd: this.vsEnd,
@@ -382,10 +436,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 ?? 'id')] === row[(this.rowKey ?? 'id')]);
+        return Array.from(this.innerSelected).some(r => r[this.rowKey ?? 'id'] === row[this.rowKey ?? 'id']);
     }
     async isRowSelected(row) {
         return this.isRowSelectedSync(row);
@@ -394,7 +473,7 @@ const SdTable = class {
         const selectedArray = Array.from(this.innerSelected);
         const exists = this.isRowSelectedSync(row);
         const newSelected = exists
-            ? selectedArray.filter(r => r[(this.rowKey ?? 'id')] !== row[(this.rowKey ?? 'id')])
+            ? selectedArray.filter(r => r[this.rowKey ?? 'id'] !== row[this.rowKey ?? 'id'])
             : [...selectedArray, row];
         if (newSelected.length === selectedArray.length)
             return;
@@ -412,8 +491,8 @@ const SdTable = class {
             this.innerSelected = new Set([...this.innerSelected, ...pageRows]);
         }
         else {
-            const currentPageKeys = rows.map(r => r[(this.rowKey ?? 'id')]);
-            this.innerSelected = new Set([...this.innerSelected].filter(r => !currentPageKeys.includes(r[(this.rowKey ?? 'id')])));
+            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));
@@ -424,7 +503,7 @@ const SdTable = class {
     }
     getIsAllCheckedSync(rows) {
         const total = rows.length;
-        const selectedCount = rows.filter(row => Array.from(this.innerSelected).some(selectedRow => selectedRow[(this.rowKey ?? 'id')] === row[(this.rowKey ?? 'id')])).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)
@@ -447,7 +526,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;
@@ -474,7 +553,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;
@@ -509,13 +588,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);
@@ -544,7 +627,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));
@@ -563,7 +646,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))
@@ -578,18 +661,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));
     }
@@ -612,7 +695,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));
@@ -650,23 +733,50 @@ const SdTable = class {
         }
         return false;
     }
-    // 셀이 시각적으로 마지막 행(또는 페이지 마지막 행)에 닿는지 판정.
-    // 마지막 행에 border-bottom: none을 적용하기 위함
-    isVisualLastRowSync(rowKey, field) {
-        if (this.rowCount <= 0)
-            return false;
+    // rowspan을 반영한 셀의 시각적 하단 행 인덱스를 반환한다.
+    // isVisualLastRowSync·isVisualLastRowBeforeSeparatorSync 공통 헬퍼.
+    resolveVisualBottom(rowKey, field) {
         const myRowIdx = this.resolveRowIndex(rowKey);
         if (myRowIdx == null)
-            return false;
+            return null;
         const span = this.spanRegistry.get(this.spanKey(rowKey, field));
         const rs = Math.max(1, span?.rowspan ?? 1);
-        const visualBottom = myRowIdx + rs - 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) {
@@ -681,7 +791,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));
@@ -747,6 +857,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': `${TABLE_RADIUS}px`,
             '--table-border-color': TABLE_BORDER.color,
@@ -757,21 +873,25 @@ const SdTable = class {
             '--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
             '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
         };
-        return (h(Host, { key: 'd868318e2aeb7b3062a702a743f90bb55dbb00b8', style: hostStyle }, h("div", { key: '5b2113ecd1fa52a6170ffcfac5f906fae7ef7548', class: "sd-table__container", style: {
+        return (h(Host, { key: '02d716bdac3832710bf58d63741aeeb4b04d434b', style: hostStyle }, h("div", { key: '88faad346e032ca727375889aa0552a330f5799a', 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: '389d7f3508727fb76d9d9f98a73963c5556ff993', class: {
+                '--table-height': effectiveTableHeight,
+                '--table-container-height': `calc(${effectiveTableHeight} - ${paginationHeight}px)`,
+            } }, h("div", { key: '783934f349e0da5bab77cbb44cc12f0dfeb9ec71', class: {
                 'sd-table__wrapper': true,
                 'sd-table__wrapper--radius-use-top': this.radius === 'useTop',
-            } }, h("div", { key: 'e9cdeecb5f318cb1af4e0d2e938e0098e1cc44d0', class: {
+            } }, h("div", { key: 'd3a76ad0e853c6adf16df633c0e0b7f5bb580f24', class: {
                 'sd-table__scroll-container': true,
                 'sd-table__scroll-container--loading': this.isLoading,
-                'sd-table__scroll-container--no-data': this.rowCount === 0 && !this.isLoading,
-            } }, this.isLoading && (h("div", { key: '40caec779763f90e1f48818e3f56e8daabc105a6', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: 'bf7a3cabb0023f0a1663dd0337f3399ace0e75e7', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (h("div", { key: 'aac583c7876171a276645146e00afbc43d405607', class: "sd-table__no-data" }, h("slot", { key: '31e18789beeed03bcfd7013c9386eefd6f51b2cd', name: "no-data" }, h("span", { key: '07da091864e588f2ee60e8ea5ffd5ae34c968f68' }, this.resolvedNoDataLabel)))), h("table", { key: '69284f7f819477072450d1b6acbfe081abe4f1ef', 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 &&
+                'sd-table__scroll-container--no-data': isNoData,
+            } }, this.isLoading && (h("div", { key: 'cc77ce58ff0eebf3fc1d7dd9dbf11578f94d4dd1', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: 'bda7ed774342089a23d13b49a506b04527026275', indeterminate: true }))), isNoData && (h(h.Fragment, null, h("div", { key: 'f2ce89d0ae9eefe0f0f8509e477756cb74dbef86', class: "sd-table__no-data-header-overlay" }), h("div", { key: '84d739563123d0f0fc33166b1a6e80021ba06e1c', class: "sd-table__no-data" }, h("div", { key: '3507f718a25b79c44fdf283fb41356ab72f2a384', class: "sd-table__no-data-content", ref: el => {
+                this.noDataContentEl = el;
+                if (el)
+                    this.syncNoDataContentObserver();
+            } }, h("slot", { key: '818129819b2ff4a6f9fc1224dc59a9aa5861296d', name: "no-data" }, h("span", { key: 'c03cfb713e6dadd5ab4c60d7d27fd502d7aa9348' }, this.resolvedNoDataLabel)))))), h("table", { key: '8864714a828069985bac6535bc40cbb043dfcb28', 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: 'ff30e864526aa8c3fac2cc37499cea7aa6be1420', class: "sd-table__pagination" }, h("sd-pagination", { key: 'ad5badf1d5f518b0bf281e973c46b1381e82ae3c', 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: 'd249e79cfda4c80cb4df9c353dc4f678a5ccb861', value: this.useInternalPagination
+            !this.useVirtualScroll && (h("div", { key: 'bdac4b4d551152ec7ee0cdc31bfb992748836928', class: "sd-table__pagination" }, h("sd-pagination", { key: '2c60fff7f8ac3a3bd22da2173b8a9187bb686ddf', 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: '7a662f58e13c15e705341773570f899f503f12c0', value: this.useInternalPagination
                 ? this.innerRowsPerPage
                 : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
                 if (!this.isRowsPerPageValue(e.detail))
@@ -813,6 +933,9 @@ const SdTable = class {
         "stickyHeader": [{
                 "handleConfigChange": 0
             }],
+        "dense": [{
+                "handleConfigChange": 0
+            }],
         "selected": [{
                 "handleSelectedChange": 0
             }],

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-CLCoul8o.js';
+import { r as registerInstance, c as createEvent, h } from './index-0U6dRjlq.js';
 
 const tab = {
 	main: {
@@ -186,9 +186,14 @@ const SdTabs = class {
         };
     }
     render() {
-        return (h("div", { key: '9578cc6d422a304312f9ebc78622264d20d1fb45', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
+        return (h("div", { key: '880f1aa80c29f2d578ffe2d5e5e5e0c008c898d3', 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() }))));
+            return (h("div", { key: `tab-${index}`, 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);
+                    }
+                } }, 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() }))));
         })));
     }
     static get watchers() { return {

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

@@ -1,11 +1,10 @@
-import { r as registerInstance, h } from './index-CLCoul8o.js';
+import { r as registerInstance, h } from './index-0U6dRjlq.js';
 
 const tag = {
 	xs: {
 		height: "20",
 		paddingX: "8",
 		gap: "4",
-		icon: "12",
 		typography: {
 			fontSize: "11",
 			fontWeight: "500",
@@ -16,7 +15,6 @@ const tag = {
 		height: "24",
 		paddingX: "8",
 		gap: "4",
-		icon: "16",
 		typography: {
 			fontSize: "12",
 			fontWeight: "700",
@@ -28,7 +26,6 @@ const tag = {
 		height: "28",
 		paddingX: "12",
 		gap: "6",
-		icon: "16",
 		typography: {
 			fontSize: "14",
 			fontWeight: "700",
@@ -134,7 +131,7 @@ const SQUARE_SIZE_CONFIG = {
         fontSize: `${tagTokens.tag.xs.typography.fontSize}px`,
         fontWeight: tagTokens.tag.xs.typography.fontWeight,
         lineHeight: `${tagTokens.tag.xs.typography.lineHeight}px`,
-        iconSize: Number(tagTokens.tag.xs.icon),
+        iconSize: 12,
         radius: `${tagTokens.tag.xs.radius}px`,
     },
     sm: {
@@ -144,7 +141,7 @@ const SQUARE_SIZE_CONFIG = {
         fontSize: `${tagTokens.tag.sm.typography.fontSize}px`,
         fontWeight: tagTokens.tag.sm.typography.fontWeight,
         lineHeight: `${tagTokens.tag.sm.typography.lineHeight}px`,
-        iconSize: Number(tagTokens.tag.sm.icon),
+        iconSize: 16,
         radius: `${tagTokens.tag.sm.radius}px`,
     },
     md: {
@@ -154,7 +151,7 @@ const SQUARE_SIZE_CONFIG = {
         fontSize: `${tagTokens.tag.md.typography.fontSize}px`,
         fontWeight: tagTokens.tag.md.typography.fontWeight,
         lineHeight: `${tagTokens.tag.md.typography.lineHeight}px`,
-        iconSize: Number(tagTokens.tag.md.icon),
+        iconSize: 16,
         radius: `${tagTokens.tag.md.radius}px`,
     },
 };
@@ -188,6 +185,9 @@ const SdTag = class {
     label = '';
     icon;
     isLeft = true;
+    componentWillLoad() {
+        this.name = this.name ?? 'square_sm_grey';
+    }
     get resolvedName() {
         if (!isTagName(this.name)) {
             throw new Error(`Invalid sd-tag name: "${this.name}"`);
@@ -198,14 +198,14 @@ const SdTag = class {
         return TAG_CONFIG[this.resolvedName];
     }
     renderIcon(color, size) {
-        if (!this.icon)
+        if (this.icon == null)
             return null;
         return h("sd-icon", { class: "sd-tag__icon", name: this.icon, size: size, color: color });
     }
     render() {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (h("span", { key: 'a52a06f79f448427ff3fe2a40c43d23a64e8ed62', class: "sd-tag", style: {
+        return (h("span", { key: '57f3c3f9ad53059fabff205cb44ffa3d1da9a711', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -215,7 +215,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: '8e737f385a32109ab58fe4da036dbf594079f217', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: '3360f36d18f073cd24699b6b8db2e731fda351ac', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
 };
 SdTag.style = sdTagCss();