@sellmate/design-system 1.1.0 → 1.2.0

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-CLCoul8o.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-0U6dRjlq.js';
 import { n as nanoid } from './index-CCwNgVmC.js';
 import { c as countLeaves, S as SEARCH_THRESHOLD, f as filterTree, E as EMPTY_MESSAGE, L as LIST_BOX_LAYOUT, a as SELECT_COLORS, b as SELECT_TYPOGRAPHY, d as SELECT_LAYOUT } from './sd-select.config-CxOCk_ge.js';
 
@@ -119,7 +119,7 @@ const SdSelect = class {
     }
     getSelectedOptions() {
         const val = this.value;
-        if (!val || !Array.isArray(val))
+        if (val == null || !Array.isArray(val))
             return [];
         if (this.emitValue) {
             return val
@@ -263,15 +263,15 @@ const SdSelect = class {
                 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 watchers() { return {
         "isOpen": [{
@@ -349,7 +349,7 @@ const SdSelectListbox = class {
         return count >= SEARCH_THRESHOLD;
     }
     get filteredOptions() {
-        if (!this.searchKeyword)
+        if (this.searchKeyword === '')
             return this.options;
         if (this.isDepth)
             return filterTree(this.options, this.searchKeyword);
@@ -362,7 +362,7 @@ const SdSelectListbox = class {
         return this.filteredOptions.length === 0;
     }
     getSelectedValues() {
-        if (!this.value || !Array.isArray(this.value))
+        if (this.value == null || !Array.isArray(this.value))
             return new Set();
         if (this.emitValue) {
             return new Set(this.value);
@@ -485,7 +485,7 @@ const SdSelectListbox = class {
         // filterTree 가 매 호출마다 옵션 객체를 새로 복제하기 때문에 참조 비교
         // (=== / indexOf) 는 검색이 적용된 동안 항상 실패한다. 고유 식별자인
         // value 로 비교해야 한다.
-        return !!focused && focused.value === option.value;
+        return focused != null && focused.value === option.value;
     }
     resetFocusOnFilter() {
         // 필터가 바뀌면 이전 인덱스가 가리키던 항목이 사라질 수 있으므로
@@ -635,9 +635,9 @@ const SdSelectListbox = class {
             '--listbox-max-height': this.maxHeight ?? '260px',
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
         };
-        return (h("div", { key: 'be3a46d2a17522799374eb7e59faea8960e7b41a', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: '68fa6b9f958ee662ac400716ade0ae4823ad99a3', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: 'b0a6daf94c69ccb33d31434014c93b2f414309f3', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (h("div", { key: '8c9b1a4471bf4e535c5f156d087e1b9be76ad903', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: '4cc596a1ac21c9b258d5db07ecb15d566179d743', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '977e15c7987ca387cf30783741f99b322150627b', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
-            } }, this.showSelectAll && (h("sd-select-list-item", { key: '120fea009df513e3346877044ee65c132ece70cf', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (h("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (h("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
+            } }, this.showSelectAll && (h("sd-select-list-item", { key: 'dada5a6662b2d3fa63ed11ab1c82561d5e2d2400', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (h("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (h("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
     }
     static get watchers() { return {
         "searchKeyword": [{
@@ -681,7 +681,7 @@ const SdSelectTrigger = class {
         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`,
@@ -697,13 +697,18 @@ const SdSelectTrigger = class {
                 ? 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/esm/sd-switch.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';
 
 var switchTokens = {
 	"switch": {

package/dist/esm/{sd-table.config-0Te8GLCI.js → sd-table.config-B-VgXXT7.js}

@@ -1,4 +1,4 @@
-import { t as tableTokens } from './component.table-BQ6at17Y.js';
+import { t as tableTokens } from './component.table-BnfUIhUj.js';
 import { s as systemTokens } from './system-GBlVDmy4.js';
 
 // ── Header Tokens ──
@@ -24,7 +24,13 @@ const TABLE_HEADER_RESIZING_BAR = {
 // ── Body Tokens ──
 const TABLE_BODY_LAYOUT = {
     default: {
-        height: tableTokens.table.body.default.height},
+        height: tableTokens.table.body.default.height,
+        paddingY: tableTokens.table.body.default.paddingY,
+    },
+    dense: {
+        height: tableTokens.table.body.dense.height,
+        paddingY: tableTokens.table.body.dense.paddingY,
+    },
     paddingX: tableTokens.table.body.paddingX};
 const TABLE_BODY_TYPOGRAPHY = {
     fontFamily: tableTokens.table.body.typography.fontFamily,
@@ -38,6 +44,10 @@ const TABLE_BORDER = {
     color: tableTokens.table.border.color,
     width: tableTokens.table.border.width,
 };
+const TABLE_SEPARATOR = {
+    color: tableTokens.table.separator.color,
+    width: tableTokens.table.separator.Width,
+};
 const TABLE_RADIUS = tableTokens.table.radius;
 // ── Header Icon Color Defaults ──
 const ICON_DEFAULT_COLOR = {
@@ -51,4 +61,4 @@ const ICON_DEFAULT_COLOR = {
 const resolveTableIconColor = (name, override) => override ?? ICON_DEFAULT_COLOR[name];
 const resolveSortIconName = (sort) => sort === 'asc' ? 'arrowDown' : sort === 'desc' ? 'arrowUp' : 'updown';
 
-export { TABLE_BODY_TYPOGRAPHY as T, TABLE_BORDER as a, TABLE_RADIUS as b, resolveSortIconName as c, TABLE_HEADER_RESIZING_BAR as d, TABLE_HEADER_TYPOGRAPHY as e, TABLE_HEADER_COLORS as f, TABLE_HEADER_LAYOUT as g, TABLE_BODY_LAYOUT as h, resolveTableIconColor as r };
+export { TABLE_BODY_LAYOUT as T, TABLE_BODY_TYPOGRAPHY as a, TABLE_BORDER as b, TABLE_RADIUS as c, resolveSortIconName as d, TABLE_HEADER_RESIZING_BAR as e, TABLE_HEADER_TYPOGRAPHY as f, TABLE_HEADER_COLORS as g, TABLE_HEADER_LAYOUT as h, TABLE_SEPARATOR as i, resolveTableIconColor as r };

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: '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))
@@ -813,6 +933,9 @@ const SdTable = class {
         "stickyHeader": [{
                 "handleConfigChange": 0
             }],
+        "dense": [{
+                "handleConfigChange": 0
+            }],
         "selected": [{
                 "handleSelectedChange": 0
             }],