@sellmate/design-system 1.0.36 → 1.0.38

package/dist/esm/sd-confirm-modal_2.entry.js

@@ -0,0 +1,196 @@
+import { r as registerInstance, c as createEvent, g as getElement, h } from './index-B8tGP77V.js';
+
+const modal = {
+	title: {
+		icon: "32"
+	},
+	close: {
+		size: "20",
+		color: "#888888"
+	},
+	confirm: {
+		positive: {
+			icon: "#0075FF"
+		},
+		negative: {
+			icon: "#E30000"
+		}
+	}
+};
+var modalTokens = {
+	modal: modal
+};
+
+const CONFIRM_MODAL_DEFAULT_BUTTON = {
+    positive: 'primary_md',
+    negative: 'danger_md',
+};
+const CONFIRM_MODAL_ICON_MAP = {
+    positive: 'notificationOutline',
+    negative: 'warningOutline',
+};
+const CONFIRM_MODAL_ICON_COLOR = {
+    positive: modalTokens.modal.confirm.positive.icon,
+    negative: modalTokens.modal.confirm.negative.icon,
+};
+const TITLE_ICON_SIZE = Number(modalTokens.modal.title.icon);
+const CLOSE_ICON_SIZE = Number(modalTokens.modal.close.size);
+const CLOSE_ICON_COLOR = modalTokens.modal.close.color;
+const SUB_BUTTON_PRESET = 'neutral_outline_md';
+
+const sdConfirmModalCss = () => `sd-confirm-modal{display:block;width:fit-content;min-width:520px}sd-confirm-modal .sd-confirm-modal{position:relative;padding:var(--sd-modal-modal-padding-y) var(--sd-modal-modal-padding-x);border-radius:var(--sd-modal-modal-radius);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2);background:var(--sd-modal-modal-bg)}sd-confirm-modal .sd-confirm-modal__close-button{position:absolute;top:16px;right:16px;cursor:pointer}sd-confirm-modal .sd-confirm-modal__icon{display:block;width:var(--sd-modal-modal-title-icon);height:var(--sd-modal-modal-title-icon);margin:0 auto var(--sd-modal-modal-title-gap) auto}sd-confirm-modal .sd-confirm-modal__title{color:var(--sd-modal-modal-title-color);font-size:var(--sd-modal-modal-title-typography-font-size);font-weight:var(--sd-modal-modal-title-typography-font-weight);line-height:var(--sd-modal-modal-title-typography-line-height);text-align:center;margin:0 0 var(--sd-modal-modal-body-gap) 0}sd-confirm-modal .sd-confirm-modal__body{display:flex;flex-direction:column;gap:var(--sd-modal-modal-body-gap)}sd-confirm-modal .sd-confirm-modal__message-text{color:var(--sd-modal-modal-message-color);font-size:var(--sd-modal-modal-message-typography-font-size);font-weight:var(--sd-modal-modal-message-typography-font-weight);line-height:var(--sd-modal-modal-message-typography-line-height);text-align:center;margin:0}sd-confirm-modal .sd-confirm-modal__content-box{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border:1px solid #e1e1e1;border-radius:8px;background:white}sd-confirm-modal .sd-confirm-modal__slot-label{font-size:14px;font-weight:700;line-height:var(--sd-modal-modal-message-typography-line-height);color:var(--sd-modal-modal-message-color)}sd-confirm-modal .sd-confirm-modal__button{display:flex;justify-content:center;gap:var(--sd-modal-modal-button-gap);margin-top:32px}`;
+
+const SdConfirmModal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.close = createEvent(this, "sdClose");
+        this.confirm = createEvent(this, "sdConfirm");
+    }
+    get el() { return getElement(this); }
+    hasSlottedContent = false;
+    customContentRef;
+    slotObserver;
+    type = 'positive';
+    modalTitle = '';
+    titleClass = '';
+    topMessage = [];
+    bottomMessage = [];
+    mainButtonName;
+    mainButtonLabel = '확인';
+    subButtonLabel = '';
+    tagPreset;
+    tagLabel = '';
+    slotLabel = '';
+    tagContents;
+    close;
+    confirm;
+    componentWillLoad() {
+        this.syncHasSlottedContent();
+    }
+    componentDidLoad() {
+        if (typeof MutationObserver === 'undefined')
+            return;
+        this.slotObserver = new MutationObserver(() => this.syncHasSlottedContent());
+        this.slotObserver.observe(this.el, {
+            childList: true,
+            characterData: true,
+        });
+    }
+    componentDidRender() {
+        if (this.customContentRef && this.tagContents instanceof HTMLElement) {
+            if (typeof this.customContentRef.replaceChildren === 'function') {
+                this.customContentRef.replaceChildren(this.tagContents);
+            }
+            else {
+                this.customContentRef.innerHTML = '';
+                this.customContentRef.appendChild(this.tagContents);
+            }
+        }
+    }
+    disconnectedCallback() {
+        this.slotObserver?.disconnect();
+    }
+    get resolvedMainButton() {
+        return this.mainButtonName ?? CONFIRM_MODAL_DEFAULT_BUTTON[this.type];
+    }
+    get hasTagContent() {
+        return !!(this.tagLabel && this.tagPreset);
+    }
+    get showContentBox() {
+        return !!this.tagContents || this.hasTagContent || this.hasSlottedContent;
+    }
+    syncHasSlottedContent() {
+        const hasSlottedContent = Array.from(this.el.childNodes).some(node => !(node.nodeType === Node.ELEMENT_NODE &&
+            node.classList.contains('sd-confirm-modal')) &&
+            (node.nodeType === Node.ELEMENT_NODE ||
+                (node.nodeType === Node.TEXT_NODE && node.textContent?.trim())));
+        if (hasSlottedContent !== this.hasSlottedContent) {
+            this.hasSlottedContent = hasSlottedContent;
+        }
+    }
+    render() {
+        const iconName = CONFIRM_MODAL_ICON_MAP[this.type];
+        const iconColor = CONFIRM_MODAL_ICON_COLOR[this.type];
+        return (h("div", { key: '79b2bc6c82470f18097f709af199379b7f9c33e9', class: "sd-confirm-modal" }, h("sd-icon", { key: '20d09afc087d1f1d293295dfda2b7c0b65fca032', class: "sd-confirm-modal__close-button", name: "close", size: CLOSE_ICON_SIZE, color: CLOSE_ICON_COLOR, onClick: () => this.close.emit() }), h("sd-icon", { key: '7ef48200946dceef27e32bf51e2e57ee7db9e5c8', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor }), h("h2", { key: '7937da9ba581a59b6d33cef5c63ccaf01714cc71', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), h("div", { key: 'ded09b7f81f990fd5b4ce7bb78eebf4578012b41', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '25b0ad2313003f0fa5a119d63e80d1a96e1af5f5', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (h("div", { key: '51d76d5923a384ac82d1e4a463981ab25655037d', 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.hasTagContent && 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: '8ef574ff752ccee7ba28cb4824fc7968bb86b344', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), h("div", { key: 'bd5e3dc0bd36c33a7b47ce328121427d44d53a86', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button-v2", { key: 'ff8c7487883f2a4c740baa8966e641975bc4ba14', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.close.emit() })), h("sd-button-v2", { key: '176cfe2404deb3d57e4a87206a339f797536b51c', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.confirm.emit() }))));
+    }
+};
+SdConfirmModal.style = sdConfirmModalCss();
+
+const NOTICE_BUTTON_PRESET = 'neutral_outline_md';
+
+const sdNoticeModalCss = () => `sd-notice-modal{display:block;width:fit-content;min-width:520px}sd-notice-modal .sd-notice-modal{position:relative;padding:var(--sd-modal-modal-padding-y) var(--sd-modal-modal-padding-x);border-radius:var(--sd-modal-modal-radius);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2);background:var(--sd-modal-modal-bg)}sd-notice-modal .sd-notice-modal__close-button{position:absolute;top:16px;right:16px;cursor:pointer}sd-notice-modal .sd-notice-modal__title{color:var(--sd-modal-modal-title-color);font-size:var(--sd-modal-modal-title-typography-font-size);font-weight:var(--sd-modal-modal-title-typography-font-weight);line-height:var(--sd-modal-modal-title-typography-line-height);text-align:center;margin:0 0 var(--sd-modal-modal-body-gap) 0}sd-notice-modal .sd-notice-modal__body{display:flex;flex-direction:column;gap:var(--sd-modal-modal-body-gap)}sd-notice-modal .sd-notice-modal__message-text{color:var(--sd-modal-modal-message-color);font-size:var(--sd-modal-modal-message-typography-font-size);font-weight:var(--sd-modal-modal-message-typography-font-weight);line-height:var(--sd-modal-modal-message-typography-line-height);text-align:center;margin:0}sd-notice-modal .sd-notice-modal__content-box{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border:1px solid #e1e1e1;border-radius:8px;background:white}sd-notice-modal .sd-notice-modal__slot-label{font-size:14px;font-weight:700;line-height:var(--sd-modal-modal-message-typography-line-height);color:var(--sd-modal-modal-message-color)}sd-notice-modal .sd-notice-modal__button{display:flex;justify-content:center;gap:var(--sd-modal-modal-button-gap);margin-top:32px}`;
+
+const SdNoticeModal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.close = createEvent(this, "sdClose");
+        this.confirm = createEvent(this, "sdConfirm");
+    }
+    get el() { return getElement(this); }
+    hasSlottedContent = false;
+    customContentRef;
+    slotObserver;
+    modalTitle = '';
+    titleClass = '';
+    topMessage = [];
+    bottomMessage = [];
+    mainButtonLabel = '확인';
+    subButtonLabel = '';
+    tagPreset;
+    tagLabel = '';
+    slotLabel = '';
+    tagContents;
+    close;
+    confirm;
+    componentWillLoad() {
+        this.syncHasSlottedContent();
+    }
+    componentDidLoad() {
+        if (typeof MutationObserver === 'undefined')
+            return;
+        this.slotObserver = new MutationObserver(() => this.syncHasSlottedContent());
+        this.slotObserver.observe(this.el, {
+            childList: true,
+            characterData: true,
+        });
+    }
+    componentDidRender() {
+        if (this.customContentRef && this.tagContents instanceof HTMLElement) {
+            if (typeof this.customContentRef.replaceChildren === 'function') {
+                this.customContentRef.replaceChildren(this.tagContents);
+            }
+            else {
+                this.customContentRef.innerHTML = '';
+                this.customContentRef.appendChild(this.tagContents);
+            }
+        }
+    }
+    disconnectedCallback() {
+        this.slotObserver?.disconnect();
+    }
+    get hasTagContent() {
+        return !!(this.tagLabel && this.tagPreset);
+    }
+    get showContentBox() {
+        return !!this.tagContents || this.hasTagContent || this.hasSlottedContent;
+    }
+    syncHasSlottedContent() {
+        const hasSlottedContent = Array.from(this.el.childNodes).some(node => !(node.nodeType === Node.ELEMENT_NODE &&
+            node.classList.contains('sd-notice-modal')) &&
+            (node.nodeType === Node.ELEMENT_NODE ||
+                (node.nodeType === Node.TEXT_NODE && node.textContent?.trim())));
+        if (hasSlottedContent !== this.hasSlottedContent) {
+            this.hasSlottedContent = hasSlottedContent;
+        }
+    }
+    render() {
+        return (h("div", { key: '522489e0b0c0706b25f5e99215d8bb75e94f1596', class: "sd-notice-modal" }, h("sd-icon", { key: 'e6ca52391427d0f1a429feeb97337e716aae5920', class: "sd-notice-modal__close-button", name: "close", size: CLOSE_ICON_SIZE, color: CLOSE_ICON_COLOR, onClick: () => this.close.emit() }), h("h2", { key: '7c7f4c3ad01d421a7f75f14d93cc0ba58526bfd6', class: `sd-notice-modal__title ${this.titleClass}` }, this.modalTitle), h("div", { key: 'afc982ef15da5884f181e189f78a9986a467ff40', class: "sd-notice-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '028b03030a7a1b29ec54910807878da39f8ea156', class: "sd-notice-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-notice-modal__message-text", innerHTML: msg }))))), this.showContentBox && (h("div", { key: 'fa12a72c4ac271d6e57ec85415f6144f1b38b146', class: "sd-notice-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-notice-modal__custom-content", ref: el => {
+                this.customContentRef = el;
+            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.hasTagContent && h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && h("span", { class: "sd-notice-modal__slot-label" }, this.slotLabel))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '39008c0c41e84a92b02aa310e32dacf7b1b3ea83', class: "sd-notice-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-notice-modal__message-text", innerHTML: msg })))))), h("div", { key: '54062ddaf99170af5bcf8caa1f6d80ce3f24b4b2', class: "sd-notice-modal__button" }, this.subButtonLabel && (h("sd-button-v2", { key: 'c0365120540bf5e7f9e43955a8099e019837e4d6', name: NOTICE_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.close.emit() })), h("sd-button-v2", { key: 'c51c93f72ebbe91e87aa0d0d561227f6b66b5e74', name: NOTICE_BUTTON_PRESET, label: this.mainButtonLabel, onSdClick: () => this.confirm.emit() }))));
+    }
+};
+SdNoticeModal.style = sdNoticeModalCss();
+
+export { SdConfirmModal as sd_confirm_modal, SdNoticeModal as sd_notice_modal };

