@sellmate/design-system 1.0.37 → 1.0.38

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

@@ -100,15 +100,15 @@ const SdFilePicker = class {
     render() {
         const hasFiles = this.hasFiles();
         const displayText = this.getDisplayText();
-        return (index.h("div", { key: 'cb3a96b8911cb422bb30623d86b94b5c536f8f44', class: {
+        return (index.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) }, index.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 }), index.h("sd-icon", { key: '33f42ba84419b72a941b5e3162531fa795744525', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), index.h("div", { key: '6e4252b659bc19d8f8841ff874a7bf50c86cee48', ref: el => (this.fileNamesRef = el), class: {
+            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, index.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 }), index.h("sd-icon", { key: '0fcc77f108d858f0ede5043c4da71988e68d8bd0', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), index.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 && (index.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 && (index.h("div", { key: '59718655bc66a60ee7d1ca53e78a1deea592406d', class: "sd-file-picker__tooltip" }, displayText))));
+            } }, displayText), !this.disabled && hasFiles && (index.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 && (index.h("div", { key: 'd4fdd2e2ed990c17c35eca0164f93f3323ba728c', class: "sd-file-picker__tooltip" }, displayText))));
     }
     static get watchers() { return {
         "value": [{

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

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

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

@@ -0,0 +1,263 @@
+'use strict';
+
+var index = require('./index-Qvv0fGgj.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) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.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 (index.h("div", { class: "sd-modal-container" }, index.h("div", { class: {
+                'sd-modal-container__backdrop': true,
+                'sd-modal-container__backdrop--visible': this.isBackdropVisible,
+            }, onClick: this.handleBackdropClick }), index.h("div", { class: "sd-modal-container__content", ref: el => { this.contentRef = el; } })));
+    }
+};
+SdModalContainer.style = sdModalContainerCss();
+
+exports.sd_modal_container = SdModalContainer;

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

