@sellmate/design-system 1.0.56 → 1.0.57

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

@@ -30,7 +30,7 @@ const SdRadio = class {
     }
     render() {
         const isSelected = String(this.val) === String(this.value);
-        return (index.h("div", { key: '7db77e527fe79fcc55c81c7d827d0cc8026214cd', "aria-label": String(this.val) || 'radio option', "aria-checked": isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: this.getRadioClasses() }, index.h("label", { key: `radio-${this.val}` }, index.h("input", { key: 'b8f3d5f83c2ee12d7e447d2b6cf8512fcde086ef', type: "radio", name: String(this.val), value: String(this.val), checked: isSelected, disabled: this.disabled, onInput: () => this.handleRadioChange() }), this.val != null && (index.h("span", { key: '43e56a21cab0dd9a5dbc57174dd7f309f8152660', class: "sd-radio-group__label" }, this.label || String(this.val))))));
+        return (index.h("div", { key: 'e9d7875b19c108505e7dfd455432102c8035097f', "aria-label": String(this.val) || 'radio option', "aria-checked": isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: this.getRadioClasses() }, index.h("label", { key: `radio-${this.val}` }, index.h("input", { key: 'cc0aa88287000b77c2329bba2371e9e4404f8203', type: "radio", name: String(this.val), value: String(this.val), checked: isSelected, disabled: this.disabled, onInput: () => this.handleRadioChange() }), this.val != null && (index.h("span", { key: 'b2a371ef8bc4ccc57ffbbc6acc22bf4b9c391fc1', class: "sd-radio-group__label" }, this.label || String(this.val))))));
     }
 };
 SdRadio.style = sdRadioCss();

package/dist/cjs/sd-select-multiple-group.cjs.entry.js