package/dist/esm/sd-date-picker.entry.js

@@ -35,7 +35,7 @@ const SdDatePicker = class {
         this.viewChange.emit(e.detail);
     };
     render() {
-        return (h("div", { key: '45d377178babbbf10004c3551de90abb1f8137cc', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, h("sd-input", { key: '7850afd672ecbdcbee68002add8a7ee3b223fc20', ref: el => (this.inputEl = el), value: this.value, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: '5b37640ab87c5a963bf153943f42467e3fa5dbfc', 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: '3585b5cee494f3d0871d50f47351cf278b493c35', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '5ebb7dd31aac4a7e8402a4bc393ef6b2afaea0c2', class: "sd-date-picker__menu" }, h("sd-calendar", { key: 'e7150c47392fab2a79442e0ca86912e1bb534c9d', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange }))))));
+        return (h("div", { key: '9f1e5b391dec4623e6f628449a459ab1a6f6ec7d', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, h("sd-input", { key: '5448efd4117535e96d1273395571e12bdf3063ea', ref: el => (this.inputEl = el), value: this.value, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: '97191fcbf8d9b1af8553ad867b38a189c480c6d8', 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: '945477bd6ef69263a9cefae982474d6889dd8d58', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '270188ccf5d174be496d31abcf9d8570e37a5ff0', class: "sd-date-picker__menu" }, h("sd-calendar", { key: 'f9d50e345744d0ce127028edba60ba4c17dba372', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange }))))));
     }
 };
 SdDatePicker.style = sdDatePickerCss();

