@sellmate/design-system 1.1.0 → 1.2.0

package/dist/collection/components/sd-select/sd-select-trigger/sd-select-trigger.js

@@ -26,7 +26,7 @@ export class SdSelectTrigger {
         this.triggerBlur.emit();
     };
     render() {
-        const hasValue = !!this.displayText;
+        const hasValue = this.displayText !== '';
         const cssVars = {
             '--trigger-padding-x': `${SELECT_LAYOUT.paddingX}px`,
             '--trigger-gap': `${SELECT_LAYOUT.gap}px`,
@@ -42,13 +42,18 @@ export class SdSelectTrigger {
                 ? SELECT_COLORS.icon.disabled
                 : SELECT_COLORS.icon.default,
         };
-        return (h("div", { key: '69a87c509e16605feb217f12ce055e0097f09a6f', ref: el => {
+        return (h("div", { key: '67cb0ffaf0197a3ad12c402810317801ce69d4a1', ref: el => {
                 this.triggerEl = el;
-            }, tabindex: this.disabled ? -1 : 0, class: {
+            }, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
                 'sd-select-trigger': true,
                 'sd-select-trigger--open': this.isOpen,
                 'sd-select-trigger--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: '0886f40b2427fc4b5825b06682531a26be4c4eec', class: "sd-select-trigger__content" }, h("span", { key: '9e2fb73a34153b0744fbf2cc7490ecdc7a125233', class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택')), h("sd-icon", { key: 'c8a80bf912c50bf97a5d5af4d4c5307e416aea6d', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.handleClick();
+                }
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: '4c28c852054fd7b09e5c45c9eb13882540f66553', class: "sd-select-trigger__content" }, h("span", { key: 'df415c9ac8d00a58e5539c8c655f12ebd49208a4', class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택')), h("sd-icon", { key: '429008e1edaf778e8a85f945a681cd675f2489b7', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
                 'sd-select-trigger__icon': true,
                 'sd-select-trigger__icon--open': this.isOpen,
             } }))));

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

@@ -110,7 +110,7 @@ export class SdSelect {
     }
     getSelectedOptions() {
         const val = this.value;
-        if (!val || !Array.isArray(val))
+        if (val == null || !Array.isArray(val))
             return [];
         if (this.emitValue) {
             return val
@@ -254,15 +254,15 @@ export class SdSelect {
                 this.closeDropdown();
             },
         };
-        return (h("sd-field", { key: '18edcdfdc3a9a2bd17ae0e3852eec94151275e18', 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
+        return (h("sd-field", { key: '668df27ea03b5c2479f89649c494375bacd762ec', 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
                 this.hovered = true;
             }, onMouseLeave: () => {
                 this.hovered = false;
-            } }, h("div", { key: '39efa02a58acbc53315087cceb732b488920dbe8', class: "sd-select", ref: el => {
+            } }, h("div", { key: '7d391d2c0719c165e9d19f5fdc34d39c374401e9', class: "sd-select", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-select-trigger", { key: 'e03ce9208f4af5226461ecdfb0d15bade4f277dd', ref: el => {
+            } }, h("sd-select-trigger", { key: 'b09a0f9dcb0071b79a21c8184deb7d07ba54185f', ref: el => {
                 this.triggerComponentRef = el;
-            }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '9181fd551885e001f139cab9634a2ac3b0f89d47', ...portalProps }, h("sd-select-listbox", { key: '6ed356d2ceea79562ce448584514c23fbff20090', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+            }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '2ae67c5e98c66c2a74ba96f4602ea14d53dd0177', ...portalProps }, h("sd-select-listbox", { key: '97ee517fa777abd4926f8105fd046e39dfeeb5ff', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
     static get is() { return "sd-select"; }
     static get originalStyleUrls() {

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

@@ -45,6 +45,10 @@ export const TABLE_BORDER = {
     color: tableTokens.table.border.color,
     width: tableTokens.table.border.width,
 };
+export const TABLE_SEPARATOR = {
+    color: tableTokens.table.separator.color,
+    width: tableTokens.table.separator.Width,
+};
 export const TABLE_RADIUS = tableTokens.table.radius;
 // ── Content Tokens ──
 export const TABLE_CONTENT = {

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

@@ -57,7 +57,10 @@ sd-table *,
 
 .sd-table__no-data {
   position: absolute;
-  inset: 0;
+  top: 36px;
+  left: 0;
+  right: 0;
+  bottom: 0;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -67,9 +70,25 @@ sd-table *,
   z-index: 200;
   background: rgba(255, 255, 255, 0.6);
 }
-.sd-table__no-data ::slotted(*),
-.sd-table__no-data span {
+
+.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 {

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

@@ -1,7 +1,7 @@
 import { h, Host, readTask, forceUpdate, } from "@stencil/core";
 import { nanoid } from "nanoid";
 import { TABLE_ID_ATTR, } from "./constants";
-import { TABLE_RADIUS, TABLE_BORDER, TABLE_BODY_TYPOGRAPHY } from "./sd-table.config";
+import { TABLE_RADIUS, TABLE_BORDER, TABLE_BODY_TYPOGRAPHY, TABLE_BODY_LAYOUT } from "./sd-table.config";
 export class SdTable {
     static DEFAULT_NO_DATA_LABEL = '데이터가 없습니다.';
     el;
@@ -24,9 +24,15 @@ export class SdTable {
     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;
     // ─────────────────────────────────────────────────────────────────
@@ -49,6 +55,7 @@ export class SdTable {
     scrolledRight = false;
     rowCount = 0;
     loadingScrollTop = 0;
+    noDataBodyHeight = 60;
     // light DOM에 sd-thead / sd-tbody 자식이 없으면 sd-table이 직접 렌더해야 함을 알리는 플래그.
     // componentWillLoad에서 한 번 결정되며, 이후 동적 토글은 지원하지 않는다.
     autoThead = false;
@@ -57,12 +64,19 @@ export class SdTable {
     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이 사용된다.
@@ -121,6 +135,7 @@ export class SdTable {
         if (newVal) {
             this.loadingScrollTop = this.scrollContainer?.scrollTop ?? 0;
         }
+        this.syncNoDataContentObserver();
     }
     handleUseVirtualScrollChange(newVal) {
         if (newVal) {
@@ -129,7 +144,7 @@ export class SdTable {
         }
     }
     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) {
@@ -140,6 +155,7 @@ export class SdTable {
         if (this.useVirtualScroll)
             this.propagateVirtualUpdate(true);
         this.pushRowsToChildren(newRows);
+        this.syncNoDataContentObserver();
     }
     handleRowKeyChange() {
         this.rebuildRowIndexMap();
@@ -165,10 +181,10 @@ export class SdTable {
         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;
         }
     }
@@ -183,12 +199,12 @@ export class SdTable {
         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;
@@ -210,10 +226,16 @@ export class SdTable {
         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);
@@ -256,11 +278,43 @@ export class SdTable {
                 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) {
@@ -325,8 +379,8 @@ export class SdTable {
             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) {
@@ -340,7 +394,7 @@ export class SdTable {
     getVirtualScrollConfigSync() {
         return {
             useVirtualScroll: this.useVirtualScroll,
-            rowHeight: this.rowHeight,
+            rowHeight: this.effectiveRowHeight,
             virtualBuffer: this.virtualBuffer,
             vsStart: this.vsStart,
             vsEnd: this.vsEnd,
@@ -357,10 +411,35 @@ export class SdTable {
             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);
@@ -369,7 +448,7 @@ export class SdTable {
         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;
@@ -387,8 +466,8 @@ export class SdTable {
             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));
@@ -399,7 +478,7 @@ export class SdTable {
     }
     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)
@@ -422,7 +501,7 @@ export class SdTable {
         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;
@@ -449,7 +528,7 @@ export class SdTable {
         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;
@@ -484,13 +563,17 @@ export class SdTable {
             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);
@@ -519,7 +602,7 @@ export class SdTable {
         });
     }
     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));
@@ -538,7 +621,7 @@ export class SdTable {
         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))
@@ -553,18 +636,18 @@ export class SdTable {
     // 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));
     }
@@ -587,7 +670,7 @@ export class SdTable {
         // 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));
@@ -625,23 +708,50 @@ export class SdTable {
         }
         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) {
@@ -656,7 +766,7 @@ export class SdTable {
         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));
@@ -722,6 +832,12 @@ export class SdTable {
     }
     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,
@@ -732,21 +848,25 @@ export class SdTable {
             '--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: 'f7d92943fcb354f69d99c1e4fd37749cc06185c7', style: hostStyle }, 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)`,
-            } }, h("div", { key: '389d7f3508727fb76d9d9f98a73963c5556ff993', class: {
+                '--table-height': effectiveTableHeight,
+                '--table-container-height': `calc(${effectiveTableHeight} - ${paginationHeight}px)`,
+            } }, h("div", { key: 'b85980b8307b2a50ee1554262d025b58bad42e87', class: {
                 'sd-table__wrapper': true,
                 'sd-table__wrapper--radius-use-top': this.radius === 'useTop',
-            } }, h("div", { key: 'e9cdeecb5f318cb1af4e0d2e938e0098e1cc44d0', class: {
+            } }, h("div", { key: 'acf9816ceaaea06b807056606d684befebe9dcd0', 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: '8a1a18cbf500a8e9ad519438a59e084186d9f339', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '443ffcfb06edbae8ac94be7e8e5a94c1e2b68588', indeterminate: true }))), isNoData && (h(h.Fragment, null, h("div", { key: '3aefe27935a816df9658ec89adf261d11c0e8e77', class: "sd-table__no-data-header-overlay" }), h("div", { key: 'db89a7d1cbbf041bdd30be9e0a205147073891e2', class: "sd-table__no-data" }, h("div", { key: 'a9bf47e80db21c30ffa651b03b203e5e205134c9', class: "sd-table__no-data-content", ref: el => {
+                this.noDataContentEl = el;
+                if (el)
+                    this.syncNoDataContentObserver();
+            } }, h("slot", { key: '20f0c0b43534ef344864bf2450abb4c2a8fb704b', name: "no-data" }, h("span", { key: 'a19688e4da7961e7c828694124819c4e60a6700f' }, this.resolvedNoDataLabel)))))), h("table", { key: '2b03aa5c5d59e0ac85051f90a022b59b8dbb871a', 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: 'dc4a0132898490ef7e87e26a75fca8e3b2056a49', class: "sd-table__pagination" }, 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 && (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))
@@ -1129,6 +1249,26 @@ export class SdTable {
                 "attribute": "use-rows-per-page-select",
                 "defaultValue": "false"
             },
+            "dense": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dense",
+                "defaultValue": "false"
+            },
             "useVirtualScroll": {
                 "type": "boolean",
                 "mutable": false,
@@ -1154,11 +1294,11 @@ export class SdTable {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -1166,8 +1306,7 @@ export class SdTable {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "row-height",
-                "defaultValue": "40"
+                "attribute": "row-height"
             },
             "virtualBuffer": {
                 "type": "number",
@@ -1247,6 +1386,7 @@ export class SdTable {
             "scrolledRight": {},
             "rowCount": {},
             "loadingScrollTop": {},
+            "noDataBodyHeight": {},
             "autoThead": {},
             "autoTbody": {}
         };
@@ -1452,7 +1592,7 @@ export class SdTable {
             },
             "getStickyStyle": {
                 "complexType": {
-                    "signature": "(colIdx: number) => Promise<{ '--sticky-left-offset': string; '--sticky-right-offset': string; width: string; minWidth: string; maxWidth: string; }>",
+                    "signature": "(colIdx: number) => Promise<Record<string, string>>",
                     "parameters": [{
                             "name": "colIdx",
                             "type": "number",
@@ -1462,9 +1602,13 @@ export class SdTable {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
                         }
                     },
-                    "return": "Promise<{ '--sticky-left-offset': string; '--sticky-right-offset': string; width: string; minWidth: string; maxWidth: string; }>"
+                    "return": "Promise<Record<string, string>>"
                 },
                 "docs": {
                     "text": "",
@@ -1546,6 +1690,9 @@ export class SdTable {
             }, {
                 "propName": "stickyHeader",
                 "methodName": "handleConfigChange"
+            }, {
+                "propName": "dense",
+                "methodName": "handleConfigChange"
             }, {
                 "propName": "selected",
                 "methodName": "handleSelectedChange"