@sellmate/design-system 1.2.0 → 1.4.0

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

@@ -2,8 +2,8 @@
 
 var index = require('./index-Cw-78mnC.js');
 var constants = require('./constants-DJRV1upE.js');
-var sdTable_config = require('./sd-table.config-BIpldZtw.js');
-require('./component.table-CMqGfEui.js');
+var sdTable_config = require('./sd-table.config-B7psrvV4.js');
+require('./component.table-qOFez3z3.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();
@@ -215,9 +215,9 @@ const SdTbody = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '5b55bfd73916ff1402329375de1e1fc2a7629cbd', slot: `${this.tableId}-body` }, index.h("tbody", { key: 'a09a532d1510166a36d592c2e59ec1765803bbbe', 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: 'da3827a9c2fe7a74ec3cb3eb8dee3ab039ea0535' }),
+            index.h("slot", { key: 'e38d8fe5d67a91d3fa5a25be98195da104660005' }),
             this.bottomSpacerHeight > 0 && (index.h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
         ])));
     }
@@ -391,16 +391,16 @@ 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: '424fa72b833a94bce945ae50e8445cbed0527025', slot: `${this.tableId}-head`, style: headStyle }, index.h("thead", { key: '1a5704d78992b553c5db5ba92bb3814de7c19898', 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: '1369ff7c99a5691bcd5fa54af4f7c02ff41dceb3', class: "tr" }, this._selectable && (index.h("th", { key: '72159c6f8ef28b0b93790e180cb9b12345727525', 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: '1c5c035346fc6d13d956475480374a8bd93d3d6d', value: this.getIsAllChecked(), disabled: safeRows.length === 0, 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,
@@ -440,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: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 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}.tr--separator:hover .td{background-color:var(--table-separator-color, #eeeeee)}.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}.tr--separator:hover .td.sticky-left,.tr--separator:hover .td.sticky-right{background-color:var(--table-separator-color, #eeeeee)}.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) {
@@ -614,6 +614,13 @@ const SdTr = class {
         const fieldName = typeof col.field === 'string' ? col.field : col.name;
         return this.tableEl.getCellClassSync(this.rowKey, fieldName);
     }
+    getFramePaddingStyle(field) {
+        if (!this._dense)
+            return undefined;
+        if (!(this.tableEl?.isCellUseFrameSync?.(this.rowKey, field) ?? false))
+            return undefined;
+        return { padding: `${sdTable_config.TABLE_BODY_LAYOUT.framePadding}px` };
+    }
     expandCellClass(classStr) {
         if (classStr == null || classStr === '')
             return {};
@@ -622,20 +629,6 @@ const SdTr = class {
             .filter(Boolean)
             .map(c => [c, true]));
     }
-    isVisualLastRow(col) {
-        if (!this.tableEl?.isVisualLastRowSync)
-            return false;
-        const fieldName = typeof col.field === 'string' ? col.field : col.name;
-        return this.tableEl.isVisualLastRowSync(this.rowKey, fieldName);
-    }
-    // selectable td는 column 정보가 없으므로 빈 field로 평가한다.
-    // 해당 위치는 rowspan을 등록할 수 없으므로 spanRegistry에 매칭이 없고,
-    // 결과적으로 "내 row 자체가 시각적 마지막인지"가 판정된다.
-    isVisualLastRowForSelfRow() {
-        if (!this.tableEl?.isVisualLastRowSync)
-            return false;
-        return this.tableEl.isVisualLastRowSync(this.rowKey, '');
-    }
     isVisualLastRowBeforeSeparator(col) {
         if (!this.tableEl?.isVisualLastRowBeforeSeparatorSync)
             return false;
@@ -656,12 +649,13 @@ const SdTr = class {
         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 rowLayoutY = effectiveDense ? sdTable_config.TABLE_BODY_LAYOUT.dense : sdTable_config.TABLE_BODY_LAYOUT.default;
+        const rowPaddingX = this._dense && isUseFrameRow ? sdTable_config.TABLE_BODY_LAYOUT.paddingX : sdTable_config.TABLE_BODY_LAYOUT.paddingX;
         const rowStyle = {
             '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-height': `${rowLayoutY.height}px`,
+            '--table-body-padding-y': `${rowLayoutY.paddingY}px`,
+            '--table-body-padding-x': `${rowPaddingX}px`,
             '--table-body-font-family': sdTable_config.TABLE_BODY_TYPOGRAPHY.fontFamily,
             '--table-body-font-weight': sdTable_config.TABLE_BODY_TYPOGRAPHY.fontWeight,
             '--table-body-font-size': `${sdTable_config.TABLE_BODY_TYPOGRAPHY.fontSize}px`,
@@ -679,7 +673,6 @@ const SdTr = class {
         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,
@@ -687,19 +680,19 @@ const SdTr = class {
             }, 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 fieldName = typeof col.field === 'string' ? col.field : col.name;
             const span = this.getSpanFor(col);
             const sdCellClass = this.getCellClassFor(col);
             return (index.h("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, 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),
                     ...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)))));
+                }, style: { ...this.getStickyStyle(idx), ...this.getFramePaddingStyle(fieldName) } }, index.h("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, index.h("span", null, this.getCellValue(col)))));
         }), middleCols.map((col, relativeIdx) => {
             const actualColIdx = stickyLeftCount + relativeIdx;
             if (this.isCovered(actualColIdx))
@@ -710,11 +703,10 @@ const SdTr = class {
             return (index.h("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, 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),
                     ...this.expandCellClass(sdCellClass),
-                }, style: this.getStickyStyle(actualColIdx) }, index.h("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, index.h("span", null, this.getCellValue(col)))));
+                }, style: { ...this.getStickyStyle(actualColIdx), ...this.getFramePaddingStyle(fieldName) } }, 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;
             if (this.isCovered(actualColIdx))
@@ -725,14 +717,13 @@ const SdTr = class {
             return (index.h("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, 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),
                     ...this.expandCellClass(sdCellClass),
-                }, style: this.getStickyStyle(actualColIdx) }, index.h("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, index.h("span", null, this.getCellValue(col)))));
+                }, style: { ...this.getStickyStyle(actualColIdx), ...this.getFramePaddingStyle(fieldName) } }, index.h("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, index.h("span", null, this.getCellValue(col)))));
         }))));
     }
 };

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