package/dist/esm/sd-dropdown-button.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, g as getElement, h } from './index-B8tGP77V.js';
 import { B as BaseDropdownEvent } from './base-dropdown-event-CRdYeSBK.js';
-import { B as BUTTON_CONFIG, g as getPresetName, c as PRESET_BORDER_COLORS$1, P as PRESET_CONTENT_COLORS$1, d as PRESET_HOVER_BACKGROUNDS$1, b as BUTTON_FOCUS_RING_COLOR } from './sd-button-v2.config-CRtF2Br0.js';
+import { B as BUTTON_CONFIG, g as getPresetName, P as PRESET_BORDER_COLORS$1, a as PRESET_CONTENT_COLORS$1, b as PRESET_HOVER_BACKGROUNDS$1, c as BUTTON_FOCUS_RING_COLOR } from './sd-button-v2.config-Dtf44MOf.js';
 import { b as buttonTokens } from './component.button-KOzU1j2w.js';
 
 const color = {
@@ -66,7 +66,7 @@ const DROPDOWN_DISABLED_BORDER = buttonTokens.border.disabled;
 const isDropdownButtonName = (value) => value in DROPDOWN_BUTTON_CONFIG;
 const getDropdownButtonPreset = (value) => getPresetName(value);
 
-const sdDropdownButtonCss = () => `sd-dropdown-button{display:inline-flex;width:fit-content;height:fit-content}.sd-dropdown-button{display:inline-flex;position:relative}.sd-dropdown-button__trigger{--sd-dropdown-button-height:var(--sd-button-md-height, 34px);--sd-dropdown-button-padding-x:var(--sd-button-md-padding-x, 20px);--sd-dropdown-button-gap:var(--sd-button-md-gap, 8px);--sd-dropdown-button-font-family:var(--sd-button-md-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-md-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-md-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-md-typography-text-decoration, none);--sd-dropdown-button-bg:#025497;--sd-dropdown-button-bg-hover:#004177;--sd-dropdown-button-border:transparent;--sd-dropdown-button-content:#ffffff;--sd-dropdown-button-current-content:var(--sd-dropdown-button-content);--sd-dropdown-button-divider:#006ac1;--sd-dropdown-button-accent:#006ac1;--sd-dropdown-button-min-width:106px;--sd-dropdown-button-disabled-bg:var(--sd-button-bg-disabled, $grey_30);--sd-dropdown-button-disabled-content:var(--sd-button-content-disabled, $grey_65);--sd-dropdown-button-disabled-border:var(--sd-button-border-disabled, $grey_45);display:inline-flex;align-items:stretch;justify-content:space-between;min-width:var(--sd-dropdown-button-min-width);min-height:var(--sd-dropdown-button-height);padding:0;border:var(--sd-button-border-width-default, 1px) solid var(--sd-dropdown-button-border);border-radius:var(--sd-button-radius-default, 4px);background:var(--sd-dropdown-button-bg);color:var(--sd-dropdown-button-current-content);cursor:pointer;box-sizing:border-box;font-family:var(--sd-dropdown-button-font-family);font-size:var(--sd-dropdown-button-font-size);font-weight:var(--sd-dropdown-button-font-weight);line-height:1;text-decoration:var(--sd-dropdown-button-text-decoration);transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;white-space:nowrap}.sd-dropdown-button__trigger:hover:not(.sd-dropdown-button__trigger--disabled){background:var(--sd-dropdown-button-bg-hover)}.sd-dropdown-button__trigger:focus-visible{outline:0;box-shadow:0 0 0 2px var(--sd-dropdown-button-accent)}.sd-dropdown-button__trigger--xs{--sd-dropdown-button-height:var(--sd-button-xs-height, 24px);--sd-dropdown-button-padding-x:var(--sd-button-xs-padding-x, 8px);--sd-dropdown-button-gap:var(--sd-button-xs-gap, 4px);--sd-dropdown-button-font-family:var(--sd-button-xs-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-xs-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-xs-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-xs-typography-text-decoration, none)}.sd-dropdown-button__trigger--sm{--sd-dropdown-button-height:var(--sd-button-sm-height, 28px);--sd-dropdown-button-padding-x:var(--sd-button-sm-padding-x, 12px);--sd-dropdown-button-gap:var(--sd-button-sm-gap, 6px);--sd-dropdown-button-font-family:var(--sd-button-sm-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-sm-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-sm-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-sm-typography-text-decoration, none)}.sd-dropdown-button__trigger--md{--sd-dropdown-button-height:var(--sd-button-md-height, 34px);--sd-dropdown-button-padding-x:var(--sd-button-md-padding-x, 20px);--sd-dropdown-button-gap:var(--sd-button-md-gap, 8px);--sd-dropdown-button-font-family:var(--sd-button-md-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-md-typography-font-size, 16px);--sd-dropdown-button-font-weight:var(--sd-button-md-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-md-typography-text-decoration, none)}.sd-dropdown-button__trigger--disabled{border-color:var(--sd-dropdown-button-disabled-border);background:var(--sd-dropdown-button-disabled-bg);--sd-dropdown-button-current-content:var(--sd-dropdown-button-disabled-content);cursor:not-allowed}.sd-dropdown-button__trigger--disabled .sd-dropdown-button__trigger-divider{background:var(--sd-dropdown-button-disabled-border)}.sd-dropdown-button__trigger-label,.sd-dropdown-button__trigger-icon{display:inline-flex;align-items:center;justify-content:center}.sd-dropdown-button__trigger-label{flex:1 1 auto;min-width:0;padding:0 var(--sd-dropdown-button-padding-x)}.sd-dropdown-button__trigger-divider{align-self:stretch;width:1px;height:auto;background:var(--sd-dropdown-button-divider);opacity:0.9}.sd-dropdown-button__trigger-icon{flex:0 0 auto;min-width:calc(var(--sd-dropdown-button-height) - 2px);padding:0 calc(var(--sd-dropdown-button-gap) + 2px)}.sd-dropdown-button__menu{position:relative;display:grid;width:max-content;min-width:var(--sd-dropdown-button-menu-min-width, max-content);max-width:calc(100vw - 24px);padding:4px 0;border:0;border-radius:4px;background:#FFFFFF;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1019607843);box-sizing:border-box;overflow:hidden}.sd-dropdown-button__menu-item{--sd-dropdown-button-menu-item-current-color:var(--sd-dropdown-button-menu-item-color);display:inline-flex;align-items:center;gap:8px;min-height:28px;width:100%;padding:0 12px;border:0;border-radius:0;background:transparent;color:var(--sd-dropdown-button-menu-item-current-color);cursor:pointer;box-sizing:border-box;font:inherit;text-align:left;transition:background-color 0.15s ease, color 0.15s ease}.sd-dropdown-button__menu-item--active{background:var(--sd-dropdown-button-menu-item-active-bg);--sd-dropdown-button-menu-item-current-color:var(    --sd-dropdown-button-menu-item-active-color   )}.sd-dropdown-button__menu-item--disabled{--sd-dropdown-button-menu-item-current-color:var(--sd-dropdown-button-disabled-content);cursor:not-allowed}.sd-dropdown-button__menu-item-icon{flex:0 0 auto}.sd-dropdown-button__menu-item-label{display:inline-flex;align-items:center;min-width:0;white-space:nowrap;font-size:12px}`;
+const sdDropdownButtonCss = () => `sd-dropdown-button{display:inline-flex;width:fit-content;height:fit-content}.sd-dropdown-button{display:inline-flex;position:relative}.sd-dropdown-button__trigger{--sd-dropdown-button-height:var(--sd-button-md-height, 34px);--sd-dropdown-button-padding-x:var(--sd-button-md-padding-x, 20px);--sd-dropdown-button-gap:var(--sd-button-md-gap, 8px);--sd-dropdown-button-font-family:var(--sd-button-md-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-md-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-md-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-md-typography-text-decoration, none);--sd-dropdown-button-bg:#025497;--sd-dropdown-button-bg-hover:#004177;--sd-dropdown-button-border:transparent;--sd-dropdown-button-content:#ffffff;--sd-dropdown-button-current-content:var(--sd-dropdown-button-content);--sd-dropdown-button-divider:#006ac1;--sd-dropdown-button-accent:#006ac1;--sd-dropdown-button-min-width:106px;--sd-dropdown-button-disabled-bg:var(--sd-button-bg-disabled, $grey_30);--sd-dropdown-button-disabled-content:var(--sd-button-content-disabled, $grey_65);--sd-dropdown-button-disabled-border:var(--sd-button-border-disabled, $grey_45);display:inline-flex;align-items:stretch;justify-content:space-between;min-width:var(--sd-dropdown-button-min-width);min-height:var(--sd-dropdown-button-height);padding:0;border:var(--sd-button-border-width-default, 1px) solid var(--sd-dropdown-button-border);border-radius:var(--sd-button-radius-default, 4px);background:var(--sd-dropdown-button-bg);color:var(--sd-dropdown-button-current-content);cursor:pointer;box-sizing:border-box;font-family:var(--sd-dropdown-button-font-family);font-size:var(--sd-dropdown-button-font-size);font-weight:var(--sd-dropdown-button-font-weight);line-height:1;text-decoration:var(--sd-dropdown-button-text-decoration);transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;white-space:nowrap}.sd-dropdown-button__trigger:hover:not(.sd-dropdown-button__trigger--disabled){background:var(--sd-dropdown-button-bg-hover)}.sd-dropdown-button__trigger:focus-visible{outline:0;box-shadow:0 0 0 2px var(--sd-dropdown-button-accent)}.sd-dropdown-button__trigger--xs{--sd-dropdown-button-height:var(--sd-button-xs-height, 24px);--sd-dropdown-button-padding-x:var(--sd-button-xs-padding-x, 8px);--sd-dropdown-button-gap:var(--sd-button-xs-gap, 4px);--sd-dropdown-button-font-family:var(--sd-button-xs-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-xs-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-xs-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-xs-typography-text-decoration, none)}.sd-dropdown-button__trigger--sm{--sd-dropdown-button-height:var(--sd-button-sm-height, 28px);--sd-dropdown-button-padding-x:var(--sd-button-sm-padding-x, 12px);--sd-dropdown-button-gap:var(--sd-button-sm-gap, 6px);--sd-dropdown-button-font-family:var(--sd-button-sm-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-sm-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-sm-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-sm-typography-text-decoration, none)}.sd-dropdown-button__trigger--md{--sd-dropdown-button-height:var(--sd-button-md-height, 34px);--sd-dropdown-button-padding-x:var(--sd-button-md-padding-x, 20px);--sd-dropdown-button-gap:var(--sd-button-md-gap, 8px);--sd-dropdown-button-font-family:var(--sd-button-md-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-md-typography-font-size, 16px);--sd-dropdown-button-font-weight:var(--sd-button-md-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-md-typography-text-decoration, none)}.sd-dropdown-button__trigger--disabled{border-color:var(--sd-dropdown-button-disabled-border);background:var(--sd-dropdown-button-disabled-bg);--sd-dropdown-button-current-content:var(--sd-dropdown-button-disabled-content);cursor:not-allowed}.sd-dropdown-button__trigger--disabled .sd-dropdown-button__trigger-divider{background:var(--sd-dropdown-button-disabled-border)}.sd-dropdown-button__trigger-label,.sd-dropdown-button__trigger-icon{display:inline-flex;align-items:center;justify-content:center}.sd-dropdown-button__trigger-label{flex:1 1 auto;min-width:0;padding:0 var(--sd-dropdown-button-padding-x)}.sd-dropdown-button__trigger-divider{align-self:stretch;width:1px;height:auto;background:var(--sd-dropdown-button-divider);opacity:0.9}.sd-dropdown-button__trigger-icon{flex:0 0 auto;min-width:calc(var(--sd-dropdown-button-height) - 2px);padding:0 calc(var(--sd-dropdown-button-gap) + 2px);transition:transform 0.2s ease}.sd-dropdown-button__trigger-icon--open{transform:rotate(180deg)}.sd-dropdown-button__menu{position:relative;display:grid;width:max-content;min-width:var(--sd-dropdown-button-menu-min-width, max-content);max-width:calc(100vw - 24px);padding:4px 0;border:0;border-radius:4px;background:#FFFFFF;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1019607843);box-sizing:border-box;overflow:hidden}.sd-dropdown-button__menu-item{--sd-dropdown-button-menu-item-current-color:var(--sd-dropdown-button-menu-item-color);display:inline-flex;align-items:center;gap:8px;min-height:28px;width:100%;padding:0 12px;border:0;border-radius:0;background:transparent;color:var(--sd-dropdown-button-menu-item-current-color);cursor:pointer;box-sizing:border-box;font:inherit;text-align:left;transition:background-color 0.15s ease, color 0.15s ease}.sd-dropdown-button__menu-item--active{background:var(--sd-dropdown-button-menu-item-active-bg);--sd-dropdown-button-menu-item-current-color:var(    --sd-dropdown-button-menu-item-active-color   )}.sd-dropdown-button__menu-item--disabled{--sd-dropdown-button-menu-item-current-color:var(--sd-dropdown-button-disabled-content);cursor:not-allowed}.sd-dropdown-button__menu-item-icon{flex:0 0 auto}.sd-dropdown-button__menu-item-label{display:inline-flex;align-items:center;min-width:0;white-space:nowrap;font-size:12px}`;
 
 const SdDropdownButton = class extends BaseDropdownEvent {
     constructor(hostRef) {
@@ -80,10 +80,13 @@ const SdDropdownButton = class extends BaseDropdownEvent {
     label = '';
     items = [];
     disabled = false;
+    static CLOSE_ANIMATION_DURATION = 150;
     isOpen = false;
+    isAnimatingOut = false;
     itemIndex = -1;
     triggerRef;
     menuRef;
+    closeAnimationTimer;
     click;
     dropDownShow;
     handleOpenChange(isOpen) {
@@ -98,6 +101,8 @@ const SdDropdownButton = class extends BaseDropdownEvent {
     }
     disconnectedCallback() {
         this.cleanupEvent();
+        if (this.closeAnimationTimer)
+            clearTimeout(this.closeAnimationTimer);
     }
     async sdOpen() {
         if (this.disabled || this.items.length === 0)
@@ -108,7 +113,15 @@ const SdDropdownButton = class extends BaseDropdownEvent {
         this.closeDropdown();
     }
     closeDropdown = () => {
+        if (!this.isOpen)
+            return;
         this.isOpen = false;
+        this.isAnimatingOut = true;
+        if (this.closeAnimationTimer)
+            clearTimeout(this.closeAnimationTimer);
+        this.closeAnimationTimer = setTimeout(() => {
+            this.isAnimatingOut = false;
+        }, SdDropdownButton.CLOSE_ANIMATION_DURATION);
     };
     handleDocumentClick(event) {
         const target = event.target;
@@ -178,7 +191,15 @@ const SdDropdownButton = class extends BaseDropdownEvent {
         if (this.disabled || this.items.length === 0) {
             return;
         }
-        this.isOpen = !this.isOpen;
+        if (this.isOpen) {
+            this.closeDropdown();
+        }
+        else {
+            if (this.closeAnimationTimer)
+                clearTimeout(this.closeAnimationTimer);
+            this.isAnimatingOut = false;
+            this.isOpen = true;
+        }
     };
     selectItem(item, event) {
         event?.stopPropagation();
@@ -213,7 +234,7 @@ const SdDropdownButton = class extends BaseDropdownEvent {
         return classes.join(' ');
     }
     renderDropdown(preset) {
-        if (!this.isOpen || !this.triggerRef)
+        if ((!this.isOpen && !this.isAnimatingOut) || !this.triggerRef)
             return null;
         return (h("sd-portal", { open: this.isOpen, parentRef: this.triggerRef, onSdClose: this.closeDropdown }, h("div", { style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { class: "sd-dropdown-button__menu", role: "menu", ref: el => (this.menuRef = el), style: {
                 '--sd-dropdown-button-menu-min-width': `${this.triggerRef.offsetWidth}px`,
@@ -234,7 +255,7 @@ const SdDropdownButton = class extends BaseDropdownEvent {
     }
     render() {
         const { config, preset } = this.resolvedConfig;
-        return (h("div", { key: '190bb1c48b8210067961caa1d9b17f195fb522e8', class: "sd-dropdown-button" }, h("button", { key: '9fabd9be8b36d8c0ec9118eab6b8cb42c62da460', 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: 'd2c725861a4667633a2726b47101d604436c5c16', class: "sd-dropdown-button" }, h("button", { key: '51a4a2f049f53d61f45632a89e179c95f9cf9755', 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],
@@ -245,7 +266,10 @@ const SdDropdownButton = class 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: '948734c20701c8b9e08596e990531862db450114', class: "sd-dropdown-button__trigger-label" }, this.label), h("span", { key: '5c27c116718487b958e61b7b58c8aa89615e09bd', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), h("span", { key: '4a0eec935afba260c0ede1e967d0de4488029383', class: "sd-dropdown-button__trigger-icon", "aria-hidden": "true" }, h("sd-icon", { key: 'c9d568e7b5451556ced51c902a5d4523a38077d4', name: this.isOpen ? 'arrowUp' : 'arrowDown', size: 12, color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
+            } }, h("span", { key: '595bf90d834102371492f478e23f7886ec7e5dcf', class: "sd-dropdown-button__trigger-label" }, this.label), h("span", { key: '79a12ecba11d82944e2563d60dfb76c5a9bb9a39', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), h("span", { key: '7160b1e8f7e25d822c539a57ab19ee2572c7b146', class: {
+                'sd-dropdown-button__trigger-icon': true,
+                'sd-dropdown-button__trigger-icon--open': this.isOpen,
+            }, "aria-hidden": "true" }, h("sd-icon", { key: 'd041b1bfb0bb902f5b670fbf5524babfa0ee47ac', name: "arrowDown", size: 12, color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
     }
     static get watchers() { return {
         "isOpen": [{

package/dist/esm/sd-file-picker.entry.js

@@ -98,15 +98,15 @@ const SdFilePicker = class {
     render() {
         const hasFiles = this.hasFiles();
         const displayText = this.getDisplayText();
-        return (h("div", { key: 'cb3a96b8911cb422bb30623d86b94b5c536f8f44', class: {
+        return (h("div", { key: '598e284933fe6dbcbd1a1f77a8f530aa22be5456', 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: 'f507cd78ac9a05eea64b209f11ed9ab048a925ca', 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: '33f42ba84419b72a941b5e3162531fa795744525', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: '6e4252b659bc19d8f8841ff874a7bf50c86cee48', ref: el => (this.fileNamesRef = el), class: {
+            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("input", { key: '3f84b668c107219a3acecb32c8d473f12c162e3f', 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: '0fcc77f108d858f0ede5043c4da71988e68d8bd0', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: '5aeb75690a1922d765e19ada43cf7ab034f79979', 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: '5879b1d0783ad1fbdbe44621efc42c86ea13a9af', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: '59718655bc66a60ee7d1ca53e78a1deea592406d', class: "sd-file-picker__tooltip" }, displayText))));
+            } }, displayText), !this.disabled && hasFiles && (h("sd-icon", { key: '1da963ffaded05153eb72803b3ca4127e82b7386', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: 'd4fdd2e2ed990c17c35eca0164f93f3323ba728c', class: "sd-file-picker__tooltip" }, displayText))));
     }
     static get watchers() { return {
         "value": [{

package/dist/esm/sd-guide.entry.js

@@ -53,9 +53,9 @@ const SdGuide = class {
     };
     render() {
         const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (h("div", { key: 'f10eb9b582266dc73234300007bbec176386bf14', class: "sd-guide", style: {
+        return (h("div", { key: '6160f0e15482053eadd72d57a15f3396541b083a', class: "sd-guide", style: {
                 '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, h("sd-button", { key: '3b892dcc695f88a2085e0c69198951540153efa2', 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: '8570eeb1d7a38e93934f132d97e25546a1234947', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '3fafc9a5c8251232f7d8991523d6e2fa3e1b039b', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: '61da683399da9f2e3947173087e1ae4394994043', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: '2614f524d0b7174a6b8d106ba6d7eb02914fe5c3', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), h("div", { key: '8504a3a24c4d3b49b5d1f7f1492420fc124c3ee8', class: "sd-guide__popup__header" }, h("sd-icon", { key: 'dac3e6e8429b21681d575e0b0908533a70753e33', name: "helpOutline", size: 24, color: "green_65" }), h("h3", { key: '857808973c156e55473c97ddbf58990dfead8d22', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: '5ac7e38ba2b09fed2a09acce53e387a2e013bb65', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
+            } }, h("sd-button", { key: 'cec37bacab4a2f2e932db6e55674d63cb4203ffd', 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: 'be8e6a105b6cadbdccabb76d48c8077957da3a37', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '321c6fd059d24d632b434abc77e19dfb552756a0', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: '90e051c0c7609ba0b9cc5e654aba8d806b278b8a', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: '58712e7346d7482d6495394e981df5bfc42e1cdc', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), h("div", { key: '55e4711ee0bee9a4fd11280aacee78a41e613f5b', class: "sd-guide__popup__header" }, h("sd-icon", { key: '461cea2bab8c257d192623068793af58f821d7c9', name: "helpOutline", size: 24, color: "green_65" }), h("h3", { key: '0240dc09042adef7da4c6c57f888e7e4923c595e', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: '906c5ac6ef8532482014478d360bdf892764acb0', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {

package/dist/esm/sd-modal-container.entry.js

@@ -0,0 +1,261 @@
+import { r as registerInstance, g as getElement, h } from './index-B8tGP77V.js';
+
+const sdModalContainerCss = () => `sd-modal-container{display:block}sd-modal-container .sd-modal-container{position:fixed;inset:0;z-index:var(--sd-modal-container-z-index, 10000);display:flex;align-items:center;justify-content:center}sd-modal-container .sd-modal-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4);opacity:0;transition:opacity 0.3s ease-out}sd-modal-container .sd-modal-container__backdrop--visible{opacity:1}sd-modal-container .sd-modal-container__content{position:relative;z-index:1;display:grid;place-items:center}sd-modal-container .sd-modal-container__content>*{grid-row:1;grid-column:1}sd-modal-container .sd-modal-container__modal{opacity:0;transform:scale(0);transition:opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}sd-modal-container .sd-modal-container__modal--visible{opacity:1;transform:scale(1)}sd-modal-container .sd-modal-container__modal--shake{animation:modal-shake 0.3s ease-out}@keyframes modal-shake{0%,100%{transform:scale(1)}25%{transform:scale(1.03)}50%{transform:scale(0.97)}75%{transform:scale(1.01)}}`;
+
+let modalIdCounter = 0;
+const ANIMATION_DURATION = 350;
+const SdModalContainer = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    entries = [];
+    isVisible = false;
+    isBackdropVisible = false;
+    contentRef;
+    containerDismissTimerId;
+    handleKeydown(e) {
+        if (e.key === 'Escape') {
+            const top = this.getTopEntry();
+            if (!top)
+                return;
+            if (top.persistent) {
+                this.shakeModal(top.modalEl);
+                return;
+            }
+            this.requestDismiss(top.id, 'cancel');
+        }
+    }
+    async open(options, chain) {
+        const id = `modal-${++modalIdCounter}`;
+        const modalEl = this.createConfirmModal(id, options);
+        if (this.containerDismissTimerId) {
+            clearTimeout(this.containerDismissTimerId);
+            this.containerDismissTimerId = undefined;
+        }
+        this.entries = [...(this.entries ?? []), { id, modalEl, chain, persistent: !!options.persistent, closing: false }];
+        this.isVisible = true;
+        // Append after the container renders, then wait until the modal can paint before starting transitions.
+        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');
+                    });
+                });
+            }
+        });
+        return id;
+    }
+    async openNotice(options, chain) {
+        const id = `modal-${++modalIdCounter}`;
+        const modalEl = this.createNoticeModal(id, options);
+        if (this.containerDismissTimerId) {
+            clearTimeout(this.containerDismissTimerId);
+            this.containerDismissTimerId = undefined;
+        }
+        this.entries = [...(this.entries ?? []), { id, modalEl, chain, persistent: !!options.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');
+                    });
+                });
+            }
+        });
+        return id;
+    }
+    async update(id, props) {
+        const entry = (this.entries ?? []).find(e => e.id === id);
+        if (!entry || entry.closing)
+            return;
+        this.applyProps(entry.modalEl, props);
+    }
+    createConfirmModal(id, options) {
+        const el = document.createElement('sd-confirm-modal');
+        el.setAttribute('data-modal-id', id);
+        el.classList.add('sd-modal-container__modal');
+        this.applyProps(el, options);
+        el.addEventListener('sdConfirm', () => {
+            this.requestDismiss(id, 'confirm');
+        });
+        el.addEventListener('sdClose', () => {
+            this.requestDismiss(id, 'cancel');
+        });
+        return el;
+    }
+    applyProps(el, options) {
+        if (this.hasOwnProp(options, 'type'))
+            this.setAttr(el, 'type', options.type);
+        if (this.hasOwnProp(options, 'title'))
+            this.setAttr(el, 'modal-title', options.title);
+        if (this.hasOwnProp(options, 'titleClass'))
+            this.setAttr(el, 'title-class', options.titleClass);
+        if (this.hasOwnProp(options, 'mainButtonLabel')) {
+            this.setAttr(el, 'main-button-label', options.mainButtonLabel);
+        }
+        if (this.hasOwnProp(options, 'mainButtonName')) {
+            this.setAttr(el, 'main-button-name', options.mainButtonName);
+        }
+        if (this.hasOwnProp(options, 'subButtonLabel')) {
+            this.setAttr(el, 'sub-button-label', options.subButtonLabel);
+        }
+        if (this.hasOwnProp(options, 'tagPreset'))
+            this.setAttr(el, 'tag-preset', options.tagPreset);
+        if (this.hasOwnProp(options, 'tagLabel'))
+            this.setAttr(el, 'tag-label', options.tagLabel);
+        if (this.hasOwnProp(options, 'slotLabel'))
+            this.setAttr(el, 'slot-label', options.slotLabel);
+        if (this.hasOwnProp(options, 'topMessage'))
+            el.topMessage = options.topMessage ?? [];
+        if (this.hasOwnProp(options, 'bottomMessage'))
+            el.bottomMessage = options.bottomMessage ?? [];
+        if (this.hasOwnProp(options, 'tagContents'))
+            el.tagContents = options.tagContents;
+    }
+    createNoticeModal(id, options) {
+        const el = document.createElement('sd-notice-modal');
+        el.setAttribute('data-modal-id', id);
+        el.classList.add('sd-modal-container__modal');
+        this.applyNoticeProps(el, options);
+        el.addEventListener('sdConfirm', () => {
+            this.requestDismiss(id, 'confirm');
+        });
+        el.addEventListener('sdClose', () => {
+            this.requestDismiss(id, 'cancel');
+        });
+        return el;
+    }
+    applyNoticeProps(el, options) {
+        if (this.hasOwnProp(options, 'title'))
+            this.setAttr(el, 'modal-title', options.title);
+        if (this.hasOwnProp(options, 'titleClass'))
+            this.setAttr(el, 'title-class', options.titleClass);
+        if (this.hasOwnProp(options, 'mainButtonLabel')) {
+            this.setAttr(el, 'main-button-label', options.mainButtonLabel);
+        }
+        if (this.hasOwnProp(options, 'subButtonLabel')) {
+            this.setAttr(el, 'sub-button-label', options.subButtonLabel);
+        }
+        if (this.hasOwnProp(options, 'tagPreset'))
+            this.setAttr(el, 'tag-preset', options.tagPreset);
+        if (this.hasOwnProp(options, 'tagLabel'))
+            this.setAttr(el, 'tag-label', options.tagLabel);
+        if (this.hasOwnProp(options, 'slotLabel'))
+            this.setAttr(el, 'slot-label', options.slotLabel);
+        if (this.hasOwnProp(options, 'topMessage'))
+            el.topMessage = options.topMessage ?? [];
+        if (this.hasOwnProp(options, 'bottomMessage'))
+            el.bottomMessage = options.bottomMessage ?? [];
+        if (this.hasOwnProp(options, 'tagContents'))
+            el.tagContents = options.tagContents;
+    }
+    handleBackdropClick = () => {
+        const top = this.getTopEntry();
+        if (!top)
+            return;
+        if (top.persistent) {
+            this.shakeModal(top.modalEl);
+            return;
+        }
+        this.requestDismiss(top.id, 'cancel');
+    };
+    shakeModal(modalEl) {
+        const cls = 'sd-modal-container__modal--shake';
+        modalEl.classList.remove(cls);
+        modalEl.addEventListener('animationend', () => modalEl.classList.remove(cls), { once: true });
+        requestAnimationFrame(() => {
+            modalEl.classList.add(cls);
+        });
+    }
+    disconnectedCallback() {
+        (this.entries ?? []).forEach(entry => {
+            if (entry.dismissTimerId)
+                clearTimeout(entry.dismissTimerId);
+        });
+        if (this.containerDismissTimerId)
+            clearTimeout(this.containerDismissTimerId);
+    }
+    getTopEntry() {
+        return [...(this.entries ?? [])].reverse().find(entry => !entry.closing);
+    }
+    requestDismiss(id, reason) {
+        const entry = (this.entries ?? []).find(item => item.id === id);
+        if (!entry || entry.closing)
+            return;
+        entry.modalEl.classList.remove('sd-modal-container__modal--visible');
+        // fade out backdrop simultaneously if this is the last active modal
+        const remainingActive = (this.entries ?? []).filter(item => item.id !== id && !item.closing);
+        if (remainingActive.length === 0) {
+            this.isBackdropVisible = false;
+        }
+        const dismissTimerId = setTimeout(() => {
+            this.finalizeDismiss(id);
+        }, ANIMATION_DURATION);
+        this.entries = (this.entries ?? []).map(item => item.id === id ? { ...item, closing: true, dismissTimerId } : item);
+        if (reason === 'confirm')
+            entry.chain._triggerOk();
+        if (reason === 'cancel')
+            entry.chain._triggerCancel();
+    }
+    finalizeDismiss(id) {
+        const entry = (this.entries ?? []).find(item => item.id === id);
+        if (!entry)
+            return;
+        if (entry.dismissTimerId)
+            clearTimeout(entry.dismissTimerId);
+        entry.modalEl.remove();
+        const nextEntries = (this.entries ?? []).filter(item => item.id !== id);
+        this.entries = nextEntries;
+        if (nextEntries.length === 0) {
+            this.containerDismissTimerId = setTimeout(() => {
+                if ((this.entries ?? []).length === 0) {
+                    this.isVisible = false;
+                }
+                this.containerDismissTimerId = undefined;
+            }, ANIMATION_DURATION);
+        }
+    }
+    waitForModalReady(modalEl) {
+        const componentOnReady = modalEl.componentOnReady;
+        if (typeof componentOnReady === 'function') {
+            return componentOnReady.call(modalEl).then(() => undefined);
+        }
+        return new Promise(resolve => {
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => resolve());
+            });
+        });
+    }
+    hasOwnProp(options, key) {
+        return Object.prototype.hasOwnProperty.call(options, key);
+    }
+    setAttr(el, name, value) {
+        if (value == null)
+            return;
+        el.setAttribute(name, value);
+    }
+    render() {
+        if (!this.isVisible)
+            return null;
+        return (h("div", { class: "sd-modal-container" }, h("div", { class: {
+                'sd-modal-container__backdrop': true,
+                'sd-modal-container__backdrop--visible': this.isBackdropVisible,
+            }, onClick: this.handleBackdropClick }), h("div", { class: "sd-modal-container__content", ref: el => { this.contentRef = el; } })));
+    }
+};
+SdModalContainer.style = sdModalContainerCss();
+
+export { SdModalContainer as sd_modal_container };