@sellmate/design-system 1.0.75 → 1.0.77

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

@@ -7,7 +7,7 @@ sd-thead * {
 
 .thead {
   display: table-header-group;
-  height: 36px;
+  height: var(--table-header-height, 36px);
 }
 .thead--sticky {
   position: sticky;
@@ -22,12 +22,16 @@ sd-thead * {
 
 .th {
   display: table-cell;
-  background: #F5FAFF;
-  height: 36px;
-  padding: 0 16px;
-  font-weight: 500;
+  background: var(--table-header-bg, #F5FAFF);
+  height: var(--table-header-height, 36px);
+  padding: 0 var(--table-header-padding-x, 16px);
+  font-family: var(--table-header-font-family, inherit);
+  font-weight: var(--table-header-font-weight, 500);
+  font-size: var(--table-header-font-size, 12px);
+  line-height: var(--table-header-line-height, 20px);
+  text-decoration: var(--table-header-text-decoration, none);
   vertical-align: middle;
-  border-bottom: 1px solid #E1E1E1;
+  border-bottom: var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);
   -webkit-user-select: none;
   user-select: none;
   position: relative;
@@ -54,13 +58,13 @@ sd-thead * {
 }
 .th.sticky-left {
   position: sticky;
-  background-color: #F5FAFF;
+  background-color: var(--table-header-bg, #F5FAFF);
   z-index: 110 !important;
   left: var(--sticky-left-offset, 0);
 }
 .th.sticky-right {
   position: sticky;
-  background-color: #F5FAFF;
+  background-color: var(--table-header-bg, #F5FAFF);
   z-index: 110 !important;
   right: var(--sticky-right-offset, 0);
 }
@@ -112,7 +116,7 @@ sd-thead * {
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
-  gap: 4px;
+  gap: var(--table-header-gap, 4px);
 }
 .th__content--left {
   justify-content: flex-start;
@@ -135,11 +139,11 @@ sd-thead * {
   right: 0;
   transform: translateY(-50%);
   width: 4px;
-  height: 16px;
+  height: var(--table-header-resizer-height, 16px);
   cursor: col-resize;
   z-index: 3;
-  border-left: 1px solid #CCCCCC;
-  border-right: 1px solid #CCCCCC;
+  border-left: var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC);
+  border-right: var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC);
 }
 .th__resizer--left {
   right: auto;

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

@@ -1,5 +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";
 export class SdThead {
     el;
     columns;
@@ -11,6 +12,7 @@ export class SdThead {
     scrolledRight;
     rows = [];
     columnWidths = [];
+    sdColumnSort;
     tableId = '';
     _columns = [];
     _selectable = false;
@@ -38,7 +40,12 @@ export class SdThead {
         this.resolveConfig();
     }
     syncTableContext() {
-        const table = this.el.closest('sd-table');
+        // sd-table이 shadow:true이므로 fallback content로 렌더되면 closest가 경계를 못 넘는다.
+        // 그 경우 getRootNode().host(=sd-table)로 폴백한다.
+        const closest = this.el.closest('sd-table');
+        const root = this.el.getRootNode();
+        const fromShadow = root instanceof ShadowRoot ? root.host : null;
+        const table = closest ?? fromShadow;
         this.tableEl = table;
         const fromMethod = table?.getTableIdSync?.();
         const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
@@ -106,9 +113,11 @@ export class SdThead {
             this.tableEl.handleResize(index, event, reversed);
         }
     }
+    handleColumnSort = (col) => {
+        this.sdColumnSort.emit({ column: col });
+    };
     handleSelectAll(checked) {
-        const currentState = this.getIsAllChecked();
-        const nextChecked = currentState === null ? false : !!checked;
+        const nextChecked = !!checked;
         const safeRows = Array.isArray(this.rows) ? this.rows : [];
         if (this.tableEl?.toggleSelectAllSync) {
             this.tableEl.toggleSelectAllSync(nextChecked, safeRows);
@@ -128,27 +137,42 @@ export class SdThead {
         const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
         const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
         const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
-        return (h(Host, { key: '2358499ef65d88005d03b1246604c0fd8eefdde1', slot: `${this.tableId}-head` }, h("thead", { key: '49bb43a19aeb83f3a60367b26dbb6535ebcec743', class: {
+        const headStyle = {
+            '--table-header-height': `${TABLE_HEADER_LAYOUT.height}px`,
+            '--table-header-padding-x': `${TABLE_HEADER_LAYOUT.paddingX}px`,
+            '--table-header-gap': `${TABLE_HEADER_LAYOUT.gap}px`,
+            '--table-header-bg': TABLE_HEADER_COLORS.bg,
+            '--table-header-font-family': TABLE_HEADER_TYPOGRAPHY.fontFamily,
+            '--table-header-font-weight': TABLE_HEADER_TYPOGRAPHY.fontWeight,
+            '--table-header-font-size': `${TABLE_HEADER_TYPOGRAPHY.fontSize}px`,
+            '--table-header-line-height': `${TABLE_HEADER_TYPOGRAPHY.lineHeight}px`,
+            '--table-header-text-decoration': TABLE_HEADER_TYPOGRAPHY.textDecoration,
+            '--table-header-resizer-color': TABLE_HEADER_RESIZING_BAR.color,
+            '--table-header-resizer-height': `${TABLE_HEADER_RESIZING_BAR.height}px`,
+            '--table-border-color': TABLE_BORDER.color,
+            '--table-border-width': `${TABLE_BORDER.width}px`,
+        };
+        return (h(Host, { key: 'c4468056cc20a78516e61bccaf4d11c098e83ec6', slot: `${this.tableId}-head`, style: headStyle }, h("thead", { key: 'a9befd1728baf2104bfb9132557d5c5c0eb49748', class: {
                 'thead': true,
                 'thead--sticky': this._stickyHeader,
-            } }, h("tr", { key: 'cd6388d79e9a4a5d9edbbda05601abbbefcb1ff4', class: "tr" }, this._selectable && (h("th", { key: 'fa09e82368d45e9fb1d32838ef44e609c698609d', class: {
+            } }, h("tr", { key: 'da786d82d4896b6124becf42f634bcc5b0a6ffb7', class: "tr" }, this._selectable && (h("th", { key: 'b257c5475b7e528fbfc52ea85031a4c49bed7b36', 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: '5ab4861aecfac9495101363d5bd809d077c7dbc3', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
+            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '6624026c1811c809eeb5131518ddb8c11f66b541', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
                 'th': true,
                 [`${col.thClass}`]: Boolean(col.thClass),
                 'sticky-left': true,
                 'sticky-left-edge': idx === stickyLeftCount - 1,
                 'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
-            }, style: { ...col.thStyle, ...this.getStickyStyle(idx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && (h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))))), middleCols.map((col, relativeIdx) => {
+            }, style: { ...col.thStyle, ...this.getStickyStyle(idx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && (h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))))), middleCols.map((col, relativeIdx) => {
             const actualColIdx = stickyLeftCount + relativeIdx;
             return (h("th", { key: col.name, class: {
                     th: true,
                     [`${col.thClass}`]: Boolean(col.thClass),
-                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && (h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
+                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && (h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
         }), stickyRightCols.map((col, relativeIdx) => {
             const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
             return (h("th", { key: col.name, class: {
@@ -157,7 +181,7 @@ export class SdThead {
                     'sticky-right': true,
                     'sticky-right-edge': relativeIdx === 0,
                     'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
-                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && (h("div", { class: "th__resizer th__resizer--left", onMouseDown: (evt) => this.handleResize(actualColIdx, evt, true) }))));
+                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && (h("div", { class: "th__resizer th__resizer--left", onMouseDown: (evt) => this.handleResize(actualColIdx, evt, true) }))));
         })))));
     }
     static get is() { return "sd-thead"; }
@@ -373,6 +397,31 @@ export class SdThead {
             "_scrolledRight": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "sdColumnSort",
+                "name": "sdColumnSort",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ column: SdTableColumn }",
+                    "resolved": "{ column: SdTableColumn; }",
+                    "references": {
+                        "SdTableColumn": {
+                            "location": "import",
+                            "path": "../constants",
+                            "id": "src/components/sd-table/constants.ts::SdTableColumn",
+                            "referenceLocation": "SdTableColumn"
+                        }
+                    }
+                }
+            }];
+    }
     static get methods() {
         return {
             "refreshConfig": {

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

@@ -11,12 +11,15 @@ sd-tr * {
 .tr:hover .td {
   background-color: #F9F9F9;
 }
+.tr--no-hover:hover .td {
+  background-color: white;
+}
 
 .td {
   display: table-cell;
-  height: 44px;
-  padding: 0 16px;
-  border-bottom: 1px solid #E1E1E1;
+  height: var(--table-body-height, 44px);
+  padding: 0 var(--table-body-padding-x, 16px);
+  border-bottom: var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);
   background: white;
   vertical-align: middle;
   overflow: hidden;
@@ -108,4 +111,9 @@ sd-tr * {
 .tr:hover .td.sticky-left,
 .tr:hover .td.sticky-right {
   background-color: #F9F9F9;
+}
+
+.tr--no-hover:hover .td.sticky-left,
+.tr--no-hover:hover .td.sticky-right {
+  background-color: white;
 }

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

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { TABLE_ID_ATTR, } from "../constants";
+import { TABLE_BODY_LAYOUT, TABLE_BODY_TYPOGRAPHY, TABLE_BORDER, } from "../sd-table.config";
 export class SdTr {
     el;
     columns;
@@ -10,6 +11,7 @@ export class SdTr {
     tableId = '';
     columnWidths = [];
     isVisible = true;
+    spansVersion = 0;
     _columns = [];
     _selectable = false;
     _stickyColumn = { left: 0, right: 0 };
@@ -27,7 +29,12 @@ export class SdTr {
         this.syncTableContext();
     }
     syncTableContext() {
-        const table = this.el.closest('sd-table');
+        // sd-table이 shadow:true이므로 fallback content로 렌더되면 closest가 경계를 못 넘는다.
+        // 그 경우 getRootNode().host(=sd-table)로 폴백한다.
+        const closest = this.el.closest('sd-table');
+        const root = this.el.getRootNode();
+        const fromShadow = root instanceof ShadowRoot ? root.host : null;
+        const table = closest ?? fromShadow;
         this.tableEl = table;
         const fromMethod = table?.getTableIdSync?.();
         const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
@@ -52,6 +59,9 @@ export class SdTr {
     async refreshConfig() {
         this.resolveConfig();
     }
+    async bumpSpansVersion() {
+        this.spansVersion = this.spansVersion + 1;
+    }
     async updateVisibility() {
         this.updateVisibilitySync();
     }
@@ -117,37 +127,72 @@ export class SdTr {
             this.tableEl.updateRowSelectSync(this.row);
         }
     }
+    getSpanFor(col) {
+        if (!this.tableEl?.getSpanSync)
+            return undefined;
+        const fieldName = typeof col.field === 'string' ? col.field : col.name;
+        return this.tableEl.getSpanSync(this.rowKey, fieldName);
+    }
+    isCovered(colIdx) {
+        if (!this.tableEl?.isCoveredSync)
+            return false;
+        return this.tableEl.isCoveredSync(this.rowKey, colIdx, this._columns);
+    }
     render() {
         const stickyLeftCount = this._stickyColumn.left || 0;
         const stickyRightCount = this._stickyColumn.right || 0;
         const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
         const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
         const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
-        return (h(Host, { key: 'd6259e5c87cce0fa70f1d849e11416ad69b0cac1', style: { display: this.isVisible ? '' : 'none' } }, h("tr", { key: '90e36c39bede0e07fc1c4d90183a73ebc99b6ed8', class: "tr" }, this._selectable && (h("td", { key: '601f1747063d8e73803304abc2cd767f420f359c', class: {
+        const hasRowspan = this.tableEl?.hasRowspanSync?.() ?? false;
+        const rowStyle = {
+            display: this.isVisible ? '' : 'none',
+            '--table-body-height': `${TABLE_BODY_LAYOUT.default.height}px`,
+            '--table-body-padding-x': `${TABLE_BODY_LAYOUT.paddingX}px`,
+            '--table-body-font-family': TABLE_BODY_TYPOGRAPHY.fontFamily,
+            '--table-body-font-weight': TABLE_BODY_TYPOGRAPHY.fontWeight,
+            '--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-border-color': TABLE_BORDER.color,
+            '--table-border-width': `${TABLE_BORDER.width}px`,
+        };
+        return (h(Host, { key: '33228ee9f020f915e77f9827e9360087fc2cd565', style: rowStyle }, h("tr", { key: '2f308a547ad19584e509543027cf60ff8faec2f8', class: { 'tr': true, 'tr--no-hover': hasRowspan } }, this._selectable && (h("td", { key: '94f50aa6fd31a63d8d99e8c6f25faf8ba6f68ddf', class: {
                 'td': true,
                 'td--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: '97068a623d3b7876c7e6392e3f5ed81cfc60d592', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => (h("td", { key: col.name, class: {
-                'td': true,
-                [`td--${col.align || 'left'}`]: true,
-                'sticky-left': true,
-                'sticky-left-edge': idx === stickyLeftCount - 1,
-                'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
-                [`${col.tdClass}`]: Boolean(col.tdClass),
-            }, style: this.getStickyStyle(idx) }, h("slot", { name: `${this.tableId}-${typeof col.field === 'string' ? col.field : col.name}-${this.rowKey}` }, h("span", null, this.getCellValue(col)))))), middleCols.map((col, relativeIdx) => {
+            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: 'e8808068b601529c95b8055c16e7af8a746bdccc', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => {
+            if (this.isCovered(idx))
+                return null;
+            const span = this.getSpanFor(col);
+            return (h("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
+                    'td': true,
+                    [`td--${col.align || 'left'}`]: true,
+                    'sticky-left': true,
+                    'sticky-left-edge': idx === stickyLeftCount - 1,
+                    'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
+                    [`${col.tdClass}`]: Boolean(col.tdClass),
+                }, style: this.getStickyStyle(idx) }, h("slot", { name: `${this.tableId}-${typeof col.field === 'string' ? col.field : col.name}-${this.rowKey}` }, h("span", null, this.getCellValue(col)))));
+        }), middleCols.map((col, relativeIdx) => {
             const actualColIdx = stickyLeftCount + relativeIdx;
+            if (this.isCovered(actualColIdx))
+                return null;
             const fieldName = typeof col.field === 'string' ? col.field : col.name;
-            return (h("td", { key: col.name, class: {
+            const span = this.getSpanFor(col);
+            return (h("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
                     td: true,
                     [`td--${col.align || 'left'}`]: true,
                     [`${col.tdClass}`]: Boolean(col.tdClass),
                 }, style: this.getStickyStyle(actualColIdx) }, h("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, h("span", null, this.getCellValue(col)))));
         }), stickyRightCols.map((col, relativeIdx) => {
             const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
+            if (this.isCovered(actualColIdx))
+                return null;
             const fieldName = typeof col.field === 'string' ? col.field : col.name;
-            return (h("td", { key: col.name, class: {
+            const span = this.getSpanFor(col);
+            return (h("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
                     'td': true,
                     [`td--${col.align || 'left'}`]: true,
                     'sticky-right': true,
@@ -289,6 +334,7 @@ export class SdTr {
             "tableId": {},
             "columnWidths": {},
             "isVisible": {},
+            "spansVersion": {},
             "_columns": {},
             "_selectable": {},
             "_stickyColumn": {},
@@ -315,6 +361,23 @@ export class SdTr {
                     "tags": []
                 }
             },
+            "bumpSpansVersion": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
             "updateVisibility": {
                 "complexType": {
                     "signature": "() => Promise<void>",

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

@@ -67,7 +67,7 @@ export class SdTabs {
         };
     }
     render() {
-        return (h("div", { key: '390edfad274caa06df38af9d04580015a1744a44', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
+        return (h("div", { key: 'ff758fbab0a594c28968074a26ad92a28cd4850b', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
             const badgeName = this.getBadgeName(tab);
             return (h("div", { key: `tab-${index}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab) }, h("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge !== undefined && tab.badge !== null && tab.badge !== '' && (h("sd-tag", { name: badgeName, label: tab.badge.toString() }))));
         })));

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

@@ -19,7 +19,7 @@ export class SdTag {
     render() {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (h("span", { key: 'da19900d267d2b2f000e1790133966a7976bcded', class: "sd-tag", style: {
+        return (h("span", { key: '3e7a6602ee73f56e5709711ac735460230de7e58', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -29,7 +29,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: 'e426021988395058367872ac23658586b2895764', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: '8da56711cb12127f96195404799581480280507f', 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

@@ -26,16 +26,16 @@ 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: '1128254cddacf5869f320ce2b788b06646f27d7f', class: {
+        return (h("span", { key: '9bd62ac603764a5938f3c72bac3a8bf893dfb233', class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.icon && (h("sd-icon", { key: '52c069d637a2ccf9cd4e7bd1ab3a62ea981d2e1e', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: '99a09359c75c2eb6c2e2ef6b9e3b87d92c3f7810', class: labelClassName }, this.label), this.useArrow && (h("span", { key: 'c7e77454d9d002c0e043dc71a418c65ecd60cff5', class: "sd-text-link__arrow", style: {
+            }, style: cssVars, onClick: this.handleClick }, this.icon && (h("sd-icon", { key: '9d63aea3c45c4962e5766e7059a166a85e7a357f', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: 'dc73d60dd1e593c597a6b5dd977db380c21ff680', class: labelClassName }, this.label), this.useArrow && (h("span", { key: '2b25dfb6ae2f857b674341427f93ee34e4691893', 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: '677c88823b02084449cd2dec83cc6bd27dfb8006', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
+            } }, h("sd-icon", { key: 'a5c8fb48e66f4a6820da1a54cedd7b1a13c5dcec', 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: '345a70f335ee103a4e45c75e17559359beec01c9', 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, 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: 'dc09d61d06f3cefb15dce980e293a266fdf3d79d', class: "sd-textarea__content" }, h("textarea", { key: '085de248d7376e0d19d3588bc836bd5ad17cb335', 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: 'ca7dc6c13d22ba43cd99ee1e976599d7efb1eceb', 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, 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: 'a36ffabff714596bf780f2a63ccfde3e02eadda7', class: "sd-textarea__content" }, h("textarea", { key: 'b7f8a55b7ee4dfc394c380a97e21c6cc34d12b9b', 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

@@ -11,10 +11,10 @@ export class SdToast {
     render() {
         const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
         const iconSize = Number(TOAST_LAYOUT.iconSize);
-        return (h("div", { key: 'd4b73e2503514143f5174bc8859baf0e59c2f8da', style: {
+        return (h("div", { key: 'f5db941adee41c3d2c57c2c7a12d94d03dcdebb6', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
-            } }, h("div", { key: '7334daee691fb03a1005c2afac64033554489046', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '297ada835b0710bf43a936b02e53b0873b7f4af3', class: "sd-toast__icon" }, h("sd-icon", { key: 'b5bc4716df28231dc7af15db63595ae9044189b5', name: this.icon, size: iconSize, color: typeConfig.content }))), h("div", { key: 'd0239c8f8b495fbdaedad0f65a6d0a0edfaada60', class: "sd-toast__content" }, h("span", { key: 'dc70d403673bb8f99cfd91393054a86bf17e5ac2', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '1a76bcee482720693b501d3a13c54e720bbe44fc', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (h("sd-ghost-button", { key: 'a8dc3c15cabf5ca4e075e75c4fb2744dd5da4fa0', class: "sd-toast__close", icon: "close", intent: this.type === 'caution' ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, h("div", { key: '68362fac26744fc7e805a18c589f4aff5845edc1', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '8ec7941b469b6d0242ab68b7928a9dbf6e75bb5f', class: "sd-toast__icon" }, h("sd-icon", { key: 'c057a100de91cecc3435bfa6a95c928727eb1836', name: this.icon, size: iconSize, color: typeConfig.content }))), h("div", { key: '21e84dd6cdf7efa52611da532a0983268c7c2cb2', class: "sd-toast__content" }, h("span", { key: '99c370fe3d4a54103fbccef395afadf2923f3613', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '3ce7109c2d1f5cd03f4fcc6bb01ede14c6400734', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (h("sd-ghost-button", { key: '2cf982fd1fe538533ceff61bbdecdacd2d69e51c', class: "sd-toast__close", icon: "close", intent: this.type === 'caution' ? '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: '601c4c5aa55df02459866607ca7c59da53c2eda5', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (h("div", { key: '925f4bf56626e8c722051afa65aa64f2a50007db', 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: 'fe56ffe876ccc859536ca74703e0870ad97e1668', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: 'f473fd71c03d0e4e3e8fb354753d769033f148f2', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (h("label", { key: '9ef981165b998f43ec23f3bb1cf0ef385962d7fb', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '6b6d2a89f43036f624c7bc291b2c5aa7a93c8f0a', 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

@@ -81,14 +81,14 @@ export class SdTooltip {
         const toggleTooltip = () => (this.showTooltip = !this.showTooltip);
         const divTrigger = trigger === 'hover' ? hoverTrigger : this.label ? {} : { onClick: toggleTooltip };
         const buttonClickTrigger = trigger === 'click' && this.label ? { onSdClick: toggleTooltip } : {};
-        return (h(Fragment, { key: 'e0211f8c80222e357d278c81582baf40ef47a8a6' }, h("div", { key: '9747aa6130dbf0d7e29bbe2d7222c22c8001c6a5', class: `sd-tooltip-trigger ${this.sdClass || ''}`, ...divTrigger }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: icon, size: this.buttonSize ?? 'sm', color: color, variant: this.buttonVariant ?? 'primary', 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: '7f3e8e2758ef78ca1765bd7e4ec8d6849698ff88', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: placement, offset: this.tooltipOffset }, h("div", { key: '86a3a006bdcee86f16da7ebea04ff267a7f029b9', ref: el => (this.menuEl = el), class: {
+        return (h(Fragment, { key: '9e14a4013ea6d04a37529cf7afdb10fe4b3d98eb' }, h("div", { key: 'd98396d4440a795e59b0d2fede7381f8e0da7280', class: `sd-tooltip-trigger ${this.sdClass || ''}`, ...divTrigger }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: icon, size: this.buttonSize ?? 'sm', color: color, variant: this.buttonVariant ?? 'primary', 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: '59d42ad7aafd94fbe89fc5af3bddf5a305e13a4c', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: placement, offset: this.tooltipOffset }, h("div", { key: '88a927d2c3461c7c68865262e8565d0d1385e9af', 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: '50268080023fc252774a7fb564bdbf6c007c115e', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '28b2948d9570157c6c40e7738498266ca8c8ec64' })), h("div", { key: 'e2057da013a2700e8614f1e8d8e5164aec8efb18', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
+            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, h("i", { key: 'eb2bcb4e6faa2066e309b662f372fbf8bef42a3e', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: 'f13005f88ef3194d43de72a87ee78f2c0858682e' })), h("div", { key: '726aff3af3603593d0b994ee17ba88cec071868a', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
     }
     static get is() { return "sd-tooltip"; }
     static get originalStyleUrls() {

package/dist/collection/utils/modal.js

@@ -1,5 +1,6 @@
 import { configureModalStack } from "./modal-stack";
 const MODAL_CONTAINER_TAG = 'sd-modal-container';
+let sharedContainer = null;
 const REASON_TO_CONTAINER = {
     ok: 'confirm',
     cancel: 'cancel',
@@ -111,9 +112,13 @@ function assertModalContainerDefined() {
 function createContainer() {
     assertBrowserEnvironment();
     assertModalContainerDefined();
+    if (sharedContainer && sharedContainer.isConnected) {
+        return sharedContainer;
+    }
     const container = document.createElement(MODAL_CONTAINER_TAG);
     container.setAttribute('auto-remove', '');
     document.body.appendChild(container);
+    sharedContainer = container;
     return container;
 }
 async function whenReady(el) {

package/dist/collection/utils/testing/index.js

@@ -0,0 +1,2 @@
+export { setupSpecPage } from './setup-spec-page';
+export * from './mocks';

package/dist/collection/utils/testing/mocks.js

@@ -0,0 +1,35 @@
+export const mockResizeObserver = () => {
+    globalThis.ResizeObserver = jest.fn(() => ({
+        observe: jest.fn(),
+        unobserve: jest.fn(),
+        disconnect: jest.fn(),
+    }));
+};
+export const mockMutationObserver = () => {
+    globalThis.MutationObserver = jest.fn(() => ({
+        observe: jest.fn(),
+        disconnect: jest.fn(),
+        takeRecords: () => [],
+    }));
+};
+export const mockRequestAnimationFrame = () => {
+    globalThis.requestAnimationFrame = ((cb) => {
+        cb(0);
+        return 1;
+    });
+    globalThis.cancelAnimationFrame = (() => undefined);
+};
+export const mockBoundingRect = (rect = {}) => {
+    Element.prototype.getBoundingClientRect = jest.fn(() => ({
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+        width: 0,
+        height: 0,
+        x: 0,
+        y: 0,
+        toJSON: () => ({}),
+        ...rect,
+    }));
+};

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-CNAzAL53.js";import{c as t}from"./p-DRVnqiWc.js";let n=null;function e(t,n){n&&(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(n)return await i(n),n.dismiss(t)},async dismissAll(){if(n)return await i(n),n.dismissAll()},configure(t){o(t)}},u="sd-modal-container",d={ok:"confirm",cancel:"cancel",close:"close"};class l{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=d[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&&this.containerRef?t():this.pendingActions.push(t)}}function m(){if("undefined"==typeof window||"undefined"==typeof document||"undefined"==typeof customElements)throw Error("[sdModal] Browser APIs are unavailable. Use `sdModal` only on the client.")}function f(){m(),function(){if(!customElements.get(u))throw Error("[sdModal] `sd-modal-container` is not registered. Call `defineCustomElements(window)` before using `sdModal`.")}();const t=document.createElement(u);return t.setAttribute("auto-remove",""),document.body.appendChild(t),t}async function h(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 w(){return new l("")}function p(t,n){const{component:e,persistent:s}=n,o=f(),i={persistent:s};t._setContainer(o),h(o).then((async()=>{const n=await o.createCustom(e,i,t);t._setId(n)}))}const y={confirm(t){const n=f(),e=new l("",n);return h(n).then((async()=>{const s=await n.open(t,e);e._setId(s)})),e},loading(t={}){const n=f(),e=new l("",n);return h(n).then((async()=>{const s=await n.openLoading(t,e);e._setId(s)})),e},create(t){const n=w();return p(n,t),n},configure(n){m(),t(n)}},E="sd-loading-container";let C=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(E))throw Error("[sdLoading] `sd-loading-container` is not registered. Call `defineCustomElements(window)` before using `sdLoading`.")}(),C&&document.body.contains(C)||(C=document.createElement(E),document.body.appendChild(C)),C);await customElements.whenDefined(E),t(n)}const k={show(t={}){A((n=>{n.show?.(t)}))},hide(){C&&A((t=>{t.hide?.()}))}};export{p as _attachSdModalWithRef,w as _createSdModalRef,k as sdLoading,y as sdModal,c as sdToast}
+export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-Bm8Fue-a.js";import{c as t}from"./p-DRVnqiWc.js";let n=null;function e(t,n){n&&(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(n)return await i(n),n.dismiss(t)},async dismissAll(){if(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&&this.containerRef?t():this.pendingActions.push(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 F={show(t={}){A((n=>{n.show?.(t)}))},hide(){k&&A((t=>{t.hide?.()}))}};export{y as _attachSdModalWithRef,p as _createSdModalRef,F as sdLoading,E as sdModal,c as sdToast}

package/dist/components/p-B6KZfiQ5.js

@@ -0,0 +1 @@
+import{p as t,H as s,h as e,d as o,t as i}from"./p-Bm8Fue-a.js";import{T as a}from"./p-sZMi_32I.js";const d=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}get el(){return this}rows=[];tableId="";topSpacerHeight=0;bottomSpacerHeight=0;tableEl=null;handleRowsChange(t){const s=t??[];this.tableEl?.setRowCountSync&&this.tableEl.setRowCountSync(s.length)}componentWillLoad(){this.syncTableContext(),this.rows=this.rows??[],this.tableEl?.setRowCountSync&&this.tableEl.setRowCountSync(this.rows.length),this.el.setSpacersSync=(t,s)=>{this.topSpacerHeight=t,this.bottomSpacerHeight=s}}componentDidLoad(){this.syncTableContext()}syncTableContext(){const t=this.el.closest("sd-table"),s=this.el.getRootNode(),e=s instanceof ShadowRoot?s.host:null,o=t??e;this.tableEl=o;const i=o?.getTableIdSync?.(),d=o?.getAttribute(a),c=(i&&"undefined"!==i?i:null)??(d&&"undefined"!==d?d:null)??"";c&&c!==this.tableId&&(this.tableId=c)}render(){return e(o,{key:"e474bc09fdec9d48d978ec87620b161220b5236c",slot:`${this.tableId}-body`},e("tbody",{key:"c74261b3f30c43e8ac8c3bdea1180f17bfc7dbc8",class:{tbody:!0}},[this.topSpacerHeight>0&&e("tr",{key:"spacer-top",class:"tbody__spacer",style:{height:`${this.topSpacerHeight}px`,display:"block"}}),e("slot",{key:"f686e7e8fa81e725a32592a58267d0b5cd7551e6"}),this.bottomSpacerHeight>0&&e("tr",{key:"spacer-bottom",class:"tbody__spacer",style:{height:`${this.bottomSpacerHeight}px`,display:"block"}})]))}static get watchers(){return{rows:[{handleRowsChange:0}]}}static get style(){return":host{display:contents}:host *{box-sizing:border-box}.tbody{display:table-row-group}"}},[769,"sd-tbody",{rows:[16],tableId:[32],topSpacerHeight:[32],bottomSpacerHeight:[32]},void 0,{rows:[{handleRowsChange:0}]}]);function c(){"undefined"!=typeof customElements&&["sd-tbody"].forEach((t=>{"sd-tbody"===t&&(customElements.get(i(t))||customElements.define(i(t),d))}))}export{d as S,c as d}