@@ -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: 'c77807f72410fb9c96a94e06fa9bb953ef934b4d', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, index.h("div", { key: 'dfffd8eada595286469c17ed549d60539d9b3ca6', 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 !== '',
             }, style: {
                 '--sd-floating-bg': popoverTokens.popover.bg,
-            } }, index.h("i", { key: '0852ebe804a7e305383f58dae7e0088f2456f53a', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, index.h(tooltipArrow.TooltipArrow, { key: 'c470c8ccebdb920b1c14940dffe11ad619560fb7' })), index.h("div", { key: 'fcca2e3bc61cd64110e86da4ee483dc5b1101b7c', class: "sd-floating-menu__content" }, this.menuTitle && index.h("div", { key: 'fad331bcd9c73e72ed013826db69badd8b7a069f', class: "sd-floating-menu__title" }, this.menuTitle), messages.length > 0 && (index.h("div", { key: 'c83d0be758758fc720d1c3d00aaa8f0cb865cf12', class: "sd-floating-menu__messages" }, messages.map((message, i) => (index.h("div", { key: `msg-${i}` }, message))))), hasFooter && (index.h("div", { key: '821a434f478d8aee61e81026ccc37f75579e290e', 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: '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 && (index.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 && (index.h("sd-ghost-button", { key: 'a8031ecc0aa0721adab17031019a079bc2bdce88', 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

@@ -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

@@ -227,7 +227,7 @@ const SdPortal = class {
         this.close.emit();
     }
     render() {
-        return index.h("slot", { key: '8b728e4a9a97cb1c4dbdaf8b6a6d85b37fc07af7' });
+        return index.h("slot", { key: '1f46253fe0f70fda84643e8d3025c1fd47090f5c' });
     }
     static get watchers() { return {
         "open": [{

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

@@ -178,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: '0eef3b536855ef3883628ce92a5dcb2846976d86', 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

@@ -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

@@ -79,7 +79,7 @@ const SdSelectListItem = 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: '8382966892edc2a46602733400aa579d0caa3128', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
+        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,
@@ -89,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: '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 })), index.h("span", { key: '0ce20554fb96ad650104a98d779f3ff64fabe381', class: "sd-select-list-item__label" }, this.option.label), this.countInfo && (index.h("span", { key: '4d2d8f5bd63373906544882ff5852134e3ecd4d3', 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();
@@ -142,15 +142,15 @@ const SdSelectListItemSearch = class {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (index.h("div", { key: '6872376ea0f47c256273f751fad367f2c49a9160', 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: 'f6c872e0252b6d7ba81f49938a4f5a647f0fb486', class: "sd-select-list-item-search__inner" }, index.h("sd-icon", { key: '49f10ed222e855ef6f0f5f12a65a74e1fec95bb5', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), index.h("input", { key: '76d88aa4ce7eee598db2709d2d5442465b1798cb', 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: 'e94d1661c6ed26754d4ee7e186808ebd9f057ec9', 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: 'ad89b3421ec345f47c8d67d78f20cae86869d4c1', name: "close", size: 12, color: "#888888" })))));
+            }, 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();

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

@@ -265,15 +265,15 @@ const SdSelect = class {
                 this.closeDropdown();
             },
         };
-        return (index.h("sd-field", { key: '668df27ea03b5c2479f89649c494375bacd762ec', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
+        return (index.h("sd-field", { key: 'c433e21047632ae1e7901e11f6f9d83070f8d83c', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
                 this.hovered = true;
             }, onMouseLeave: () => {
                 this.hovered = false;
-            } }, index.h("div", { key: '7d391d2c0719c165e9d19f5fdc34d39c374401e9', class: "sd-select", ref: el => {
+            } }, index.h("div", { key: 'f04f2f331c27745035c35d96d5262398065589a8', class: "sd-select", ref: el => {
                 this.triggerRef = el;
-            } }, index.h("sd-select-trigger", { key: 'b09a0f9dcb0071b79a21c8184deb7d07ba54185f', ref: el => {
+            } }, index.h("sd-select-trigger", { key: 'b66e83ff248618c815b155f27445f3da9e91361b', ref: el => {
                 this.triggerComponentRef = el;
-            }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '2ae67c5e98c66c2a74ba96f4602ea14d53dd0177', ...portalProps }, index.h("sd-select-listbox", { key: '97ee517fa777abd4926f8105fd046e39dfeeb5ff', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+            }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: 'bd5b46d8e4849d235e39a9d9cfc549fdbe260076', ...portalProps }, index.h("sd-select-listbox", { key: '81266da14ee4e59b4cedd4b364c18fea4d3c4f7f', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
     static get watchers() { return {
         "isOpen": [{
@@ -637,9 +637,9 @@ const SdSelectListbox = class {
             '--listbox-max-height': this.maxHeight ?? '260px',
             '--listbox-radius': `${sdSelect_config.LIST_BOX_LAYOUT.radius}px`,
         };
-        return (index.h("div", { key: '8c9b1a4471bf4e535c5f156d087e1b9be76ad903', class: "sd-select-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-list-item-search", { key: '4cc596a1ac21c9b258d5db07ecb15d566179d743', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: '977e15c7987ca387cf30783741f99b322150627b', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (index.h("div", { key: '4173255a866459bf0aeb98d517263d12f1c39fa5', class: "sd-select-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-list-item-search", { key: '79e7d48d7234ebfd32d3cd242822dfa93a73c151', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: '22981c1e049d0d526af06bb5b563de5130c14477', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
-            } }, this.showSelectAll && (index.h("sd-select-list-item", { key: 'dada5a6662b2d3fa63ed11ab1c82561d5e2d2400', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (index.h("div", { class: "sd-select-listbox__empty" }, sdSelect_config.EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (index.h("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
+            } }, this.showSelectAll && (index.h("sd-select-list-item", { key: '7acd37c5663bb101d6853cbd6629a78d402d6cde', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (index.h("div", { class: "sd-select-listbox__empty" }, sdSelect_config.EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (index.h("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
     }
     static get watchers() { return {
         "searchKeyword": [{
@@ -699,7 +699,7 @@ const SdSelectTrigger = class {
                 ? sdSelect_config.SELECT_COLORS.icon.disabled
                 : sdSelect_config.SELECT_COLORS.icon.default,
         };
-        return (index.h("div", { key: '67cb0ffaf0197a3ad12c402810317801ce69d4a1', ref: el => {
+        return (index.h("div", { key: '6694f35a396f368d5df9860db30d817beddb8bec', ref: el => {
                 this.triggerEl = el;
             }, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
                 'sd-select-trigger': true,
@@ -710,7 +710,7 @@ const SdSelectTrigger = class {
                     e.preventDefault();
                     this.handleClick();
                 }
-            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("div", { key: '4c28c852054fd7b09e5c45c9eb13882540f66553', class: "sd-select-trigger__content" }, index.h("span", { key: 'df415c9ac8d00a58e5539c8c655f12ebd49208a4', class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택')), index.h("sd-icon", { key: '429008e1edaf778e8a85f945a681cd675f2489b7', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("div", { key: 'd8ff247ca362a8fc3677d9803261343a1e891298', class: "sd-select-trigger__content" }, index.h("span", { key: 'cd81a7c7c135372aad80fa9391b160337632643c', class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택')), index.h("sd-icon", { key: '838c12e2a9ce06036eee766ffd2f88f3215b8420', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
                 'sd-select-trigger__icon': true,
                 'sd-select-trigger__icon--open': this.isOpen,
             } }))));

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

@@ -102,7 +102,7 @@ const SdSwitch = class {
             '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
             '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
         };
-        return (index.h("label", { key: 'a37c1387905456007de46a6050616b025ad06b37', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, index.h("input", { key: '5fcc9f72e177956e015e4cb009936edc60c4c3ec', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), index.h("div", { key: 'bf1fa22a94b2b245a2ddf805df4cd1c204524710', class: "sd-switch__track" }, index.h("div", { key: '11dafcd812c560acb7a63f7267f40f8ed67da95b', class: "sd-switch__knob" })), this.label && index.h("span", { key: '6609d2e33e82e843ffd5bbb2d2010de3e299f081', class: "sd-switch__label" }, this.label)));
+        return (index.h("label", { key: 'ebb195a1bb93ae476b4bf3e697623809d626eed6', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, index.h("input", { key: 'a6de6298d35c54ad83dc6285b90e67c8d3564d15', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), index.h("div", { key: '7881f46be572edcfc82888564a7f85ad4207dd8e', class: "sd-switch__track" }, index.h("div", { key: 'c08c9d5894a6f9ddf3ecdaaa9253628478479043', class: "sd-switch__knob" })), this.label && index.h("span", { key: '4e01b185502829d8fb647d3eafaaf6565489b2f3', class: "sd-switch__label" }, this.label)));
     }
 };
 SdSwitch.style = sdSwitchCss();

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

@@ -2,8 +2,8 @@
 
 var index = require('./index-Cw-78mnC.js');
 var constants = require('./constants-DJRV1upE.js');
-var sdTable_config = require('./sd-table.config-BIpldZtw.js');
-require('./component.table-CMqGfEui.js');
+var sdTable_config = require('./sd-table.config-B7psrvV4.js');
+require('./component.table-qOFez3z3.js');
 require('./system-VmZRYp6V.js');
 
 let urlAlphabet =
@@ -58,7 +58,9 @@ const SdTable = class {
     get effectiveRowHeight() {
         if (this.rowHeight != null)
             return this.rowHeight;
-        return this.dense ? Number(sdTable_config.TABLE_BODY_LAYOUT.dense.height) : Number(sdTable_config.TABLE_BODY_LAYOUT.default.height);
+        return this.dense
+            ? Number(sdTable_config.TABLE_BODY_LAYOUT.dense.height)
+            : Number(sdTable_config.TABLE_BODY_LAYOUT.default.height);
     }
     virtualBuffer = 5;
     virtualEndThreshold = 10;
@@ -252,7 +254,6 @@ const SdTable = class {
         el.unregisterSpanSync = this.unregisterSpanSync.bind(this);
         el.getSpanSync = this.getSpanSync.bind(this);
         el.isCoveredSync = this.isCoveredSync.bind(this);
-        el.isVisualLastRowSync = this.isVisualLastRowSync.bind(this);
         el.registerSeparatorSync = this.registerSeparatorSync.bind(this);
         el.unregisterSeparatorSync = this.unregisterSeparatorSync.bind(this);
         el.isVisualLastRowBeforeSeparatorSync = this.isVisualLastRowBeforeSeparatorSync.bind(this);
@@ -263,6 +264,7 @@ const SdTable = class {
         el.registerUseFrameSync = this.registerUseFrameSync.bind(this);
         el.unregisterUseFrameSync = this.unregisterUseFrameSync.bind(this);
         el.hasUseFrameInRowSync = this.hasUseFrameInRowSync.bind(this);
+        el.isCellUseFrameSync = this.isCellUseFrameSync.bind(this);
         if (Array.isArray(this.rows)) {
             this.rowCount = this.rows.length;
             this.pushRowsToChildren(this.rows);
@@ -340,8 +342,15 @@ const SdTable = class {
             }
         });
         this.noDataContentResizeObserver.observe(target);
-        const measured = Math.ceil(target.scrollHeight);
-        this.noDataBodyHeight = Math.max(60, measured);
+        index.readTask(() => {
+            if (!this.noDataContentEl)
+                return;
+            const measured = Math.ceil(this.noDataContentEl.scrollHeight);
+            const next = Math.max(60, measured);
+            if (next !== this.noDataBodyHeight) {
+                this.noDataBodyHeight = next;
+            }
+        });
     }
     // light DOM(manual mode 자식)과 shadow DOM(autoThead/autoTbody fallback) 양쪽 모두에서 자식을 찾는다.
     queryChildEl(selector) {
@@ -465,6 +474,9 @@ const SdTable = class {
         const fields = this.useFrameRegistry.get(rowKey);
         return fields != null && fields.size > 0;
     }
+    isCellUseFrameSync(rowKey, field) {
+        return this.useFrameRegistry.get(rowKey)?.has(field) ?? false;
+    }
     isRowSelectedSync(row) {
         return Array.from(this.innerSelected).some(r => r[this.rowKey ?? 'id'] === row[this.rowKey ?? 'id']);
     }
@@ -736,7 +748,7 @@ const SdTable = class {
         return false;
     }
     // rowspan을 반영한 셀의 시각적 하단 행 인덱스를 반환한다.
-    // isVisualLastRowSync·isVisualLastRowBeforeSeparatorSync 공통 헬퍼.
+    // isVisualLastRowBeforeSeparatorSync 헬퍼.
     resolveVisualBottom(rowKey, field) {
         const myRowIdx = this.resolveRowIndex(rowKey);
         if (myRowIdx == null)
@@ -745,20 +757,6 @@ const SdTable = class {
         const rs = Math.max(1, span?.rowspan ?? 1);
         return myRowIdx + rs - 1;
     }
-    // 셀의 시각적 하단이 테이블(또는 현재 페이지)의 마지막 행인지 판정.
-    // 마지막 행에 border-bottom: none을 적용하기 위함.
-    isVisualLastRowSync(rowKey, field) {
-        if (this.rowCount <= 0)
-            return false;
-        const visualBottom = this.resolveVisualBottom(rowKey, field);
-        if (visualBottom == null)
-            return false;
-        const pageInfo = this.getPaginationInfoSync();
-        const lastVisibleIdx = pageInfo
-            ? Math.min(pageInfo.endIndex - 1, this.rowCount - 1)
-            : this.rowCount - 1;
-        return visualBottom === lastVisibleIdx;
-    }
     registerSeparatorSync(prevRowKey) {
         const idx = this.resolveRowIndex(prevRowKey);
         if (idx != null)
@@ -875,25 +873,25 @@ const SdTable = class {
             '--table-body-line-height': `${sdTable_config.TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
             '--table-body-text-decoration': sdTable_config.TABLE_BODY_TYPOGRAPHY.textDecoration,
         };
-        return (index.h(index.Host, { key: 'f7d92943fcb354f69d99c1e4fd37749cc06185c7', style: hostStyle }, index.h("div", { key: '53d6ac0eedc2c2a56c05bf5a751be43bc18f9fe7', class: "sd-table__container", style: {
+        return (index.h(index.Host, { key: '2b7c1eaf862c45c73751af6035a022e8ce0314b4', style: hostStyle }, index.h("div", { key: '35851e539eef8ff69ff03bd31f5d55d95eb8bf7a', class: "sd-table__container", style: {
                 '--table-width': this.width,
                 '--table-height': effectiveTableHeight,
                 '--table-container-height': `calc(${effectiveTableHeight} - ${paginationHeight}px)`,
-            } }, index.h("div", { key: 'b85980b8307b2a50ee1554262d025b58bad42e87', class: {
+            } }, index.h("div", { key: 'e3bf5576fd1b1ee9ffab5d240de904204f4288d5', class: {
                 'sd-table__wrapper': true,
                 'sd-table__wrapper--radius-use-top': this.radius === 'useTop',
-            } }, index.h("div", { key: 'acf9816ceaaea06b807056606d684befebe9dcd0', class: {
+            } }, index.h("div", { key: 'a67ebcb802a3ed443cca1fc33a00787642e08e84', class: {
                 'sd-table__scroll-container': true,
                 'sd-table__scroll-container--loading': this.isLoading,
                 'sd-table__scroll-container--no-data': isNoData,
-            } }, this.isLoading && (index.h("div", { key: '8a1a18cbf500a8e9ad519438a59e084186d9f339', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, index.h("sd-circle-progress", { key: '443ffcfb06edbae8ac94be7e8e5a94c1e2b68588', indeterminate: true }))), isNoData && (index.h(index.h.Fragment, null, index.h("div", { key: '3aefe27935a816df9658ec89adf261d11c0e8e77', class: "sd-table__no-data-header-overlay" }), index.h("div", { key: 'db89a7d1cbbf041bdd30be9e0a205147073891e2', class: "sd-table__no-data" }, index.h("div", { key: 'a9bf47e80db21c30ffa651b03b203e5e205134c9', class: "sd-table__no-data-content", ref: el => {
+            } }, this.isLoading && (index.h("div", { key: '2cdaff94dab50598c05364930dd3e763a6f2f79a', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, index.h("sd-circle-progress", { key: '49211d7555a38996d3fd9cfce0df50bb626fa1d6', indeterminate: true }))), isNoData && (index.h(index.h.Fragment, null, index.h("div", { key: '3da9d42ecedbdc63858a06040f0e22d265a8183b', class: "sd-table__no-data-header-overlay" }), index.h("div", { key: '20b5d8be682572a4ddbce21b6cd265894d014499', class: "sd-table__no-data" }, index.h("div", { key: 'a024fa084f4a137a70fe176cee6918b4f701fd42', class: "sd-table__no-data-content", ref: el => {
                 this.noDataContentEl = el;
                 if (el)
                     this.syncNoDataContentObserver();
-            } }, index.h("slot", { key: '20f0c0b43534ef344864bf2450abb4c2a8fb704b', name: "no-data" }, index.h("span", { key: 'a19688e4da7961e7c828694124819c4e60a6700f' }, this.resolvedNoDataLabel)))))), index.h("table", { key: '2b03aa5c5d59e0ac85051f90a022b59b8dbb871a', class: this.tableClasses }, this.autoThead ? (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-thead", { rows: this.rows ?? [] }))) : (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
+            } }, index.h("slot", { key: '9603eefa63fd5bc05dfa132c6be2302497d4c228', name: "no-data" }, index.h("span", { key: '0dad4e143d8251e375f748d1e5e1a77909fab164' }, this.resolvedNoDataLabel)))))), index.h("table", { key: '83325a8970f18bb9cf7a78dc665d16a24edc18da', class: this.tableClasses }, this.autoThead ? (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-thead", { rows: this.rows ?? [] }))) : (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
             this.pagination.rowsPerPage > 0 &&
             this.rowCount > 0 &&
-            !this.useVirtualScroll && (index.h("div", { key: 'dc4a0132898490ef7e87e26a75fca8e3b2056a49', class: "sd-table__pagination" }, index.h("sd-pagination", { key: '9030b0965e8d2c1a54fce07cfc4067f49edb2375', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (index.h("sd-select", { key: '0d95ba3138da081d6c15202748ff3db1e23def01', value: this.useInternalPagination
+            !this.useVirtualScroll && (index.h("div", { key: '935b0f916cbc1de29a7f6b3805a5a3c25eaba467', class: "sd-table__pagination" }, index.h("sd-pagination", { key: '7faad5d0b2efe652a9ed989910551aa8bc5592ec', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (index.h("sd-select", { key: 'd514c41459a60ac47ffcd476a635c47386232c50', value: this.useInternalPagination
                 ? this.innerRowsPerPage
                 : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
                 if (!this.isRowsPerPageValue(e.detail))

package/dist/cjs/{sd-table.config-BIpldZtw.js → sd-table.config-B7psrvV4.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var component_table = require('./component.table-CMqGfEui.js');
+var component_table = require('./component.table-qOFez3z3.js');
 var system = require('./system-VmZRYp6V.js');
 
 // ── Header Tokens ──
@@ -33,7 +33,9 @@ const TABLE_BODY_LAYOUT = {
         height: component_table.tableTokens.table.body.dense.height,
         paddingY: component_table.tableTokens.table.body.dense.paddingY,
     },
-    paddingX: component_table.tableTokens.table.body.paddingX};
+    paddingX: component_table.tableTokens.table.body.paddingX,
+    framePadding: component_table.tableTokens.table.body.frame.padding,
+};
 const TABLE_BODY_TYPOGRAPHY = {
     fontFamily: component_table.tableTokens.table.body.typography.fontFamily,
     fontWeight: component_table.tableTokens.table.body.typography.fontWeight,

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

@@ -188,7 +188,7 @@ const SdTabs = class {
         };
     }
     render() {
-        return (index.h("div", { key: 'dd4377850ef052d22b6eb790b7766a3521a41c1c', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index$1) => {
+        return (index.h("div", { key: '880f1aa80c29f2d578ffe2d5e5e5e0c008c898d3', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index$1) => {
             const badgeName = this.getBadgeName(tab);
             return (index.h("div", { key: `tab-${index$1}`, role: "tab", tabindex: 0, "aria-selected": tab.value === this.value ? 'true' : 'false', class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab), onKeyDown: e => {
                     if (e.key === 'Enter' || e.key === ' ') {

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

@@ -207,7 +207,7 @@ const SdTag = class {
     render() {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (index.h("span", { key: 'bcf16350c162da2907ddf4ac53924d016a2457dd', class: "sd-tag", style: {
+        return (index.h("span", { key: '57f3c3f9ad53059fabff205cb44ffa3d1da9a711', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -217,7 +217,7 @@ const SdTag = class {
                 '--sd-tag-font-weight': config.fontWeight,
                 '--sd-tag-line-height': config.lineHeight,
                 '--sd-tag-radius': config.radius,
-            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, index.h("span", { key: '248f9d8df1ff10af3c533580203cac1f816d8000', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, index.h("span", { key: '3360f36d18f073cd24699b6b8db2e731fda351ac', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
 };
 SdTag.style = sdTagCss();