@sellmate/design-system 1.2.0 → 1.4.0

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

@@ -1,7 +1,7 @@
 import { h, Host, readTask, forceUpdate, } from "@stencil/core";
 import { nanoid } from "nanoid";
 import { TABLE_ID_ATTR, } from "./constants";
-import { TABLE_RADIUS, TABLE_BORDER, TABLE_BODY_TYPOGRAPHY, TABLE_BODY_LAYOUT } from "./sd-table.config";
+import { TABLE_RADIUS, TABLE_BORDER, TABLE_BODY_TYPOGRAPHY, TABLE_BODY_LAYOUT, } from "./sd-table.config";
 export class SdTable {
     static DEFAULT_NO_DATA_LABEL = '데이터가 없습니다.';
     el;
@@ -31,7 +31,9 @@ export class SdTable {
     get effectiveRowHeight() {
         if (this.rowHeight != null)
             return this.rowHeight;
-        return this.dense ? Number(TABLE_BODY_LAYOUT.dense.height) : Number(TABLE_BODY_LAYOUT.default.height);
+        return this.dense
+            ? Number(TABLE_BODY_LAYOUT.dense.height)
+            : Number(TABLE_BODY_LAYOUT.default.height);
     }
     virtualBuffer = 5;
     virtualEndThreshold = 10;
@@ -225,7 +227,6 @@ export class SdTable {
         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);
@@ -236,6 +237,7 @@ export class SdTable {
         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);
@@ -313,8 +315,15 @@ export class SdTable {
             }
         });
         this.noDataContentResizeObserver.observe(target);
