@sellmate/design-system 1.0.74 → 1.0.76

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

@@ -110,6 +110,11 @@ const SdRadioButton = class {
     disabled = false;
     name;
     change;
+    componentWillLoad() {
+        this.size ??= 'sm';
+        this.options ??= [];
+        this.disabled ??= false;
+    }
     handleRadioChange = (optionValue, optionDisabled) => {
         if (this.disabled || optionDisabled)
             return;
@@ -170,7 +175,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 (index.h("div", { key: '67c8e7ad03fb6ee4cabd06591e3e11e5d38914f0', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
+        return (index.h("div", { key: 'fbc0246d9cf615956121295e29bf8c702ee73edc', 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 (index.h("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, index.h("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && index.h("span", { class: "sd-radio-button__label" }, option.label)));

package/dist/cjs/sd-select-v2-list-item_4.cjs.entry.js

@@ -325,6 +325,8 @@ const SdSelectV2Listbox = class {
     options = [];
     value = null;
     emitValue = false;
+    useSearch = false;
+    useSelectAll = false;
     triggerWidth = '200px';
     maxWidth = '640px';
     maxHeight = '260px';
@@ -342,7 +344,40 @@ const SdSelectV2Listbox = class {
     get isMulti() {
         return this.type === 'multi' || this.type === 'multi_depth';
     }
+    static SELECT_ALL_OPTION = {
+        value: '__select_all__',
+        label: '전체',
+    };
+    get showSelectAll() {
+        return this.useSelectAll && this.isMulti;
+    }
+    getAllNonDisabledLeaves() {
+        const collect = (opts) => opts.flatMap(o => {
+            if (o.disabled)
+                return [];
+            if (o.children)
+                return collect(o.children);
+            return [o];
+        });
+        return collect(this.options);
+    }
+    get selectAllState() {
+        if (!this.showSelectAll)
+            return false;
+        const allLeaves = this.getAllNonDisabledLeaves();
+        if (allLeaves.length === 0)
+            return false;
+        const selectedValues = this.getSelectedValues();
+        const selectedCount = allLeaves.filter(l => selectedValues.has(l.value)).length;
+        if (selectedCount === 0)
+            return false;
+        if (selectedCount === allLeaves.length)
+            return true;
+        return null;
+    }
     get showSearch() {
+        if (!this.useSearch)
+            return false;
         const count = this.isDepth ? countLeaves(this.options) : this.options.length;
         return count >= SEARCH_THRESHOLD;
     }
@@ -444,6 +479,9 @@ const SdSelectV2Listbox = class {
     }
     get navigableOptions() {
         const items = [];
+        if (this.showSelectAll) {
+            items.push(SdSelectV2Listbox.SELECT_ALL_OPTION);
+        }
         const walk = (opts) => {
             for (const opt of opts) {
                 const isGroup = !!opt.children;
@@ -457,6 +495,22 @@ const SdSelectV2Listbox = class {
         walk(this.filteredOptions);
         return items;
     }
+    isSelectAllOption(option) {
+        return this.showSelectAll && option.value === SdSelectV2Listbox.SELECT_ALL_OPTION.value;
+    }
+    emitSelectAll() {
+        if (!this.showSelectAll)
+            return;
+        const allLeaves = this.getAllNonDisabledLeaves();
+        this.optionSelect.emit({
+            option: { ...SdSelectV2Listbox.SELECT_ALL_OPTION, children: allLeaves },
+            leaves: allLeaves,
+        });
+    }
+    handleSelectAllClick = (e) => {
+        e.stopPropagation();
+        this.emitSelectAll();
+    };
     isOptionFocused(option) {
         if (this.focusedIndex < 0)
             return false;
@@ -529,7 +583,13 @@ const SdSelectV2Listbox = class {
                 return;
             e.preventDefault();
             e.stopPropagation();
-            this.emitOptionSelect(items[this.focusedIndex]);
+            const focused = items[this.focusedIndex];
+            if (this.isSelectAllOption(focused)) {
+                this.emitSelectAll();
+            }
+            else {
+                this.emitOptionSelect(focused);
+            }
         }
     };
     /**
@@ -608,9 +668,9 @@ const SdSelectV2Listbox = class {
             '--listbox-max-height': this.maxHeight,
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
         };
-        return (index.h("div", { key: 'd4d80ebd565436cd929961a2f9ce50adf92c124b', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-v2-list-item-search", { key: 'bd549975fe6187aa7e77e718c8d2ba4a6d6e33de', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: '4ac6a1512781942fef3e42d6ca32762962df1836', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (index.h("div", { key: '34efe12dfb3829dd7024eb473d0bb6460ad07e61', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-v2-list-item-search", { key: 'd59a97386213e93f905a817b7c3242d1fb5d5035', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: '0feb6763afe5ac661de85df2c1a3683e56b17035', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
-            } }, this.isEmpty ? (index.h("div", { class: "sd-select-v2-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (index.h("sd-select-v2-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
+            } }, this.showSelectAll && (index.h("sd-select-v2-list-item", { key: 'b4a765ddfadd39808baafd925d0cd2fcdab78800', option: SdSelectV2Listbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectV2Listbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectV2Listbox.SELECT_ALL_OPTION) })), this.isEmpty ? (index.h("div", { class: "sd-select-v2-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (index.h("sd-select-v2-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
     }
     static get watchers() { return {
         "searchKeyword": [{
@@ -670,13 +730,13 @@ const SdSelectV2Trigger = class {
                 ? SELECT_COLORS.icon.disabled
                 : SELECT_COLORS.icon.default,
         };
-        return (index.h("div", { key: '7c4f60c972c17b5954cbf0d0cc7ee38c8e6c16a3', ref: el => {
+        return (index.h("div", { key: 'ec8bf544b2878082a046fbe881afa2369709033f', ref: el => {
                 this.triggerEl = el;
             }, tabindex: this.disabled ? -1 : 0, class: {
                 'sd-select-v2-trigger': true,
                 'sd-select-v2-trigger--open': this.isOpen,
                 'sd-select-v2-trigger--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("div", { key: 'de5f5a44626fce29c5a83cf0a14dd03352d40b57', class: "sd-select-v2-trigger__content" }, index.h("span", { key: 'a36a013e9ef359160c2b9d24b42ee6f228aca302', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), index.h("sd-icon", { key: '4bfcfce96fbe2008517ee26d7802d4492292faa5', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, style: cssVars, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("div", { key: '1a6a5cf66208aa5a996e788886ff593ec0830d51', class: "sd-select-v2-trigger__content" }, index.h("span", { key: 'bd905f9149f3842e5e169e1a6086b33164b0ab66', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), index.h("sd-icon", { key: 'cc487e430f42fdd61540e265a9e5bb01e9045a58', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
                 'sd-select-v2-trigger__icon': true,
                 'sd-select-v2-trigger__icon--open': this.isOpen,
             } }))));

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

@@ -102,7 +102,7 @@ const SdSwitch = class {
             '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
             '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
         };
-        return (index.h("label", { key: 'ac6a35d06ddd04bc94369014ff586766dd745bbb', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, index.h("input", { key: '9ebc810e93c9dfa3bf7407f279dadbada579196e', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), index.h("div", { key: '7add76be99645d6434e95305f6318fac7da0de57', class: "sd-switch__track" }, index.h("div", { key: 'ed90778aa4dcd6f0853029579c36cfdb8640afcf', class: "sd-switch__knob" })), this.label && index.h("span", { key: '70e3ddf819e77da4c693a4853ddb7f392381964e', class: "sd-switch__label" }, this.label)));
+        return (index.h("label", { key: '469c012285d3c8a33792a460e74d8566c384efe8', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, index.h("input", { key: '9678e3325339a47e3e2d81ce3cd752c86ed0f906', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), index.h("div", { key: '47348914869f5215957a652cfcf3a11807a0216f', class: "sd-switch__track" }, index.h("div", { key: '0676260c42e6b79acec710f0f9ba72f01a3a7c18', class: "sd-switch__knob" })), this.label && index.h("span", { key: 'b92597092795bff38d2acf0cff76f9c381435438', class: "sd-switch__label" }, this.label)));
     }
 };
 SdSwitch.style = sdSwitchCss();

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

@@ -16,7 +16,7 @@ let nanoid = (size = 21) => {
   return id
 };
 
-const sdTableCss = () => `sd-table,:host{display:block;width:100%;max-width:100%;min-width:0}sd-table *,:host *{box-sizing:border-box}.sd-table__container{height:var(--table-height, auto);width:var(--table-width, 100%);max-width:100%;min-width:0;color:#222222;display:flex;flex-direction:column}.sd-table__clip{width:100%;min-width:0;height:var(--table-container-height, 400px);border:1px solid #E1E1E1;border-radius:8px;overflow:hidden}.sd-table__clip--has-pagination{border-radius:8px 8px 0 0}.sd-table__wrapper{width:100%;height:100%;display:flex;flex-direction:column;position:relative;font-size:12px;overflow:auto;background:#FFFFFF}.sd-table__wrapper--loading{overflow:hidden !important;pointer-events:none}.sd-table__wrapper--no-data{overflow:hidden;pointer-events:none}.sd-table__no-data{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:#888888;pointer-events:none;z-index:200;background:rgba(255, 255, 255, 0.6)}.sd-table__loading{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none}.sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table--selectable sd-thead,.sd-table--selectable sd-tbody{--selectable:true}.sd-table--sticky-header sd-thead thead{position:sticky;top:0;z-index:120}.sd-table--sticky-column sd-thead,.sd-table--sticky-column sd-tbody{--sticky-column:true}.sd-table--scrolled-left sd-thead,.sd-table--scrolled-left sd-tbody{--scrolled-left:true}.sd-table--scrolled-right sd-thead,.sd-table--scrolled-right sd-tbody{--scrolled-right:true}.sd-table--resizable sd-thead{--resizable:true}.sd-table--no-data sd-thead{opacity:0.4}.sd-table__pagination{position:relative;background:#F9F9F9;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #E1E1E1;border-top:none;border-radius:0 0 8px 8px}.sd-table__pagination sd-select-v2{position:absolute;right:10px;top:50%;transform:translateY(-50%)}`;
+const sdTableCss = () => `sd-table,:host{display:block;width:100%;max-width:100%;min-width:0}sd-table *,:host *{box-sizing:border-box}.sd-table__container{height:var(--table-height, 100%);width:var(--table-width, 100%);max-width:100%;min-width:0;color:#222222;display:flex;flex-direction:column}.sd-table__clip{width:100%;min-width:0;height:var(--table-container-height, 400px);border:1px solid #E1E1E1;border-radius:8px;overflow:hidden}.sd-table__clip--has-pagination{border-radius:8px 8px 0 0}.sd-table__wrapper{width:100%;height:100%;display:flex;flex-direction:column;position:relative;font-size:12px;overflow:auto;background:#FFFFFF}.sd-table__wrapper--loading{overflow:hidden !important;pointer-events:none}.sd-table__wrapper--no-data{overflow:hidden;pointer-events:none}.sd-table__no-data{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:#888888;pointer-events:none;z-index:200;background:rgba(255, 255, 255, 0.6)}.sd-table__loading{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none}.sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table--selectable sd-thead,.sd-table--selectable sd-tbody{--selectable:true}.sd-table--sticky-header sd-thead thead{position:sticky;top:0;z-index:120}.sd-table--sticky-column sd-thead,.sd-table--sticky-column sd-tbody{--sticky-column:true}.sd-table--scrolled-left sd-thead,.sd-table--scrolled-left sd-tbody{--scrolled-left:true}.sd-table--scrolled-right sd-thead,.sd-table--scrolled-right sd-tbody{--scrolled-right:true}.sd-table--resizable sd-thead{--resizable:true}.sd-table--no-data sd-thead{opacity:0.4}.sd-table__pagination{position:relative;background:#F9F9F9;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #E1E1E1;border-top:none;border-radius:0 0 8px 8px}.sd-table__pagination sd-select-v2{position:absolute;right:10px;top:50%;transform:translateY(-50%)}`;
 
 const SdTable = class {
     constructor(hostRef) {
@@ -72,11 +72,17 @@ const SdTable = class {
     scrolledRight = false;
     rowCount = 0;
     loadingScrollTop = 0;
+    // light DOM에 sd-thead / sd-tbody 자식이 없으면 sd-table이 직접 렌더해야 함을 알리는 플래그.
+    // componentWillLoad에서 한 번 결정되며, 이후 동적 토글은 지원하지 않는다.
+    autoThead = false;
+    autoTbody = false;
     vsStart = 0;
     vsEnd = 0;
     lastReachEndNotifiedRowCount = -1;
     scrollContainer = null;
     onScroll;
+    // 키: `${rowKey}::${field}` → { rowspan, colspan }
+    spanRegistry = new Map();
     toFiniteNumber(value, fallback) {
         const n = typeof value === 'number' ? value : Number(value);
         return Number.isFinite(n) ? n : fallback;
@@ -155,9 +161,16 @@ const SdTable = class {
             this.innerRowsPerPage = newVal.rowsPerPage;
         }
     }
+    detectChildren() {
+        const hasThead = !!this.el.querySelector(':scope > sd-thead');
+        const hasTbody = !!this.el.querySelector(':scope > sd-tbody');
+        this.autoThead = !hasThead;
+        this.autoTbody = !hasTbody;
+    }
     componentWillLoad() {
         this.syncTableIdAttribute();
         this.handleNoDataLabelChange(this.noDataLabel);
+        this.detectChildren();
         this.innerSelected = new Set(this.selected || []);
         this.columnWidths = (this.columns || []).map(c => parseInt(c.width || '120', 10));
         if (this.pagination?.page) {
@@ -180,6 +193,11 @@ const SdTable = class {
         el.getTableIdSync = () => this.getResolvedTableId();
         el.getVirtualScrollConfigSync = this.getVirtualScrollConfigSync.bind(this);
         el.calculateVisibleRange = this.calculateVisibleRange.bind(this);
+        el.registerSpanSync = this.registerSpanSync.bind(this);
+        el.unregisterSpanSync = this.unregisterSpanSync.bind(this);
+        el.getSpanSync = this.getSpanSync.bind(this);
+        el.isCoveredSync = this.isCoveredSync.bind(this);
+        el.hasRowspanSync = this.hasRowspanSync.bind(this);
         if (Array.isArray(this.rows)) {
             this.rowCount = this.rows.length;
             this.pushRowsToChildren(this.rows);
@@ -228,11 +246,22 @@ const SdTable = class {
             this.scrollContainer.removeEventListener('scroll', this.onScroll);
         }
     }
+    // light DOM(manual mode 자식)과 shadow DOM(autoThead/autoTbody fallback) 양쪽 모두에서 자식을 찾는다.
+    queryChildEl(selector) {
+        return (this.el.querySelector(selector) ??
+            this.el.shadowRoot?.querySelector(selector) ??
+            null);
+    }
+    queryAllTr() {
+        const light = Array.from(this.el.querySelectorAll('sd-tr'));
+        const shadow = Array.from(this.el.shadowRoot?.querySelectorAll('sd-tr') ?? []);
+        return [...light, ...shadow];
+    }
     pushRowsToChildren(rows) {
-        const tbody = this.el.querySelector('sd-tbody');
+        const tbody = this.queryChildEl('sd-tbody');
         if (tbody)
             tbody.rows = rows;
-        const thead = this.el.querySelector('sd-thead');
+        const thead = this.queryChildEl('sd-thead');
         if (thead)
             thead.rows = rows;
     }
@@ -243,16 +272,14 @@ const SdTable = class {
         this.refreshChildrenConfig();
     };
     refreshChildrenSelection() {
-        const thead = this.el.querySelector('sd-thead');
-        const rows = this.el.querySelectorAll('sd-tr');
+        const thead = this.queryChildEl('sd-thead');
         thead?.refreshSelection?.();
-        rows.forEach(tr => tr?.refreshSelection?.());
+        this.queryAllTr().forEach(tr => tr?.refreshSelection?.());
     }
     refreshChildrenConfig() {
-        const thead = this.el.querySelector('sd-thead');
-        const rows = this.el.querySelectorAll('sd-tr');
+        const thead = this.queryChildEl('sd-thead');
         thead?.refreshConfig?.();
-        rows.forEach(tr => tr?.refreshConfig?.());
+        this.queryAllTr().forEach(tr => tr?.refreshConfig?.());
     }
     maybeEmitVirtualReachEnd(start, end) {
         const threshold = Math.max(1, this.virtualEndThreshold);
@@ -284,7 +311,7 @@ const SdTable = class {
         this.vsEnd = end;
         const topHeight = start * this.rowHeight;
         const bottomHeight = Math.max(0, (this.rowCount - end) * this.rowHeight);
-        const tbody = this.el.querySelector('sd-tbody');
+        const tbody = this.queryChildEl('sd-tbody');
         tbody?.setSpacersSync?.(topHeight, bottomHeight);
         if (rangeChanged) {
             this.sdVirtualUpdate.emit({
@@ -376,8 +403,7 @@ const SdTable = class {
         this.updateRowsVisibility();
     }
     updateRowsVisibility() {
-        const rows = this.el.querySelectorAll('sd-tr');
-        rows.forEach(tr => tr?.updateVisibility?.());
+        this.queryAllTr().forEach(tr => tr?.updateVisibility?.());
     }
     changeRowsPerPage(perPage) {
         const changedRowsPerPage = perPage ? Number(perPage) : 0;
@@ -414,10 +440,9 @@ const SdTable = class {
             const delta = moveEvent.clientX - startX;
             const newWidth = Math.min(Math.max(startWidth + (reversed ? -delta : delta), minWidth), maxWidth);
             this.columnWidths = this.columnWidths.map((width, idx) => (idx === index ? newWidth : width));
-            const thead = this.el.querySelector('sd-thead');
-            const rows = this.el.querySelectorAll('sd-tr');
+            const thead = this.queryChildEl('sd-thead');
             thead?.setColumnWidths?.(this.columnWidths);
-            rows.forEach(tr => tr?.setColumnWidths?.(this.columnWidths));
+            this.queryAllTr().forEach(tr => tr?.setColumnWidths?.(this.columnWidths));
             const stickyRightCount = this.stickyColumn?.right || 0;
             const visibleColCount = this.columns.filter(c => c.visible !== false).length;
             const isRightStickyEdgeResizer = stickyRightCount > 0 && index === visibleColCount - stickyRightCount;
@@ -454,6 +479,112 @@ const SdTable = class {
     async getStickyStyle(colIdx) {
         return this.getStickyStyleSync(colIdx);
     }
+    // ─── rowspan / colspan registry ─────────────────────────────────
+    // sd-td가 mount/unmount 시 자기 (rowKey, field)와 span을 등록한다.
+    // sd-tr는 render마다 isCoveredSync로 자신의 셀 위치가 다른 셀의 span에
+    // 덮였는지 판정해 <td>를 그릴지 결정한다.
+    spanKey(rowKey, field) {
+        return `${rowKey}::${field}`;
+    }
+    // span 등록은 sd-td의 lifecycle에서 비동기적으로 일어나므로,
+    // 등록/해제 직후 형제 sd-tr들이 새 레지스트리 상태로 다시 그려져야
+    // 덮인 셀이 사라지거나 다시 나타난다.
+    // forceUpdate는 React 래퍼 환경에서 prop 동기화 사이클과 부딪혀 누락되는
+    // 경우가 있어, sd-tr의 @State (spansVersion)을 통해 재렌더를 강제한다.
+    requestAllTrUpdate() {
+        this.queryAllTr().forEach(tr => {
+            const trAny = tr;
+            if (typeof trAny.bumpSpansVersion === 'function') {
+                trAny.bumpSpansVersion();
+            }
+            else {
+                index.forceUpdate(tr);
+            }
+        });
+    }
+    registerSpanSync(rowKey, field, rowspan, colspan) {
+        if (rowKey == null || !field)
+            return;
+        const safeRowspan = Math.max(1, Math.floor(rowspan || 1));
+        const safeColspan = Math.max(1, Math.floor(colspan || 1));
+        const key = this.spanKey(rowKey, field);
+        const prev = this.spanRegistry.get(key);
+        if (safeRowspan === 1 && safeColspan === 1) {
+            if (!prev)
+                return;
+            this.spanRegistry.delete(key);
+            this.requestAllTrUpdate();
+            return;
+        }
+        if (prev && prev.rowspan === safeRowspan && prev.colspan === safeColspan)
+            return;
+        this.spanRegistry.set(key, { rowspan: safeRowspan, colspan: safeColspan });
+        this.requestAllTrUpdate();
+    }
+    unregisterSpanSync(rowKey, field) {
+        if (rowKey == null || !field)
+            return;
+        const key = this.spanKey(rowKey, field);
+        if (!this.spanRegistry.has(key))
+            return;
+        this.spanRegistry.delete(key);
+        this.requestAllTrUpdate();
+    }
+    getSpanSync(rowKey, field) {
+        return this.spanRegistry.get(this.spanKey(rowKey, field));
+    }
+    // 레지스트리에 rowspan>1 항목이 하나라도 있으면 true.
+    // hover 동작을 끌지 결정하는 데 사용 — colspan만 있는 경우는 그대로 hover 유지.
+    hasRowspanSync() {
+        for (const span of this.spanRegistry.values()) {
+            if (span.rowspan > 1)
+                return true;
+        }
+        return false;
+    }
+    isCoveredSync(rowKey, colIdx, columns) {
+        if (this.spanRegistry.size === 0)
+            return false;
+        const visibleCols = columns.filter(c => c.visible !== false);
+        // 1. 같은 행 왼쪽 스캔 — colspan으로 이 위치를 덮는 셀이 있는가
+        for (let i = 0; i < colIdx; i++) {
+            const c = visibleCols[i];
+            if (!c)
+                continue;
+            const field = typeof c.field === 'string' ? c.field : c.name;
+            const span = this.spanRegistry.get(this.spanKey(rowKey, field));
+            if (!span)
+                continue;
+            if (i + span.colspan > colIdx)
+                return true;
+        }
+        // 2. 위쪽 행 스캔 — 숫자 변환 가능한 rowKey만 rowspan 평가
+        const myRowIdx = Number(rowKey);
+        if (!Number.isFinite(myRowIdx))
+            return false;
+        for (const [key, span] of this.spanRegistry) {
+            if (span.rowspan <= 1)
+                continue;
+            const sepIdx = key.indexOf('::');
+            if (sepIdx < 0)
+                continue;
+            const otherRowKey = key.slice(0, sepIdx);
+            const otherField = key.slice(sepIdx + 2);
+            const otherRowIdx = Number(otherRowKey);
+            if (!Number.isFinite(otherRowIdx))
+                continue;
+            if (otherRowIdx >= myRowIdx)
+                continue;
+            if (otherRowIdx + span.rowspan <= myRowIdx)
+                continue;
+            const otherColIdx = visibleCols.findIndex(c => (typeof c.field === 'string' ? c.field : c.name) === otherField);
+            if (otherColIdx < 0)
+                continue;
+            if (otherColIdx <= colIdx && otherColIdx + span.colspan > colIdx)
+                return true;
+        }
+        return false;
+    }
     setRowCountSync(count) {
         const safeCount = Math.max(0, Math.floor(this.toFiniteNumber(count, 0)));
         if (safeCount !== this.rowCount) {
@@ -501,6 +632,22 @@ const SdTable = class {
             return null;
         return { from: this.vsStart, to: this.vsEnd };
     }
+    // autoTbody fallback에서 sd-table이 직접 sd-tr을 만들어내는 경로.
+    // 가상 스크롤은 사용자가 직접 SdTbody+SdTr을 작성해야 하므로 빈 배열을 반환한다.
+    renderAutoRows() {
+        if (this.useVirtualScroll)
+            return null;
+        const allRows = this.rows ?? [];
+        const pageInfo = this.getPaginationInfoSync();
+        const startIdx = pageInfo?.startIndex ?? 0;
+        const displayed = pageInfo
+            ? allRows.slice(pageInfo.startIndex, pageInfo.endIndex)
+            : allRows;
+        return displayed.map((row, i) => {
+            const absoluteIdx = startIdx + i;
+            return (index.h("sd-tr", { key: absoluteIdx, "row-key": String(absoluteIdx), row: row }));
+        });
+    }
     get tableClasses() {
         return [
             'sd-table',
@@ -520,24 +667,24 @@ const SdTable = class {
     }
     render() {
         const resolvedTableId = this.getResolvedTableId();
-        return (index.h(index.Host, { key: '0b90643721a90b7bb59a6c31f6edeb313849b973' }, index.h("div", { key: 'e55fe4f476dbea4888a168861e7e6d6951d7d489', class: "sd-table__container", style: {
+        return (index.h(index.Host, { key: 'd73cd690ad11ce92af37b6f32374f6f891c5b677' }, index.h("div", { key: 'f51d23212885ad8121b9a4e895fb854f1e142bc4', class: "sd-table__container", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
                 '--table-container-height': `calc(${this.height || '100%'} - ${this.pagination && this.rowCount > 0 && !this.useVirtualScroll ? 48 : 0}px)`,
-            } }, index.h("div", { key: 'de18a900037a7b2f619dd22981c30ed76f5a8111', class: {
+            } }, index.h("div", { key: '84b1ba7b2220ff55304b9c19e59304ca2257cff0', class: {
                 'sd-table__clip': true,
                 'sd-table__clip--has-pagination': !!(this.pagination &&
                     this.pagination.rowsPerPage > 0 &&
                     this.rowCount > 0 &&
                     !this.useVirtualScroll),
-            } }, index.h("div", { key: '028e0982d415033adaf420ee6b953241c8f3dbec', class: {
+            } }, index.h("div", { key: 'c901eba67eae29515bf0b3edcc6632b2aacf0f80', class: {
                 'sd-table__wrapper': true,
                 'sd-table__wrapper--loading': this.isLoading,
                 'sd-table__wrapper--no-data': this.rowCount === 0 && !this.isLoading,
-            } }, this.isLoading && (index.h("div", { key: '8c9110c9c2c26cddbbed8e1f2782ecfaafd3679c', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, index.h("sd-circle-progress", { key: '51b61f91b0ecebf63fe3e65b94012963f0375e5c', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (index.h("div", { key: '0a7a45049014869b8164b081a251218d3c814e87', class: "sd-table__no-data" }, index.h("slot", { key: 'd4b6219e5dcaaa22be3360f7f0f05a8b32533890', name: "no-data" }, index.h("span", { key: 'c76848aad8a1d3967f3cd239090e97266e46ab3e' }, this.resolvedNoDataLabel)))), index.h("table", { key: '2b560d112402549c7043b337d944b0de88c3ba0e', class: this.tableClasses }, index.h("slot", { key: '1c4583148df6a585f389c1bed0426fa4a3cb4899', name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }), index.h("slot", { key: 'a5d983106de61c829f9cbeb541d1908fee48468c', name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange })))), this.pagination &&
+            } }, this.isLoading && (index.h("div", { key: '35a237d0203b2479dbdb77ac42c918a9375bdfd3', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, index.h("sd-circle-progress", { key: '21a29981c1cdbd679f46abd2e7de7794c9ebbca9', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (index.h("div", { key: '07ad28bc6e7556cfe229fc1e952410f388424a7f', class: "sd-table__no-data" }, index.h("slot", { key: 'bf21e60f5b86614587b704bea2965b9467c7f467', name: "no-data" }, index.h("span", { key: 'f3d012d12e9189545b0cef52250502d46cb9a764' }, this.resolvedNoDataLabel)))), index.h("table", { key: '655d3dc017c6445ec454faef0e5e9837b7ee0013', class: this.tableClasses }, this.autoThead ? (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-thead", { rows: this.rows ?? [] }))) : (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
             this.pagination.rowsPerPage > 0 &&
             this.rowCount > 0 &&
-            !this.useVirtualScroll && (index.h("div", { key: '004355d84e2cfc2fd38a9d4811f14fd66dc5c21b', class: "sd-table__pagination" }, index.h("sd-pagination", { key: '463586c7e57782a7989962f73cb3d4e8c04f5bce', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (index.h("sd-select-v2", { key: '1f26de447da63ef0c4a24ffb49666a0687db9991', value: this.useInternalPagination
+            !this.useVirtualScroll && (index.h("div", { key: '7ab0b30a0c0e0a197b0f79c6b07ef5614d5d2879', class: "sd-table__pagination" }, index.h("sd-pagination", { key: '71d44bba5a82f4d8f7c067e525db15fe9a36c305', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (index.h("sd-select-v2", { key: 'a9ab33347db0714da188f658a2ca1902502db690', value: this.useInternalPagination
                 ? this.innerRowsPerPage
                 : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
                 if (!this.isRowsPerPageValue(e.detail))

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

@@ -188,7 +188,7 @@ const SdTabs = class {
         };
     }
     render() {
-        return (index.h("div", { key: '390edfad274caa06df38af9d04580015a1744a44', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index$1) => {
+        return (index.h("div", { key: '3698b7b43e74ff053d61d5ce696b987373fd27d6', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index$1) => {
             const badgeName = this.getBadgeName(tab);
             return (index.h("div", { key: `tab-${index$1}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab) }, index.h("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge !== undefined && tab.badge !== null && tab.badge !== '' && (index.h("sd-tag", { name: badgeName, label: tab.badge.toString() }))));
         })));

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

@@ -172,7 +172,7 @@ const SdTag = class {
     render() {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (index.h("span", { key: 'da19900d267d2b2f000e1790133966a7976bcded', class: "sd-tag", style: {
+        return (index.h("span", { key: 'def10730670f37a62fa76b507f7f15a1b1f956fc', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -182,7 +182,7 @@ const SdTag = class {
                 '--sd-tag-font-weight': config.fontWeight,
                 '--sd-tag-line-height': config.lineHeight,
                 '--sd-tag-radius': config.radius,
-            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, index.h("span", { key: 'e426021988395058367872ac23658586b2895764', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, index.h("span", { key: '32082536736e20074263632aa29f36bc7709db39', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
 };
 SdTag.style = sdTagCss();

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

@@ -13,14 +13,22 @@ const SdTd = class {
     field;
     rowKey;
     align;
+    rowspan;
+    colspan;
     handleFieldChange() {
         this.syncSlotName();
+        this.syncSpanRegistration();
     }
     handleRowKeyChange() {
         this.syncSlotName();
+        this.syncSpanRegistration();
+    }
+    handleSpanChange() {
+        this.syncSpanRegistration();
     }
     componentWillLoad() {
         this.syncSlotName();
+        this.syncSpanRegistration();
         // slot 타이밍 엇갈림 대응: 부모 sd-tr forceUpdate로 슬롯 재매칭
         const parentTr = this.el.parentElement;
         if (parentTr?.tagName?.toLowerCase() === 'sd-tr') {
@@ -29,6 +37,44 @@ const SdTd = class {
     }
     componentDidLoad() {
         this.syncSlotName();
+        this.syncSpanRegistration();
+    }
+    // React StrictMode에서는 disconnect/reconnect 사이클이 일어나면서
+    // 동일 인스턴스의 componentWillLoad는 더 이상 호출되지 않는다.
+    // 재연결 시점에도 등록 상태를 복구해야 rowspan/colspan이 유지된다.
+    connectedCallback() {
+        this.syncSpanRegistration();
+    }
+    disconnectedCallback() {
+        const table = this.findTable();
+        if (table?.unregisterSpanSync && this.field && this.rowKey != null) {
+            table.unregisterSpanSync(String(this.rowKey), this.field);
+            this.requestParentTrUpdate();
+        }
+    }
+    findTable() {
+        return this.el.closest('sd-table');
+    }
+    requestParentTrUpdate() {
+        const parentTr = this.el.parentElement;
+        if (parentTr?.tagName?.toLowerCase() !== 'sd-tr')
+            return;
+        const trAny = parentTr;
+        if (typeof trAny.bumpSpansVersion === 'function') {
+            trAny.bumpSpansVersion();
+        }
+        else {
+            index.forceUpdate(parentTr);
+        }
+    }
+    syncSpanRegistration() {
+        const table = this.findTable();
+        if (!table?.registerSpanSync || !this.field || this.rowKey == null)
+            return;
+        const rs = Math.max(1, Math.floor(Number(this.rowspan) || 1));
+        const cs = Math.max(1, Math.floor(Number(this.colspan) || 1));
+        table.registerSpanSync(String(this.rowKey), this.field, rs, cs);
+        this.requestParentTrUpdate();
     }
     syncSlotName() {
         const table = this.el.closest('sd-table');
@@ -42,7 +88,7 @@ const SdTd = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '672c967273dac405ed4a47fa5939463265075681', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: 'c15e572fdf4a8c68fff8b69b586dfbf9f01dce1b' })));
+        return (index.h(index.Host, { key: 'da9ce2edb986d4b3cf1a6e5f59030009f1288250', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: '8514071bd38c4f5b1997ae7239b8585a25f97ce0' })));
     }
     static get watchers() { return {
         "field": [{
@@ -50,6 +96,12 @@ const SdTd = class {
             }],
         "rowKey": [{
                 "handleRowKeyChange": 0
+            }],
+        "rowspan": [{
+                "handleSpanChange": 0
+            }],
+        "colspan": [{
+                "handleSpanChange": 0
             }]
     }; }
 };

package/dist/cjs/sd-text-link.cjs.entry.js

@@ -73,16 +73,16 @@ const SdTextLink = class {
             '--sd-text-link-text-decoration': typo.textDecoration,
             ...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
         };
-        return (index.h("span", { key: '1128254cddacf5869f320ce2b788b06646f27d7f', class: {
+        return (index.h("span", { key: '77c1aa4a4a6297af9431947b7146db2ddfad52b5', class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.icon && (index.h("sd-icon", { key: '52c069d637a2ccf9cd4e7bd1ab3a62ea981d2e1e', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: '99a09359c75c2eb6c2e2ef6b9e3b87d92c3f7810', class: labelClassName }, this.label), this.useArrow && (index.h("span", { key: 'c7e77454d9d002c0e043dc71a418c65ecd60cff5', class: "sd-text-link__arrow", style: {
+            }, style: cssVars, onClick: this.handleClick }, this.icon && (index.h("sd-icon", { key: '6f760b3c7e0adccd2aa08cb662cca90a3d3a227b', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: '3ff017970956d8e5cb72b4d6e26d33aaf0551e76', class: labelClassName }, this.label), this.useArrow && (index.h("span", { key: '8332cbe3b2283ce866044e55804e35338569a38f', class: "sd-text-link__arrow", style: {
                 width: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 height: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-            } }, index.h("sd-icon", { key: '677c88823b02084449cd2dec83cc6bd27dfb8006', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
+            } }, index.h("sd-icon", { key: '2fa166ef60f6d1ee933450146bc667ee89dad2ce', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
     }
 };
 SdTextLink.style = sdTextLinkCss();

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

@@ -130,7 +130,7 @@ const SdTextarea = class {
             '--sd-system-size-field-sm-height': 'auto',
             '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
         };
-        return (index.h("sd-field", { key: '345a70f335ee103a4e45c75e17559359beec01c9', 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, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: 'dc09d61d06f3cefb15dce980e293a266fdf3d79d', class: "sd-textarea__content" }, index.h("textarea", { key: '085de248d7376e0d19d3588bc836bd5ad17cb335', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
+        return (index.h("sd-field", { key: 'a77834af45e2ca7abaa019d18b6108a51f0cf4ae', 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, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: '2cbc8ef4febeab89eb336cb29d34abdbf9f2f080', class: "sd-textarea__content" }, index.h("textarea", { key: '3b09e30b4e42affc7f03fb8a354387b57e5ee0fe', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
     }
     static get watchers() { return {
         "value": [{

package/dist/cjs/sd-toast-container.cjs.entry.js

@@ -234,7 +234,7 @@ const SdToastContainer = class {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (index.h("div", { key: '601c4c5aa55df02459866607ca7c59da53c2eda5', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (index.h("div", { key: '5057793be2d6ce213edc84d58f7273248646dc19', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {