@sellmate/design-system 1.5.0 → 1.6.0

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
 import { h, Host, } from "@stencil/core";
 import { TABLE_ID_ATTR, } from "../constants";
-import { resolveTableIconColor, resolveSortIconName, TABLE_HEADER_LAYOUT, TABLE_HEADER_TYPOGRAPHY, TABLE_HEADER_COLORS, TABLE_HEADER_RESIZING_BAR, TABLE_BORDER, } from "../sd-table.config";
+import { resolveTableIconColor, resolveSortIconName, TABLE_HEADER_LAYOUT, TABLE_HEADER_TYPOGRAPHY, TABLE_HEADER_COLORS, TABLE_HEADER_RESIZING_BAR, TABLE_BORDER, TABLE_SELECTABLE_COLUMN_WIDTH, } from "../sd-table.config";
 export class SdThead {
     el;
     columns;
@@ -96,7 +96,8 @@ export class SdThead {
         if (this.tableEl?.getStickyStyleSync) {
             return this.tableEl.getStickyStyleSync(colIdx);
         }
-        const leftOffset = this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) + (this._selectable ? 52 : 0);
+        const leftOffset = this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) +
+            (this._selectable ? TABLE_SELECTABLE_COLUMN_WIDTH : 0);
         const rightOffset = this.columnWidths
             .filter((_, i) => i >= this.visibleColumns.length - (this._stickyColumn.right || 0) && i > colIdx)
             .reduce((a, b) => a + b, 0);
@@ -157,16 +158,16 @@ export class SdThead {
             '--table-border-color': TABLE_BORDER.color,
             '--table-border-width': `${TABLE_BORDER.width}px`,
         };
