@sellmate/design-system 1.1.0 → 1.3.0

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

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-BlxrCRYi.js');
+var index = require('./index-Cw-78mnC.js');
 var constants = require('./constants-DJRV1upE.js');
-var sdTable_config = require('./sd-table.config-CDyioyE2.js');
-require('./component.table-B7brIpIQ.js');
+var sdTable_config = require('./sd-table.config-BIpldZtw.js');
+require('./component.table-CMqGfEui.js');
 require('./system-VmZRYp6V.js');
 
 const pagination = {
@@ -154,13 +154,13 @@ const SdPagination = class {
             '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
             '--sd-pagination-item-width': `${this.buttonWidth}px`,
         };
-        return (index.h("div", { key: '0a99cc2b09de2f2a893fe88eaee535dc2f39505d', class: {
+        return (index.h("div", { key: '251d9b3bcff3cf985d62b1a8717f622d209b3fa1', class: {
                 'sd-pagination': true,
                 'sd-pagination--simple': this.simple,
-            }, style: cssVars }, index.h("div", { key: 'ba4e726a23e572c788c8c68689e656a07f21f46e', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "sd-pagination__info" }, index.h("span", { class: "sd-pagination__current" }, this.currentPage), index.h("span", { class: "sd-pagination__divider" }, "/"), index.h("span", { class: "sd-pagination__last" }, this.lastPage))) : (index.h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (index.h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+            }, style: cssVars }, index.h("div", { key: 'd143917676ccd97c1f4fc8e7220857d543efa5fd', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "sd-pagination__info" }, index.h("span", { class: "sd-pagination__current" }, this.currentPage), index.h("span", { class: "sd-pagination__divider" }, "/"), index.h("span", { class: "sd-pagination__last" }, this.lastPage))) : (index.h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (index.h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'sd-pagination__item': true,
                 'sd-pagination__item--selected': this.currentPage === n,
-            }, onClick: () => this.handlePageChange(n) }, n))))), index.h("div", { key: 'e3276583ab382b988ac2961e8c67c431d5c4495e', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n))))), index.h("div", { key: 'e58053cef21c57d88f5b1357101507418b2db002', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
     }
 };
 SdPagination.style = sdPaginationCss();
