@sellmate/design-system 1.0.75 → 1.0.77

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

@@ -0,0 +1,921 @@
+'use strict';
+
+var index = require('./index-CaGGRpd8.js');
+var index$1 = require('./index-BUvXpPc3.js');
+var constants = require('./constants-DJRV1upE.js');
+var sdTable_config = require('./sd-table.config-hnNodd18.js');
+require('./system-DRemSdU1.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"
+		}
+	}
+};
+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`,
+    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-move-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;
+    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-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: 'e648886fbec4723b7be767d9e1bfc04004cca234', class: {
+                'sd-pagination': true,
+                'sd-pagination--simple': this.simple,
+            }, style: cssVars }, index.h("div", { key: '43ff8b8f6682c4d2b70c5085a6d3199de1d01596', 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: '1975d14028485438a728b23d717abfcde8722fcf', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
+    }
+};
+SdPagination.style = sdPaginationCss();
+
+const sdSelectCss = () => `sd-select{display:inline-flex}sd-select sd-portal{display:none}sd-select .sd-select{position:relative;width:100%;height:100%}`;
+
+const SdSelect = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.update = index.createEvent(this, "sdUpdate", 7);
+        this.dropDownShow = index.createEvent(this, "sdDropDownShow", 7);
+    }
+    static VIEWPORT_PADDING = 20;
+    static PORTAL_OFFSET_Y = 4;
+    static CLOSE_ANIMATION_DURATION = 150;
+    get el() { return index.getElement(this); }
+    type = 'default';
+    value = null;
+    options = [];
+    placeholder = '선택';
+    maxDropdownWidth = '640px';
+    dropdownHeight = '260px';
+    disabled = false;
+    label = '';
+    labelWidth = '';
+    addonLabel = '';
+    addonAlign = 'start';
+    error = false;
+    hint = '';
+    errorMessage = '';
+    rules = [];
+    icon = undefined;
+    labelTooltip = '';
+    labelTooltipProps = null;
+    emitValue = false;
+    width = '';
+    useSearch = false;
+    allSelectedLabel = '전체';
+    useSelectAll = false;
+    isOpen = false;
+    isAnimatingOut = false;
+    triggerWidth = '200px';
+    resolvedDropdownHeight = '260px';
+    resolvedMaxDropdownWidth = '640px';
+    focused = false;
+    hovered = false;
+    update;
+    dropDownShow;
+    async sdFocus() {
+        if (this.disabled)
+            return;
+        await this.triggerComponentRef?.sdFocus();
+    }
+    async sdOpen() {
+        // sdFocus 직후 호출 시 트리거 ref/레이아웃이 안정될 때까지 한 틱 대기
+        await new Promise(resolve => setTimeout(resolve, 0));
+        if (this.disabled || this.isOpen)
+            return;
+        this.prepareDropdownGeometry();
+        if (this.closeAnimationTimer)
+            clearTimeout(this.closeAnimationTimer);
+        this.isAnimatingOut = false;
+        this.isOpen = true;
+    }
+    triggerRef;
+    triggerComponentRef;
+    closeAnimationTimer;
+    name = index$1.nanoid();
+    triggerHasFocus = false;
+    watchIsOpen(newValue) {
+        this.syncFocusedState(newValue);
+        this.dropDownShow.emit({ isOpen: newValue });
+    }
+    get isMulti() {
+        return this.type === 'multi' || this.type === 'multi_depth';
+    }
+    get displayText() {
+        if (this.isMulti) {
+            if (!Array.isArray(this.value) || this.value.length === 0)
+                return '';
+            const nonDisabledLeaves = this.getNonDisabledLeaves(this.options);
+            const selected = this.getSelectedOptions();
+            const allSelected = nonDisabledLeaves.length > 0 &&
+                nonDisabledLeaves.every(leaf => selected.some(s => s.value === leaf.value));
+            if (allSelected)
+                return this.allSelectedLabel ?? '전체';
+            const flat = this.flattenOptions(this.options);
+            return this.value
+                .map(item => {
+                if (item != null && typeof item === 'object') {
+                    const opt = item;
+                    return opt.label ?? flat.find(o => o.value === opt.value)?.label ?? '';
+                }
+                return flat.find(o => o.value === item)?.label ?? '';
+            })
+                .filter(Boolean)
+                .join(', ');
+        }
+        if (this.value == null)
+            return '';
+        if (!this.emitValue && typeof this.value === 'object' && !Array.isArray(this.value)) {
+            return this.value.label ?? '';
+        }
+        const flat = this.flattenOptions(this.options);
+        const found = flat.find(o => o.value === this.value);
+        return found?.label ?? '';
+    }
+    flattenOptions(options) {
+        return options.flatMap(o => (o.children ? this.flattenOptions(o.children) : [o]));
+    }
+    getNonDisabledLeaves(options) {
+        return options.flatMap(o => {
+            if (o.disabled)
+                return [];
+            if (o.children)
+                return this.getNonDisabledLeaves(o.children);
+            return [o];
+        });
+    }
+    getSelectedOptions() {
+        const val = this.value;
+        if (!val || !Array.isArray(val))
+            return [];
+        if (this.emitValue) {
+            return val
+                .map(v => this.findOriginalOption(v, this.options))
+                .filter((o) => !!o);
+        }
+        return val;
+    }
+    toMultiValue(options) {
+        return this.emitValue ? options.map(o => o.value) : options;
+    }
+    parsePixelValue(value, fallback) {
+        const parsed = Number.parseFloat(value);
+        return Number.isFinite(parsed) ? parsed : fallback;
+    }
+    updateDropdownViewportConstraints() {
+        if (!this.triggerRef)
+            return;
+        const triggerRect = this.triggerRef.getBoundingClientRect();
+        const viewportPadding = SdSelect.VIEWPORT_PADDING;
+        const offsetY = SdSelect.PORTAL_OFFSET_Y;
+        const preferredHeight = this.parsePixelValue(this.dropdownHeight, 260);
+        const preferredWidth = this.parsePixelValue(this.maxDropdownWidth, 640);
+        const availableBelow = Math.max(window.innerHeight - triggerRect.bottom - viewportPadding - offsetY, 0);
+        const availableAbove = Math.max(triggerRect.top - viewportPadding - offsetY, 0);
+        const availableHeight = Math.max(availableBelow, availableAbove);
+        const availableWidth = Math.max(window.innerWidth - viewportPadding * 2, 0);
+        this.resolvedDropdownHeight = `${Math.min(preferredHeight, availableHeight)}px`;
+        this.resolvedMaxDropdownWidth = `${Math.min(preferredWidth, availableWidth)}px`;
+    }
+    handleViewportResize = () => {
+        if (!this.isOpen)
+            return;
+        this.updateDropdownViewportConstraints();
+    };
+    findOriginalOption(value, options) {
+        for (const opt of options) {
+            if (opt.value === value)
+                return opt;
+            if (opt.children) {
+                const found = this.findOriginalOption(value, opt.children);
+                if (found)
+                    return found;
+            }
+        }
+        return undefined;
+    }
+    closeDropdown() {
+        if (!this.isOpen)
+            return;
+        this.isOpen = false;
+        this.isAnimatingOut = true;
+        if (this.closeAnimationTimer)
+            clearTimeout(this.closeAnimationTimer);
+        this.closeAnimationTimer = setTimeout(() => {
+            this.isAnimatingOut = false;
+        }, SdSelect.CLOSE_ANIMATION_DURATION);
+    }
+    prepareDropdownGeometry() {
+        if (this.triggerRef) {
+            this.triggerWidth = `${this.triggerRef.offsetWidth}px`;
+        }
+        this.updateDropdownViewportConstraints();
+    }
+    syncFocusedState(isOpen = this.isOpen) {
+        this.focused = isOpen || this.triggerHasFocus;
+    }
+    handleTriggerFocus = () => {
+        this.triggerHasFocus = true;
+        this.syncFocusedState();
+    };
+    handleTriggerBlur = () => {
+        this.triggerHasFocus = false;
+        this.syncFocusedState();
+    };
+    handleTriggerClick = () => {
+        if (this.isOpen) {
+            this.closeDropdown();
+            return;
+        }
+        this.prepareDropdownGeometry();
+        if (this.closeAnimationTimer)
+            clearTimeout(this.closeAnimationTimer);
+        this.isAnimatingOut = false;
+        this.isOpen = true;
+    };
+    emitUpdate(value) {
+        this.update.emit(value);
+    }
+    handleOptionSelect = (detail) => {
+        const { option, leaves } = detail;
+        if (this.isMulti) {
+            this.handleMultiSelect(option, leaves);
+        }
+        else {
+            this.closeDropdown();
+            this.value = this.emitValue ? option.value : option;
+            const nextValue = this.value;
+            requestAnimationFrame(() => {
+                this.emitUpdate(nextValue);
+            });
+        }
+    };
+    handleMultiSelect(option, leaves) {
+        const selected = this.getSelectedOptions();
+        const isGroup = !!option.children;
+        let newSelected;
+        if (isGroup) {
+            const allSelected = leaves.every(l => selected.some(s => s.value === l.value));
+            if (allSelected) {
+                const leafValues = new Set(leaves.map(l => l.value));
+                newSelected = selected.filter(s => !leafValues.has(s.value));
+            }
+            else {
+                const existing = new Set(selected.map(s => s.value));
+                const toAdd = leaves.filter(l => !existing.has(l.value));
+                newSelected = [...selected, ...toAdd];
+            }
+        }
+        else {
+            const exists = selected.some(s => s.value === option.value);
+            newSelected = exists ? selected.filter(s => s.value !== option.value) : [...selected, option];
+        }
+        this.value = this.toMultiValue(newSelected);
+        this.emitUpdate(this.value);
+    }
+    connectedCallback() {
+        window.addEventListener('resize', this.handleViewportResize);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.handleViewportResize);
+        if (this.closeAnimationTimer)
+            clearTimeout(this.closeAnimationTimer);
+    }
+    render() {
+        const portalProps = {
+            open: this.isOpen,
+            parentRef: this.triggerRef,
+            viewportPadding: SdSelect.VIEWPORT_PADDING,
+            onSdClose: () => {
+                this.closeDropdown();
+            },
+        };
+        return (index.h("sd-field", { key: '76625e332090d20e2f66159bba5ee1b9a11320a6', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
+                this.hovered = true;
+            }, onMouseLeave: () => {
+                this.hovered = false;
+            } }, index.h("div", { key: '8a0ae8a5e05459128409dbe21779f5e3d91b3a04', class: "sd-select", ref: el => {
+                this.triggerRef = el;
+            } }, index.h("sd-select-trigger", { key: '6b47231914655a8e197e3b38cd8e37c5214efc17', ref: el => {
+                this.triggerComponentRef = el;
+            }, displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: 'eaed402d276cc94a1324ede9cbf09bc436f8a1db', ...portalProps }, index.h("sd-select-listbox", { key: 'a96f75e06d974c8fd88ac72f083fe4b0ef424a0b', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+    }
+    static get watchers() { return {
+        "isOpen": [{
+                "watchIsOpen": 0
+            }]
+    }; }
+};
+SdSelect.style = sdSelectCss();
+
+const sdTbodyCss = () => `:host{display:contents}:host *{box-sizing:border-box}.tbody{display:table-row-group}`;
+
+const SdTbody = class {
+    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 && fromMethod !== 'undefined' ? fromMethod : null) ??
+            (fromAttr && fromAttr !== 'undefined' ? fromAttr : null) ??
+            '';
+        if (resolvedTableId && resolvedTableId !== this.tableId) {
+            this.tableId = resolvedTableId;
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: 'e474bc09fdec9d48d978ec87620b161220b5236c', slot: `${this.tableId}-body` }, index.h("tbody", { key: 'c74261b3f30c43e8ac8c3bdea1180f17bfc7dbc8', 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: 'f686e7e8fa81e725a32592a58267d0b5cd7551e6' }),
+            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:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.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__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;
+    tableEl = null;
+    handleColumnsChange(newCols) {
+        if (Array.isArray(newCols) && (this.columnWidths ?? []).length === 0) {
+            this.columnWidths = newCols.map(c => parseInt(c.width || '120', 10));
+        }
+    }
+    componentWillLoad() {
+        this.syncTableContext();
+        this.columnWidths = Array.isArray(this.columnWidths) ? this.columnWidths : [];
+        this.resolveConfig();
+        if ((this.columnWidths ?? []).length === 0) {
+            this.columnWidths = this._columns.map(c => parseInt(c.width || '120', 10));
+        }
+    }
+    componentDidLoad() {
+        this.syncTableContext();
+        this.resolveConfig();
+    }
+    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 && fromMethod !== 'undefined' ? fromMethod : 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();
+    }
+    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 ? 52 : 0);
+        const rightOffset = this.columnWidths
+            .filter((_, i) => i >= this.visibleColumns.length - (this._stickyColumn.right || 0) && i > colIdx)
+            .reduce((a, b) => a + b, 0);
+        return {
+            '--sticky-left-offset': `${leftOffset}px`,
+            '--sticky-right-offset': `${rightOffset}px`,
+            'width': `${this.columnWidths[colIdx]}px`,
+            'minWidth': `${this.columnWidths[colIdx]}px`,
+            'maxWidth': `${this.columnWidths[colIdx]}px`,
+        };
+    }
+    handleResize(index, event, reversed = false) {
+        if (this.tableEl?.handleResize) {
+            this.tableEl.handleResize(index, event, reversed);
+        }
+    }
+    handleColumnSort = (col) => {
+        this.sdColumnSort.emit({ column: col });
+    };
+    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 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 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: 'c4468056cc20a78516e61bccaf4d11c098e83ec6', slot: `${this.tableId}-head`, style: headStyle }, index.h("thead", { key: 'a9befd1728baf2104bfb9132557d5c5c0eb49748', class: {
+                'thead': true,
+                'thead--sticky': this._stickyHeader,
+            } }, index.h("tr", { key: 'da786d82d4896b6124becf42f634bcc5b0a6ffb7', class: "tr" }, this._selectable && (index.h("th", { key: 'b257c5475b7e528fbfc52ea85031a4c49bed7b36', 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: '6624026c1811c809eeb5131518ddb8c11f66b541', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), 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,
+            }, style: { ...col.thStyle, ...this.getStickyStyle(idx) } }, 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: () => 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))))))), this._resizable && (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),
+                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, 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: () => 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))))))), this._resizable && (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,
+                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, 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: () => 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))))))), this._resizable && (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}.td{display:table-cell;height:var(--table-body-height, 44px);padding:0 var(--table-body-padding-x, 16px);border-bottom:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);background:white;vertical-align:middle;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.td--left{text-align:left}.td--center{text-align:center}.td--right{text-align:right}.td--selected{position:relative;width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.td--selected sd-checkbox label{position:relative}.td--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.td.sticky-left{position:sticky;background-color:white;z-index:100 !important;left:var(--sticky-left-offset, 0)}.td.sticky-right{position:sticky;background-color:white;z-index:100 !important;right:var(--sticky-right-offset, 0)}.td.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-left-edge.is-scrolled-left{overflow:visible}.td.sticky-left-edge.is-scrolled-left:after{opacity:1}.td.sticky-right-edge.is-scrolled-right{overflow:visible}.td.sticky-right-edge.is-scrolled-right:after{opacity:1}.tr:hover .td.sticky-left,.tr:hover .td.sticky-right{background-color:#F9F9F9}.tr--no-hover:hover .td.sticky-left,.tr--no-hover:hover .td.sticky-right{background-color:white}`;
+
+const SdTr = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    columns;
+    selectable;
+    stickyColumn;
+    rowKey = '';
+    row = {};
+    tableId = '';
+    columnWidths = [];
+    isVisible = true;
+    spansVersion = 0;
+    _columns = [];
+    _selectable = false;
+    _stickyColumn = { left: 0, right: 0 };
+    _scrolledLeft = false;
+    _scrolledRight = false;
+    tableEl = null;
+    componentWillLoad() {
+        this.syncTableContext();
+        this.columnWidths = this.columnWidths ?? [];
+        this.resolveConfig();
+        this.columnWidths = this._columns.map(c => 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 && fromMethod !== 'undefined' ? fromMethod : 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;
+        if (config?.columnWidths && (this.columnWidths ?? []).length === 0) {
+            this.columnWidths = [...config.columnWidths];
+        }
+    }
+    async refreshConfig() {
+        this.resolveConfig();
+    }
+    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);
+        return {
+            '--sticky-left-offset': `${leftOffset}px`,
+            '--sticky-right-offset': `${rightOffset}px`,
+            'width': `${this.columnWidths[colIdx]}px`,
+            'minWidth': `${this.columnWidths[colIdx]}px`,
+            'maxWidth': `${this.columnWidths[colIdx]}px`,
+        };
+    }
+    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);
+    }
+    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 rowStyle = {
+            display: this.isVisible ? '' : 'none',
+            '--table-body-height': `${sdTable_config.TABLE_BODY_LAYOUT.default.height}px`,
+            '--table-body-padding-x': `${sdTable_config.TABLE_BODY_LAYOUT.paddingX}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`,
+        };
+        return (index.h(index.Host, { key: '33228ee9f020f915e77f9827e9360087fc2cd565', style: rowStyle }, index.h("tr", { key: '2f308a547ad19584e509543027cf60ff8faec2f8', class: { 'tr': true, 'tr--no-hover': hasRowspan } }, this._selectable && (index.h("td", { key: '94f50aa6fd31a63d8d99e8c6f25faf8ba6f68ddf', 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", { key: 'e8808068b601529c95b8055c16e7af8a746bdccc', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => {
+            if (this.isCovered(idx))
+                return null;
+            const span = this.getSpanFor(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),
+                }, style: this.getStickyStyle(idx) }, index.h("slot", { name: `${this.tableId}-${typeof col.field === 'string' ? col.field : col.name}-${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);
+            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),
+                }, style: this.getStickyStyle(actualColIdx) }, 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);
+            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),
+                }, style: this.getStickyStyle(actualColIdx) }, 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_select = SdSelect;
+exports.sd_tbody = SdTbody;
+exports.sd_thead = SdThead;
+exports.sd_tr = SdTr;