@sellmate/design-system 1.0.78 → 1.1.0

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

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement, H as Host } from './index-Cnwbjz1F.js';
-import { n as nanoid } from './index-CCwNgVmC.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement, H as Host } from './index-CLCoul8o.js';
 import { T as TABLE_ID_ATTR } from './constants-sZMi_32I.js';
-import { r as resolveTableIconColor, c as resolveSortIconName, a as TABLE_BORDER, d as TABLE_HEADER_RESIZING_BAR, e as TABLE_HEADER_TYPOGRAPHY, f as TABLE_HEADER_COLORS, g as TABLE_HEADER_LAYOUT, T as TABLE_BODY_TYPOGRAPHY, h as TABLE_BODY_LAYOUT } from './sd-table.config-Bj-EEo7N.js';
-import './system-CZ4ltUOw.js';
+import { r as resolveTableIconColor, c as resolveSortIconName, a as TABLE_BORDER, d as TABLE_HEADER_RESIZING_BAR, e as TABLE_HEADER_TYPOGRAPHY, f as TABLE_HEADER_COLORS, g as TABLE_HEADER_LAYOUT, T as TABLE_BODY_TYPOGRAPHY, h as TABLE_BODY_LAYOUT } from './sd-table.config-0Te8GLCI.js';
+import './component.table-BQ6at17Y.js';
+import './system-GBlVDmy4.js';
 
 const pagination = {
 	height: "24",
@@ -152,296 +152,17 @@ const SdPagination = class {
             '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
             '--sd-pagination-item-width': `${this.buttonWidth}px`,
         };
-        return (h("div", { key: 'e648886fbec4723b7be767d9e1bfc04004cca234', class: {
+        return (h("div", { key: '0a99cc2b09de2f2a893fe88eaee535dc2f39505d', class: {
                 'sd-pagination': true,
                 'sd-pagination--simple': this.simple,
-            }, style: cssVars }, h("div", { key: '43ff8b8f6682c4d2b70c5085a6d3199de1d01596', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "sd-pagination__info" }, h("span", { class: "sd-pagination__current" }, this.currentPage), h("span", { class: "sd-pagination__divider" }, "/"), h("span", { class: "sd-pagination__last" }, this.lastPage))) : (h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+            }, style: cssVars }, h("div", { key: 'ba4e726a23e572c788c8c68689e656a07f21f46e', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "sd-pagination__info" }, h("span", { class: "sd-pagination__current" }, this.currentPage), h("span", { class: "sd-pagination__divider" }, "/"), h("span", { class: "sd-pagination__last" }, this.lastPage))) : (h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'sd-pagination__item': true,
                 'sd-pagination__item--selected': this.currentPage === n,
-            }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: '1975d14028485438a728b23d717abfcde8722fcf', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: 'e3276583ab382b988ac2961e8c67c431d5c4495e', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
     }
 };
 SdPagination.style = sdPaginationCss();
 
-const sdSelectCss = () => `sd-select{display:inline-flex}sd-select sd-portal{display:none}sd-select .sd-select{position:relative;width:100%;height:100%}`;
-
-const SdSelect = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.update = createEvent(this, "sdUpdate", 7);
-        this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
-    }
-    static VIEWPORT_PADDING = 20;
-    static PORTAL_OFFSET_Y = 4;
-    static CLOSE_ANIMATION_DURATION = 150;
-    get el() { return getElement(this); }
-    type = 'default';
-    value = null;
-    options = [];
-    placeholder = '선택';
-    maxDropdownWidth = '640px';
-    dropdownHeight = '260px';
-    disabled = false;
-    label = '';
-    labelWidth = '';
-    addonLabel = '';
-    addonAlign = 'start';
-    error = false;
-    hint = '';
-    errorMessage = '';
-    rules = [];
-    icon = undefined;
-    labelTooltip = '';
-    labelTooltipProps = null;
-    emitValue = false;
-    width = '';
-    useSearch = false;
-    allSelectedLabel = '전체';
-    useSelectAll = false;
-    isOpen = false;
-    isAnimatingOut = false;
-    triggerWidth = '200px';
-    resolvedDropdownHeight = '260px';
-    resolvedMaxDropdownWidth = '640px';
-    focused = false;
-    hovered = false;
-    update;
-    dropDownShow;
-    async sdFocus() {
-        if (this.disabled)
-            return;
-        await this.triggerComponentRef?.sdFocus();
-    }
-    async sdOpen() {
-        // sdFocus 직후 호출 시 트리거 ref/레이아웃이 안정될 때까지 한 틱 대기
-        await new Promise(resolve => setTimeout(resolve, 0));
-        if (this.disabled || this.isOpen)
-            return;
-        this.prepareDropdownGeometry();
-        if (this.closeAnimationTimer)
-            clearTimeout(this.closeAnimationTimer);
-        this.isAnimatingOut = false;
-        this.isOpen = true;
-    }
-    triggerRef;
-    triggerComponentRef;
-    closeAnimationTimer;
-    name = nanoid();
-    triggerHasFocus = false;
-    watchIsOpen(newValue) {
-        this.syncFocusedState(newValue);
-        this.dropDownShow.emit({ isOpen: newValue });
-    }
-    get isMulti() {
-        return this.type === 'multi' || this.type === 'multi_depth';
-    }
-    get displayText() {
-        if (this.isMulti) {
-            if (!Array.isArray(this.value) || this.value.length === 0)
-                return '';
-            const nonDisabledLeaves = this.getNonDisabledLeaves(this.options);
-            const selected = this.getSelectedOptions();
-            const allSelected = nonDisabledLeaves.length > 0 &&
-                nonDisabledLeaves.every(leaf => selected.some(s => s.value === leaf.value));
-            if (allSelected)
-                return this.allSelectedLabel ?? '전체';
-            const flat = this.flattenOptions(this.options);
-            return this.value
-                .map(item => {
-                if (item != null && typeof item === 'object') {
-                    const opt = item;
-                    return opt.label ?? flat.find(o => o.value === opt.value)?.label ?? '';
-                }
-                return flat.find(o => o.value === item)?.label ?? '';
-            })
-                .filter(Boolean)
-                .join(', ');
-        }
-        if (this.value == null)
-            return '';
-        if (!this.emitValue && typeof this.value === 'object' && !Array.isArray(this.value)) {
-            return this.value.label ?? '';
-        }
-        const flat = this.flattenOptions(this.options);
-        const found = flat.find(o => o.value === this.value);
-        return found?.label ?? '';
-    }
-    flattenOptions(options) {
-        return options.flatMap(o => (o.children ? this.flattenOptions(o.children) : [o]));
-    }
-    getNonDisabledLeaves(options) {
-        return options.flatMap(o => {
-            if (o.disabled)
-                return [];
-            if (o.children)
-                return this.getNonDisabledLeaves(o.children);
-            return [o];
-        });
-    }
-    getSelectedOptions() {
-        const val = this.value;
-        if (!val || !Array.isArray(val))
-            return [];
-        if (this.emitValue) {
-            return val
-                .map(v => this.findOriginalOption(v, this.options))
-                .filter((o) => !!o);
-        }
-        return val;
-    }
-    toMultiValue(options) {
-        return this.emitValue ? options.map(o => o.value) : options;
-    }
-    parsePixelValue(value, fallback) {
-        const parsed = Number.parseFloat(value);
-        return Number.isFinite(parsed) ? parsed : fallback;
-    }
-    updateDropdownViewportConstraints() {
-        if (!this.triggerRef)
-            return;
-        const triggerRect = this.triggerRef.getBoundingClientRect();
-        const viewportPadding = SdSelect.VIEWPORT_PADDING;
-        const offsetY = SdSelect.PORTAL_OFFSET_Y;
-        const preferredHeight = this.parsePixelValue(this.dropdownHeight, 260);
-        const preferredWidth = this.parsePixelValue(this.maxDropdownWidth, 640);
-        const availableBelow = Math.max(window.innerHeight - triggerRect.bottom - viewportPadding - offsetY, 0);
-        const availableAbove = Math.max(triggerRect.top - viewportPadding - offsetY, 0);
-        const availableHeight = Math.max(availableBelow, availableAbove);
-        const availableWidth = Math.max(window.innerWidth - viewportPadding * 2, 0);
-        this.resolvedDropdownHeight = `${Math.min(preferredHeight, availableHeight)}px`;
-        this.resolvedMaxDropdownWidth = `${Math.min(preferredWidth, availableWidth)}px`;
-    }
-    handleViewportResize = () => {
-        if (!this.isOpen)
-            return;
-        this.updateDropdownViewportConstraints();
-    };
-    findOriginalOption(value, options) {
-        for (const opt of options) {
-            if (opt.value === value)
-                return opt;
-            if (opt.children) {
-                const found = this.findOriginalOption(value, opt.children);
-                if (found)
-                    return found;
-            }
-        }
-        return undefined;
-    }
-    closeDropdown() {
-        if (!this.isOpen)
-            return;
-        this.isOpen = false;
-        this.isAnimatingOut = true;
-        if (this.closeAnimationTimer)
-            clearTimeout(this.closeAnimationTimer);
-        this.closeAnimationTimer = setTimeout(() => {
-            this.isAnimatingOut = false;
-        }, SdSelect.CLOSE_ANIMATION_DURATION);
-    }
-    prepareDropdownGeometry() {
-        if (this.triggerRef) {
-            this.triggerWidth = `${this.triggerRef.offsetWidth}px`;
-        }
-        this.updateDropdownViewportConstraints();
-    }
-    syncFocusedState(isOpen = this.isOpen) {
-        this.focused = isOpen || this.triggerHasFocus;
-    }
-    handleTriggerFocus = () => {
-        this.triggerHasFocus = true;
-        this.syncFocusedState();
-    };
-    handleTriggerBlur = () => {
-        this.triggerHasFocus = false;
-        this.syncFocusedState();
-    };
-    handleTriggerClick = () => {
-        if (this.isOpen) {
-            this.closeDropdown();
-            return;
-        }
-        this.prepareDropdownGeometry();
-        if (this.closeAnimationTimer)
-            clearTimeout(this.closeAnimationTimer);
-        this.isAnimatingOut = false;
-        this.isOpen = true;
-    };
-    emitUpdate(value) {
-        this.update.emit(value);
-    }
-    handleOptionSelect = (detail) => {
-        const { option, leaves } = detail;
-        if (this.isMulti) {
-            this.handleMultiSelect(option, leaves);
-        }
-        else {
-            this.closeDropdown();
-            this.value = this.emitValue ? option.value : option;
-            const nextValue = this.value;
-            requestAnimationFrame(() => {
-                this.emitUpdate(nextValue);
-            });
-        }
-    };
-    handleMultiSelect(option, leaves) {
-        const selected = this.getSelectedOptions();
-        const isGroup = !!option.children;
-        let newSelected;
-        if (isGroup) {
-            const allSelected = leaves.every(l => selected.some(s => s.value === l.value));
-            if (allSelected) {
-                const leafValues = new Set(leaves.map(l => l.value));
-                newSelected = selected.filter(s => !leafValues.has(s.value));
-            }
-            else {
-                const existing = new Set(selected.map(s => s.value));
-                const toAdd = leaves.filter(l => !existing.has(l.value));
-                newSelected = [...selected, ...toAdd];
-            }
-        }
-        else {
-            const exists = selected.some(s => s.value === option.value);
-            newSelected = exists ? selected.filter(s => s.value !== option.value) : [...selected, option];
-        }
-        this.value = this.toMultiValue(newSelected);
-        this.emitUpdate(this.value);
-    }
-    connectedCallback() {
-        window.addEventListener('resize', this.handleViewportResize);
-    }
-    disconnectedCallback() {
-        window.removeEventListener('resize', this.handleViewportResize);
-        if (this.closeAnimationTimer)
-            clearTimeout(this.closeAnimationTimer);
-    }
-    render() {
-        const portalProps = {
-            open: this.isOpen,
-            parentRef: this.triggerRef,
-            viewportPadding: SdSelect.VIEWPORT_PADDING,
-            onSdClose: () => {
-                this.closeDropdown();
-            },
-        };
-        return (h("sd-field", { key: '76625e332090d20e2f66159bba5ee1b9a11320a6', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
-                this.hovered = true;
-            }, onMouseLeave: () => {
-                this.hovered = false;
-            } }, h("div", { key: '8a0ae8a5e05459128409dbe21779f5e3d91b3a04', class: "sd-select", ref: el => {
-                this.triggerRef = el;
-            } }, h("sd-select-trigger", { key: '6b47231914655a8e197e3b38cd8e37c5214efc17', ref: el => {
-                this.triggerComponentRef = el;
-            }, displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: 'eaed402d276cc94a1324ede9cbf09bc436f8a1db', ...portalProps }, h("sd-select-listbox", { key: 'a96f75e06d974c8fd88ac72f083fe4b0ef424a0b', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
-    }
-    static get watchers() { return {
-        "isOpen": [{
-                "watchIsOpen": 0
-            }]
-    }; }
-};
-SdSelect.style = sdSelectCss();
-
 const sdTbodyCss = () => `:host{display:contents}:host *{box-sizing:border-box}.tbody{display:table-row-group}`;
 
 const SdTbody = class {
@@ -492,9 +213,9 @@ const SdTbody = class {
         }
     }
     render() {
-        return (h(Host, { key: 'e474bc09fdec9d48d978ec87620b161220b5236c', slot: `${this.tableId}-body` }, h("tbody", { key: 'c74261b3f30c43e8ac8c3bdea1180f17bfc7dbc8', class: { tbody: true } }, [
+        return (h(Host, { key: 'f0dacb28bae712e8f4d65bad00846da9db593307', slot: `${this.tableId}-body` }, h("tbody", { key: 'aec7d2277e617f1c186163d214e94559793b764c', class: { tbody: true } }, [
             this.topSpacerHeight > 0 && (h("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
-            h("slot", { key: 'f686e7e8fa81e725a32592a58267d0b5cd7551e6' }),
+            h("slot", { key: '2c428e3624ac949ee201edfd02b5e8f0bcea2e48' }),
             this.bottomSpacerHeight > 0 && (h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
         ])));
     }
@@ -663,16 +384,16 @@ const SdThead = class {
             '--table-border-color': TABLE_BORDER.color,
             '--table-border-width': `${TABLE_BORDER.width}px`,
         };
-        return (h(Host, { key: 'c4468056cc20a78516e61bccaf4d11c098e83ec6', slot: `${this.tableId}-head`, style: headStyle }, h("thead", { key: 'a9befd1728baf2104bfb9132557d5c5c0eb49748', class: {
+        return (h(Host, { key: '99d8d19dcc65b811d323e21041421b2d57da9f91', slot: `${this.tableId}-head`, style: headStyle }, h("thead", { key: '7614b6726ec13e857b6b8654925b0ba3c89fba64', class: {
                 'thead': true,
                 'thead--sticky': this._stickyHeader,
-            } }, h("tr", { key: 'da786d82d4896b6124becf42f634bcc5b0a6ffb7', class: "tr" }, this._selectable && (h("th", { key: 'b257c5475b7e528fbfc52ea85031a4c49bed7b36', class: {
+            } }, h("tr", { key: '68a615e7779947c1ee8cc26027c5bcded545e4d3', class: "tr" }, this._selectable && (h("th", { key: 'd3bc4512a24652ee156104a0fd9891504ce314dd', class: {
                 'th': true,
                 'th--selected': true,
                 'sticky-left': true,
                 'sticky-left-edge': stickyLeftCount === 0,
                 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
-            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '6624026c1811c809eeb5131518ddb8c11f66b541', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
+            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: 'de8f9b201aca60acbbb28a3233e964100109a92b', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
                 'th': true,
                 [`${col.thClass}`]: Boolean(col.thClass),
                 'sticky-left': true,
@@ -703,7 +424,7 @@ const SdThead = class {
 };
 SdThead.style = sdTheadCss();
 
-const sdTrCss = () => `sd-tr{display:contents}sd-tr *{box-sizing:border-box}.tr{display:table-row}.tr:hover .td{background-color:#F9F9F9}.tr--no-hover:hover .td{background-color:white}.td{display:table-cell;height:var(--table-body-height, 44px);padding:0 var(--table-body-padding-x, 16px);border-bottom:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);background:white;vertical-align:middle;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.td--left{text-align:left}.td--center{text-align:center}.td--right{text-align:right}.td--selected{position:relative;width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.td--selected sd-checkbox label{position:relative}.td--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.td.sticky-left{position:sticky;background-color:white;z-index:100 !important;left:var(--sticky-left-offset, 0)}.td.sticky-right{position:sticky;background-color:white;z-index:100 !important;right:var(--sticky-right-offset, 0)}.td.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-left-edge.is-scrolled-left{overflow:visible}.td.sticky-left-edge.is-scrolled-left:after{opacity:1}.td.sticky-right-edge.is-scrolled-right{overflow:visible}.td.sticky-right-edge.is-scrolled-right:after{opacity:1}.tr:hover .td.sticky-left,.tr:hover .td.sticky-right{background-color:#F9F9F9}.tr--no-hover:hover .td.sticky-left,.tr--no-hover:hover .td.sticky-right{background-color:white}`;
+const sdTrCss = () => `sd-tr{display:contents}sd-tr *{box-sizing:border-box}.tr{display:table-row}.tr:hover .td{background-color:#F9F9F9}.tr--no-hover:hover .td{background-color:white}.td{display:table-cell;height:var(--table-body-height, 44px);padding:0 var(--table-body-padding-x, 16px);border-bottom:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);background:white;vertical-align:middle;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.td--left{text-align:left}.td--center{text-align:center}.td--right{text-align:right}.td--selected{position:relative;width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.td--selected sd-checkbox label{position:relative}.td--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.td.sticky-left{position:sticky;background-color:white;z-index:100 !important;left:var(--sticky-left-offset, 0)}.td.sticky-right{position:sticky;background-color:white;z-index:100 !important;right:var(--sticky-right-offset, 0)}.td.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-left-edge.is-scrolled-left{overflow:visible}.td.sticky-left-edge.is-scrolled-left:after{opacity:1}.td.sticky-right-edge.is-scrolled-right{overflow:visible}.td.sticky-right-edge.is-scrolled-right:after{opacity:1}.tr:hover .td.sticky-left,.tr:hover .td.sticky-right{background-color:#F9F9F9}.tr--no-hover:hover .td.sticky-left,.tr--no-hover:hover .td.sticky-right{background-color:white}.td.td--last-row{border-bottom:none}`;
 
 const SdTr = class {
     constructor(hostRef) {
@@ -851,6 +572,20 @@ const SdTr = class {
         const fieldName = typeof col.field === 'string' ? col.field : col.name;
         return this.tableEl.getCellClassSync(this.rowKey, fieldName);
     }
+    isVisualLastRow(col) {
+        if (!this.tableEl?.isVisualLastRowSync)
+            return false;
+        const fieldName = typeof col.field === 'string' ? col.field : col.name;
+        return this.tableEl.isVisualLastRowSync(this.rowKey, fieldName);
+    }
+    // selectable td는 column 정보가 없으므로 빈 field로 평가한다.
+    // 해당 위치는 rowspan을 등록할 수 없으므로 spanRegistry에 매칭이 없고,
+    // 결과적으로 "내 row 자체가 시각적 마지막인지"가 판정된다.
+    isVisualLastRowForSelfRow() {
+        if (!this.tableEl?.isVisualLastRowSync)
+            return false;
+        return this.tableEl.isVisualLastRowSync(this.rowKey, '');
+    }
     render() {
         const stickyLeftCount = this._stickyColumn.left || 0;
         const stickyRightCount = this._stickyColumn.right || 0;
@@ -870,13 +605,14 @@ const SdTr = class {
             '--table-border-color': TABLE_BORDER.color,
             '--table-border-width': `${TABLE_BORDER.width}px`,
         };
-        return (h(Host, { key: '5ed784dad3eb187430efe30ed0bc0f153bf57f23', style: rowStyle }, h("tr", { key: 'bcdc07139fce88788a598ced264f3aad503882fe', class: { 'tr': true, 'tr--no-hover': hasRowspan } }, this._selectable && (h("td", { key: '0b2b516a0d2b57beb7bb37ea3ab2c34836cc772c', class: {
+        return (h(Host, { key: '30e4127b281770d12fab9e9cfd2cdf667eff8790', style: rowStyle }, h("tr", { key: '1072ce3f1b296e2278b7fc92a44d32da223ef119', class: { 'tr': true, 'tr--no-hover': hasRowspan } }, this._selectable && (h("td", { key: '4e3a37a320df97378a1ed311c0a7b8f744bd26bc', class: {
                 'td': true,
                 'td--selected': true,
+                'td--last-row': this.isVisualLastRowForSelfRow(),
                 'sticky-left': true,
                 'sticky-left-edge': stickyLeftCount === 0,
                 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
-            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '3fb6dc05e2b0e75bd70ff5b9631330ce2348bd22', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => {
+            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: 'b1a775462c4869f75480908bccd428714c63c257', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => {
             if (this.isCovered(idx))
                 return null;
             const span = this.getSpanFor(col);
@@ -884,6 +620,7 @@ const SdTr = class {
             return (h("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
                     'td': true,
                     [`td--${col.align || 'left'}`]: true,
+                    'td--last-row': this.isVisualLastRow(col),
                     'sticky-left': true,
                     'sticky-left-edge': idx === stickyLeftCount - 1,
                     'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
@@ -898,8 +635,9 @@ const SdTr = class {
             const span = this.getSpanFor(col);
             const sdCellClass = this.getCellClassFor(col);
             return (h("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
-                    td: true,
+                    'td': true,
                     [`td--${col.align || 'left'}`]: true,
+                    'td--last-row': this.isVisualLastRow(col),
                     [`${col.tdClass}`]: Boolean(col.tdClass),
                     [`${sdCellClass}`]: Boolean(sdCellClass),
                 }, style: this.getStickyStyle(actualColIdx) }, h("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, h("span", null, this.getCellValue(col)))));
@@ -913,6 +651,7 @@ const SdTr = class {
             return (h("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
                     'td': true,
                     [`td--${col.align || 'left'}`]: true,
+                    'td--last-row': this.isVisualLastRow(col),
                     'sticky-right': true,
                     'sticky-right-edge': relativeIdx === 0,
                     'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
@@ -924,4 +663,4 @@ const SdTr = class {
 };
 SdTr.style = sdTrCss();
 
-export { SdPagination as sd_pagination, SdSelect as sd_select, SdTbody as sd_tbody, SdThead as sd_thead, SdTr as sd_tr };
+export { SdPagination as sd_pagination, SdTbody as sd_tbody, SdThead as sd_thead, SdTr as sd_tr };

package/dist/esm/sd-popover.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, F as Fragment } from './index-Cnwbjz1F.js';
-import { T as TooltipArrow } from './tooltipArrow-D8sr81Xw.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, F as Fragment } from './index-CLCoul8o.js';
+import { T as TooltipArrow } from './tooltipArrow-Bc-yw2nt.js';
 
 const popover = {
 	bg: "#07284A"};
@@ -21,11 +21,15 @@ const SdPopover = class {
     icon = 'helpOutline';
     iconSize = 12;
     label = '';
-    buttonSize = 'sm';
-    buttonVariant = 'primary';
+    name = 'primary_sm';
+    rightIcon;
+    ariaLabel = '';
+    disabled = false;
+    type = 'button';
     menuTitle;
     messages = [];
-    buttons = [];
+    leftLink;
+    button;
     menuClass = '';
     useClose = false;
     showChange;
@@ -54,19 +58,22 @@ const SdPopover = class {
         const color = this.color ?? '#01BB4B';
         const icon = this.icon ?? 'helpOutline';
         const iconSize = this.iconSize ?? 12;
-        const buttonSize = this.buttonSize ?? 'sm';
-        const buttonVariant = this.buttonVariant ?? 'primary';
         const menuClass = this.menuClass ?? '';
         const messages = Array.isArray(this.messages) ? this.messages : [];
-        const buttons = Array.isArray(this.buttons) ? this.buttons : [];
-        return (h(Fragment, { key: 'e576deaacba9395c5aeb76fd13baa0dc1e908d38' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: icon, size: buttonSize, color: color, variant: buttonVariant, class: "sd-popover", onSdClick: () => this.setShow(!this.show) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (h("sd-floating-portal", { key: '7520067b46527c22108292a659dd7e8fba85397c', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, h("div", { key: 'ba48632dd93359851bd87f4d55f2341653b0caab', class: {
+        const leftLink = this.leftLink;
+        const button = this.button;
+        const hasFooter = !!leftLink || !!button;
+        return (h(Fragment, { key: '15b78d688d095fb15d5e6188dc848593bfec842e' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-popover", onSdClick: () => this.setShow(!this.show) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (h("sd-floating-portal", { key: '5075327dce1fda289492edbeefe2e9af38fdaab0', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, h("div", { key: 'd28e998f464c40d49935013521663801aead6771', class: {
                 'sd-floating-menu': true,
                 'sd-floating-menu--popover': true,
                 [`sd-floating-menu--${placement}`]: true,
                 [menuClass]: !!menuClass,
             }, style: {
                 '--sd-floating-bg': popoverTokens.popover.bg,
-            } }, h("i", { key: 'fce80e5bc6f49f5dbc1772f910eae0fb9bc09a6b', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '32aaa3b00f7ac77d47fd2bc3c968a7a4c20102c6' })), h("div", { key: '29b3240126412070466acee7ee1d061d235ba51e', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: '6cb5cf4531f573e93146a552b34831dc04851661', class: "sd-floating-menu__title" }, this.menuTitle), messages.length > 0 && (h("div", { key: 'ba15bb4efc4af37dd89b0da61539f516cc31a2f3', class: "sd-floating-menu__messages" }, messages.map((message, i) => (h("div", { key: `msg-${i}` }, message))))), buttons.length > 0 && (h("div", { key: '2656545909634d8c54e9d34155e699041b5512f5', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${buttons.length}` }, buttons.map((button, i) => (h("sd-button", { key: `btn-${i}`, ...button })))))), this.useClose && (h("sd-ghost-button", { key: '315bf10dde1b7cde5727beb101a1a1ad07966138', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose })))))));
+            } }, h("i", { key: 'aa98412939b7717c204fe7a76da9b61a6505a01a', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '54b1a1fc5b88600737830668c3da39082cc895e7' })), h("div", { key: 'a7968d363c8e77954093bf550d6904009f8b792b', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: 'b995c6df0d035a7a1162ec6dd3b4803897ed9b3e', class: "sd-floating-menu__title" }, this.menuTitle), messages.length > 0 && (h("div", { key: '2ee4971691688a24842b083e561b4e9e818aed88', class: "sd-floating-menu__messages" }, messages.map((message, i) => (h("div", { key: `msg-${i}` }, message))))), hasFooter && (h("div", { key: '4cbb44218d763af841b1e6bfbdd754b23d22c9e2', class: {
+                'sd-floating-menu__buttons': true,
+                'sd-floating-menu__buttons--with-link': !!leftLink,
+            } }, leftLink && (h("sd-text-link", { key: '67c6e9daf13cb294f30fdf1f848e92ba22cd3512', class: "sd-floating-menu__left-link", label: leftLink.label, icon: leftLink.icon ?? '', iconColor: leftLink.iconColor ?? '', useArrow: !!leftLink.useArrow, underline: !!leftLink.underline, disabled: !!leftLink.disabled, onSdClick: leftLink.onClick })), button && (h("sd-button", { key: '5328f1adcdc680d1bc97910a1b519298ced3b325', name: button.name ?? 'secondary_xs', label: button.label, icon: button.icon, rightIcon: button.rightIcon, ariaLabel: button.ariaLabel, disabled: button.disabled, type: button.type, onSdClick: button.onClick }))))), this.useClose && (h("sd-ghost-button", { key: '3e05ed8da4298a26d52045ad87fa5be42d6f6f02', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose })))))));
     }
 };
 SdPopover.style = sdPopoverCss();

package/dist/esm/sd-popup.entry.js

@@ -0,0 +1,110 @@
+import { r as registerInstance, c as createEvent, h } from './index-CLCoul8o.js';
+
+const popup$1 = {
+	header: {
+		bg: {
+			"default": "#07284A",
+			inverse: "#FFFFFF"
+		},
+		title: {
+			"default": "#FFFFFF",
+			inverse: "#004290"
+		},
+		typography: {
+			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
+			fontWeight: "700",
+			fontSize: "18",
+			lineHeight: "30"}
+	},
+	footer: {
+		bg: "#FFFFFF",
+		paddingX: "20",
+		paddingY: "8",
+		gap: "16"
+	},
+	bg: "#EEEEEE"
+};
+var popupTokens = {
+	popup: popup$1
+};
+
+const { popup } = popupTokens;
+const POPUP_LAYOUT = {
+    bodyBg: popup.bg,
+};
+const POPUP_HEADER = {
+    bg: {
+        default: popup.header.bg.default,
+        light: popup.header.bg.inverse,
+    },
+    titleColor: {
+        default: popup.header.title.default,
+        light: popup.header.title.inverse,
+    },
+    fontFamily: popup.header.typography.fontFamily,
+    fontWeight: popup.header.typography.fontWeight,
+    fontSize: Number(popup.header.typography.fontSize),
+    lineHeight: Number(popup.header.typography.lineHeight),
+    // TODO: 토큰 반영 후 교체
+    height: 50,
+    paddingX: 16,
+    paddingY: 10,
+};
+const POPUP_FOOTER = {
+    bg: popup.footer.bg,
+    paddingX: Number(popup.footer.paddingX),
+    paddingY: Number(popup.footer.paddingY),
+    gap: Number(popup.footer.gap),
+    // TODO: 토큰 반영 후 교체
+    height: 52,
+    slotHeight: 36,
+    // TODO: shadow/spread/md 토큰 반영 후 교체
+    shadow: '0 -2px 8px 0 rgba(0, 0, 0, 0.08)',
+};
+
+const sdPopupCss = () => `sd-popup{display:block;width:100%;height:100%}sd-popup .sd-popup{display:flex;flex-direction:column;width:100%;height:100%;background:var(--sd-popup-bg);overflow:hidden;box-sizing:border-box}sd-popup .sd-popup__header{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:100%;height:var(--sd-popup-header-height);padding:var(--sd-popup-header-padding-y) var(--sd-popup-header-padding-x);background:var(--sd-popup-header-bg);box-sizing:border-box}sd-popup .sd-popup__title{margin:0;color:var(--sd-popup-header-title-color);font-family:var(--sd-popup-header-font-family);font-weight:var(--sd-popup-header-font-weight);font-size:var(--sd-popup-header-font-size);line-height:var(--sd-popup-header-line-height);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-popup .sd-popup__body{flex:1 1 auto;min-height:0;overflow:auto}sd-popup .sd-popup__footer{display:flex;align-items:center;flex-shrink:0;width:100%;height:var(--sd-popup-footer-height);padding:var(--sd-popup-footer-padding-y) var(--sd-popup-footer-padding-x);gap:var(--sd-popup-footer-gap);background:var(--sd-popup-footer-bg);box-shadow:var(--sd-popup-footer-shadow);box-sizing:border-box;position:relative;z-index:1}sd-popup .sd-popup__footer-slot{display:flex;align-items:center;height:var(--sd-popup-footer-slot-height)}sd-popup .sd-popup__footer-slot--left{justify-content:flex-start;flex:1 1 auto;min-width:0}sd-popup .sd-popup__footer-slot:empty{display:none}sd-popup .sd-popup__submit{flex-shrink:0;margin-left:auto}`;
+
+const DEFAULT_SUBMIT_BUTTON_PROPS = {
+    name: 'primary_md',
+    label: '확인',
+};
+const SdPopup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.submit = createEvent(this, "sdSubmit", 7);
+    }
+    popupTitle = '';
+    type = 'default';
+    useFooter = true;
+    submitButtonProps;
+    submit;
+    render() {
+        const cssVars = {
+            '--sd-popup-bg': POPUP_LAYOUT.bodyBg,
+            '--sd-popup-header-bg': POPUP_HEADER.bg[this.type],
+            '--sd-popup-header-title-color': POPUP_HEADER.titleColor[this.type],
+            '--sd-popup-header-font-family': POPUP_HEADER.fontFamily,
+            '--sd-popup-header-font-weight': POPUP_HEADER.fontWeight,
+            '--sd-popup-header-font-size': `${POPUP_HEADER.fontSize}px`,
+            '--sd-popup-header-line-height': `${POPUP_HEADER.lineHeight}px`,
+            '--sd-popup-header-height': `${POPUP_HEADER.height}px`,
+            '--sd-popup-header-padding-x': `${POPUP_HEADER.paddingX}px`,
+            '--sd-popup-header-padding-y': `${POPUP_HEADER.paddingY}px`,
+            '--sd-popup-footer-bg': POPUP_FOOTER.bg,
+            '--sd-popup-footer-padding-x': `${POPUP_FOOTER.paddingX}px`,
+            '--sd-popup-footer-padding-y': `${POPUP_FOOTER.paddingY}px`,
+            '--sd-popup-footer-gap': `${POPUP_FOOTER.gap}px`,
+            '--sd-popup-footer-height': `${POPUP_FOOTER.height}px`,
+            '--sd-popup-footer-slot-height': `${POPUP_FOOTER.slotHeight}px`,
+            '--sd-popup-footer-shadow': POPUP_FOOTER.shadow,
+        };
+        const submitButtonProps = {
+            ...DEFAULT_SUBMIT_BUTTON_PROPS,
+            ...this.submitButtonProps,
+        };
+        return (h("div", { key: '15e86848fe487b9df5b09a91e5319b35d7332a6e', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: 'd8281c73a80fe5a4b8ce3ca219e967932b0ec1d3', class: "sd-popup__header" }, h("h2", { key: '31031d3988bae465e023cc94713fb39ef9299250', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: 'dfa941b0dc100b55fc08ab8cb9fce2835aaa62a5', class: "sd-popup__body" }, h("slot", { key: 'd7532a39c61746e8f517973e6fd4f7f3ac10fae0' })), this.useFooter && (h("footer", { key: 'aacedcc4c2f2e4336449bc0fbafc9f67d70cc763', class: "sd-popup__footer" }, h("div", { key: '8f093e0a8c24b03fa28e872b025cb159006d3449', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: '11e2cd175c7ae3151408ca7e564df0a37d6eebb5', name: "footer-left" })), h("sd-button", { key: '49b98d39181bd30392b7388dc7acc66caaca6038', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
+    }
+};
+SdPopup.style = sdPopupCss();
+
+export { SdPopup as sd_popup };

package/dist/esm/sd-portal.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Cnwbjz1F.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-CLCoul8o.js';
 
 const SdPortal = class {
     constructor(hostRef) {
@@ -225,7 +225,7 @@ const SdPortal = class {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: '28858d6833d8ff7f86295f7e445d51ffc84db99a' });
+        return h("slot", { key: 'c85555f533743f29615e77c1834e8f0fefae7dc7' });
     }
     static get watchers() { return {
         "open": [{

package/dist/esm/sd-radio-button.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-Cnwbjz1F.js';
+import { r as registerInstance, c as createEvent, h } from './index-CLCoul8o.js';
 
 const radioButton = {
 	xs: {
@@ -138,7 +138,7 @@ const SdRadioButton = class {
         return classes.join(' ');
     }
     getGroupClasses() {
-        const classes = ['sd-radio-button', `sd-radio-button--${this.size}`];
+        const classes = ['sd-radio-button', `sd-radio-button--${this.size ?? 'sm'}`];
         return classes.join(' ');
     }
     _groupName;
@@ -149,7 +149,7 @@ const SdRadioButton = class {
         return this._groupName;
     }
     render() {
-        const sizeTokens = RADIO_BUTTON_SIZES[this.size];
+        const sizeTokens = RADIO_BUTTON_SIZES[this.size ?? 'sm'] ?? RADIO_BUTTON_SIZES.sm;
         const cssVars = {
             '--sd-radio-button-height': `${sizeTokens.height}px`,
             '--sd-radio-button-padding-x': `${sizeTokens.paddingX}px`,
@@ -173,7 +173,7 @@ const SdRadioButton = class {
             '--sd-radio-button-content-select': RADIO_BUTTON_COLORS.content.select,
             '--sd-radio-button-content-disabled': RADIO_BUTTON_COLORS.content.disabled,
         };
-        return (h("div", { key: 'fbc0246d9cf615956121295e29bf8c702ee73edc', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
+        return (h("div", { key: 'fc1cfe14f2e71092496b241f3b4efa42a1ed878c', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
             const isSelected = this.isOptionSelected(option);
             const isDisabled = this.isOptionDisabled(option);
             return (h("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, h("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && h("span", { class: "sd-radio-button__label" }, option.label)));