@@ -207,17 +207,17 @@ const SdTbody = class {
         this.tableEl = table;
         const fromMethod = table?.getTableIdSync?.();
         const fromAttr = table?.getAttribute(constants.TABLE_ID_ATTR);
-        const resolvedTableId = (fromMethod && fromMethod !== 'undefined' ? fromMethod : null) ??
-            (fromAttr && fromAttr !== 'undefined' ? fromAttr : null) ??
+        const resolvedTableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
+            (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
             '';
-        if (resolvedTableId && resolvedTableId !== this.tableId) {
+        if (resolvedTableId !== '' && resolvedTableId !== this.tableId) {
             this.tableId = resolvedTableId;
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'f0dacb28bae712e8f4d65bad00846da9db593307', slot: `${this.tableId}-body` }, index.h("tbody", { key: 'aec7d2277e617f1c186163d214e94559793b764c', class: { tbody: true } }, [
+        return (index.h(index.Host, { key: 'bdb686445ce324c6254891a385d6175c8cac06df', slot: `${this.tableId}-body` }, index.h("tbody", { key: '21a7772f0d43a358d9ae17459f0ff296324bfd82', class: { tbody: true } }, [
             this.topSpacerHeight > 0 && (index.h("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
-            index.h("slot", { key: '2c428e3624ac949ee201edfd02b5e8f0bcea2e48' }),
+            index.h("slot", { key: 'e38d8fe5d67a91d3fa5a25be98195da104660005' }),
             this.bottomSpacerHeight > 0 && (index.h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
         ])));
     }
@@ -258,7 +258,7 @@ const SdThead = class {
     tableEl = null;
     handleColumnsChange(newCols) {
         if (Array.isArray(newCols) && (this.columnWidths ?? []).length === 0) {
-            this.columnWidths = newCols.map(c => parseInt(c.width || '120', 10));
+            this.columnWidths = newCols.map(c => (c.autoWidth ? 0 : parseInt(c.width || '120', 10)));
         }
     }
     componentWillLoad() {
@@ -266,7 +266,7 @@ const SdThead = class {
         this.columnWidths = Array.isArray(this.columnWidths) ? this.columnWidths : [];
         this.resolveConfig();
         if ((this.columnWidths ?? []).length === 0) {
-            this.columnWidths = this._columns.map(c => parseInt(c.width || '120', 10));
+            this.columnWidths = this._columns.map(c => c.autoWidth ? 0 : parseInt(c.width || '120', 10));
         }
     }
     componentDidLoad() {
@@ -283,10 +283,10 @@ const SdThead = class {
         this.tableEl = table;
         const fromMethod = table?.getTableIdSync?.();
         const fromAttr = table?.getAttribute(constants.TABLE_ID_ATTR);
-        const resolvedTableId = (fromMethod && fromMethod !== 'undefined' ? fromMethod : null) ??
-            (fromAttr && fromAttr !== 'undefined' ? fromAttr : null) ??
+        const resolvedTableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
+            (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
             '';
-        if (resolvedTableId && resolvedTableId !== this.tableId) {
+        if (resolvedTableId !== '' && resolvedTableId !== this.tableId) {
             this.tableId = resolvedTableId;
         }
     }
@@ -334,13 +334,17 @@ const SdThead = class {
         const rightOffset = this.columnWidths
             .filter((_, i) => i >= this.visibleColumns.length - (this._stickyColumn.right || 0) && i > colIdx)
             .reduce((a, b) => a + b, 0);
-        return {
+        const col = this.visibleColumns[colIdx];
+        const base = {
             '--sticky-left-offset': `${leftOffset}px`,
             '--sticky-right-offset': `${rightOffset}px`,
-            'width': `${this.columnWidths[colIdx]}px`,
-            'minWidth': `${this.columnWidths[colIdx]}px`,
-            'maxWidth': `${this.columnWidths[colIdx]}px`,
         };
+        if (!col?.autoWidth) {
+            base['width'] = `${this.columnWidths[colIdx]}px`;
+            base['minWidth'] = `${this.columnWidths[colIdx]}px`;
+            base['maxWidth'] = `${this.columnWidths[colIdx]}px`;
+        }
+        return base;
     }
     handleResize(index, event, reversed = false) {
         if (this.tableEl?.handleResize) {
@@ -371,6 +375,7 @@ const SdThead = class {
         const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
         const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
         const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
+        const lastColIdx = this.visibleColumns.length - 1;
         const headStyle = {
             '--table-header-height': `${sdTable_config.TABLE_HEADER_LAYOUT.height}px`,
             '--table-header-padding-x': `${sdTable_config.TABLE_HEADER_LAYOUT.paddingX}px`,
@@ -386,27 +391,33 @@ const SdThead = class {
             '--table-border-color': sdTable_config.TABLE_BORDER.color,
             '--table-border-width': `${sdTable_config.TABLE_BORDER.width}px`,
         };
-        return (index.h(index.Host, { key: '99d8d19dcc65b811d323e21041421b2d57da9f91', slot: `${this.tableId}-head`, style: headStyle }, index.h("thead", { key: '7614b6726ec13e857b6b8654925b0ba3c89fba64', class: {
+        return (index.h(index.Host, { key: 'c2852fc7d6fe9e8116fabbbcc140f4db8319bfdc', slot: `${this.tableId}-head`, style: headStyle }, index.h("thead", { key: '970cb1c96145326f38b79636a72982b0e9c81fa0', class: {
                 'thead': true,
                 'thead--sticky': this._stickyHeader,
-            } }, index.h("tr", { key: '68a615e7779947c1ee8cc26027c5bcded545e4d3', class: "tr" }, this._selectable && (index.h("th", { key: 'd3bc4512a24652ee156104a0fd9891504ce314dd', class: {
+            } }, index.h("tr", { key: '839fb6e9fd68ef10dea1f1d470a6b3e707475a8d', class: "tr" }, this._selectable && (index.h("th", { key: 'd669372261627013bc1b39157139d180b3d1a6c1', class: {
                 'th': true,
                 'th--selected': true,
                 'sticky-left': true,
                 'sticky-left-edge': stickyLeftCount === 0,
                 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
-            }, style: { '--sticky-left-offset': '0px' } }, index.h("sd-checkbox", { key: 'de8f9b201aca60acbbb28a3233e964100109a92b', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (index.h("th", { key: col.name, class: {
+            }, style: { '--sticky-left-offset': '0px' } }, index.h("sd-checkbox", { key: '6263984430b4aa53e6ac24fb0f6a6c05838a71d5', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (index.h("th", { key: col.name, class: {
                 'th': true,
                 [`${col.thClass}`]: Boolean(col.thClass),
                 'sticky-left': true,
                 'sticky-left-edge': idx === stickyLeftCount - 1,
                 'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
-            }, style: { ...col.thStyle, ...this.getStickyStyle(idx) } }, index.h("div", { class: `th__content th__content--${col.align || 'left'}` }, index.h("div", { class: "th__content--label" }, col.label), col.icon && (index.h("sd-icon", { name: col.icon, size: "12", color: sdTable_config.resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (index.h("sd-icon", { name: sdTable_config.resolveSortIconName(col.sort), size: "12", color: sdTable_config.resolveTableIconColor(sdTable_config.resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text))))))), this._resizable && (index.h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))))), middleCols.map((col, relativeIdx) => {
+            }, style: { ...col.thStyle, ...this.getStickyStyle(idx) } }, index.h("div", { class: `th__content th__content--${col.align || 'left'}` }, index.h("div", { class: "th__content--label" }, col.label), col.icon && (index.h("sd-icon", { name: col.icon, size: "12", color: sdTable_config.resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (index.h("sd-icon", { name: sdTable_config.resolveSortIconName(col.sort), size: "12", color: sdTable_config.resolveTableIconColor(sdTable_config.resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text))))))), this._resizable && idx !== lastColIdx && (
+        // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        index.h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))))), middleCols.map((col, relativeIdx) => {
             const actualColIdx = stickyLeftCount + relativeIdx;
             return (index.h("th", { key: col.name, class: {
                     th: true,
                     [`${col.thClass}`]: Boolean(col.thClass),
-                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, index.h("div", { class: `th__content th__content--${col.align || 'left'}` }, index.h("div", { class: "th__content--label" }, col.label), col.icon && (index.h("sd-icon", { name: col.icon, size: "12", color: sdTable_config.resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (index.h("sd-icon", { name: sdTable_config.resolveSortIconName(col.sort), size: "12", color: sdTable_config.resolveTableIconColor(sdTable_config.resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text))))))), this._resizable && (index.h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
+                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, index.h("div", { class: `th__content th__content--${col.align || 'left'}` }, index.h("div", { class: "th__content--label" }, col.label), col.icon && (index.h("sd-icon", { name: col.icon, size: "12", color: sdTable_config.resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (index.h("sd-icon", { name: sdTable_config.resolveSortIconName(col.sort), size: "12", color: sdTable_config.resolveTableIconColor(sdTable_config.resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text))))))), this._resizable && actualColIdx !== lastColIdx && (
+            // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+            index.h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
         }), stickyRightCols.map((col, relativeIdx) => {
             const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
             return (index.h("th", { key: col.name, class: {
@@ -415,7 +426,10 @@ const SdThead = class {
                     'sticky-right': true,
                     'sticky-right-edge': relativeIdx === 0,
                     'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
-                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, index.h("div", { class: `th__content th__content--${col.align || 'left'}` }, index.h("div", { class: "th__content--label" }, col.label), col.icon && (index.h("sd-icon", { name: col.icon, size: "12", color: sdTable_config.resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (index.h("sd-icon", { name: sdTable_config.resolveSortIconName(col.sort), size: "12", color: sdTable_config.resolveTableIconColor(sdTable_config.resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text))))))), this._resizable && (index.h("div", { class: "th__resizer th__resizer--left", onMouseDown: (evt) => this.handleResize(actualColIdx, evt, true) }))));
+                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, index.h("div", { class: `th__content th__content--${col.align || 'left'}` }, index.h("div", { class: "th__content--label" }, col.label), col.icon && (index.h("sd-icon", { name: col.icon, size: "12", color: sdTable_config.resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (index.h("sd-icon", { name: sdTable_config.resolveSortIconName(col.sort), size: "12", color: sdTable_config.resolveTableIconColor(sdTable_config.resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text))))))), this._resizable && (
+            // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+            index.h("div", { class: "th__resizer th__resizer--left", onMouseDown: (evt) => this.handleResize(actualColIdx, evt, true) }))));
         })))));
     }
     static get watchers() { return {
@@ -426,7 +440,7 @@ const SdThead = class {
 };
 SdThead.style = sdTheadCss();
 
-const sdTrCss = () => `sd-tr{display:contents}sd-tr *{box-sizing:border-box}.tr{display:table-row}.tr:hover .td{background-color:#F9F9F9}.tr--no-hover:hover .td{background-color:white}.td{display:table-cell;height:var(--table-body-height, 44px);padding:0 var(--table-body-padding-x, 16px);border-bottom:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);background:white;vertical-align:middle;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.td--left{text-align:left}.td--center{text-align:center}.td--right{text-align:right}.td--selected{position:relative;width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.td--selected sd-checkbox label{position:relative}.td--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.td.sticky-left{position:sticky;background-color:white;z-index:100 !important;left:var(--sticky-left-offset, 0)}.td.sticky-right{position:sticky;background-color:white;z-index:100 !important;right:var(--sticky-right-offset, 0)}.td.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-left-edge.is-scrolled-left{overflow:visible}.td.sticky-left-edge.is-scrolled-left:after{opacity:1}.td.sticky-right-edge.is-scrolled-right{overflow:visible}.td.sticky-right-edge.is-scrolled-right:after{opacity:1}.tr:hover .td.sticky-left,.tr:hover .td.sticky-right{background-color:#F9F9F9}.tr--no-hover:hover .td.sticky-left,.tr--no-hover:hover .td.sticky-right{background-color:white}.td.td--last-row{border-bottom:none}`;
+const sdTrCss = () => `sd-tr{display:contents}sd-tr *{box-sizing:border-box}.tr{display:table-row}.tr:hover .td{background-color:#F9F9F9}.tr--no-hover:hover .td{background-color:white}.td{display:table-cell;height:var(--table-body-height, 44px);padding:var(--table-body-padding-y, 0) var(--table-body-padding-x, 16px);border-bottom:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);background:white;vertical-align:middle;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.td--left{text-align:left}.td--center{text-align:center}.td--right{text-align:right}.td--selected{position:relative;width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.td--selected sd-checkbox label{position:relative}.td--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.td.sticky-left{position:sticky;background-color:white;z-index:100 !important;left:var(--sticky-left-offset, 0)}.td.sticky-right{position:sticky;background-color:white;z-index:100 !important;right:var(--sticky-right-offset, 0)}.td.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-left-edge.is-scrolled-left{overflow:visible}.td.sticky-left-edge.is-scrolled-left:after{opacity:1}.td.sticky-right-edge.is-scrolled-right{overflow:visible}.td.sticky-right-edge.is-scrolled-right:after{opacity:1}.tr:hover .td.sticky-left,.tr:hover .td.sticky-right{background-color:#F9F9F9}.tr--no-hover:hover .td.sticky-left,.tr--no-hover:hover .td.sticky-right{background-color:white}.td.td--last-row{border-bottom:none}.tr--separator .td--separator{height:var(--table-separator-width, 6px);padding:0;background-color:var(--table-separator-color, #eeeeee);border-bottom:none}.td.td--before-separator{border-bottom:none}.td--divider-left{border-left:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1)}.td--divider-right{border-right:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1)}`;
 
 const SdTr = class {
     constructor(hostRef) {
@@ -438,6 +452,7 @@ const SdTr = class {
     stickyColumn;
     rowKey = '';
     row = {};
+    separator;
     tableId = '';
     columnWidths = [];
     isVisible = true;
@@ -447,16 +462,32 @@ const SdTr = class {
     _stickyColumn = { left: 0, right: 0 };
     _scrolledLeft = false;
     _scrolledRight = false;
+    _dense = false;
     tableEl = null;
+    _prevRowKey = null;
     componentWillLoad() {
         this.syncTableContext();
         this.columnWidths = this.columnWidths ?? [];
         this.resolveConfig();
-        this.columnWidths = this._columns.map(c => parseInt(c.width || '120', 10));
+        this.columnWidths = this._columns.map(c => (c.autoWidth ? 0 : parseInt(c.width || '120', 10)));
         this.updateVisibilitySync();
     }
     componentDidLoad() {
         this.syncTableContext();
+        if (this.separator) {
+            const prev = this.el.previousElementSibling;
+            if (prev?.tagName?.toLowerCase() === 'sd-tr') {
+                const prevRowKey = prev.rowKey;
+                this._prevRowKey = prevRowKey;
+                this.tableEl?.registerSeparatorSync?.(prevRowKey);
+            }
+        }
+    }
+    disconnectedCallback() {
+        if (this._prevRowKey !== null) {
+            this.tableEl?.unregisterSeparatorSync?.(this._prevRowKey);
+            this._prevRowKey = null;
+        }
     }
     syncTableContext() {
         // sd-table이 shadow:true이므로 fallback content로 렌더되면 closest가 경계를 못 넘는다.
@@ -468,10 +499,10 @@ const SdTr = class {
         this.tableEl = table;
         const fromMethod = table?.getTableIdSync?.();
         const fromAttr = table?.getAttribute(constants.TABLE_ID_ATTR);
-        const resolvedTableId = (fromMethod && fromMethod !== 'undefined' ? fromMethod : null) ??
-            (fromAttr && fromAttr !== 'undefined' ? fromAttr : null) ??
+        const resolvedTableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
+            (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
             '';
-        if (resolvedTableId && resolvedTableId !== this.tableId) {
+        if (resolvedTableId !== '' && resolvedTableId !== this.tableId) {
             this.tableId = resolvedTableId;
         }
     }
@@ -482,6 +513,7 @@ const SdTr = class {
         this._stickyColumn = this.stickyColumn ?? config?.stickyColumn ?? { left: 0, right: 0 };
         this._scrolledLeft = config?.scrolledLeft ?? false;
         this._scrolledRight = config?.scrolledRight ?? false;
+        this._dense = config?.dense ?? false;
         if (config?.columnWidths && (this.columnWidths ?? []).length === 0) {
             this.columnWidths = [...config.columnWidths];
         }
@@ -527,7 +559,11 @@ const SdTr = class {
     }
     getCellValue(column) {
         const { field, format, name } = column;
-        const value = typeof field === 'function' ? field(this.row) : field ? this.row[field] : this.row[name];
+        const value = typeof field === 'function'
+            ? field(this.row)
+            : field !== ''
+                ? this.row[field]
+                : this.row[name];
         return format ? format(value, this.row) : this.formatValue(value);
     }
     getStickyStyle(colIdx) {
@@ -538,13 +574,17 @@ const SdTr = class {
         const rightOffset = this.columnWidths
             .filter((_, i) => i >= this.visibleColumns.length - (this._stickyColumn.right || 0) && i > colIdx)
             .reduce((a, b) => a + b, 0);
-        return {
+        const col = this.visibleColumns[colIdx];
+        const base = {
             '--sticky-left-offset': `${leftOffset}px`,
             '--sticky-right-offset': `${rightOffset}px`,
-            'width': `${this.columnWidths[colIdx]}px`,
-            'minWidth': `${this.columnWidths[colIdx]}px`,
-            'maxWidth': `${this.columnWidths[colIdx]}px`,
         };
+        if (!col?.autoWidth) {
+            base['width'] = `${this.columnWidths[colIdx]}px`;
+            base['minWidth'] = `${this.columnWidths[colIdx]}px`;
+            base['maxWidth'] = `${this.columnWidths[colIdx]}px`;
+        }
+        return base;
     }
     isSelected() {
         if (this.tableEl?.isRowSelectedSync) {
@@ -574,6 +614,14 @@ const SdTr = class {
         const fieldName = typeof col.field === 'string' ? col.field : col.name;
         return this.tableEl.getCellClassSync(this.rowKey, fieldName);
     }
+    expandCellClass(classStr) {
+        if (classStr == null || classStr === '')
+            return {};
+        return Object.fromEntries(classStr
+            .split(/\s+/)
+            .filter(Boolean)
+            .map(c => [c, true]));
+    }
     isVisualLastRow(col) {
         if (!this.tableEl?.isVisualLastRowSync)
             return false;
@@ -588,6 +636,17 @@ const SdTr = class {
             return false;
         return this.tableEl.isVisualLastRowSync(this.rowKey, '');
     }
+    isVisualLastRowBeforeSeparator(col) {
+        if (!this.tableEl?.isVisualLastRowBeforeSeparatorSync)
+            return false;
+        const fieldName = typeof col.field === 'string' ? col.field : col.name;
+        return this.tableEl.isVisualLastRowBeforeSeparatorSync(this.rowKey, fieldName);
+    }
+    isVisualLastRowBeforeSeparatorForSelfRow() {
+        if (!this.tableEl?.isVisualLastRowBeforeSeparatorSync)
+            return false;
+        return this.tableEl.isVisualLastRowBeforeSeparatorSync(this.rowKey, '');
+    }
     render() {
         const stickyLeftCount = this._stickyColumn.left || 0;
         const stickyRightCount = this._stickyColumn.right || 0;
@@ -595,9 +654,13 @@ const SdTr = class {
         const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
         const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
         const hasRowspan = this.tableEl?.hasRowspanSync?.() ?? false;
+        const isUseFrameRow = this.tableEl?.hasUseFrameInRowSync?.(this.rowKey) ?? false;
+        const effectiveDense = this._dense && !isUseFrameRow;
+        const bodyLayout = effectiveDense ? sdTable_config.TABLE_BODY_LAYOUT.dense : sdTable_config.TABLE_BODY_LAYOUT.default;
         const rowStyle = {
-            display: this.isVisible ? '' : 'none',
-            '--table-body-height': `${sdTable_config.TABLE_BODY_LAYOUT.default.height}px`,
+            'display': this.isVisible ? '' : 'none',
+            '--table-body-height': `${bodyLayout.height}px`,
+            '--table-body-padding-y': `${bodyLayout.paddingY}px`,
             '--table-body-padding-x': `${sdTable_config.TABLE_BODY_LAYOUT.paddingX}px`,
             '--table-body-font-family': sdTable_config.TABLE_BODY_TYPOGRAPHY.fontFamily,
             '--table-body-font-weight': sdTable_config.TABLE_BODY_TYPOGRAPHY.fontWeight,
@@ -606,15 +669,22 @@ const SdTr = class {
             '--table-body-text-decoration': sdTable_config.TABLE_BODY_TYPOGRAPHY.textDecoration,
             '--table-border-color': sdTable_config.TABLE_BORDER.color,
             '--table-border-width': `${sdTable_config.TABLE_BORDER.width}px`,
+            '--table-separator-color': sdTable_config.TABLE_SEPARATOR.color,
+            '--table-separator-width': `${sdTable_config.TABLE_SEPARATOR.width}px`,
         };
-        return (index.h(index.Host, { key: '30e4127b281770d12fab9e9cfd2cdf667eff8790', style: rowStyle }, index.h("tr", { key: '1072ce3f1b296e2278b7fc92a44d32da223ef119', class: { 'tr': true, 'tr--no-hover': hasRowspan } }, this._selectable && (index.h("td", { key: '4e3a37a320df97378a1ed311c0a7b8f744bd26bc', class: {
+        if (this.separator) {
+            const totalCols = this.visibleColumns.length + (this._selectable ? 1 : 0);
+            return (index.h(index.Host, { style: rowStyle }, index.h("tr", { class: "tr tr--separator" }, index.h("td", { colSpan: totalCols, class: "td td--separator" }))));
+        }
+        return (index.h(index.Host, { style: rowStyle }, index.h("tr", { class: { 'tr': true, 'tr--no-hover': hasRowspan } }, this._selectable && (index.h("td", { class: {
                 'td': true,
                 'td--selected': true,
                 'td--last-row': this.isVisualLastRowForSelfRow(),
+                'td--before-separator': this.isVisualLastRowBeforeSeparatorForSelfRow(),
                 'sticky-left': true,
                 'sticky-left-edge': stickyLeftCount === 0,
                 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
-            }, style: { '--sticky-left-offset': '0px' } }, index.h("sd-checkbox", { key: 'b1a775462c4869f75480908bccd428714c63c257', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => {
+            }, style: { '--sticky-left-offset': '0px' } }, index.h("sd-checkbox", { value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => {
             if (this.isCovered(idx))
                 return null;
             const span = this.getSpanFor(col);
@@ -623,11 +693,12 @@ const SdTr = class {
                     'td': true,
                     [`td--${col.align || 'left'}`]: true,
                     'td--last-row': this.isVisualLastRow(col),
+                    'td--before-separator': this.isVisualLastRowBeforeSeparator(col),
                     'sticky-left': true,
                     'sticky-left-edge': idx === stickyLeftCount - 1,
                     'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
                     [`${col.tdClass}`]: Boolean(col.tdClass),
-                    [`${sdCellClass}`]: Boolean(sdCellClass),
+                    ...this.expandCellClass(sdCellClass),
                 }, style: this.getStickyStyle(idx) }, index.h("slot", { name: `${this.tableId}-${typeof col.field === 'string' ? col.field : col.name}-${this.rowKey}` }, index.h("span", null, this.getCellValue(col)))));
         }), middleCols.map((col, relativeIdx) => {
             const actualColIdx = stickyLeftCount + relativeIdx;
@@ -640,8 +711,9 @@ const SdTr = class {
                     'td': true,
                     [`td--${col.align || 'left'}`]: true,
                     'td--last-row': this.isVisualLastRow(col),
+                    'td--before-separator': this.isVisualLastRowBeforeSeparator(col),
                     [`${col.tdClass}`]: Boolean(col.tdClass),
-                    [`${sdCellClass}`]: Boolean(sdCellClass),
+                    ...this.expandCellClass(sdCellClass),
                 }, style: this.getStickyStyle(actualColIdx) }, index.h("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, index.h("span", null, this.getCellValue(col)))));
         }), stickyRightCols.map((col, relativeIdx) => {
             const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
@@ -654,11 +726,12 @@ const SdTr = class {
                     'td': true,
                     [`td--${col.align || 'left'}`]: true,
                     'td--last-row': this.isVisualLastRow(col),
+                    'td--before-separator': this.isVisualLastRowBeforeSeparator(col),
                     'sticky-right': true,
                     'sticky-right-edge': relativeIdx === 0,
                     'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
                     [`${col.tdClass}`]: Boolean(col.tdClass),
-                    [`${sdCellClass}`]: Boolean(sdCellClass),
+                    ...this.expandCellClass(sdCellClass),
                 }, style: this.getStickyStyle(actualColIdx) }, index.h("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, index.h("span", null, this.getCellValue(col)))));
         }))));
     }

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-BlxrCRYi.js');
-var tooltipArrow = require('./tooltipArrow-N6nQ1QT-.js');
+var index = require('./index-Cw-78mnC.js');
+var tooltipArrow = require('./tooltipArrow-BjSFKIUq.js');
 
 const popover = {
 	bg: "#07284A"};
@@ -65,17 +65,17 @@ const SdPopover = class {
         const leftLink = this.leftLink;
         const button = this.button;
         const hasFooter = !!leftLink || !!button;
-        return (index.h(index.Fragment, { key: '15b78d688d095fb15d5e6188dc848593bfec842e' }, this.label ? (index.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) })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (index.h("sd-floating-portal", { key: '5075327dce1fda289492edbeefe2e9af38fdaab0', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, index.h("div", { key: 'd28e998f464c40d49935013521663801aead6771', class: {
+        return (index.h(index.Fragment, { key: 'b50da46efd85cdb48f66b24c591ab662a9fd62cb' }, this.label !== '' ? (index.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) })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (index.h("sd-floating-portal", { key: 'a31d6c00a9b61826fa412247f603d78874a3dba6', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, index.h("div", { key: '11020f31a14dbb7325b30ebc48315b344662cf43', class: {
                 'sd-floating-menu': true,
                 'sd-floating-menu--popover': true,
                 [`sd-floating-menu--${placement}`]: true,
-                [menuClass]: !!menuClass,
+                [menuClass]: menuClass !== '',
             }, style: {
                 '--sd-floating-bg': popoverTokens.popover.bg,
-            } }, index.h("i", { key: 'aa98412939b7717c204fe7a76da9b61a6505a01a', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '54b1a1fc5b88600737830668c3da39082cc895e7' })), index.h("div", { key: 'a7968d363c8e77954093bf550d6904009f8b792b', class: "sd-floating-menu__content" }, this.menuTitle && index.h("div", { key: 'b995c6df0d035a7a1162ec6dd3b4803897ed9b3e', class: "sd-floating-menu__title" }, this.menuTitle), messages.length > 0 && (index.h("div", { key: '2ee4971691688a24842b083e561b4e9e818aed88', class: "sd-floating-menu__messages" }, messages.map((message, i) => (index.h("div", { key: `msg-${i}` }, message))))), hasFooter && (index.h("div", { key: '4cbb44218d763af841b1e6bfbdd754b23d22c9e2', class: {
+            } }, index.h("i", { key: '51b35ade68a68c92b7488b97f2b1808d7fcf33e5', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, index.h(tooltipArrow.TooltipArrow, { key: 'd491c997e07a2bb2d4a3ad3624d5098457f91c05' })), index.h("div", { key: '19bfc90b0c5da4fe736aad3b8b2061ac58d8efb4', class: "sd-floating-menu__content" }, this.menuTitle && index.h("div", { key: '31875711b7cd54c0c48f0017ac94365c3cc97821', class: "sd-floating-menu__title" }, this.menuTitle), messages.length > 0 && (index.h("div", { key: '9c78a748831045f96fe48fd2ae9dcd85b1335aa0', class: "sd-floating-menu__messages" }, messages.map((message, i) => (index.h("div", { key: `msg-${i}` }, message))))), hasFooter && (index.h("div", { key: '787f0d2ac133bef9f72ce248b943b0ff9883db9e', class: {
                 'sd-floating-menu__buttons': true,
                 'sd-floating-menu__buttons--with-link': !!leftLink,
-            } }, leftLink && (index.h("sd-text-link", { key: '67c6e9daf13cb294f30fdf1f848e92ba22cd3512', class: "sd-floating-menu__left-link", label: leftLink.label, icon: leftLink.icon ?? '', iconColor: leftLink.iconColor ?? '', useArrow: !!leftLink.useArrow, underline: !!leftLink.underline, disabled: !!leftLink.disabled, onSdClick: leftLink.onClick })), button && (index.h("sd-button", { key: '5328f1adcdc680d1bc97910a1b519298ced3b325', name: button.name ?? 'secondary_xs', label: button.label, icon: button.icon, rightIcon: button.rightIcon, ariaLabel: button.ariaLabel, disabled: button.disabled, type: button.type, onSdClick: button.onClick }))))), this.useClose && (index.h("sd-ghost-button", { key: '3e05ed8da4298a26d52045ad87fa5be42d6f6f02', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose })))))));
+            } }, leftLink && (index.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 && (index.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 && (index.h("sd-ghost-button", { key: '032461787d74367ea047c088e08704ce7409f74b', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose })))))));
     }
 };
 SdPopover.style = sdPopoverCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BlxrCRYi.js');
+var index = require('./index-Cw-78mnC.js');
 
 const popup$1 = {
 	header: {
@@ -104,7 +104,7 @@ const SdPopup = class {
             ...DEFAULT_SUBMIT_BUTTON_PROPS,
             ...this.submitButtonProps,
         };
-        return (index.h("div", { key: '15e86848fe487b9df5b09a91e5319b35d7332a6e', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, index.h("header", { key: 'd8281c73a80fe5a4b8ce3ca219e967932b0ec1d3', class: "sd-popup__header" }, index.h("h2", { key: '31031d3988bae465e023cc94713fb39ef9299250', class: "sd-popup__title" }, this.popupTitle)), index.h("div", { key: 'dfa941b0dc100b55fc08ab8cb9fce2835aaa62a5', class: "sd-popup__body" }, index.h("slot", { key: 'd7532a39c61746e8f517973e6fd4f7f3ac10fae0' })), this.useFooter && (index.h("footer", { key: 'aacedcc4c2f2e4336449bc0fbafc9f67d70cc763', class: "sd-popup__footer" }, index.h("div", { key: '8f093e0a8c24b03fa28e872b025cb159006d3449', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, index.h("slot", { key: '11e2cd175c7ae3151408ca7e564df0a37d6eebb5', name: "footer-left" })), index.h("sd-button", { key: '49b98d39181bd30392b7388dc7acc66caaca6038', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
+        return (index.h("div", { key: '0c9f1cd261fa533044309342cfbaae8f5b87ae31', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, index.h("header", { key: 'd8aa4db4d150419f5653fd93e204cc4bd865c35e', class: "sd-popup__header" }, index.h("h2", { key: 'fce95fce48a91c3a2b60f0b1169113cd2ff157d6', class: "sd-popup__title" }, this.popupTitle)), index.h("div", { key: 'c730895828c14a6a80fe6bebecb08f386cc84a78', class: "sd-popup__body" }, index.h("slot", { key: 'f3402c32fdc55794fb2c877a41c9f73e3c0d6d9f' })), this.useFooter && (index.h("footer", { key: '4b04ebc0dccc07dd9466c06c940d3444346603ba', class: "sd-popup__footer" }, index.h("div", { key: '78b35347121652d647e3601e6c6164e8e21288ca', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, index.h("slot", { key: '98836c28e7de97466cf4285c0458a8709c3788bb', name: "footer-left" })), index.h("sd-button", { key: 'd9ab45765c66a2f86aec2df9fc056fa1f4605259', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
     }
 };
 SdPopup.style = sdPopupCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BlxrCRYi.js');
+var index = require('./index-Cw-78mnC.js');
 
 const SdPortal = class {
     constructor(hostRef) {
@@ -110,7 +110,7 @@ const SdPortal = class {
     }
     // 위치 갱신 (scroll / resize)
     updatePosition() {
-        if (this.rafId)
+        if (this.rafId !== undefined)
             cancelAnimationFrame(this.rafId);
         this.rafId = requestAnimationFrame(() => {
             if (!this.parentRef || !this.wrapper)
@@ -227,7 +227,7 @@ const SdPortal = class {
         this.close.emit();
     }
     render() {
-        return index.h("slot", { key: 'c85555f533743f29615e77c1834e8f0fefae7dc7' });
+        return index.h("slot", { key: '1f46253fe0f70fda84643e8d3025c1fd47090f5c' });
     }
     static get watchers() { return {
         "open": [{

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BlxrCRYi.js');
+var index = require('./index-Cw-78mnC.js');
 
 const radioButton = {
 	xs: {
@@ -145,8 +145,11 @@ const SdRadioButton = class {
     }
     _groupName;
     get groupName() {
-        if (!this._groupName) {
-            this._groupName = this.name || `sd-radio-button-${crypto.randomUUID()}`;
+        if (this._groupName == null || this._groupName === '') {
+            this._groupName =
+                this.name != null && this.name !== ''
+                    ? this.name
+                    : `sd-radio-button-${crypto.randomUUID()}`;
         }
         return this._groupName;
     }
@@ -175,7 +178,7 @@ const SdRadioButton = class {
             '--sd-radio-button-content-select': RADIO_BUTTON_COLORS.content.select,
             '--sd-radio-button-content-disabled': RADIO_BUTTON_COLORS.content.disabled,
         };
-        return (index.h("div", { key: 'fc1cfe14f2e71092496b241f3b4efa42a1ed878c', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
+        return (index.h("div", { key: 'd1f572315ee66c5defebc4386e815fb21928b548', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
             const isSelected = this.isOptionSelected(option);
             const isDisabled = this.isOptionDisabled(option);
             return (index.h("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, index.h("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && index.h("span", { class: "sd-radio-button__label" }, option.label)));

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BlxrCRYi.js');
+var index = require('./index-Cw-78mnC.js');
 
 const radio = {
 	size: "16",
@@ -118,7 +118,7 @@ const SdRadio = class {
             '--sd-radio-disabled-dot': RADIO_COLORS.disabled.dot,
             '--sd-radio-label-color': RADIO_COLORS.label,
         };
-        return (index.h("label", { key: 'bbbca45f706514a12be434ba877de0bd0f82c944', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("input", { key: 'e2cacd52037790cfe2d0eacacb975864858f73f8', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), index.h("span", { key: 'bfbfdcb93536cef9fecbf1cc3a5dc5c2adbf5dd0', class: "sd-radio__circle" }), this.label && index.h("span", { key: '04c8d1e8de88bbb8d4041ebbbda00f58f8dc460c', class: "sd-radio__label" }, this.label)));
+        return (index.h("label", { key: '2b7819249e5070a22b626530011db4a8e56194f1', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("input", { key: '233699a7c3bc13708d43ca3719f61edf53836c83', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), index.h("span", { key: 'eb665c5f8c6202b66b65b6b120f144970fba0a38', class: "sd-radio__circle" }), this.label && index.h("span", { key: '3d0db13e083bacb4cb7ace9129fcfcd61f18dfc7', class: "sd-radio__label" }, this.label)));
     }
     static get watchers() { return {
         "value": [{

package/dist/cjs/sd-select-list-item_2.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BlxrCRYi.js');
+var index = require('./index-Cw-78mnC.js');
 var sdSelect_config = require('./sd-select.config-B19ptCT2.js');
 
 const sdSelectListItemCss = () => `sd-select-list-item{display:block}sd-select-list-item .sd-select-list-item{display:flex;align-items:center;gap:var(--list-item-gap);padding:var(--list-item-padding-y) var(--list-item-padding-right) var(--list-item-padding-y) var(--list-item-padding-left);font-size:var(--list-item-font-size);line-height:var(--list-item-line-height);font-weight:var(--list-item-font-weight);background:var(--list-item-bg);color:var(--list-item-color);cursor:default;user-select:none}sd-select-list-item .sd-select-list-item--selectable{cursor:pointer}sd-select-list-item .sd-select-list-item--depth1-group{border-top:var(--list-item-border-top);font-weight:700}sd-select-list-item .sd-select-list-item--depth2-group{font-weight:500}sd-select-list-item .sd-select-list-item--focused.sd-select-list-item--selectable:not(.sd-select-list-item--disabled){background:var(--list-item-bg-hover);color:var(--list-item-color-hover)}sd-select-list-item .sd-select-list-item--selected:not(.sd-select-list-item--group){font-weight:var(--list-item-font-weight-selected);color:var(--list-item-color-selected)}sd-select-list-item .sd-select-list-item--selected.sd-select-list-item--focused{color:var(--list-item-color-hover)}sd-select-list-item .sd-select-list-item--disabled{color:var(--list-item-color-disabled);cursor:not-allowed}sd-select-list-item .sd-select-list-item__label{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-list-item .sd-select-list-item__count{flex-shrink:0;font-weight:500;color:var(--list-item-color-disabled)}sd-select-list-item .sd-select-list-item--group.sd-select-list-item--focused .sd-select-list-item__count{color:#ffffff}sd-select-list-item .sd-select-list-item__checkbox{flex-shrink:0}`;
@@ -73,9 +73,13 @@ const SdSelectListItem = class {
             '--list-item-font-weight-selected': sdSelect_config.LIST_ITEM_TYPOGRAPHY.selectedFontWeight,
         };
         if (isDepth1Group) {
-            cssVars['--list-item-border-top'] = `${sdSelect_config.LIST_ITEM_COLORS.depth1.borderWidth}px solid ${sdSelect_config.LIST_ITEM_COLORS.depth1.border}`;
+            cssVars['--list-item-border-top'] =
+                `${sdSelect_config.LIST_ITEM_COLORS.depth1.borderWidth}px solid ${sdSelect_config.LIST_ITEM_COLORS.depth1.border}`;
         }
-        return (index.h("div", { key: 'd580af48ad969b82d964d35fa3ed6bc02e807a77', class: {
+        return (
+        // 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+        index.h("div", { key: '93e8bf04e69d9e6f066952570ed06076bdd17e57', 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,
@@ -85,7 +89,7 @@ const SdSelectListItem = class {
                 '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 && (index.h("sd-checkbox", { key: '57cee194abfeb1fb12db1ebc72397fdb2f5268ba', 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 })), index.h("span", { key: 'dc10ebc823b7007988c29facfd559d477caa9bb8', class: "sd-select-list-item__label" }, this.option.label), this.countInfo && (index.h("span", { key: '3504a51d1c92f6b21ec3f36b4546b1763fcc931f', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (index.h("sd-checkbox", { key: '2b6a17361c2e5c65c6dac21895ef397cadeec9a3', 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 })), index.h("span", { key: '158e45d52b3b5394f7c4e2ffff97d23f83ce5e49', class: "sd-select-list-item__label" }, this.option.label), this.countInfo && (index.h("span", { key: '48adac9df92cd19f5e2b39bed828a9ad7c22c945', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
 };
 SdSelectListItem.style = sdSelectListItemCss();
@@ -132,21 +136,21 @@ const SdSelectListItemSearch = class {
         this.inputEl?.focus();
     };
     disconnectedCallback() {
-        if (this.focusRafId)
+        if (this.focusRafId !== undefined)
             cancelAnimationFrame(this.focusRafId);
-        if (this.debounceTimer)
+        if (this.debounceTimer !== undefined)
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (index.h("div", { key: '8714ef9e06f54fd5c2ae5241cac65a74ea45dccf', class: {
+        return (index.h("div", { key: '0b8e55a2f39d72bc6fc5c7d8c6262c9fffb52ba7', class: {
                 'sd-select-list-item-search': true,
                 'sd-select-list-item-search--scrolled': this.isScrolled,
-            } }, index.h("div", { key: '428aea3765711fd91ae7b587b21347dd9634636b', class: "sd-select-list-item-search__inner" }, index.h("sd-icon", { key: 'ed3363eea1a7d6a4f44141a74855c4e767a34999', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), index.h("input", { key: 'c3f5539e037a81d96ce2fa41225f0c33c32add6e', ref: el => {
+            } }, index.h("div", { key: '30c4f5d6c8002579da129cebb06c026c278fb555', class: "sd-select-list-item-search__inner" }, index.h("sd-icon", { key: 'be9076a1fd6d7fd9a1990fd9e32aebd04c1bc4b4', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), index.h("input", { key: 'c9400184f607d0385e5e8c25615e1a955256c6f4', 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() }), index.h("button", { key: 'b081b5a6eced0397db40784ce25e0e84c574f869', 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() }), index.h("button", { key: 'dcb18eff068dea3fcb9144c4dfd4500806f68753', 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' }, index.h("sd-icon", { key: '29615969a7efa118089e2c8dba741086196f8593', name: "close", size: 12, color: "#888888" })))));
+                'sd-select-list-item-search__clear--hidden': this.searchText === '',
+            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, index.h("sd-icon", { key: 'beb2cf23258aa1eaff2c9fdb63dae99570691af1', name: "close", size: 12, color: "#888888" })))));
     }
 };
 SdSelectListItemSearch.style = sdSelectListItemSearchCss();