@sellmate/design-system 1.4.0 → 1.6.0

package/dist/collection/components/sd-select/sd-select-list-item-search/sd-select-list-item-search.js

@@ -41,15 +41,15 @@ export class SdSelectListItemSearch {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (h("div", { key: '0b8e55a2f39d72bc6fc5c7d8c6262c9fffb52ba7', class: {
+        return (h("div", { key: '8c0c85ac9c382e2978e32924c33a580a4fac3485', class: {
                 'sd-select-list-item-search': true,
                 'sd-select-list-item-search--scrolled': this.isScrolled,
-            } }, h("div", { key: '30c4f5d6c8002579da129cebb06c026c278fb555', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: 'be9076a1fd6d7fd9a1990fd9e32aebd04c1bc4b4', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: 'c9400184f607d0385e5e8c25615e1a955256c6f4', ref: el => {
+            } }, h("div", { key: '92425ff6eab4cf16f96f45dabb8f07c27ad9e747', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: '253a40e4e624e828e351d08c1f05fb2d098c8b9b', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: 'b38735ae6e75b9fe19ceb3038c5b873ad42760ef', ref: el => {
                 this.inputEl = el;
-            }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), h("button", { key: 'dcb18eff068dea3fcb9144c4dfd4500806f68753', type: "button", class: {
+            }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), h("button", { key: '8045fef5d1821ea60ac261ee07f7eddf8a7a189d', type: "button", class: {
                 'sd-select-list-item-search__clear': true,
                 'sd-select-list-item-search__clear--hidden': this.searchText === '',
-            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, h("sd-icon", { key: 'beb2cf23258aa1eaff2c9fdb63dae99570691af1', name: "close", size: 12, color: "#888888" })))));
+            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, h("sd-icon", { key: '110c0420fd17c51055cfc1815a528cf7c385d91e', name: "close", size: 12, color: "#888888" })))));
     }
     static get is() { return "sd-select-list-item-search"; }
     static get originalStyleUrls() {

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

@@ -348,9 +348,9 @@ export class SdSelectListbox {
             '--listbox-max-height': this.maxHeight ?? '260px',
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
         };
-        return (h("div", { key: '4173255a866459bf0aeb98d517263d12f1c39fa5', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: '79e7d48d7234ebfd32d3cd242822dfa93a73c151', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '22981c1e049d0d526af06bb5b563de5130c14477', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (h("div", { key: '7505e221ddb890880f0ba5088c3fdc76700e3b2f', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: '54b97ad40c5e7abe92b478689d09337843736652', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: 'f7417f923cc34cbb2c2a56ae70ed54701d013d3d', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
-            } }, this.showSelectAll && (h("sd-select-list-item", { key: '7acd37c5663bb101d6853cbd6629a78d402d6cde', 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: '5e8cfcb1f9f0953b9eaa6fc73de992b52a0a23d7', 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 is() { return "sd-select-listbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -42,7 +42,7 @@ export class SdSelectTrigger {
                 ? SELECT_COLORS.icon.disabled
                 : SELECT_COLORS.icon.default,
         };
-        return (h("div", { key: '6694f35a396f368d5df9860db30d817beddb8bec', ref: el => {
+        return (h("div", { key: '3a97ed909e3088528714682050a3986081e19433', ref: el => {
                 this.triggerEl = el;
             }, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
                 'sd-select-trigger': true,
@@ -53,7 +53,7 @@ export class SdSelectTrigger {
                     e.preventDefault();
                     this.handleClick();
                 }
-            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: 'd8ff247ca362a8fc3677d9803261343a1e891298', class: "sd-select-trigger__content" }, h("span", { key: 'cd81a7c7c135372aad80fa9391b160337632643c', class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택')), h("sd-icon", { key: '838c12e2a9ce06036eee766ffd2f88f3215b8420', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: '986faba7d79980f0bcd10fff32495d2100e1805f', class: "sd-select-trigger__content" }, h("span", { key: 'c51b268186de7cdabcf06ac3d540ccb570c9e865', class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택')), h("sd-icon", { key: '8a03b400d5aef2e0ca9aeb4b1f6122db2932455a', 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

@@ -254,15 +254,15 @@ export class SdSelect {
                 this.closeDropdown();
             },
         };
-        return (h("sd-field", { key: 'c433e21047632ae1e7901e11f6f9d83070f8d83c', 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: '3c188cbdd8c612e78780d18c03acc382d32080c9', 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: 'f04f2f331c27745035c35d96d5262398065589a8', class: "sd-select", ref: el => {
+            } }, h("div", { key: 'be596d399856ed966408ba1525fea9dbdf8fcc7e', class: "sd-select", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-select-trigger", { key: 'b66e83ff248618c815b155f27445f3da9e91361b', ref: el => {
+            } }, h("sd-select-trigger", { key: 'f8a29b1ac2469c60af8c7101d05157674566f00f', 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: 'bd5b46d8e4849d235e39a9d9cfc549fdbe260076', ...portalProps }, h("sd-select-listbox", { key: '81266da14ee4e59b4cedd4b364c18fea4d3c4f7f', 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: '3cef3f95f69b09d0e4e8f6b01615df4cca031cff', ...portalProps }, h("sd-select-listbox", { key: 'e8833c547aa2e8084754c7a439d3860df5c97e5b', 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-switch/sd-switch.js

@@ -40,7 +40,7 @@ export class SdSwitch {
             '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
             '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
         };
-        return (h("label", { key: 'ebb195a1bb93ae476b4bf3e697623809d626eed6', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: 'a6de6298d35c54ad83dc6285b90e67c8d3564d15', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: '7881f46be572edcfc82888564a7f85ad4207dd8e', class: "sd-switch__track" }, h("div", { key: 'c08c9d5894a6f9ddf3ecdaaa9253628478479043', class: "sd-switch__knob" })), this.label && h("span", { key: '4e01b185502829d8fb647d3eafaaf6565489b2f3', class: "sd-switch__label" }, this.label)));
+        return (h("label", { key: '04674e9fc781ac58b2e68ae30cb90c948de8b5e3', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: 'b87970c38aa2ccbe3d8f91414c96c2f05aaaa818', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: 'd87bcaf8b16d17401215dd962875dc585f747d65', class: "sd-switch__track" }, h("div", { key: '408a034cd6b063d9cd968f647995cc77dfdd0577', class: "sd-switch__knob" })), this.label && h("span", { key: '58d7ab18329007eac2e23b0fcda66a841e4df0c2', class: "sd-switch__label" }, this.label)));
     }
     static get is() { return "sd-switch"; }
     static get originalStyleUrls() {

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

@@ -47,7 +47,8 @@ export const TABLE_BORDER = {
 };
 export const TABLE_SEPARATOR = {
     color: tableTokens.table.separator.color,
-    width: tableTokens.table.separator.Width,
+    width: tableTokens.table.separator.width.default,
+    denseWidth: tableTokens.table.separator.width.dense,
 };
 export const TABLE_RADIUS = tableTokens.table.radius;
 // ── Content Tokens ──
@@ -71,6 +72,8 @@ export const TABLE_KEY_VALUE = {
     bodyPadding: tableTokens.table.keyValue.body.padding,
     height: tableTokens.table.keyValue.height,
 };
+// ── Selectable Column ──
+export const TABLE_SELECTABLE_COLUMN_WIDTH = 48;
 // ── Header Icon Color Defaults ──
 const ICON_DEFAULT_COLOR = {
     pageEdit: systemTokens.color.darkblue.strong,

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

@@ -28,7 +28,7 @@ sd-table *,
   border-radius: var(--table-radius, 8px);
   overflow: hidden;
 }
-.sd-table__wrapper--radius-use-top {
+.sd-table__wrapper--use-top {
   border-radius: 0 0 var(--table-radius, 8px) var(--table-radius, 8px);
 }
 

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, TABLE_BODY_LAYOUT, } from "./sd-table.config";
+import { TABLE_RADIUS, TABLE_BORDER, TABLE_BODY_TYPOGRAPHY, TABLE_BODY_LAYOUT, TABLE_SELECTABLE_COLUMN_WIDTH, } from "./sd-table.config";
 export class SdTable {
     static DEFAULT_NO_DATA_LABEL = '데이터가 없습니다.';
     el;
@@ -17,7 +17,7 @@ export class SdTable {
     height;
     stickyHeader = false;
     stickyColumn = { left: 0, right: 0 };
-    radius = 'default';
+    useTop = false;
     noDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
     resolvedNoDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
     isLoading = false;
@@ -77,8 +77,6 @@ export class SdTable {
     // 키: `${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이 사용된다.
@@ -209,6 +207,10 @@ export class SdTable {
         if (this.pagination?.rowsPerPage != null) {
             this.innerRowsPerPage = this.pagination.rowsPerPage;
         }
+        // host element 에 자식 컴포넌트(sd-thead/sd-tbody/sd-tr) 가 직접 접근하는 internal sync helpers 를 monkey-patch.
+        // 28개 메서드 전체를 typed interface 로 노출하면 코드 비용이 크고, 어차피 internal 이라 외부 사용자가 호출하지 않는다.
+        // 정식 @Method 노출로 옮기는 작업은 별도 이슈로 분리.
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const el = this.el;
         el.isRowSelectedSync = this.isRowSelectedSync.bind(this);
         el.updateRowSelectSync = this.updateRowSelectSync.bind(this);
@@ -227,9 +229,6 @@ export class SdTable {
         el.unregisterSpanSync = this.unregisterSpanSync.bind(this);
         el.getSpanSync = this.getSpanSync.bind(this);
         el.isCoveredSync = this.isCoveredSync.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);
@@ -325,7 +324,6 @@ export class SdTable {
             }
         });
     }
-    // light DOM(manual mode 자식)과 shadow DOM(autoThead/autoTbody fallback) 양쪽 모두에서 자식을 찾는다.
     queryChildEl(selector) {
         return (this.el.querySelector(selector) ??
             this.el.shadowRoot?.querySelector(selector) ??
@@ -353,12 +351,12 @@ export class SdTable {
     refreshChildrenSelection() {
         const thead = this.queryChildEl('sd-thead');
         thead?.refreshSelection?.();
-        this.queryAllTr().forEach(tr => tr?.refreshSelection?.());
+        this.queryAllTr().forEach(tr => tr.refreshSelection?.());
     }
     refreshChildrenConfig() {
         const thead = this.queryChildEl('sd-thead');
         thead?.refreshConfig?.();
-        this.queryAllTr().forEach(tr => tr?.refreshConfig?.());
+        this.queryAllTr().forEach(tr => tr.refreshConfig?.());
     }
     maybeEmitVirtualReachEnd(start, end) {
         const threshold = Math.max(1, this.virtualEndThreshold);
@@ -390,6 +388,7 @@ export class SdTable {
         this.vsEnd = end;
         const topHeight = start * this.effectiveRowHeight;
         const bottomHeight = Math.max(0, (this.rowCount - end) * this.effectiveRowHeight);
+        // setSpacersSync 는 sd-tbody 가 host element 에 monkey-patch 하는 internal sync helper.
         const tbody = this.queryChildEl('sd-tbody');
         tbody?.setSpacersSync?.(topHeight, bottomHeight);
         if (rangeChanged) {
@@ -510,7 +509,7 @@ export class SdTable {
         this.updateRowsVisibility();
     }
     updateRowsVisibility() {
-        this.queryAllTr().forEach(tr => tr?.updateVisibility?.());
+        this.queryAllTr().forEach(tr => tr.updateVisibility?.());
     }
     changeRowsPerPage(perPage) {
         const changedRowsPerPage = perPage != null && perPage !== '' ? Number(perPage) : 0;
@@ -549,7 +548,7 @@ export class SdTable {
             this.columnWidths = this.columnWidths.map((width, idx) => (idx === index ? newWidth : width));
             const thead = this.queryChildEl('sd-thead');
             thead?.setColumnWidths?.(this.columnWidths);
-            this.queryAllTr().forEach(tr => tr?.setColumnWidths?.(this.columnWidths));
+            this.queryAllTr().forEach(tr => tr.setColumnWidths?.(this.columnWidths));
             const stickyRightCount = this.stickyColumn?.right || 0;
             const visibleColCount = this.columns.filter(c => c.visible !== false).length;
             const isRightStickyEdgeResizer = stickyRightCount > 0 && index === visibleColCount - stickyRightCount;
@@ -569,7 +568,7 @@ export class SdTable {
     getStickyStyleSync(colIdx) {
         const leftOffset = this.columnWidths
             .slice(0, colIdx)
-            .reduce((a, b) => a + b, this.selectable ? 52 : 0);
+            .reduce((a, b) => a + b, this.selectable ? TABLE_SELECTABLE_COLUMN_WIDTH : 0);
         const rightOffset = this.columnWidths
             .filter((_, i) => i >=
             this.columns.filter(c => c.visible !== false).length -
@@ -604,9 +603,8 @@ export class SdTable {
     // 경우가 있어, sd-tr의 @State (spansVersion)을 통해 재렌더를 강제한다.
     requestAllTrUpdate() {
         this.queryAllTr().forEach(tr => {
-            const trAny = tr;
-            if (typeof trAny.bumpSpansVersion === 'function') {
-                trAny.bumpSpansVersion();
+            if (typeof tr.bumpSpansVersion === 'function') {
+                tr.bumpSpansVersion();
             }
             else {
                 forceUpdate(tr);
@@ -720,36 +718,6 @@ export class SdTable {
         }
         return false;
     }
-    // rowspan을 반영한 셀의 시각적 하단 행 인덱스를 반환한다.
-    // isVisualLastRowBeforeSeparatorSync 헬퍼.
-    resolveVisualBottom(rowKey, field) {
-        const myRowIdx = this.resolveRowIndex(rowKey);
-        if (myRowIdx == null)
-            return null;
-        const span = this.spanRegistry.get(this.spanKey(rowKey, field));
-        const rs = Math.max(1, span?.rowspan ?? 1);
-        return myRowIdx + rs - 1;
-    }
-    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) {
@@ -845,26 +813,27 @@ export class SdTable {
             '--table-body-font-size': `${TABLE_BODY_TYPOGRAPHY.fontSize}px`,
             '--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
             '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
+            '--table-selectable-width': `${TABLE_SELECTABLE_COLUMN_WIDTH}px`,
         };
-        return (h(Host, { key: '2b7c1eaf862c45c73751af6035a022e8ce0314b4', style: hostStyle }, h("div", { key: '35851e539eef8ff69ff03bd31f5d55d95eb8bf7a', class: "sd-table__container", style: {
+        return (h(Host, { key: '4596e04bd57aca00fa6378fd26ce33a06a795eaf', style: hostStyle }, h("div", { key: '11a20d327410b0be659cede32917164e036e796c', class: "sd-table__container", style: {
                 '--table-width': this.width,
                 '--table-height': effectiveTableHeight,
                 '--table-container-height': `calc(${effectiveTableHeight} - ${paginationHeight}px)`,
-            } }, h("div", { key: 'e3bf5576fd1b1ee9ffab5d240de904204f4288d5', class: {
+            } }, h("div", { key: 'f4f3acf584dc4eacdae25b11aa2b62b73ffab949', class: {
                 'sd-table__wrapper': true,
-                'sd-table__wrapper--radius-use-top': this.radius === 'useTop',
-            } }, h("div", { key: 'a67ebcb802a3ed443cca1fc33a00787642e08e84', class: {
+                'sd-table__wrapper--use-top': this.useTop,
+            } }, h("div", { key: 'c8ab618b9c990a22b8e9466a5bfb5f02f4de8b12', class: {
                 'sd-table__scroll-container': true,
                 'sd-table__scroll-container--loading': this.isLoading,
                 'sd-table__scroll-container--no-data': isNoData,
-            } }, this.isLoading && (h("div", { key: '2cdaff94dab50598c05364930dd3e763a6f2f79a', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '49211d7555a38996d3fd9cfce0df50bb626fa1d6', indeterminate: true }))), isNoData && (h(h.Fragment, null, h("div", { key: '3da9d42ecedbdc63858a06040f0e22d265a8183b', class: "sd-table__no-data-header-overlay" }), h("div", { key: '20b5d8be682572a4ddbce21b6cd265894d014499', class: "sd-table__no-data" }, h("div", { key: 'a024fa084f4a137a70fe176cee6918b4f701fd42', class: "sd-table__no-data-content", ref: el => {
+            } }, this.isLoading && (h("div", { key: 'a696933a70799ba282fc743281d0af27fd691a2e', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: 'cba6ac47367ef6499bf338b9b757ee74fdd7e6c1', indeterminate: true }))), isNoData && (h(h.Fragment, null, h("div", { key: '6e22156bf5b0fb9814d9bf9cad57506758c6284b', class: "sd-table__no-data-header-overlay" }), h("div", { key: 'b72f9fabcc8acb8e700ad55acc4d7aff08355a1c', class: "sd-table__no-data" }, h("div", { key: '43f271a8803121362f16e8153748328658f073ec', class: "sd-table__no-data-content", ref: el => {
                 this.noDataContentEl = el;
                 if (el)
                     this.syncNoDataContentObserver();
-            } }, h("slot", { key: '9603eefa63fd5bc05dfa132c6be2302497d4c228', name: "no-data" }, h("span", { key: '0dad4e143d8251e375f748d1e5e1a77909fab164' }, this.resolvedNoDataLabel)))))), h("table", { key: '83325a8970f18bb9cf7a78dc665d16a24edc18da', 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 &&
+            } }, h("slot", { key: '4b8533115bbc81962b80c9c2533fe4b44a87193c', name: "no-data" }, h("span", { key: 'd94c4f7cf9eca7901b99434f712480a7b20c869a' }, this.resolvedNoDataLabel)))))), h("table", { key: 'a9a353aca09124ed8a82fcd2f8a0a7de09b234f5', 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: '935b0f916cbc1de29a7f6b3805a5a3c25eaba467', class: "sd-table__pagination" }, h("sd-pagination", { key: '7faad5d0b2efe652a9ed989910551aa8bc5592ec', 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: 'd514c41459a60ac47ffcd476a635c47386232c50', value: this.useInternalPagination
+            !this.useVirtualScroll && (h("div", { key: '8afeb9398c3d7540a54b9a3660fb9685ae1cddca', class: "sd-table__pagination" }, h("sd-pagination", { key: 'e2cbb3f7414f65b81ab2d33eaec5d9f28bed6cc8', 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: 'ce723544dbc7e4cc0d77ced3b685b8575cf67e6f', value: this.useInternalPagination
                 ? this.innerRowsPerPage
                 : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
                 if (!this.isRowsPerPageValue(e.detail))
@@ -1123,12 +1092,12 @@ export class SdTable {
                 "setter": false,
                 "defaultValue": "{ left: 0, right: 0 }"
             },
-            "radius": {
-                "type": "string",
+            "useTop": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "'default' | 'useTop'",
-                    "resolved": "\"default\" | \"useTop\"",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
@@ -1140,8 +1109,8 @@ export class SdTable {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "radius",
-                "defaultValue": "'default'"
+                "attribute": "use-top",
+                "defaultValue": "false"
             },
             "noDataLabel": {
                 "type": "string",

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

@@ -45,9 +45,9 @@ export class SdTbody {
         }
     }
     render() {
-        return (h(Host, { key: 'bdb686445ce324c6254891a385d6175c8cac06df', slot: `${this.tableId}-body` }, h("tbody", { key: '21a7772f0d43a358d9ae17459f0ff296324bfd82', class: { tbody: true } }, [
+        return (h(Host, { key: 'cee6094ac768af309c39500cb337d8516de6aabe', slot: `${this.tableId}-body` }, h("tbody", { key: '50d46c6b102900b18a96c1e345afb4185e59e0ae', class: { tbody: true } }, [
             this.topSpacerHeight > 0 && (h("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
-            h("slot", { key: 'e38d8fe5d67a91d3fa5a25be98195da104660005' }),
+            h("slot", { key: 'd4f8057c143b2f91146831fac2b4ba1162d36aeb' }),
             this.bottomSpacerHeight > 0 && (h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
         ])));
     }

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

@@ -150,7 +150,7 @@ export class SdTd {
         }
     }
     render() {
-        return (h(Host, { key: '505b602b609050870e7e80df9157dbc50d0cb8c1', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: '9910f02d98ce5e115b2a380954dd0a994f9f1c12' })));
+        return (h(Host, { key: '1d7123e1f35cfb513a1fa89b4d60f8dde7715a2f', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: 'f7b9266106a6df93e2101ca9a324035960281a6f' })));
     }
     static get is() { return "sd-td"; }
     static get originalStyleUrls() {

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

@@ -42,11 +42,10 @@ sd-thead * {
 }
 .th--selected {
   position: relative;
-  width: 52px !important;
-  max-width: 52px !important;
-  min-width: 52px !important;
-  padding: 0 10px 0 24px;
-  text-align: left;
+  width: var(--table-selectable-width, 48px) !important;
+  max-width: var(--table-selectable-width, 48px) !important;
+  min-width: var(--table-selectable-width, 48px) !important;
+  text-align: center;
 }
 .th--selected sd-checkbox label {
   position: relative;
@@ -133,6 +132,17 @@ sd-thead * {
   word-break: keep-all;
 }
 
+.th__bar {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  width: var(--table-border-width, 1px);
+  height: var(--table-header-resizer-height, 16px);
+  z-index: 3;
+  background-color: var(--table-header-resizer-color, #CCCCCC);
+}
+
 .th__resizer {
   position: absolute;
   top: 50%;

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

@@ -1,6 +1,6 @@
 import { h, Host, } from "@stencil/core";
 import { TABLE_ID_ATTR, } from "../constants";
-import { resolveTableIconColor, resolveSortIconName, TABLE_HEADER_LAYOUT, TABLE_HEADER_TYPOGRAPHY, TABLE_HEADER_COLORS, TABLE_HEADER_RESIZING_BAR, TABLE_BORDER, } from "../sd-table.config";
+import { resolveTableIconColor, resolveSortIconName, TABLE_HEADER_LAYOUT, TABLE_HEADER_TYPOGRAPHY, TABLE_HEADER_COLORS, TABLE_HEADER_RESIZING_BAR, TABLE_BORDER, TABLE_SELECTABLE_COLUMN_WIDTH, } from "../sd-table.config";
 export class SdThead {
     el;
     columns;
@@ -96,7 +96,8 @@ export class SdThead {
         if (this.tableEl?.getStickyStyleSync) {
             return this.tableEl.getStickyStyleSync(colIdx);
         }
-        const leftOffset = this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) + (this._selectable ? 52 : 0);
+        const leftOffset = this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) +
+            (this._selectable ? TABLE_SELECTABLE_COLUMN_WIDTH : 0);
         const rightOffset = this.columnWidths
             .filter((_, i) => i >= this.visibleColumns.length - (this._stickyColumn.right || 0) && i > colIdx)
             .reduce((a, b) => a + b, 0);
@@ -157,16 +158,16 @@ export class SdThead {
             '--table-border-color': TABLE_BORDER.color,
             '--table-border-width': `${TABLE_BORDER.width}px`,
         };
-        return (h(Host, { key: 'c2852fc7d6fe9e8116fabbbcc140f4db8319bfdc', slot: `${this.tableId}-head`, style: headStyle }, h("thead", { key: '970cb1c96145326f38b79636a72982b0e9c81fa0', class: {
+        return (h(Host, { key: '2b949f43561a2cd36b82de324d3d8c0d8a1d8431', slot: `${this.tableId}-head`, style: headStyle }, h("thead", { key: '45918bfb1dc44bb0f45a0f1646bf2276b1ca74ec', class: {
                 'thead': true,
                 'thead--sticky': this._stickyHeader,
-            } }, h("tr", { key: '839fb6e9fd68ef10dea1f1d470a6b3e707475a8d', class: "tr" }, this._selectable && (h("th", { key: 'd669372261627013bc1b39157139d180b3d1a6c1', class: {
+            } }, h("tr", { key: '3802f86a730041ca405071b243a99c28e04558d2', class: "tr" }, this._selectable && (h("th", { key: 'd60e1323fca90516f38cedfa6fc8bf17840fad5d', 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: '6263984430b4aa53e6ac24fb0f6a6c05838a71d5', value: this.getIsAllChecked(), disabled: safeRows.length === 0, 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: '0c0b61405a8624cfc1d803f8ae8905d74d6c10f1', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), h("div", { key: 'b808a627e740a9c3a9f6f03e32cf90e598fd506f', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
                 'th': true,
                 [`${col.thClass}`]: Boolean(col.thClass),
                 'sticky-left': true,

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

@@ -41,11 +41,10 @@ sd-tr * {
 }
 .td--selected {
   position: relative;
-  width: 52px !important;
-  max-width: 52px !important;
-  min-width: 52px !important;
-  padding: 0 10px 0 24px;
-  text-align: left;
+  width: var(--table-selectable-width, 48px) !important;
+  max-width: var(--table-selectable-width, 48px) !important;
+  min-width: var(--table-selectable-width, 48px) !important;
+  text-align: center;
 }
 .td--selected sd-checkbox label {
   position: relative;
@@ -133,8 +132,8 @@ sd-tr * {
   border-bottom: none;
 }
 
-.td.td--before-separator {
-  border-bottom: none;
+.tr--separator--dense .td--separator {
+  height: var(--table-separator-dense-width, 4px);
 }
 
 .td--divider-left {

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

@@ -8,7 +8,7 @@ export class SdTr {
     stickyColumn;
     rowKey = '';
     row = {};
-    separator;
+    separator = null;
     tableId = '';
     columnWidths = [];
     isVisible = true;
@@ -20,8 +20,8 @@ export class SdTr {
     _scrolledRight = false;
     _dense = false;
     tableEl = null;
-    _prevRowKey = null;
     componentWillLoad() {
+        this.row = this.row ?? {};
         this.syncTableContext();
         this.columnWidths = this.columnWidths ?? [];
         this.resolveConfig();
@@ -30,20 +30,6 @@ export class SdTr {
     }
     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가 경계를 못 넘는다.
@@ -185,17 +171,6 @@ export class SdTr {
             .filter(Boolean)
             .map(c => [c, true]));
     }
-    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;
@@ -221,15 +196,16 @@ export class SdTr {
             '--table-border-width': `${TABLE_BORDER.width}px`,
             '--table-separator-color': TABLE_SEPARATOR.color,
             '--table-separator-width': `${TABLE_SEPARATOR.width}px`,
+            '--table-separator-dense-width': `${TABLE_SEPARATOR.denseWidth}px`,
         };
-        if (this.separator) {
+        if (this.separator != null) {
             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" }))));
+            const isDense = this.separator === 4;
+            return (h(Host, { style: rowStyle }, h("tr", { class: { 'tr': true, 'tr--separator': true, 'tr--separator--dense': isDense } }, 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--before-separator': this.isVisualLastRowBeforeSeparatorForSelfRow(),
                 'sticky-left': true,
                 'sticky-left-edge': stickyLeftCount === 0,
                 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
@@ -242,7 +218,6 @@ export class SdTr {
             return (h("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
                     'td': true,
                     [`td--${col.align || 'left'}`]: true,
-                    'td--before-separator': this.isVisualLastRowBeforeSeparator(col),
                     'sticky-left': true,
                     'sticky-left-edge': idx === stickyLeftCount - 1,
                     'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
@@ -257,12 +232,14 @@ export class SdTr {
             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--before-separator': this.isVisualLastRowBeforeSeparator(col),
                     [`${col.tdClass}`]: Boolean(col.tdClass),
                     ...this.expandCellClass(sdCellClass),
-                }, style: { ...this.getStickyStyle(actualColIdx), ...this.getFramePaddingStyle(fieldName) } }, h("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, h("span", null, this.getCellValue(col)))));
+                }, style: {
+                    ...this.getStickyStyle(actualColIdx),
+                    ...this.getFramePaddingStyle(fieldName),
+                } }, 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;
             if (this.isCovered(actualColIdx))
@@ -273,13 +250,15 @@ export class SdTr {
             return (h("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
                     'td': true,
                     [`td--${col.align || 'left'}`]: true,
-                    '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),
                     ...this.expandCellClass(sdCellClass),
-                }, style: { ...this.getStickyStyle(actualColIdx), ...this.getFramePaddingStyle(fieldName) } }, h("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, h("span", null, this.getCellValue(col)))));
+                }, style: {
+                    ...this.getStickyStyle(actualColIdx),
+                    ...this.getFramePaddingStyle(fieldName),
+                } }, h("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, h("span", null, this.getCellValue(col)))));
         }))));
     }
     static get is() { return "sd-tr"; }
@@ -408,11 +387,11 @@ export class SdTr {
                 "defaultValue": "{}"
             },
             "separator": {
-                "type": "boolean",
+                "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean | undefined",
+                    "original": "'4' | '6' | 4 | 6 | null",
+                    "resolved": "\"4\" | \"6\" | 4 | 6 | null | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -424,7 +403,8 @@ export class SdTr {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "separator"
+                "attribute": "separator",
+                "defaultValue": "null"
             }
         };
     }

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

@@ -67,7 +67,7 @@ export class SdTabs {
         };
     }
     render() {
-        return (h("div", { key: '880f1aa80c29f2d578ffe2d5e5e5e0c008c898d3', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
+        return (h("div", { key: '92384577bf4ce85de90ae05a32e44715e595fe16', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
             const badgeName = this.getBadgeName(tab);
             return (h("div", { key: `tab-${index}`, role: "tab", tabindex: 0, "aria-selected": tab.value === this.value ? 'true' : 'false', class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab), onKeyDown: e => {
                     if (e.key === 'Enter' || e.key === ' ') {