@sellmate/design-system 1.0.62 → 1.0.64

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

@@ -1,59 +1,47 @@
 sd-toggle {
   display: inline-block;
-  height: 20px;
   line-height: 0;
 }
-sd-toggle .sd-toggle {
-  cursor: pointer;
+
+.sd-toggle {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
-  height: 20px;
-}
-sd-toggle .sd-toggle > input {
-  display: none;
-}
-sd-toggle .sd-toggle__label {
-  font-size: 12px;
-  color: #333333;
-  line-height: 20px;
-}
-sd-toggle .sd-toggle__track {
-  width: 36px;
-  height: 20px;
-  border-radius: 12px;
-  background: #CCCCCC;
-  position: relative;
-  transition: background-color 0.2s ease;
-}
-sd-toggle .sd-toggle__thumb {
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: white;
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  transition: transform 0.2s ease;
-}
-sd-toggle .sd-toggle--checked .sd-toggle__track {
-  background: #0075FF;
-}
-sd-toggle .sd-toggle--checked .sd-toggle__thumb {
-  transform: translateX(16px);
-}
-sd-toggle .sd-toggle--disabled {
+  justify-content: center;
+  box-sizing: border-box;
+  height: var(--sd-toggle-height);
+  padding: 0 var(--sd-toggle-padding-x);
+  border-radius: var(--sd-toggle-radius);
+  border: var(--sd-toggle-border-width) solid var(--sd-toggle-border-default);
+  background: var(--sd-toggle-bg-default);
+  color: var(--sd-toggle-content-default);
+  font-family: var(--sd-toggle-font-family);
+  font-weight: var(--sd-toggle-font-weight);
+  font-size: var(--sd-toggle-font-size);
+  line-height: var(--sd-toggle-line-height);
+  text-decoration: var(--sd-toggle-text-decoration);
+  white-space: nowrap;
+  user-select: none;
+  cursor: pointer;
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
+.sd-toggle:hover:not(.sd-toggle--disabled) {
+  background: var(--sd-toggle-bg-hover);
+  border-color: var(--sd-toggle-border-select);
+  color: var(--sd-toggle-content-hover);
+}
+.sd-toggle--active {
+  background: var(--sd-toggle-bg-select);
+  border-color: var(--sd-toggle-border-select);
+  color: var(--sd-toggle-content-select);
+}
+.sd-toggle--disabled {
+  background: var(--sd-toggle-bg-disabled);
+  border-color: var(--sd-toggle-border-disabled);
+  color: var(--sd-toggle-content-disabled);
   cursor: not-allowed;
 }
-sd-toggle .sd-toggle--disabled.sd-toggle--checked .sd-toggle__track {
-  background: #BBDAFF;
-}
-sd-toggle .sd-toggle--disabled.sd-toggle--unchecked .sd-toggle__track {
-  background: #EEEEEE;
-}
-sd-toggle .sd-toggle:hover:not(.sd-toggle--disabled).sd-toggle--checked .sd-toggle__track {
-  background: #005CC9;
-}
-sd-toggle .sd-toggle:hover:not(.sd-toggle--disabled).sd-toggle--unchecked .sd-toggle__track {
-  background: #BBBBBB;
+.sd-toggle--disabled.sd-toggle--active {
+  background: var(--sd-toggle-bg-disabled);
+  border-color: var(--sd-toggle-border-disabled);
+  color: var(--sd-toggle-content-disabled);
 }

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

@@ -1,20 +1,15 @@
 import { h } from "@stencil/core";
+import { TOGGLE_COLORS, TOGGLE_LAYOUT, TOGGLE_TYPOGRAPHY } from "./sd-toggle.config";
 export class SdToggle {
     value = false;
     label = '';
     disabled = false;
     change;
-    componentWillLoad() {
-        this.updateCheckedState(this.value);
-    }
-    componentWillRender() {
-        this.updateCheckedState(this.value);
-    }
-    updateCheckedState(value) {
-        this.value = value;
-    }
     get toggleClasses() {
-        const classes = ['sd-toggle', this.value ? 'sd-toggle--checked' : 'sd-toggle--unchecked'];
+        const classes = ['sd-toggle'];
+        if (this.value) {
+            classes.push('sd-toggle--active');
+        }
         if (this.disabled) {
             classes.push('sd-toggle--disabled');
         }
@@ -28,7 +23,29 @@ export class SdToggle {
         this.change.emit(newValue);
     };
     render() {
-        return (h("label", { key: 'ca08050cdbbb4e5e7e615f72411be5bff93955d8', "aria-label": this.label || 'toggle', class: this.toggleClasses }, h("input", { key: 'abdae5d4dc59fc121ded9cc0800f68d3996d4e50', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && h("span", { key: '37d23f59f877100c53deace3c6c70b441df5748c', class: "sd-toggle__label" }, this.label), h("div", { key: '545f76c3c1e63198f6dc80bdf6bf44f6840082b2', class: "sd-toggle__track" }, h("div", { key: '4142b2e46b93cf1d5f86cb1b5a4490c0e6a03a05', class: "sd-toggle__thumb" }))));
+        const cssVars = {
+            '--sd-toggle-height': `${TOGGLE_LAYOUT.height}px`,
+            '--sd-toggle-padding-x': `${TOGGLE_LAYOUT.paddingX}px`,
+            '--sd-toggle-radius': `${TOGGLE_LAYOUT.radius}px`,
+            '--sd-toggle-border-width': `${TOGGLE_LAYOUT.borderWidth}px`,
+            '--sd-toggle-font-family': TOGGLE_TYPOGRAPHY.fontFamily,
+            '--sd-toggle-font-weight': TOGGLE_TYPOGRAPHY.fontWeight,
+            '--sd-toggle-font-size': `${TOGGLE_TYPOGRAPHY.fontSize}px`,
+            '--sd-toggle-line-height': `${TOGGLE_TYPOGRAPHY.lineHeight}px`,
+            '--sd-toggle-text-decoration': TOGGLE_TYPOGRAPHY.textDecoration,
+            '--sd-toggle-bg-default': TOGGLE_COLORS.bg.default,
+            '--sd-toggle-bg-hover': TOGGLE_COLORS.bg.hover,
+            '--sd-toggle-bg-select': TOGGLE_COLORS.bg.select,
+            '--sd-toggle-bg-disabled': TOGGLE_COLORS.bg.disabled,
+            '--sd-toggle-border-default': TOGGLE_COLORS.border.default,
+            '--sd-toggle-border-select': TOGGLE_COLORS.border.select,
+            '--sd-toggle-border-disabled': TOGGLE_COLORS.border.disabled,
+            '--sd-toggle-content-default': TOGGLE_COLORS.content.default,
+            '--sd-toggle-content-hover': TOGGLE_COLORS.content.hover,
+            '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
+            '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
+        };
+        return (h("label", { key: 'ec38c0ca834e5208d2cc5eb1fc32f959eacbb46d', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '2b47036dbd0cb880a7b7973523c985ae13e0cf22', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
     static get is() { return "sd-toggle"; }
     static get originalStyleUrls() {
@@ -59,7 +76,7 @@ export class SdToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "value",
                 "defaultValue": "false"
             },

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: '26a3cf140fdbc66fe79d9258f99082cdf0c79c60' }, h("div", { key: 'a47fb4ca41deecc63db4bc8d8e93419da8867e22', 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: 'a728edde03eee82a0b4c72ea77a9cb918b27f709', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: placement, offset: this.tooltipOffset }, h("div", { key: '7afcb975b1045126fd19d2f6186a43d744de5922', ref: el => (this.menuEl = el), class: {
+        return (h(Fragment, { key: '097722e57d6a808193e8fc0d48cebc80ee13848a' }, h("div", { key: '92c6fd83098faec1cfa405ace12530d0cb408395', 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: 'd05d011181a8c183690607c974208e708ccba184', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: placement, offset: this.tooltipOffset }, h("div", { key: '281c3994d52fcd1d6194edd12bd64ac9a42f5e71', 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: '5c650247061d57b01adf3e53ddaa6d92c35a5e53', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '2bd40b24cd9c6015f1a3c5548b619c48b10df758' })), h("div", { key: 'cce2db4ea12874ab11ac0bd04fb4080b2778c9b3', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
+            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, h("i", { key: '87374c0a423bc037decdc820e118c65ea7b3f75f', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '9cdd8215849973011a2339ed80bfb2863b1e374e' })), h("div", { key: '4f764958e07a8b2ed0ea093609f5a42d86fa3f3c', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
     }
     static get is() { return "sd-tooltip"; }
     static get originalStyleUrls() {

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

@@ -0,0 +1,59 @@
+:host {
+  display: block;
+}
+
+.table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.templates-slot {
+  display: none;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-size: 14px;
+}
+
+.data-table th,
+.data-table td {
+  padding: 12px 16px;
+  text-align: left;
+  vertical-align: middle;
+}
+
+.data-table th {
+  font-weight: 600;
+  background-color: #f8f9fa;
+  color: #333;
+}
+
+.data-table.bordered th,
+.data-table.bordered td {
+  border: 1px solid #dee2e6;
+}
+
+.data-table.striped tbody tr:nth-child(odd) {
+  background-color: #f8f9fa;
+}
+
+.data-table tbody tr:hover {
+  background-color: #e9ecef;
+}
+
+/* Utility classes for custom cell content */
+.data-table .cell-flex {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.data-table .cell-image {
+  width: 24px;
+  height: 16px;
+  object-fit: cover;
+  border-radius: 2px;
+}

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

@@ -0,0 +1,316 @@
+import { h, } from "@stencil/core";
+export class DataTable {
+    el;
+    /** Column definitions array */
+    columns = [];
+    /** Row data array */
+    rows = [];
+    /** Show cell borders */
+    bordered = true;
+    /** Alternate row colors */
+    striped = false;
+    cellRenderers = new Map();
+    headerRenderers = new Map();
+    tableReady;
+    dataChanged() {
+        this.tableReady.emit();
+    }
+    componentDidLoad() {
+        this.tableReady.emit();
+    }
+    async setCellRenderer(field, renderer) {
+        this.cellRenderers = new Map(this.cellRenderers).set(field, renderer);
+    }
+    async setHeaderRenderer(field, renderer) {
+        this.headerRenderers = new Map(this.headerRenderers).set(field, renderer);
+    }
+    async removeCellRenderer(field) {
+        const newMap = new Map(this.cellRenderers);
+        newMap.delete(field);
+        this.cellRenderers = newMap;
+    }
+    async clearAllRenderers() {
+        this.cellRenderers = new Map();
+        this.headerRenderers = new Map();
+    }
+    renderCellContent(column, row, rowIndex) {
+        const value = row[column.field];
+        const renderer = this.cellRenderers.get(column.field);
+        if (renderer) {
+            const html = renderer({ field: column.field, value, row, rowIndex });
+            return h("span", { class: "cell-content", innerHTML: html });
+        }
+        const template = this.el.querySelector(`[slot="cell-${column.field}"]`);
+        if (template) {
+            const html = this.processTemplate(template.innerHTML, { value, row, rowIndex });
+            return h("span", { class: "cell-content", innerHTML: html });
+        }
+        return h("span", { class: "cell-content" }, value);
+    }
+    renderHeaderContent(column) {
+        const renderer = this.headerRenderers.get(column.field);
+        if (renderer) {
+            const html = renderer({ field: column.field, column });
+            return h("span", { innerHTML: html });
+        }
+        const template = this.el.querySelector(`[slot="header-${column.field}"]`);
+        if (template) {
+            return h("span", { innerHTML: template.innerHTML });
+        }
+        return column.header || column.field;
+    }
+    processTemplate(html, data) {
+        return html
+            .replace(/\{\{value\}\}/g, this.escapeHtml(String(data.value ?? '')))
+            .replace(/\{\{rowIndex\}\}/g, String(data.rowIndex))
+            .replace(/\{\{row\.(\w+)\}\}/g, (_, prop) => this.escapeHtml(String(data.row[prop] ?? '')));
+    }
+    escapeHtml(str) {
+        const el = document.createElement('div');
+        el.textContent = str;
+        return el.innerHTML;
+    }
+    render() {
+        return (h("div", { key: '6d2ff3676d082540cc70939363b0f07ff7252e8c', class: "table-wrapper" }, h("table", { key: '3995aead06dfce42ea4e918486b1473c1740b96e', class: { 'data-table': true, 'bordered': this.bordered, 'striped': this.striped } }, h("thead", { key: '9cbe03cbe1f69d7546ba5037489d20d85bd4a534' }, h("tr", { key: '7ab64e3e3ef214a19a010501d3ec9778c5594990' }, this.columns.map(column => (h("th", { key: column.field, style: { width: column.width } }, this.renderHeaderContent(column)))))), h("tbody", { key: '660707fb4d5075b98698718e8cfa8ed903f3d1e2' }, this.rows.map((row, rowIndex) => (h("tr", { key: rowIndex }, this.columns.map(column => (h("td", { key: `${rowIndex}-${column.field}` }, this.renderCellContent(column, row, rowIndex))))))))), h("div", { key: '9aabf030b814c340b2f4a1d66644516ed320f31b', class: "templates-slot", hidden: true }, h("slot", { key: '532e40bf658706a99b57dc89c056d977db3e4d83' }))));
+    }
+    static get is() { return "table-test"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["table-test.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["table-test.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "columns": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TableColumn[]",
+                    "resolved": "TableColumn[]",
+                    "references": {
+                        "TableColumn": {
+                            "location": "local",
+                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/table-test/table-test.tsx",
+                            "id": "src/components/table-test/table-test.tsx::TableColumn"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Column definitions array"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "rows": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TableRow[]",
+                    "resolved": "TableRow[]",
+                    "references": {
+                        "TableRow": {
+                            "location": "local",
+                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/table-test/table-test.tsx",
+                            "id": "src/components/table-test/table-test.tsx::TableRow"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Row data array"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "bordered": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show cell borders"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "bordered",
+                "defaultValue": "true"
+            },
+            "striped": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alternate row colors"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "striped",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "cellRenderers": {},
+            "headerRenderers": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tableReady",
+                "name": "tableReady",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setCellRenderer": {
+                "complexType": {
+                    "signature": "(field: string, renderer: CellRenderer) => Promise<void>",
+                    "parameters": [{
+                            "name": "field",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "renderer",
+                            "type": "(context: CellRenderContext) => string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "CellRenderer": {
+                            "location": "local",
+                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/table-test/table-test.tsx",
+                            "id": "src/components/table-test/table-test.tsx::CellRenderer"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "setHeaderRenderer": {
+                "complexType": {
+                    "signature": "(field: string, renderer: HeaderRenderer) => Promise<void>",
+                    "parameters": [{
+                            "name": "field",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "renderer",
+                            "type": "(context: HeaderRenderContext) => string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HeaderRenderer": {
+                            "location": "local",
+                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/table-test/table-test.tsx",
+                            "id": "src/components/table-test/table-test.tsx::HeaderRenderer"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "removeCellRenderer": {
+                "complexType": {
+                    "signature": "(field: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "field",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "clearAllRenderers": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "columns",
+                "methodName": "dataChanged"
+            }, {
+                "propName": "rows",
+                "methodName": "dataChanged"
+            }];
+    }
+}

package/dist/collection/index.js

@@ -9,3 +9,4 @@
  */
 export { sdToast } from './utils/toast';
 export { sdModal, _createSdModalRef, _attachSdModalWithRef, } from './utils/modal';
+export { sdLoading } from './utils/loading';

package/dist/collection/utils/loading.js

@@ -0,0 +1,43 @@
+const CONTAINER_TAG = 'sd-loading-container';
+let containerEl = null;
+function assertBrowserEnvironment() {
+    if (typeof window === 'undefined' ||
+        typeof document === 'undefined' ||
+        typeof customElements === 'undefined') {
+        throw new Error('[sdLoading] Browser APIs are unavailable. Use `sdLoading` only on the client.');
+    }
+}
+function assertContainerDefined() {
+    if (!customElements.get(CONTAINER_TAG)) {
+        throw new Error('[sdLoading] `sd-loading-container` is not registered. Call `defineCustomElements(window)` before using `sdLoading`.');
+    }
+}
+function getContainer() {
+    assertBrowserEnvironment();
+    assertContainerDefined();
+    if (containerEl && document.body.contains(containerEl)) {
+        return containerEl;
+    }
+    containerEl = document.createElement(CONTAINER_TAG);
+    document.body.appendChild(containerEl);
+    return containerEl;
+}
+async function runOnContainer(fn) {
+    const container = getContainer();
+    await customElements.whenDefined(CONTAINER_TAG);
+    fn(container);
+}
+export const sdLoading = {
+    show(options = {}) {
+        runOnContainer(el => {
+            el.show?.(options);
+        });
+    },
+    hide() {
+        if (!containerEl)
+            return;
+        runOnContainer(el => {
+            el.hide?.();
+        });
+    },
+};

package/dist/collection/utils/modal.js

@@ -9,6 +9,7 @@ class ModalDialogRefImpl {
     okFn;
     cancelFn;
     closeFn;
+    clickFn;
     dismissedFn;
     containerRef;
     pendingActions = [];
@@ -29,6 +30,10 @@ class ModalDialogRefImpl {
         this.closeFn = fn;
         return this;
     }
+    onClick(fn) {
+        this.clickFn = fn;
+        return this;
+    }
     onDismissed(fn) {
         this.dismissedFn = fn;
         return this;
@@ -67,6 +72,9 @@ class ModalDialogRefImpl {
     _triggerClose() {
         this.closeFn?.();
     }
+    _triggerClick() {
+        this.clickFn?.();
+    }
     _triggerDismissed() {
         this.dismissedFn?.();
     }
@@ -150,6 +158,24 @@ export const sdModal = {
         });
         return modalRef;
     },
+    /**
+     * `sd-loading-modal` 을 컨테이너에 띄웁니다.
+     *
+     * - 버튼 클릭 시 자동 dismiss 되지 않습니다. `onClick` 콜백에서 `close()`
+     *   (취소) 또는 `update({ state: 'loading' })` (에러 → 재시도) 등으로
+     *   후속 동작을 결정하세요.
+     * - 비동기 작업이 끝나면 `close()` 로 닫고, 실패 시 `update({ state: 'error' })`
+     *   로 에러 상태로 전환할 수 있습니다.
+     */
+    loading(options = {}) {
+        const container = getContainer();
+        const modalRef = new ModalDialogRefImpl('', container);
+        whenReady(container).then(async () => {
+            const id = await container.openLoading(options, modalRef);
+            modalRef._setId(id);
+        });
+        return modalRef;
+    },
     create(input) {
         const modalRef = _createSdModalRef();
         _attachSdModalWithRef(modalRef, input);