@@ -397,7 +397,7 @@ const SdSelectMultipleGroup = class extends baseDropdownEvent.BaseDropdownEvent
         });
     }
     render() {
-        return (index.h("sd-field", { key: 'b0b3eeacc1dc3244a17c91c81adc8cd79df74bf3', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, index.h("div", { key: '7738287fc12ce54623d20797e70b885ba643501e', class: {
+        return (index.h("sd-field", { key: '350c7b2df807166a1439a2151f0f168385adac4a', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, index.h("div", { key: 'cce989263e1c7dcb38216e734aabe6eea643676a', class: {
                 'sd-select-multiple-group': true,
                 'sd-select-multiple-group--open': this.isOpen,
                 'sd-select-multiple-group--disabled': this.disabled,

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

@@ -770,16 +770,16 @@ const SdTable = class {
         return (index.h("td", { key: `virtual-${position}-spacer-${rowIdx}`, class: "sd-table__virtual-spacer", style: this.getSpacerCellStyle(spacerWidth), "aria-hidden": "true" }, index.h("div", { class: "sd-table__skeleton-cell" })));
     }
     render() {
-        return (index.h(index.Fragment, { key: '51c6e388c76a39b791e54e350d28a7ee7dd58b9e' }, index.h("div", { key: '8d43403b53e16173c559f6636bd5b74f3640b770', class: "sd-table__wrapper", style: {
+        return (index.h(index.Fragment, { key: 'f3e4930d36d080fd546dddc1e80190b831e93012' }, index.h("div", { key: 'ad2f798951631319190d93f83e25b87f871e58de', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, index.h("div", { key: '43d8dba10880816cb414b1df24493d5617e31bec', class: "sd-table__container", style: {
+            } }, index.h("div", { key: 'c4b6d4080f1416d1c88ab1413c66848bdafe9019', class: "sd-table__container", style: {
                 '--table-container-height': `calc(${this.height} - ${this.pagination && this.innerRows.length > 0 ? 48 : 0}px)`,
-            } }, index.h("div", { key: 'a5c9e235a77dad5d3b061951e489ceafaee2d7a6', class: {
+            } }, index.h("div", { key: '3aacc27970b0c6d8b700063c0af7c57175e2cb22', class: {
                 'sd-table__middle': true,
                 'sd-table__middle--scrollable': this.paginatedRows.length > 0,
                 'sd-table__middle--loading': this.isLoading,
-            } }, this.isLoading && (index.h("div", { key: 'b2fd19d29cb053e5747a1ff55ff109e5e154a8e0', class: "sd-table__middle--loading__spinner" }, index.h("sd-loading-spinner", { key: '2f16c480b25032a9547ecdca61ce1c3838eab7ba' }))), index.h("table", { key: 'ece092ed1ecb20a7ea7b131f8f6a4954b5bad1e3', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), !this.paginatedRows.length && (index.h("div", { key: '076839c1e278879a01bfae3c42b62565b30796f7', class: "sd-table__bottom" }, index.h("div", { key: 'e3dd7080da396abb350d31f7125f4a6f04c2f31b', class: "sd-table__no-data" }, index.h("slot", { key: '81181ee58a7cb9ec8c89fa0e6cf37ef50e22f019', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (index.h("div", { key: '14e4653021886d3d7241806429ff02430c5ff09f', class: "sd-table__pagination" }, index.h("sd-pagination", { key: 'e266a9bffeaf7ba012945e0866928cee7b8220d4', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (index.h("sd-select", { key: '5ef017820acdcca279c9e1b46b79b4ba44b7dfca', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdUpdate: (e) => this.changeRowsPerPage(e.detail.value) })))))));
+            } }, this.isLoading && (index.h("div", { key: '25fca304a4e8ebf43aeeff20de3e3446d25e1ffb', class: "sd-table__middle--loading__spinner" }, index.h("sd-loading-spinner", { key: '48b0adad60cf422b884557b53097c28a4f0b8879' }))), index.h("table", { key: 'ec4328a1f43c865de642cc5814fbdef6a374b7e3', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), !this.paginatedRows.length && (index.h("div", { key: 'ba362ecb9fb8134a15ff3d0a3b8e6a523e94166a', class: "sd-table__bottom" }, index.h("div", { key: 'ca5c2e0b19a1e301ac159588436ef24eecfb6365', class: "sd-table__no-data" }, index.h("slot", { key: '68564a60a05833ba87743212d7189eef6e179fb4', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (index.h("div", { key: '88c3c7362234c20a60f6437ecd79d4c75b2caa6e', class: "sd-table__pagination" }, index.h("sd-pagination", { key: 'c3c8c435fcb752f2b1139981bb764cf4dfb153ab', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (index.h("sd-select", { key: '03801039397a31321e5af96c2bd2d2900151240e', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdUpdate: (e) => this.changeRowsPerPage(e.detail.value) })))))));
     }
     static get watchers() { return {
         "columns": [{

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

@@ -48,7 +48,7 @@ const SdTabs = class {
         return `square_${this.size}_${color}`;
     }
     render() {
-        return (index.h("div", { key: '826e7c3a694d1243506fe8361553d476e21e71fb', class: this.getContainerClasses() }, this.tabs.map((tab, index$1) => {
+        return (index.h("div", { key: '74a25ee4311c84e79f4918b884385f27d6af6313', class: this.getContainerClasses() }, this.tabs.map((tab, index$1) => {
             const badgeName = this.getBadgeName(tab);
             return (index.h("div", { key: `tab-${index$1}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab.value) }, index.h("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge && index.h("sd-tag", { name: badgeName, label: tab.badge.toString() })));
         })));

package/dist/collection/collection-manifest.json

@@ -1,6 +1,5 @@
 {
   "entries": [
-    "components/sd-action-modal/sd-action-modal.js",
     "components/sd-button/sd-button.js",
     "components/sd-calendar/sd-calendar.js",
     "components/sd-checkbox/sd-checkbox.js",
@@ -13,6 +12,7 @@
     "components/sd-select-multiple-group/sd-select-multiple-group.js",
     "components/sd-table/sd-table.js",
     "components/sd-tabs/sd-tabs.js",
+    "components/sd-action-modal/sd-action-modal.js",
     "components/sd-badge/sd-badge.js",
     "components/sd-barcode-input/sd-barcode-input.js",
     "components/sd-button-v2/sd-button-v2.js",

package/dist/collection/components/sd-action-modal/sd-action-modal.js

@@ -29,7 +29,7 @@ export class SdActionModal {
             '--sd-action-modal-title-font-size': `${ACTION_MODAL_TITLE.fontSize}px`,
             '--sd-action-modal-title-line-height': `${ACTION_MODAL_TITLE.lineHeight}px`,
         };
-        return (h("div", { key: '8b3199bfcb78121b72a97e0d15bb032757080706', class: "sd-action-modal", style: cssVars }, h("header", { key: '26075ddc7f0a6d96c5457483faa1dcce945058a1', class: "sd-action-modal__header" }, h("h2", { key: 'a207d1f211ac8826d425d9c1ff84f08037967d2b', class: "sd-action-modal__title" }, this.modalTitle), h("div", { key: 'aaef21b786dd110066d5cbfaa2824f87ef705e13', class: "sd-action-modal__header-sub" }, h("slot", { key: 'cfbb60575a14e3f297d7c97da59039e9fd0bcb7a', name: "header-sub-title" })), h("sd-ghost-button", { key: '368a6c44add48953beaa8809184813179075d022', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: '51e25fa037d7a23a5c3aea434b2d73ddc0bf3552', class: "sd-action-modal__body" }, h("slot", { key: '32454a97a41a1dd1402f112292c347f02cfd5186', name: "body" })), h("footer", { key: '639a174a8451bb4ece0339c6aeb81b20d31933fd', class: "sd-action-modal__footer" }, h("div", { key: '0da91c9254a9e69e8ef5effb3123e098bdfb0fcb', class: "sd-action-modal__footer-sub" }, h("slot", { key: '9c19df37ea9f20353440595b32b304e40dfcfb28', name: "bottom-sub-content" })), h("sd-button-v2", { key: '6fa6a31e3147f4457a4d2021394ed18994831147', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() }))));
+        return (h("div", { key: 'b306dc102137e9b76faeeb19587dce32d670163c', class: "sd-action-modal", style: cssVars }, h("header", { key: 'e6b9699e9943d1f4001b4cd23f99975474c3e86e', class: "sd-action-modal__header" }, h("h2", { key: '4d30b98d01a191e4bdc3fb1ff772483dfd3a8397', class: "sd-action-modal__title" }, this.modalTitle), h("div", { key: 'f1083fe5c2643d09dc4bad4c50064ffda2db65ab', class: "sd-action-modal__header-sub" }, h("slot", { key: 'a11c9a13ae11569226ac11fb4be6b782667defeb', name: "header-sub-title" })), h("sd-ghost-button", { key: 'e8a76ecd5d1388a79ac19705d634f40c05e6c2fc', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: 'eb615713a8fbfdd1c40c805e3146fc8341686c72', class: "sd-action-modal__body" }, h("slot", { key: 'd56a3331bc2e94748f150c11dba9e5bd1fad8043', name: "body" })), h("footer", { key: 'd80ad9de537846b01f79588e363bb40e76c64fba', class: "sd-action-modal__footer" }, h("div", { key: '49187df32a64d18b2492995a80ce49df02e9303e', class: "sd-action-modal__footer-sub" }, h("slot", { key: 'd73e66710152c0718d7cab6bbcbd1ab2cebf1f87', name: "bottom-sub-content" })), h("sd-button-v2", { key: '03d2f2a0fa6960983c46e47460f623dfd42811a3', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() }))));
     }
     static get is() { return "sd-action-modal"; }
     static get originalStyleUrls() {

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

@@ -51,7 +51,7 @@ export class SdButton {
         const buttonClasses = this.getButtonClasses();
         // 유틸로 색상 키 -> HEX 매핑 (없으면 원본 그대로)
         const resolvedColor = resolveColor(this.color);
-        return (h("button", { key: '3afd0a3392bc11cd49b8a8d76f0c92b158652822', class: `${buttonClasses} ${this.sdClass}`, type: this.type, disabled: this.disabled, style: { '--button-color': resolvedColor }, onClick: this.handleClick }, h("div", { key: 'f9741b8f6c5f119f4d54ebd65c2745cd61667c89', class: "sd-button__content" }, this.icon && (h("sd-icon", { key: 'f2a969c8fe4c127951d426c3ffa61c22cd566b1a', class: "sd-button__icon sd-button__icon--left", name: this.icon, size: this.iconSize ?? ICON_SIZES[this.size], color: this.iconColor ?? (this.variant === 'primary' ? '#fff' : resolvedColor) })), this.label && h("div", { key: 'ce542bb75ad0175a6d3e8bd81d0aeddbbbed0bf5', class: "sd-button__label" }, this.label), this.iconRight && (h("sd-icon", { key: '04c7bc061777823a7ac6c91945a2f56caac0eb77', class: "sd-button__icon sd-button__icon--right", name: this.iconRight, size: ICON_SIZES[this.size], color: this.variant === 'primary' ? '#fff' : resolvedColor })))));
+        return (h("button", { key: '079f66bd47a67c5e7cf95ff6b0b6a10aa84697d5', class: `${buttonClasses} ${this.sdClass}`, type: this.type, disabled: this.disabled, style: { '--button-color': resolvedColor }, onClick: this.handleClick }, h("div", { key: '78c7b1b6b7828fe93c5a2752fbaf41b0b8c17cb2', class: "sd-button__content" }, this.icon && (h("sd-icon", { key: '3f0afbeec89e0064f404d4967870516c87f35ac2', class: "sd-button__icon sd-button__icon--left", name: this.icon, size: this.iconSize ?? ICON_SIZES[this.size], color: this.iconColor ?? (this.variant === 'primary' ? '#fff' : resolvedColor) })), this.label && h("div", { key: '319ac39031f4118489d88eec50eb590067422f87', class: "sd-button__label" }, this.label), this.iconRight && (h("sd-icon", { key: '3e25e709e39ffbaceec0863c4fc5c54b8d34d5e1', class: "sd-button__icon sd-button__icon--right", name: this.iconRight, size: ICON_SIZES[this.size], color: this.variant === 'primary' ? '#fff' : resolvedColor })))));
     }
     static get is() { return "sd-button"; }
     static get originalStyleUrls() {

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

@@ -100,13 +100,13 @@ export class SdCalendar {
         // eventsRevision 참조로 events/eventColors 변경 시 re-render 보장
         void this.eventsRevision;
         const allEventNames = this.getAllEventNames();
-        return (h("div", { key: '9a286709cd9891c60f3a9e3f96bbb10febf7f69c', class: "sd-calendar" }, h("div", { key: 'cb52cef3371662e7fda7c4226c22aa1c01c7d4c1', class: "sd-calendar__header" }, h("div", { key: '7e1cf45b0a75c0cc44f0b1b126017049a8af2b1d', class: "year-nav" }, h("button", { key: '0edb0d7be512fdc36e5c3382c47e47cef04d75c8', type: "button", name: "prev-year", title: "Previous Year", onClick: () => {
+        return (h("div", { key: '149ca9ae588a7bd2d70ecf1bf13cc639c99f7da9', class: "sd-calendar" }, h("div", { key: '65f58d53fbaf35cee16007bad0b5e56dd208393e', class: "sd-calendar__header" }, h("div", { key: '76709fd094edaece5ede720a983d1103801ba76d', class: "year-nav" }, h("button", { key: '6d46cfa4cb1d12507ba7570cb6c0bb88bcba3402', type: "button", name: "prev-year", title: "Previous Year", onClick: () => {
                 this.currentYear = this.currentYear - 1;
                 this.viewChange.emit({ year: this.currentYear, month: this.currentMonth });
-            } }, h("sd-icon", { key: 'e336280d87d459615721cc03d75b2d02d1c87ee0', name: "arrowLeft", size: "12", color: "grey_45" })), h("span", { key: 'a9d9de8ef82508f0d6e998e434ecc5dcc6f84017', class: "year-nav__current" }, this.currentYear), h("button", { key: '4d0d76f89442baf209628ca1708d092776ed4606', type: "button", name: "next-year", title: "Next Year", onClick: () => {
+            } }, h("sd-icon", { key: '1319ec1fa0f2533a5d02853cb7638b1f1c10e050', name: "arrowLeft", size: "12", color: "grey_45" })), h("span", { key: '678b705cd95dc499975e071f1607f26bdd50c36d', class: "year-nav__current" }, this.currentYear), h("button", { key: '1f5c3a0cd6108da5ed1beb10bd6af4ea5f22cf4c', type: "button", name: "next-year", title: "Next Year", onClick: () => {
                 this.currentYear = this.currentYear + 1;
                 this.viewChange.emit({ year: this.currentYear, month: this.currentMonth });
-            } }, h("sd-icon", { key: '065c391f62e7ba33631b61c84f032224e594f476', name: "arrowRight", size: "12", color: "grey_45" }))), h("div", { key: '36de2a57b793f67a73d4125fb6574b4235d0cdf7', class: "month-nav" }, h("button", { key: '99d67577999e4304ec5c414af6ec35711570e7de', type: "button", name: "prev-month", title: "Previous Month", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '2c04f97d92580d3392d6ee94b239999d889ecdab', name: "arrowLeft", size: "12", color: "grey_45" })), h("span", { key: '4e2ad881df27eafa93544a1cd17e4ad0deb70cc6', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: 'fa365a20c253047bb51e02495b537d7404cbdda7', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: '0aecbf5c466465dd5674d8e69972ba1b08360305', name: "arrowRight", size: "12", color: "grey_45" })))), h("div", { key: 'b60e5105e1a4ab2b44dda037645be75604d92df7', class: "sd-calendar__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: '4f60a19754da1a707569887d909a7b01163d07b8', class: { 'sd-calendar__body': true, 'sd-calendar__body--has-events': !!this.events } }, [
+            } }, h("sd-icon", { key: '9dff93aef0996c3679a6a8c93c0fce1ea390f4aa', name: "arrowRight", size: "12", color: "grey_45" }))), h("div", { key: '9a6840420da580096fbf24d2c4df656114e23e6e', class: "month-nav" }, h("button", { key: '94bf7598e5b80d6deb407f607034ed6e9f88151f', type: "button", name: "prev-month", title: "Previous Month", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '4ab19da5f6a12bf37b3c4d9aac4e2283762799e8', name: "arrowLeft", size: "12", color: "grey_45" })), h("span", { key: 'c207959595c107cae05a7cbe1d169357b063a29d', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: 'fe319c8b26d9259bcba2b1f251bb827977e6afdc', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: 'af5bb1c06058b6ce22c8d7ffacace2f558bdb013', name: "arrowRight", size: "12", color: "grey_45" })))), h("div", { key: 'ca66c0d7744970364f7d5e11e61014471df3325b', class: "sd-calendar__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: '9d42c252b8b42754aedc64156ec1dbe45200cef0', class: { 'sd-calendar__body': true, 'sd-calendar__body--has-events': !!this.events } }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,
@@ -117,7 +117,7 @@ export class SdCalendar {
             return (h("div", { class: "sd-calendar__cell", key: `${day}_${idx}` }, h("sd-date-box", { date: !day ? '' : Number(day), selected: this.value === formattedDate, isToday: today === formattedDate, disabled: !day ? true : this.isDisabledDate(formattedDate), onClick: !this.isDisabledDate(formattedDate) && day
                     ? () => this.handleDateClick(Number(day))
                     : undefined }), this.events && (h("div", { class: "sd-calendar__dots" }, uniqueEvents.map(eventName => (h("span", { key: eventName, class: "sd-calendar__dot", style: { backgroundColor: this.getEventColor(eventName) } })))))));
-        })), allEventNames.length > 0 && (h("div", { key: '97d41f2a28b76d97568d50cb029ff8a5eaa13f9e', class: "sd-calendar__legend" }, allEventNames.map(name => (h("div", { key: name, class: "sd-calendar__legend-item" }, h("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: this.getEventColor(name) } }), h("span", { class: "sd-calendar__legend-label" }, name))))))));
+        })), allEventNames.length > 0 && (h("div", { key: 'dac97204484b1def1fd3d73939ef64ef6969bce2', class: "sd-calendar__legend" }, allEventNames.map(name => (h("div", { key: name, class: "sd-calendar__legend-item" }, h("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: this.getEventColor(name) } }), h("span", { class: "sd-calendar__legend-label" }, name))))))));
     }
     static get is() { return "sd-calendar"; }
     static get encapsulation() { return "scoped"; }

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

@@ -89,7 +89,7 @@ export class SdCheckbox {
             '--sd-checkbox-disabled-bg': CHECKBOX_COLORS.disabled.bg,
             '--sd-checkbox-disabled-border': CHECKBOX_COLORS.disabled.border,
         };
-        return (h("label", { key: '4c92d46aab587f6e03f27d2a6356eca268141737', class: this.checkboxClasses, style: cssVars }, h("input", { key: '22934eecb45213964374042e999ee0102fe3ae07', type: "checkbox", ref: el => { this.inputEl = el; }, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), h("div", { key: 'fc18ccbcfe3403a1b8c1df6adc161d8b70ef7b5c', class: "sd-checkbox__bg" }, this.isChecked !== false ? (h("sd-icon", { name: this.isChecked === true ? 'check' : 'minus', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled ? CHECKBOX_COLORS.checked.iconDisabled : CHECKBOX_COLORS.checked.icon })) : null), this.label && h("span", { key: 'eb0d41a18406991affce5ea81f303e1a64d5b9c1', class: "sd-checkbox__label" }, this.label)));
+        return (h("label", { key: 'b343ac293abfb6a7834cccc597cd30e56e3a161c', class: this.checkboxClasses, style: cssVars }, h("input", { key: '89d3c5ec214af16680f2111e5e85fcb228ff2223', type: "checkbox", ref: el => { this.inputEl = el; }, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), h("div", { key: '8eef48a269cbbf8c479d60a53996b09cc4aa8f20', class: "sd-checkbox__bg" }, this.isChecked !== false ? (h("sd-icon", { name: this.isChecked === true ? 'check' : 'minus', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled ? CHECKBOX_COLORS.checked.iconDisabled : CHECKBOX_COLORS.checked.icon })) : null), this.label && h("span", { key: '43bf36ec3a3890f68ef699dbb73b48eb6a98451d', class: "sd-checkbox__label" }, this.label)));
     }
     static get is() { return "sd-checkbox"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-date-box/sd-date-box.js

@@ -23,7 +23,7 @@ export class SdDateBox {
         this.mouseOver?.emit(this.date);
     }
     render() {
-        return (h("div", { key: '0c1e27245a3589ed493b26ad17cfe1b7c64c0be3', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (h("div", { key: 'b14dd7c9806828807cdfc232420a30c816ffbeb2', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-date-box': true,
                 'sd-hoverable': !this.disabled || !this.selected || this.type === '',
                 'sd-date-box--disabled': this.disabled,
@@ -34,7 +34,7 @@ export class SdDateBox {
                 'sd-date-box--in-range': this.inRange,
                 'sd-date-box--type-start': this.type === 'start',
                 'sd-date-box--type-end': this.type === 'end',
-            }, onClick: () => this.handleClickDate(), onMouseOver: () => this.handleHoverDate() }, h("div", { key: 'c40b8e120298ca356ce2016f9b9dc72df703c6fe', class: "sd-date-box__content" }, h("div", { key: '7edd94f83506397683620166322c1ab6095fedec', class: "sd-date-box__label" }, this.date))));
+            }, onClick: () => this.handleClickDate(), onMouseOver: () => this.handleHoverDate() }, h("div", { key: 'acb1a2d51d018913e39f8fd1fc54ab85c4ce6957', class: "sd-date-box__content" }, h("div", { key: '8c9445e4268cd254d76297ac1e775697d889f721', class: "sd-date-box__label" }, this.date))));
     }
     static get is() { return "sd-date-box"; }
     static get encapsulation() { return "scoped"; }

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

@@ -59,7 +59,7 @@ export class SdForm {
         this.submitSuccess.emit();
     }
     render() {
-        return (h("form", { key: '82112bf33b4b3090d45f2be051a4586ef81ce413', onSubmit: e => this.onSubmit(e), class: this.formClass }, h("slot", { key: '56ab994680c225eb8b09b16b1a6a2bb789f470c7' })));
+        return (h("form", { key: '2a72e0fb172294913a22560311e8dfcc4b151968', onSubmit: e => this.onSubmit(e), class: this.formClass }, h("slot", { key: 'd0bd0c7f915e10c7fd9aa36af68b2020035a43d4' })));
     }
     static get is() { return "sd-form"; }
     static get properties() {

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

@@ -20,21 +20,21 @@ export class SdModalContainer {
             this.dispatchClose(top.modalEl);
         }
     }
-    async open(options, chain) {
+    async open(options, modalRef) {
         const id = `modal-${++modalIdCounter}`;
         const modalEl = this.createConfirmModal(id, options);
         this.attachModalEventListeners(id, modalEl);
-        this.registerEntry(id, modalEl, chain, {
+        this.registerEntry(id, modalEl, modalRef, {
             persistent: !!options.persistent,
         });
         return id;
     }
-    async createCustom(element, options, chain) {
+    async createCustom(element, options, modalRef) {
         const id = `modal-${++modalIdCounter}`;
         element.setAttribute('data-modal-id', id);
         element.classList.add('sd-modal-container__modal');
         this.attachModalEventListeners(id, element);
-        this.registerEntry(id, element, chain, {
+        this.registerEntry(id, element, modalRef, {
             persistent: !!options.persistent,
         });
         return id;
@@ -47,7 +47,7 @@ export class SdModalContainer {
     dispatchClose(modalEl) {
         modalEl.dispatchEvent(new CustomEvent('sdClose'));
     }
-    registerEntry(id, modalEl, chain, meta) {
+    registerEntry(id, modalEl, modalRef, meta) {
         if (this.containerDismissTimerId) {
             clearTimeout(this.containerDismissTimerId);
             this.containerDismissTimerId = undefined;
@@ -57,7 +57,7 @@ export class SdModalContainer {
             {
                 id,
                 modalEl,
-                chain,
+                modalRef,
                 persistent: meta.persistent,
                 closing: false,
             },
@@ -78,6 +78,9 @@ export class SdModalContainer {
             });
         });
     }
+    async dismissById(id, reason) {
+        this.requestDismiss(id, reason);
+    }
     async update(id, props) {
         const entry = (this.entries ?? []).find(e => e.id === id);
         if (!entry || entry.closing)
@@ -163,11 +166,11 @@ export class SdModalContainer {
         }, ANIMATION_DURATION);
         this.entries = (this.entries ?? []).map(item => item.id === id ? { ...item, closing: true, dismissTimerId } : item);
         if (reason === 'confirm')
-            entry.chain._triggerOk();
+            entry.modalRef._triggerOk();
         else if (reason === 'cancel')
-            entry.chain._triggerCancel();
+            entry.modalRef._triggerCancel();
         else if (reason === 'close')
-            entry.chain._triggerClose();
+            entry.modalRef._triggerClose();
     }
     finalizeDismiss(id) {
         const entry = (this.entries ?? []).find(item => item.id === id);
@@ -186,7 +189,7 @@ export class SdModalContainer {
                 this.containerDismissTimerId = undefined;
             }, ANIMATION_DURATION);
         }
-        entry.chain._triggerDismissed();
+        entry.modalRef._triggerDismissed();
     }
     waitForModalReady(modalEl) {
         const componentOnReady = modalEl.componentOnReady;
@@ -237,14 +240,14 @@ export class SdModalContainer {
         return {
             "open": {
                 "complexType": {
-                    "signature": "(options: ConfirmModalOptions, chain: ModalDialogChainLike) => Promise<string>",
+                    "signature": "(options: ConfirmModalOptions, modalRef: ModalDialogRefLike) => Promise<string>",
                     "parameters": [{
                             "name": "options",
                             "type": "ConfirmModalOptions",
                             "docs": ""
                         }, {
-                            "name": "chain",
-                            "type": "ModalDialogChainLike",
+                            "name": "modalRef",
+                            "type": "ModalDialogRefLike",
                             "docs": ""
                         }],
                     "references": {
@@ -258,11 +261,11 @@ export class SdModalContainer {
                             "id": "src/components/sd-modal-container/sd-modal-container.config.ts::ConfirmModalOptions",
                             "referenceLocation": "ConfirmModalOptions"
                         },
-                        "ModalDialogChainLike": {
+                        "ModalDialogRefLike": {
                             "location": "import",
                             "path": "./sd-modal-container.config",
-                            "id": "src/components/sd-modal-container/sd-modal-container.config.ts::ModalDialogChainLike",
-                            "referenceLocation": "ModalDialogChainLike"
+                            "id": "src/components/sd-modal-container/sd-modal-container.config.ts::ModalDialogRefLike",
+                            "referenceLocation": "ModalDialogRefLike"
                         }
                     },
                     "return": "Promise<string>"
@@ -274,7 +277,7 @@ export class SdModalContainer {
             },
             "createCustom": {
                 "complexType": {
-                    "signature": "(element: HTMLElement, options: SdModalCreateOptions, chain: ModalDialogChainLike) => Promise<string>",
+                    "signature": "(element: HTMLElement, options: SdModalCreateOptions, modalRef: ModalDialogRefLike) => Promise<string>",
                     "parameters": [{
                             "name": "element",
                             "type": "HTMLElement",
@@ -284,8 +287,8 @@ export class SdModalContainer {
                             "type": "SdModalCreateOptions",
                             "docs": ""
                         }, {
-                            "name": "chain",
-                            "type": "ModalDialogChainLike",
+                            "name": "modalRef",
+                            "type": "ModalDialogRefLike",
                             "docs": ""
                         }],
                     "references": {
@@ -303,11 +306,11 @@ export class SdModalContainer {
                             "id": "src/components/sd-modal-container/sd-modal-container.config.ts::SdModalCreateOptions",
                             "referenceLocation": "SdModalCreateOptions"
                         },
-                        "ModalDialogChainLike": {
+                        "ModalDialogRefLike": {
                             "location": "import",
                             "path": "./sd-modal-container.config",
-                            "id": "src/components/sd-modal-container/sd-modal-container.config.ts::ModalDialogChainLike",
-                            "referenceLocation": "ModalDialogChainLike"
+                            "id": "src/components/sd-modal-container/sd-modal-container.config.ts::ModalDialogRefLike",
+                            "referenceLocation": "ModalDialogRefLike"
                         }
                     },
                     "return": "Promise<string>"
@@ -317,6 +320,31 @@ export class SdModalContainer {
                     "tags": []
                 }
             },
+            "dismissById": {
+                "complexType": {
+                    "signature": "(id: string, reason?: \"confirm\" | \"cancel\" | \"close\") => Promise<void>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "reason",
+                            "type": "\"close\" | \"cancel\" | \"confirm\" | undefined",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
             "update": {
                 "complexType": {
                     "signature": "(id: string, props: Partial<ConfirmModalOptions>) => Promise<void>",

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

@@ -21,7 +21,7 @@ export class SdRadio {
     }
     render() {
         const isSelected = String(this.val) === String(this.value);
-        return (h("div", { key: '7db77e527fe79fcc55c81c7d827d0cc8026214cd', "aria-label": String(this.val) || 'radio option', "aria-checked": isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: this.getRadioClasses() }, h("label", { key: `radio-${this.val}` }, h("input", { key: 'b8f3d5f83c2ee12d7e447d2b6cf8512fcde086ef', type: "radio", name: String(this.val), value: String(this.val), checked: isSelected, disabled: this.disabled, onInput: () => this.handleRadioChange() }), this.val != null && (h("span", { key: '43e56a21cab0dd9a5dbc57174dd7f309f8152660', class: "sd-radio-group__label" }, this.label || String(this.val))))));
+        return (h("div", { key: 'e9d7875b19c108505e7dfd455432102c8035097f', "aria-label": String(this.val) || 'radio option', "aria-checked": isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: this.getRadioClasses() }, h("label", { key: `radio-${this.val}` }, h("input", { key: 'cc0aa88287000b77c2329bba2371e9e4404f8203', type: "radio", name: String(this.val), value: String(this.val), checked: isSelected, disabled: this.disabled, onInput: () => this.handleRadioChange() }), this.val != null && (h("span", { key: 'b2a371ef8bc4ccc57ffbbc6acc22bf4b9c391fc1', class: "sd-radio-group__label" }, this.label || String(this.val))))));
     }
     static get is() { return "sd-radio"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-radio-button-group/sd-radio-button-group.js

@@ -36,7 +36,7 @@ export class SdRadioButtonGroup {
     }
     groupName = this.name || `sd-radio-button-group-${crypto.randomUUID()}`;
     render() {
-        return (h("div", { key: '4a1f76b1f53f07f7a062d4a0ce8bf44a47c5366b', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
+        return (h("div", { key: '419d62e718ddcecb4a901f4c4bc98b560c8c4f01', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
             const isSelected = this.isOptionSelected(option);
             const isDisabled = this.isOptionDisabled(option);
             return (h("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, h("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && h("span", { class: "sd-radio-button-group__label" }, option.label)));

package/dist/collection/components/sd-radio-group/sd-radio-group.js

@@ -22,7 +22,7 @@ export class SdRadioGroup {
         return classes.join(' ');
     }
     render() {
-        return (h("div", { key: 'd2296269f2d47fd35c5ad2653bdb0048be14836d', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
+        return (h("div", { key: '82979426bafc24b48858588ad186dfe069616883', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
             return (h("sd-radio", { key: `radio-${option.value}`, val: String(option.value), value: String(this.value), label: option.label, disabled: this.disabled || !!option.disabled, onSdUpdate: ({ detail }) => this.handleRadioChange(detail) }));
         })));
     }

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

@@ -141,7 +141,7 @@ export class SdSelect extends BaseDropdownEvent {
         }
     };
     render() {
-        return (h("sd-field", { key: '94b1ba70718a366048ba4287b28f88bd42b12ee1', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: 'feaa2f25ebdf8aa919490bdf0cba88e30a9de33d', class: {
+        return (h("sd-field", { key: 'f7cd0c34188712a30389d07bde7edc7875e9923b', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: '460a8a23247e24a02bd25470105598914029e205', class: {
                 'sd-select': true,
                 'sd-select--disabled': this.disabled,
                 'sd-select--error': !!this.error,

package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.js

@@ -392,7 +392,7 @@ export class SdSelectMultipleGroup extends BaseDropdownEvent {
         });
     }
     render() {
-        return (h("sd-field", { key: 'b0b3eeacc1dc3244a17c91c81adc8cd79df74bf3', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, h("div", { key: '7738287fc12ce54623d20797e70b885ba643501e', class: {
+        return (h("sd-field", { key: '350c7b2df807166a1439a2151f0f168385adac4a', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, h("div", { key: 'cce989263e1c7dcb38216e734aabe6eea643676a', class: {
                 'sd-select-multiple-group': true,
                 'sd-select-multiple-group--open': this.isOpen,
                 'sd-select-multiple-group--disabled': this.disabled,

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

@@ -759,16 +759,16 @@ export class SdTable {
         return (h("td", { key: `virtual-${position}-spacer-${rowIdx}`, class: "sd-table__virtual-spacer", style: this.getSpacerCellStyle(spacerWidth), "aria-hidden": "true" }, h("div", { class: "sd-table__skeleton-cell" })));
     }
     render() {
-        return (h(Fragment, { key: '51c6e388c76a39b791e54e350d28a7ee7dd58b9e' }, h("div", { key: '8d43403b53e16173c559f6636bd5b74f3640b770', class: "sd-table__wrapper", style: {
+        return (h(Fragment, { key: 'f3e4930d36d080fd546dddc1e80190b831e93012' }, h("div", { key: 'ad2f798951631319190d93f83e25b87f871e58de', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, h("div", { key: '43d8dba10880816cb414b1df24493d5617e31bec', class: "sd-table__container", style: {
+            } }, h("div", { key: 'c4b6d4080f1416d1c88ab1413c66848bdafe9019', class: "sd-table__container", style: {
                 '--table-container-height': `calc(${this.height} - ${this.pagination && this.innerRows.length > 0 ? 48 : 0}px)`,
-            } }, h("div", { key: 'a5c9e235a77dad5d3b061951e489ceafaee2d7a6', class: {
+            } }, h("div", { key: '3aacc27970b0c6d8b700063c0af7c57175e2cb22', class: {
                 'sd-table__middle': true,
                 'sd-table__middle--scrollable': this.paginatedRows.length > 0,
                 'sd-table__middle--loading': this.isLoading,
-            } }, this.isLoading && (h("div", { key: 'b2fd19d29cb053e5747a1ff55ff109e5e154a8e0', class: "sd-table__middle--loading__spinner" }, h("sd-loading-spinner", { key: '2f16c480b25032a9547ecdca61ce1c3838eab7ba' }))), h("table", { key: 'ece092ed1ecb20a7ea7b131f8f6a4954b5bad1e3', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), !this.paginatedRows.length && (h("div", { key: '076839c1e278879a01bfae3c42b62565b30796f7', class: "sd-table__bottom" }, h("div", { key: 'e3dd7080da396abb350d31f7125f4a6f04c2f31b', class: "sd-table__no-data" }, h("slot", { key: '81181ee58a7cb9ec8c89fa0e6cf37ef50e22f019', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (h("div", { key: '14e4653021886d3d7241806429ff02430c5ff09f', class: "sd-table__pagination" }, h("sd-pagination", { key: 'e266a9bffeaf7ba012945e0866928cee7b8220d4', 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: '5ef017820acdcca279c9e1b46b79b4ba44b7dfca', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdUpdate: (e) => this.changeRowsPerPage(e.detail.value) })))))));
+            } }, this.isLoading && (h("div", { key: '25fca304a4e8ebf43aeeff20de3e3446d25e1ffb', class: "sd-table__middle--loading__spinner" }, h("sd-loading-spinner", { key: '48b0adad60cf422b884557b53097c28a4f0b8879' }))), h("table", { key: 'ec4328a1f43c865de642cc5814fbdef6a374b7e3', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), !this.paginatedRows.length && (h("div", { key: 'ba362ecb9fb8134a15ff3d0a3b8e6a523e94166a', class: "sd-table__bottom" }, h("div", { key: 'ca5c2e0b19a1e301ac159588436ef24eecfb6365', class: "sd-table__no-data" }, h("slot", { key: '68564a60a05833ba87743212d7189eef6e179fb4', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (h("div", { key: '88c3c7362234c20a60f6437ecd79d4c75b2caa6e', class: "sd-table__pagination" }, h("sd-pagination", { key: 'c3c8c435fcb752f2b1139981bb764cf4dfb153ab', 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: '03801039397a31321e5af96c2bd2d2900151240e', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdUpdate: (e) => this.changeRowsPerPage(e.detail.value) })))))));
     }
     static get is() { return "sd-table"; }
     static get originalStyleUrls() {

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

@@ -39,7 +39,7 @@ export class SdTabs {
         return `square_${this.size}_${color}`;
     }
     render() {
-        return (h("div", { key: '826e7c3a694d1243506fe8361553d476e21e71fb', class: this.getContainerClasses() }, this.tabs.map((tab, index) => {
+        return (h("div", { key: '74a25ee4311c84e79f4918b884385f27d6af6313', class: this.getContainerClasses() }, 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.value) }, h("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge && h("sd-tag", { name: badgeName, label: tab.badge.toString() })));
         })));

package/dist/collection/index.js

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

package/dist/collection/utils/modal.js

@@ -1,5 +1,10 @@
 const MODAL_CONTAINER_TAG = 'sd-modal-container';
-class ModalDialogChainImpl {
+const REASON_TO_CONTAINER = {
+    ok: 'confirm',
+    cancel: 'cancel',
+    close: 'close',
+};
+class ModalDialogRefImpl {
     modalId;
     okFn;
     cancelFn;
@@ -7,6 +12,7 @@ class ModalDialogChainImpl {
     dismissedFn;
     containerRef;
     pendingActions = [];
+    dismissRequested = false;
     constructor(id, containerRef) {
         this.modalId = id;
         this.containerRef = containerRef;
@@ -33,6 +39,25 @@ class ModalDialogChainImpl {
         });
         return this;
     }
+    ok() {
+        return this.dismiss('ok');
+    }
+    cancel() {
+        return this.dismiss('cancel');
+    }
+    close() {
+        return this.dismiss('close');
+    }
+    dismiss(reason = 'close') {
+        if (this.dismissRequested)
+            return this;
+        this.dismissRequested = true;
+        const containerReason = REASON_TO_CONTAINER[reason];
+        this.runOrQueue(() => {
+            this.containerRef.dismissById?.(this.modalId, containerReason);
+        });
+        return this;
+    }
     _triggerOk() {
         this.okFn?.();
     }
@@ -96,28 +121,39 @@ async function whenReady(el) {
         return Promise.resolve();
     throw new Error('[sdModal] `sd-modal-container` is registered but not ready to open dialogs.');
 }
+/**
+ * 프레임워크 래퍼 전용 헬퍼. Vue/React 어댑터가 modalRef 인스턴스를 먼저
+ * 생성해 컴포넌트 props 로 주입한 뒤, 실제 element 를 컨테이너에 attach
+ * 할 수 있도록 "modalRef 선공급" 경로를 제공합니다. 공개 API 가 아니며
+ * 시그니처가 바뀔 수 있습니다.
+ */
+export function _createSdModalRef() {
+    const container = getContainer();
+    return new ModalDialogRefImpl('', container);
+}
+export function _attachSdModalWithRef(modalRef, input) {
+    const { component, persist } = input;
+    const container = getContainer();
+    const options = { persistent: persist };
+    whenReady(container).then(async () => {
+        const id = await container.createCustom(component, options, modalRef);
+        modalRef._setId(id);
+    });
+}
 export const sdModal = {
     confirm(options) {
         const container = getContainer();
-        const chain = new ModalDialogChainImpl('', container);
+        const modalRef = new ModalDialogRefImpl('', container);
         whenReady(container).then(async () => {
-            const id = await container.open(options, chain);
-            chain._setId(id);
+            const id = await container.open(options, modalRef);
+            modalRef._setId(id);
         });
-        return chain;
+        return modalRef;
     },
     create(input) {
-        const { component, persist } = input;
-        const container = getContainer();
-        const chain = new ModalDialogChainImpl('', container);
-        const options = {
-            persistent: persist,
-        };
-        whenReady(container).then(async () => {
-            const id = await container.createCustom(component, options, chain);
-            chain._setId(id);
-        });
-        return chain;
+        const modalRef = _createSdModalRef();
+        _attachSdModalWithRef(modalRef, input);
+        return modalRef;
     },
     configure(options) {
         getContainer(options);

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-D-pFdq6g.js";let t=null;function n(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 e(e){return t&&document.body.contains(t)?(n(t,e),t):(t=document.createElement("sd-toast-container"),n(t,e),document.body.appendChild(t),t)}function o(t){return"function"==typeof t.create?Promise.resolve():new Promise((n=>{const e=()=>{"function"==typeof t.create?n():requestAnimationFrame(e)};requestAnimationFrame(e)}))}const i={async create(t,n,s){const{globalOptions:i,...r}=s??{},a=e(i);return await o(a),a.create({message:t,type:n,...r})},async dismiss(n){if(t)return await o(t),t.dismiss(n)},async dismissAll(){if(t)return await o(t),t.dismissAll()},configure(t){e(t)}},c="sd-modal-container";class u{modalId;okFn;cancelFn;closeFn;dismissedFn;containerRef;pendingActions=[];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}onDismissed(t){return this.dismissedFn=t,this}update(t){return this.runOrQueue((()=>{this.containerRef.update?.(this.modalId,t)})),this}_triggerOk(){this.okFn?.()}_triggerCancel(){this.cancelFn?.()}_triggerClose(){this.closeFn?.()}_triggerDismissed(){this.dismissedFn?.()}_setId(t){this.modalId=t;const n=[...this.pendingActions];this.pendingActions=[],n.forEach((t=>t()))}runOrQueue(t){this.modalId?t():this.pendingActions.push(t)}}let d=null;function l(t,n){n&&null!=n.zIndex&&t.style.setProperty("--sd-modal-container-z-index",n.zIndex+"")}function m(t){return function(){if("undefined"==typeof window||"undefined"==typeof document||"undefined"==typeof customElements)throw Error("[sdModal] Browser APIs are unavailable. Use `sdModal` only on the client.")}(),function(){if(!customElements.get(c))throw Error("[sdModal] `sd-modal-container` is not registered. Call `defineCustomElements(window)` before using `sdModal`.")}(),d&&document.body.contains(d)?(l(d,t),d):(d=document.createElement(c),l(d,t),document.body.appendChild(d),d)}async function f(t){if(await customElements.whenDefined(c),"function"==typeof t.open)return Promise.resolve();throw Error("[sdModal] `sd-modal-container` is registered but not ready to open dialogs.")}const h={confirm(t){const n=m(),e=new u("",n);return f(n).then((async()=>{const s=await n.open(t,e);e._setId(s)})),e},create(t){const{component:n,persist:e}=t,s=m(),o=new u("",s),i={persistent:e};return f(s).then((async()=>{const t=await s.createCustom(n,i,o);o._setId(t)})),o},configure(t){m(t)}};export{h as sdModal,i as sdToast}
+export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-D-pFdq6g.js";let t=null;function n(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 e(e){return t&&document.body.contains(t)?(n(t,e),t):(t=document.createElement("sd-toast-container"),n(t,e),document.body.appendChild(t),t)}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 o={async create(t,n,s){const{globalOptions:o,...r}=s??{},c=e(o);return await i(c),c.create({message:t,type:n,...r})},async dismiss(n){if(t)return await i(t),t.dismiss(n)},async dismissAll(){if(t)return await i(t),t.dismissAll()},configure(t){e(t)}},c="sd-modal-container",u={ok:"confirm",cancel:"cancel",close:"close"};class d{modalId;okFn;cancelFn;closeFn;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}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=u[t];return this.runOrQueue((()=>{this.containerRef.dismissById?.(this.modalId,n)})),this}_triggerOk(){this.okFn?.()}_triggerCancel(){this.cancelFn?.()}_triggerClose(){this.closeFn?.()}_triggerDismissed(){this.dismissedFn?.()}_setId(t){this.modalId=t;const n=[...this.pendingActions];this.pendingActions=[],n.forEach((t=>t()))}runOrQueue(t){this.modalId?t():this.pendingActions.push(t)}}let l=null;function m(t,n){n&&null!=n.zIndex&&t.style.setProperty("--sd-modal-container-z-index",n.zIndex+"")}function h(t){return function(){if("undefined"==typeof window||"undefined"==typeof document||"undefined"==typeof customElements)throw Error("[sdModal] Browser APIs are unavailable. Use `sdModal` only on the client.")}(),function(){if(!customElements.get(c))throw Error("[sdModal] `sd-modal-container` is not registered. Call `defineCustomElements(window)` before using `sdModal`.")}(),l&&document.body.contains(l)?(m(l,t),l):(l=document.createElement(c),m(l,t),document.body.appendChild(l),l)}async function f(t){if(await customElements.whenDefined(c),"function"==typeof t.open)return Promise.resolve();throw Error("[sdModal] `sd-modal-container` is registered but not ready to open dialogs.")}function p(){const t=h();return new d("",t)}function w(t,n){const{component:e,persist:s}=n,i=h(),o={persistent:s};f(i).then((async()=>{const n=await i.createCustom(e,o,t);t._setId(n)}))}const y={confirm(t){const n=h(),e=new d("",n);return f(n).then((async()=>{const s=await n.open(t,e);e._setId(s)})),e},create(t){const n=p();return w(n,t),n},configure(t){h(t)}};export{w as _attachSdModalWithRef,p as _createSdModalRef,y as sdModal,o as sdToast}