@sellmate/design-system 1.5.0 → 1.7.0

package/dist/collection/components/sd-number-input/sd-number-input.js

@@ -12,6 +12,9 @@ export class SdNumberInput {
     value = null;
     label;
     labelWidth = '';
+    icon = undefined;
+    labelTooltip = '';
+    labelTooltipProps = null;
     addonLabel = '';
     addonAlign = 'start';
     placeholder = '입력해 주세요.';
@@ -272,15 +275,15 @@ export class SdNumberInput {
             '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
             '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
         };
-        return (h("sd-field", { key: 'b32943cd55dad7d6bb4fc1a18812360c2ab01a83', 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, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '050395b8ab3bd77ff5f786b3de182b7a35b8b01f', class: {
+        return (h("sd-field", { key: '508f0952028672d4951b5339d581b2180dd5a425', 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, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '8762e78034b655fc325de8a5be1dcc6dfad280f3', class: {
                 'sd-number-input__content': true,
                 'sd-number-input__content--no-stepper': !this.useButton,
-            } }, this.useButton && (h("button", { key: 'e76188a1f1f76450227328854ee3048d7b2b9e85', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '544e5a41790302df564ca0a3e83e2f9052c3f290', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+            } }, this.useButton && (h("button", { key: '5a341252ff361744d47bf2297d164fbf39d7a2fe', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'f8de73e01fa5762e6fadd10c9fda610efd3710e4', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && h("span", { key: '34e8c9af864332b8614e3c9a5d2cf94310a2555d', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: '07e0484ad473e010d9ba8f971875bd463585ca47', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
+                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && h("span", { key: '5e010880ff176350f333dc0e9de9b5f1d89b7efd', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: '0fc29e67f960bc2e93da90ffcd3d83ef24f151c2', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
                 textAlign: this.useButton ? 'center' : 'right',
                 ...this.inputStyle,
-            } }), this.inputSuffix && h("span", { key: '990a3e1dc5cfeaa8e1823391e0bb0218ce4cfb02', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: 'd2496ab718cf44fd658c871086d8e67c66380668', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: 'fcab0109e01a1c683bf09349cb699534eaa1a8d1', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && h("span", { key: 'db977e7d355fa86ddb35f4e1417e2408d8485ec2', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: '55bdd004f7bb3aa160f90edf7696944af23e3619', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: 'b5ce9631347c3f78b6f0fe04060def8e3a04bac3', name: "add", size: iconSize, color: this.isIncrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
                 : NUMBER_INPUT_STEPPER.icon.default }))))));
     }
@@ -483,6 +486,74 @@ export class SdNumberInput {
                 "attribute": "label-width",
                 "defaultValue": "''"
             },
+            "icon": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconProps",
+                    "resolved": "IconProps | undefined",
+                    "references": {
+                        "IconProps": {
+                            "location": "global",
+                            "id": "global::IconProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "undefined"
+            },
+            "labelTooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-tooltip",
+                "defaultValue": "''"
+            },
+            "labelTooltipProps": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SdTooltipProps | null",
+                    "resolved": "SdTooltip | null",
+                    "references": {
+                        "SdTooltipProps": {
+                            "location": "import",
+                            "path": "../sd-tooltip/sd-tooltip.config",
+                            "id": "src/components/sd-tooltip/sd-tooltip.config.ts::SdTooltipProps",
+                            "referenceLocation": "SdTooltipProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
             "addonLabel": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/sd-pagination/sd-pagination.js

@@ -83,13 +83,13 @@ export class SdPagination {
             '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
             '--sd-pagination-item-width': `${this.buttonWidth}px`,
         };
-        return (h("div", { key: 'b16a4c0ff75913e80fdb9a539d8afb714931a531', class: {
+        return (h("div", { key: 'a5d1cb7e22c1d582800f329e6b02ffd9f5e6605c', class: {
                 'sd-pagination': true,
                 'sd-pagination--simple': this.simple,
-            }, style: cssVars }, h("div", { key: '42d019164c409d09d13b94845c9ee99ece41a8f3', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "sd-pagination__info" }, h("span", { class: "sd-pagination__current" }, this.currentPage), h("span", { class: "sd-pagination__divider" }, "/"), h("span", { class: "sd-pagination__last" }, this.lastPage))) : (h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+            }, style: cssVars }, h("div", { key: '196f7f2b3cc0fc896ddbcd4449b23d31729c7ec3', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "sd-pagination__info" }, h("span", { class: "sd-pagination__current" }, this.currentPage), h("span", { class: "sd-pagination__divider" }, "/"), h("span", { class: "sd-pagination__last" }, this.lastPage))) : (h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'sd-pagination__item': true,
                 'sd-pagination__item--selected': this.currentPage === n,
-            }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: '9695ce3aaede66529547151800fede0f5413e7d8', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: '5fe50f0cef43f8b5ef72556ed4d19653cb30a7e9', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
     }
     static get is() { return "sd-pagination"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-popover/sd-popover.js

@@ -15,11 +15,10 @@ export class SdPopover {
     disabled = false;
     type = 'button';
     menuTitle;
-    messages = [];
     leftLink;
     button;
     menuClass = '';
-    useClose = false;
+    slotContentHTML = '';
     showChange;
     buttonEl;
     setShow = (next) => {
@@ -41,27 +40,30 @@ export class SdPopover {
         }
     }
     handleClose = () => this.setShow(false);
+    componentWillLoad() {
+        this.slotContentHTML = this.el.innerHTML;
+        this.el.innerHTML = '';
+    }
     render() {
         const placement = this.placement ?? 'bottom';
         const color = this.color ?? '#01BB4B';
         const icon = this.icon ?? 'helpOutline';
         const iconSize = this.iconSize ?? 12;
         const menuClass = this.menuClass ?? '';
-        const messages = Array.isArray(this.messages) ? this.messages : [];
         const leftLink = this.leftLink;
         const button = this.button;
         const hasFooter = !!leftLink || !!button;
-        return (h(Fragment, { key: 'b50da46efd85cdb48f66b24c591ab662a9fd62cb' }, this.label !== '' ? (h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-popover", onSdClick: () => this.setShow(!this.show) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (h("sd-floating-portal", { key: 'a31d6c00a9b61826fa412247f603d78874a3dba6', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, h("div", { key: '11020f31a14dbb7325b30ebc48315b344662cf43', class: {
+        return (h(Fragment, { key: '3eb48b91ccf49d78cf332bf2c83268ca903be3ef' }, this.label !== '' ? (h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel || this.label || icon || 'Open popover', disabled: this.disabled, type: this.type ?? 'button', class: "sd-popover", onSdClick: () => this.setShow(!this.show) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (h("sd-floating-portal", { key: '94c0b1d56307b29944d078d03bdd686c3eacaee0', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, h("div", { key: '3f969dcad5785973e80cab6090e8b687461bbbe2', class: {
                 'sd-floating-menu': true,
                 'sd-floating-menu--popover': true,
                 [`sd-floating-menu--${placement}`]: true,
                 [menuClass]: menuClass !== '',
             }, style: {
                 '--sd-floating-bg': popoverTokens.popover.bg,
-            } }, h("i", { key: '51b35ade68a68c92b7488b97f2b1808d7fcf33e5', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: 'd491c997e07a2bb2d4a3ad3624d5098457f91c05' })), h("div", { key: '19bfc90b0c5da4fe736aad3b8b2061ac58d8efb4', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: '31875711b7cd54c0c48f0017ac94365c3cc97821', class: "sd-floating-menu__title" }, this.menuTitle), messages.length > 0 && (h("div", { key: '9c78a748831045f96fe48fd2ae9dcd85b1335aa0', class: "sd-floating-menu__messages" }, messages.map((message, i) => (h("div", { key: `msg-${i}` }, message))))), hasFooter && (h("div", { key: '787f0d2ac133bef9f72ce248b943b0ff9883db9e', class: {
+            } }, h("i", { key: '3992cc7f589dc932c59a9bd88376b93e66e37cd0', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: 'b2d27b5131e022d3d22a82cccf9cd80afc414194' })), h("div", { key: '48b33b11d8179e51fe4b3f0fbc24084d197b5447', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: 'b955fb4707b66d003414197254a165388ceafb11', class: "sd-floating-menu__title" }, this.menuTitle), this.slotContentHTML && (h("div", { key: 'c5416ab9a7f4f0bcda01af31304e4358f25ff6e2', class: "sd-floating-menu__messages", innerHTML: this.slotContentHTML })), hasFooter && (h("div", { key: '51db3b7a70e4f1befc49b7ee26422a634a38d9e1', class: {
                 'sd-floating-menu__buttons': true,
                 'sd-floating-menu__buttons--with-link': !!leftLink,
-            } }, leftLink && (h("sd-text-link", { key: '2000a926c2c808e6ee51f47905fadf8847553bfe', class: "sd-floating-menu__left-link", label: leftLink.label, icon: leftLink.icon ?? '', iconColor: leftLink.iconColor ?? '', useArrow: !!leftLink.useArrow, underline: !!leftLink.underline, disabled: !!leftLink.disabled, onSdClick: leftLink.onClick })), button && (h("sd-button", { key: 'cca9d6bef231fe4c469d8895fefa8b6d5855a57c', name: button.name ?? 'secondary_xs', label: button.label, icon: button.icon, rightIcon: button.rightIcon, ariaLabel: button.ariaLabel, disabled: button.disabled, type: button.type, onSdClick: button.onClick }))))), this.useClose && (h("sd-ghost-button", { key: '032461787d74367ea047c088e08704ce7409f74b', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose })))))));
+            } }, leftLink && (h("sd-text-link", { key: 'a2a164fa9ab3294c0b0e726c7c69405a612de264', class: "sd-floating-menu__left-link", label: leftLink.label, icon: leftLink.icon ?? '', iconColor: leftLink.iconColor ?? '', useArrow: !!leftLink.useArrow, underline: !!leftLink.underline, disabled: !!leftLink.disabled, onSdClick: leftLink.onClick })), button && (h("sd-button", { key: '41c917026e1255ac2bd355042500c6efa0e76cb0', name: button.name ?? 'secondary_xs', label: button.label, icon: button.icon, rightIcon: button.rightIcon, ariaLabel: button.ariaLabel || button.label || button.icon || 'Open popover', disabled: button.disabled, type: button.type, onSdClick: button.onClick }))))), h("sd-ghost-button", { key: 'dde5bbb7bc8b9b5ce6b122eb566ce961dd640ad0', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose }))))));
     }
     static get is() { return "sd-popover"; }
     static get originalStyleUrls() {
@@ -338,24 +340,6 @@ export class SdPopover {
                 "reflect": false,
                 "attribute": "menu-title"
             },
-            "messages": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "string[]",
-                    "resolved": "string[]",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "[]"
-            },
             "leftLink": {
                 "type": "unknown",
                 "mutable": false,
@@ -421,29 +405,14 @@ export class SdPopover {
                 "reflect": false,
                 "attribute": "menu-class",
                 "defaultValue": "''"
-            },
-            "useClose": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "use-close",
-                "defaultValue": "false"
             }
         };
     }
+    static get states() {
+        return {
+            "slotContentHTML": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "showChange",

package/dist/collection/components/sd-popup/sd-popup.js

@@ -36,7 +36,7 @@ export class SdPopup {
             ...DEFAULT_SUBMIT_BUTTON_PROPS,
             ...this.submitButtonProps,
         };
-        return (h("div", { key: 'fe8ca033482913b9c8c7a62963d81d8c5c86c724', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: 'b27afc04689384abc8cdd45e67e4765c3fef82e9', class: "sd-popup__header" }, h("h2", { key: '15d6cf170e483bfdea861aa7a218df8379d83be2', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: 'daf70c8196ad95b214c978166f547a2a2fa56814', class: "sd-popup__body" }, h("slot", { key: 'f8f4a9f93b88404993e2c8f7155abe4756f9bdba' })), this.useFooter && (h("footer", { key: '38ff051abd11378ad0a83b2d634985d689e0dc27', class: "sd-popup__footer" }, h("div", { key: '149a3de3d7ab0703d9cec41b35af23a6eebd67de', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: '2507cece435fa3e00ea698bebf6c980fea081521', name: "footer-left" })), h("sd-button", { key: '5ae38a07e39437d6f3b8aa111258d60aa044152d', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
+        return (h("div", { key: '53c0cca8c1188f36569ffaf79767fe81f9a5bf87', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: 'f8459d43d2568e1f8fbcb19f789ba2a9998db8e7', class: "sd-popup__header" }, h("h2", { key: '56b960c73d215e4ce878007acd0b04e1371ee87b', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: '513de018b9826c54672bdc8019447b3026fb2d9f', class: "sd-popup__body" }, h("slot", { key: '60109bc7ee30ac100a08285e50d24027e6bc22d0' })), this.useFooter && (h("footer", { key: '4daa5fa938f2d79b2ab4d13de1d6aeb0b02d78e1', class: "sd-popup__footer" }, h("div", { key: '6f885be6acb363054c659f7f844558b9bda1ca74', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: '57231c78bb0512407323c8ef16a90011027abbc4', name: "footer-left" })), h("sd-button", { key: 'ce4c1e577d4b3346d368e22ce713ccc57f54f231', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
     }
     static get is() { return "sd-popup"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-select/sd-select-list-item/sd-select-list-item.js

@@ -70,7 +70,7 @@ export class SdSelectListItem {
         return (
         // 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        h("div", { key: '37189acb2854061fd120d662050fddddb396170c', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
+        h("div", { key: 'd1030a5fb5797ea6be89f6a3a32201145e5fa387', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
                 'sd-select-list-item': true,
                 'sd-select-list-item--group': isGroup,
                 'sd-select-list-item--depth1-group': isDepth1Group,
@@ -80,7 +80,7 @@ export class SdSelectListItem {
                 'sd-select-list-item--focused': this.isFocused,
                 'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
                 'sd-select-list-item--disabled': !!this.option.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: '7cc43ed0a1c4a2019be3a7f6f60de1c7f03a6148', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), h("span", { key: '331c7d1ded82834521f3292dc739612f24d7209e', class: "sd-select-list-item__label" }, this.option.label), this.countInfo && (h("span", { key: '80b34cd1a6e67719d50c62afedf23c0903259c78', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: '1f8a7812f567ece12b7e064a9e9738366b0a0e11', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), h("span", { key: '55e2e4c9497aea99fc0502b40ac16809c257206e', class: "sd-select-list-item__label" }, this.option.label), this.countInfo && (h("span", { key: '722599bf0022770c91c02d4e67a6e234da4e0f80', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
     static get is() { return "sd-select-list-item"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-select/sd-select-list-item-search/sd-select-list-item-search.js

@@ -41,15 +41,15 @@ export class SdSelectListItemSearch {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (h("div", { key: 'a8b62b61ec6a0afd69de50b8df02e57de2a04c8c', class: {
+        return (h("div", { key: '69416e32b3915ca27d8e2f25a7f36d1868835696', class: {
                 'sd-select-list-item-search': true,
                 'sd-select-list-item-search--scrolled': this.isScrolled,
-            } }, h("div", { key: '2b04a677a8b4e3212eff83c07609a4b7d89799c1', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: 'c0c51d4b0150fee7151c7e2bcc5aaf8428d31043', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: '85d2309cbb037851053c34baeca5f59c690c0881', ref: el => {
+            } }, h("div", { key: '3917460421d197d70abc7b6b9c75fa85ce9e6631', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: '42a0d8221d2479457af32db35111bb35d7a28e53', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: '48ab6ef174ddf194aa2616d0cbfbc09fa2032222', ref: el => {
                 this.inputEl = el;
-            }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), h("button", { key: '564b6ae6dbab1fa5f4f6d977fa9fd52bb9114873', type: "button", class: {
+            }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), h("button", { key: 'ead5c189a8ef2b8cb3696cc6536c58dd4864c71e', type: "button", class: {
                 'sd-select-list-item-search__clear': true,
                 'sd-select-list-item-search__clear--hidden': this.searchText === '',
-            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, h("sd-icon", { key: '8ae0f92f8762681cc4c2a6fc11340498b8b01c98', name: "close", size: 12, color: "#888888" })))));
+            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, h("sd-icon", { key: '6590c0acd5114722126459f4886c587b320a17e1', name: "close", size: 12, color: "#888888" })))));
     }
     static get is() { return "sd-select-list-item-search"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-select/sd-select-listbox/sd-select-listbox.js

@@ -348,9 +348,9 @@ export class SdSelectListbox {
             '--listbox-max-height': this.maxHeight ?? '260px',
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
         };
-        return (h("div", { key: '1834dbfee219988e78ad47d3640ebafb9983298c', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: '28fbfce57184f2a8c090d628c5b33cecf9337c3c', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: 'b7430d72cdb26cad59b226af8cf98d796645390c', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (h("div", { key: 'f2b243788074de1aa3e78a78566a622ab3116351', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: 'a9f9f30a43e1965756095e29a24f75b4f1c14100', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: 'b500f705a69e2c98e3ad79bf04c2bb2a4b8a6162', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
-            } }, this.showSelectAll && (h("sd-select-list-item", { key: '8f159cdef838c0f39bb7aad1717a88c04c75dbda', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (h("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (h("sd-select-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 && (h("sd-select-list-item", { key: 'c47e41ebce483ee311cae261b2f4fe21c134e437', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (h("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (h("sd-select-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 is() { return "sd-select-listbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sd-select/sd-select-trigger/sd-select-trigger.js

@@ -42,7 +42,7 @@ export class SdSelectTrigger {
                 ? SELECT_COLORS.icon.disabled
                 : SELECT_COLORS.icon.default,
         };
-        return (h("div", { key: '645d8e7ff5065664a3510b127628cb54d97fb613', ref: el => {
+        return (h("div", { key: '471e6df2948987989fa192474b0305ad0c8bcd32', ref: el => {
                 this.triggerEl = el;
             }, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
                 'sd-select-trigger': true,
@@ -53,7 +53,7 @@ export class SdSelectTrigger {
                     e.preventDefault();
                     this.handleClick();
                 }
-            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: '515dda6d98ad09b0854e0ef0e04f0bf8c9592d1a', class: "sd-select-trigger__content" }, h("span", { key: '9d92577675d0c7e6ba32174ae0cdd754788dbccb', class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택')), h("sd-icon", { key: '347532a73d9ff2929d9f716fb8d2e314af7d7069', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: '8133b44065cd4a27d6aa71980c8684c363c7e7ba', class: "sd-select-trigger__content" }, h("span", { key: 'd8ee3d118cf760b687b491387592efe0c7532cf2', class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택')), h("sd-icon", { key: '0271061d32f1236346812a21a2e483402a94415c', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
                 'sd-select-trigger__icon': true,
                 'sd-select-trigger__icon--open': this.isOpen,
             } }))));

package/dist/collection/components/sd-select/sd-select.js

@@ -254,15 +254,15 @@ export class SdSelect {
                 this.closeDropdown();
             },
         };
-        return (h("sd-field", { key: '21849c194994f51c36b2fa5eafd606230b21e365', 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 (h("sd-field", { key: '08992d05403b6e7ba6aec7968dd6fa99d8857666', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
                 this.hovered = true;
             }, onMouseLeave: () => {
                 this.hovered = false;
-            } }, h("div", { key: 'bcba54ed8d325a540d14af14c9b3bf332f631ce8', class: "sd-select", ref: el => {
+            } }, h("div", { key: '3372029d54087654b8172d4d374126c0be703f5c', class: "sd-select", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-select-trigger", { key: '72e361ca6e162eee56b82398902e89226e980d3d', ref: el => {
+            } }, h("sd-select-trigger", { key: 'af832319b490501468b05da69eeed964a07f00ea', ref: el => {
                 this.triggerComponentRef = el;
-            }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '0ff55857cbc146db57caa53d560752d0fae8413b', ...portalProps }, h("sd-select-listbox", { key: '20c103309dc7f2eaf4bee6abae271606b64ace8b', 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) })))));
+            }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: 'b6b9211aadd5ef643716948dfa67d6d923420679', ...portalProps }, h("sd-select-listbox", { key: '9d532180439c8d1867e349d89914626b644ac224', 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 is() { return "sd-select"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-switch/sd-switch.js

@@ -40,7 +40,7 @@ export class SdSwitch {
             '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
             '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
         };
-        return (h("label", { key: '3d9449733d73dcbd2d7a95505b6afd930a43a114', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: 'f8d35ea743b5f85697d9d4de8fe915ce2d8f7b56', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: 'b62a6bfa60c488270184698610337926b688baff', class: "sd-switch__track" }, h("div", { key: 'da7764fe4a4202366fe0a922de687ece121eb73f', class: "sd-switch__knob" })), this.label && h("span", { key: '924c2939f0cb2196ff69be560e1c7f113590c73b', class: "sd-switch__label" }, this.label)));
+        return (h("label", { key: 'b5dc0e7a9a59d679402226aa18f3155e42f6b7c2', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: 'aa77eb38e07dfc911eb3a72c3ab3b3287423deaa', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: 'b973671f6229fea3aab8d4040cc2916e32001eaf', class: "sd-switch__track" }, h("div", { key: 'db6073df05c1d77681559490fd773fdce24c6ca4', class: "sd-switch__knob" })), this.label && h("span", { key: '8ee1f5ba9fc1561a351d6982929721cc33ce0650', class: "sd-switch__label" }, this.label)));
     }
     static get is() { return "sd-switch"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-table/sd-table.config.js

@@ -47,7 +47,8 @@ export const TABLE_BORDER = {
 };
 export const TABLE_SEPARATOR = {
     color: tableTokens.table.separator.color,
-    width: tableTokens.table.separator.Width,
+    width: tableTokens.table.separator.width.default,
+    denseWidth: tableTokens.table.separator.width.dense,
 };
 export const TABLE_RADIUS = tableTokens.table.radius;
 // ── Content Tokens ──
@@ -71,6 +72,8 @@ export const TABLE_KEY_VALUE = {
     bodyPadding: tableTokens.table.keyValue.body.padding,
     height: tableTokens.table.keyValue.height,
 };
+// ── Selectable Column ──
+export const TABLE_SELECTABLE_COLUMN_WIDTH = 48;
 // ── Header Icon Color Defaults ──
 const ICON_DEFAULT_COLOR = {
     pageEdit: systemTokens.color.darkblue.strong,

package/dist/collection/components/sd-table/sd-table.css

@@ -28,7 +28,7 @@ sd-table *,
   border-radius: var(--table-radius, 8px);
   overflow: hidden;
 }
-.sd-table__wrapper--radius-use-top {
+.sd-table__wrapper--use-top {
   border-radius: 0 0 var(--table-radius, 8px) var(--table-radius, 8px);
 }
 

package/dist/collection/components/sd-table/sd-table.js

@@ -1,7 +1,7 @@
 import { h, Host, readTask, forceUpdate, } from "@stencil/core";
 import { nanoid } from "nanoid";
 import { TABLE_ID_ATTR, } from "./constants";
-import { TABLE_RADIUS, TABLE_BORDER, TABLE_BODY_TYPOGRAPHY, TABLE_BODY_LAYOUT, } from "./sd-table.config";
+import { TABLE_RADIUS, TABLE_BORDER, TABLE_BODY_TYPOGRAPHY, TABLE_BODY_LAYOUT, TABLE_SELECTABLE_COLUMN_WIDTH, } from "./sd-table.config";
 export class SdTable {
     static DEFAULT_NO_DATA_LABEL = '데이터가 없습니다.';
     el;
@@ -17,7 +17,7 @@ export class SdTable {
     height;
     stickyHeader = false;
     stickyColumn = { left: 0, right: 0 };
-    radius = 'default';
+    useTop = false;
     noDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
     resolvedNoDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
     isLoading = false;
@@ -77,8 +77,6 @@ export class SdTable {
     // 키: `${rowKey}::${field}` → sd-td의 sdClass 문자열
     // sd-tr가 td를 그릴 때 머지해서 셀-단위 커스텀 클래스를 적용한다.
     cellClassRegistry = new Map();
-    // separator 직전 행의 시각적 인덱스 집합
-    separatorPrevIndices = new Set();
     // rowKey 문자열 → rows 배열에서의 visual index.
     // rowspan 위쪽 행 스캔에서 "내 위에 있느냐"를 판정하기 위한 시각적 순서 소스.
     // rows prop이 있으면 채워지고, 없으면 비어 있어 Number(rowKey) fallback이 사용된다.
@@ -231,9 +229,6 @@ export class SdTable {
         el.unregisterSpanSync = this.unregisterSpanSync.bind(this);
         el.getSpanSync = this.getSpanSync.bind(this);
         el.isCoveredSync = this.isCoveredSync.bind(this);
-        el.registerSeparatorSync = this.registerSeparatorSync.bind(this);
-        el.unregisterSeparatorSync = this.unregisterSeparatorSync.bind(this);
-        el.isVisualLastRowBeforeSeparatorSync = this.isVisualLastRowBeforeSeparatorSync.bind(this);
         el.hasRowspanSync = this.hasRowspanSync.bind(this);
         el.registerCellClassSync = this.registerCellClassSync.bind(this);
         el.unregisterCellClassSync = this.unregisterCellClassSync.bind(this);
@@ -573,7 +568,7 @@ export class SdTable {
     getStickyStyleSync(colIdx) {
         const leftOffset = this.columnWidths
             .slice(0, colIdx)
-            .reduce((a, b) => a + b, this.selectable ? 52 : 0);
+            .reduce((a, b) => a + b, this.selectable ? TABLE_SELECTABLE_COLUMN_WIDTH : 0);
         const rightOffset = this.columnWidths
             .filter((_, i) => i >=
             this.columns.filter(c => c.visible !== false).length -
@@ -723,36 +718,6 @@ export class SdTable {
         }
         return false;
     }
-    // rowspan을 반영한 셀의 시각적 하단 행 인덱스를 반환한다.
-    // isVisualLastRowBeforeSeparatorSync 헬퍼.
-    resolveVisualBottom(rowKey, field) {
-        const myRowIdx = this.resolveRowIndex(rowKey);
-        if (myRowIdx == null)
-            return null;
-        const span = this.spanRegistry.get(this.spanKey(rowKey, field));
-        const rs = Math.max(1, span?.rowspan ?? 1);
-        return myRowIdx + rs - 1;
-    }
-    registerSeparatorSync(prevRowKey) {
-        const idx = this.resolveRowIndex(prevRowKey);
-        if (idx != null)
-            this.separatorPrevIndices.add(idx);
-    }
-    unregisterSeparatorSync(prevRowKey) {
-        const idx = this.resolveRowIndex(prevRowKey);
-        if (idx != null)
-            this.separatorPrevIndices.delete(idx);
-    }
-    // 셀의 시각적 하단이 separator 바로 앞 행인지 판정.
-    // 해당 셀에 border-bottom: none을 적용하기 위함.
-    isVisualLastRowBeforeSeparatorSync(rowKey, field) {
-        if (this.separatorPrevIndices.size === 0)
-            return false;
-        const visualBottom = this.resolveVisualBottom(rowKey, field);
-        if (visualBottom == null)
-            return false;
-        return this.separatorPrevIndices.has(visualBottom);
-    }
     setRowCountSync(count) {
         const safeCount = Math.max(0, Math.floor(this.toFiniteNumber(count, 0)));
         if (safeCount !== this.rowCount) {
@@ -848,26 +813,27 @@ export class SdTable {
             '--table-body-font-size': `${TABLE_BODY_TYPOGRAPHY.fontSize}px`,
             '--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
             '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
+            '--table-selectable-width': `${TABLE_SELECTABLE_COLUMN_WIDTH}px`,
         };
-        return (h(Host, { key: '9ee5b528b330f9edf406ff40ec089136c0807653', style: hostStyle }, h("div", { key: '9ac6cbba84b7ef7d0897474168748811fb15af92', class: "sd-table__container", style: {
+        return (h(Host, { key: '73046beb47b356f351ae89b162c8e8af2942b0b2', style: hostStyle }, h("div", { key: 'f56b8a425d15a3598e6c1f3373d21ef263cbd800', class: "sd-table__container", style: {
                 '--table-width': this.width,
                 '--table-height': effectiveTableHeight,
                 '--table-container-height': `calc(${effectiveTableHeight} - ${paginationHeight}px)`,
-            } }, h("div", { key: '11f916debfd443e1d243bfa2335dbb0a3cb094bc', class: {
+            } }, h("div", { key: '519a193ab21616ce0a423c9043e0114c489539f3', class: {
                 'sd-table__wrapper': true,
-                'sd-table__wrapper--radius-use-top': this.radius === 'useTop',
-            } }, h("div", { key: '3cad3d86f731a3edc0d2b5a680bcaf6ad6be7399', class: {
+                'sd-table__wrapper--use-top': this.useTop,
+            } }, h("div", { key: 'ef96c9e2ef6b70023c35e5709048f3d994a5bebc', class: {
                 'sd-table__scroll-container': true,
                 'sd-table__scroll-container--loading': this.isLoading,
                 'sd-table__scroll-container--no-data': isNoData,
-            } }, this.isLoading && (h("div", { key: '6f0aac84dcb3d9ca721ed82cd45214b3956d3f94', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '8bb6b8025fceee6ef856efd9cafefe925fc95272', indeterminate: true }))), isNoData && (h(h.Fragment, null, h("div", { key: '69e6e22b68261832a299de470c8ca7f5a16205dd', class: "sd-table__no-data-header-overlay" }), h("div", { key: 'c797a2d41c752698bed1f034beefddc4bf8b951d', class: "sd-table__no-data" }, h("div", { key: '0f0306bc89b5d9046de2aec935822eab0c3ca36c', class: "sd-table__no-data-content", ref: el => {
+            } }, this.isLoading && (h("div", { key: '94f9bbc56855af3548a73ccbbf228b2247764f54', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '2f8a0bfbc0c5829779b7474a9520ddec70a977ea', indeterminate: true }))), isNoData && (h(h.Fragment, null, h("div", { key: 'fab3d44147ecbc99ff3745908ec69da003b4e7cf', class: "sd-table__no-data-header-overlay" }), h("div", { key: '10f8b13e6bba12c80001e5d4432715b0abe2f2f2', class: "sd-table__no-data" }, h("div", { key: '8c411450fc0780df83e69c86ad06c2d09cf80350', class: "sd-table__no-data-content", ref: el => {
                 this.noDataContentEl = el;
                 if (el)
                     this.syncNoDataContentObserver();
-            } }, h("slot", { key: '042671d4c65c4031a756da386ed010146c17f736', name: "no-data" }, h("span", { key: '5994f656dbea3fd1dea69c105907b188658f8c41' }, this.resolvedNoDataLabel)))))), h("table", { key: '16bb3a7c6b32e5312eda79015cd7d90bef37bdff', class: this.tableClasses }, this.autoThead ? (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, h("sd-thead", { rows: this.rows ?? [] }))) : (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
+            } }, h("slot", { key: '661b982cde4f4a6dfa9f6c712efed6745e20f3bf', name: "no-data" }, h("span", { key: '76330839b2614611266315bb8b482b6a8571f1f4' }, this.resolvedNoDataLabel)))))), h("table", { key: '89d9f80c6a0c9963b311d2c121ae0cb0a3289da0', class: this.tableClasses }, this.autoThead ? (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, h("sd-thead", { rows: this.rows ?? [] }))) : (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
             this.pagination.rowsPerPage > 0 &&
             this.rowCount > 0 &&
-            !this.useVirtualScroll && (h("div", { key: '6c3ee5d93fb395154c4c42c914669af535c1a5bc', class: "sd-table__pagination" }, h("sd-pagination", { key: '46053012374e1255037706a8fa4d068dbc60f2d9', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select", { key: 'df04b19e857e823be8237148d84456d492575ce3', value: this.useInternalPagination
+            !this.useVirtualScroll && (h("div", { key: '02e675535bbdc30ab7177378f1b2b13799a9e5c8', class: "sd-table__pagination" }, h("sd-pagination", { key: '83537d5e2f6d5b92e2a4b7dd9e4624372adf0433', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select", { key: 'f843f063b736e534b017fd7f881f049c4258c792', value: this.useInternalPagination
                 ? this.innerRowsPerPage
                 : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
                 if (!this.isRowsPerPageValue(e.detail))
@@ -1126,12 +1092,12 @@ export class SdTable {
                 "setter": false,
                 "defaultValue": "{ left: 0, right: 0 }"
             },
-            "radius": {
-                "type": "string",
+            "useTop": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "'default' | 'useTop'",
-                    "resolved": "\"default\" | \"useTop\"",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
@@ -1143,8 +1109,8 @@ export class SdTable {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "radius",
-                "defaultValue": "'default'"
+                "attribute": "use-top",
+                "defaultValue": "false"
             },
             "noDataLabel": {
                 "type": "string",

package/dist/collection/components/sd-table/sd-tbody/sd-tbody.js

@@ -45,9 +45,9 @@ export class SdTbody {
         }
     }
     render() {
-        return (h(Host, { key: 'a3d0ee1c1820474e97e430ba91f48e12ee0e252d', slot: `${this.tableId}-body` }, h("tbody", { key: 'bbd5b9acf02150b146c9b25d07f2e7a9dd347921', class: { tbody: true } }, [
+        return (h(Host, { key: 'b35f308e703fd3240f8c8dc30bc04432a213fb14', slot: `${this.tableId}-body` }, h("tbody", { key: 'b43c4347f84f13b9babad33ba841ffc18630ac55', class: { tbody: true } }, [
             this.topSpacerHeight > 0 && (h("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
-            h("slot", { key: 'f0ec0aa4d7e7190fc93d96afe5591004174fff63' }),
+            h("slot", { key: 'ac0cbfc76b8c38743f73e38c584459176c2a5b94' }),
             this.bottomSpacerHeight > 0 && (h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
         ])));
     }

package/dist/collection/components/sd-table/sd-td/sd-td.js

@@ -150,7 +150,7 @@ export class SdTd {
         }
     }
     render() {
-        return (h(Host, { key: '91c033a0c4c3a6c3c9b29c0be99912c5ac1283ee', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: 'abfbc911c707012bc7d924e328ba07d71b96f9a9' })));
+        return (h(Host, { key: '5c40fa3dd98dbd88850bd14836ee5578ceb04349', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: '864b000e178c0b6de25b930aa5a84b4f7d7c189b' })));
     }
     static get is() { return "sd-td"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-table/sd-thead/sd-thead.css

@@ -42,11 +42,10 @@ sd-thead * {
 }
 .th--selected {
   position: relative;
-  width: 52px !important;
-  max-width: 52px !important;
-  min-width: 52px !important;
-  padding: 0 10px 0 24px;
-  text-align: left;
+  width: var(--table-selectable-width, 48px) !important;
+  max-width: var(--table-selectable-width, 48px) !important;
+  min-width: var(--table-selectable-width, 48px) !important;
+  text-align: center;
 }
 .th--selected sd-checkbox label {
   position: relative;
@@ -133,6 +132,17 @@ sd-thead * {
   word-break: keep-all;
 }
 
+.th__bar {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  width: var(--table-border-width, 1px);
+  height: var(--table-header-resizer-height, 16px);
+  z-index: 3;
+  background-color: var(--table-header-resizer-color, #CCCCCC);
+}
+
 .th__resizer {
   position: absolute;
   top: 50%;