-        const measured = Math.ceil(target.scrollHeight);
-        this.noDataBodyHeight = Math.max(60, measured);
+        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) {
@@ -438,6 +447,9 @@ export class SdTable {
         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']);
     }
@@ -709,7 +721,7 @@ export class SdTable {
         return false;
     }
     // rowspan을 반영한 셀의 시각적 하단 행 인덱스를 반환한다.
-    // isVisualLastRowSync·isVisualLastRowBeforeSeparatorSync 공통 헬퍼.
+    // isVisualLastRowBeforeSeparatorSync 헬퍼.
     resolveVisualBottom(rowKey, field) {
         const myRowIdx = this.resolveRowIndex(rowKey);
         if (myRowIdx == null)
@@ -718,20 +730,6 @@ export class SdTable {
         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)
@@ -848,25 +846,25 @@ export class SdTable {
             '--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
             '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
         };
-        return (h(Host, { key: 'f7d92943fcb354f69d99c1e4fd37749cc06185c7', style: hostStyle }, h("div", { key: '53d6ac0eedc2c2a56c05bf5a751be43bc18f9fe7', class: "sd-table__container", style: {
+        return (h(Host, { key: '2b7c1eaf862c45c73751af6035a022e8ce0314b4', style: hostStyle }, h("div", { key: '35851e539eef8ff69ff03bd31f5d55d95eb8bf7a', class: "sd-table__container", style: {
                 '--table-width': this.width,
                 '--table-height': effectiveTableHeight,
                 '--table-container-height': `calc(${effectiveTableHeight} - ${paginationHeight}px)`,
-            } }, h("div", { key: 'b85980b8307b2a50ee1554262d025b58bad42e87', class: {
+            } }, h("div", { key: 'e3bf5576fd1b1ee9ffab5d240de904204f4288d5', class: {
                 'sd-table__wrapper': true,
                 'sd-table__wrapper--radius-use-top': this.radius === 'useTop',
-            } }, h("div", { key: 'acf9816ceaaea06b807056606d684befebe9dcd0', class: {
+            } }, 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 && (h("div", { key: '8a1a18cbf500a8e9ad519438a59e084186d9f339', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '443ffcfb06edbae8ac94be7e8e5a94c1e2b68588', indeterminate: true }))), isNoData && (h(h.Fragment, null, h("div", { key: '3aefe27935a816df9658ec89adf261d11c0e8e77', class: "sd-table__no-data-header-overlay" }), h("div", { key: 'db89a7d1cbbf041bdd30be9e0a205147073891e2', class: "sd-table__no-data" }, h("div", { key: 'a9bf47e80db21c30ffa651b03b203e5e205134c9', class: "sd-table__no-data-content", ref: el => {
+            } }, this.isLoading && (h("div", { key: '2cdaff94dab50598c05364930dd3e763a6f2f79a', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '49211d7555a38996d3fd9cfce0df50bb626fa1d6', indeterminate: true }))), isNoData && (h(h.Fragment, null, h("div", { key: '3da9d42ecedbdc63858a06040f0e22d265a8183b', class: "sd-table__no-data-header-overlay" }), h("div", { key: '20b5d8be682572a4ddbce21b6cd265894d014499', class: "sd-table__no-data" }, h("div", { key: 'a024fa084f4a137a70fe176cee6918b4f701fd42', class: "sd-table__no-data-content", ref: el => {
                 this.noDataContentEl = el;
                 if (el)
                     this.syncNoDataContentObserver();
-            } }, h("slot", { key: '20f0c0b43534ef344864bf2450abb4c2a8fb704b', name: "no-data" }, h("span", { key: 'a19688e4da7961e7c828694124819c4e60a6700f' }, this.resolvedNoDataLabel)))))), h("table", { key: '2b03aa5c5d59e0ac85051f90a022b59b8dbb871a', class: this.tableClasses }, this.autoThead ? (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, h("sd-thead", { rows: this.rows ?? [] }))) : (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
+            } }, h("slot", { key: '9603eefa63fd5bc05dfa132c6be2302497d4c228', name: "no-data" }, h("span", { key: '0dad4e143d8251e375f748d1e5e1a77909fab164' }, this.resolvedNoDataLabel)))))), h("table", { key: '83325a8970f18bb9cf7a78dc665d16a24edc18da', class: this.tableClasses }, this.autoThead ? (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, h("sd-thead", { rows: this.rows ?? [] }))) : (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
             this.pagination.rowsPerPage > 0 &&
             this.rowCount > 0 &&
-            !this.useVirtualScroll && (h("div", { key: 'dc4a0132898490ef7e87e26a75fca8e3b2056a49', class: "sd-table__pagination" }, 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 && (h("sd-select", { key: '0d95ba3138da081d6c15202748ff3db1e23def01', value: this.useInternalPagination
+            !this.useVirtualScroll && (h("div", { key: '935b0f916cbc1de29a7f6b3805a5a3c25eaba467', class: "sd-table__pagination" }, 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 && (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/collection/components/sd-table/sd-tbody/sd-tbody.js

@@ -45,9 +45,9 @@ export class SdTbody {
         }
     }
     render() {
-        return (h(Host, { key: '5b55bfd73916ff1402329375de1e1fc2a7629cbd', slot: `${this.tableId}-body` }, h("tbody", { key: 'a09a532d1510166a36d592c2e59ec1765803bbbe', class: { tbody: true } }, [
+        return (h(Host, { key: 'bdb686445ce324c6254891a385d6175c8cac06df', slot: `${this.tableId}-body` }, h("tbody", { key: '21a7772f0d43a358d9ae17459f0ff296324bfd82', class: { tbody: true } }, [
             this.topSpacerHeight > 0 && (h("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
-            h("slot", { key: 'da3827a9c2fe7a74ec3cb3eb8dee3ab039ea0535' }),
+            h("slot", { key: 'e38d8fe5d67a91d3fa5a25be98195da104660005' }),
             this.bottomSpacerHeight > 0 && (h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
         ])));
     }

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

@@ -19,11 +19,13 @@ export class SdTd {
         this.syncSlotName();
         this.syncSpanRegistration();
         this.syncCellClassRegistration(oldField);
+        this.syncUseFrameRegistration(oldField);
     }
     handleRowKeyChange(_newKey, oldKey) {
         this.syncSlotName();
         this.syncSpanRegistration();
         this.syncCellClassRegistration(undefined, oldKey);
+        this.syncUseFrameRegistration(undefined, oldKey);
     }
     handleSpanChange() {
         this.syncSpanRegistration();
@@ -34,15 +36,15 @@ export class SdTd {
     handleDividerChange() {
         this.syncCellClassRegistration();
     }
-    handleUseFieldChange() {
-        this.syncUseFieldRegistration();
+    handleUseFrameChange() {
+        this.syncUseFrameRegistration();
         this.requestParentTrUpdate();
     }
     componentWillLoad() {
         this.syncSlotName();
         this.syncSpanRegistration();
         this.syncCellClassRegistration();
-        this.syncUseFieldRegistration();
+        this.syncUseFrameRegistration();
         // slot 타이밍 엇갈림 대응: 부모 sd-tr forceUpdate로 슬롯 재매칭
         const parentTr = this.el.parentElement;
         if (parentTr?.tagName?.toLowerCase() === 'sd-tr') {
@@ -53,7 +55,7 @@ export class SdTd {
         this.syncSlotName();
         this.syncSpanRegistration();
         this.syncCellClassRegistration();
-        this.syncUseFieldRegistration();
+        this.syncUseFrameRegistration();
     }
     // React StrictMode에서는 disconnect/reconnect 사이클이 일어나면서
     // 동일 인스턴스의 componentWillLoad는 더 이상 호출되지 않는다.
@@ -61,7 +63,7 @@ export class SdTd {
     connectedCallback() {
         this.syncSpanRegistration();
         this.syncCellClassRegistration();
-        this.syncUseFieldRegistration();
+        this.syncUseFrameRegistration();
     }
     disconnectedCallback() {
         const table = this.findTable();
@@ -118,9 +120,16 @@ export class SdTd {
         table.registerCellClassSync(String(this.rowKey), this.field, combinedClass);
         this.requestParentTrUpdate();
     }
-    syncUseFieldRegistration() {
+    syncUseFrameRegistration(prevField, prevRowKey) {
         const table = this.findTable();
-        if (!table || this.field === '' || this.rowKey == null)
+        if (!table)
+            return;
+        const oldField = prevField ?? this.field;
+        const oldRowKey = prevRowKey ?? (this.rowKey != null ? String(this.rowKey) : undefined);
+        if (oldField !== '' && oldRowKey != null) {
+            table.unregisterUseFrameSync?.(oldRowKey, oldField);
+        }
+        if (this.field === '' || this.rowKey == null)
             return;
         if (this.useFrame) {
             table.registerUseFrameSync?.(String(this.rowKey), this.field);
@@ -141,7 +150,7 @@ export class SdTd {
         }
     }
     render() {
-        return (h(Host, { key: 'ececfaf265a550ee38c5c2cc2ddd2875352deb10', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: 'c4a43f9affc1938d882e63e91ac90d570efffa37' })));
+        return (h(Host, { key: '505b602b609050870e7e80df9157dbc50d0cb8c1', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: '9910f02d98ce5e115b2a380954dd0a994f9f1c12' })));
     }
     static get is() { return "sd-td"; }
     static get originalStyleUrls() {
@@ -357,7 +366,7 @@ export class SdTd {
                 "methodName": "handleDividerChange"
             }, {
                 "propName": "useFrame",
-                "methodName": "handleUseFieldChange"
+                "methodName": "handleUseFrameChange"
             }];
     }
 }

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

@@ -157,16 +157,16 @@ export class SdThead {
             '--table-border-color': TABLE_BORDER.color,
             '--table-border-width': `${TABLE_BORDER.width}px`,
         };
-        return (h(Host, { key: '424fa72b833a94bce945ae50e8445cbed0527025', slot: `${this.tableId}-head`, style: headStyle }, h("thead", { key: '1a5704d78992b553c5db5ba92bb3814de7c19898', class: {
+        return (h(Host, { key: 'c2852fc7d6fe9e8116fabbbcc140f4db8319bfdc', slot: `${this.tableId}-head`, style: headStyle }, h("thead", { key: '970cb1c96145326f38b79636a72982b0e9c81fa0', class: {
                 'thead': true,
                 'thead--sticky': this._stickyHeader,
-            } }, h("tr", { key: '1369ff7c99a5691bcd5fa54af4f7c02ff41dceb3', class: "tr" }, this._selectable && (h("th", { key: '72159c6f8ef28b0b93790e180cb9b12345727525', class: {
+            } }, h("tr", { key: '839fb6e9fd68ef10dea1f1d470a6b3e707475a8d', class: "tr" }, this._selectable && (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' } }, 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: {
+            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '6263984430b4aa53e6ac24fb0f6a6c05838a71d5', 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,

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

@@ -14,6 +14,9 @@ sd-tr * {
 .tr--no-hover:hover .td {
   background-color: white;
 }
+.tr--separator:hover .td {
+  background-color: var(--table-separator-color, #eeeeee);
+}
 
 .td {
   display: table-cell;
@@ -118,8 +121,9 @@ sd-tr * {
   background-color: white;
 }
 
-.td.td--last-row {
-  border-bottom: none;
+.tr--separator:hover .td.sticky-left,
+.tr--separator:hover .td.sticky-right {
+  background-color: var(--table-separator-color, #eeeeee);
 }
 
 .tr--separator .td--separator {

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

@@ -170,6 +170,13 @@ export class SdTr {
         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: `${TABLE_BODY_LAYOUT.framePadding}px` };
+    }
     expandCellClass(classStr) {
         if (classStr == null || classStr === '')
             return {};
@@ -178,20 +185,6 @@ export class SdTr {
             .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;
@@ -212,12 +205,13 @@ export class SdTr {
         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 rowLayoutY = effectiveDense ? TABLE_BODY_LAYOUT.dense : TABLE_BODY_LAYOUT.default;
+        const rowPaddingX = this._dense && isUseFrameRow ? TABLE_BODY_LAYOUT.paddingX : 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': `${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': TABLE_BODY_TYPOGRAPHY.fontFamily,
             '--table-body-font-weight': TABLE_BODY_TYPOGRAPHY.fontWeight,
             '--table-body-font-size': `${TABLE_BODY_TYPOGRAPHY.fontSize}px`,
@@ -235,7 +229,6 @@ export class SdTr {
         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,
@@ -243,19 +236,19 @@ export class SdTr {
             }, 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 fieldName = typeof col.field === 'string' ? col.field : col.name;
             const span = this.getSpanFor(col);
             const sdCellClass = this.getCellClassFor(col);
             return (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) }, h("slot", { name: `${this.tableId}-${typeof col.field === 'string' ? col.field : col.name}-${this.rowKey}` }, h("span", null, this.getCellValue(col)))));
+                }, style: { ...this.getStickyStyle(idx), ...this.getFramePaddingStyle(fieldName) } }, h("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, h("span", null, this.getCellValue(col)))));
         }), middleCols.map((col, relativeIdx) => {
             const actualColIdx = stickyLeftCount + relativeIdx;
             if (this.isCovered(actualColIdx))
@@ -266,11 +259,10 @@ export class SdTr {
             return (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) }, h("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, h("span", null, this.getCellValue(col)))));
+                }, style: { ...this.getStickyStyle(actualColIdx), ...this.getFramePaddingStyle(fieldName) } }, 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;
             if (this.isCovered(actualColIdx))
@@ -281,14 +273,13 @@ export class SdTr {
             return (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) }, h("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, h("span", null, this.getCellValue(col)))));
+                }, style: { ...this.getStickyStyle(actualColIdx), ...this.getFramePaddingStyle(fieldName) } }, h("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, h("span", null, this.getCellValue(col)))));
         }))));
     }
     static get is() { return "sd-tr"; }

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

@@ -67,7 +67,7 @@ export class SdTabs {
         };
     }
     render() {
-        return (h("div", { key: 'dd4377850ef052d22b6eb790b7766a3521a41c1c', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
+        return (h("div", { key: '880f1aa80c29f2d578ffe2d5e5e5e0c008c898d3', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
             const badgeName = this.getBadgeName(tab);
             return (h("div", { key: `tab-${index}`, 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/collection/components/sd-tag/sd-tag.js

@@ -25,7 +25,7 @@ export class SdTag {
     render() {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (h("span", { key: 'bcf16350c162da2907ddf4ac53924d016a2457dd', class: "sd-tag", style: {
+        return (h("span", { key: '57f3c3f9ad53059fabff205cb44ffa3d1da9a711', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -35,7 +35,7 @@ export class SdTag {
                 '--sd-tag-font-weight': config.fontWeight,
                 '--sd-tag-line-height': config.lineHeight,
                 '--sd-tag-radius': config.radius,
-            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, 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, h("span", { key: '3360f36d18f073cd24699b6b8db2e731fda351ac', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
     static get is() { return "sd-tag"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-text-link/sd-text-link.js

@@ -27,7 +27,7 @@ export class SdTextLink {
             '--sd-text-link-text-decoration': typo.textDecoration,
             ...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
         };
-        return (h("span", { key: '284a073ec6aca3ad91bffe084c3b84813df58772', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (h("span", { key: '11d2153cc91818c1214e21ffa14bd08249ad1116', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
             }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -35,13 +35,13 @@ export class SdTextLink {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, this.icon && (h("sd-icon", { key: '1e2021703a766769aa647f418fb4b287039d58a5', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: 'a25f207b8bf5bc2c221f0b370159b61ba2f27040', class: labelClassName }, this.label), this.useArrow && (h("span", { key: 'f273671ee796224bada0d2d27fc58ff893c433e7', class: "sd-text-link__arrow", style: {
+            } }, this.icon && (h("sd-icon", { key: '23972d53b4968c9bdef9b54dfa785e658ba117ef', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: '5e99a6c1151093929086ec4398b93d7db590d959', class: labelClassName }, this.label), this.useArrow && (h("span", { key: 'b814759278cefe229a5321556374438f281ce0f3', class: "sd-text-link__arrow", style: {
                 width: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 height: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-            } }, h("sd-icon", { key: '2e499bf0c1cd57d1ffb90999daa1c38d0cf43df8', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
+            } }, h("sd-icon", { key: 'dfe3286eaeef9a176f5ff1a69950713e2712a550', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
     }
     static get is() { return "sd-text-link"; }
     static get originalStyleUrls() {

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

@@ -105,7 +105,7 @@ export class SdTextarea {
             '--sd-system-size-field-sm-height': 'auto',
             '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
         };
-        return (h("sd-field", { key: '64595853405ae2a66231229516e93a74a4340ef0', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: 'b7cddedc733c83d4c50234559c02c5f220634008', class: "sd-textarea__content" }, h("textarea", { key: '2d1b852e6ba7b913901c07fce36ce30598f15e12', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
+        return (h("sd-field", { key: '404175c94949c2510082df905c53e97ab835369c', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: 'ca92dfe613b2c006ecc4021bb2f07a2e4b04239a', class: "sd-textarea__content" }, h("textarea", { key: 'a6d2bbdb9c88766182728cf3eb30ce7691fb048f', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
     }
     static get is() { return "sd-textarea"; }
     static get originalStyleUrls() {

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

@@ -17,12 +17,12 @@ export class SdToast {
         const linkColor = typeConfig.linkColor ?? typeConfig.content;
         const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
         const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
-        return (h("div", { key: 'edab2d1d8ac8222a988d38279f1a002281454f51', style: {
+        return (h("div", { key: 'db3ffaf51dc96c39c05558017f25929c679a59df', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
                 '--sd-toast-icon': iconColor,
                 '--sd-toast-link': linkColor,
-            } }, h("div", { key: '8dd98dd58cdf003ce031e5ae96b749a037333ce1', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '2b78cbc4fe96cc00d444fb49956da1fe245993ef', class: "sd-toast__icon" }, h("sd-icon", { key: '679852c9a19046ce1d2c9a0cdb4346f6e23c77fb', name: this.icon, size: iconSize, color: iconColor }))), h("div", { key: '2798bd2392e9fc3c4c0375d894572da13d3d7e25', class: "sd-toast__content" }, h("span", { key: '76ab798742baa63b21bda60867cbeb5aa20f7957', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '6eb61ca5737f9af06ad63cfcef671e46ecc8de47', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: '6c1ad7d494c7cc218b1058fec1ed3e42af0c83fc', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (h("sd-ghost-button", { key: '32dd9adcc951a3a852bf20540376bd4d7ced7526', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, h("div", { key: '92344f5bb95b0d4787591207f2e017d7dd177091', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '991db58b2cb019dd3a787e000e9d8813014bbb09', class: "sd-toast__icon" }, h("sd-icon", { key: '24d53cd77fdea82ec07663a8968493ec2b794751', name: this.icon, size: iconSize, color: iconColor }))), h("div", { key: '70cfad4ef389cca798be9baeac99bfc41efcc615', class: "sd-toast__content" }, h("span", { key: '5927023435b17dc25ee07630fc4ae4568aadd9b9', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '410c024fd81ebcc78175c1855a86f590566d1a81', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: 'd85287e7ef796a11f850a0ce5cde87f5881fa5c9', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (h("sd-ghost-button", { key: '55a6bf6457bd89254f6eb01072d46a0edbb8b510', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
     static get is() { return "sd-toast"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-toast-container/sd-toast-container.js

@@ -216,7 +216,7 @@ export class SdToastContainer {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (h("div", { key: '4cf4413f350c2a1adc475c567d874252b1786e91', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (h("div", { key: 'bc3c9591b6453eed7df462841e29784c29b3aeef', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

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

@@ -45,7 +45,7 @@ export class SdToggle {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (h("label", { key: '0b8273ed8f8efae70de32b92671bbd1353e877dc', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '2ec9909142463f8ba556ad885cb7f97bedad6b31', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (h("label", { key: 'b16577aa25863a9dc337314d9059328799c1cd1e', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '6130825b74df8a573f4e062671fd694508759e82', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
     static get is() { return "sd-toggle"; }
     static get originalStyleUrls() {

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

@@ -84,14 +84,14 @@ export class SdTooltip {
         const hasLabel = this.label !== undefined && this.label !== '';
         const divTrigger = trigger === 'hover' ? hoverTrigger : hasLabel ? {} : { onClick: toggleTooltip };
         const buttonClickTrigger = trigger === 'click' && hasLabel ? { onSdClick: toggleTooltip } : {};
-        return (h(Fragment, { key: 'cd01d5f5e9c1c542268d455d97b1bdfe1a2eef2c' }, h("div", { key: '2b883efa4f4ea16b2a544fc43059a139f68e32c1', class: `sd-tooltip-trigger ${this.sdClass !== undefined && this.sdClass !== '' ? this.sdClass : ''}`, ...divTrigger }, hasLabel ? (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-tooltip", ...buttonClickTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (h("sd-floating-portal", { key: '4d69c1582c3a2fab1fae2e29a4b41999d5dded95', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, h("div", { key: '8e94b33ba40231b26174b28a63d7748649f4d729', ref: el => (this.menuEl = el), class: {
+        return (h(Fragment, { key: 'ef33f9f183820d684f2805e40134a81f7149fc16' }, h("div", { key: 'dd931825c55b0ee748c7ef45f15be0d6de37ad23', class: `sd-tooltip-trigger ${this.sdClass !== undefined && this.sdClass !== '' ? this.sdClass : ''}`, ...divTrigger }, hasLabel ? (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-tooltip", ...buttonClickTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (h("sd-floating-portal", { key: '443dbbe8f0b9a66aaae9b8482a3f615d2d41e8ec', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, h("div", { key: '040bde0321b1fd35014db976aeaddc515d87c807', ref: el => (this.menuEl = el), class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${tooltipType}`]: true,
                 [`sd-floating-menu--${placement}`]: true,
             }, style: {
                 '--sd-floating-bg': typeConfig.bg,
                 '--sd-floating-content': typeConfig.content,
-            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, h("i", { key: '535deacc918ec41135ff1c1e24ea5b32b59a4b54', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: 'c2c70e6360e78f7287acd40a815c558610bf66fa' })), h("div", { key: '9569fbe5648df9c74e7d00b28f91fe8dfa6f6df3', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
+            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, h("i", { key: 'e802c09cc13ec3db29704197fa402588bf97d670', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: 'b698fbdba2cee74955f65ed7b04abeea8ccabee5' })), h("div", { key: '97e856c543a8cdb880daae9ed0e461f5fd0f2b44', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
     }
     static get is() { return "sd-tooltip"; }
     static get originalStyleUrls() {

package/dist/collection/index.js

@@ -8,5 +8,5 @@
  * to consume components of this package as outlined in the `README.md`.
  */
 export { sdToast } from './utils/toast';
-export { sdModal, _createSdModalRef, _attachSdModalWithRef, } from './utils/modal';
+export { sdModal, _createSdModalRef, _attachSdModalWithRef } from './utils/modal';
 export { sdLoading } from './utils/loading';

package/dist/components/p-BDVrZ5mV.js

@@ -0,0 +1 @@
+import{p as e,H as s,c as t,h as i,t as a}from"./p-BjkROjjt.js";import{n as d}from"./p-CCwNgVmC.js";import{d as o,D as l,a as r}from"./p-JlZdKw4C.js";import{d as n}from"./p-VuxN5d2D.js";import{d as h}from"./p-CETxX4-M.js";import{d as c}from"./p-CpgTSxf0.js";import{d as p}from"./p-CIUE4qr7.js";import{d as m}from"./p-D7nYP2a4.js";import{d as b}from"./p-BSfu4DO2.js";import{d as u}from"./p-DlREBZ-C.js";import{d as f}from"./p-Z5Vk33zf.js";const g=e(class e extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.update=t(this,"sdUpdate",7),this.viewChange=t(this,"sdViewChange",7)}static CLOSE_ANIMATION_DURATION=150;get el(){return this}value=null;size="sm";placeholder="YYYY-MM-DD";selectable;disabled=!1;width="";label="";labelWidth="";addonLabel="";addonAlign="start";hint="";errorMessage="";rules=[];error=!1;icon=void 0;labelTooltip="";labelTooltipProps=null;isOpen=!1;isAnimatingOut=!1;focused=!1;hovered=!1;update;viewChange;triggerRef;formField;closeAnimationTimer;name=d();watchIsOpen(e){this.focused=e}async sdValidate(){return this.formField?.sdValidate()}async sdReset(){return this.formField?.sdReset()}async sdResetValidate(){return this.formField?.sdResetValidation()}closeDropdown(){this.isOpen&&(this.isOpen=!1,this.isAnimatingOut=!0,this.closeAnimationTimer&&clearTimeout(this.closeAnimationTimer),this.closeAnimationTimer=setTimeout((()=>{this.isAnimatingOut=!1}),e.CLOSE_ANIMATION_DURATION))}handleTriggerClick=()=>{this.disabled||(this.isOpen?this.closeDropdown():(this.closeAnimationTimer&&clearTimeout(this.closeAnimationTimer),this.isAnimatingOut=!1,this.isOpen=!0))};handleSelect=e=>{e.stopPropagation(),this.closeDropdown(),this.value=e.detail;const s=this.value;requestAnimationFrame((()=>{this.update.emit(s)}))};handleViewChange=e=>{this.viewChange.emit(e.detail)};disconnectedCallback(){this.closeAnimationTimer&&clearTimeout(this.closeAnimationTimer)}render(){const e=r[this.size]??r.sm;return i("sd-field",{key:"825c845ea1ada63a9f21cfc43aad04a598325c13",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,size:this.size,icon:this.icon,labelTooltip:this.labelTooltip,labelTooltipProps:this.labelTooltipProps,ref:e=>this.formField=e,onMouseEnter:()=>this.hovered=!0,onMouseLeave:()=>this.hovered=!1,style:{"--sd-system-size-field-sm-height":`${e.height}px`,"--sd-system-radius-field-sm":`${e.radius}px`,"--sd-system-color-field-border-default":l.border.default,"--sd-system-color-field-border-focus":l.border.focus,"--sd-system-color-field-bg-default":l.bg.default}},i("div",{key:"b9dd1a8df29f340ad67331dbebd3ec71b79d128a",class:"sd-date-picker",ref:e=>{this.triggerRef=e}},i("sd-date-picker-trigger",{key:"b9bed57fa4a2b06b004ec5a1b723ed5af25fda19",displayText:this.value??"",placeholder:this.placeholder,disabled:this.disabled,size:this.size,onSdTriggerClick:this.handleTriggerClick})),(this.isOpen||this.isAnimatingOut)&&i("sd-portal",{key:"776e0ce183edd9c7903ce1a75208addc47c20408",open:this.isOpen,parentRef:this.triggerRef,onSdClose:()=>this.closeDropdown()},i("sd-calendar",{key:"f86b502f6b17ee9ff262c1a64e1b0e24defc1660",value:this.value,selectable:this.selectable,onSdUpdate:this.handleSelect,onSdViewChange:this.handleViewChange})))}static get watchers(){return{isOpen:[{watchIsOpen:0}]}}static get style(){return"sd-date-picker{display:inline-flex}sd-date-picker sd-portal{display:none}sd-date-picker .sd-date-picker{position:relative;width:100%;height:100%}"}},[512,"sd-date-picker",{value:[1025],size:[513],placeholder:[513],selectable:[16],disabled:[516],width:[8],label:[1],labelWidth:[8,"label-width"],addonLabel:[1,"addon-label"],addonAlign:[1,"addon-align"],hint:[1],errorMessage:[1,"error-message"],rules:[16],error:[1028],icon:[16],labelTooltip:[1,"label-tooltip"],labelTooltipProps:[16],name:[1],isOpen:[32],isAnimatingOut:[32],focused:[32],hovered:[32],sdValidate:[64],sdReset:[64],sdResetValidate:[64]},void 0,{isOpen:[{watchIsOpen:0}]}]);function k(){"undefined"!=typeof customElements&&["sd-date-picker","sd-button","sd-calendar","sd-date-picker-trigger","sd-field","sd-floating-portal","sd-ghost-button","sd-icon","sd-portal","sd-tooltip"].forEach((e=>{switch(e){case"sd-date-picker":customElements.get(a(e))||customElements.define(a(e),g);break;case"sd-button":customElements.get(a(e))||n();break;case"sd-calendar":customElements.get(a(e))||h();break;case"sd-date-picker-trigger":customElements.get(a(e))||o();break;case"sd-field":customElements.get(a(e))||c();break;case"sd-floating-portal":customElements.get(a(e))||p();break;case"sd-ghost-button":customElements.get(a(e))||m();break;case"sd-icon":customElements.get(a(e))||b();break;case"sd-portal":customElements.get(a(e))||u();break;case"sd-tooltip":customElements.get(a(e))||f()}}))}export{g as S,k as d}