@sellmate/design-system 1.0.45 → 1.0.47

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

@@ -61,13 +61,13 @@ export class SdButtonV2 {
         const hasLabel = Boolean(this.label);
         const iconOnly = !this.label && Boolean(this.icon);
         const accessibleName = iconOnly && this.ariaLabel.trim() ? this.ariaLabel : undefined;
-        return (h("button", { key: 'bf5687b1ddd3219232c88462b4067203ae2c3d14', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
+        return (h("button", { key: '3ab72bde2ff033ba8bd23b1f419b3a2f879b9476', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
                 '--sd-button-v2-bg': config.variant === 'primary' ? config.color : '#FFFFFF',
                 '--sd-button-v2-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
                 '--sd-button-v2-border': PRESET_BORDER_COLORS[preset],
                 '--sd-button-v2-content': PRESET_CONTENT_COLORS[preset],
                 '--sd-button-v2-accent': BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, h("span", { key: '3294cdbae8d44d06ea800f701af23e5a228cca51', class: "sd-button-v2__content" }, this.icon && (h("sd-icon", { key: '707c6716a97ac1c710d546eff6d4a2fb3c3b6206', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-content)" })), this.label && h("span", { key: 'f63f7c887ca2ee066dfb4c65fdd2e3586109a5dd', class: "sd-button-v2__label" }, this.label))));
+            }, onClick: this.handleClick }, h("span", { key: 'acc839b6b89aef8065b7b5942167a0509496b689', class: "sd-button-v2__content" }, this.icon && (h("sd-icon", { key: 'c751c89dc2741800277f9b987b69d628b120da7f', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-content)" })), this.label && h("span", { key: '23f351d1a8b1c8b40a3da70ecf9f82b1ccf9e65c', class: "sd-button-v2__label" }, this.label))));
     }
     static get is() { return "sd-button-v2"; }
     static get originalStyleUrls() {
@@ -134,7 +134,7 @@ export class SdButtonV2 {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrow2Down\" | \"arrow2Left\" | \"arrow2Right\" | \"arrow2Up\" | \"arrow2UpDown\" | \"arrowDown\" | \"arrowLeft\" | \"arrowLeftEnd\" | \"arrowRight\" | \"arrowRightEnd\" | \"arrowUp\" | \"attachFile\" | \"badgeNew\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFilled\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFilled\" | \"checkOutline\" | \"clockFilled\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"etc\" | \"event\" | \"global\" | \"helpFilled\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageLine\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"notificationFilled\" | \"notificationOutline\" | \"notion\" | \"outLine\" | \"pageEdit\" | \"pageEdit2\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseLine\" | \"warehouseSolid\" | \"warningFilled\" | \"warningOutline\" | \"youtube\" | undefined",
+                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\" | undefined",
                     "references": {
                         "IconName": {
                             "location": "global",

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

@@ -3,7 +3,7 @@ export class SdCard {
     bordered = false;
     sdClass = '';
     render() {
-        return (h(Fragment, { key: '155504b50cb1c21fc1f847af8a9e8b685f7881ef' }, h("div", { key: 'c461e3e40da44586da5e02ad508bf59942a9e82a', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: '0c0ee023155c08c565c3496c44699a900666b084' }))));
+        return (h(Fragment, { key: 'baaae6d4953d94fbc20cbd3762af5c63dd16ec97' }, h("div", { key: '3505306be16d71a4eec5b479326d277294c64c66', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: 'f63c4a21b91cc398acb255a85d039f0d82c55857' }))));
     }
     static get is() { return "sd-card"; }
     static get originalStyleUrls() {

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

@@ -18,6 +18,7 @@ export class SdConfirmModal {
     slotLabel = '';
     tagContents;
     close;
+    cancel;
     ok;
     componentWillLoad() {
         this.syncHasSlottedContent();
@@ -66,9 +67,9 @@ export class SdConfirmModal {
     render() {
         const iconName = CONFIRM_MODAL_ICON_MAP[this.type];
         const iconColor = CONFIRM_MODAL_ICON_COLOR[this.type];
-        return (h("div", { key: '9dd835c1020a29e99257690b5d4d6038b13fe5e4', class: "sd-confirm-modal" }, h("sd-icon", { key: '17fea9642aabb047a8017c37beffe3e0b64707c2', class: "sd-confirm-modal__close-button", name: "close", size: CLOSE_ICON_SIZE, color: CLOSE_ICON_COLOR, onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '5198d65dbac64b483f63f8a65f7cad987a14e24b', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: '045887b2224ed46f4d6158a2d3ffc25261a0156d', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), h("div", { key: '7f9ce8c5bef7a8f9ee580671ccdb79c093066ee3', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: 'ac533ca4a1dc011d0bbb0c5c72c14228f680741a', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (h("div", { key: '2fde04429ca9efb0b9ae30116e9a0fd7f57b904e', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        return (h("div", { key: '7f4965b642b3963fd3d0614b3e8b3fae8e8ae179', class: "sd-confirm-modal" }, h("sd-icon", { key: '4c2479d3afbc4c900dc4d329a8aaa04b6f520bb3', class: "sd-confirm-modal__close-button", name: "close", size: CLOSE_ICON_SIZE, color: CLOSE_ICON_COLOR, onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: 'ec3f165135429b8a409e304bedff32897bd6566a', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: 'd2aae4878396d9bd714db26847ecad677e7a4cfb', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), h("div", { key: '76b9c1fcfaae36edbd56c4d494013829456def98', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '636b0c6ce6bcba2722fae64ed582d90ce4f25367', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (h("div", { key: '1000f4f7e2674025ce3d220461828ab95e28eea8', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
                 this.customContentRef = el;
-            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '5f97a8bf91a60b553b21d80f4b133d2c79e97ba6', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), h("div", { key: '4cde2779f11b274d71b90dd75584f8ccd9d3044d', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button-v2", { key: '9e64571f556c6cfdb9c69dc70e54a2f4bdec7bb6', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.close.emit() })), h("sd-button-v2", { key: 'dd86f7cce973862d94e26910341995f743e1944b', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
+            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '3c6c0141dc0807725b92e824ccdedf3609d46484', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), h("div", { key: 'fc73a08c85231570f72a9899ffee5cbd0c8882ba', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button-v2", { key: 'dcbf92525246d05e57896340c3ef5761a574a08f', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button-v2", { key: '146c0b3c0183773ba03c2bde150add46618f181b', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
     }
     static get is() { return "sd-confirm-modal"; }
     static get originalStyleUrls() {
@@ -364,6 +365,21 @@ export class SdConfirmModal {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "cancel",
+                "name": "sdCancel",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }, {
                 "method": "ok",
                 "name": "sdOk",

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

@@ -27,7 +27,7 @@ export class SdDatePicker {
         this.viewChange.emit(e.detail);
     };
     render() {
-        return (h("div", { key: '308b6e499027b7316199713cddb8253308cee41d', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, h("sd-input", { key: '37afc5dd38a77e9e1a3c80df8c589cd1ee6f6185', ref: el => (this.inputEl = el), value: this.value, addonLabel: this.label, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: '91ca438a2ca3795d10a7671a6fc807eca11c4943', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '85bb2503ec3e9d928e572835a5a750a12972af70', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '9b8ccf203b013189df1ad9ecad9f5956a5dd7cef', class: "sd-date-picker__menu" }, h("sd-calendar", { key: 'b314b4c809cd4675d97892a5873fed8fdfb2b046', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange }))))));
+        return (h("div", { key: '160bd9b2bbd9d223d4df341ed2fbba79c1701c13', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, h("sd-input", { key: 'cf7c72c144f1222308eb936a14d1786863019126', ref: el => (this.inputEl = el), value: this.value, addonLabel: this.label, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: '8651ba1d36749667f53e9f064b973cb336389ab3', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '6ee759cf5cbb0afc4cd8adf704a489ef6cffc8f9', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '96c038fea5102ffd780fd296534cc294bd1c6912', class: "sd-date-picker__menu" }, h("sd-calendar", { key: 'bc8d14f98d5d56e6775f083e4096d1113c28a658', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange }))))));
     }
     static get is() { return "sd-date-picker"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js

@@ -158,16 +158,16 @@ export class SdDateRangePicker {
         this.setHoverDate(hoverDate);
     }
     render() {
-        return (h("div", { key: '8870de35f713f9b5cd7756e87dcca0bff60acbcd', class: {
+        return (h("div", { key: 'ed71379abf9d60bfa21c9888ba0f84f543bc0fe2', class: {
                 'sd-date-range-picker': true,
                 'sd-date-range-picker--disabled': this.disabled,
-            } }, h("sd-input", { key: '602f5be4d5cf9cbd378ca1236ee28969b5e9ba12', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', addonLabel: this.label, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: '06a5bf3feaea7606bddad3fa2e655d0cfbaaf89b', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '2e27d6573a72ba2639dc873e7e295b432908a954', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, h("div", { key: 'b682a2ae8fdc168a56d77b32b05b239f2eb5a6cc', class: "sd-date-range-picker__menu" }, h("div", { key: '34b4d36dca8a51c7adae9584e62cd0aaf26021d8', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: '47448fcf5ebc6cf8fd242119c7f318c72f69cd90', type: "button", name: "prev", title: "Previous", onClick: () => {
+            } }, h("sd-input", { key: 'd9b4269ee29ddf23dd80b5bcad2ded0d5edae8a6', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', addonLabel: this.label, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: 'a30448daa738ee75925974735f7a9948a47761e1', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '553abd0af76848be54788518507fbf0cc20db111', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, h("div", { key: '152fb19e5c8dbd5e5f978b11868cc71b382255d8', class: "sd-date-range-picker__menu" }, h("div", { key: '5d290d39d6aa8cc0d3a4394ac2f1d4bc93428bb3', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: 'b20caad91457bda87690629aa3fc34d4d2c5a673', type: "button", name: "prev", title: "Previous", onClick: () => {
                 this.setPrevYear(this.prevYear - 1);
                 this.viewChange.emit({ year: this.prevYear, month: this.prevMonth });
-            } }, h("sd-icon", { key: '5f05f690e1493854c5c91b1b7e6c7f92b2285fe0', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: 'b8c1d2c567eda67a4c8f7a7e2aac740fe8c8a306', class: "header-label" }, this.prevYear), h("button", { key: '447fd54a95756777f665e628ccf747cf5c9f8bfa', type: "button", name: "next", title: "Next", onClick: () => {
+            } }, h("sd-icon", { key: '5f0e8014992b7269aed7d97a4a56263349c90afa', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: 'f324d84e338aa2779e471a123fc7b5220900389d', class: "header-label" }, this.prevYear), h("button", { key: '18e331eb0c8fe3cc1eba2b718433ca7f7ec17b3e', type: "button", name: "next", title: "Next", onClick: () => {
                 this.setPrevYear(this.prevYear + 1);
                 this.viewChange.emit({ year: this.prevYear, month: this.prevMonth });
-            } }, h("sd-icon", { key: '0aeca212fd4ba80c91cdfeb092bcfc7b426ce3cb', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '1858318f65bde16201f9792499b246432f5c80f4', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
+            } }, h("sd-icon", { key: '1ec935fbbb3ecbafb42df34905f62753dfd49da2', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '47af9712b96158741a3fed052f4b1eb7bca08eef', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
             ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
             : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date === this.formatDate(index, Number(day))), type: this.getDateBoxType(this.formatDate(index, Number(day))), isToday: today === this.formatDate(index, Number(day)), disabled: !day ? true : this.isDisabledDate(this.formatDate(index, Number(day))), inRange: this.isDateInRange(this.formatDate(index, Number(day))), isStartDate: this.dateRange[0] === this.formatDate(index, Number(day)), isEndDate: this.dateRange[1] === this.formatDate(index, Number(day)), onSdClick: () => this.handleDateClick(index, Number(day)), onSdMouseOver: () => this.handleDateHover(index, Number(day)) }))))))))))))));
     }

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

@@ -186,7 +186,7 @@ export class SdDropdownButton extends BaseDropdownEvent {
     }
     render() {
         const { config, preset } = this.resolvedConfig;
-        return (h("div", { key: 'bdaf7f90ca47cc650fb60ed95b7e6ddeb688feaf', class: "sd-dropdown-button" }, h("button", { key: 'eb31263b21ddcd07e6a59c17ddb88af6906136b4', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
+        return (h("div", { key: '7398f76731b0d11fffe9b4f5353630e59c183b66', class: "sd-dropdown-button" }, h("button", { key: '811a86ae4fcf25b76025f6e0168d5915a893edd9', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
                 '--sd-dropdown-button-min-width': `${DROPDOWN_BUTTON_MIN_WIDTHS[config.size]}px`,
                 '--sd-dropdown-button-bg': config.color,
                 '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
@@ -197,10 +197,10 @@ export class SdDropdownButton extends BaseDropdownEvent {
                 '--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
                 '--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_CONTENT,
                 '--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
-            } }, h("span", { key: 'b9501cbab79d5472e9680528282191d97fb9c579', class: "sd-dropdown-button__trigger-label" }, this.label), h("span", { key: '83c6b1e937bb7f7d676561d607e8223d05897715', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), h("span", { key: '58b1ed6195672372ecd180c9567bc74aeefb1db9', class: {
+            } }, h("span", { key: 'adcf634bd7c325ec746635c153edf4b9e3d7b677', class: "sd-dropdown-button__trigger-label" }, this.label), h("span", { key: '533dfeaf615784543c802b825e8640cd2c873de2', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), h("span", { key: '200c1133e33e8c2cae4f20ff442ca247fef2764b', class: {
                 'sd-dropdown-button__trigger-icon': true,
                 'sd-dropdown-button__trigger-icon--open': this.isOpen,
-            }, "aria-hidden": "true" }, h("sd-icon", { key: 'd7dfe4aef651f4f55ed661f1d84850009a61bb2e', name: "arrowDown", size: 12, color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
+            }, "aria-hidden": "true" }, h("sd-icon", { key: 'e8ebd083b1d3c1375eb51cf5e2757df3bbb759a5', name: "chevronDown", size: 12, color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
     }
     static get is() { return "sd-dropdown-button"; }
     static get originalStyleUrls() {

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

@@ -132,15 +132,15 @@ export class SdField {
                 ? addonTokens.border.disabled
                 : addonTokens.border.default,
         } : {};
-        return (h("div", { key: '1badb3752c758c30995188f73505d912f4318ba3', class: {
+        return (h("div", { key: 'cb0844dfad82a3287253598ace0e70e761ca2cdd', class: {
                 'sd-field': true,
                 'sd-field--has-label': !!this.label,
                 'sd-field--has-addon': !!addon,
                 [this.fieldStatus]: !!this.fieldStatus,
-            }, style: addonCssVars }, h("div", { key: 'b8c08b4783eb7035cc28e6ffb1d541871cd25616', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '31efca0604479d2fa9bed06aaaeb9ca9930c62fb', class: {
+            }, style: addonCssVars }, h("div", { key: '788b8352737f10eec26195931cd22a405607b2af', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'e3164e47bbeec19e7b150c3e2a7ef75a96896db4', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': !!addon,
-            }, style: this.width ? { width: typeof this.width === 'number' ? `${this.width}px` : this.width, flex: 'none' } : {} }, addon && (h("div", { key: '159191a432603cbfa4b1755fc7f4c784868b3749', class: "sd-field__addon" }, addon)), h("slot", { key: '58918e5af7dc2564af8d86b24cb5972cb9d0d67f' }))), (this.errorMsg || this.errorMessage)
+            }, style: this.width ? { width: typeof this.width === 'number' ? `${this.width}px` : this.width, flex: 'none' } : {} }, addon && (h("div", { key: '12baae30b329494312e8fe3160556717f1f8d979', class: "sd-field__addon" }, addon)), h("slot", { key: 'f231342560a5b45448ddc6ad370cce414ca68052' }))), (this.errorMsg || this.errorMessage)
             ? h("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)
             : this.hint && h("div", { class: "sd-field__hint" }, this.hint)));
     }

package/dist/collection/components/sd-file-picker/sd-file-picker.js

@@ -91,15 +91,15 @@ export class SdFilePicker {
     render() {
         const hasFiles = this.hasFiles();
         const displayText = this.getDisplayText();
-        return (h("div", { key: '3133b2f12d79b36a0f21bbb1d93ae738f35611ce', class: {
+        return (h("div", { key: '70152265f5fc43ddcda4318545698a58ee116b67', class: {
                 'sd-file-picker': true,
                 [this.getStatusClass()]: true,
                 'sd-file-picker--inline': this.inline,
-            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("input", { key: '56bad5fd0fbd58effe130828312a2b199a132e3b', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), h("sd-icon", { key: 'b1bba7f527e177a51939c98eefe0ca7b84dada7e', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: '3a8717611a8716c64a028e5f2c8ac1784797e68c', ref: el => (this.fileNamesRef = el), class: {
+            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("input", { key: '138e570a3660e8e79790da78a1527ff6eed8d313', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), h("sd-icon", { key: '1d81730bd5fd82dda6e73ae86a62e9c4c0e0470a', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: '4a433e8403beb6e953cd64726306df16e7560daa', ref: el => (this.fileNamesRef = el), class: {
                 'sd-file-picker__text': true,
                 'sd-file-picker__text--placeholder': !hasFiles,
                 'sd-file-picker__text--active': hasFiles,
-            } }, displayText), !this.disabled && hasFiles && (h("sd-icon", { key: 'd05a21388823cc596d8c2f9e31f3fc39a2b84d09', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: '24c65a0b7743fa66d44d24cc12bfff46172d620e', class: "sd-file-picker__tooltip" }, displayText))));
+            } }, displayText), !this.disabled && hasFiles && (h("sd-icon", { key: 'be2c64f7d28d6fe5c4146508f1544a3bb9fa6c8f', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: '42659b157f11b26d7abd740b4a3761ad3dbf0b0a', class: "sd-file-picker__tooltip" }, displayText))));
     }
     static get is() { return "sd-file-picker"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-floating-portal/sd-floating-portal.js

@@ -144,7 +144,7 @@ export class SdFloatingPopover {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: 'b22243353a2cecfc6407672dafe32cc1ed5086de' });
+        return h("slot", { key: '4eecedc457f691ec888cd27da4f28aef73d14f73' });
     }
     static get is() { return "sd-floating-portal"; }
     static get originalStyleUrls() {

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

@@ -47,9 +47,9 @@ export class SdGuide {
     };
     render() {
         const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (h("div", { key: 'd6736d62ad87e750ed147e48d36d05e4304dae2b', class: "sd-guide", style: {
+        return (h("div", { key: '89499e72eef00e3ec8a18f3cdafa4a204653c22f', class: "sd-guide", style: {
                 '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, h("sd-button", { key: '430e29a73b5bc5380f33773a13c53bc7d6f86590', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '2b68fd8e9b67c831d212a90c0863551e022de7da', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '735de560510986e014611a2388b4eda55412282f', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: '33f612c4c2241f539a84eee6ab8d5ae8d7f933bd', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: '6770783357a95ade4f1037f55397394b64624e2b', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), h("div", { key: '1f5d49db7e830f14937db99348f0e1f2332db377', class: "sd-guide__popup__header" }, h("sd-icon", { key: '69faeb8e2de8e4d4895e0cd0938a027bcff2277b', name: "helpOutline", size: 24, color: "green_65" }), h("h3", { key: 'c87c814502da7534382cf72b2bc2ab30003d7803', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: '73a66a5a39d0b7c5eb9f4076eafdc0a8bf067deb', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
+            } }, h("sd-button", { key: '20b7c0b5ec7ac13075db533c63c99ff8140a8a80', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: 'db9fcfe211fc1b35f1111d09fa3c6d105b08bb62', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '8bd28388e0492bd909e440c0ddf8850aeb2abc92', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: '3ac75e22a37abaf94422acb66be7056a4ecad289', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: '2bef90a771e50f1f31823b6eca7f890645b329a8', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), h("div", { key: '603e334f19b7ce0afaddfdbe9890f58071bd6638', class: "sd-guide__popup__header" }, h("sd-icon", { key: '219dd58caf462d77b814828e1ba61a6f958acba3', name: "helpOutline", size: 24, color: "green_65" }), h("h3", { key: 'f225bdf560d43079c87c9345e09f134ef27cf1d4', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: '2fb791f2392f0d38554f5a688660eae90ff34f9f', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {

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

@@ -5,7 +5,7 @@ export class SdIcon {
     /** 아이콘명 */
     name;
     /** 아이콘 크기 */
-    size = 12;
+    size = 24;
     /** 아이콘 색상 */
     color;
     /** 회전 각도 (0, 90, 180, 270) */
@@ -24,8 +24,11 @@ export class SdIcon {
         return resolveColor(this.color);
     }
     render() {
-        const IconComponent = Icons[this.name]?.[this.size];
-        return (h("i", { key: '64d1789805536124f229d7dde816ef986d583276', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: '35ba2d95f6e3e9d7cb346b4872ba1a436a08e04d', color: this.resolvedColor })));
+        const IconComponent = Icons[this.name];
+        if (!IconComponent) {
+            return null;
+        }
+        return (h("i", { class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { size: this.size, color: this.resolvedColor })));
     }
     static get is() { return "sd-icon"; }
     static get originalStyleUrls() {
@@ -45,7 +48,7 @@ export class SdIcon {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrow2Down\" | \"arrow2Left\" | \"arrow2Right\" | \"arrow2Up\" | \"arrow2UpDown\" | \"arrowDown\" | \"arrowLeft\" | \"arrowLeftEnd\" | \"arrowRight\" | \"arrowRightEnd\" | \"arrowUp\" | \"attachFile\" | \"badgeNew\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFilled\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFilled\" | \"checkOutline\" | \"clockFilled\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"etc\" | \"event\" | \"global\" | \"helpFilled\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageLine\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"notificationFilled\" | \"notificationOutline\" | \"notion\" | \"outLine\" | \"pageEdit\" | \"pageEdit2\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseLine\" | \"warehouseSolid\" | \"warningFilled\" | \"warningOutline\" | \"youtube\"",
+                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\"",
                     "references": {
                         "IconName": {
                             "location": "global",
@@ -82,7 +85,7 @@ export class SdIcon {
                 "setter": false,
                 "reflect": false,
                 "attribute": "size",
-                "defaultValue": "12"
+                "defaultValue": "24"
             },
             "color": {
                 "type": "string",

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

@@ -104,10 +104,10 @@ export class SdInput {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (h("sd-field", { key: '82adfc401e74a6d823aa4f95442aa74b663e3ee4', name: this.name, label: this.label, addonLabel: this.addonLabel, 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("label", { key: '6c7a76e6d863cddf4e7ca83d1231255fe5e7edea', class: "sd-input__content" }, h("slot", { key: '14ab01247317f114f92127b6c1c43c42251fa90c', name: "prefix" }), h("input", { key: 'ee546204bc6cfa28f8e42dce6deebdf251dc04da', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '4f52aa176c00462996d8794da1d8fd86c468e132', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '40ab163ef22e68a261e639ec5d8fb3bc1d6cd42a', name: "close", color: INPUT_COLORS.icon.default, size: INPUT_ICON.iconSize, class: "sd-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: '421eeff951b21ce57727ab023c026c7b00d97a36', name: this.name, label: this.label, addonLabel: this.addonLabel, 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("label", { key: '90e8182f3c2ea87696311eabc6bb33c8def7bc1d', class: "sd-input__content" }, h("slot", { key: '4a8f311ae31036ffc2bce4ca0b2fd42799287339', name: "prefix" }), h("input", { key: 'c3d69ca0146358eccf80565a557e5e94490953d2', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: 'd0d5aa897fee76985c87e72d7fa48541dfeead1e', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: 'c57f105b957d4fa70c9dd1eec0d359c599945038', name: "close", color: INPUT_COLORS.icon.default, size: INPUT_ICON.iconSize, class: "sd-input__clear-icon", onClick: async () => {
                 this.internalValue = '';
                 await this.formField?.sdValidate();
-            } })), this.type === 'password' && (h("sd-icon", { key: 'd841ed3ca46d065048107b8733c41e63155b0990', name: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', color: INPUT_COLORS.icon.default, size: INPUT_ICON.frameSize, class: "sd-input__password-icon", onClick: () => { this.passwordVisible = !this.passwordVisible; } })))));
+            } })), this.type === 'password' && (h("sd-icon", { key: '75c80ff0143ae0351dafe5166855132af3516b00', name: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', color: INPUT_COLORS.icon.default, size: INPUT_ICON.frameSize, class: "sd-input__password-icon", onClick: () => { this.passwordVisible = !this.passwordVisible; } })))));
     }
     static get is() { return "sd-input"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-loading-spinner/sd-loading-spinner.js

@@ -6,7 +6,7 @@ export class SdLoadingSpinner {
         return resolveColor(this.color);
     }
     render() {
-        return (h(Fragment, { key: 'debc93482bd2c47f317457fd97ee2bf40b6f3e59' }, h("svg", { key: '915a8e743e9286e32c81b1bf49714da01ba9a1c3', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, h("circle", { key: '04abf57521d77d5492a0e5553a7f64017fe0d1a3', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+        return (h(Fragment, { key: '739d89956c75131c785c9037495509783fbcfe7a' }, h("svg", { key: '3938cc3d2f2abbb51477f900222b4ba434411e6a', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, h("circle", { key: '4a21337e193f56c62da1268d3bf6d56651263771', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
     }
     static get is() { return "sd-loading-spinner"; }
     static get originalStyleUrls() {

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

@@ -17,33 +17,66 @@ export class SdModalContainer {
                 this.shakeModal(top.modalEl);
                 return;
             }
-            this.requestDismiss(top.id, 'close');
+            this.dispatchClose(top.modalEl);
         }
     }
     async open(options, chain) {
         const id = `modal-${++modalIdCounter}`;
         const modalEl = this.createConfirmModal(id, options);
+        this.attachModalEventListeners(id, modalEl);
+        this.registerEntry(id, modalEl, chain, {
+            persistent: !!options.persistent,
+        });
+        return id;
+    }
+    async createCustom(element, options, chain) {
+        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, {
+            persistent: !!options.persistent,
+        });
+        return id;
+    }
+    attachModalEventListeners(id, modalEl) {
+        modalEl.addEventListener('sdOk', () => this.requestDismiss(id, 'confirm'));
+        modalEl.addEventListener('sdCancel', () => this.requestDismiss(id, 'cancel'));
+        modalEl.addEventListener('sdClose', () => this.requestDismiss(id, 'close'));
+    }
+    dispatchClose(modalEl) {
+        modalEl.dispatchEvent(new CustomEvent('sdClose'));
+    }
+    registerEntry(id, modalEl, chain, meta) {
         if (this.containerDismissTimerId) {
             clearTimeout(this.containerDismissTimerId);
             this.containerDismissTimerId = undefined;
         }
-        this.entries = [...(this.entries ?? []), { id, modalEl, chain, persistent: !!options.persistent, closeAction: options.closeAction ?? 'none', closing: false }];
+        this.entries = [
+            ...(this.entries ?? []),
+            {
+                id,
+                modalEl,
+                chain,
+                persistent: meta.persistent,
+                closing: false,
+            },
+        ];
         this.isVisible = true;
         requestAnimationFrame(() => {
-            if (this.contentRef) {
-                this.contentRef.appendChild(modalEl);
-                this.waitForModalReady(modalEl).then(() => {
-                    requestAnimationFrame(() => {
-                        const currentEntry = (this.entries ?? []).find(item => item.id === id);
-                        if (!currentEntry || currentEntry.closing || !modalEl.isConnected)
-                            return;
-                        this.isBackdropVisible = true;
-                        modalEl.classList.add('sd-modal-container__modal--visible');
-                    });
+            if (!this.contentRef)
+                return;
+            this.contentRef.appendChild(modalEl);
+            this.waitForModalReady(modalEl).then(() => {
+                requestAnimationFrame(() => {
+                    const currentEntry = (this.entries ?? []).find(item => item.id === id);
+                    if (!currentEntry || currentEntry.closing || !modalEl.isConnected)
+                        return;
+                    this.isBackdropVisible = true;
+                    modalEl.classList.add('sd-modal-container__modal--visible');
                 });
-            }
+            });
         });
-        return id;
     }
     async update(id, props) {
         const entry = (this.entries ?? []).find(e => e.id === id);
@@ -56,12 +89,6 @@ export class SdModalContainer {
         el.setAttribute('data-modal-id', id);
         el.classList.add('sd-modal-container__modal');
         this.applyProps(el, options);
-        el.addEventListener('sdOk', () => {
-            this.requestDismiss(id, 'confirm');
-        });
-        el.addEventListener('sdClose', () => {
-            this.requestDismiss(id, 'close');
-        });
         return el;
     }
     applyProps(el, options) {
@@ -101,7 +128,7 @@ export class SdModalContainer {
             this.shakeModal(top.modalEl);
             return;
         }
-        this.requestDismiss(top.id, 'close');
+        this.dispatchClose(top.modalEl);
     };
     shakeModal(modalEl) {
         const cls = 'sd-modal-container__modal--shake';
@@ -135,18 +162,12 @@ export class SdModalContainer {
             this.finalizeDismiss(id);
         }, ANIMATION_DURATION);
         this.entries = (this.entries ?? []).map(item => item.id === id ? { ...item, closing: true, dismissTimerId } : item);
-        if (reason === 'close') {
-            if (entry.closeAction === 'ok')
-                entry.chain._triggerOk();
-            else if (entry.closeAction === 'cancel')
-                entry.chain._triggerCancel();
-        }
-        else {
-            if (reason === 'confirm')
-                entry.chain._triggerOk();
-            if (reason === 'cancel')
-                entry.chain._triggerCancel();
-        }
+        if (reason === 'confirm')
+            entry.chain._triggerOk();
+        else if (reason === 'cancel')
+            entry.chain._triggerCancel();
+        else if (reason === 'close')
+            entry.chain._triggerClose();
     }
     finalizeDismiss(id) {
         const entry = (this.entries ?? []).find(item => item.id === id);
@@ -165,6 +186,7 @@ export class SdModalContainer {
                 this.containerDismissTimerId = undefined;
             }, ANIMATION_DURATION);
         }
+        entry.chain._triggerDismissed();
     }
     waitForModalReady(modalEl) {
         const componentOnReady = modalEl.componentOnReady;
@@ -250,6 +272,51 @@ export class SdModalContainer {
                     "tags": []
                 }
             },
+            "createCustom": {
+                "complexType": {
+                    "signature": "(element: HTMLElement, options: SdModalCreateOptions, chain: ModalDialogChainLike) => Promise<string>",
+                    "parameters": [{
+                            "name": "element",
+                            "type": "HTMLElement",
+                            "docs": ""
+                        }, {
+                            "name": "options",
+                            "type": "SdModalCreateOptions",
+                            "docs": ""
+                        }, {
+                            "name": "chain",
+                            "type": "ModalDialogChainLike",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        },
+                        "SdModalCreateOptions": {
+                            "location": "import",
+                            "path": "./sd-modal-container.config",
+                            "id": "src/components/sd-modal-container/sd-modal-container.config.ts::SdModalCreateOptions",
+                            "referenceLocation": "SdModalCreateOptions"
+                        },
+                        "ModalDialogChainLike": {
+                            "location": "import",
+                            "path": "./sd-modal-container.config",
+                            "id": "src/components/sd-modal-container/sd-modal-container.config.ts::ModalDialogChainLike",
+                            "referenceLocation": "ModalDialogChainLike"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
             "update": {
                 "complexType": {
                     "signature": "(id: string, props: Partial<ConfirmModalOptions>) => Promise<void>",
@@ -259,7 +326,7 @@ export class SdModalContainer {
                             "docs": ""
                         }, {
                             "name": "props",
-                            "type": "{ type?: ConfirmModalType | undefined; title?: string | undefined; titleClass?: string | undefined; topMessage?: string[] | undefined; bottomMessage?: string[] | undefined; mainButtonName?: ConfirmModalMainButton | undefined; mainButtonLabel?: string | undefined; subButtonLabel?: string | undefined; tagPreset?: \"square_sm_red\" | \"square_sm_orange\" | \"square_sm_yellow\" | \"square_sm_green\" | \"square_sm_blue\" | \"square_sm_darkblue\" | \"square_sm_indigo\" | \"square_sm_grey\" | \"square_md_red\" | \"square_md_orange\" | \"square_md_yellow\" | \"square_md_green\" | \"square_md_blue\" | \"square_md_darkblue\" | \"square_md_indigo\" | \"square_md_grey\" | \"square_xs_red\" | \"square_xs_orange\" | \"square_xs_yellow\" | \"square_xs_green\" | \"square_xs_blue\" | \"square_xs_darkblue\" | \"square_xs_indigo\" | \"square_xs_grey\" | \"pill_sm_red\" | \"pill_sm_orange\" | \"pill_sm_yellow\" | \"pill_sm_green\" | \"pill_sm_blue\" | \"pill_sm_darkblue\" | \"pill_sm_indigo\" | \"pill_sm_grey\" | \"pill_md_red\" | \"pill_md_orange\" | \"pill_md_yellow\" | \"pill_md_green\" | \"pill_md_blue\" | \"pill_md_darkblue\" | \"pill_md_indigo\" | \"pill_md_grey\" | \"pill_xs_red\" | \"pill_xs_orange\" | \"pill_xs_yellow\" | \"pill_xs_green\" | \"pill_xs_blue\" | \"pill_xs_darkblue\" | \"pill_xs_indigo\" | \"pill_xs_grey\" | undefined; tagLabel?: string | undefined; slotLabel?: string | undefined; tagContents?: HTMLElement | undefined; persistent?: boolean | undefined; closeAction?: CloseAction | undefined; }",
+                            "type": "{ type?: ConfirmModalType | undefined; title?: string | undefined; titleClass?: string | undefined; topMessage?: string[] | undefined; bottomMessage?: string[] | undefined; mainButtonName?: ConfirmModalMainButton | undefined; mainButtonLabel?: string | undefined; subButtonLabel?: string | undefined; tagPreset?: \"square_sm_red\" | \"square_sm_orange\" | \"square_sm_yellow\" | \"square_sm_green\" | \"square_sm_blue\" | \"square_sm_darkblue\" | \"square_sm_indigo\" | \"square_sm_grey\" | \"square_md_red\" | \"square_md_orange\" | \"square_md_yellow\" | \"square_md_green\" | \"square_md_blue\" | \"square_md_darkblue\" | \"square_md_indigo\" | \"square_md_grey\" | \"square_xs_red\" | \"square_xs_orange\" | \"square_xs_yellow\" | \"square_xs_green\" | \"square_xs_blue\" | \"square_xs_darkblue\" | \"square_xs_indigo\" | \"square_xs_grey\" | \"pill_sm_red\" | \"pill_sm_orange\" | \"pill_sm_yellow\" | \"pill_sm_green\" | \"pill_sm_blue\" | \"pill_sm_darkblue\" | \"pill_sm_indigo\" | \"pill_sm_grey\" | \"pill_md_red\" | \"pill_md_orange\" | \"pill_md_yellow\" | \"pill_md_green\" | \"pill_md_blue\" | \"pill_md_darkblue\" | \"pill_md_indigo\" | \"pill_md_grey\" | \"pill_xs_red\" | \"pill_xs_orange\" | \"pill_xs_yellow\" | \"pill_xs_green\" | \"pill_xs_blue\" | \"pill_xs_darkblue\" | \"pill_xs_indigo\" | \"pill_xs_grey\" | undefined; tagLabel?: string | undefined; slotLabel?: string | undefined; tagContents?: HTMLElement | undefined; persistent?: boolean | undefined; }",
                             "docs": ""
                         }],
                     "references": {

package/dist/collection/components/sd-number-input/sd-number-input.js

@@ -242,17 +242,17 @@ export class SdNumberInput {
         const inputStyles = {
             textAlign: this.useButton ? 'center' : 'right',
         };
-        return (h("sd-field", { key: '7c278ee43828ff5619efe471b7f2a8c6ea09c300', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), style: inputWidth }, h("label", { key: '10987e5255b183d774affb873866d2fab5721997', class: {
+        return (h("sd-field", { key: '6951d11c493d35757c7fae5f9b22314798aa049f', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), style: inputWidth }, h("label", { key: 'adae8f831085b29df56a22fbe1d8420f5b6f3a68', class: {
                 'sd-number-input': true,
                 [this.getInputStatus()]: true,
                 'sd-number-input--with-buttons': this.useButton,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("input", { key: 'ea09e409d3c4c0a9e59b57b8f0d9211ca271b0ed', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__input ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, style: inputStyles, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.useButton && (h("div", { key: '3539fa8237cde3c5220934d18152bd6e3c20b979', class: "sd-number-input__buttons" }, h("button", { key: '4b48a586dbe4509a9c780c1d23b06252f3e5cf55', type: "button", class: {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("input", { key: 'ab50a454f491b3c15161ea7a78a275bd840a3510', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__input ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, style: inputStyles, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.useButton && (h("div", { key: '5f750d199e684fb077f6de49a07c6040eb3b7d44', class: "sd-number-input__buttons" }, h("button", { key: 'a07229ded6d8d7a08b2c0689b49e571b83d54324', type: "button", class: {
                 'sd-number-input__button': true,
                 'sd-number-input__button--decrement': true,
-            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '25076f714328a1bce556ecff6317573c98bd8214', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), h("button", { key: '99b5951b072d6bdbd1f36f217d441604aada3f4b', type: "button", class: {
+            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '7dc6cbe609c39deecbdbf639d820679f4a635acc', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), h("button", { key: '200e7811481d2cdbb598622626b0777cdb2d471a', type: "button", class: {
                 'sd-number-input__button': true,
                 'sd-number-input__button--increment': true,
-            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '13e8eda3bb5042bd65381057159dd60f04ecf69d', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
+            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '3b94c87f4596e18b77cc31f54e779160b422562f', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
     }
     static get is() { return "sd-number-input"; }
     static get originalStyleUrls() {