@sellmate/design-system 1.0.78 → 1.2.0

package/dist/esm/{sd-pagination_5.entry.js → sd-pagination_4.entry.js}

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement, H as Host } from './index-Cnwbjz1F.js';
-import { n as nanoid } from './index-CCwNgVmC.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement, H as Host } from './index-0U6dRjlq.js';
 import { T as TABLE_ID_ATTR } from './constants-sZMi_32I.js';
-import { r as resolveTableIconColor, c as resolveSortIconName, a as TABLE_BORDER, d as TABLE_HEADER_RESIZING_BAR, e as TABLE_HEADER_TYPOGRAPHY, f as TABLE_HEADER_COLORS, g as TABLE_HEADER_LAYOUT, T as TABLE_BODY_TYPOGRAPHY, h as TABLE_BODY_LAYOUT } from './sd-table.config-Bj-EEo7N.js';
-import './system-CZ4ltUOw.js';
+import { r as resolveTableIconColor, d as resolveSortIconName, b as TABLE_BORDER, e as TABLE_HEADER_RESIZING_BAR, f as TABLE_HEADER_TYPOGRAPHY, g as TABLE_HEADER_COLORS, h as TABLE_HEADER_LAYOUT, i as TABLE_SEPARATOR, a as TABLE_BODY_TYPOGRAPHY, T as TABLE_BODY_LAYOUT } from './sd-table.config-B-VgXXT7.js';
+import './component.table-BnfUIhUj.js';
+import './system-GBlVDmy4.js';
 
 const pagination = {
 	height: "24",
@@ -152,296 +152,17 @@ const SdPagination = class {
             '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
             '--sd-pagination-item-width': `${this.buttonWidth}px`,
         };
-        return (h("div", { key: 'e648886fbec4723b7be767d9e1bfc04004cca234', class: {
+        return (h("div", { key: '0a99cc2b09de2f2a893fe88eaee535dc2f39505d', class: {
                 'sd-pagination': true,
                 'sd-pagination--simple': this.simple,
-            }, style: cssVars }, h("div", { key: '43ff8b8f6682c4d2b70c5085a6d3199de1d01596', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "sd-pagination__info" }, h("span", { class: "sd-pagination__current" }, this.currentPage), h("span", { class: "sd-pagination__divider" }, "/"), h("span", { class: "sd-pagination__last" }, this.lastPage))) : (h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+            }, style: cssVars }, h("div", { key: 'ba4e726a23e572c788c8c68689e656a07f21f46e', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "sd-pagination__info" }, h("span", { class: "sd-pagination__current" }, this.currentPage), h("span", { class: "sd-pagination__divider" }, "/"), h("span", { class: "sd-pagination__last" }, this.lastPage))) : (h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'sd-pagination__item': true,
                 'sd-pagination__item--selected': this.currentPage === n,
-            }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: '1975d14028485438a728b23d717abfcde8722fcf', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: 'e3276583ab382b988ac2961e8c67c431d5c4495e', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
     }
 };
 SdPagination.style = sdPaginationCss();
 
-const sdSelectCss = () => `sd-select{display:inline-flex}sd-select sd-portal{display:none}sd-select .sd-select{position:relative;width:100%;height:100%}`;
-
-const SdSelect = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.update = createEvent(this, "sdUpdate", 7);
-        this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
-    }
-    static VIEWPORT_PADDING = 20;
-    static PORTAL_OFFSET_Y = 4;
-    static CLOSE_ANIMATION_DURATION = 150;
-    get el() { return getElement(this); }
-    type = 'default';
-    value = null;
-    options = [];
-    placeholder = '선택';
-    maxDropdownWidth = '640px';
-    dropdownHeight = '260px';
-    disabled = false;
-    label = '';
-    labelWidth = '';
-    addonLabel = '';
-    addonAlign = 'start';
-    error = false;
-    hint = '';
-    errorMessage = '';
-    rules = [];
-    icon = undefined;
-    labelTooltip = '';
-    labelTooltipProps = null;
-    emitValue = false;
-    width = '';
-    useSearch = false;
-    allSelectedLabel = '전체';
-    useSelectAll = false;
-    isOpen = false;
-    isAnimatingOut = false;
-    triggerWidth = '200px';
-    resolvedDropdownHeight = '260px';
-    resolvedMaxDropdownWidth = '640px';
-    focused = false;
-    hovered = false;
-    update;
-    dropDownShow;
-    async sdFocus() {
-        if (this.disabled)
-            return;
-        await this.triggerComponentRef?.sdFocus();
-    }
-    async sdOpen() {
-        // sdFocus 직후 호출 시 트리거 ref/레이아웃이 안정될 때까지 한 틱 대기
-        await new Promise(resolve => setTimeout(resolve, 0));
-        if (this.disabled || this.isOpen)
-            return;
-        this.prepareDropdownGeometry();
-        if (this.closeAnimationTimer)
-            clearTimeout(this.closeAnimationTimer);
-        this.isAnimatingOut = false;
-        this.isOpen = true;
-    }
-    triggerRef;
-    triggerComponentRef;
-    closeAnimationTimer;
-    name = nanoid();
-    triggerHasFocus = false;
-    watchIsOpen(newValue) {
-        this.syncFocusedState(newValue);
-        this.dropDownShow.emit({ isOpen: newValue });
-    }
-    get isMulti() {
-        return this.type === 'multi' || this.type === 'multi_depth';
-    }
-    get displayText() {
-        if (this.isMulti) {
-            if (!Array.isArray(this.value) || this.value.length === 0)
-                return '';
-            const nonDisabledLeaves = this.getNonDisabledLeaves(this.options);
-            const selected = this.getSelectedOptions();
-            const allSelected = nonDisabledLeaves.length > 0 &&
-                nonDisabledLeaves.every(leaf => selected.some(s => s.value === leaf.value));
-            if (allSelected)
-                return this.allSelectedLabel ?? '전체';
-            const flat = this.flattenOptions(this.options);
-            return this.value
-                .map(item => {
-                if (item != null && typeof item === 'object') {
-                    const opt = item;
-                    return opt.label ?? flat.find(o => o.value === opt.value)?.label ?? '';
-                }
-                return flat.find(o => o.value === item)?.label ?? '';
-            })
-                .filter(Boolean)
-                .join(', ');
-        }
-        if (this.value == null)
-            return '';
-        if (!this.emitValue && typeof this.value === 'object' && !Array.isArray(this.value)) {
-            return this.value.label ?? '';
-        }
-        const flat = this.flattenOptions(this.options);
-        const found = flat.find(o => o.value === this.value);
-        return found?.label ?? '';
-    }
-    flattenOptions(options) {
-        return options.flatMap(o => (o.children ? this.flattenOptions(o.children) : [o]));
-    }
-    getNonDisabledLeaves(options) {
-        return options.flatMap(o => {
-            if (o.disabled)
-                return [];
-            if (o.children)
-                return this.getNonDisabledLeaves(o.children);
-            return [o];
-        });
-    }
-    getSelectedOptions() {
-        const val = this.value;
-        if (!val || !Array.isArray(val))
-            return [];
-        if (this.emitValue) {
-            return val
-                .map(v => this.findOriginalOption(v, this.options))
-                .filter((o) => !!o);
-        }
-        return val;
-    }
-    toMultiValue(options) {
-        return this.emitValue ? options.map(o => o.value) : options;
-    }
-    parsePixelValue(value, fallback) {
-        const parsed = Number.parseFloat(value);
-        return Number.isFinite(parsed) ? parsed : fallback;
-    }
-    updateDropdownViewportConstraints() {
-        if (!this.triggerRef)
-            return;
-        const triggerRect = this.triggerRef.getBoundingClientRect();
-        const viewportPadding = SdSelect.VIEWPORT_PADDING;
-        const offsetY = SdSelect.PORTAL_OFFSET_Y;
-        const preferredHeight = this.parsePixelValue(this.dropdownHeight, 260);
-        const preferredWidth = this.parsePixelValue(this.maxDropdownWidth, 640);
-        const availableBelow = Math.max(window.innerHeight - triggerRect.bottom - viewportPadding - offsetY, 0);
-        const availableAbove = Math.max(triggerRect.top - viewportPadding - offsetY, 0);
-        const availableHeight = Math.max(availableBelow, availableAbove);
-        const availableWidth = Math.max(window.innerWidth - viewportPadding * 2, 0);
-        this.resolvedDropdownHeight = `${Math.min(preferredHeight, availableHeight)}px`;
-        this.resolvedMaxDropdownWidth = `${Math.min(preferredWidth, availableWidth)}px`;
-    }
-    handleViewportResize = () => {
-        if (!this.isOpen)
-            return;
-        this.updateDropdownViewportConstraints();
-    };
-    findOriginalOption(value, options) {
-        for (const opt of options) {
-            if (opt.value === value)
-                return opt;
-            if (opt.children) {
-                const found = this.findOriginalOption(value, opt.children);
-                if (found)
-                    return found;
-            }
-        }
-        return undefined;
-    }
-    closeDropdown() {
-        if (!this.isOpen)
-            return;
-        this.isOpen = false;
-        this.isAnimatingOut = true;
-        if (this.closeAnimationTimer)
-            clearTimeout(this.closeAnimationTimer);
-        this.closeAnimationTimer = setTimeout(() => {
-            this.isAnimatingOut = false;
-        }, SdSelect.CLOSE_ANIMATION_DURATION);
-    }
-    prepareDropdownGeometry() {
-        if (this.triggerRef) {
-            this.triggerWidth = `${this.triggerRef.offsetWidth}px`;
-        }
-        this.updateDropdownViewportConstraints();
-    }
-    syncFocusedState(isOpen = this.isOpen) {
-        this.focused = isOpen || this.triggerHasFocus;
-    }
-    handleTriggerFocus = () => {
-        this.triggerHasFocus = true;
-        this.syncFocusedState();
-    };
-    handleTriggerBlur = () => {
-        this.triggerHasFocus = false;
-        this.syncFocusedState();
-    };
-    handleTriggerClick = () => {
-        if (this.isOpen) {
-            this.closeDropdown();
-            return;
-        }
-        this.prepareDropdownGeometry();
-        if (this.closeAnimationTimer)
-            clearTimeout(this.closeAnimationTimer);
-        this.isAnimatingOut = false;
-        this.isOpen = true;
-    };
-    emitUpdate(value) {
-        this.update.emit(value);
-    }
-    handleOptionSelect = (detail) => {
-        const { option, leaves } = detail;
-        if (this.isMulti) {
-            this.handleMultiSelect(option, leaves);
-        }
-        else {
-            this.closeDropdown();
-            this.value = this.emitValue ? option.value : option;
-            const nextValue = this.value;
-            requestAnimationFrame(() => {
-                this.emitUpdate(nextValue);
-            });
-        }
-    };
-    handleMultiSelect(option, leaves) {
-        const selected = this.getSelectedOptions();
-        const isGroup = !!option.children;
-        let newSelected;
-        if (isGroup) {
-            const allSelected = leaves.every(l => selected.some(s => s.value === l.value));
-            if (allSelected) {
-                const leafValues = new Set(leaves.map(l => l.value));
-                newSelected = selected.filter(s => !leafValues.has(s.value));
-            }
-            else {
-                const existing = new Set(selected.map(s => s.value));
-                const toAdd = leaves.filter(l => !existing.has(l.value));
-                newSelected = [...selected, ...toAdd];
-            }
-        }
-        else {
-            const exists = selected.some(s => s.value === option.value);
-            newSelected = exists ? selected.filter(s => s.value !== option.value) : [...selected, option];
-        }
-        this.value = this.toMultiValue(newSelected);
-        this.emitUpdate(this.value);
-    }
-    connectedCallback() {
-        window.addEventListener('resize', this.handleViewportResize);
-    }
-    disconnectedCallback() {
-        window.removeEventListener('resize', this.handleViewportResize);
-        if (this.closeAnimationTimer)
-            clearTimeout(this.closeAnimationTimer);
-    }
-    render() {
-        const portalProps = {
-            open: this.isOpen,
-            parentRef: this.triggerRef,
-            viewportPadding: SdSelect.VIEWPORT_PADDING,
-            onSdClose: () => {
-                this.closeDropdown();
-            },
-        };
-        return (h("sd-field", { key: '76625e332090d20e2f66159bba5ee1b9a11320a6', 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: '8a0ae8a5e05459128409dbe21779f5e3d91b3a04', class: "sd-select", ref: el => {
-                this.triggerRef = el;
-            } }, h("sd-select-trigger", { key: '6b47231914655a8e197e3b38cd8e37c5214efc17', 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: 'eaed402d276cc94a1324ede9cbf09bc436f8a1db', ...portalProps }, h("sd-select-listbox", { key: 'a96f75e06d974c8fd88ac72f083fe4b0ef424a0b', 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": [{
-                "watchIsOpen": 0
-            }]
-    }; }
-};
-SdSelect.style = sdSelectCss();
-
 const sdTbodyCss = () => `:host{display:contents}:host *{box-sizing:border-box}.tbody{display:table-row-group}`;
 
 const SdTbody = class {
@@ -484,17 +205,17 @@ const SdTbody = class {
         this.tableEl = table;
         const fromMethod = table?.getTableIdSync?.();
         const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
-        const resolvedTableId = (fromMethod && fromMethod !== 'undefined' ? fromMethod : null) ??
-            (fromAttr && fromAttr !== 'undefined' ? fromAttr : null) ??
+        const resolvedTableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
+            (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
             '';
-        if (resolvedTableId && resolvedTableId !== this.tableId) {
+        if (resolvedTableId !== '' && resolvedTableId !== this.tableId) {
             this.tableId = resolvedTableId;
         }
     }
     render() {
-        return (h(Host, { key: 'e474bc09fdec9d48d978ec87620b161220b5236c', slot: `${this.tableId}-body` }, h("tbody", { key: 'c74261b3f30c43e8ac8c3bdea1180f17bfc7dbc8', class: { tbody: true } }, [
+        return (h(Host, { key: '5b55bfd73916ff1402329375de1e1fc2a7629cbd', slot: `${this.tableId}-body` }, h("tbody", { key: 'a09a532d1510166a36d592c2e59ec1765803bbbe', class: { tbody: true } }, [
             this.topSpacerHeight > 0 && (h("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
-            h("slot", { key: 'f686e7e8fa81e725a32592a58267d0b5cd7551e6' }),
+            h("slot", { key: 'da3827a9c2fe7a74ec3cb3eb8dee3ab039ea0535' }),
             this.bottomSpacerHeight > 0 && (h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
         ])));
     }
@@ -535,7 +256,7 @@ const SdThead = class {
     tableEl = null;
     handleColumnsChange(newCols) {
         if (Array.isArray(newCols) && (this.columnWidths ?? []).length === 0) {
-            this.columnWidths = newCols.map(c => parseInt(c.width || '120', 10));
+            this.columnWidths = newCols.map(c => (c.autoWidth ? 0 : parseInt(c.width || '120', 10)));
         }
     }
     componentWillLoad() {
@@ -543,7 +264,7 @@ const SdThead = class {
         this.columnWidths = Array.isArray(this.columnWidths) ? this.columnWidths : [];
         this.resolveConfig();
         if ((this.columnWidths ?? []).length === 0) {
-            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));
         }
     }
     componentDidLoad() {
@@ -560,10 +281,10 @@ const SdThead = class {
         this.tableEl = table;
         const fromMethod = table?.getTableIdSync?.();
         const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
-        const resolvedTableId = (fromMethod && fromMethod !== 'undefined' ? fromMethod : null) ??
-            (fromAttr && fromAttr !== 'undefined' ? fromAttr : null) ??
+        const resolvedTableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
+            (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
             '';
-        if (resolvedTableId && resolvedTableId !== this.tableId) {
+        if (resolvedTableId !== '' && resolvedTableId !== this.tableId) {
             this.tableId = resolvedTableId;
         }
     }
@@ -611,13 +332,17 @@ const SdThead = class {
         const rightOffset = this.columnWidths
             .filter((_, i) => i >= this.visibleColumns.length - (this._stickyColumn.right || 0) && i > colIdx)
             .reduce((a, b) => a + b, 0);
-        return {
+        const col = this.visibleColumns[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 (!col?.autoWidth) {
+            base['width'] = `${this.columnWidths[colIdx]}px`;
+            base['minWidth'] = `${this.columnWidths[colIdx]}px`;
+            base['maxWidth'] = `${this.columnWidths[colIdx]}px`;
+        }
+        return base;
     }
     handleResize(index, event, reversed = false) {
         if (this.tableEl?.handleResize) {
@@ -648,6 +373,7 @@ const SdThead = class {
         const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
         const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
         const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
+        const lastColIdx = this.visibleColumns.length - 1;
         const headStyle = {
             '--table-header-height': `${TABLE_HEADER_LAYOUT.height}px`,
             '--table-header-padding-x': `${TABLE_HEADER_LAYOUT.paddingX}px`,
@@ -663,27 +389,33 @@ const SdThead = class {
             '--table-border-color': TABLE_BORDER.color,
             '--table-border-width': `${TABLE_BORDER.width}px`,
         };
-        return (h(Host, { key: 'c4468056cc20a78516e61bccaf4d11c098e83ec6', slot: `${this.tableId}-head`, style: headStyle }, h("thead", { key: 'a9befd1728baf2104bfb9132557d5c5c0eb49748', class: {
+        return (h(Host, { key: '424fa72b833a94bce945ae50e8445cbed0527025', slot: `${this.tableId}-head`, style: headStyle }, h("thead", { key: '1a5704d78992b553c5db5ba92bb3814de7c19898', class: {
                 'thead': true,
                 'thead--sticky': this._stickyHeader,
-            } }, h("tr", { key: 'da786d82d4896b6124becf42f634bcc5b0a6ffb7', class: "tr" }, this._selectable && (h("th", { key: 'b257c5475b7e528fbfc52ea85031a4c49bed7b36', class: {
+            } }, h("tr", { key: '1369ff7c99a5691bcd5fa54af4f7c02ff41dceb3', class: "tr" }, this._selectable && (h("th", { key: '72159c6f8ef28b0b93790e180cb9b12345727525', class: {
                 'th': true,
                 'th--selected': true,
                 'sticky-left': true,
                 'sticky-left-edge': stickyLeftCount === 0,
                 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
-            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '6624026c1811c809eeb5131518ddb8c11f66b541', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
+            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '1c5c035346fc6d13d956475480374a8bd93d3d6d', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
                 'th': true,
                 [`${col.thClass}`]: Boolean(col.thClass),
                 'sticky-left': true,
                 'sticky-left-edge': idx === stickyLeftCount - 1,
                 'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
-            }, style: { ...col.thStyle, ...this.getStickyStyle(idx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && (h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))))), middleCols.map((col, relativeIdx) => {
+            }, style: { ...col.thStyle, ...this.getStickyStyle(idx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && idx !== lastColIdx && (
+        // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))))), middleCols.map((col, relativeIdx) => {
             const actualColIdx = stickyLeftCount + relativeIdx;
             return (h("th", { key: col.name, class: {
                     th: true,
                     [`${col.thClass}`]: Boolean(col.thClass),
-                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && (h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
+                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && actualColIdx !== lastColIdx && (
+            // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+            h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
         }), stickyRightCols.map((col, relativeIdx) => {
             const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
             return (h("th", { key: col.name, class: {
@@ -692,7 +424,10 @@ const SdThead = class {
                     'sticky-right': true,
                     'sticky-right-edge': relativeIdx === 0,
                     'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
-                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && (h("div", { class: "th__resizer th__resizer--left", onMouseDown: (evt) => this.handleResize(actualColIdx, evt, true) }))));
+                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && (
+            // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+            h("div", { class: "th__resizer th__resizer--left", onMouseDown: (evt) => this.handleResize(actualColIdx, evt, true) }))));
         })))));
     }
     static get watchers() { return {
@@ -703,7 +438,7 @@ const SdThead = class {
 };
 SdThead.style = sdTheadCss();
 
-const sdTrCss = () => `sd-tr{display:contents}sd-tr *{box-sizing:border-box}.tr{display:table-row}.tr:hover .td{background-color:#F9F9F9}.tr--no-hover:hover .td{background-color:white}.td{display:table-cell;height:var(--table-body-height, 44px);padding:0 var(--table-body-padding-x, 16px);border-bottom:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);background:white;vertical-align:middle;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.td--left{text-align:left}.td--center{text-align:center}.td--right{text-align:right}.td--selected{position:relative;width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.td--selected sd-checkbox label{position:relative}.td--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.td.sticky-left{position:sticky;background-color:white;z-index:100 !important;left:var(--sticky-left-offset, 0)}.td.sticky-right{position:sticky;background-color:white;z-index:100 !important;right:var(--sticky-right-offset, 0)}.td.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-left-edge.is-scrolled-left{overflow:visible}.td.sticky-left-edge.is-scrolled-left:after{opacity:1}.td.sticky-right-edge.is-scrolled-right{overflow:visible}.td.sticky-right-edge.is-scrolled-right:after{opacity:1}.tr:hover .td.sticky-left,.tr:hover .td.sticky-right{background-color:#F9F9F9}.tr--no-hover:hover .td.sticky-left,.tr--no-hover:hover .td.sticky-right{background-color:white}`;
+const sdTrCss = () => `sd-tr{display:contents}sd-tr *{box-sizing:border-box}.tr{display:table-row}.tr:hover .td{background-color:#F9F9F9}.tr--no-hover:hover .td{background-color:white}.td{display:table-cell;height:var(--table-body-height, 44px);padding:var(--table-body-padding-y, 0) var(--table-body-padding-x, 16px);border-bottom:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);background:white;vertical-align:middle;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.td--left{text-align:left}.td--center{text-align:center}.td--right{text-align:right}.td--selected{position:relative;width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.td--selected sd-checkbox label{position:relative}.td--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.td.sticky-left{position:sticky;background-color:white;z-index:100 !important;left:var(--sticky-left-offset, 0)}.td.sticky-right{position:sticky;background-color:white;z-index:100 !important;right:var(--sticky-right-offset, 0)}.td.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-left-edge.is-scrolled-left{overflow:visible}.td.sticky-left-edge.is-scrolled-left:after{opacity:1}.td.sticky-right-edge.is-scrolled-right{overflow:visible}.td.sticky-right-edge.is-scrolled-right:after{opacity:1}.tr:hover .td.sticky-left,.tr:hover .td.sticky-right{background-color:#F9F9F9}.tr--no-hover:hover .td.sticky-left,.tr--no-hover:hover .td.sticky-right{background-color:white}.td.td--last-row{border-bottom:none}.tr--separator .td--separator{height:var(--table-separator-width, 6px);padding:0;background-color:var(--table-separator-color, #eeeeee);border-bottom:none}.td.td--before-separator{border-bottom:none}.td--divider-left{border-left:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1)}.td--divider-right{border-right:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1)}`;
 
 const SdTr = class {
     constructor(hostRef) {
@@ -715,6 +450,7 @@ const SdTr = class {
     stickyColumn;
     rowKey = '';
     row = {};
+    separator;
     tableId = '';
     columnWidths = [];
     isVisible = true;
@@ -724,16 +460,32 @@ const SdTr = class {
     _stickyColumn = { left: 0, right: 0 };
     _scrolledLeft = false;
     _scrolledRight = false;
+    _dense = false;
     tableEl = null;
+    _prevRowKey = null;
     componentWillLoad() {
         this.syncTableContext();
         this.columnWidths = this.columnWidths ?? [];
         this.resolveConfig();
-        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.updateVisibilitySync();
     }
     componentDidLoad() {
         this.syncTableContext();
+        if (this.separator) {
+            const prev = this.el.previousElementSibling;
+            if (prev?.tagName?.toLowerCase() === 'sd-tr') {
+                const prevRowKey = prev.rowKey;
+                this._prevRowKey = prevRowKey;
+                this.tableEl?.registerSeparatorSync?.(prevRowKey);
+            }
+        }
+    }
+    disconnectedCallback() {
+        if (this._prevRowKey !== null) {
+            this.tableEl?.unregisterSeparatorSync?.(this._prevRowKey);
+            this._prevRowKey = null;
+        }
     }
     syncTableContext() {
         // sd-table이 shadow:true이므로 fallback content로 렌더되면 closest가 경계를 못 넘는다.
@@ -745,10 +497,10 @@ const SdTr = class {
         this.tableEl = table;
         const fromMethod = table?.getTableIdSync?.();
         const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
-        const resolvedTableId = (fromMethod && fromMethod !== 'undefined' ? fromMethod : null) ??
-            (fromAttr && fromAttr !== 'undefined' ? fromAttr : null) ??
+        const resolvedTableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
+            (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
             '';
-        if (resolvedTableId && resolvedTableId !== this.tableId) {
+        if (resolvedTableId !== '' && resolvedTableId !== this.tableId) {
             this.tableId = resolvedTableId;
         }
     }
@@ -759,6 +511,7 @@ const SdTr = class {
         this._stickyColumn = this.stickyColumn ?? config?.stickyColumn ?? { left: 0, right: 0 };
         this._scrolledLeft = config?.scrolledLeft ?? false;
         this._scrolledRight = config?.scrolledRight ?? false;
+        this._dense = config?.dense ?? false;
         if (config?.columnWidths && (this.columnWidths ?? []).length === 0) {
             this.columnWidths = [...config.columnWidths];
         }
@@ -804,7 +557,11 @@ const SdTr = class {
     }
     getCellValue(column) {
         const { field, format, name } = column;
-        const value = typeof field === 'function' ? field(this.row) : field ? this.row[field] : this.row[name];
+        const value = typeof field === 'function'
+            ? field(this.row)
+            : field !== ''
+                ? this.row[field]
+                : this.row[name];
         return format ? format(value, this.row) : this.formatValue(value);
     }
     getStickyStyle(colIdx) {
@@ -815,13 +572,17 @@ const SdTr = class {
         const rightOffset = this.columnWidths
             .filter((_, i) => i >= this.visibleColumns.length - (this._stickyColumn.right || 0) && i > colIdx)
             .reduce((a, b) => a + b, 0);
-        return {
+        const col = this.visibleColumns[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 (!col?.autoWidth) {
+            base['width'] = `${this.columnWidths[colIdx]}px`;
+            base['minWidth'] = `${this.columnWidths[colIdx]}px`;
+            base['maxWidth'] = `${this.columnWidths[colIdx]}px`;
+        }
+        return base;
     }
     isSelected() {
         if (this.tableEl?.isRowSelectedSync) {
@@ -851,6 +612,39 @@ const SdTr = class {
         const fieldName = typeof col.field === 'string' ? col.field : col.name;
         return this.tableEl.getCellClassSync(this.rowKey, fieldName);
     }
+    expandCellClass(classStr) {
+        if (classStr == null || classStr === '')
+            return {};
+        return Object.fromEntries(classStr
+            .split(/\s+/)
+            .filter(Boolean)
+            .map(c => [c, true]));
+    }
+    isVisualLastRow(col) {
+        if (!this.tableEl?.isVisualLastRowSync)
+            return false;
+        const fieldName = typeof col.field === 'string' ? col.field : col.name;
+        return this.tableEl.isVisualLastRowSync(this.rowKey, fieldName);
+    }
+    // selectable td는 column 정보가 없으므로 빈 field로 평가한다.
+    // 해당 위치는 rowspan을 등록할 수 없으므로 spanRegistry에 매칭이 없고,
+    // 결과적으로 "내 row 자체가 시각적 마지막인지"가 판정된다.
+    isVisualLastRowForSelfRow() {
+        if (!this.tableEl?.isVisualLastRowSync)
+            return false;
+        return this.tableEl.isVisualLastRowSync(this.rowKey, '');
+    }
+    isVisualLastRowBeforeSeparator(col) {
+        if (!this.tableEl?.isVisualLastRowBeforeSeparatorSync)
+            return false;
+        const fieldName = typeof col.field === 'string' ? col.field : col.name;
+        return this.tableEl.isVisualLastRowBeforeSeparatorSync(this.rowKey, fieldName);
+    }
+    isVisualLastRowBeforeSeparatorForSelfRow() {
+        if (!this.tableEl?.isVisualLastRowBeforeSeparatorSync)
+            return false;
+        return this.tableEl.isVisualLastRowBeforeSeparatorSync(this.rowKey, '');
+    }
     render() {
         const stickyLeftCount = this._stickyColumn.left || 0;
         const stickyRightCount = this._stickyColumn.right || 0;
@@ -858,9 +652,13 @@ const SdTr = class {
         const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
         const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
         const hasRowspan = this.tableEl?.hasRowspanSync?.() ?? false;
+        const isUseFrameRow = this.tableEl?.hasUseFrameInRowSync?.(this.rowKey) ?? false;
+        const effectiveDense = this._dense && !isUseFrameRow;
+        const bodyLayout = effectiveDense ? TABLE_BODY_LAYOUT.dense : TABLE_BODY_LAYOUT.default;
         const rowStyle = {
-            display: this.isVisible ? '' : 'none',
-            '--table-body-height': `${TABLE_BODY_LAYOUT.default.height}px`,
+            'display': this.isVisible ? '' : 'none',
+            '--table-body-height': `${bodyLayout.height}px`,
+            '--table-body-padding-y': `${bodyLayout.paddingY}px`,
             '--table-body-padding-x': `${TABLE_BODY_LAYOUT.paddingX}px`,
             '--table-body-font-family': TABLE_BODY_TYPOGRAPHY.fontFamily,
             '--table-body-font-weight': TABLE_BODY_TYPOGRAPHY.fontWeight,
@@ -869,14 +667,22 @@ const SdTr = class {
             '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
             '--table-border-color': TABLE_BORDER.color,
             '--table-border-width': `${TABLE_BORDER.width}px`,
+            '--table-separator-color': TABLE_SEPARATOR.color,
+            '--table-separator-width': `${TABLE_SEPARATOR.width}px`,
         };
-        return (h(Host, { key: '5ed784dad3eb187430efe30ed0bc0f153bf57f23', style: rowStyle }, h("tr", { key: 'bcdc07139fce88788a598ced264f3aad503882fe', class: { 'tr': true, 'tr--no-hover': hasRowspan } }, this._selectable && (h("td", { key: '0b2b516a0d2b57beb7bb37ea3ab2c34836cc772c', class: {
+        if (this.separator) {
+            const totalCols = this.visibleColumns.length + (this._selectable ? 1 : 0);
+            return (h(Host, { style: rowStyle }, h("tr", { class: "tr tr--separator" }, h("td", { colSpan: totalCols, class: "td td--separator" }))));
+        }
+        return (h(Host, { style: rowStyle }, h("tr", { class: { 'tr': true, 'tr--no-hover': hasRowspan } }, this._selectable && (h("td", { class: {
                 'td': true,
                 'td--selected': true,
+                'td--last-row': this.isVisualLastRowForSelfRow(),
+                'td--before-separator': this.isVisualLastRowBeforeSeparatorForSelfRow(),
                 'sticky-left': true,
                 'sticky-left-edge': stickyLeftCount === 0,
                 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
-            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '3fb6dc05e2b0e75bd70ff5b9631330ce2348bd22', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => {
+            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => {
             if (this.isCovered(idx))
                 return null;
             const span = this.getSpanFor(col);
@@ -884,11 +690,13 @@ const SdTr = class {
             return (h("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
                     'td': true,
                     [`td--${col.align || 'left'}`]: true,
+                    'td--last-row': this.isVisualLastRow(col),
+                    'td--before-separator': this.isVisualLastRowBeforeSeparator(col),
                     'sticky-left': true,
                     'sticky-left-edge': idx === stickyLeftCount - 1,
                     'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
                     [`${col.tdClass}`]: Boolean(col.tdClass),
-                    [`${sdCellClass}`]: Boolean(sdCellClass),
+                    ...this.expandCellClass(sdCellClass),
                 }, style: this.getStickyStyle(idx) }, h("slot", { name: `${this.tableId}-${typeof col.field === 'string' ? col.field : col.name}-${this.rowKey}` }, h("span", null, this.getCellValue(col)))));
         }), middleCols.map((col, relativeIdx) => {
             const actualColIdx = stickyLeftCount + relativeIdx;
@@ -898,10 +706,12 @@ const SdTr = class {
             const span = this.getSpanFor(col);
             const sdCellClass = this.getCellClassFor(col);
             return (h("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
-                    td: true,
+                    'td': true,
                     [`td--${col.align || 'left'}`]: true,
+                    'td--last-row': this.isVisualLastRow(col),
+                    'td--before-separator': this.isVisualLastRowBeforeSeparator(col),
                     [`${col.tdClass}`]: Boolean(col.tdClass),
-                    [`${sdCellClass}`]: Boolean(sdCellClass),
+                    ...this.expandCellClass(sdCellClass),
                 }, style: this.getStickyStyle(actualColIdx) }, h("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, h("span", null, this.getCellValue(col)))));
         }), stickyRightCols.map((col, relativeIdx) => {
             const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
@@ -913,15 +723,17 @@ const SdTr = class {
             return (h("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
                     'td': true,
                     [`td--${col.align || 'left'}`]: true,
+                    'td--last-row': this.isVisualLastRow(col),
+                    'td--before-separator': this.isVisualLastRowBeforeSeparator(col),
                     'sticky-right': true,
                     'sticky-right-edge': relativeIdx === 0,
                     'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
                     [`${col.tdClass}`]: Boolean(col.tdClass),
-                    [`${sdCellClass}`]: Boolean(sdCellClass),
+                    ...this.expandCellClass(sdCellClass),
                 }, style: this.getStickyStyle(actualColIdx) }, h("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, h("span", null, this.getCellValue(col)))));
         }))));
     }
 };
 SdTr.style = sdTrCss();
 
-export { SdPagination as sd_pagination, SdSelect as sd_select, SdTbody as sd_tbody, SdThead as sd_thead, SdTr as sd_tr };
+export { SdPagination as sd_pagination, SdTbody as sd_tbody, SdThead as sd_thead, SdTr as sd_tr };