@sellmate/design-system 1.0.74 → 1.0.76

package/hydrate/index.mjs

@@ -9867,6 +9867,11 @@ class SdGhostButton {
     disabled = false;
     click;
     hasWarnedMissingAriaLabel = false;
+    componentWillLoad() {
+        this.size ??= 'sm';
+        this.intent ??= 'default';
+        this.ariaLabel ??= '';
+    }
     handleClick = (event) => {
         if (this.disabled) {
             event.preventDefault();
@@ -9891,19 +9896,19 @@ class SdGhostButton {
     render() {
         const sizeConfig = GHOST_BUTTON_SIZES[this.size];
         const contentColor = this.disabled
-            ? GHOST_BUTTON_DISABLED_COLORS[this.intent ?? 'default']
-            : GHOST_BUTTON_CONTENT_COLORS[this.intent ?? 'default'];
+            ? GHOST_BUTTON_DISABLED_COLORS[this.intent]
+            : GHOST_BUTTON_CONTENT_COLORS[this.intent];
         const accessibleName = this.ariaLabel.trim() || undefined;
-        return (hAsync("button", { key: '34c5026b4819b624b19d1773bad413b689633c2a', class: {
+        return (hAsync("button", { key: 'd7f6fcbed3526ffb8b90b205dbe2bbf55abf03a0', class: {
                 'sd-ghost-button': true,
                 'sd-ghost-button--disabled': this.disabled,
             }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
                 '--sd-ghost-button-size': `${sizeConfig.size}px`,
                 '--sd-ghost-button-radius': `${GHOST_BUTTON_RADIUS[this.size]}px`,
-                '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent ?? 'default'],
+                '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent],
                 '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
                 '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, hAsync("sd-icon", { key: '063f7cfabfdbf0f4f2f4c1a2c811e6c3734d941f', name: this.icon, size: sizeConfig.icon, color: contentColor })));
+            }, onClick: this.handleClick }, hAsync("sd-icon", { key: '9efc3a3fbf7878a9a50b2efbf054b335d9cddfe0', name: this.icon, size: sizeConfig.icon, color: contentColor })));
     }
     static get style() { return sdGhostButtonCss(); }
     static get cmpMeta() { return {
@@ -11059,7 +11064,7 @@ class SdLoadingModal {
             '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
             '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
         };
-        return (hAsync(Host, { key: '91fe223de0146ad3a631284728597d6dca312a7e', style: hostStyle }, hAsync("div", { key: 'e3284b3e8fd775b0128ae2e7495141d04d07eaa8', class: "sd-loading-modal" }, hAsync("div", { key: '4975a8e75f7cf983c54a015f25520c34aef855a5', class: "sd-loading-modal__content" }, this.state === 'loading' ? (hAsync("sd-circle-progress", { indeterminate: true })) : (hAsync("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), hAsync("p", { key: 'c3d09b0c957a0cf2097772499a91bb8f86f19e98', class: "sd-loading-modal__message" }, this.resolvedMessage), this.useButton && (hAsync("div", { key: 'c5c1fa02e3c7c3dd3747a1609dc1fa9aab70c61c', class: "sd-loading-modal__button" }, hAsync("sd-button-v2", { key: '849bdd00035bfa602ec814e55b585588f15871c6', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
+        return (hAsync(Host, { key: '3113deea33ae8f08ac631e53744c94dfc0ffe829', style: hostStyle }, hAsync("div", { key: 'd6afa60fe2cf83bd1afd707e8aa218d2c66d761b', class: "sd-loading-modal" }, hAsync("div", { key: 'be70c3adcbea4fca528f459ad7fbc33e82649073', class: "sd-loading-modal__content" }, this.state === 'loading' ? (hAsync("sd-circle-progress", { indeterminate: true })) : (hAsync("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), hAsync("div", { key: '9aa73a423423e093606e58796490be123e5fa52a', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (hAsync("p", { class: "sd-loading-modal__message" }, message)))) : (hAsync("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (hAsync("div", { key: '59fd5cf61b53f1362974a7b92ad6e6319f141def', class: "sd-loading-modal__button" }, hAsync("sd-button-v2", { key: '9bfe53124cd1f8a3008d8a2ccc6ea9d8af5d62c2', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
     }
     static get style() { return sdLoadingModalCss(); }
     static get cmpMeta() { return {
@@ -11187,10 +11192,8 @@ class SdModalContainer {
     }
     get el() { return getElement(this); }
     autoRemove = false;
-    entry;
-    isVisible = false;
-    backdropVisible = false;
-    layerRef;
+    entries = [];
+    layerRefs = new Map();
     async open(options, modalRef) {
         const id = `modal-${++modalIdCounter}`;
         const modalEl = this.createConfirmModal(id, options);
@@ -11201,6 +11204,7 @@ class SdModalContainer {
             modalRef,
             persistent: !!options.persistent,
             closing: false,
+            backdropVisible: false,
         });
         return id;
     }
@@ -11214,6 +11218,7 @@ class SdModalContainer {
             modalRef,
             persistent: !!options.persistent,
             closing: false,
+            backdropVisible: false,
         });
         return id;
     }
@@ -11228,91 +11233,93 @@ class SdModalContainer {
             modalRef,
             persistent: !!options.persistent,
             closing: false,
+            backdropVisible: false,
         });
         return id;
     }
     componentDidRender() {
-        if (!this.entry || this.entry.closing || !this.layerRef)
+        if (!Array.isArray(this.entries))
             return;
-        if (this.entry.modalEl.isConnected)
-            return;
-        const { id, modalEl } = this.entry;
-        this.layerRef.appendChild(modalEl);
-        this.waitForModalReady(modalEl).then(() => {
-            requestAnimationFrame(() => {
-                if (!this.entry || this.entry.id !== id || this.entry.closing || !modalEl.isConnected)
-                    return;
-                this.backdropVisible = true;
-                modalEl.classList.add('sd-modal-container__modal--visible');
+        for (const entry of this.entries) {
+            if (entry.closing || entry.modalEl.isConnected)
+                continue;
+            const layerRef = this.layerRefs.get(entry.id);
+            if (!layerRef)
+                continue;
+            const { id, modalEl } = entry;
+            layerRef.appendChild(modalEl);
+            this.waitForModalReady(modalEl).then(() => {
+                requestAnimationFrame(() => {
+                    const current = this.entries.find(e => e.id === id);
+                    if (!current || current.closing || !modalEl.isConnected)
+                        return;
+                    this.entries = this.entries.map(e => e.id === id ? { ...e, backdropVisible: true } : e);
+                    modalEl.classList.add('sd-modal-container__modal--visible');
+                });
             });
-        });
+        }
     }
     disconnectedCallback() {
-        if (this.entry?.dismissTimerId)
-            clearTimeout(this.entry.dismissTimerId);
-        if (this.entry)
-            unregisterModal(this.entry.id);
+        for (const entry of this.entries ?? []) {
+            if (entry.dismissTimerId)
+                clearTimeout(entry.dismissTimerId);
+            unregisterModal(entry.id);
+        }
     }
     async dismissById(id, reason) {
-        if (this.entry?.id !== id)
+        const entry = this.entries.find(e => e.id === id);
+        if (!entry)
             return;
-        this.requestDismiss(reason);
+        this.requestDismiss(id, reason);
     }
     async update(id, props) {
-        if (!this.entry || this.entry.id !== id || this.entry.closing)
+        const entry = this.entries.find(e => e.id === id && !e.closing);
+        if (!entry)
             return;
-        const tag = this.entry.modalEl.tagName.toLowerCase();
+        const tag = entry.modalEl.tagName.toLowerCase();
         if (tag === 'sd-loading-modal') {
-            this.applyLoadingProps(this.entry.modalEl, props);
+            this.applyLoadingProps(entry.modalEl, props);
             return;
         }
-        this.applyProps(this.entry.modalEl, props);
+        this.applyProps(entry.modalEl, props);
     }
     mountEntry(entry) {
-        if (this.entry) {
-            throw new Error('[sd-modal-container] This instance already manages an active modal.');
-        }
-        this.entry = entry;
-        this.backdropVisible = false;
-        this.isVisible = true;
+        this.entries = [...(this.entries ?? []), entry];
         registerModal({
             id: entry.id,
             persistent: entry.persistent,
-            requestClose: () => this.dispatchClose(),
+            requestClose: () => this.dispatchClose(entry.id),
             shake: () => this.shakeModal(entry.modalEl),
             setZIndex: zIndex => {
                 this.el.style.setProperty('--sd-modal-container-z-index', String(zIndex));
             },
         });
     }
-    attachModalEventListeners(_id, modalEl) {
-        modalEl.addEventListener('sdOk', () => this.requestDismiss('confirm'));
-        modalEl.addEventListener('sdCancel', () => this.requestDismiss('cancel'));
-        modalEl.addEventListener('sdClose', () => this.requestDismiss('close'));
+    attachModalEventListeners(id, modalEl) {
+        modalEl.addEventListener('sdOk', () => this.requestDismiss(id, 'confirm'));
+        modalEl.addEventListener('sdCancel', () => this.requestDismiss(id, 'cancel'));
+        modalEl.addEventListener('sdClose', () => this.requestDismiss(id, 'close'));
     }
-    attachLoadingModalEventListeners(_id, modalEl) {
+    attachLoadingModalEventListeners(id, modalEl) {
         modalEl.addEventListener('sdClick', () => {
-            this.entry?.modalRef._triggerClick?.();
+            const entry = this.entries.find(e => e.id === id);
+            entry?.modalRef._triggerClick?.();
         });
     }
-    dispatchClose() {
-        this.entry?.modalEl.dispatchEvent(new CustomEvent('sdClose'));
+    dispatchClose(id) {
+        const entry = this.entries.find(e => e.id === id);
+        entry?.modalEl.dispatchEvent(new CustomEvent('sdClose'));
     }
-    requestDismiss(reason) {
-        const currentEntry = this.entry;
+    requestDismiss(id, reason) {
+        const currentEntry = this.entries.find(e => e.id === id);
         if (!currentEntry || currentEntry.closing)
             return;
         currentEntry.modalEl.classList.remove('sd-modal-container__modal--visible');
         const dismissTimerId = setTimeout(() => {
-            this.finalizeDismiss(currentEntry.id);
+            this.finalizeDismiss(id);
         }, ANIMATION_DURATION);
-        setModalInteractive(currentEntry.id, false);
-        this.entry = {
-            ...currentEntry,
-            closing: true,
-            dismissTimerId,
-        };
-        this.backdropVisible = false;
+        setModalInteractive(id, false);
+        this.entries = (this.entries ?? []).map(e => e.id === id ? { ...e, closing: true, dismissTimerId, backdropVisible: false } : e);
         if (reason === 'confirm')
             currentEntry.modalRef._triggerOk();
         else if (reason === 'cancel')
@@ -11321,18 +11328,17 @@ class SdModalContainer {
             currentEntry.modalRef._triggerClose();
     }
     finalizeDismiss(id) {
-        const currentEntry = this.entry;
-        if (!currentEntry || currentEntry.id !== id)
+        const currentEntry = this.entries.find(e => e.id === id);
+        if (!currentEntry)
             return;
         if (currentEntry.dismissTimerId)
             clearTimeout(currentEntry.dismissTimerId);
         currentEntry.modalEl.remove();
         unregisterModal(id);
         currentEntry.modalRef._triggerDismissed();
-        this.entry = undefined;
-        this.backdropVisible = false;
-        this.isVisible = false;
-        if (this.autoRemove) {
+        this.layerRefs.delete(id);
+        this.entries = (this.entries ?? []).filter(e => e.id !== id);
+        if (this.autoRemove && this.entries.length === 0) {
             this.el.remove();
         }
     }
@@ -11353,8 +11359,14 @@ class SdModalContainer {
     applyLoadingProps(el, options) {
         if (this.hasOwnProp(options, 'state'))
             this.setAttr(el, 'state', options.state);
-        if (this.hasOwnProp(options, 'message'))
-            this.setAttr(el, 'message', options.message);
+        if (this.hasOwnProp(options, 'message')) {
+            if (Array.isArray(options.message)) {
+                el.message = options.message;
+            }
+            else {
+                this.setAttr(el, 'message', options.message);
+            }
+        }
         if (this.hasOwnProp(options, 'useButton')) {
             if (options.useButton)
                 el.setAttribute('use-button', '');
@@ -11400,11 +11412,11 @@ class SdModalContainer {
         if (this.hasOwnProp(options, 'tagContents'))
             el.tagContents = options.tagContents;
     }
-    handleBackdropClick = () => {
-        if (!this.entry || !isTopInteractiveModal(this.entry.id))
+    handleBackdropClick(id) {
+        if (!isTopInteractiveModal(id))
             return;
-        requestCloseForModal(this.entry.id);
-    };
+        requestCloseForModal(id);
+    }
     shakeModal(modalEl) {
         const cls = 'sd-modal-container__modal--shake';
         modalEl.classList.remove(cls);
@@ -11433,14 +11445,15 @@ class SdModalContainer {
         el.setAttribute(name, value);
     }
     render() {
-        if (!this.isVisible || !this.entry)
+        if (!this.entries?.length)
             return null;
-        return (hAsync("div", { class: "sd-modal-container" }, hAsync("div", { class: "sd-modal-container__layer", "data-modal-id": this.entry.id, ref: el => {
-                this.layerRef = el;
+        return (hAsync("div", { class: "sd-modal-container" }, this.entries.map((entry, index) => (hAsync("div", { key: entry.id, class: "sd-modal-container__layer", style: { zIndex: String(index + 1) }, "data-modal-id": entry.id, ref: el => {
+                if (el)
+                    this.layerRefs.set(entry.id, el);
             } }, hAsync("div", { class: {
                 'sd-modal-container__backdrop': true,
-                'sd-modal-container__backdrop--visible': this.backdropVisible,
-            }, onClick: this.handleBackdropClick }))));
+                'sd-modal-container__backdrop--visible': entry.backdropVisible,
+            }, onClick: () => this.handleBackdropClick(entry.id) }))))));
     }
     static get style() { return sdModalContainerCss(); }
     static get cmpMeta() { return {
@@ -11448,9 +11461,7 @@ class SdModalContainer {
         "$tagName$": "sd-modal-container",
         "$members$": {
             "autoRemove": [4, "auto-remove"],
-            "entry": [32],
-            "isVisible": [32],
-            "backdropVisible": [32],
+            "entries": [32],
             "open": [64],
             "openLoading": [64],
             "createCustom": [64],
@@ -12744,6 +12755,11 @@ class SdRadioButton {
     disabled = false;
     name;
     change;
+    componentWillLoad() {
+        this.size ??= 'sm';
+        this.options ??= [];
+        this.disabled ??= false;
+    }
     handleRadioChange = (optionValue, optionDisabled) => {
         if (this.disabled || optionDisabled)
             return;
@@ -12804,7 +12820,7 @@ class SdRadioButton {
             '--sd-radio-button-content-select': RADIO_BUTTON_COLORS.content.select,
             '--sd-radio-button-content-disabled': RADIO_BUTTON_COLORS.content.disabled,
         };
-        return (hAsync("div", { key: '67c8e7ad03fb6ee4cabd06591e3e11e5d38914f0', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
+        return (hAsync("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 (hAsync("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, hAsync("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && hAsync("span", { class: "sd-radio-button__label" }, option.label)));
@@ -14647,6 +14663,9 @@ class SdSelectV2 {
     labelTooltipProps = null;
     emitValue = false;
     width = '';
+    useSearch = false;
+    allSelectedLabel = '전체';
+    useSelectAll = false;
     isOpen = false;
     isAnimatingOut = false;
     triggerWidth = '200px';
@@ -14688,6 +14707,12 @@ class SdSelectV2 {
         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 => {
@@ -14712,6 +14737,15 @@ class SdSelectV2 {
     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))
@@ -14858,15 +14892,15 @@ class SdSelectV2 {
                 this.closeDropdown();
             },
         };
-        return (hAsync("sd-field", { key: '76b432c04fa0f9fca70e63e9c7d16ed768fc9dd1', 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: () => {
+        return (hAsync("sd-field", { key: '62bb998e1d455a3792001da4849ba867c60cdd9f', 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;
-            } }, hAsync("div", { key: 'dba3a313b7e0171a441540877aacdc7d5c2e7f04', class: "sd-select-v2", ref: el => {
+            } }, hAsync("div", { key: '42fa82a3c53804d9f90aadb0465d52fd9f4e446e', class: "sd-select-v2", ref: el => {
                 this.triggerRef = el;
-            } }, hAsync("sd-select-v2-trigger", { key: '7790357558f174eb70b15ed72574f738b062c479', ref: el => {
+            } }, hAsync("sd-select-v2-trigger", { key: 'c97ae1e67019b099eee72f829d554b9e0350af30', 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) && (hAsync("sd-portal", { key: '672f3583b24e363b74d184d13866ee19a78b04d9', ...portalProps }, hAsync("sd-select-v2-listbox", { key: 'f71d95ad06c74356e4d5ce94da7e720c002390b6', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+            }, 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) && (hAsync("sd-portal", { key: '5018c8bf4c60a13541f0872149d12b92f164ca96', ...portalProps }, hAsync("sd-select-v2-listbox", { key: 'b7222f7649a8f096f085840a3dd97b7aa069152c', 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": [{
@@ -14898,6 +14932,9 @@ class SdSelectV2 {
             "labelTooltipProps": [16],
             "emitValue": [4, "emit-value"],
             "width": [8],
+            "useSearch": [4, "use-search"],
+            "allSelectedLabel": [1, "all-selected-label"],
+            "useSelectAll": [4, "use-select-all"],
             "name": [1],
             "isOpen": [32],
             "isAnimatingOut": [32],
@@ -15265,6 +15302,8 @@ class SdSelectV2Listbox {
     options = [];
     value = null;
     emitValue = false;
+    useSearch = false;
+    useSelectAll = false;
     triggerWidth = '200px';
     maxWidth = '640px';
     maxHeight = '260px';
@@ -15282,7 +15321,40 @@ class SdSelectV2Listbox {
     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;
     }
@@ -15384,6 +15456,9 @@ class SdSelectV2Listbox {
     }
     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;
@@ -15397,6 +15472,22 @@ class SdSelectV2Listbox {
         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;
@@ -15469,7 +15560,13 @@ class SdSelectV2Listbox {
                 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);
+            }
         }
     };
     /**
@@ -15548,9 +15645,9 @@ class SdSelectV2Listbox {
             '--listbox-max-height': this.maxHeight,
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
         };
-        return (hAsync("div", { key: 'd4d80ebd565436cd929961a2f9ce50adf92c124b', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-v2-list-item-search", { key: 'bd549975fe6187aa7e77e718c8d2ba4a6d6e33de', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: '4ac6a1512781942fef3e42d6ca32762962df1836', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (hAsync("div", { key: '34efe12dfb3829dd7024eb473d0bb6460ad07e61', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-v2-list-item-search", { key: 'd59a97386213e93f905a817b7c3242d1fb5d5035', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: '0feb6763afe5ac661de85df2c1a3683e56b17035', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
-            } }, this.isEmpty ? (hAsync("div", { class: "sd-select-v2-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (hAsync("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 && (hAsync("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 ? (hAsync("div", { class: "sd-select-v2-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (hAsync("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": [{
@@ -15566,6 +15663,8 @@ class SdSelectV2Listbox {
             "options": [16],
             "value": [8],
             "emitValue": [4, "emit-value"],
+            "useSearch": [4, "use-search"],
+            "useSelectAll": [4, "use-select-all"],
             "triggerWidth": [1, "trigger-width"],
             "maxWidth": [1, "max-width"],
             "maxHeight": [1, "max-height"],
@@ -15629,13 +15728,13 @@ class SdSelectV2Trigger {
                 ? SELECT_COLORS.icon.disabled
                 : SELECT_COLORS.icon.default,
         };
-        return (hAsync("div", { key: '7c4f60c972c17b5954cbf0d0cc7ee38c8e6c16a3', ref: el => {
+        return (hAsync("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 }, hAsync("div", { key: 'de5f5a44626fce29c5a83cf0a14dd03352d40b57', class: "sd-select-v2-trigger__content" }, hAsync("span", { key: 'a36a013e9ef359160c2b9d24b42ee6f228aca302', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), hAsync("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 }, hAsync("div", { key: '1a6a5cf66208aa5a996e788886ff593ec0830d51', class: "sd-select-v2-trigger__content" }, hAsync("span", { key: 'bd905f9149f3842e5e169e1a6086b33164b0ab66', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), hAsync("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,
             } }))));
@@ -15757,7 +15856,7 @@ class SdSwitch {
             '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
             '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
         };
-        return (hAsync("label", { key: 'ac6a35d06ddd04bc94369014ff586766dd745bbb', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, hAsync("input", { key: '9ebc810e93c9dfa3bf7407f279dadbada579196e', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), hAsync("div", { key: '7add76be99645d6434e95305f6318fac7da0de57', class: "sd-switch__track" }, hAsync("div", { key: 'ed90778aa4dcd6f0853029579c36cfdb8640afcf', class: "sd-switch__knob" })), this.label && hAsync("span", { key: '70e3ddf819e77da4c693a4853ddb7f392381964e', class: "sd-switch__label" }, this.label)));
+        return (hAsync("label", { key: '469c012285d3c8a33792a460e74d8566c384efe8', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, hAsync("input", { key: '9678e3325339a47e3e2d81ce3cd752c86ed0f906', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), hAsync("div", { key: '47348914869f5215957a652cfcf3a11807a0216f', class: "sd-switch__track" }, hAsync("div", { key: '0676260c42e6b79acec710f0f9ba72f01a3a7c18', class: "sd-switch__knob" })), this.label && hAsync("span", { key: 'b92597092795bff38d2acf0cff76f9c381435438', class: "sd-switch__label" }, this.label)));
     }
     static get style() { return sdSwitchCss(); }
     static get cmpMeta() { return {
@@ -15801,7 +15900,7 @@ function nanoid(size = 21) {
 
 const TABLE_ID_ATTR = 'table-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%)}`;
 
 class SdTable {
     constructor(hostRef) {
@@ -15857,11 +15956,17 @@ class SdTable {
     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;
@@ -15940,9 +16045,16 @@ class SdTable {
             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) {
@@ -15965,6 +16077,11 @@ class SdTable {
         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);
@@ -16013,11 +16130,22 @@ class SdTable {
             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;
     }
@@ -16028,16 +16156,14 @@ class SdTable {
         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);
@@ -16069,7 +16195,7 @@ class SdTable {
         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({
@@ -16161,8 +16287,7 @@ class SdTable {
         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;
@@ -16199,10 +16324,9 @@ class SdTable {
             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;
@@ -16239,6 +16363,109 @@ class SdTable {
     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();
+            }
+        });
+    }
+    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) {
@@ -16286,6 +16513,22 @@ class SdTable {
             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 (hAsync("sd-tr", { key: absoluteIdx, "row-key": String(absoluteIdx), row: row }));
+        });
+    }
     get tableClasses() {
         return [
             'sd-table',
@@ -16305,24 +16548,24 @@ class SdTable {
     }
     render() {
         const resolvedTableId = this.getResolvedTableId();
-        return (hAsync(Host, { key: '0b90643721a90b7bb59a6c31f6edeb313849b973' }, hAsync("div", { key: 'e55fe4f476dbea4888a168861e7e6d6951d7d489', class: "sd-table__container", style: {
+        return (hAsync(Host, { key: 'd73cd690ad11ce92af37b6f32374f6f891c5b677' }, hAsync("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)`,
-            } }, hAsync("div", { key: 'de18a900037a7b2f619dd22981c30ed76f5a8111', class: {
+            } }, hAsync("div", { key: '84b1ba7b2220ff55304b9c19e59304ca2257cff0', class: {
                 'sd-table__clip': true,
                 'sd-table__clip--has-pagination': !!(this.pagination &&
                     this.pagination.rowsPerPage > 0 &&
                     this.rowCount > 0 &&
                     !this.useVirtualScroll),
-            } }, hAsync("div", { key: '028e0982d415033adaf420ee6b953241c8f3dbec', class: {
+            } }, hAsync("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 && (hAsync("div", { key: '8c9110c9c2c26cddbbed8e1f2782ecfaafd3679c', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: '51b61f91b0ecebf63fe3e65b94012963f0375e5c', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (hAsync("div", { key: '0a7a45049014869b8164b081a251218d3c814e87', class: "sd-table__no-data" }, hAsync("slot", { key: 'd4b6219e5dcaaa22be3360f7f0f05a8b32533890', name: "no-data" }, hAsync("span", { key: 'c76848aad8a1d3967f3cd239090e97266e46ab3e' }, this.resolvedNoDataLabel)))), hAsync("table", { key: '2b560d112402549c7043b337d944b0de88c3ba0e', class: this.tableClasses }, hAsync("slot", { key: '1c4583148df6a585f389c1bed0426fa4a3cb4899', name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }), hAsync("slot", { key: 'a5d983106de61c829f9cbeb541d1908fee48468c', name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange })))), this.pagination &&
+            } }, this.isLoading && (hAsync("div", { key: '35a237d0203b2479dbdb77ac42c918a9375bdfd3', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: '21a29981c1cdbd679f46abd2e7de7794c9ebbca9', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (hAsync("div", { key: '07ad28bc6e7556cfe229fc1e952410f388424a7f', class: "sd-table__no-data" }, hAsync("slot", { key: 'bf21e60f5b86614587b704bea2965b9467c7f467', name: "no-data" }, hAsync("span", { key: 'f3d012d12e9189545b0cef52250502d46cb9a764' }, this.resolvedNoDataLabel)))), hAsync("table", { key: '655d3dc017c6445ec454faef0e5e9837b7ee0013', class: this.tableClasses }, this.autoThead ? (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-thead", { rows: this.rows ?? [] }))) : (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
             this.pagination.rowsPerPage > 0 &&
             this.rowCount > 0 &&
-            !this.useVirtualScroll && (hAsync("div", { key: '004355d84e2cfc2fd38a9d4811f14fd66dc5c21b', class: "sd-table__pagination" }, hAsync("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 && (hAsync("sd-select-v2", { key: '1f26de447da63ef0c4a24ffb49666a0687db9991', value: this.useInternalPagination
+            !this.useVirtualScroll && (hAsync("div", { key: '7ab0b30a0c0e0a197b0f79c6b07ef5614d5d2879', class: "sd-table__pagination" }, hAsync("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 && (hAsync("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))
@@ -16403,6 +16646,8 @@ class SdTable {
             "scrolledRight": [32],
             "rowCount": [32],
             "loadingScrollTop": [32],
+            "autoThead": [32],
+            "autoTbody": [32],
             "isRowSelected": [64],
             "updateRowSelect": [64],
             "toggleSelectAll": [64],
@@ -16603,7 +16848,7 @@ class SdTabs {
         };
     }
     render() {
-        return (hAsync("div", { key: '390edfad274caa06df38af9d04580015a1744a44', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
+        return (hAsync("div", { key: '3698b7b43e74ff053d61d5ce696b987373fd27d6', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
             const badgeName = this.getBadgeName(tab);
             return (hAsync("div", { key: `tab-${index}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab) }, hAsync("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge !== undefined && tab.badge !== null && tab.badge !== '' && (hAsync("sd-tag", { name: badgeName, label: tab.badge.toString() }))));
         })));
@@ -16799,7 +17044,7 @@ class SdTag {
     render() {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (hAsync("span", { key: 'da19900d267d2b2f000e1790133966a7976bcded', class: "sd-tag", style: {
+        return (hAsync("span", { key: 'def10730670f37a62fa76b507f7f15a1b1f956fc', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -16809,7 +17054,7 @@ class SdTag {
                 '--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, hAsync("span", { key: 'e426021988395058367872ac23658586b2895764', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '32082536736e20074263632aa29f36bc7709db39', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
     static get style() { return sdTagCss(); }
     static get cmpMeta() { return {
@@ -16860,7 +17105,12 @@ class SdTbody {
         this.syncTableContext();
     }
     syncTableContext() {
-        const table = this.el.closest('sd-table');
+        // 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(TABLE_ID_ATTR);
@@ -16873,7 +17123,7 @@ class SdTbody {
     }
     render() {
         const hasRows = this.rows.length > 0;
-        return (hAsync(Host, { key: 'e4c64dbf97185bbc6eaec4b883c65dc8ebd34ece', slot: `${this.tableId}-body` }, hAsync("tbody", { key: 'b2fb886684a5a6055d3af659bba75dd9bc801b73', class: { 'tbody': true, 'tbody--empty': !hasRows } }, hasRows ? ([
+        return (hAsync(Host, { key: 'bc9fbd4f08f4d77da60b083dceef4e24e2fb5532', slot: `${this.tableId}-body` }, hAsync("tbody", { key: '81ef875cbc39f988021a211ede716a98d3ea30cd', class: { 'tbody': true, 'tbody--empty': !hasRows } }, hasRows ? ([
             this.topSpacerHeight > 0 && (hAsync("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
             hAsync("slot", null),
             this.bottomSpacerHeight > 0 && (hAsync("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
@@ -16910,20 +17160,63 @@ class SdTd {
     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') ;
     }
     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();
+        }
+    }
+    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');
@@ -16937,7 +17230,7 @@ class SdTd {
         }
     }
     render() {
-        return (hAsync(Host, { key: '672c967273dac405ed4a47fa5939463265075681', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: 'c15e572fdf4a8c68fff8b69b586dfbf9f01dce1b' })));
+        return (hAsync(Host, { key: 'da9ce2edb986d4b3cf1a6e5f59030009f1288250', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: '8514071bd38c4f5b1997ae7239b8585a25f97ce0' })));
     }
     static get watchers() { return {
         "field": [{
@@ -16945,6 +17238,12 @@ class SdTd {
             }],
         "rowKey": [{
                 "handleRowKeyChange": 0
+            }],
+        "rowspan": [{
+                "handleSpanChange": 0
+            }],
+        "colspan": [{
+                "handleSpanChange": 0
             }]
     }; }
     static get style() { return sdTdCss(); }
@@ -16954,7 +17253,9 @@ class SdTd {
         "$members$": {
             "field": [1],
             "rowKey": [1, "row-key"],
-            "align": [1]
+            "align": [1],
+            "rowspan": [2],
+            "colspan": [2]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -17033,16 +17334,16 @@ class SdTextLink {
             '--sd-text-link-text-decoration': typo.textDecoration,
             ...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
         };
-        return (hAsync("span", { key: '1128254cddacf5869f320ce2b788b06646f27d7f', class: {
+        return (hAsync("span", { key: '77c1aa4a4a6297af9431947b7146db2ddfad52b5', class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.icon && (hAsync("sd-icon", { key: '52c069d637a2ccf9cd4e7bd1ab3a62ea981d2e1e', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), hAsync("span", { key: '99a09359c75c2eb6c2e2ef6b9e3b87d92c3f7810', class: labelClassName }, this.label), this.useArrow && (hAsync("span", { key: 'c7e77454d9d002c0e043dc71a418c65ecd60cff5', class: "sd-text-link__arrow", style: {
+            }, style: cssVars, onClick: this.handleClick }, this.icon && (hAsync("sd-icon", { key: '6f760b3c7e0adccd2aa08cb662cca90a3d3a227b', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), hAsync("span", { key: '3ff017970956d8e5cb72b4d6e26d33aaf0551e76', class: labelClassName }, this.label), this.useArrow && (hAsync("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',
-            } }, hAsync("sd-icon", { key: '677c88823b02084449cd2dec83cc6bd27dfb8006', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
+            } }, hAsync("sd-icon", { key: '2fa166ef60f6d1ee933450146bc667ee89dad2ce', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
     }
     static get style() { return sdTextLinkCss(); }
     static get cmpMeta() { return {
@@ -17189,7 +17490,7 @@ class SdTextarea {
             '--sd-system-size-field-sm-height': 'auto',
             '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
         };
-        return (hAsync("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 }, hAsync("div", { key: 'dc09d61d06f3cefb15dce980e293a266fdf3d79d', class: "sd-textarea__content" }, hAsync("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 (hAsync("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 }, hAsync("div", { key: '2cbc8ef4febeab89eb336cb29d34abdbf9f2f080', class: "sd-textarea__content" }, hAsync("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": [{
@@ -17286,7 +17587,12 @@ class SdThead {
         this.resolveConfig();
     }
     syncTableContext() {
-        const table = this.el.closest('sd-table');
+        // 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(TABLE_ID_ATTR);
@@ -17376,16 +17682,16 @@ class SdThead {
         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);
-        return (hAsync(Host, { key: '2358499ef65d88005d03b1246604c0fd8eefdde1', slot: `${this.tableId}-head` }, hAsync("thead", { key: '49bb43a19aeb83f3a60367b26dbb6535ebcec743', class: {
+        return (hAsync(Host, { key: '5aa1e38311b542d1a0b05b55abc7ef41927508bd', slot: `${this.tableId}-head` }, hAsync("thead", { key: '6d17753988ecd02d900d8a3bd7f2115b534b68a7', class: {
                 'thead': true,
                 'thead--sticky': this._stickyHeader,
-            } }, hAsync("tr", { key: 'cd6388d79e9a4a5d9edbbda05601abbbefcb1ff4', class: "tr" }, this._selectable && (hAsync("th", { key: 'fa09e82368d45e9fb1d32838ef44e609c698609d', class: {
+            } }, hAsync("tr", { key: '9cc729603e126da2f9c8923fe29ece10c7750bb4', class: "tr" }, this._selectable && (hAsync("th", { key: '37b2bcfa77eaf4c44465684c49ae84d566acc18b', 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' } }, hAsync("sd-checkbox", { key: '5ab4861aecfac9495101363d5bd809d077c7dbc3', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (hAsync("th", { key: col.name, class: {
+            }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '4284894821640ee1bdbd12b1759efb01e6c06488', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (hAsync("th", { key: col.name, class: {
                 'th': true,
                 [`${col.thClass}`]: Boolean(col.thClass),
                 'sticky-left': true,
@@ -17500,10 +17806,10 @@ class SdToast {
     render() {
         const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
         const iconSize = Number(TOAST_LAYOUT.iconSize);
-        return (hAsync("div", { key: 'd4b73e2503514143f5174bc8859baf0e59c2f8da', style: {
+        return (hAsync("div", { key: '77954c9d285339cb48032eec5eca0dcbe308affc', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
-            } }, hAsync("div", { key: '7334daee691fb03a1005c2afac64033554489046', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: '297ada835b0710bf43a936b02e53b0873b7f4af3', class: "sd-toast__icon" }, hAsync("sd-icon", { key: 'b5bc4716df28231dc7af15db63595ae9044189b5', name: this.icon, size: iconSize, color: typeConfig.content }))), hAsync("div", { key: 'd0239c8f8b495fbdaedad0f65a6d0a0edfaada60', class: "sd-toast__content" }, hAsync("span", { key: 'dc70d403673bb8f99cfd91393054a86bf17e5ac2', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: '1a76bcee482720693b501d3a13c54e720bbe44fc', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (hAsync("sd-ghost-button", { key: 'a8dc3c15cabf5ca4e075e75c4fb2744dd5da4fa0', class: "sd-toast__close", icon: "close", intent: this.type === 'caution' ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, hAsync("div", { key: '73c792f19982140f91397a3ec7d6e22914ca316f', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: 'cc140bfd043b0d0cd6a7697053f736dac707f86b', class: "sd-toast__icon" }, hAsync("sd-icon", { key: '85f38036cd39cb4d0f4a43ef0d307ef9faa03eb1', name: this.icon, size: iconSize, color: typeConfig.content }))), hAsync("div", { key: '4d36e34a9ccac80fc2ed01f33b1e2aa80d70c78b', class: "sd-toast__content" }, hAsync("span", { key: '9105d37004bbde90e8a7118ca5a58a6e4d6953f5', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: 'fdaabae7d8efb6540ce770cc5783b286789cdb3c', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (hAsync("sd-ghost-button", { key: 'c5985e50041b8f3e8c77e142fd06afaf0537de47', class: "sd-toast__close", icon: "close", intent: this.type === 'caution' ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
     static get style() { return sdToastCss(); }
     static get cmpMeta() { return {
@@ -17755,7 +18061,7 @@ class SdToastContainer {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (hAsync("div", { key: '601c4c5aa55df02459866607ca7c59da53c2eda5', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (hAsync("div", { key: '5057793be2d6ce213edc84d58f7273248646dc19', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {
@@ -17913,7 +18219,7 @@ class SdToggle {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (hAsync("label", { key: 'fe56ffe876ccc859536ca74703e0870ad97e1668', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, hAsync("input", { key: 'f473fd71c03d0e4e3e8fb354753d769033f148f2', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (hAsync("label", { key: 'e9bb126d92605cdd3a88ff1840aa79a4b66c7cf8', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, hAsync("input", { key: '41c18a29c10ae91b84ecd6d2619a40ab99f5d151', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
     static get style() { return sdToggleCss(); }
     static get cmpMeta() { return {
@@ -18040,14 +18346,14 @@ class SdTooltip {
         const toggleTooltip = () => (this.showTooltip = !this.showTooltip);
         const divTrigger = trigger === 'hover' ? hoverTrigger : this.label ? {} : { onClick: toggleTooltip };
         const buttonClickTrigger = trigger === 'click' && this.label ? { onSdClick: toggleTooltip } : {};
-        return (hAsync(Fragment, { key: 'e0211f8c80222e357d278c81582baf40ef47a8a6' }, hAsync("div", { key: '9747aa6130dbf0d7e29bbe2d7222c22c8001c6a5', class: `sd-tooltip-trigger ${this.sdClass || ''}`, ...divTrigger }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: icon, size: this.buttonSize ?? 'sm', color: color, variant: this.buttonVariant ?? 'primary', class: "sd-tooltip", ...buttonClickTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (hAsync("sd-floating-portal", { key: '7f3e8e2758ef78ca1765bd7e4ec8d6849698ff88', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: '86a3a006bdcee86f16da7ebea04ff267a7f029b9', ref: el => (this.menuEl = el), class: {
+        return (hAsync(Fragment, { key: 'b5368ef5aced50890707aeb99c82de5784e7acf1' }, hAsync("div", { key: 'aeac6276d7e36e315093770d03671d83b339137a', class: `sd-tooltip-trigger ${this.sdClass || ''}`, ...divTrigger }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: icon, size: this.buttonSize ?? 'sm', color: color, variant: this.buttonVariant ?? 'primary', class: "sd-tooltip", ...buttonClickTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (hAsync("sd-floating-portal", { key: '7e24c9f16d326f787a7441753ae138e08ebe3f78', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: '4681dfcb409ec7b072be6bf82bd42c5ebce29100', ref: el => (this.menuEl = el), class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${tooltipType}`]: true,
                 [`sd-floating-menu--${placement}`]: true,
             }, style: {
                 '--sd-floating-bg': typeConfig.bg,
                 '--sd-floating-content': typeConfig.content,
-            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, hAsync("i", { key: '50268080023fc252774a7fb564bdbf6c007c115e', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: '28b2948d9570157c6c40e7738498266ca8c8ec64' })), hAsync("div", { key: 'e2057da013a2700e8614f1e8d8e5164aec8efb18', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
+            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, hAsync("i", { key: 'e74368ffeabb85d4d4257e4695b1979c8f63495d', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: 'e4f5b3031eb0cabcadf9fd0f564f6adf4515c14f' })), hAsync("div", { key: '3399759f60874f2f8a5ebf3e2c618dab94289aec', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
     }
     static get style() { return sdTooltipCss(); }
     static get cmpMeta() { return {
@@ -18074,7 +18380,7 @@ class SdTooltip {
     }; }
 }
 
-const sdTrCss = () => `sd-tr{display:contents}sd-tr *{box-sizing:border-box}.tr{display:table-row}.tr:hover .td{background-color:#F9F9F9}.td{display:table-cell;height:44px;padding:0 16px;border-bottom:1px solid #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}`;
+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:44px;padding:0 16px;border-bottom:1px solid #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}`;
 
 class SdTr {
     constructor(hostRef) {
@@ -18089,6 +18395,7 @@ class SdTr {
     tableId = '';
     columnWidths = [];
     isVisible = true;
+    spansVersion = 0;
     _columns = [];
     _selectable = false;
     _stickyColumn = { left: 0, right: 0 };
@@ -18106,7 +18413,12 @@ class SdTr {
         this.syncTableContext();
     }
     syncTableContext() {
-        const table = this.el.closest('sd-table');
+        // 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(TABLE_ID_ATTR);
@@ -18131,6 +18443,9 @@ class SdTr {
     async refreshConfig() {
         this.resolveConfig();
     }
+    async bumpSpansVersion() {
+        this.spansVersion = this.spansVersion + 1;
+    }
     async updateVisibility() {
         this.updateVisibilitySync();
     }
@@ -18196,37 +18511,60 @@ class SdTr {
             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);
-        return (hAsync(Host, { key: 'd6259e5c87cce0fa70f1d849e11416ad69b0cac1', style: { display: this.isVisible ? '' : 'none' } }, hAsync("tr", { key: '90e36c39bede0e07fc1c4d90183a73ebc99b6ed8', class: "tr" }, this._selectable && (hAsync("td", { key: '601f1747063d8e73803304abc2cd767f420f359c', class: {
+        const hasRowspan = this.tableEl?.hasRowspanSync?.() ?? false;
+        return (hAsync(Host, { key: 'e8d387043d3384daffb5d548176b469a91264225', style: { display: this.isVisible ? '' : 'none' } }, hAsync("tr", { key: '1d579819497a6186941b0c80c916a83c48dfcc0d', class: { 'tr': true, 'tr--no-hover': hasRowspan } }, this._selectable && (hAsync("td", { key: '1a8ab44a8c65926eb9a7bd9e9224d0eed55ecfb1', 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' } }, hAsync("sd-checkbox", { key: '97068a623d3b7876c7e6392e3f5ed81cfc60d592', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => (hAsync("td", { key: col.name, 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) }, hAsync("slot", { name: `${this.tableId}-${typeof col.field === 'string' ? col.field : col.name}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))))), middleCols.map((col, relativeIdx) => {
+            }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '72bdbadc76dcb0682eb4de496e9abda692a0ea7e', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => {
+            if (this.isCovered(idx))
+                return null;
+            const span = this.getSpanFor(col);
+            return (hAsync("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) }, hAsync("slot", { name: `${this.tableId}-${typeof col.field === 'string' ? col.field : col.name}-${this.rowKey}` }, hAsync("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;
-            return (hAsync("td", { key: col.name, class: {
+            const span = this.getSpanFor(col);
+            return (hAsync("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) }, hAsync("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
         }), stickyRightCols.map((col, relativeIdx) => {
             const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
+            if (this.isCovered(actualColIdx))
+                return null;
             const fieldName = typeof col.field === 'string' ? col.field : col.name;
-            return (hAsync("td", { key: col.name, class: {
+            const span = this.getSpanFor(col);
+            return (hAsync("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
                     'td': true,
                     [`td--${col.align || 'left'}`]: true,
                     'sticky-right': true,
@@ -18249,12 +18587,14 @@ class SdTr {
             "tableId": [32],
             "columnWidths": [32],
             "isVisible": [32],
+            "spansVersion": [32],
             "_columns": [32],
             "_selectable": [32],
             "_stickyColumn": [32],
             "_scrolledLeft": [32],
             "_scrolledRight": [32],
             "refreshConfig": [64],
+            "bumpSpansVersion": [64],
             "updateVisibility": [64],
             "setColumnWidths": [64],
             "refreshSelection": [64]