-        return (h(Host, { key: '234ca55bb2507aef21df976066e5ce377c2e9e89', slot: `${this.tableId}-head`, style: headStyle }, h("thead", { key: 'fecd6b54f72a8643b663c3af1988eed60300d08d', class: {
+        return (h(Host, { key: '2b949f43561a2cd36b82de324d3d8c0d8a1d8431', slot: `${this.tableId}-head`, style: headStyle }, h("thead", { key: '45918bfb1dc44bb0f45a0f1646bf2276b1ca74ec', class: {
                 'thead': true,
                 'thead--sticky': this._stickyHeader,
-            } }, h("tr", { key: '21d56c50076d3340733b7fa0a8e569fec005e415', class: "tr" }, this._selectable && (h("th", { key: 'ace570ae2157ae63a21ec6ba60d8b8898dd0c33c', class: {
+            } }, h("tr", { key: '3802f86a730041ca405071b243a99c28e04558d2', class: "tr" }, this._selectable && (h("th", { key: 'd60e1323fca90516f38cedfa6fc8bf17840fad5d', 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: '4b30536f427b9985355c4e22b6b532a3033306c0', 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: '0c0b61405a8624cfc1d803f8ae8905d74d6c10f1', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), h("div", { key: 'b808a627e740a9c3a9f6f03e32cf90e598fd506f', class: "th__bar" }))), 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

@@ -41,11 +41,10 @@ sd-tr * {
 }
 .td--selected {
   position: relative;
-  width: 52px !important;
-  max-width: 52px !important;
-  min-width: 52px !important;
-  padding: 0 10px 0 24px;
-  text-align: left;
+  width: var(--table-selectable-width, 48px) !important;
+  max-width: var(--table-selectable-width, 48px) !important;
+  min-width: var(--table-selectable-width, 48px) !important;
+  text-align: center;
 }
 .td--selected sd-checkbox label {
   position: relative;
@@ -133,8 +132,8 @@ sd-tr * {
   border-bottom: none;
 }
 
-.td.td--before-separator {
-  border-bottom: none;
+.tr--separator--dense .td--separator {
+  height: var(--table-separator-dense-width, 4px);
 }
 
 .td--divider-left {

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

@@ -8,7 +8,7 @@ export class SdTr {
     stickyColumn;
     rowKey = '';
     row = {};
-    separator;
+    separator = null;
     tableId = '';
     columnWidths = [];
     isVisible = true;
@@ -20,8 +20,8 @@ export class SdTr {
     _scrolledRight = false;
     _dense = false;
     tableEl = null;
-    _prevRowKey = null;
     componentWillLoad() {
+        this.row = this.row ?? {};
         this.syncTableContext();
         this.columnWidths = this.columnWidths ?? [];
         this.resolveConfig();
@@ -30,20 +30,6 @@ export class SdTr {
     }
     componentDidLoad() {
         this.syncTableContext();
-        if (this.separator) {
-            const prev = this.el.previousElementSibling;
-            if (prev?.tagName?.toLowerCase() === 'sd-tr') {
-                const prevRowKey = prev.rowKey;
-                this._prevRowKey = prevRowKey;
-                this.tableEl?.registerSeparatorSync?.(prevRowKey);
-            }
-        }
-    }
-    disconnectedCallback() {
-        if (this._prevRowKey !== null) {
-            this.tableEl?.unregisterSeparatorSync?.(this._prevRowKey);
-            this._prevRowKey = null;
-        }
     }
     syncTableContext() {
         // sd-table이 shadow:true이므로 fallback content로 렌더되면 closest가 경계를 못 넘는다.
@@ -185,17 +171,6 @@ export class SdTr {
             .filter(Boolean)
             .map(c => [c, true]));
     }
-    isVisualLastRowBeforeSeparator(col) {
-        if (!this.tableEl?.isVisualLastRowBeforeSeparatorSync)
-            return false;
-        const fieldName = typeof col.field === 'string' ? col.field : col.name;
-        return this.tableEl.isVisualLastRowBeforeSeparatorSync(this.rowKey, fieldName);
-    }
-    isVisualLastRowBeforeSeparatorForSelfRow() {
-        if (!this.tableEl?.isVisualLastRowBeforeSeparatorSync)
-            return false;
-        return this.tableEl.isVisualLastRowBeforeSeparatorSync(this.rowKey, '');
-    }
     render() {
         const stickyLeftCount = this._stickyColumn.left || 0;
         const stickyRightCount = this._stickyColumn.right || 0;
@@ -221,15 +196,16 @@ export class SdTr {
             '--table-border-width': `${TABLE_BORDER.width}px`,
             '--table-separator-color': TABLE_SEPARATOR.color,
             '--table-separator-width': `${TABLE_SEPARATOR.width}px`,
+            '--table-separator-dense-width': `${TABLE_SEPARATOR.denseWidth}px`,
         };
-        if (this.separator) {
+        if (this.separator != null) {
             const totalCols = this.visibleColumns.length + (this._selectable ? 1 : 0);
-            return (h(Host, { style: rowStyle }, h("tr", { class: "tr tr--separator" }, h("td", { colSpan: totalCols, class: "td td--separator" }))));
+            const isDense = this.separator === 4;
+            return (h(Host, { style: rowStyle }, h("tr", { class: { 'tr': true, 'tr--separator': true, 'tr--separator--dense': isDense } }, h("td", { colSpan: totalCols, class: "td td--separator" }))));
         }
         return (h(Host, { style: rowStyle }, h("tr", { class: { 'tr': true, 'tr--no-hover': hasRowspan } }, this._selectable && (h("td", { class: {
                 'td': true,
                 'td--selected': true,
-                'td--before-separator': this.isVisualLastRowBeforeSeparatorForSelfRow(),
                 'sticky-left': true,
                 'sticky-left-edge': stickyLeftCount === 0,
                 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
@@ -242,7 +218,6 @@ export class SdTr {
             return (h("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
                     'td': true,
                     [`td--${col.align || 'left'}`]: true,
-                    'td--before-separator': this.isVisualLastRowBeforeSeparator(col),
                     'sticky-left': true,
                     'sticky-left-edge': idx === stickyLeftCount - 1,
                     'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
@@ -257,12 +232,14 @@ export class SdTr {
             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: true,
                     [`td--${col.align || 'left'}`]: true,
-                    'td--before-separator': this.isVisualLastRowBeforeSeparator(col),
                     [`${col.tdClass}`]: Boolean(col.tdClass),
                     ...this.expandCellClass(sdCellClass),
-                }, style: { ...this.getStickyStyle(actualColIdx), ...this.getFramePaddingStyle(fieldName) } }, 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))
@@ -273,13 +250,15 @@ export class SdTr {
             return (h("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
                     'td': true,
                     [`td--${col.align || 'left'}`]: true,
-                    '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), ...this.getFramePaddingStyle(fieldName) } }, 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"; }
@@ -408,11 +387,11 @@ export class SdTr {
                 "defaultValue": "{}"
             },
             "separator": {
-                "type": "boolean",
+                "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean | undefined",
+                    "original": "'4' | '6' | 4 | 6 | null",
+                    "resolved": "\"4\" | \"6\" | 4 | 6 | null | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -424,7 +403,8 @@ export class SdTr {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "separator"
+                "attribute": "separator",
+                "defaultValue": "null"
             }
         };
     }

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

@@ -67,7 +67,7 @@ export class SdTabs {
         };
     }
     render() {
-        return (h("div", { key: '181916a72512a6802a06dc56fca418a806d18a0e', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
+        return (h("div", { key: '92384577bf4ce85de90ae05a32e44715e595fe16', 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-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: 'd877d2598cad84c2bf495e76e0cc1d087f52cc8e', 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: 'c4e864b958b806d4ecc293bd47375dabe0b9e825', class: "sd-textarea__content" }, h("textarea", { key: '8d12c0178392c07150f0fdde5bab4c0e91534efb', 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: '1f1a6ed592df92b4aa0aacfbc1ba8926b93b7066', 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: '63b4847968e5a1ceb309b7d0950da33927e25244', class: "sd-textarea__content" }, h("textarea", { key: '89d81a7792c3b5a4a1bcaa0f7bd73e0b3a0bd192', 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: '82579581897d7845b95456ccb5e2a1745c84bcc5', style: {
+        return (h("div", { key: '735fa3f949ee4c7d0178f999c02e90c829c133b4', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
                 '--sd-toast-icon': iconColor,
                 '--sd-toast-link': linkColor,
-            } }, h("div", { key: '5f41392a25dee4e53917255453c97c2203940f21', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '8f38f7c9842ec295510135589a63994011a856f4', class: "sd-toast__icon" }, h("sd-icon", { key: '62ef897ddfc3b47fe7b640d430d0baf95bdb5b51', name: this.icon, size: iconSize, color: iconColor }))), h("div", { key: 'f6db6cb9776cb41400c9a9052cdea94990245298', class: "sd-toast__content" }, h("span", { key: 'fbd7cdd72422e9ad08f99302b4dcd607d058926f', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: 'f599928ad9d0d7536086d7dd2d1ce65b429fd8f4', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: '2be68a412c4b6b9dac64dbd89447c4905fa7512f', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (h("sd-ghost-button", { key: '065030362b37383ee7ae31e9b8a771b160427cbe', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, h("div", { key: '4e483d858c3268bde838ddc5c5c9cb5065855326', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '007eded85c508bdd2da05b1c9d489ff2d03a4df9', class: "sd-toast__icon" }, h("sd-icon", { key: '099d5556f4b0a11f5162cb76a6166a2d662d9590', name: this.icon, size: iconSize, color: iconColor }))), h("div", { key: '3825916248bc2385fe87c8aeb6d741b59738246f', class: "sd-toast__content" }, h("span", { key: 'fba817baf33179296f50d3fe4147cc99c38fbb83', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '39667765a9a72c761f0b464f78c7652e60e6dd16', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: '3da2f9a5daf53de4400bfec79654b5795c3b6af4', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (h("sd-ghost-button", { key: '2578d35dc11e06178c6902cb358bcdb8ccabbf36', 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: 'c80d46b63f50591d4d92b810c0625701e4741e3a', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (h("div", { key: '1de55d255b75842f52e3f0a147a69493ed1a7de5', 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: 'c5c8b9448dabb6619e80fd55b11f94bf78706994', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: 'bd43e7f286da217653461ec3128998c5f5a821d9', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (h("label", { key: 'f1b1b68270d523f7f3e40c8145f35e93df269d73', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '7e07c190916e19ffe8744f6b491e92e6bf8efd36', 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: 'c7ed53cfd1505b394353a9a37d0fe012cdf29217' }, h("div", { key: 'd31332c8717dd954bb1c79bb9d0fd974f74d6e73', 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: 'a63971f2fa15e9ef8a6294a2284284e7d7154a8f', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, h("div", { key: 'dc3259612bf303b320fdc849bbb83f224f410737', ref: el => (this.menuEl = el), class: {
+        return (h(Fragment, { key: '0ffbc5e61b4b5ab9bf1fda1c064de63c1467bb37' }, h("div", { key: 'c74bff7fde9c1f139435c2b37f69e7ee7492ec91', 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: '3a83a7d7a33fbdd720a52149b2a156ecc72c087b', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, h("div", { key: 'abb63e4db76edae3df1d16d756e20a61284db87f', 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: '8b3d132320c27710c9346f5313ee7c173df4275e', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '66e90298fa62b7660e3d785abd024e9acae38fe3' })), h("div", { key: '115d0ee83abb2d9ca607759f009c47acd34196e2', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
+            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, h("i", { key: 'c29052cc7ed0e514ed27a7f576585d8865728cd4', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '9602237020591571cd76d3afa9e1c6383f7f421f' })), h("div", { key: '29091435fa3008eaf352b831eb4345ed9d6a5d86', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
     }
     static get is() { return "sd-tooltip"; }
     static get originalStyleUrls() {

package/dist/components/index.js

@@ -1 +1 @@
-export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-BjkROjjt.js";import{c as t}from"./p-DRVnqiWc.js";let n=null;function e(t,n){void 0!==n&&(void 0!==n.position&&t.setAttribute("position",n.position),null!=n.maxVisible&&t.setAttribute("max-visible",n.maxVisible+""),null!=n.defaultDuration&&t.setAttribute("default-duration",n.defaultDuration+""),null!=n.zIndex&&t.setAttribute("z-index",n.zIndex+""))}function o(t){return n&&document.body.contains(n)?(e(n,t),n):(n=document.createElement("sd-toast-container"),e(n,t),document.body.appendChild(n),n)}function i(t){return"function"==typeof t.create?Promise.resolve():new Promise((n=>{const e=()=>{"function"==typeof t.create?n():requestAnimationFrame(e)};requestAnimationFrame(e)}))}const c={async create(t,n,e){const{globalOptions:s,...r}=e??{},c=o(s);return await i(c),c.create({message:t,type:n,...r})},async dismiss(t){if(null!=n)return await i(n),n.dismiss(t)},async dismissAll(){if(null!=n)return await i(n),n.dismissAll()},configure(t){o(t)}},u="sd-modal-container";let d=null;const l={ok:"confirm",cancel:"cancel",close:"close"};class m{modalId;okFn;cancelFn;closeFn;clickFn;dismissedFn;containerRef;pendingActions=[];dismissRequested=!1;constructor(t,n){this.modalId=t,this.containerRef=n}onOk(t){return this.okFn=t,this}onCancel(t){return this.cancelFn=t,this}onClose(t){return this.closeFn=t,this}onClick(t){return this.clickFn=t,this}onDismissed(t){return this.dismissedFn=t,this}update(t){return this.runOrQueue((()=>{this.containerRef?.update(this.modalId,t)})),this}ok(){return this.dismiss("ok")}cancel(){return this.dismiss("cancel")}close(){return this.dismiss("close")}dismiss(t="close"){if(this.dismissRequested)return this;this.dismissRequested=!0;const n=l[t];return this.runOrQueue((()=>{this.containerRef?.dismissById(this.modalId,n)})),this}_triggerOk(){this.okFn?.()}_triggerCancel(){this.cancelFn?.()}_triggerClose(){this.closeFn?.()}_triggerClick(){this.clickFn?.()}_triggerDismissed(){this.dismissedFn?.()}_setId(t){this.modalId=t;const n=[...this.pendingActions];this.pendingActions=[],n.forEach((t=>t()))}_setContainer(t){this.containerRef=t}runOrQueue(t){""===this.modalId||null==this.containerRef?this.pendingActions.push(t):t()}}function f(){if("undefined"==typeof window||"undefined"==typeof document||"undefined"==typeof customElements)throw Error("[sdModal] Browser APIs are unavailable. Use `sdModal` only on the client.")}function h(){if(f(),function(){if(!customElements.get(u))throw Error("[sdModal] `sd-modal-container` is not registered. Call `defineCustomElements(window)` before using `sdModal`.")}(),d&&d.isConnected)return d;const t=document.createElement(u);return t.setAttribute("auto-remove",""),document.body.appendChild(t),d=t,t}async function w(t){if(await customElements.whenDefined(u),"function"==typeof t.open)return Promise.resolve();throw Error("[sdModal] `sd-modal-container` is registered but not ready to open dialogs.")}function p(){return new m("")}function y(t,n){const{component:e,persistent:s}=n,o=h(),i={persistent:s};t._setContainer(o),w(o).then((async()=>{const n=await o.createCustom(e,i,t);t._setId(n)}))}const E={confirm(t){const n=h(),e=new m("",n);return w(n).then((async()=>{const s=await n.open(t,e);e._setId(s)})),e},loading(t={}){const n=h(),e=new m("",n);return w(n).then((async()=>{const s=await n.openLoading(t,e);e._setId(s)})),e},create(t){const n=p();return y(n,t),n},configure(n){f(),t(n)}},C="sd-loading-container";let k=null;async function A(t){const n=(function(){if("undefined"==typeof window||"undefined"==typeof document||"undefined"==typeof customElements)throw Error("[sdLoading] Browser APIs are unavailable. Use `sdLoading` only on the client.")}(),function(){if(!customElements.get(C))throw Error("[sdLoading] `sd-loading-container` is not registered. Call `defineCustomElements(window)` before using `sdLoading`.")}(),k&&document.body.contains(k)||(k=document.createElement(C),document.body.appendChild(k)),k);await customElements.whenDefined(C),t(n)}const P={show(t={}){A((n=>{n.show?.(t)}))},hide(){k&&A((t=>{t.hide?.()}))}};export{y as _attachSdModalWithRef,p as _createSdModalRef,P as sdLoading,E as sdModal,c as sdToast}
+export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-pwNG5WaX.js";import{c as t}from"./p-DRVnqiWc.js";let n=null;function e(t,n){void 0!==n&&(void 0!==n.position&&t.setAttribute("position",n.position),null!=n.maxVisible&&t.setAttribute("max-visible",n.maxVisible+""),null!=n.defaultDuration&&t.setAttribute("default-duration",n.defaultDuration+""),null!=n.zIndex&&t.setAttribute("z-index",n.zIndex+""))}function o(t){return n&&document.body.contains(n)?(e(n,t),n):(n=document.createElement("sd-toast-container"),e(n,t),document.body.appendChild(n),n)}function i(t){return"function"==typeof t.create?Promise.resolve():new Promise((n=>{const e=()=>{"function"==typeof t.create?n():requestAnimationFrame(e)};requestAnimationFrame(e)}))}const c={async create(t,n,e){const{globalOptions:s,...r}=e??{},c=o(s);return await i(c),c.create({message:t,type:n,...r})},async dismiss(t){if(null!=n)return await i(n),n.dismiss(t)},async dismissAll(){if(null!=n)return await i(n),n.dismissAll()},configure(t){o(t)}},u="sd-modal-container";let d=null;const l={ok:"confirm",cancel:"cancel",close:"close"};class m{modalId;okFn;cancelFn;closeFn;clickFn;dismissedFn;containerRef;pendingActions=[];dismissRequested=!1;constructor(t,n){this.modalId=t,this.containerRef=n}onOk(t){return this.okFn=t,this}onCancel(t){return this.cancelFn=t,this}onClose(t){return this.closeFn=t,this}onClick(t){return this.clickFn=t,this}onDismissed(t){return this.dismissedFn=t,this}update(t){return this.runOrQueue((()=>{this.containerRef?.update(this.modalId,t)})),this}ok(){return this.dismiss("ok")}cancel(){return this.dismiss("cancel")}close(){return this.dismiss("close")}dismiss(t="close"){if(this.dismissRequested)return this;this.dismissRequested=!0;const n=l[t];return this.runOrQueue((()=>{this.containerRef?.dismissById(this.modalId,n)})),this}_triggerOk(){this.okFn?.()}_triggerCancel(){this.cancelFn?.()}_triggerClose(){this.closeFn?.()}_triggerClick(){this.clickFn?.()}_triggerDismissed(){this.dismissedFn?.()}_setId(t){this.modalId=t;const n=[...this.pendingActions];this.pendingActions=[],n.forEach((t=>t()))}_setContainer(t){this.containerRef=t}runOrQueue(t){""===this.modalId||null==this.containerRef?this.pendingActions.push(t):t()}}function f(){if("undefined"==typeof window||"undefined"==typeof document||"undefined"==typeof customElements)throw Error("[sdModal] Browser APIs are unavailable. Use `sdModal` only on the client.")}function h(){if(f(),function(){if(!customElements.get(u))throw Error("[sdModal] `sd-modal-container` is not registered. Call `defineCustomElements(window)` before using `sdModal`.")}(),d&&d.isConnected)return d;const t=document.createElement(u);return t.setAttribute("auto-remove",""),document.body.appendChild(t),d=t,t}async function w(t){if(await customElements.whenDefined(u),"function"==typeof t.open)return Promise.resolve();throw Error("[sdModal] `sd-modal-container` is registered but not ready to open dialogs.")}function p(){return new m("")}function y(t,n){const{component:e,persistent:s}=n,o=h(),i={persistent:s};t._setContainer(o),w(o).then((async()=>{const n=await o.createCustom(e,i,t);t._setId(n)}))}const E={confirm(t){const n=h(),e=new m("",n);return w(n).then((async()=>{const s=await n.open(t,e);e._setId(s)})),e},loading(t={}){const n=h(),e=new m("",n);return w(n).then((async()=>{const s=await n.openLoading(t,e);e._setId(s)})),e},create(t){const n=p();return y(n,t),n},configure(n){f(),t(n)}},C="sd-loading-container";let k=null;async function A(t){const n=(function(){if("undefined"==typeof window||"undefined"==typeof document||"undefined"==typeof customElements)throw Error("[sdLoading] Browser APIs are unavailable. Use `sdLoading` only on the client.")}(),function(){if(!customElements.get(C))throw Error("[sdLoading] `sd-loading-container` is not registered. Call `defineCustomElements(window)` before using `sdLoading`.")}(),k&&document.body.contains(k)||(k=document.createElement(C),document.body.appendChild(k)),k);await customElements.whenDefined(C),t(n)}const P={show(t={}){A((n=>{n.show?.(t)}))},hide(){k&&A((t=>{t.hide?.()}))}};export{y as _attachSdModalWithRef,p as _createSdModalRef,P as sdLoading,E as sdModal,c as sdToast}

package/dist/components/{p-CJ-QHG0F.js → p-2aQ4cVXp.js}

@@ -1 +1 @@
-import{p as t,H as s,c as i,h as e,t as o}from"./p-BjkROjjt.js";const n=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.close=i(this,"sdClose",3)}get hostEl(){return this}to="body";parentRef=null;offset=[0,4];viewportPadding=0;zIndex=998;open=!1;close;container;wrapper;rafId;isInsideClick=!1;closeTransitionTimer;handleObservedScroll=()=>this.updatePosition();resizeObserver;mutationObserver;scrollParents=[];isObserved=!1;handleOpenChange(){this.syncPortalState()}componentDidLoad(){this.container=this.resolveContainer(),this.syncPortalState()}componentDidRender(){this.syncPortalState()}disconnectedCallback(){if(this.closeTransitionTimer&&clearTimeout(this.closeTransitionTimer),this.unobserveParent(),this.wrapper?.parentNode)try{this.wrapper.parentNode.removeChild(this.wrapper)}catch{}}resolveContainer(){const t="string"==typeof this.to?document.querySelector(this.to):this.to;return t instanceof s?t:document.body}createWrapper(){this.wrapper=document.createElement("div"),Object.assign(this.wrapper.style,{position:"absolute",top:"0",left:"0",zIndex:(this.zIndex??998).toString(),opacity:"0",transition:"opacity 0.15s ease-out",boxSizing:"border-box",visibility:"hidden"}),this.container.appendChild(this.wrapper)}ensureWrapper(){this.wrapper||(this.container||=this.resolveContainer(),this.createWrapper(),this.moveSlotContent())}syncPortalState(){if(!this.open)return this.wrapper&&(this.wrapper.style.transition="opacity 0.15s ease-out",this.wrapper.style.opacity="0",this.wrapper.style.pointerEvents="none",this.closeTransitionTimer&&clearTimeout(this.closeTransitionTimer),this.closeTransitionTimer=setTimeout((()=>{this.wrapper&&!this.open&&(this.wrapper.style.display="none")}),150)),void this.unobserveParent();this.closeTransitionTimer&&clearTimeout(this.closeTransitionTimer),this.ensureWrapper(),this.wrapper&&(this.wrapper.style.display="block",this.wrapper.style.transition="opacity 0.25s ease-out",this.wrapper.style.opacity="0",this.wrapper.style.pointerEvents="",this.observeParent(),this.updatePosition())}moveSlotContent(){this.wrapper&&Array.from(this.hostEl.childNodes).filter((t=>t.nodeType!==Node.COMMENT_NODE)).forEach((t=>this.wrapper.appendChild(t)))}updatePosition(){void 0!==this.rafId&&cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame((()=>{if(!this.parentRef||!this.wrapper)return;const t=this.parentRef.getBoundingClientRect(),s=window.innerWidth,i=window.innerHeight,e=this.offset??[0,4],o=Math.max(0,this.viewportPadding??0),n=Math.max(s-2*o,0),h=Math.max(i-2*o,0);this.wrapper.style.maxWidth=`${n}px`,this.wrapper.style.maxHeight=`${h}px`;const r=this.wrapper.getBoundingClientRect(),a=i-t.bottom-e[1]-o;let d=t.bottom+window.scrollY+e[1],l=t.left+window.scrollX+e[0];a<r.height&&t.top-e[1]-o>a&&(d=t.top+window.scrollY-r.height-e[1]);const c=window.scrollY+o,p=window.scrollY+i-o-r.height;d=p<c?c:Math.min(Math.max(d,c),p),t.left+r.width+e[0]>s-o&&(l=t.right+window.scrollX-r.width-e[0]);const u=window.scrollX+o,w=window.scrollX+s-o-r.width;l=w<u?u:Math.min(Math.max(l,u),w),this.wrapper.style.top=`${d}px`,this.wrapper.style.left=`${l}px`,this.wrapper.style.visibility="visible",this.wrapper.style.opacity="1"}))}observeParent(){this.parentRef&&!this.isObserved&&(this.observeScrollParents(this.parentRef),"undefined"!=typeof ResizeObserver&&(this.resizeObserver=new ResizeObserver((()=>this.updatePosition())),this.resizeObserver.observe(this.parentRef)),"undefined"!=typeof MutationObserver&&(this.mutationObserver=new MutationObserver((()=>this.updatePosition())),this.mutationObserver.observe(document.body,{childList:!0,subtree:!0})),this.isObserved=!0)}unobserveParent(){this.isObserved&&(this.unobserveScrollParents(),this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.mutationObserver?.disconnect(),this.mutationObserver=void 0,this.isObserved=!1)}observeScrollParents(t){const s=this.getScrollParents(t);s.forEach((t=>{t.addEventListener("scroll",this.handleObservedScroll,{passive:!0})})),this.scrollParents=s}unobserveScrollParents(){this.scrollParents.forEach((t=>{t.removeEventListener("scroll",this.handleObservedScroll)})),this.scrollParents=[]}getScrollParents(t){const s=[];let i=t.parentElement;for(;i;){const{overflow:t,overflowX:e,overflowY:o}=getComputedStyle(i);[t,e,o].some((t=>/(auto|scroll|overlay)/.test(t)))&&s.push(i),i=i.parentElement}return s}handleMouseDown(t){this.isInsideClick=!(!this.wrapper||!this.wrapper.contains(t.target))}handleWindowClick(t){this.isInsideClick?this.isInsideClick=!1:this.wrapper?.contains(t.target)||this.close.emit()}render(){return e("slot",{key:"a227fa8a0639de7fd3a014762998692151284f87"})}static get watchers(){return{open:[{handleOpenChange:0}]}}},[772,"sd-portal",{to:[1],parentRef:[16],offset:[16],viewportPadding:[2,"viewport-padding"],zIndex:[2,"z-index"],open:[4]},[[9,"scroll","updatePosition"],[9,"resize","updatePosition"],[9,"mousedown","handleMouseDown"],[8,"click","handleWindowClick"]],{open:[{handleOpenChange:0}]}]);function h(){"undefined"!=typeof customElements&&["sd-portal"].forEach((t=>{"sd-portal"===t&&(customElements.get(o(t))||customElements.define(o(t),n))}))}export{n as S,h as d}
+import{p as t,H as s,c as i,h as e,t as o}from"./p-pwNG5WaX.js";const n=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.close=i(this,"sdClose",3)}get hostEl(){return this}to="body";parentRef=null;offset=[0,4];viewportPadding=0;zIndex=998;open=!1;close;container;wrapper;rafId;isInsideClick=!1;closeTransitionTimer;handleObservedScroll=()=>this.updatePosition();resizeObserver;mutationObserver;scrollParents=[];isObserved=!1;handleOpenChange(){this.syncPortalState()}componentDidLoad(){this.container=this.resolveContainer(),this.syncPortalState()}componentDidRender(){this.syncPortalState()}disconnectedCallback(){if(this.closeTransitionTimer&&clearTimeout(this.closeTransitionTimer),this.unobserveParent(),this.wrapper?.parentNode)try{this.wrapper.parentNode.removeChild(this.wrapper)}catch{}}resolveContainer(){const t="string"==typeof this.to?document.querySelector(this.to):this.to;return t instanceof s?t:document.body}createWrapper(){this.wrapper=document.createElement("div"),Object.assign(this.wrapper.style,{position:"absolute",top:"0",left:"0",zIndex:(this.zIndex??998).toString(),opacity:"0",transition:"opacity 0.15s ease-out",boxSizing:"border-box",visibility:"hidden"}),this.container.appendChild(this.wrapper)}ensureWrapper(){this.wrapper||(this.container||=this.resolveContainer(),this.createWrapper(),this.moveSlotContent())}syncPortalState(){if(!this.open)return this.wrapper&&(this.wrapper.style.transition="opacity 0.15s ease-out",this.wrapper.style.opacity="0",this.wrapper.style.pointerEvents="none",this.closeTransitionTimer&&clearTimeout(this.closeTransitionTimer),this.closeTransitionTimer=setTimeout((()=>{this.wrapper&&!this.open&&(this.wrapper.style.display="none")}),150)),void this.unobserveParent();this.closeTransitionTimer&&clearTimeout(this.closeTransitionTimer),this.ensureWrapper(),this.wrapper&&(this.wrapper.style.display="block",this.wrapper.style.transition="opacity 0.25s ease-out",this.wrapper.style.opacity="0",this.wrapper.style.pointerEvents="",this.observeParent(),this.updatePosition())}moveSlotContent(){this.wrapper&&Array.from(this.hostEl.childNodes).filter((t=>t.nodeType!==Node.COMMENT_NODE)).forEach((t=>this.wrapper.appendChild(t)))}updatePosition(){void 0!==this.rafId&&cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame((()=>{if(!this.parentRef||!this.wrapper)return;const t=this.parentRef.getBoundingClientRect(),s=window.innerWidth,i=window.innerHeight,e=this.offset??[0,4],o=Math.max(0,this.viewportPadding??0),n=Math.max(s-2*o,0),h=Math.max(i-2*o,0);this.wrapper.style.maxWidth=`${n}px`,this.wrapper.style.maxHeight=`${h}px`;const r=this.wrapper.getBoundingClientRect(),a=i-t.bottom-e[1]-o;let d=t.bottom+window.scrollY+e[1],l=t.left+window.scrollX+e[0];a<r.height&&t.top-e[1]-o>a&&(d=t.top+window.scrollY-r.height-e[1]);const c=window.scrollY+o,p=window.scrollY+i-o-r.height;d=p<c?c:Math.min(Math.max(d,c),p),t.left+r.width+e[0]>s-o&&(l=t.right+window.scrollX-r.width-e[0]);const u=window.scrollX+o,w=window.scrollX+s-o-r.width;l=w<u?u:Math.min(Math.max(l,u),w),this.wrapper.style.top=`${d}px`,this.wrapper.style.left=`${l}px`,this.wrapper.style.visibility="visible",this.wrapper.style.opacity="1"}))}observeParent(){this.parentRef&&!this.isObserved&&(this.observeScrollParents(this.parentRef),"undefined"!=typeof ResizeObserver&&(this.resizeObserver=new ResizeObserver((()=>this.updatePosition())),this.resizeObserver.observe(this.parentRef)),"undefined"!=typeof MutationObserver&&(this.mutationObserver=new MutationObserver((()=>this.updatePosition())),this.mutationObserver.observe(document.body,{childList:!0,subtree:!0})),this.isObserved=!0)}unobserveParent(){this.isObserved&&(this.unobserveScrollParents(),this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.mutationObserver?.disconnect(),this.mutationObserver=void 0,this.isObserved=!1)}observeScrollParents(t){const s=this.getScrollParents(t);s.forEach((t=>{t.addEventListener("scroll",this.handleObservedScroll,{passive:!0})})),this.scrollParents=s}unobserveScrollParents(){this.scrollParents.forEach((t=>{t.removeEventListener("scroll",this.handleObservedScroll)})),this.scrollParents=[]}getScrollParents(t){const s=[];let i=t.parentElement;for(;i;){const{overflow:t,overflowX:e,overflowY:o}=getComputedStyle(i);[t,e,o].some((t=>/(auto|scroll|overlay)/.test(t)))&&s.push(i),i=i.parentElement}return s}handleMouseDown(t){this.isInsideClick=!(!this.wrapper||!this.wrapper.contains(t.target))}handleWindowClick(t){this.isInsideClick?this.isInsideClick=!1:this.wrapper?.contains(t.target)||this.close.emit()}render(){return e("slot",{key:"a227fa8a0639de7fd3a014762998692151284f87"})}static get watchers(){return{open:[{handleOpenChange:0}]}}},[772,"sd-portal",{to:[1],parentRef:[16],offset:[16],viewportPadding:[2,"viewport-padding"],zIndex:[2,"z-index"],open:[4]},[[9,"scroll","updatePosition"],[9,"resize","updatePosition"],[9,"mousedown","handleMouseDown"],[8,"click","handleWindowClick"]],{open:[{handleOpenChange:0}]}]);function h(){"undefined"!=typeof customElements&&["sd-portal"].forEach((t=>{"sd-portal"===t&&(customElements.get(o(t))||customElements.define(o(t),n))}))}export{n as S,h as d}