@sellmate/design-system 1.27.1 → 1.29.0

package/dist/cjs/sd-pagination_4.cjs.entry.js

@@ -1,856 +0,0 @@
-'use strict';
-
-var index = require('./index-DsYLSqCp.js');
-var constants = require('./constants-DJRV1upE.js');
-var sdTable_config = require('./sd-table.config-DzC55sap.js');
-require('./component.table-BrI3b--h.js');
-require('./system-MjrAugX-.js');
-
-const pagination = {
-	height: "24",
-	paddingX: "6",
-	radius: "6",
-	gap: "12",
-	move: {
-		gap: "4"
-	},
-	icon: "12",
-	typography: {
-		"default": {
-			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",
-			fontSize: "12",
-			fontWeight: "500",
-			lineHeight: "20"},
-		selected: {
-			fontWeight: "700"}
-	},
-	item: {
-		bg: {
-			hover: "#EEEEEE",
-			selected: "#E6F1FF"
-		},
-		content: {
-			"default": "#555555",
-			hover: "#004290",
-			selected: "#004290"
-		}
-	},
-	simple: {
-		gap: "8"
-	}
-};
-var paginationTokens = {
-	pagination: pagination
-};
-
-const PAGINATION_LAYOUT = {
-    height: `${paginationTokens.pagination.height}px`,
-    paddingX: `${paginationTokens.pagination.paddingX}px`,
-    radius: `${paginationTokens.pagination.radius}px`,
-    gap: `${paginationTokens.pagination.gap}px`,
-    moveGap: `${paginationTokens.pagination.move.gap}px`,
-    simpleGap: `${paginationTokens.pagination.simple.gap}px`,
-    iconSize: Number(paginationTokens.pagination.icon),
-};
-const PAGINATION_TYPOGRAPHY = {
-    fontFamily: paginationTokens.pagination.typography.default.fontFamily,
-    fontSize: `${paginationTokens.pagination.typography.default.fontSize}px`,
-    lineHeight: `${paginationTokens.pagination.typography.default.lineHeight}px`,
-    fontWeightDefault: paginationTokens.pagination.typography.default.fontWeight,
-    fontWeightSelected: paginationTokens.pagination.typography.selected.fontWeight,
-};
-const PAGINATION_COLORS = {
-    contentDefault: paginationTokens.pagination.item.content.default,
-    contentHover: paginationTokens.pagination.item.content.hover,
-    contentSelected: paginationTokens.pagination.item.content.selected,
-    bgHover: paginationTokens.pagination.item.bg.hover,
-    bgSelected: paginationTokens.pagination.item.bg.selected,
-    // TODO: 토큰 반영 후 교체 — nav 화살표 색상은 현재 토큰에 없음
-    iconDefault: '#888888',
-};
-
-const sdPaginationCss = () => `sd-pagination{display:inline-flex}.sd-pagination{display:inline-flex;align-items:center;gap:var(--sd-pagination-gap);font-family:var(--sd-pagination-font-family)}.sd-pagination__group{display:inline-flex;align-items:center;gap:var(--sd-pagination-move-gap);min-width:calc(var(--sd-pagination-height) * 2 + var(--sd-pagination-move-gap))}.sd-pagination__group--prev{justify-content:flex-end}.sd-pagination__group--next{justify-content:flex-start}.sd-pagination__numbers{display:inline-flex;align-items:center;gap:var(--sd-pagination-move-gap)}.sd-pagination__nav{display:inline-flex;align-items:center;justify-content:center;width:var(--sd-pagination-height);height:var(--sd-pagination-height);padding:0;background:transparent;border:0;border-radius:var(--sd-pagination-radius);cursor:pointer;outline:none}.sd-pagination__nav:hover{background-color:var(--sd-pagination-bg-hover)}.sd-pagination__item{display:inline-flex;align-items:center;justify-content:center;width:var(--sd-pagination-item-width);height:var(--sd-pagination-height);padding:0 var(--sd-pagination-padding-x);background:transparent;border:0;border-radius:var(--sd-pagination-radius);color:var(--sd-pagination-content);font-size:var(--sd-pagination-font-size);font-weight:var(--sd-pagination-font-weight-default);line-height:var(--sd-pagination-line-height);cursor:pointer;outline:none;box-sizing:border-box}.sd-pagination__item:hover{background-color:var(--sd-pagination-bg-hover);color:var(--sd-pagination-content-hover)}.sd-pagination__item--selected{background-color:var(--sd-pagination-bg-selected);color:var(--sd-pagination-content-selected);font-weight:var(--sd-pagination-font-weight-selected)}.sd-pagination__item--selected:hover{background-color:var(--sd-pagination-bg-selected);color:var(--sd-pagination-content-selected)}.sd-pagination__info{display:inline-flex;align-items:center;gap:var(--sd-pagination-simple-gap);height:var(--sd-pagination-height);padding:0 var(--sd-pagination-padding-x);color:var(--sd-pagination-content);font-size:var(--sd-pagination-font-size);font-weight:var(--sd-pagination-font-weight-default);line-height:var(--sd-pagination-line-height)}.sd-pagination__current{color:var(--sd-pagination-content-selected);font-weight:var(--sd-pagination-font-weight-selected)}`;
-
-const PER_PAGE = 10;
-const BUTTON_WIDTH = {
-    1: 24,
-    2: 34,
-    3: 40,
-    4: 48,
-    5: 56,
-};
-const SdPagination = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.pageChange = index.createEvent(this, "sdPageChange", 7);
-    }
-    /** 현재 페이지 번호 */
-    currentPage = 1;
-    /** 마지막 페이지 번호 */
-    lastPage = 1;
-    /** true이면 현재/마지막 페이지만 표시하는 단순 모드 */
-    simple = false;
-    /** 페이지가 변경될 때 새 페이지 번호를 전달합니다. */
-    pageChange;
-    get pageNumbers() {
-        const start = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
-        const end = Math.min(start + PER_PAGE - 1, this.lastPage);
-        return Array.from({ length: end - start + 1 }, (_, i) => start + i);
-    }
-    get buttonWidth() {
-        const lastPageNum = this.pageNumbers.at(-1) ?? 1;
-        const maxPageLength = lastPageNum.toString().length;
-        return BUTTON_WIDTH[maxPageLength] || BUTTON_WIDTH[1];
-    }
-    get isFirstGroup() {
-        return this.currentPage <= PER_PAGE;
-    }
-    get isLastGroup() {
-        const startPageGroup = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
-        return startPageGroup + PER_PAGE - 1 >= this.lastPage;
-    }
-    handlePageChange = (page) => {
-        if (page < 1 || page > this.lastPage)
-            return;
-        this.currentPage = page;
-        this.pageChange.emit(page);
-    };
-    handleGroupChange = (direction) => {
-        const delta = direction === 'forward' ? PER_PAGE : -PER_PAGE;
-        const newPage = Math.min(Math.max(this.currentPage + delta, 1), this.lastPage);
-        this.handlePageChange(newPage);
-    };
-    renderNavButton(iconName, ariaLabel, onClick) {
-        return (index.h("button", { type: "button", class: "sd-pagination__nav", "aria-label": ariaLabel, onClick: onClick }, index.h("sd-icon", { name: iconName, size: PAGINATION_LAYOUT.iconSize, color: PAGINATION_COLORS.iconDefault })));
-    }
-    renderPrevButtons() {
-        if (this.simple) {
-            if (this.currentPage <= 1)
-                return null;
-            return (index.h(index.Fragment, null, this.renderNavButton('chevronLeftEnd', 'Go to first page', () => this.handlePageChange(1)), this.renderNavButton('chevronLeft', 'Go to previous page', () => this.handlePageChange(this.currentPage - 1))));
-        }
-        if (this.isFirstGroup)
-            return null;
-        return (index.h(index.Fragment, null, this.renderNavButton('chevronLeftEnd', 'Go to first page', () => this.handlePageChange(1)), this.renderNavButton('chevronLeft', 'Go to previous page group', () => this.handleGroupChange('backward'))));
-    }
-    renderNextButtons() {
-        if (this.simple) {
-            if (this.currentPage >= this.lastPage)
-                return null;
-            return (index.h(index.Fragment, null, this.renderNavButton('chevronRight', 'Go to next page', () => this.handlePageChange(this.currentPage + 1)), this.renderNavButton('chevronRightEnd', 'Go to last page', () => this.handlePageChange(this.lastPage))));
-        }
-        if (this.isLastGroup)
-            return null;
-        return (index.h(index.Fragment, null, this.renderNavButton('chevronRight', 'Go to next page group', () => this.handleGroupChange('forward')), this.renderNavButton('chevronRightEnd', 'Go to last page', () => this.handlePageChange(this.lastPage))));
-    }
-    render() {
-        const cssVars = {
-            '--sd-pagination-height': PAGINATION_LAYOUT.height,
-            '--sd-pagination-padding-x': PAGINATION_LAYOUT.paddingX,
-            '--sd-pagination-radius': PAGINATION_LAYOUT.radius,
-            '--sd-pagination-gap': PAGINATION_LAYOUT.gap,
-            '--sd-pagination-move-gap': PAGINATION_LAYOUT.moveGap,
-            '--sd-pagination-simple-gap': PAGINATION_LAYOUT.simpleGap,
-            '--sd-pagination-font-family': PAGINATION_TYPOGRAPHY.fontFamily,
-            '--sd-pagination-font-size': PAGINATION_TYPOGRAPHY.fontSize,
-            '--sd-pagination-line-height': PAGINATION_TYPOGRAPHY.lineHeight,
-            '--sd-pagination-font-weight-default': PAGINATION_TYPOGRAPHY.fontWeightDefault,
-            '--sd-pagination-font-weight-selected': PAGINATION_TYPOGRAPHY.fontWeightSelected,
-            '--sd-pagination-content': PAGINATION_COLORS.contentDefault,
-            '--sd-pagination-content-hover': PAGINATION_COLORS.contentHover,
-            '--sd-pagination-content-selected': PAGINATION_COLORS.contentSelected,
-            '--sd-pagination-bg-hover': PAGINATION_COLORS.bgHover,
-            '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
-            '--sd-pagination-item-width': `${this.buttonWidth}px`,
-        };
-        return (index.h("div", { key: '2e5fdcc2d6a426be32128960131db2ed51674939', class: {
-                'sd-pagination': true,
-                'sd-pagination--simple': this.simple,
-            }, style: cssVars }, index.h("div", { key: 'a83ee12c1af9ca41e3a5773fcd840200fcb873e2', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "sd-pagination__info" }, index.h("span", { class: "sd-pagination__current" }, this.currentPage), index.h("span", { class: "sd-pagination__divider" }, "/"), index.h("span", { class: "sd-pagination__last" }, this.lastPage))) : (index.h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (index.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))))), index.h("div", { key: '3c98ea6c1bf5bea43baaa73a2a7db5c4fe1404e5', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
-    }
-};
-SdPagination.style = sdPaginationCss();
-
-const sdTbodyCss = () => `:host{display:contents}:host *{box-sizing:border-box}.tbody{display:table-row-group}`;
-
-const SdTbody = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    get el() { return index.getElement(this); }
-    /** 렌더링할 행 데이터 목록 */
-    rows = [];
-    tableId = '';
-    topSpacerHeight = 0;
-    bottomSpacerHeight = 0;
-    tableEl = null;
-    handleRowsChange(newRows) {
-        const safeRows = newRows ?? [];
-        if (this.tableEl?.setRowCountSync) {
-            this.tableEl.setRowCountSync(safeRows.length);
-        }
-    }
-    componentWillLoad() {
-        this.syncTableContext();
-        this.rows = this.rows ?? [];
-        if (this.tableEl?.setRowCountSync) {
-            this.tableEl.setRowCountSync(this.rows.length);
-        }
-        this.el.setSpacersSync = (top, bottom) => {
-            this.topSpacerHeight = top;
-            this.bottomSpacerHeight = bottom;
-        };
-    }
-    componentDidLoad() {
-        this.syncTableContext();
-    }
-    syncTableContext() {
-        // sd-table이 shadow:true이므로 fallback content로 렌더되면 closest가 경계를 못 넘는다.
-        // 그 경우 getRootNode().host(=sd-table)로 폴백한다.
-        const closest = this.el.closest('sd-table');
-        const root = this.el.getRootNode();
-        const fromShadow = root instanceof ShadowRoot ? root.host : null;
-        const table = closest ?? fromShadow;
-        this.tableEl = table;
-        const fromMethod = table?.getTableIdSync?.();
-        const fromAttr = table?.getAttribute(constants.TABLE_ID_ATTR);
-        const resolvedTableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
-            (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
-            '';
-        if (resolvedTableId !== '' && resolvedTableId !== this.tableId) {
-            this.tableId = resolvedTableId;
-        }
-    }
-    render() {
-        return (index.h(index.Host, { key: '6d4bea755b962e2f5b9f37129d0b03fd7f997e93', slot: `${this.tableId}-body` }, index.h("tbody", { key: '11543f7ea385458bcb57ae4e62bfd258bacb9e01', class: { tbody: true } }, [
-            this.topSpacerHeight > 0 && (index.h("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
-            index.h("slot", { key: '515aa270f49dfd20f78de1d11c3c5b914cfda792' }),
-            this.bottomSpacerHeight > 0 && (index.h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
-        ])));
-    }
-    static get watchers() { return {
-        "rows": [{
-                "handleRowsChange": 0
-            }]
-    }; }
-};
-SdTbody.style = sdTbodyCss();
-
-const sdTheadCss = () => `sd-thead{display:contents}sd-thead *{box-sizing:border-box}.thead{display:table-header-group;height:var(--table-header-height, 36px)}.thead--sticky{position:sticky;top:0;z-index:120}.tr{display:table-row;width:100%}.th{display:table-cell;background:var(--table-header-bg, #F5FAFF);height:var(--table-header-height, 36px);padding:0 var(--table-header-padding-x, 16px);font-family:var(--table-header-font-family, inherit);font-weight:var(--table-header-font-weight, 500);font-size:var(--table-header-font-size, 12px);line-height:var(--table-header-line-height, 20px);text-decoration:var(--table-header-text-decoration, none);vertical-align:middle;border-bottom:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);-webkit-user-select:none;user-select:none;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th--selected{position:relative;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}.th--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.th.sticky-left{position:sticky;background-color:var(--table-header-bg, #F5FAFF);z-index:110 !important;left:var(--sticky-left-offset, 0)}.th.sticky-right{position:sticky;background-color:var(--table-header-bg, #F5FAFF);z-index:110 !important;right:var(--sticky-right-offset, 0)}.th.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}.th.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}.th.sticky-left-edge.is-scrolled-left{overflow:visible}.th.sticky-left-edge.is-scrolled-left:after{opacity:1}.th.sticky-right-edge.is-scrolled-right{overflow:visible}.th.sticky-right-edge.is-scrolled-right:after{opacity:1}.th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:var(--table-header-gap, 4px)}.th__content--left{justify-content:flex-start}.th__content--center{justify-content:center}.th__content--right{justify-content:flex-end}.th__content--label{white-space:nowrap;text-overflow:ellipsis;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--has-dropdown{cursor:pointer}.th__dropdown-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;padding:0;border:none;background:transparent;cursor:pointer;color:inherit;border-radius:2px}.th__dropdown-trigger sd-icon{transition:transform 0.15s ease}.th__dropdown-trigger--open sd-icon{transform:rotate(180deg)}.th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:var(--table-header-resizer-height, 16px);cursor:col-resize;z-index:3;border-left:var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC);border-right:var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC)}.th__resizer--left{right:auto;left:0}`;
-
-const SdThead = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.sdColumnSort = index.createEvent(this, "sdColumnSort", 7);
-    }
-    get el() { return index.getElement(this); }
-    /** 테이블 컬럼 목록 */
-    columns;
-    /** 행 선택 기능 사용 여부 */
-    selectable;
-    /** 컬럼 너비 조절 가능 여부 */
-    resizable;
-    /** 고정 컬럼 설정 */
-    stickyColumn;
-    /** 헤더 고정 여부 */
-    stickyHeader;
-    /** 좌측 스크롤 여부 */
-    scrolledLeft;
-    /** 우측 스크롤 여부 */
-    scrolledRight;
-    /** 전체 선택 체크박스용 행 데이터 */
-    rows = [];
-    /** 컬럼 너비 목록 */
-    columnWidths = [];
-    /** 컬럼 정렬 버튼 클릭 시 발생합니다. */
-    sdColumnSort;
-    tableId = '';
-    _columns = [];
-    _selectable = false;
-    _resizable = false;
-    _stickyColumn = { left: 0, right: 0 };
-    _stickyHeader = false;
-    _scrolledLeft = false;
-    _scrolledRight = false;
-    dropdownOpenMap = {};
-    tableEl = null;
-    dropdownRefs = {};
-    dropdownThRefs = {};
-    dropdownPortals = {};
-    handleColumnsChange(newCols) {
-        if (Array.isArray(newCols) && (this.columnWidths ?? []).length === 0) {
-            this.columnWidths = newCols.map(c => (c.autoWidth ? 0 : parseInt(c.width || '120', 10)));
-        }
-    }
-    disconnectedCallback() {
-        const portals = this.dropdownPortals ?? {};
-        Object.values(portals).forEach(portal => {
-            if (portal?.parentNode != null)
-                portal.parentNode.removeChild(portal);
-        });
-    }
-    componentWillLoad() {
-        this.syncTableContext();
-        this.dropdownOpenMap = this.dropdownOpenMap ?? {};
-        this.dropdownRefs = this.dropdownRefs ?? {};
-        this.dropdownThRefs = this.dropdownThRefs ?? {};
-        this.dropdownPortals = this.dropdownPortals ?? {};
-        this.columnWidths = Array.isArray(this.columnWidths) ? this.columnWidths : [];
-        this.resolveConfig();
-        if ((this.columnWidths ?? []).length === 0) {
-            this.columnWidths = this._columns.map(c => c.autoWidth ? 0 : parseInt(c.width || '120', 10));
-        }
-    }
-    componentDidLoad() {
-        this.syncTableContext();
-        this.resolveConfig();
-        this.initDropdownPortals();
-    }
-    // sd-portal을 body에 붙여 CSS transform 영향 없이 정확한 위치에 패널을 표시한다.
-    // <slot>을 render에 두지 않고 직접 DOM 이동(slot 속성 제거)으로 Stencil 슬롯 에뮬레이션 충돌을 피한다.
-    initDropdownPortals() {
-        const cols = this._columns ?? [];
-        const hasDropdownCols = cols.filter(c => c.hasDropdown === true);
-        if (hasDropdownCols.length === 0)
-            return;
-        for (const col of hasDropdownCols) {
-            const colName = col.name;
-            // 이미 포탈이 생성된 컬럼은 건너뜀 (refreshConfig 재호출 대비)
-            if ((this.dropdownPortals ?? {})[colName] != null)
-                continue;
-            const slotContent = this.el.querySelector(`[slot="dropdown-${colName}"]`);
-            if (slotContent == null)
-                continue;
-            // slot 속성 제거: Stencil 슬롯 에뮬레이션이 재배포하지 못하게 한다
-            slotContent.removeAttribute('slot');
-            const portal = document.createElement('sd-portal');
-            portal.parentRef = this.dropdownThRefs[colName] ?? null;
-            portal.open = false;
-            // 첫 open 전까지 포탈 호스트 자체를 숨긴다.
-            // moveSlotContent()가 open=true 시 children을 독립 wrapper div로 이동하므로 이후 동작에 영향 없음.
-            portal.style.display = 'none';
-            portal.addEventListener('sdClose', () => this.closeDropdown(colName));
-            portal.appendChild(slotContent);
-            document.body.appendChild(portal);
-            this.dropdownPortals[colName] = portal;
-        }
-    }
-    syncTableContext() {
-        // sd-table이 shadow:true이므로 fallback content로 렌더되면 closest가 경계를 못 넘는다.
-        // 그 경우 getRootNode().host(=sd-table)로 폴백한다.
-        const closest = this.el.closest('sd-table');
-        const root = this.el.getRootNode();
-        const fromShadow = root instanceof ShadowRoot ? root.host : null;
-        const table = closest ?? fromShadow;
-        this.tableEl = table;
-        const fromMethod = table?.getTableIdSync?.();
-        const fromAttr = table?.getAttribute(constants.TABLE_ID_ATTR);
-        const resolvedTableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
-            (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
-            '';
-        if (resolvedTableId !== '' && resolvedTableId !== this.tableId) {
-            this.tableId = resolvedTableId;
-        }
-    }
-    resolveConfig() {
-        const config = this.tableEl?.getConfigSync?.();
-        const resolvedColumns = Array.isArray(this.columns)
-            ? this.columns
-            : Array.isArray(config?.columns)
-                ? config.columns
-                : [];
-        this._columns = resolvedColumns;
-        this._selectable = this.selectable ?? config?.selectable ?? false;
-        this._resizable = this.resizable ?? config?.resizable ?? false;
-        this._stickyColumn = this.stickyColumn ?? config?.stickyColumn ?? { left: 0, right: 0 };
-        this._stickyHeader = this.stickyHeader ?? config?.stickyHeader ?? false;
-        this._scrolledLeft = this.scrolledLeft ?? config?.scrolledLeft ?? false;
-        this._scrolledRight = this.scrolledRight ?? config?.scrolledRight ?? false;
-        if (Array.isArray(config?.columnWidths) && (this.columnWidths ?? []).length === 0) {
-            this.columnWidths = [...config.columnWidths];
-        }
-        if (!Array.isArray(this.columnWidths)) {
-            this.columnWidths = [];
-        }
-    }
-    /** 테이블 설정을 다시 불러옵니다. */
-    async refreshConfig() {
-        this.resolveConfig();
-        this.initDropdownPortals();
-    }
-    /** 컬럼 너비를 업데이트합니다. */
-    async setColumnWidths(widths) {
-        this.columnWidths = Array.isArray(widths) ? widths : [];
-    }
-    /** 전체 선택 체크박스 상태를 갱신합니다. */
-    async refreshSelection() {
-        const checkbox = this.el.querySelector('sd-checkbox');
-        if (checkbox) {
-            checkbox.value = this.getIsAllChecked();
-        }
-    }
-    get visibleColumns() {
-        return this._columns.filter(col => col.visible !== false);
-    }
-    getStickyStyle(colIdx) {
-        if (this.tableEl?.getStickyStyleSync) {
-            return this.tableEl.getStickyStyleSync(colIdx);
-        }
-        const leftOffset = this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) +
-            (this._selectable ? sdTable_config.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);
-        const col = this.visibleColumns[colIdx];
-        const base = {
-            '--sticky-left-offset': `${leftOffset}px`,
-            '--sticky-right-offset': `${rightOffset}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) {
-            this.tableEl.handleResize(index, event, reversed);
-        }
-    }
-    handleColumnSort = (col) => {
-        this.sdColumnSort.emit({ column: col });
-    };
-    toggleDropdown(name) {
-        const isOpen = this.dropdownOpenMap[name] !== true;
-        const portals = this.dropdownPortals ?? {};
-        const newMap = { ...this.dropdownOpenMap };
-        // _columns 기준으로 순회: portals가 비어도 dropdownOpenMap은 항상 갱신됨
-        for (const col of (this._columns ?? []).filter(c => c.hasDropdown === true)) {
-            const shouldBeOpen = col.name === name ? isOpen : false;
-            newMap[col.name] = shouldBeOpen;
-            const portal = portals[col.name];
-            if (portal != null)
-                portal.open = shouldBeOpen;
-        }
-        this.dropdownOpenMap = newMap;
-    }
-    closeDropdown(name) {
-        if (this.dropdownOpenMap[name] !== true)
-            return;
-        this.dropdownOpenMap = { ...this.dropdownOpenMap, [name]: false };
-        const portal = (this.dropdownPortals ?? {})[name];
-        if (portal != null)
-            portal.open = false;
-    }
-    handleSelectAll(checked) {
-        const nextChecked = !!checked;
-        const safeRows = Array.isArray(this.rows) ? this.rows : [];
-        if (this.tableEl?.toggleSelectAllSync) {
-            this.tableEl.toggleSelectAllSync(nextChecked, safeRows);
-        }
-    }
-    getIsAllChecked() {
-        const safeRows = Array.isArray(this.rows) ? this.rows : [];
-        if (this.tableEl?.getIsAllCheckedSync && safeRows.length > 0) {
-            return this.tableEl.getIsAllCheckedSync(safeRows);
-        }
-        return false;
-    }
-    render() {
-        const safeRows = Array.isArray(this.rows) ? this.rows : [];
-        const dropdownOpenMap = this.dropdownOpenMap ?? {};
-        const dropdownRefs = this.dropdownRefs ?? {};
-        const stickyLeftCount = this._stickyColumn.left || 0;
-        const stickyRightCount = this._stickyColumn.right || 0;
-        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': `${sdTable_config.TABLE_HEADER_LAYOUT.height}px`,
-            '--table-header-padding-x': `${sdTable_config.TABLE_HEADER_LAYOUT.paddingX}px`,
-            '--table-header-gap': `${sdTable_config.TABLE_HEADER_LAYOUT.gap}px`,
-            '--table-header-bg': sdTable_config.TABLE_HEADER_COLORS.bg,
-            '--table-header-font-family': sdTable_config.TABLE_HEADER_TYPOGRAPHY.fontFamily,
-            '--table-header-font-weight': sdTable_config.TABLE_HEADER_TYPOGRAPHY.fontWeight,
-            '--table-header-font-size': `${sdTable_config.TABLE_HEADER_TYPOGRAPHY.fontSize}px`,
-            '--table-header-line-height': `${sdTable_config.TABLE_HEADER_TYPOGRAPHY.lineHeight}px`,
-            '--table-header-text-decoration': sdTable_config.TABLE_HEADER_TYPOGRAPHY.textDecoration,
-            '--table-header-resizer-color': sdTable_config.TABLE_HEADER_RESIZING_BAR.color,
-            '--table-header-resizer-height': `${sdTable_config.TABLE_HEADER_RESIZING_BAR.height}px`,
-            '--table-border-color': sdTable_config.TABLE_BORDER.color,
-            '--table-border-width': `${sdTable_config.TABLE_BORDER.width}px`,
-        };
-        return (index.h(index.Host, { key: 'ec85c86aa6d93e5a2405262809bf790fbb12ee79', slot: `${this.tableId}-head`, style: headStyle }, index.h("thead", { key: '8afbdf4d81ebb649e262baa6da8ce3a1eca31e15', class: {
-                'thead': true,
-                'thead--sticky': this._stickyHeader,
-            } }, index.h("tr", { key: '9643f19e95aa00f5bb5d6462ecb0da4ca95c3dcc', class: "tr" }, this._selectable && (index.h("th", { key: '6d87ceb557e61454eaf0acf492234788bfd99235', 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' } }, index.h("sd-checkbox", { key: 'c2dc4e112510bb9ab13109fd966cd0485588835a', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), index.h("div", { key: '478a665c0d06efc829e4f2818be4be1b43e44708', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (index.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,
-                'th--has-dropdown': col.hasDropdown === true,
-            }, style: { ...col.thStyle, ...this.getStickyStyle(idx) }, ref: col.hasDropdown === true
-                ? el => {
-                    this.dropdownThRefs[col.name] = el;
-                }
-                : undefined, onClick: col.hasDropdown === true ? () => this.toggleDropdown(col.name) : undefined }, index.h("div", { class: `th__content th__content--${col.align || 'left'}` }, index.h("div", { class: "th__content--label" }, col.label), col.icon && (index.h("sd-icon", { name: col.icon, size: "12", color: sdTable_config.resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (index.h("sd-icon", { name: sdTable_config.resolveSortIconName(col.sort), size: "12", color: sdTable_config.resolveTableIconColor(sdTable_config.resolveSortIconName(col.sort), col.iconColor), onClick: (e) => {
-                e.stopPropagation();
-                this.handleColumnSort(col);
-            }, style: { cursor: 'pointer' } })), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text)))))), col.hasDropdown === true && (index.h("button", { class: {
-                'th__dropdown-trigger': true,
-                'th__dropdown-trigger--open': dropdownOpenMap[col.name] === true,
-            }, ref: el => {
-                dropdownRefs[col.name] = el;
-            }, "aria-haspopup": "listbox", "aria-expanded": dropdownOpenMap[col.name] === true ? 'true' : 'false' }, index.h("sd-icon", { name: "caretDown", size: "12" })))), this._resizable && idx !== lastColIdx && (
-        // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
-        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-        index.h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))))), middleCols.map((col, relativeIdx) => {
-            const actualColIdx = stickyLeftCount + relativeIdx;
-            return (index.h("th", { key: col.name, class: {
-                    'th': true,
-                    [`${col.thClass}`]: Boolean(col.thClass),
-                    'th--has-dropdown': col.hasDropdown === true,
-                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true
-                    ? el => {
-                        this.dropdownThRefs[col.name] = el;
-                    }
-                    : undefined, onClick: col.hasDropdown === true ? () => this.toggleDropdown(col.name) : undefined }, index.h("div", { class: `th__content th__content--${col.align || 'left'}` }, index.h("div", { class: "th__content--label" }, col.label), col.icon && (index.h("sd-icon", { name: col.icon, size: "12", color: sdTable_config.resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (index.h("sd-icon", { name: sdTable_config.resolveSortIconName(col.sort), size: "12", color: sdTable_config.resolveTableIconColor(sdTable_config.resolveSortIconName(col.sort), col.iconColor), onClick: (e) => {
-                    e.stopPropagation();
-                    this.handleColumnSort(col);
-                }, style: { cursor: 'pointer' } })), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text)))))), col.hasDropdown === true && (index.h("button", { class: {
-                    'th__dropdown-trigger': true,
-                    'th__dropdown-trigger--open': this.dropdownOpenMap[col.name] === true,
-                }, ref: el => {
-                    this.dropdownRefs[col.name] = el;
-                }, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, index.h("sd-icon", { name: "caretDown", size: "12" })))), this._resizable && actualColIdx !== lastColIdx && (
-            // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
-            // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-            index.h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
-        }), stickyRightCols.map((col, relativeIdx) => {
-            const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
-            return (index.h("th", { key: col.name, class: {
-                    'th': true,
-                    [`${col.thClass}`]: Boolean(col.thClass),
-                    'sticky-right': true,
-                    'sticky-right-edge': relativeIdx === 0,
-                    'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
-                    'th--has-dropdown': col.hasDropdown === true,
-                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true
-                    ? el => {
-                        this.dropdownThRefs[col.name] = el;
-                    }
-                    : undefined, onClick: col.hasDropdown === true ? () => this.toggleDropdown(col.name) : undefined }, index.h("div", { class: `th__content th__content--${col.align || 'left'}` }, index.h("div", { class: "th__content--label" }, col.label), col.icon && (index.h("sd-icon", { name: col.icon, size: "12", color: sdTable_config.resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (index.h("sd-icon", { name: sdTable_config.resolveSortIconName(col.sort), size: "12", color: sdTable_config.resolveTableIconColor(sdTable_config.resolveSortIconName(col.sort), col.iconColor), onClick: (e) => {
-                    e.stopPropagation();
-                    this.handleColumnSort(col);
-                }, style: { cursor: 'pointer' } })), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text)))))), col.hasDropdown === true && (index.h("button", { class: {
-                    'th__dropdown-trigger': true,
-                    'th__dropdown-trigger--open': this.dropdownOpenMap[col.name] === true,
-                }, ref: el => {
-                    this.dropdownRefs[col.name] = el;
-                }, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, index.h("sd-icon", { name: "caretDown", size: "12" })))), this._resizable && (
-            // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
-            // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-            index.h("div", { class: "th__resizer th__resizer--left", onMouseDown: (evt) => this.handleResize(actualColIdx, evt, true) }))));
-        })))));
-    }
-    static get watchers() { return {
-        "columns": [{
-                "handleColumnsChange": 0
-            }]
-    }; }
-};
-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}.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: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}.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}.tr--separator--dense .td--separator{height:var(--table-separator-dense-width, 4px)}.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) {
-        index.registerInstance(this, hostRef);
-    }
-    get el() { return index.getElement(this); }
-    /** 테이블 컬럼 목록 */
-    columns;
-    /** 행 선택 기능 사용 여부 */
-    selectable;
-    /** 고정 컬럼 설정 */
-    stickyColumn;
-    /** 행 식별 키 */
-    rowKey = '';
-    /** 행 데이터 객체 */
-    row = {};
-    /** 구분선 높이 (4 또는 6px, null이면 일반 행) */
-    separator = null;
-    tableId = '';
-    columnWidths = [];
-    isVisible = true;
-    spansVersion = 0;
-    _columns = [];
-    _selectable = false;
-    _stickyColumn = { left: 0, right: 0 };
-    _scrolledLeft = false;
-    _scrolledRight = false;
-    _dense = false;
-    tableEl = null;
-    componentWillLoad() {
-        this.row = this.row ?? {};
-        this.syncTableContext();
-        this.columnWidths = this.columnWidths ?? [];
-        this.resolveConfig();
-        this.columnWidths = this._columns.map(c => (c.autoWidth ? 0 : parseInt(c.width || '120', 10)));
-        this.updateVisibilitySync();
-    }
-    componentDidLoad() {
-        this.syncTableContext();
-    }
-    syncTableContext() {
-        // sd-table이 shadow:true이므로 fallback content로 렌더되면 closest가 경계를 못 넘는다.
-        // 그 경우 getRootNode().host(=sd-table)로 폴백한다.
-        const closest = this.el.closest('sd-table');
-        const root = this.el.getRootNode();
-        const fromShadow = root instanceof ShadowRoot ? root.host : null;
-        const table = closest ?? fromShadow;
-        this.tableEl = table;
-        const fromMethod = table?.getTableIdSync?.();
-        const fromAttr = table?.getAttribute(constants.TABLE_ID_ATTR);
-        const resolvedTableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
-            (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
-            '';
-        if (resolvedTableId !== '' && resolvedTableId !== this.tableId) {
-            this.tableId = resolvedTableId;
-        }
-    }
-    resolveConfig() {
-        const config = this.tableEl?.getConfigSync?.();
-        this._columns = this.columns ?? config?.columns ?? [];
-        this._selectable = this.selectable ?? config?.selectable ?? false;
-        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];
-        }
-    }
-    /** 테이블 설정을 다시 불러옵니다. */
-    async refreshConfig() {
-        this.resolveConfig();
-    }
-    /** 셀 병합 버전을 갱신해 td를 재렌더링합니다. */
-    async bumpSpansVersion() {
-        this.spansVersion = this.spansVersion + 1;
-    }
-    /** 페이지네이션에 따른 행 표시 여부를 갱신합니다. */
-    async updateVisibility() {
-        this.updateVisibilitySync();
-    }
-    updateVisibilitySync() {
-        const rowIndex = parseInt(this.rowKey, 10);
-        const pageInfo = this.tableEl?.getPaginationInfoSync?.();
-        if (!pageInfo) {
-            this.isVisible = true;
-            return;
-        }
-        this.isVisible = rowIndex >= pageInfo.startIndex && rowIndex < pageInfo.endIndex;
-    }
-    /** 컬럼 너비를 업데이트합니다. */
-    async setColumnWidths(widths) {
-        this.columnWidths = widths;
-    }
-    /** 체크박스 선택 상태를 갱신합니다. */
-    async refreshSelection() {
-        const checkbox = this.el.querySelector('sd-checkbox');
-        if (checkbox) {
-            checkbox.value = this.isSelected();
-        }
-    }
-    get visibleColumns() {
-        return this._columns.filter(col => col.visible !== false);
-    }
-    formatValue(value) {
-        if (value === null || value === undefined) {
-            return '';
-        }
-        if (typeof value === 'number') {
-            return value.toLocaleString();
-        }
-        return String(value);
-    }
-    getCellValue(column) {
-        const { field, format, name } = column;
-        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) {
-        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 rightOffset = this.columnWidths
-            .filter((_, i) => i >= this.visibleColumns.length - (this._stickyColumn.right || 0) && i > colIdx)
-            .reduce((a, b) => a + b, 0);
-        const col = this.visibleColumns[colIdx];
-        const base = {
-            '--sticky-left-offset': `${leftOffset}px`,
-            '--sticky-right-offset': `${rightOffset}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) {
-            return this.tableEl.isRowSelectedSync(this.row);
-        }
-        return false;
-    }
-    handleSelect() {
-        if (this.tableEl?.updateRowSelectSync) {
-            this.tableEl.updateRowSelectSync(this.row);
-        }
-    }
-    getSpanFor(col) {
-        if (!this.tableEl?.getSpanSync)
-            return undefined;
-        const fieldName = typeof col.field === 'string' ? col.field : col.name;
-        return this.tableEl.getSpanSync(this.rowKey, fieldName);
-    }
-    isCovered(colIdx) {
-        if (!this.tableEl?.isCoveredSync)
-            return false;
-        return this.tableEl.isCoveredSync(this.rowKey, colIdx, this._columns);
-    }
-    getCellClassFor(col) {
-        if (!this.tableEl?.getCellClassSync)
-            return undefined;
-        const fieldName = typeof col.field === 'string' ? col.field : col.name;
-        return this.tableEl.getCellClassSync(this.rowKey, fieldName);
-    }
-    getFramePaddingStyle(field) {
-        if (!(this.tableEl?.isCellUseFrameSync?.(this.rowKey, field) ?? false))
-            return undefined;
-        return { padding: `${sdTable_config.TABLE_BODY_LAYOUT.framePadding}px` };
-    }
-    expandCellClass(classStr) {
-        if (classStr == null || classStr === '')
-            return {};
-        return Object.fromEntries(classStr
-            .split(/\s+/)
-            .filter(Boolean)
-            .map(c => [c, true]));
-    }
-    render() {
-        const stickyLeftCount = this._stickyColumn.left || 0;
-        const stickyRightCount = this._stickyColumn.right || 0;
-        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 hasRowspan = this.tableEl?.hasRowspanSync?.() ?? false;
-        const isUseFrameRow = this.tableEl?.hasUseFrameInRowSync?.(this.rowKey) ?? false;
-        const effectiveDense = this._dense && !isUseFrameRow;
-        const rowLayoutY = effectiveDense ? sdTable_config.TABLE_BODY_LAYOUT.dense : sdTable_config.TABLE_BODY_LAYOUT.default;
-        const rowPaddingX = this._dense && isUseFrameRow ? sdTable_config.TABLE_BODY_LAYOUT.paddingX : sdTable_config.TABLE_BODY_LAYOUT.paddingX;
-        const rowStyle = {
-            'display': this.isVisible ? '' : 'none',
-            '--table-body-height': `${rowLayoutY.height}px`,
-            '--table-body-padding-y': `${rowLayoutY.paddingY}px`,
-            '--table-body-padding-x': `${rowPaddingX}px`,
-            '--table-body-font-family': sdTable_config.TABLE_BODY_TYPOGRAPHY.fontFamily,
-            '--table-body-font-weight': sdTable_config.TABLE_BODY_TYPOGRAPHY.fontWeight,
-            '--table-body-font-size': `${sdTable_config.TABLE_BODY_TYPOGRAPHY.fontSize}px`,
-            '--table-body-line-height': `${sdTable_config.TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
-            '--table-body-text-decoration': sdTable_config.TABLE_BODY_TYPOGRAPHY.textDecoration,
-            '--table-border-color': sdTable_config.TABLE_BORDER.color,
-            '--table-border-width': `${sdTable_config.TABLE_BORDER.width}px`,
-            '--table-separator-color': sdTable_config.TABLE_SEPARATOR.color,
-            '--table-separator-width': `${sdTable_config.TABLE_SEPARATOR.width}px`,
-            '--table-separator-dense-width': `${sdTable_config.TABLE_SEPARATOR.denseWidth}px`,
-        };
-        if (this.separator != null) {
-            const totalCols = this.visibleColumns.length + (this._selectable ? 1 : 0);
-            const isDense = this.separator === 4;
-            return (index.h(index.Host, { style: rowStyle }, index.h("tr", { class: { 'tr': true, 'tr--separator': true, 'tr--separator--dense': isDense } }, index.h("td", { colSpan: totalCols, class: "td td--separator" }))));
-        }
-        return (index.h(index.Host, { style: rowStyle }, index.h("tr", { class: { 'tr': true, 'tr--no-hover': hasRowspan } }, this._selectable && (index.h("td", { class: {
-                'td': true,
-                'td--selected': true,
-                'sticky-left': true,
-                'sticky-left-edge': stickyLeftCount === 0,
-                'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
-            }, style: { '--sticky-left-offset': '0px' } }, index.h("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 (index.h("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
-                    'td': true,
-                    [`td--${col.align || 'left'}`]: true,
-                    '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), ...this.getFramePaddingStyle(fieldName) } }, index.h("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, index.h("span", null, this.getCellValue(col)))));
-        }), middleCols.map((col, relativeIdx) => {
-            const actualColIdx = stickyLeftCount + relativeIdx;
-            if (this.isCovered(actualColIdx))
-                return null;
-            const fieldName = typeof col.field === 'string' ? col.field : col.name;
-            const span = this.getSpanFor(col);
-            const sdCellClass = this.getCellClassFor(col);
-            return (index.h("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
-                    td: true,
-                    [`td--${col.align || 'left'}`]: true,
-                    [`${col.tdClass}`]: Boolean(col.tdClass),
-                    ...this.expandCellClass(sdCellClass),
-                }, style: {
-                    ...this.getStickyStyle(actualColIdx),
-                    ...this.getFramePaddingStyle(fieldName),
-                } }, index.h("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, index.h("span", null, this.getCellValue(col)))));
-        }), stickyRightCols.map((col, relativeIdx) => {
-            const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
-            if (this.isCovered(actualColIdx))
-                return null;
-            const fieldName = typeof col.field === 'string' ? col.field : col.name;
-            const span = this.getSpanFor(col);
-            const sdCellClass = this.getCellClassFor(col);
-            return (index.h("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
-                    'td': true,
-                    [`td--${col.align || 'left'}`]: true,
-                    '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),
-                } }, index.h("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, index.h("span", null, this.getCellValue(col)))));
-        }))));
-    }
-};
-SdTr.style = sdTrCss();
-
-exports.sd_pagination = SdPagination;
-exports.sd_tbody = SdTbody;
-exports.sd_thead = SdThead;
-exports.sd_tr = SdTr;