@sellmate/design-system 1.1.0 → 1.2.0

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement, H as Host } from './index-CLCoul8o.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement, H as Host } from './index-0U6dRjlq.js';
 import { T as TABLE_ID_ATTR } from './constants-sZMi_32I.js';
-import { r as resolveTableIconColor, c as resolveSortIconName, a as TABLE_BORDER, d as TABLE_HEADER_RESIZING_BAR, e as TABLE_HEADER_TYPOGRAPHY, f as TABLE_HEADER_COLORS, g as TABLE_HEADER_LAYOUT, T as TABLE_BODY_TYPOGRAPHY, h as TABLE_BODY_LAYOUT } from './sd-table.config-0Te8GLCI.js';
-import './component.table-BQ6at17Y.js';
+import { r as resolveTableIconColor, d as resolveSortIconName, b as TABLE_BORDER, e as TABLE_HEADER_RESIZING_BAR, f as TABLE_HEADER_TYPOGRAPHY, g as TABLE_HEADER_COLORS, h as TABLE_HEADER_LAYOUT, i as TABLE_SEPARATOR, a as TABLE_BODY_TYPOGRAPHY, T as TABLE_BODY_LAYOUT } from './sd-table.config-B-VgXXT7.js';
+import './component.table-BnfUIhUj.js';
 import './system-GBlVDmy4.js';
 
 const pagination = {
@@ -205,17 +205,17 @@ const SdTbody = class {
         this.tableEl = table;
         const fromMethod = table?.getTableIdSync?.();
         const fromAttr = table?.getAttribute(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 (h(Host, { key: 'f0dacb28bae712e8f4d65bad00846da9db593307', slot: `${this.tableId}-body` }, h("tbody", { key: 'aec7d2277e617f1c186163d214e94559793b764c', class: { tbody: true } }, [
+        return (h(Host, { key: '5b55bfd73916ff1402329375de1e1fc2a7629cbd', slot: `${this.tableId}-body` }, h("tbody", { key: 'a09a532d1510166a36d592c2e59ec1765803bbbe', class: { tbody: true } }, [
             this.topSpacerHeight > 0 && (h("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
-            h("slot", { key: '2c428e3624ac949ee201edfd02b5e8f0bcea2e48' }),
+            h("slot", { key: 'da3827a9c2fe7a74ec3cb3eb8dee3ab039ea0535' }),
             this.bottomSpacerHeight > 0 && (h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
         ])));
     }
@@ -256,7 +256,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() {
@@ -264,7 +264,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() {
@@ -281,10 +281,10 @@ const SdThead = class {
         this.tableEl = table;
         const fromMethod = table?.getTableIdSync?.();
         const fromAttr = table?.getAttribute(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;
         }
     }
@@ -332,13 +332,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) {
@@ -369,6 +373,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': `${TABLE_HEADER_LAYOUT.height}px`,
             '--table-header-padding-x': `${TABLE_HEADER_LAYOUT.paddingX}px`,
@@ -384,27 +389,33 @@ const SdThead = class {
             '--table-border-color': TABLE_BORDER.color,
             '--table-border-width': `${TABLE_BORDER.width}px`,
         };
-        return (h(Host, { key: '99d8d19dcc65b811d323e21041421b2d57da9f91', slot: `${this.tableId}-head`, style: headStyle }, h("thead", { key: '7614b6726ec13e857b6b8654925b0ba3c89fba64', class: {
+        return (h(Host, { key: '424fa72b833a94bce945ae50e8445cbed0527025', slot: `${this.tableId}-head`, style: headStyle }, h("thead", { key: '1a5704d78992b553c5db5ba92bb3814de7c19898', class: {
                 'thead': true,
                 'thead--sticky': this._stickyHeader,
-            } }, h("tr", { key: '68a615e7779947c1ee8cc26027c5bcded545e4d3', class: "tr" }, this._selectable && (h("th", { key: 'd3bc4512a24652ee156104a0fd9891504ce314dd', class: {
+            } }, h("tr", { key: '1369ff7c99a5691bcd5fa54af4f7c02ff41dceb3', class: "tr" }, this._selectable && (h("th", { key: '72159c6f8ef28b0b93790e180cb9b12345727525', class: {
                 'th': true,
                 'th--selected': true,
                 'sticky-left': true,
                 'sticky-left-edge': stickyLeftCount === 0,
                 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
-            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: 'de8f9b201aca60acbbb28a3233e964100109a92b', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
+            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '1c5c035346fc6d13d956475480374a8bd93d3d6d', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
                 'th': true,
                 [`${col.thClass}`]: Boolean(col.thClass),
                 'sticky-left': true,
                 'sticky-left-edge': idx === stickyLeftCount - 1,
                 'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
-            }, style: { ...col.thStyle, ...this.getStickyStyle(idx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && (h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))))), middleCols.map((col, relativeIdx) => {
+            }, style: { ...col.thStyle, ...this.getStickyStyle(idx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && idx !== lastColIdx && (
+        // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))))), middleCols.map((col, relativeIdx) => {
             const actualColIdx = stickyLeftCount + relativeIdx;
             return (h("th", { key: col.name, class: {
                     th: true,
                     [`${col.thClass}`]: Boolean(col.thClass),
-                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && (h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
+                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && actualColIdx !== lastColIdx && (
+            // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+            h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
         }), stickyRightCols.map((col, relativeIdx) => {
             const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
             return (h("th", { key: col.name, class: {
@@ -413,7 +424,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) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && (h("div", { class: "th__resizer th__resizer--left", onMouseDown: (evt) => this.handleResize(actualColIdx, evt, true) }))));
+                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && (
+            // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+            h("div", { class: "th__resizer th__resizer--left", onMouseDown: (evt) => this.handleResize(actualColIdx, evt, true) }))));
         })))));
     }
     static get watchers() { return {
@@ -424,7 +438,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) {
@@ -436,6 +450,7 @@ const SdTr = class {
     stickyColumn;
     rowKey = '';
     row = {};
+    separator;
     tableId = '';
     columnWidths = [];
     isVisible = true;
@@ -445,16 +460,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가 경계를 못 넘는다.
@@ -466,10 +497,10 @@ const SdTr = class {
         this.tableEl = table;
         const fromMethod = table?.getTableIdSync?.();
         const fromAttr = table?.getAttribute(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;
         }
     }
@@ -480,6 +511,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];
         }
@@ -525,7 +557,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) {
@@ -536,13 +572,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) {
@@ -572,6 +612,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;
@@ -586,6 +634,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;
@@ -593,9 +652,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 ? TABLE_BODY_LAYOUT.dense : TABLE_BODY_LAYOUT.default;
         const rowStyle = {
-            display: this.isVisible ? '' : 'none',
-            '--table-body-height': `${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': `${TABLE_BODY_LAYOUT.paddingX}px`,
             '--table-body-font-family': TABLE_BODY_TYPOGRAPHY.fontFamily,
             '--table-body-font-weight': TABLE_BODY_TYPOGRAPHY.fontWeight,
@@ -604,15 +667,22 @@ const SdTr = class {
             '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
             '--table-border-color': TABLE_BORDER.color,
             '--table-border-width': `${TABLE_BORDER.width}px`,
+            '--table-separator-color': TABLE_SEPARATOR.color,
+            '--table-separator-width': `${TABLE_SEPARATOR.width}px`,
         };
-        return (h(Host, { key: '30e4127b281770d12fab9e9cfd2cdf667eff8790', style: rowStyle }, h("tr", { key: '1072ce3f1b296e2278b7fc92a44d32da223ef119', class: { 'tr': true, 'tr--no-hover': hasRowspan } }, this._selectable && (h("td", { key: '4e3a37a320df97378a1ed311c0a7b8f744bd26bc', class: {
+        if (this.separator) {
+            const totalCols = this.visibleColumns.length + (this._selectable ? 1 : 0);
+            return (h(Host, { style: rowStyle }, h("tr", { class: "tr tr--separator" }, h("td", { colSpan: totalCols, class: "td td--separator" }))));
+        }
+        return (h(Host, { style: rowStyle }, h("tr", { class: { 'tr': true, 'tr--no-hover': hasRowspan } }, this._selectable && (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' } }, h("sd-checkbox", { key: 'b1a775462c4869f75480908bccd428714c63c257', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => {
+            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => {
             if (this.isCovered(idx))
                 return null;
             const span = this.getSpanFor(col);
@@ -621,11 +691,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) }, h("slot", { name: `${this.tableId}-${typeof col.field === 'string' ? col.field : col.name}-${this.rowKey}` }, h("span", null, this.getCellValue(col)))));
         }), middleCols.map((col, relativeIdx) => {
             const actualColIdx = stickyLeftCount + relativeIdx;
@@ -638,8 +709,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) }, h("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, h("span", null, this.getCellValue(col)))));
         }), stickyRightCols.map((col, relativeIdx) => {
             const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
@@ -652,11 +724,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) }, h("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, h("span", null, this.getCellValue(col)))));
         }))));
     }

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, F as Fragment } from './index-CLCoul8o.js';
-import { T as TooltipArrow } from './tooltipArrow-Bc-yw2nt.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, F as Fragment } from './index-0U6dRjlq.js';
+import { T as TooltipArrow } from './tooltipArrow-O5LOsHae.js';
 
 const popover = {
 	bg: "#07284A"};
@@ -63,17 +63,17 @@ const SdPopover = class {
         const leftLink = this.leftLink;
         const button = this.button;
         const hasFooter = !!leftLink || !!button;
-        return (h(Fragment, { key: '15b78d688d095fb15d5e6188dc848593bfec842e' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-popover", onSdClick: () => this.setShow(!this.show) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (h("sd-floating-portal", { key: '5075327dce1fda289492edbeefe2e9af38fdaab0', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, h("div", { key: 'd28e998f464c40d49935013521663801aead6771', class: {
+        return (h(Fragment, { key: '15b78d688d095fb15d5e6188dc848593bfec842e' }, this.label !== '' ? (h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-popover", onSdClick: () => this.setShow(!this.show) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (h("sd-floating-portal", { key: 'c77807f72410fb9c96a94e06fa9bb953ef934b4d', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, h("div", { key: 'dfffd8eada595286469c17ed549d60539d9b3ca6', 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,
-            } }, h("i", { key: 'aa98412939b7717c204fe7a76da9b61a6505a01a', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '54b1a1fc5b88600737830668c3da39082cc895e7' })), h("div", { key: 'a7968d363c8e77954093bf550d6904009f8b792b', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: 'b995c6df0d035a7a1162ec6dd3b4803897ed9b3e', class: "sd-floating-menu__title" }, this.menuTitle), messages.length > 0 && (h("div", { key: '2ee4971691688a24842b083e561b4e9e818aed88', class: "sd-floating-menu__messages" }, messages.map((message, i) => (h("div", { key: `msg-${i}` }, message))))), hasFooter && (h("div", { key: '4cbb44218d763af841b1e6bfbdd754b23d22c9e2', class: {
+            } }, h("i", { key: '0852ebe804a7e305383f58dae7e0088f2456f53a', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: 'c470c8ccebdb920b1c14940dffe11ad619560fb7' })), h("div", { key: 'fcca2e3bc61cd64110e86da4ee483dc5b1101b7c', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: 'fad331bcd9c73e72ed013826db69badd8b7a069f', class: "sd-floating-menu__title" }, this.menuTitle), messages.length > 0 && (h("div", { key: 'c83d0be758758fc720d1c3d00aaa8f0cb865cf12', class: "sd-floating-menu__messages" }, messages.map((message, i) => (h("div", { key: `msg-${i}` }, message))))), hasFooter && (h("div", { key: '821a434f478d8aee61e81026ccc37f75579e290e', class: {
                 'sd-floating-menu__buttons': true,
                 'sd-floating-menu__buttons--with-link': !!leftLink,
-            } }, leftLink && (h("sd-text-link", { key: '67c6e9daf13cb294f30fdf1f848e92ba22cd3512', class: "sd-floating-menu__left-link", label: leftLink.label, icon: leftLink.icon ?? '', iconColor: leftLink.iconColor ?? '', useArrow: !!leftLink.useArrow, underline: !!leftLink.underline, disabled: !!leftLink.disabled, onSdClick: leftLink.onClick })), button && (h("sd-button", { key: '5328f1adcdc680d1bc97910a1b519298ced3b325', name: button.name ?? 'secondary_xs', label: button.label, icon: button.icon, rightIcon: button.rightIcon, ariaLabel: button.ariaLabel, disabled: button.disabled, type: button.type, onSdClick: button.onClick }))))), this.useClose && (h("sd-ghost-button", { key: '3e05ed8da4298a26d52045ad87fa5be42d6f6f02', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose })))))));
+            } }, leftLink && (h("sd-text-link", { key: '4b28ebf22197453c403066daf97d8925b0a4a8e1', 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: 'af8bdfa4a994bafa9b7329e149b62480d5f3d97c', 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: 'a8031ecc0aa0721adab17031019a079bc2bdce88', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose })))))));
     }
 };
 SdPopover.style = sdPopoverCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-CLCoul8o.js';
+import { r as registerInstance, c as createEvent, h } from './index-0U6dRjlq.js';
 
 const popup$1 = {
 	header: {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-CLCoul8o.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-0U6dRjlq.js';
 
 const SdPortal = class {
     constructor(hostRef) {
@@ -108,7 +108,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)
@@ -225,7 +225,7 @@ const SdPortal = class {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: 'c85555f533743f29615e77c1834e8f0fefae7dc7' });
+        return h("slot", { key: '8b728e4a9a97cb1c4dbdaf8b6a6d85b37fc07af7' });
     }
     static get watchers() { return {
         "open": [{

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-CLCoul8o.js';
+import { r as registerInstance, c as createEvent, h } from './index-0U6dRjlq.js';
 
 const radioButton = {
 	xs: {
@@ -143,8 +143,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;
     }
@@ -173,7 +176,7 @@ const SdRadioButton = class {
             '--sd-radio-button-content-select': RADIO_BUTTON_COLORS.content.select,
             '--sd-radio-button-content-disabled': RADIO_BUTTON_COLORS.content.disabled,
         };
-        return (h("div", { key: 'fc1cfe14f2e71092496b241f3b4efa42a1ed878c', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
+        return (h("div", { key: '0eef3b536855ef3883628ce92a5dcb2846976d86', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
             const isSelected = this.isOptionSelected(option);
             const isDisabled = this.isOptionDisabled(option);
             return (h("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, h("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && h("span", { class: "sd-radio-button__label" }, option.label)));

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-CLCoul8o.js';
+import { r as registerInstance, c as createEvent, h } from './index-0U6dRjlq.js';
 
 const radio = {
 	size: "16",

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-CLCoul8o.js';
+import { r as registerInstance, c as createEvent, h } from './index-0U6dRjlq.js';
 import { e as LIST_ITEM_LAYOUT, g as LIST_ITEM_TYPOGRAPHY, h as LIST_ITEM_COLORS, i as SEARCH_DEBOUNCE_MS } from './sd-select.config-CxOCk_ge.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}`;
@@ -71,9 +71,13 @@ const SdSelectListItem = class {
             '--list-item-font-weight-selected': LIST_ITEM_TYPOGRAPHY.selectedFontWeight,
         };
         if (isDepth1Group) {
-            cssVars['--list-item-border-top'] = `${LIST_ITEM_COLORS.depth1.borderWidth}px solid ${LIST_ITEM_COLORS.depth1.border}`;
+            cssVars['--list-item-border-top'] =
+                `${LIST_ITEM_COLORS.depth1.borderWidth}px solid ${LIST_ITEM_COLORS.depth1.border}`;
         }
-        return (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
+        h("div", { key: '8382966892edc2a46602733400aa579d0caa3128', 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,
@@ -83,7 +87,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 && (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 })), h("span", { key: 'dc10ebc823b7007988c29facfd559d477caa9bb8', class: "sd-select-list-item__label" }, this.option.label), this.countInfo && (h("span", { key: '3504a51d1c92f6b21ec3f36b4546b1763fcc931f', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: 'f8d1bb696416265861cc3b61ca1dcaec52dc2d4a', 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: '0ce20554fb96ad650104a98d779f3ff64fabe381', class: "sd-select-list-item__label" }, this.option.label), this.countInfo && (h("span", { key: '4d2d8f5bd63373906544882ff5852134e3ecd4d3', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
 };
 SdSelectListItem.style = sdSelectListItemCss();
@@ -130,21 +134,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 (h("div", { key: '8714ef9e06f54fd5c2ae5241cac65a74ea45dccf', class: {
+        return (h("div", { key: '6872376ea0f47c256273f751fad367f2c49a9160', class: {
                 'sd-select-list-item-search': true,
                 'sd-select-list-item-search--scrolled': this.isScrolled,
-            } }, h("div", { key: '428aea3765711fd91ae7b587b21347dd9634636b', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: 'ed3363eea1a7d6a4f44141a74855c4e767a34999', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: 'c3f5539e037a81d96ce2fa41225f0c33c32add6e', ref: el => {
+            } }, h("div", { key: 'f6c872e0252b6d7ba81f49938a4f5a647f0fb486', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: '49f10ed222e855ef6f0f5f12a65a74e1fec95bb5', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: '76d88aa4ce7eee598db2709d2d5442465b1798cb', 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: '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() }), h("button", { key: 'e94d1661c6ed26754d4ee7e186808ebd9f057ec9', 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: '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' }, h("sd-icon", { key: 'ad89b3421ec345f47c8d67d78f20cae86869d4c1', name: "close", size: 12, color: "#888888" })))));
     }
 };
 SdSelectListItemSearch.style = sdSelectListItemSearchCss();