@sellmate/design-system 1.3.0 → 1.4.0

package/dist/types/components/sd-table/sd-tr/sd-tr.d.ts

@@ -39,9 +39,8 @@ export declare class SdTr {
     private getSpanFor;
     private isCovered;
     private getCellClassFor;
+    private getFramePaddingStyle;
     private expandCellClass;
-    private isVisualLastRow;
-    private isVisualLastRowForSelfRow;
     private isVisualLastRowBeforeSeparator;
     private isVisualLastRowBeforeSeparatorForSelfRow;
     render(): any;

package/hydrate/index.js

@@ -6718,7 +6718,7 @@ const CALENDAR_LAYOUT = {
 };
 const WEEK_LABELS = ['일', '월', '화', '수', '목', '금', '토'];
 
-const sdCalendarCss = () => `sd-calendar{display:block}sd-calendar .sd-calendar{display:flex;flex-direction:column;gap:var(--calendar-gap);width:328px;min-height:328px;padding:var(--calendar-padding);background:var(--calendar-bg);border-radius:var(--calendar-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);user-select:none}sd-calendar .sd-calendar__header{display:flex;align-items:center;justify-content:center;gap:var(--calendar-header-gap);font-size:var(--calendar-header-font-size);line-height:var(--calendar-header-line-height);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text)}sd-calendar .sd-calendar__nav-group{display:inline-flex;align-items:center;gap:var(--calendar-gap)}sd-calendar .sd-calendar__nav-group-month{width:100%}sd-calendar .sd-calendar__label{display:inline-flex;align-items:center;justify-content:center;min-width:40px;text-align:center}sd-calendar .sd-calendar__label-month{width:100%}sd-calendar .sd-calendar__divider{display:inline-block;width:1px;height:16px;background:var(--calendar-header-divider)}sd-calendar .sd-calendar__week{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size))}sd-calendar .sd-calendar__week-cell{display:inline-flex;align-items:center;justify-content:center;height:20px;font-size:var(--calendar-week-font-size);line-height:var(--calendar-week-line-height);font-weight:var(--calendar-week-font-weight);color:var(--calendar-week-color)}sd-calendar .sd-calendar__grid{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size));row-gap:var(--calendar-grid-row-gap)}sd-calendar .sd-calendar__day{display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-start;width:var(--calendar-day-size);min-height:var(--calendar-day-circle-size);padding:0;border:none;background:transparent;cursor:pointer;font-size:var(--calendar-day-font-size);line-height:var(--calendar-day-line-height);font-weight:var(--calendar-day-font-weight);color:var(--calendar-day-text)}sd-calendar .sd-calendar__day-circle{display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-day-circle-size);height:var(--calendar-day-circle-size);border-radius:calc(var(--calendar-day-circle-radius) * 1px);border:1px solid transparent;box-sizing:border-box}sd-calendar .sd-calendar__day:not(:disabled):hover .sd-calendar__day-circle{border-radius:16px;border:1px solid var(--calendar-day-hover-border)}sd-calendar .sd-calendar__day--today .sd-calendar__day-circle{font-weight:700}sd-calendar .sd-calendar__day--selected .sd-calendar__day-circle{border-radius:16px;background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-calendar .sd-calendar__day--selected:not(:disabled):hover .sd-calendar__day-circle{background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-calendar .sd-calendar__day--disabled{color:var(--calendar-day-disabled-text);background:none !important;cursor:not-allowed}sd-calendar .sd-calendar__day--empty{visibility:hidden;pointer-events:none}sd-calendar .sd-calendar__dot-row{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--calendar-day-dot-gap);width:100%;padding-top:var(--calendar-day-dot-padding-y);padding-bottom:var(--calendar-day-dot-padding-y)}sd-calendar .sd-calendar__dot{display:inline-block;width:var(--calendar-day-dot-size);height:var(--calendar-day-dot-size);border-radius:50%}sd-calendar .sd-calendar__divider-bottom{display:block;width:100%;height:1px;background:var(--calendar-header-divider)}sd-calendar .sd-calendar__legend{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;column-gap:var(--calendar-legend-group-gap);row-gap:4px;font-size:var(--calendar-legend-font-size);line-height:var(--calendar-legend-line-height);font-weight:var(--calendar-legend-font-weight);color:var(--calendar-day-text)}sd-calendar .sd-calendar__legend-item{display:inline-flex;align-items:center;gap:var(--calendar-legend-gap)}sd-calendar .sd-calendar__legend-dot{display:inline-block;width:var(--calendar-day-dot-size);height:var(--calendar-day-dot-size);border-radius:50%;flex-shrink:0}sd-calendar .sd-calendar__legend-label{display:inline-block}`;
+const sdCalendarCss = () => `sd-calendar{display:block}sd-calendar .sd-calendar{display:flex;flex-direction:column;gap:var(--calendar-gap);width:328px;min-height:328px;padding:var(--calendar-padding);background:var(--calendar-bg);border-radius:var(--calendar-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);user-select:none}sd-calendar .sd-calendar__header{display:flex;align-items:center;justify-content:center;gap:var(--calendar-header-gap);font-size:var(--calendar-header-font-size);line-height:var(--calendar-header-line-height);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text)}sd-calendar .sd-calendar__nav-group{display:inline-flex;align-items:center;gap:var(--calendar-gap)}sd-calendar .sd-calendar__nav-group-month{width:100%}sd-calendar .sd-calendar__label{display:inline-flex;align-items:center;justify-content:center;min-width:40px;text-align:center}sd-calendar .sd-calendar__label-month{width:100%}sd-calendar .sd-calendar__divider{display:inline-block;width:1px;height:16px;background:var(--calendar-header-divider)}sd-calendar .sd-calendar__week{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size))}sd-calendar .sd-calendar__week-cell{display:inline-flex;align-items:center;justify-content:center;height:20px;font-size:var(--calendar-week-font-size);line-height:var(--calendar-week-line-height);font-weight:var(--calendar-week-font-weight);color:var(--calendar-week-color)}sd-calendar .sd-calendar__grid{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size));row-gap:var(--calendar-grid-row-gap)}sd-calendar .sd-calendar__day{display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-start;width:var(--calendar-day-size);min-height:var(--calendar-day-circle-size);padding:0;border:none;background:transparent;cursor:pointer;font-size:var(--calendar-day-font-size);line-height:var(--calendar-day-line-height);font-weight:var(--calendar-day-font-weight);color:var(--calendar-day-text)}sd-calendar .sd-calendar__day-circle{display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-day-circle-size);height:var(--calendar-day-circle-size);border-radius:calc(var(--calendar-day-circle-radius) * 1px);border:1px solid transparent;box-sizing:border-box}sd-calendar .sd-calendar__day:not(:disabled):hover .sd-calendar__day-circle{border-radius:16px;border:1px solid var(--calendar-day-hover-border)}sd-calendar .sd-calendar__day--today .sd-calendar__day-circle{font-weight:700}sd-calendar .sd-calendar__day--selected .sd-calendar__day-circle{border-radius:16px;background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-calendar .sd-calendar__day--selected:not(:disabled):hover .sd-calendar__day-circle{background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-calendar .sd-calendar__day--disabled{color:var(--calendar-day-disabled-text);background:none !important;cursor:not-allowed}sd-calendar .sd-calendar__day--empty{visibility:hidden;pointer-events:none}sd-calendar .sd-calendar__dot-row{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--calendar-day-dot-gap);box-sizing:border-box;width:100%;min-height:14px;padding-top:var(--calendar-day-dot-padding-y);padding-bottom:var(--calendar-day-dot-padding-y)}sd-calendar .sd-calendar__dot{display:inline-block;width:var(--calendar-day-dot-size);height:var(--calendar-day-dot-size);border-radius:50%}sd-calendar .sd-calendar__divider-bottom{display:block;width:100%;height:1px;background:var(--calendar-header-divider)}sd-calendar .sd-calendar__legend{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;column-gap:var(--calendar-legend-group-gap);row-gap:4px;font-size:var(--calendar-legend-font-size);line-height:var(--calendar-legend-line-height);font-weight:var(--calendar-legend-font-weight);color:var(--calendar-day-text)}sd-calendar .sd-calendar__legend-item{display:inline-flex;align-items:center;gap:var(--calendar-legend-gap)}sd-calendar .sd-calendar__legend-dot{display:inline-block;width:var(--calendar-day-dot-size);height:var(--calendar-day-dot-size);border-radius:50%;flex-shrink:0}sd-calendar .sd-calendar__legend-label{display:inline-block}`;
 
 class SdCalendar {
     constructor(hostRef) {
@@ -6894,7 +6894,8 @@ class SdCalendar {
         };
         const eventMap = this.eventMap;
         const legend = this.legendItems;
-        return (hAsync("div", { key: '66c0bec57c13af12b05f2e90fbc5e1674ab052c8', class: "sd-calendar", style: cssVars }, hAsync("div", { key: '4df4f1c6d1ddcbe1478a69a481a228e66fc33c0a', class: "sd-calendar__header" }, hAsync("div", { key: '378c04444b3ddcc7df92ecce0f49056e919cd8e5', class: "sd-calendar__nav-group" }, hAsync("sd-ghost-button", { key: '47426c62a26b05a9db58144acc33770713e7fce4', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), hAsync("span", { key: '3b32e76a8a35705d820803c0b747829370079324', class: "sd-calendar__label" }, this.currentYear), hAsync("sd-ghost-button", { key: '2e890a2cea91c9f49a03f0db3a4b943c707e312e', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), hAsync("span", { key: '795bb8452e75303c25a8dc6d95f819f1e42f7f49', class: "sd-calendar__divider", "aria-hidden": "true" }), hAsync("div", { key: '6df460ec38917c51eff851732c7f37b7e09475f6', class: "sd-calendar__nav-group sd-calendar__nav-group-month" }, hAsync("sd-ghost-button", { key: '36ef9dfdcfac5d9da08d05ca357fc9ec4100af4f', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), hAsync("span", { key: 'b2e0cc74570724c0d97fb2afbcb775c0794583af', class: "sd-calendar__label sd-calendar__label-month" }, this.currentMonth, "\uC6D4"), hAsync("sd-ghost-button", { key: '4c45467356411f7a5d137c19931d8fc62084c742', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), hAsync("div", { key: 'e1637a39795fb44bd33d138c8b244cc15b5f85f6', class: "sd-calendar__week" }, WEEK_LABELS.map(label => (hAsync("span", { key: label, class: "sd-calendar__week-cell" }, label)))), hAsync("div", { key: '45642dc93b1373dc760f64ba74dd931e651279dd', class: "sd-calendar__grid" }, this.cells.map(cell => {
+        const hasEvents = (this.events?.length ?? 0) > 0;
+        return (hAsync("div", { key: '79cfdb58f8d44085c87cfea6458e60654bfa09bb', class: "sd-calendar", style: cssVars }, hAsync("div", { key: '065620bcd155de11ef2272720de57ef6fcd9fd20', class: "sd-calendar__header" }, hAsync("div", { key: 'ae27c8fe51c44137932b18cc83b64dcce7e2bbaa', class: "sd-calendar__nav-group" }, hAsync("sd-ghost-button", { key: '8207f6d77705999419f451db032c059564ea0c17', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), hAsync("span", { key: 'b5bf63784dd06c3ce5a4d4c5514fea22efb08793', class: "sd-calendar__label" }, this.currentYear), hAsync("sd-ghost-button", { key: '14512de68825e3b158704c3084306029ade8fcc1', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), hAsync("span", { key: 'e37eb90d72c2e64b8ebb1da4ddf3fccb7ff18cc3', class: "sd-calendar__divider", "aria-hidden": "true" }), hAsync("div", { key: '07b1696b663ddb992e5a8d8b5ab98205ba136d9d', class: "sd-calendar__nav-group sd-calendar__nav-group-month" }, hAsync("sd-ghost-button", { key: 'b742889a44643d3e4d3b6da90784923c40e5a07f', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), hAsync("span", { key: 'c97402106312c3a6eb220798263ba818419e7d27', class: "sd-calendar__label sd-calendar__label-month" }, this.currentMonth, "\uC6D4"), hAsync("sd-ghost-button", { key: '55411b1328acb781d71a7a84996d2a29886612cd', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), hAsync("div", { key: 'd10b03d31be412b545999d7e70bd9a349e5f1880', class: "sd-calendar__week" }, WEEK_LABELS.map(label => (hAsync("span", { key: label, class: "sd-calendar__week-cell" }, label)))), hAsync("div", { key: '0b8f82db3753fe08435b07dee695d49a192786c0', class: "sd-calendar__grid" }, this.cells.map(cell => {
             const isSelected = cell.inCurrentMonth && this.value !== '' && this.value === cell.date;
             const isToday = cell.inCurrentMonth && today === cell.date;
             const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);
@@ -6905,10 +6906,10 @@ class SdCalendar {
                     'sd-calendar__day--today': isToday,
                     'sd-calendar__day--selected': isSelected,
                     'sd-calendar__day--disabled': isDisabled,
-                }, disabled: !cell.inCurrentMonth || isDisabled, tabindex: !cell.inCurrentMonth ? -1 : undefined, "aria-hidden": !cell.inCurrentMonth ? 'true' : undefined, onClick: () => cell.inCurrentMonth && this.handleDayClick(cell) }, hAsync("span", { class: "sd-calendar__day-circle" }, cell.inCurrentMonth ? cell.day : ''), dayEvents && dayEvents.length > 0 && (hAsync("span", { class: "sd-calendar__dot-row", "aria-hidden": "true" }, dayEvents.map((ev, i) => (hAsync("span", { key: `${ev.color}|${ev.label}|${i}`, class: "sd-calendar__dot", style: { backgroundColor: ev.color } })))))));
+                }, disabled: !cell.inCurrentMonth || isDisabled, tabindex: !cell.inCurrentMonth ? -1 : undefined, "aria-hidden": !cell.inCurrentMonth ? 'true' : undefined, onClick: () => cell.inCurrentMonth && this.handleDayClick(cell) }, hAsync("span", { class: "sd-calendar__day-circle" }, cell.inCurrentMonth ? cell.day : ''), hasEvents && (hAsync("span", { class: "sd-calendar__dot-row", "aria-hidden": "true" }, dayEvents?.map((ev, i) => (hAsync("span", { key: `${ev.color}|${ev.label}|${i}`, class: "sd-calendar__dot", style: { backgroundColor: ev.color } })))))));
         })), legend.length > 0 && [
-            hAsync("span", { key: '0872cb7627db7d33721fbd1e1c9a601bd3c6c3e1', class: "sd-calendar__divider-bottom", "aria-hidden": "true" }),
-            hAsync("div", { key: 'd9c6be0684720aa9d2af24b2d0cf372a036dc8d5', class: "sd-calendar__legend" }, legend.map(item => (hAsync("span", { key: `${item.color}|${item.label}`, class: "sd-calendar__legend-item" }, hAsync("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: item.color }, "aria-hidden": "true" }), hAsync("span", { class: "sd-calendar__legend-label" }, item.label))))),
+            hAsync("span", { key: 'a837c5956da658561fcbd2e646b0abbb0fa84a20', class: "sd-calendar__divider-bottom", "aria-hidden": "true" }),
+            hAsync("div", { key: '190b9947e5ecd627fad03b40c58c2e0c8719daaa', class: "sd-calendar__legend" }, legend.map(item => (hAsync("span", { key: `${item.color}|${item.label}`, class: "sd-calendar__legend-item" }, hAsync("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: item.color }, "aria-hidden": "true" }), hAsync("span", { class: "sd-calendar__legend-label" }, item.label))))),
         ]));
     }
     static get watchers() { return {
@@ -10711,6 +10712,9 @@ const table = {
 			paddingY: "6"
 		},
 		paddingX: "16",
+		frame: {
+			padding: "8"
+		},
 		typography: {
 			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
 			fontWeight: "400",
@@ -14364,7 +14368,9 @@ const TABLE_BODY_LAYOUT = {
         height: tableTokens.table.body.dense.height,
         paddingY: tableTokens.table.body.dense.paddingY,
     },
-    paddingX: tableTokens.table.body.paddingX};
+    paddingX: tableTokens.table.body.paddingX,
+    framePadding: tableTokens.table.body.frame.padding,
+};
 const TABLE_BODY_TYPOGRAPHY = {
     fontFamily: tableTokens.table.body.typography.fontFamily,
     fontWeight: tableTokens.table.body.typography.fontWeight,
@@ -14433,7 +14439,9 @@ class SdTable {
     get effectiveRowHeight() {
         if (this.rowHeight != null)
             return this.rowHeight;
-        return this.dense ? Number(TABLE_BODY_LAYOUT.dense.height) : Number(TABLE_BODY_LAYOUT.default.height);
+        return this.dense
+            ? Number(TABLE_BODY_LAYOUT.dense.height)
+            : Number(TABLE_BODY_LAYOUT.default.height);
     }
     virtualBuffer = 5;
     virtualEndThreshold = 10;
@@ -14627,7 +14635,6 @@ class SdTable {
         el.unregisterSpanSync = this.unregisterSpanSync.bind(this);
         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);
@@ -14638,6 +14645,7 @@ class SdTable {
         el.registerUseFrameSync = this.registerUseFrameSync.bind(this);
         el.unregisterUseFrameSync = this.unregisterUseFrameSync.bind(this);
         el.hasUseFrameInRowSync = this.hasUseFrameInRowSync.bind(this);
+        el.isCellUseFrameSync = this.isCellUseFrameSync.bind(this);
         if (Array.isArray(this.rows)) {
             this.rowCount = this.rows.length;
             this.pushRowsToChildren(this.rows);
@@ -14715,8 +14723,15 @@ class SdTable {
             }
         });
         this.noDataContentResizeObserver.observe(target);
-        const measured = Math.ceil(target.scrollHeight);
-        this.noDataBodyHeight = Math.max(60, measured);
+        readTask(() => {
+            if (!this.noDataContentEl)
+                return;
+            const measured = Math.ceil(this.noDataContentEl.scrollHeight);
+            const next = Math.max(60, measured);
+            if (next !== this.noDataBodyHeight) {
+                this.noDataBodyHeight = next;
+            }
+        });
     }
     // light DOM(manual mode 자식)과 shadow DOM(autoThead/autoTbody fallback) 양쪽 모두에서 자식을 찾는다.
     queryChildEl(selector) {
@@ -14840,6 +14855,9 @@ class SdTable {
         const fields = this.useFrameRegistry.get(rowKey);
         return fields != null && fields.size > 0;
     }
+    isCellUseFrameSync(rowKey, field) {
+        return this.useFrameRegistry.get(rowKey)?.has(field) ?? false;
+    }
     isRowSelectedSync(row) {
         return Array.from(this.innerSelected).some(r => r[this.rowKey ?? 'id'] === row[this.rowKey ?? 'id']);
     }
@@ -15108,7 +15126,7 @@ class SdTable {
         return false;
     }
     // rowspan을 반영한 셀의 시각적 하단 행 인덱스를 반환한다.
-    // isVisualLastRowSync·isVisualLastRowBeforeSeparatorSync 공통 헬퍼.
+    // isVisualLastRowBeforeSeparatorSync 헬퍼.
     resolveVisualBottom(rowKey, field) {
         const myRowIdx = this.resolveRowIndex(rowKey);
         if (myRowIdx == null)
@@ -15117,20 +15135,6 @@ class SdTable {
         const rs = Math.max(1, span?.rowspan ?? 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)
@@ -15247,25 +15251,25 @@ class SdTable {
             '--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
             '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
         };
-        return (hAsync(Host, { key: '02d716bdac3832710bf58d63741aeeb4b04d434b', style: hostStyle }, hAsync("div", { key: '88faad346e032ca727375889aa0552a330f5799a', class: "sd-table__container", style: {
+        return (hAsync(Host, { key: '2b7c1eaf862c45c73751af6035a022e8ce0314b4', style: hostStyle }, hAsync("div", { key: '35851e539eef8ff69ff03bd31f5d55d95eb8bf7a', class: "sd-table__container", style: {
                 '--table-width': this.width,
                 '--table-height': effectiveTableHeight,
                 '--table-container-height': `calc(${effectiveTableHeight} - ${paginationHeight}px)`,
-            } }, hAsync("div", { key: '783934f349e0da5bab77cbb44cc12f0dfeb9ec71', class: {
+            } }, hAsync("div", { key: 'e3bf5576fd1b1ee9ffab5d240de904204f4288d5', class: {
                 'sd-table__wrapper': true,
                 'sd-table__wrapper--radius-use-top': this.radius === 'useTop',
-            } }, hAsync("div", { key: 'd3a76ad0e853c6adf16df633c0e0b7f5bb580f24', class: {
+            } }, hAsync("div", { key: 'a67ebcb802a3ed443cca1fc33a00787642e08e84', class: {
                 'sd-table__scroll-container': true,
                 'sd-table__scroll-container--loading': this.isLoading,
                 'sd-table__scroll-container--no-data': isNoData,
-            } }, this.isLoading && (hAsync("div", { key: 'cc77ce58ff0eebf3fc1d7dd9dbf11578f94d4dd1', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: 'bda7ed774342089a23d13b49a506b04527026275', indeterminate: true }))), isNoData && (hAsync(hAsync.Fragment, null, hAsync("div", { key: 'f2ce89d0ae9eefe0f0f8509e477756cb74dbef86', class: "sd-table__no-data-header-overlay" }), hAsync("div", { key: '84d739563123d0f0fc33166b1a6e80021ba06e1c', class: "sd-table__no-data" }, hAsync("div", { key: '3507f718a25b79c44fdf283fb41356ab72f2a384', class: "sd-table__no-data-content", ref: el => {
+            } }, this.isLoading && (hAsync("div", { key: '2cdaff94dab50598c05364930dd3e763a6f2f79a', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: '49211d7555a38996d3fd9cfce0df50bb626fa1d6', indeterminate: true }))), isNoData && (hAsync(hAsync.Fragment, null, hAsync("div", { key: '3da9d42ecedbdc63858a06040f0e22d265a8183b', class: "sd-table__no-data-header-overlay" }), hAsync("div", { key: '20b5d8be682572a4ddbce21b6cd265894d014499', class: "sd-table__no-data" }, hAsync("div", { key: 'a024fa084f4a137a70fe176cee6918b4f701fd42', class: "sd-table__no-data-content", ref: el => {
                 this.noDataContentEl = el;
                 if (el)
                     this.syncNoDataContentObserver();
-            } }, hAsync("slot", { key: '818129819b2ff4a6f9fc1224dc59a9aa5861296d', name: "no-data" }, hAsync("span", { key: 'c03cfb713e6dadd5ab4c60d7d27fd502d7aa9348' }, this.resolvedNoDataLabel)))))), hAsync("table", { key: '8864714a828069985bac6535bc40cbb043dfcb28', class: this.tableClasses }, this.autoThead ? (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-thead", { rows: this.rows ?? [] }))) : (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
+            } }, hAsync("slot", { key: '9603eefa63fd5bc05dfa132c6be2302497d4c228', name: "no-data" }, hAsync("span", { key: '0dad4e143d8251e375f748d1e5e1a77909fab164' }, this.resolvedNoDataLabel)))))), hAsync("table", { key: '83325a8970f18bb9cf7a78dc665d16a24edc18da', class: this.tableClasses }, this.autoThead ? (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-thead", { rows: this.rows ?? [] }))) : (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
             this.pagination.rowsPerPage > 0 &&
             this.rowCount > 0 &&
-            !this.useVirtualScroll && (hAsync("div", { key: 'bdac4b4d551152ec7ee0cdc31bfb992748836928', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '2c60fff7f8ac3a3bd22da2173b8a9187bb686ddf', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: '7a662f58e13c15e705341773570f899f503f12c0', value: this.useInternalPagination
+            !this.useVirtualScroll && (hAsync("div", { key: '935b0f916cbc1de29a7f6b3805a5a3c25eaba467', class: "sd-table__pagination" }, hAsync("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 && (hAsync("sd-select", { key: 'd514c41459a60ac47ffcd476a635c47386232c50', value: this.useInternalPagination
                 ? this.innerRowsPerPage
                 : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
                 if (!this.isRowsPerPageValue(e.detail))
@@ -15922,11 +15926,13 @@ class SdTd {
         this.syncSlotName();
         this.syncSpanRegistration();
         this.syncCellClassRegistration(oldField);
+        this.syncUseFrameRegistration(oldField);
     }
     handleRowKeyChange(_newKey, oldKey) {
         this.syncSlotName();
         this.syncSpanRegistration();
         this.syncCellClassRegistration(undefined, oldKey);
+        this.syncUseFrameRegistration(undefined, oldKey);
     }
     handleSpanChange() {
         this.syncSpanRegistration();
@@ -15937,15 +15943,15 @@ class SdTd {
     handleDividerChange() {
         this.syncCellClassRegistration();
     }
-    handleUseFieldChange() {
-        this.syncUseFieldRegistration();
+    handleUseFrameChange() {
+        this.syncUseFrameRegistration();
         this.requestParentTrUpdate();
     }
     componentWillLoad() {
         this.syncSlotName();
         this.syncSpanRegistration();
         this.syncCellClassRegistration();
-        this.syncUseFieldRegistration();
+        this.syncUseFrameRegistration();
         // slot 타이밍 엇갈림 대응: 부모 sd-tr forceUpdate로 슬롯 재매칭
         const parentTr = this.el.parentElement;
         if (parentTr?.tagName?.toLowerCase() === 'sd-tr') ;
@@ -15954,7 +15960,7 @@ class SdTd {
         this.syncSlotName();
         this.syncSpanRegistration();
         this.syncCellClassRegistration();
-        this.syncUseFieldRegistration();
+        this.syncUseFrameRegistration();
     }
     // React StrictMode에서는 disconnect/reconnect 사이클이 일어나면서
     // 동일 인스턴스의 componentWillLoad는 더 이상 호출되지 않는다.
@@ -15962,7 +15968,7 @@ class SdTd {
     connectedCallback() {
         this.syncSpanRegistration();
         this.syncCellClassRegistration();
-        this.syncUseFieldRegistration();
+        this.syncUseFrameRegistration();
     }
     disconnectedCallback() {
         const table = this.findTable();
@@ -16016,9 +16022,16 @@ class SdTd {
         table.registerCellClassSync(String(this.rowKey), this.field, combinedClass);
         this.requestParentTrUpdate();
     }
-    syncUseFieldRegistration() {
+    syncUseFrameRegistration(prevField, prevRowKey) {
         const table = this.findTable();
-        if (!table || this.field === '' || this.rowKey == null)
+        if (!table)
+            return;
+        const oldField = prevField ?? this.field;
+        const oldRowKey = prevRowKey ?? (this.rowKey != null ? String(this.rowKey) : undefined);
+        if (oldField !== '' && oldRowKey != null) {
+            table.unregisterUseFrameSync?.(oldRowKey, oldField);
+        }
+        if (this.field === '' || this.rowKey == null)
             return;
         if (this.useFrame) {
             table.registerUseFrameSync?.(String(this.rowKey), this.field);
@@ -16039,7 +16052,7 @@ class SdTd {
         }
     }
     render() {
-        return (hAsync(Host, { key: '7d51ea5f02ba2df099f4440be26c2f0be8a73a6b', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: '9a6a634e2bcd206ec9099c6be738c3853d0cbebf' })));
+        return (hAsync(Host, { key: '505b602b609050870e7e80df9157dbc50d0cb8c1', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: '9910f02d98ce5e115b2a380954dd0a994f9f1c12' })));
     }
     static get watchers() { return {
         "field": [{
@@ -16064,7 +16077,7 @@ class SdTd {
                 "handleDividerChange": 0
             }],
         "useFrame": [{
-                "handleUseFieldChange": 0
+                "handleUseFrameChange": 0
             }]
     }; }
     static get style() { return sdTdCss(); }
@@ -17281,7 +17294,7 @@ class SdTooltip {
     }; }
 }
 
-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 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}.tr--separator:hover .td{background-color:var(--table-separator-color, #eeeeee)}.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}.tr--separator:hover .td.sticky-left,.tr--separator:hover .td.sticky-right{background-color:var(--table-separator-color, #eeeeee)}.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)}`;
 
 class SdTr {
     constructor(hostRef) {
@@ -17455,6 +17468,13 @@ class SdTr {
         const fieldName = typeof col.field === 'string' ? col.field : col.name;
         return this.tableEl.getCellClassSync(this.rowKey, fieldName);
     }
+    getFramePaddingStyle(field) {
+        if (!this._dense)
+            return undefined;
+        if (!(this.tableEl?.isCellUseFrameSync?.(this.rowKey, field) ?? false))
+            return undefined;
+        return { padding: `${TABLE_BODY_LAYOUT.framePadding}px` };
+    }
     expandCellClass(classStr) {
         if (classStr == null || classStr === '')
             return {};
@@ -17463,20 +17483,6 @@ class SdTr {
             .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;
@@ -17497,12 +17503,13 @@ class SdTr {
         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 rowLayoutY = effectiveDense ? TABLE_BODY_LAYOUT.dense : TABLE_BODY_LAYOUT.default;
+        const rowPaddingX = this._dense && isUseFrameRow ? TABLE_BODY_LAYOUT.paddingX : TABLE_BODY_LAYOUT.paddingX;
         const rowStyle = {
             '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-height': `${rowLayoutY.height}px`,
+            '--table-body-padding-y': `${rowLayoutY.paddingY}px`,
+            '--table-body-padding-x': `${rowPaddingX}px`,
             '--table-body-font-family': TABLE_BODY_TYPOGRAPHY.fontFamily,
             '--table-body-font-weight': TABLE_BODY_TYPOGRAPHY.fontWeight,
             '--table-body-font-size': `${TABLE_BODY_TYPOGRAPHY.fontSize}px`,
@@ -17520,7 +17527,6 @@ class SdTr {
         return (hAsync(Host, { style: rowStyle }, hAsync("tr", { class: { 'tr': true, 'tr--no-hover': hasRowspan } }, this._selectable && (hAsync("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,
@@ -17528,19 +17534,19 @@ class SdTr {
             }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => {
             if (this.isCovered(idx))
                 return null;
+            const fieldName = typeof col.field === 'string' ? col.field : col.name;
             const span = this.getSpanFor(col);
             const sdCellClass = this.getCellClassFor(col);
             return (hAsync("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),
                     ...this.expandCellClass(sdCellClass),
-                }, style: this.getStickyStyle(idx) }, hAsync("slot", { name: `${this.tableId}-${typeof col.field === 'string' ? col.field : col.name}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
+                }, style: { ...this.getStickyStyle(idx), ...this.getFramePaddingStyle(fieldName) } }, hAsync("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
         }), middleCols.map((col, relativeIdx) => {
             const actualColIdx = stickyLeftCount + relativeIdx;
             if (this.isCovered(actualColIdx))
@@ -17551,11 +17557,10 @@ class SdTr {
             return (hAsync("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),
                     [`${col.tdClass}`]: Boolean(col.tdClass),
                     ...this.expandCellClass(sdCellClass),
-                }, style: this.getStickyStyle(actualColIdx) }, hAsync("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
+                }, style: { ...this.getStickyStyle(actualColIdx), ...this.getFramePaddingStyle(fieldName) } }, hAsync("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
         }), stickyRightCols.map((col, relativeIdx) => {
             const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
             if (this.isCovered(actualColIdx))
@@ -17566,14 +17571,13 @@ class SdTr {
             return (hAsync("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),
                     ...this.expandCellClass(sdCellClass),
-                }, style: this.getStickyStyle(actualColIdx) }, hAsync("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
+                }, style: { ...this.getStickyStyle(actualColIdx), ...this.getFramePaddingStyle(fieldName) } }, hAsync("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
         }))));
     }
     static get style() { return sdTrCss(); }