@@ -48,14 +48,14 @@ const SdPopover = class {
         this.showPopover = false;
     };
     render() {
-        return (index.h(index.Fragment, { key: '5503def56cb2dfa1e7374dc8d2968df5c0268f5f' }, this.label ? (index.h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onSdClick: () => (this.showPopover = !this.showPopover) })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (index.h("sd-floating-portal", { key: 'ccd8b25cc328a78e66315745cd39e849abc1e2a1', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, index.h("div", { key: 'b1359221e2bb9a7bfa36526620734c149ef2d3fe', class: {
+        return (index.h(index.Fragment, { key: '583cb5e2f7cb123dc1a11edeff0e6f6075e95950' }, this.label ? (index.h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onSdClick: () => (this.showPopover = !this.showPopover) })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (index.h("sd-floating-portal", { key: 'a0a4242a6cd1925a29b2e7be27f50b20377120de', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, index.h("div", { key: '251ddf3c159ae0f79c32643da7e1bef3d25caeeb', class: {
                 'sd-floating-menu': true,
                 'sd-floating-menu--popover': true,
                 [`sd-floating-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
             }, style: {
                 '--sd-floating-bg': popoverTokens.popover.bg,
-            } }, index.h("i", { key: 'f580b4344ae76e817e689889c9432b95e20a673d', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: 'b0afd933d6782a31a30f3146f65590228efe22a3' })), index.h("div", { key: '97d42bf0a82251015a44437115fe1c3ebd517fd4', class: "sd-floating-menu__content" }, this.menuTitle && index.h("div", { key: '87573bec4894f55e537ac8d311e6bcc78343f034', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (index.h("div", { key: '58e7ef0535df0f10d7691bfe9794fd79b24a185d', class: "sd-floating-menu__messages" }, this.messages.map(message => (index.h("div", null, message))))), this.buttons.length > 0 && (index.h("div", { key: 'bfbf4325963d09c22bcac0dbe1817360fed6d3bf', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (index.h("sd-button", { ...button })))))), this.useClose && (index.h("button", { key: 'beec3d7985e50ab056254883bb79621689ce12d8', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, index.h("sd-icon", { key: '88709a46eee690e0d00667ea0e03ee21eedc8f46', name: "close", size: popoverTokens.popover.close.icon, color: popoverTokens.popover.close.color }))))))));
+            } }, index.h("i", { key: '4ce84717389086099d17ac8c69519d4dfd707d64', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: 'da5b99c7236bd9e6199971121cafc2537b5d96ee' })), index.h("div", { key: 'cc5dc4fc0abb24b4e515eae7031c812bf1178633', class: "sd-floating-menu__content" }, this.menuTitle && index.h("div", { key: '818f93a2a9820422652df595e0fd027873f6a93d', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (index.h("div", { key: '4f9cd0152c8f3697f419b63e73170a95def35a7b', class: "sd-floating-menu__messages" }, this.messages.map(message => (index.h("div", null, message))))), this.buttons.length > 0 && (index.h("div", { key: 'd1fe902b212315eab787b73ac3f38b0bf67f7955', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (index.h("sd-button", { ...button })))))), this.useClose && (index.h("button", { key: 'b043c92f872ef490715ee9735a413835d9350e32', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, index.h("sd-icon", { key: '19b5e26bec245315ff2d1187b7559bcf592a2490', name: "close", size: popoverTokens.popover.close.icon, color: popoverTokens.popover.close.color }))))))));
     }
     static get watchers() { return {
         "show": [{

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

@@ -41,10 +41,10 @@ const SdProgress = class {
         return this.statusColor[this.progressStatus];
     }
     render() {
-        return (index.h("div", { key: '16662bc1806f9a33de6e90af3f8f285b322a2204', style: {
+        return (index.h("div", { key: '6d111e7d5de2efd5565cc92fbef5f0d9ee8cb2ec', style: {
                 '--progress-color': this.progressColor,
                 '--progress-percentage': `${this.progressPercentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && index.h("div", { key: 'c4dc49fbcdf9affee2470251fd9226cb262af045', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && index.h("div", { key: '8ff2f14809c2ae3107debd1f9bcee510e2d5594f', class: "sd-progress__label" }, this.label)));
     }
     renderBarProgress() {
         return (index.h("div", { class: `sd-progress__bar sd-progress__bar--${this.progressStatus}` }, index.h("div", { class: ['sd-progress__bar__percent', this.progressPercentage < 100 ? 'proceed' : ''].join(' ') }), index.h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.progressPercentage, "%"), index.h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.progressPercentage, "%")));

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

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

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

@@ -29,7 +29,7 @@ const SdRadioGroup = class {
         return classes.join(' ');
     }
     render() {
-        return (index.h("div", { key: '77ac0af3226b888547fd9fcb4f05a3cc402f6d09', class: this.getGroupClasses(), role: "radiogroup" }, this.radioOptions.map(option => {
+        return (index.h("div", { key: '264fed43fa10c8869762dab2b0530989e7901178', class: this.getGroupClasses(), role: "radiogroup" }, this.radioOptions.map(option => {
             return (index.h("sd-radio", { key: `radio-${option.value}`, val: String(option.value), value: this.value, label: option.label, disabled: this.disabled || !!option.disabled, onSdUpdate: ({ detail }) => this.handleRadioChange(detail) }));
         })));
     }

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

@@ -275,7 +275,7 @@ const SdSelectGroup = class extends baseDropdownEvent.BaseDropdownEvent {
         });
     }
     render() {
-        return (index.h("sd-field", { key: '556e32fc52193819e4350aea52ff2e7a842f5b83', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, insideLabel: this.insideLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, index.h("div", { key: '5305172cc578dffde8a2d2d6749195f15346aa01', class: {
+        return (index.h("sd-field", { key: '343870c96352644f1f32570296473d2f06a65750', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, insideLabel: this.insideLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, index.h("div", { key: '05d7ced4e332e5ab2f66b44b517f4e59b12ecf64', class: {
                 'sd-select-group': true,
                 'sd-select-group--open': this.isOpen,
                 'sd-select-group--disabled': this.disabled,

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

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

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

@@ -155,7 +155,7 @@ const SdSelectMultiple = class extends baseDropdownEvent.BaseDropdownEvent {
         this.handleOptionSelection(option);
     };
     render() {
-        return (index.h("sd-field", { key: '5f7d815436077813dc20a84791ebb9f95d15b136', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, index.h("div", { key: '7363e68efb6a226c692da41fc0232d2c85e4442e', class: {
+        return (index.h("sd-field", { key: '8de4ef57a8dd1c6f2fd6ab9ae22fe4df3e99ed16', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, index.h("div", { key: '8b57b5500a152853db07de205ab006f7a92f30a8', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,

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

@@ -48,7 +48,7 @@ const SdSelectOptionGroup = class {
         }
     };
     render() {
-        return (index.h("div", { key: '33914eb635e7ff2543b7e025df9dcadd0775616f', class: {
+        return (index.h("div", { key: '7581caff61d1257d653b6f58b8d76c21225b3cc5', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -57,10 +57,10 @@ const SdSelectOptionGroup = class {
                 'sd-select__option-group--group': this.option.type === 'group',
                 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
                 'sd-select__option-group--item': this.option.type === 'item',
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, index.h("div", { key: '53d4ceaf83bbf3c093a67a5cae2a4225e42ebffc', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (index.h("sd-checkbox", { key: 'e8c805485f204b715deca7f519422f7961c370ca', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
+            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, index.h("div", { key: 'ddb33f6afaa6bc6d6dd3dc494f6ec74b9c023a42', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (index.h("sd-checkbox", { key: '14f2c7fc347718d2909e5006bf2500a9a51b0a66', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), index.h("span", { key: '52f1efee24d5ec49e5327355227f50a9710d4261', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (index.h("span", { key: '9a6059929bb305c470532f1ee787390495c516c1', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), index.h("span", { key: '99415ed662cc2f8f29d31e3811eb4496f8fcac47', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (index.h("span", { key: 'a3c7dc6455a94ecd4587f8b13b4d1f10e3b58819', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
 };
 SdSelectOptionGroup.style = sdSelectOptionGroupCss();

package/dist/cjs/sd-select-v2-list-item_2.cjs.entry.js

@@ -73,7 +73,7 @@ const SdSelectV2ListItem = class {
         if (isDepth1Group) {
             cssVars['--list-item-border-top'] = `${sdSelectV2_config.LIST_ITEM_COLORS.depth1.borderWidth}px solid ${sdSelectV2_config.LIST_ITEM_COLORS.depth1.border}`;
         }
-        return (index.h("div", { key: '68c45b6a345a90fe1b44d1c744cb27881ddca772', class: {
+        return (index.h("div", { key: '0abaaaf9e87dd7faa5ca7566d54367fc1a883d6e', class: {
                 'sd-select-v2-list-item': true,
                 'sd-select-v2-list-item--group': isGroup,
                 'sd-select-v2-list-item--depth1-group': isDepth1Group,
@@ -83,7 +83,7 @@ const SdSelectV2ListItem = class {
                 'sd-select-v2-list-item--focused': this.isFocused,
                 'sd-select-v2-list-item--selectable': this.isSelectable && !this.option.disabled,
                 'sd-select-v2-list-item--disabled': !!this.option.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (index.h("sd-checkbox", { key: '8eda4135c2d3a6a79efe48eb39d7ada530543be2', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, class: "sd-select-v2-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), index.h("span", { key: '939299b58c52bfc8626723d63f03e915f2be89c8', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (index.h("span", { key: '59598495bb83488f5e4a0b0005f80c7bfa00bdf3', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (index.h("sd-checkbox", { key: 'd2b00059ae0792d7d162e8ea7c8f35640ab6086f', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, class: "sd-select-v2-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), index.h("span", { key: '588434f01076bc963ca733eabf62a74795788c07', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (index.h("span", { key: '6238cac7c3da53813eb8e65f98167874947625af', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
 };
 SdSelectV2ListItem.style = sdSelectV2ListItemCss();
@@ -145,12 +145,12 @@ const SdSelectV2ListItemSearch = class {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (index.h("div", { key: '6a58d3109bba6cf63f08e3d035570f95847389b0', class: {
+        return (index.h("div", { key: '0b97d37d739a22f488b313cfcc6e210c19cd3b7f', class: {
                 'sd-select-v2-list-item-search': true,
                 'sd-select-v2-list-item-search--scrolled': this.isScrolled,
-            } }, index.h("div", { key: '9f4229f0c21a85964f3264ead376cf05b548b1b3', class: "sd-select-v2-list-item-search__inner" }, index.h("sd-icon", { key: '7f02ec472bc56398e961e20c2499e3469a3b94d1', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), index.h("input", { key: 'c9211570ff1b852dcce6fececa00b0660c13b94f', ref: el => {
+            } }, index.h("div", { key: 'c0667cb553c481507149baa6da6b07cdc3ed69c4', class: "sd-select-v2-list-item-search__inner" }, index.h("sd-icon", { key: '0a9f76e5f8bb9a202ca921d076552f7ca8868528', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), index.h("input", { key: 'ac3dffc2b22f14ed356c92f64f8d1d46e57040f7', ref: el => {
                 this.inputEl = el;
-            }, type: "text", class: "sd-select-v2-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: () => this.searchFocus.emit() }), this.searchText && (index.h("button", { key: '0a0e6a5e8a0c0f3584e2af1f1e2f5f82cc719fad', type: "button", class: "sd-select-v2-list-item-search__clear", onClick: this.handleClear }, index.h("sd-icon", { key: '2874ce9881ffe6d0e71c0b9fb95f533def0cea6b', name: "close", size: 12, color: "#888888" }))))));
+            }, type: "text", class: "sd-select-v2-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: () => this.searchFocus.emit() }), this.searchText && (index.h("button", { key: 'c81a0a057ad862603c3ccb627102182898fd004f', type: "button", class: "sd-select-v2-list-item-search__clear", onClick: this.handleClear }, index.h("sd-icon", { key: 'b65fcc15d27b3feafba27944dada2c9ed844b870', name: "close", size: 12, color: "#888888" }))))));
     }
 };
 SdSelectV2ListItemSearch.style = sdSelectV2ListItemSearchCss();

package/dist/cjs/sd-select-v2-listbox_2.cjs.entry.js

@@ -132,7 +132,7 @@ const SdSelectV2Listbox = class {
             '--listbox-radius': `${sdSelectV2_config.LIST_BOX_LAYOUT.radius}px`,
             '--listbox-padding-bottom': `${sdSelectV2_config.LIST_BOX_LAYOUT.paddingBottom}px`,
         };
-        return (index.h("div", { key: '9e944831366c0e956f114e3d590c21646dd76f53', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-v2-list-item-search", { key: '6df5c653e7ed89b1723096801b57cfc4e105e801', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: '546a982cc6d86a9ff32475343ad24e56e05dd4f3', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll }, this.isEmpty ? (index.h("div", { class: "sd-select-v2-listbox__empty" }, sdSelectV2_config.EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (index.h("sd-select-v2-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick })))))));
+        return (index.h("div", { key: '0f92a96e763d00ee241cdca62b3b7ccad90c811a', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-v2-list-item-search", { key: '7c85122be46cc77db8c28c8b3cf072bfd445d56d', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: '08a4a00208e70bc77cddec12f6ad71ed8cad0071', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll }, this.isEmpty ? (index.h("div", { class: "sd-select-v2-listbox__empty" }, sdSelectV2_config.EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (index.h("sd-select-v2-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick })))))));
     }
 };
 SdSelectV2Listbox.style = sdSelectV2ListboxCss();
@@ -174,11 +174,11 @@ const SdSelectV2Trigger = class {
                 ? sdSelectV2_config.SELECT_COLORS.addonLabel.border.disabled
                 : sdSelectV2_config.SELECT_COLORS.addonLabel.border.default,
         };
-        return (index.h("div", { key: '08fbbecf31f525dc0006885add05dfe9dfd5f824', class: {
+        return (index.h("div", { key: '00f76c08c517d52499f1c75315ba1d9b0f7f6a06', class: {
                 'sd-select-v2-trigger': true,
                 'sd-select-v2-trigger--open': this.isOpen,
                 'sd-select-v2-trigger--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.addonLabel && (index.h("div", { key: '779f9adca7582017678d5962951a0a3fce920cbd', class: "sd-select-v2-trigger__addon" }, this.addonLabel)), index.h("div", { key: '509665beee7dc4925586f01d0c70d61f5f79c20c', class: "sd-select-v2-trigger__content" }, index.h("span", { key: '3e43164ab1288b6e04a9953d4c6fd670a35454c5', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), index.h("sd-icon", { key: '16278796b2dcb4b410cc31cbcf453e90620477eb', name: "arrowDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, style: cssVars, onClick: this.handleClick }, this.addonLabel && (index.h("div", { key: 'bca73972b68ae98abc92cb882f65ef5622fc6d49', class: "sd-select-v2-trigger__addon" }, this.addonLabel)), index.h("div", { key: 'ae66f445590c28064b8cdf0d4048c1c009759291', class: "sd-select-v2-trigger__content" }, index.h("span", { key: 'e08841d7f17a24142f652d3929017786c37ad486', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), index.h("sd-icon", { key: '5e4ea15d1ec3e066daff92ecf012087789ba7b87', name: "arrowDown", size: 12, color: "var(--trigger-icon-color)", class: {
                 'sd-select-v2-trigger__icon': true,
                 'sd-select-v2-trigger__icon--open': this.isOpen,
             } }))));

package/dist/cjs/sd-select-v2.cjs.entry.js

@@ -31,6 +31,7 @@ const SdSelectV2 = class {
     labelTooltip = '';
     labelTooltipProps = null;
     emitValue = false;
+    width = '100%';
     isOpen = false;
     isAnimatingOut = false;
     triggerWidth = '200px';
@@ -216,7 +217,7 @@ const SdSelectV2 = class {
             viewportPadding: SdSelectV2.VIEWPORT_PADDING,
             onSdClose: () => { this.closeDropdown(); },
         };
-        return (index.h("sd-field", { key: 'ce2edb18ea0c3343e17238c1be200905abac3d88', name: this.fieldName || this.internalName, label: this.label, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => { this.hovered = true; }, onMouseLeave: () => { this.hovered = false; }, style: { width: 'fit-content', minWidth: '80px' } }, index.h("div", { key: '1e4e3d5292a1ff8034288b0a0867d4b9317d5325', class: "sd-select-v2", ref: el => { this.triggerRef = el; } }, index.h("sd-select-v2-trigger", { key: '9d82bcc05bbd051a9972cb3a1f5d439088bf2797', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, addonLabel: this.addonLabel, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '728e31e470708b31cc363b78ef8d1a226cdae004', ...portalProps }, index.h("sd-select-v2-listbox", { key: '98b03c61d4cc5586e43b0284a669ae8a48cbc3c8', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+        return (index.h("sd-field", { key: 'e87b15f9a6698de2ea29104540c8864f3cdb2b3c', name: this.fieldName || this.internalName, label: this.label, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => { this.hovered = true; }, onMouseLeave: () => { this.hovered = false; }, style: { width: /^\d+$/.test(this.width) ? `${this.width}px` : this.width, minWidth: '80px' } }, index.h("div", { key: '06762f1ec63d1a7a5a52a3fb80bdd22deb2d5447', class: "sd-select-v2", ref: el => { this.triggerRef = el; } }, index.h("sd-select-v2-trigger", { key: 'ec9a3721ff4f6fb3c762728f7ee339caab3486ab', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, addonLabel: this.addonLabel, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '57c0e77f7f55b98c0df60028aa7fc52bb0575925', ...portalProps }, index.h("sd-select-v2-listbox", { key: 'acc04cc0ed76920a7bbb95f3b61936cd0b415c61', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
     static get watchers() { return {
         "isOpen": [{

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

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

package/dist/cjs/sd-toast-container.cjs.entry.js

@@ -234,7 +234,7 @@ const SdToastContainer = class {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (index.h("div", { key: '69257f7c4c7531bf41fa829da3c577321172e631', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (index.h("div", { key: 'ae174f148eb5191be7d4ad6704c77568f4b5abb2', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

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

@@ -57,10 +57,10 @@ const SdToast = class {
     render() {
         const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
         const iconSize = Number(TOAST_LAYOUT.iconSize);
-        return (index.h("div", { key: 'c9469c933c89fb16001177a4fa654ae05f211616', style: {
+        return (index.h("div", { key: 'fb12707835d196216266d9d3451c0b78b3d5c910', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
-            } }, index.h("div", { key: '0e40d2cfa0626a7b1aa1626c80e0c7076b97c4c0', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: 'ef6df6b3fa9fb2cc4b8401a44babd30270ddde87', class: "sd-toast__icon" }, index.h("sd-icon", { key: '7e09a2c28883baa733c211681823b95ce02f4efb', name: this.icon, size: iconSize, color: typeConfig.content }))), index.h("div", { key: 'ebeeddc53b16fb72199af974fcf5e8e2be7c8f41', class: "sd-toast__content" }, index.h("span", { key: 'ce828a5e22e42123d5da09a46d4a8a7a27f35703', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '1671f384cfa0ea3b3f8a4010e42eb8aa1cbe8fc3', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (index.h("button", { key: '6738c45beaa874e1296b5bb35936a4985b50eaeb', type: "button", class: "sd-toast__close", onClick: () => this.close.emit(), "aria-label": "Close", title: "Close" }, index.h("sd-icon", { key: '9069b6e6aa551f6e04923608f6bc12ec02f65e41', name: "close", size: iconSize, color: typeConfig.content }))))));
+            } }, index.h("div", { key: '5d02fbcc7640d40431d8a10d0ff966cbdc208564', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: 'a0d31efadb3ece5d4491118b127dd6c824bce31a', class: "sd-toast__icon" }, index.h("sd-icon", { key: '6a6bf80ed9378d8b8c2b057dab5afeaf4ba638f7', name: this.icon, size: iconSize, color: typeConfig.content }))), index.h("div", { key: '2024f644815a136e44f96d58d97aea7f25623f2c', class: "sd-toast__content" }, index.h("span", { key: '0d903bb1c6e6d0518d1f6f71ece3e7a71efbe636', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '574b52ba0bbd5f37657084b70f1b6818d06e77fe', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (index.h("button", { key: '55c489e0c52879c229734f01a2ddf9c1206e0bfc', type: "button", class: "sd-toast__close", onClick: () => this.close.emit(), "aria-label": "Close", title: "Close" }, index.h("sd-icon", { key: 'd726e7d65a169024fbfdc924375f81b70caebf75', name: "close", size: iconSize, color: typeConfig.content }))))));
     }
 };
 SdToast.style = sdToastCss();

package/dist/cjs/sd-toggle-button.cjs.entry.js

@@ -41,7 +41,7 @@ const SdToggleButton = class {
         this.change.emit(newValue);
     };
     render() {
-        return (index.h("label", { key: '8d312658ab775bc778b382fec209b0c2f062fac8', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, index.h("input", { key: '9fc36c158cabbe5aa2ee951635566efa2be7580e', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (index.h("label", { key: '3fa26fc680be2568ceed35ce3e828d68c28bef28', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, index.h("input", { key: 'ac81ea350a145a166cc6cefdb341b326ce84d6f3', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggleButton.style = sdToggleButtonCss();

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

@@ -37,7 +37,7 @@ const SdToggle = class {
         this.change.emit(newValue);
     };
     render() {
-        return (index.h("label", { key: 'bbb579fc0ab7b950c6c2275b9d7e0bf6771f38e8', "aria-label": this.label || 'toggle', class: this.toggleClasses }, index.h("input", { key: '02f71df5eddaf3223a99f51287f7bfd86373e8ab', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && index.h("span", { key: '49060a3fb1c606cd676047f3ab4c41855aebfc0e', class: "sd-toggle__label" }, this.label), index.h("div", { key: '14a9fb46f79f60587a4cfe0c1540fe1226bf6cd5', class: "sd-toggle__track" }, index.h("div", { key: '1a4180d5c94b7834677aa3e8169ec2f6e60b2700', class: "sd-toggle__thumb" }))));
+        return (index.h("label", { key: 'f6501486607b113d7ca127193eb7fdbcbac00260', "aria-label": this.label || 'toggle', class: this.toggleClasses }, index.h("input", { key: 'e63d90a710779cd3d6b90c865716c9efc43c81d2', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && index.h("span", { key: '10675257acc33a71f7ed76ea9474879f04acc0e0', class: "sd-toggle__label" }, this.label), index.h("div", { key: 'ec67a74eb272b24739867b50b5fe89f62995719a', class: "sd-toggle__track" }, index.h("div", { key: '57c785afe9cecc62a17ca3fa7eb6663d302d9c56', class: "sd-toggle__thumb" }))));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/collection/collection-manifest.json

@@ -5,7 +5,6 @@
     "components/sd-checkbox/sd-checkbox.js",
     "components/sd-date-box/sd-date-box.js",
     "components/sd-form/sd-form.js",
-    "components/sd-modal-card/sd-modal-card.js",
     "components/sd-radio/sd-radio.js",
     "components/sd-radio-button-group/sd-radio-button-group.js",
     "components/sd-radio-group/sd-radio-group.js",
@@ -16,6 +15,7 @@
     "components/sd-badge/sd-badge.js",
     "components/sd-button-v2/sd-button-v2.js",
     "components/sd-card/sd-card.js",
+    "components/sd-confirm-modal/sd-confirm-modal.js",
     "components/sd-date-picker/sd-date-picker.js",
     "components/sd-date-range-picker/sd-date-range-picker.js",
     "components/sd-portal/sd-portal.js",
@@ -27,6 +27,8 @@
     "components/sd-icon/sd-icon.js",
     "components/sd-input/sd-input.js",
     "components/sd-loading-spinner/sd-loading-spinner.js",
+    "components/sd-modal-container/sd-modal-container.js",
+    "components/sd-notice-modal/sd-notice-modal.js",
     "components/sd-number-input/sd-number-input.js",
     "components/sd-pagination/sd-pagination.js",
     "components/sd-popover/sd-popover.js",