@sellmate/design-system 1.6.0 → 1.7.0

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

@@ -18,10 +18,10 @@ const SdLoadingContainer = class {
         this.visible = false;
     }
     render() {
-        return (index.h("div", { key: '99c6d9e798862f41142f246f371a357cd604aa44', class: {
+        return (index.h("div", { key: 'bae5e9473237c0389d6fb404294abe6897c9847c', class: {
                 'sd-loading-container': true,
                 'sd-loading-container--visible': this.visible,
-            }, "aria-hidden": this.visible ? 'false' : 'true' }, index.h("div", { key: 'b836c7d283113e57d0947a178035591521dc8ee2', class: "sd-loading-container__backdrop" }), index.h("div", { key: '02f1ae9b17eedb29f24d0170c65ef4217f38a5b5', class: "sd-loading-container__content" }, index.h("sd-circle-progress", { key: '3d9c1b33693e823c4c55967d00a63eff8a2a805e', indeterminate: true, type: "inverse" }), this.message && (index.h("p", { key: '46c060f444506a9771507b09fd0867f763a95680', class: "sd-loading-container__message" }, this.message)))));
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, index.h("div", { key: 'd78b4d84c7cd34739452b0ab84df640c94939b2b', class: "sd-loading-container__backdrop" }), index.h("div", { key: '890c86605412bf67ab878155fd299c2f0b84e375', class: "sd-loading-container__content" }, index.h("sd-circle-progress", { key: '0912c4b7c23700b6ccf8ffdc6b4ce0d67b568320', indeterminate: true, type: "inverse" }), this.message && (index.h("p", { key: '373d1765d0a7c24b54bb22e65a8a6a525771ed78', class: "sd-loading-container__message" }, this.message)))));
     }
 };
 SdLoadingContainer.style = sdLoadingContainerCss();

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

@@ -203,6 +203,9 @@ const SdModalContainer = class {
         if (this.hasOwnProp(options, 'height')) {
             this.setAttr(el, 'height', options.height != null ? String(options.height) : undefined);
         }
+        if (this.hasOwnProp(options, 'progress')) {
+            el.progress = options.progress;
+        }
     }
     applyProps(el, options) {
         if (this.hasOwnProp(options, 'type'))

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

@@ -154,13 +154,13 @@ const SdPagination = class {
             '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
             '--sd-pagination-item-width': `${this.buttonWidth}px`,
         };
-        return (index.h("div", { key: '36a334a05ade253a6345e82d57647a4bab0c94cf', class: {
+        return (index.h("div", { key: 'a5d1cb7e22c1d582800f329e6b02ffd9f5e6605c', class: {
                 'sd-pagination': true,
                 'sd-pagination--simple': this.simple,
-            }, style: cssVars }, index.h("div", { key: '50963e0cdf4da3078020207c0115ccebfe1881d6', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "sd-pagination__info" }, index.h("span", { class: "sd-pagination__current" }, this.currentPage), index.h("span", { class: "sd-pagination__divider" }, "/"), index.h("span", { class: "sd-pagination__last" }, this.lastPage))) : (index.h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (index.h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+            }, style: cssVars }, index.h("div", { key: '196f7f2b3cc0fc896ddbcd4449b23d31729c7ec3', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "sd-pagination__info" }, index.h("span", { class: "sd-pagination__current" }, this.currentPage), index.h("span", { class: "sd-pagination__divider" }, "/"), index.h("span", { class: "sd-pagination__last" }, this.lastPage))) : (index.h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (index.h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'sd-pagination__item': true,
                 'sd-pagination__item--selected': this.currentPage === n,
-            }, onClick: () => this.handlePageChange(n) }, n))))), index.h("div", { key: 'a0d0b565cd2b5108c997888b2536ee740b167367', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n))))), index.h("div", { key: '5fe50f0cef43f8b5ef72556ed4d19653cb30a7e9', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
     }
 };
 SdPagination.style = sdPaginationCss();
@@ -215,9 +215,9 @@ const SdTbody = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'cee6094ac768af309c39500cb337d8516de6aabe', slot: `${this.tableId}-body` }, index.h("tbody", { key: '50d46c6b102900b18a96c1e345afb4185e59e0ae', class: { tbody: true } }, [
+        return (index.h(index.Host, { key: 'b35f308e703fd3240f8c8dc30bc04432a213fb14', slot: `${this.tableId}-body` }, index.h("tbody", { key: 'b43c4347f84f13b9babad33ba841ffc18630ac55', class: { tbody: true } }, [
             this.topSpacerHeight > 0 && (index.h("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
-            index.h("slot", { key: 'd4f8057c143b2f91146831fac2b4ba1162d36aeb' }),
+            index.h("slot", { key: 'ac0cbfc76b8c38743f73e38c584459176c2a5b94' }),
             this.bottomSpacerHeight > 0 && (index.h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
         ])));
     }
@@ -392,16 +392,16 @@ const SdThead = class {
             '--table-border-color': sdTable_config.TABLE_BORDER.color,
             '--table-border-width': `${sdTable_config.TABLE_BORDER.width}px`,
         };
-        return (index.h(index.Host, { key: '2b949f43561a2cd36b82de324d3d8c0d8a1d8431', slot: `${this.tableId}-head`, style: headStyle }, index.h("thead", { key: '45918bfb1dc44bb0f45a0f1646bf2276b1ca74ec', class: {
+        return (index.h(index.Host, { key: 'aa5409734259c4c9dce1be6808a622e1dad8e577', slot: `${this.tableId}-head`, style: headStyle }, index.h("thead", { key: '4c8aac4d2b9a0f9288abb67a03bd2c47510af676', class: {
                 'thead': true,
                 'thead--sticky': this._stickyHeader,
-            } }, index.h("tr", { key: '3802f86a730041ca405071b243a99c28e04558d2', class: "tr" }, this._selectable && (index.h("th", { key: 'd60e1323fca90516f38cedfa6fc8bf17840fad5d', class: {
+            } }, index.h("tr", { key: 'be0af465f9406a898649bb0cea1b1972fc131a9b', class: "tr" }, this._selectable && (index.h("th", { key: '72a763c4116dc03c372131629d64a92d9f338b65', class: {
                 'th': true,
                 'th--selected': true,
                 'sticky-left': true,
                 'sticky-left-edge': stickyLeftCount === 0,
                 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
-            }, style: { '--sticky-left-offset': '0px' } }, index.h("sd-checkbox", { key: '0c0b61405a8624cfc1d803f8ae8905d74d6c10f1', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), index.h("div", { key: 'b808a627e740a9c3a9f6f03e32cf90e598fd506f', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (index.h("th", { key: col.name, class: {
+            }, style: { '--sticky-left-offset': '0px' } }, index.h("sd-checkbox", { key: '2076f3b5a6baef3b6c1cfa6bab96953144f8a669', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), index.h("div", { key: '39dd8464081671945828859cec50862b1979de36', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (index.h("th", { key: col.name, class: {
                 'th': true,
                 [`${col.thClass}`]: Boolean(col.thClass),
                 'sticky-left': true,

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

@@ -29,10 +29,10 @@ const SdPopover = class {
     disabled = false;
     type = 'button';
     menuTitle;
-    messages = [];
     leftLink;
     button;
     menuClass = '';
+    slotContentHTML = '';
     showChange;
     buttonEl;
     setShow = (next) => {
@@ -54,27 +54,30 @@ const SdPopover = class {
         }
     }
     handleClose = () => this.setShow(false);
+    componentWillLoad() {
+        this.slotContentHTML = this.el.innerHTML;
+        this.el.innerHTML = '';
+    }
     render() {
         const placement = this.placement ?? 'bottom';
         const color = this.color ?? '#01BB4B';
         const icon = this.icon ?? 'helpOutline';
         const iconSize = this.iconSize ?? 12;
         const menuClass = this.menuClass ?? '';
-        const messages = Array.isArray(this.messages) ? this.messages : [];
         const leftLink = this.leftLink;
         const button = this.button;
         const hasFooter = !!leftLink || !!button;
-        return (index.h(index.Fragment, { key: '7bf954f334ae12586a02b799139dc29421a86551' }, this.label !== '' ? (index.h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-popover", onSdClick: () => this.setShow(!this.show) })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (index.h("sd-floating-portal", { key: 'f785e5851cf126052d2c016220d9ff2376f2a9f3', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, index.h("div", { key: '5eb30ad12f0f1cb3f23ae90e6b51e9c545dee8fd', class: {
+        return (index.h(index.Fragment, { key: '3eb48b91ccf49d78cf332bf2c83268ca903be3ef' }, this.label !== '' ? (index.h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel || this.label || icon || 'Open popover', disabled: this.disabled, type: this.type ?? 'button', class: "sd-popover", onSdClick: () => this.setShow(!this.show) })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (index.h("sd-floating-portal", { key: '94c0b1d56307b29944d078d03bdd686c3eacaee0', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, index.h("div", { key: '3f969dcad5785973e80cab6090e8b687461bbbe2', class: {
                 'sd-floating-menu': true,
                 'sd-floating-menu--popover': true,
                 [`sd-floating-menu--${placement}`]: true,
                 [menuClass]: menuClass !== '',
             }, style: {
                 '--sd-floating-bg': popoverTokens.popover.bg,
-            } }, index.h("i", { key: '632639d52731fe47baf2860464013a4d0fd3c3d8', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '1f963e1a52b09803fd9f2d1f1ce7a07023951fc9' })), index.h("div", { key: '1c90735369085c465321e398775c4ce484190479', class: "sd-floating-menu__content" }, this.menuTitle && index.h("div", { key: '29584cd7bcb244c3fb6b0cb895a5c4b55093418a', class: "sd-floating-menu__title" }, this.menuTitle), messages.length > 0 && (index.h("div", { key: '2c7a9671cbec98f0fb393b1d049bfecc1e8b8013', class: "sd-floating-menu__messages" }, messages.map((message, i) => (index.h("div", { key: `msg-${i}` }, message))))), hasFooter && (index.h("div", { key: '18667a0a8eaf8f022513b048095c24487dd4ae98', class: {
+            } }, index.h("i", { key: '3992cc7f589dc932c59a9bd88376b93e66e37cd0', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, index.h(tooltipArrow.TooltipArrow, { key: 'b2d27b5131e022d3d22a82cccf9cd80afc414194' })), index.h("div", { key: '48b33b11d8179e51fe4b3f0fbc24084d197b5447', class: "sd-floating-menu__content" }, this.menuTitle && index.h("div", { key: 'b955fb4707b66d003414197254a165388ceafb11', class: "sd-floating-menu__title" }, this.menuTitle), this.slotContentHTML && (index.h("div", { key: 'c5416ab9a7f4f0bcda01af31304e4358f25ff6e2', class: "sd-floating-menu__messages", innerHTML: this.slotContentHTML })), hasFooter && (index.h("div", { key: '51db3b7a70e4f1befc49b7ee26422a634a38d9e1', class: {
                 'sd-floating-menu__buttons': true,
                 'sd-floating-menu__buttons--with-link': !!leftLink,
-            } }, leftLink && (index.h("sd-text-link", { key: 'efbeb3047ea9eb62eba2f5940ec4f71f46d1c479', class: "sd-floating-menu__left-link", label: leftLink.label, icon: leftLink.icon ?? '', iconColor: leftLink.iconColor ?? '', useArrow: !!leftLink.useArrow, underline: !!leftLink.underline, disabled: !!leftLink.disabled, onSdClick: leftLink.onClick })), button && (index.h("sd-button", { key: '9044ee54225a7b441c85d1acf3355e2d3688f942', name: button.name ?? 'secondary_xs', label: button.label, icon: button.icon, rightIcon: button.rightIcon, ariaLabel: button.ariaLabel, disabled: button.disabled, type: button.type, onSdClick: button.onClick }))))), index.h("sd-ghost-button", { key: '4f37394444b692ff5a2b736fe3514e51eb49b601', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose }))))));
+            } }, leftLink && (index.h("sd-text-link", { key: 'a2a164fa9ab3294c0b0e726c7c69405a612de264', class: "sd-floating-menu__left-link", label: leftLink.label, icon: leftLink.icon ?? '', iconColor: leftLink.iconColor ?? '', useArrow: !!leftLink.useArrow, underline: !!leftLink.underline, disabled: !!leftLink.disabled, onSdClick: leftLink.onClick })), button && (index.h("sd-button", { key: '41c917026e1255ac2bd355042500c6efa0e76cb0', name: button.name ?? 'secondary_xs', label: button.label, icon: button.icon, rightIcon: button.rightIcon, ariaLabel: button.ariaLabel || button.label || button.icon || 'Open popover', disabled: button.disabled, type: button.type, onSdClick: button.onClick }))))), index.h("sd-ghost-button", { key: 'dde5bbb7bc8b9b5ce6b122eb566ce961dd640ad0', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose }))))));
     }
 };
 SdPopover.style = sdPopoverCss();

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

@@ -105,7 +105,7 @@ const SdPopup = class {
             ...DEFAULT_SUBMIT_BUTTON_PROPS,
             ...this.submitButtonProps,
         };
-        return (index.h("div", { key: '77379698e76b000368df2d2b7345010cde3df7ba', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, index.h("header", { key: 'e00d2292b718bfd21e491a09e5ea8c18fbb1a2c8', class: "sd-popup__header" }, index.h("h2", { key: 'b8bac8f58f7f916a3b6fe40a66d21318da45d4d3', class: "sd-popup__title" }, this.popupTitle)), index.h("div", { key: '56e5b653539752b9fd0fa4694f7342914cd7abc6', class: "sd-popup__body" }, index.h("slot", { key: '183fafa8179a3350817ec6e3dea12281860f7639' })), this.useFooter && (index.h("footer", { key: 'd1b7fe2d67e5f3ad3b3f8e20408271fdaab86d93', class: "sd-popup__footer" }, index.h("div", { key: '7cc5d0bd9d314942d8d5f982f1f459c56fde4bc0', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, index.h("slot", { key: 'ffb52c9d679e4ddf9e50e012f8a9aa02b0cb1f95', name: "footer-left" })), index.h("sd-button", { key: '3ab8061bf4119a9351921a41c3d9cb942c00b5d1', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
+        return (index.h("div", { key: '53c0cca8c1188f36569ffaf79767fe81f9a5bf87', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, index.h("header", { key: 'f8459d43d2568e1f8fbcb19f789ba2a9998db8e7', class: "sd-popup__header" }, index.h("h2", { key: '56b960c73d215e4ce878007acd0b04e1371ee87b', class: "sd-popup__title" }, this.popupTitle)), index.h("div", { key: '513de018b9826c54672bdc8019447b3026fb2d9f', class: "sd-popup__body" }, index.h("slot", { key: '60109bc7ee30ac100a08285e50d24027e6bc22d0' })), this.useFooter && (index.h("footer", { key: '4daa5fa938f2d79b2ab4d13de1d6aeb0b02d78e1', class: "sd-popup__footer" }, index.h("div", { key: '6f885be6acb363054c659f7f844558b9bda1ca74', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, index.h("slot", { key: '57231c78bb0512407323c8ef16a90011027abbc4', name: "footer-left" })), index.h("sd-button", { key: 'ce4c1e577d4b3346d368e22ce713ccc57f54f231', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
     }
 };
 SdPopup.style = sdPopupCss();

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

@@ -79,7 +79,7 @@ const SdSelectListItem = class {
         return (
         // 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        index.h("div", { key: '33f5d4383d2bfac91507d72d98b8a73b380a70e8', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
+        index.h("div", { key: 'd1030a5fb5797ea6be89f6a3a32201145e5fa387', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
                 'sd-select-list-item': true,
                 'sd-select-list-item--group': isGroup,
                 'sd-select-list-item--depth1-group': isDepth1Group,
@@ -89,7 +89,7 @@ const SdSelectListItem = class {
                 'sd-select-list-item--focused': this.isFocused,
                 'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
                 'sd-select-list-item--disabled': !!this.option.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (index.h("sd-checkbox", { key: 'a93dec7a45e140d7f715a6fc823c4438c58cdd8f', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), index.h("span", { key: '81b0bfdd0825b795f2638d6529e8c5fb346be6db', class: "sd-select-list-item__label" }, this.option.label), this.countInfo && (index.h("span", { key: '2e1425a5d6ab9082a30b4d9079be1d4104d95fc2', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (index.h("sd-checkbox", { key: '1f8a7812f567ece12b7e064a9e9738366b0a0e11', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), index.h("span", { key: '55e2e4c9497aea99fc0502b40ac16809c257206e', class: "sd-select-list-item__label" }, this.option.label), this.countInfo && (index.h("span", { key: '722599bf0022770c91c02d4e67a6e234da4e0f80', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
 };
 SdSelectListItem.style = sdSelectListItemCss();
@@ -142,15 +142,15 @@ const SdSelectListItemSearch = class {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (index.h("div", { key: '8c0c85ac9c382e2978e32924c33a580a4fac3485', class: {
+        return (index.h("div", { key: '69416e32b3915ca27d8e2f25a7f36d1868835696', class: {
                 'sd-select-list-item-search': true,
                 'sd-select-list-item-search--scrolled': this.isScrolled,
-            } }, index.h("div", { key: '92425ff6eab4cf16f96f45dabb8f07c27ad9e747', class: "sd-select-list-item-search__inner" }, index.h("sd-icon", { key: '253a40e4e624e828e351d08c1f05fb2d098c8b9b', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), index.h("input", { key: 'b38735ae6e75b9fe19ceb3038c5b873ad42760ef', ref: el => {
+            } }, index.h("div", { key: '3917460421d197d70abc7b6b9c75fa85ce9e6631', class: "sd-select-list-item-search__inner" }, index.h("sd-icon", { key: '42a0d8221d2479457af32db35111bb35d7a28e53', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), index.h("input", { key: '48ab6ef174ddf194aa2616d0cbfbc09fa2032222', ref: el => {
                 this.inputEl = el;
-            }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), index.h("button", { key: '8045fef5d1821ea60ac261ee07f7eddf8a7a189d', type: "button", class: {
+            }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), index.h("button", { key: 'ead5c189a8ef2b8cb3696cc6536c58dd4864c71e', type: "button", class: {
                 'sd-select-list-item-search__clear': true,
                 'sd-select-list-item-search__clear--hidden': this.searchText === '',
-            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, index.h("sd-icon", { key: '110c0420fd17c51055cfc1815a528cf7c385d91e', name: "close", size: 12, color: "#888888" })))));
+            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, index.h("sd-icon", { key: '6590c0acd5114722126459f4886c587b320a17e1', name: "close", size: 12, color: "#888888" })))));
     }
 };
 SdSelectListItemSearch.style = sdSelectListItemSearchCss();

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

@@ -265,15 +265,15 @@ const SdSelect = class {
                 this.closeDropdown();
             },
         };
-        return (index.h("sd-field", { key: '3c188cbdd8c612e78780d18c03acc382d32080c9', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, 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: () => {
+        return (index.h("sd-field", { key: '08992d05403b6e7ba6aec7968dd6fa99d8857666', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, 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;
-            } }, index.h("div", { key: 'be596d399856ed966408ba1525fea9dbdf8fcc7e', class: "sd-select", ref: el => {
+            } }, index.h("div", { key: '3372029d54087654b8172d4d374126c0be703f5c', class: "sd-select", ref: el => {
                 this.triggerRef = el;
-            } }, index.h("sd-select-trigger", { key: 'f8a29b1ac2469c60af8c7101d05157674566f00f', ref: el => {
+            } }, index.h("sd-select-trigger", { key: 'af832319b490501468b05da69eeed964a07f00ea', ref: el => {
                 this.triggerComponentRef = el;
-            }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '3cef3f95f69b09d0e4e8f6b01615df4cca031cff', ...portalProps }, index.h("sd-select-listbox", { key: 'e8833c547aa2e8084754c7a439d3860df5c97e5b', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+            }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: 'b6b9211aadd5ef643716948dfa67d6d923420679', ...portalProps }, index.h("sd-select-listbox", { key: '9d532180439c8d1867e349d89914626b644ac224', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
     static get watchers() { return {
         "isOpen": [{
@@ -637,9 +637,9 @@ const SdSelectListbox = class {
             '--listbox-max-height': this.maxHeight ?? '260px',
             '--listbox-radius': `${sdSelect_config.LIST_BOX_LAYOUT.radius}px`,
         };
-        return (index.h("div", { key: '7505e221ddb890880f0ba5088c3fdc76700e3b2f', class: "sd-select-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-list-item-search", { key: '54b97ad40c5e7abe92b478689d09337843736652', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: 'f7417f923cc34cbb2c2a56ae70ed54701d013d3d', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (index.h("div", { key: 'f2b243788074de1aa3e78a78566a622ab3116351', class: "sd-select-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-list-item-search", { key: 'a9f9f30a43e1965756095e29a24f75b4f1c14100', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: 'b500f705a69e2c98e3ad79bf04c2bb2a4b8a6162', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
-            } }, this.showSelectAll && (index.h("sd-select-list-item", { key: '5e8cfcb1f9f0953b9eaa6fc73de992b52a0a23d7', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (index.h("div", { class: "sd-select-listbox__empty" }, sdSelect_config.EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (index.h("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
+            } }, this.showSelectAll && (index.h("sd-select-list-item", { key: 'c47e41ebce483ee311cae261b2f4fe21c134e437', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (index.h("div", { class: "sd-select-listbox__empty" }, sdSelect_config.EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (index.h("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
     }
     static get watchers() { return {
         "searchKeyword": [{
@@ -699,7 +699,7 @@ const SdSelectTrigger = class {
                 ? sdSelect_config.SELECT_COLORS.icon.disabled
                 : sdSelect_config.SELECT_COLORS.icon.default,
         };
-        return (index.h("div", { key: '3a97ed909e3088528714682050a3986081e19433', ref: el => {
+        return (index.h("div", { key: '471e6df2948987989fa192474b0305ad0c8bcd32', ref: el => {
                 this.triggerEl = el;
             }, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
                 'sd-select-trigger': true,
@@ -710,7 +710,7 @@ const SdSelectTrigger = class {
                     e.preventDefault();
                     this.handleClick();
                 }
-            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("div", { key: '986faba7d79980f0bcd10fff32495d2100e1805f', class: "sd-select-trigger__content" }, index.h("span", { key: 'c51b268186de7cdabcf06ac3d540ccb570c9e865', class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택')), index.h("sd-icon", { key: '8a03b400d5aef2e0ca9aeb4b1f6122db2932455a', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("div", { key: '8133b44065cd4a27d6aa71980c8684c363c7e7ba', class: "sd-select-trigger__content" }, index.h("span", { key: 'd8ee3d118cf760b687b491387592efe0c7532cf2', class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택')), index.h("sd-icon", { key: '0271061d32f1236346812a21a2e483402a94415c', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
                 'sd-select-trigger__icon': true,
                 'sd-select-trigger__icon--open': this.isOpen,
             } }))));

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

@@ -102,7 +102,7 @@ const SdSwitch = class {
             '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
             '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
         };
-        return (index.h("label", { key: '04674e9fc781ac58b2e68ae30cb90c948de8b5e3', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, index.h("input", { key: 'b87970c38aa2ccbe3d8f91414c96c2f05aaaa818', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), index.h("div", { key: 'd87bcaf8b16d17401215dd962875dc585f747d65', class: "sd-switch__track" }, index.h("div", { key: '408a034cd6b063d9cd968f647995cc77dfdd0577', class: "sd-switch__knob" })), this.label && index.h("span", { key: '58d7ab18329007eac2e23b0fcda66a841e4df0c2', class: "sd-switch__label" }, this.label)));
+        return (index.h("label", { key: 'b5dc0e7a9a59d679402226aa18f3155e42f6b7c2', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, index.h("input", { key: 'aa77eb38e07dfc911eb3a72c3ab3b3287423deaa', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), index.h("div", { key: 'b973671f6229fea3aab8d4040cc2916e32001eaf', class: "sd-switch__track" }, index.h("div", { key: 'db6073df05c1d77681559490fd773fdce24c6ca4', class: "sd-switch__knob" })), this.label && index.h("span", { key: '8ee1f5ba9fc1561a351d6982929721cc33ce0650', class: "sd-switch__label" }, this.label)));
     }
 };
 SdSwitch.style = sdSwitchCss();

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

@@ -842,25 +842,25 @@ const SdTable = class {
             '--table-body-text-decoration': sdTable_config.TABLE_BODY_TYPOGRAPHY.textDecoration,
             '--table-selectable-width': `${sdTable_config.TABLE_SELECTABLE_COLUMN_WIDTH}px`,
         };
-        return (index.h(index.Host, { key: '4596e04bd57aca00fa6378fd26ce33a06a795eaf', style: hostStyle }, index.h("div", { key: '11a20d327410b0be659cede32917164e036e796c', class: "sd-table__container", style: {
+        return (index.h(index.Host, { key: '73046beb47b356f351ae89b162c8e8af2942b0b2', style: hostStyle }, index.h("div", { key: 'f56b8a425d15a3598e6c1f3373d21ef263cbd800', class: "sd-table__container", style: {
                 '--table-width': this.width,
                 '--table-height': effectiveTableHeight,
                 '--table-container-height': `calc(${effectiveTableHeight} - ${paginationHeight}px)`,
-            } }, index.h("div", { key: 'f4f3acf584dc4eacdae25b11aa2b62b73ffab949', class: {
+            } }, index.h("div", { key: '519a193ab21616ce0a423c9043e0114c489539f3', class: {
                 'sd-table__wrapper': true,
                 'sd-table__wrapper--use-top': this.useTop,
-            } }, index.h("div", { key: 'c8ab618b9c990a22b8e9466a5bfb5f02f4de8b12', class: {
+            } }, index.h("div", { key: 'ef96c9e2ef6b70023c35e5709048f3d994a5bebc', class: {
                 'sd-table__scroll-container': true,
                 'sd-table__scroll-container--loading': this.isLoading,
                 'sd-table__scroll-container--no-data': isNoData,
-            } }, this.isLoading && (index.h("div", { key: 'a696933a70799ba282fc743281d0af27fd691a2e', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, index.h("sd-circle-progress", { key: 'cba6ac47367ef6499bf338b9b757ee74fdd7e6c1', indeterminate: true }))), isNoData && (index.h(index.h.Fragment, null, index.h("div", { key: '6e22156bf5b0fb9814d9bf9cad57506758c6284b', class: "sd-table__no-data-header-overlay" }), index.h("div", { key: 'b72f9fabcc8acb8e700ad55acc4d7aff08355a1c', class: "sd-table__no-data" }, index.h("div", { key: '43f271a8803121362f16e8153748328658f073ec', class: "sd-table__no-data-content", ref: el => {
+            } }, this.isLoading && (index.h("div", { key: '94f9bbc56855af3548a73ccbbf228b2247764f54', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, index.h("sd-circle-progress", { key: '2f8a0bfbc0c5829779b7474a9520ddec70a977ea', indeterminate: true }))), isNoData && (index.h(index.h.Fragment, null, index.h("div", { key: 'fab3d44147ecbc99ff3745908ec69da003b4e7cf', class: "sd-table__no-data-header-overlay" }), index.h("div", { key: '10f8b13e6bba12c80001e5d4432715b0abe2f2f2', class: "sd-table__no-data" }, index.h("div", { key: '8c411450fc0780df83e69c86ad06c2d09cf80350', class: "sd-table__no-data-content", ref: el => {
                 this.noDataContentEl = el;
                 if (el)
                     this.syncNoDataContentObserver();
-            } }, index.h("slot", { key: '4b8533115bbc81962b80c9c2533fe4b44a87193c', name: "no-data" }, index.h("span", { key: 'd94c4f7cf9eca7901b99434f712480a7b20c869a' }, this.resolvedNoDataLabel)))))), index.h("table", { key: 'a9a353aca09124ed8a82fcd2f8a0a7de09b234f5', class: this.tableClasses }, this.autoThead ? (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-thead", { rows: this.rows ?? [] }))) : (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
+            } }, index.h("slot", { key: '661b982cde4f4a6dfa9f6c712efed6745e20f3bf', name: "no-data" }, index.h("span", { key: '76330839b2614611266315bb8b482b6a8571f1f4' }, this.resolvedNoDataLabel)))))), index.h("table", { key: '89d9f80c6a0c9963b311d2c121ae0cb0a3289da0', class: this.tableClasses }, this.autoThead ? (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-thead", { rows: this.rows ?? [] }))) : (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
             this.pagination.rowsPerPage > 0 &&
             this.rowCount > 0 &&
-            !this.useVirtualScroll && (index.h("div", { key: '8afeb9398c3d7540a54b9a3660fb9685ae1cddca', class: "sd-table__pagination" }, index.h("sd-pagination", { key: 'e2cbb3f7414f65b81ab2d33eaec5d9f28bed6cc8', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (index.h("sd-select", { key: 'ce723544dbc7e4cc0d77ced3b685b8575cf67e6f', value: this.useInternalPagination
+            !this.useVirtualScroll && (index.h("div", { key: '02e675535bbdc30ab7177378f1b2b13799a9e5c8', class: "sd-table__pagination" }, index.h("sd-pagination", { key: '83537d5e2f6d5b92e2a4b7dd9e4624372adf0433', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (index.h("sd-select", { key: 'f843f063b736e534b017fd7f881f049c4258c792', value: this.useInternalPagination
                 ? this.innerRowsPerPage
                 : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
                 if (!this.isRowsPerPageValue(e.detail))

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

@@ -188,7 +188,7 @@ const SdTabs = class {
         };
     }
     render() {
-        return (index.h("div", { key: '92384577bf4ce85de90ae05a32e44715e595fe16', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index$1) => {
+        return (index.h("div", { key: '880f1aa80c29f2d578ffe2d5e5e5e0c008c898d3', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index$1) => {
             const badgeName = this.getBadgeName(tab);
             return (index.h("div", { key: `tab-${index$1}`, role: "tab", tabindex: 0, "aria-selected": tab.value === this.value ? 'true' : 'false', class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab), onKeyDown: e => {
                     if (e.key === 'Enter' || e.key === ' ') {

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

@@ -158,7 +158,7 @@ const SdTd = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '1d7123e1f35cfb513a1fa89b4d60f8dde7715a2f', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: 'f7b9266106a6df93e2101ca9a324035960281a6f' })));
+        return (index.h(index.Host, { key: '5c40fa3dd98dbd88850bd14836ee5578ceb04349', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: '864b000e178c0b6de25b930aa5a84b4f7d7c189b' })));
     }
     static get watchers() { return {
         "field": [{

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: '1de55d255b75842f52e3f0a147a69493ed1a7de5', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (index.h("div", { key: 'bc3c9591b6453eed7df462841e29784c29b3aeef', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

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

@@ -84,12 +84,12 @@ const SdToast = class {
         const linkColor = typeConfig.linkColor ?? typeConfig.content;
         const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
         const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
-        return (index.h("div", { key: '735fa3f949ee4c7d0178f999c02e90c829c133b4', style: {
+        return (index.h("div", { key: 'db3ffaf51dc96c39c05558017f25929c679a59df', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
                 '--sd-toast-icon': iconColor,
                 '--sd-toast-link': linkColor,
-            } }, index.h("div", { key: '4e483d858c3268bde838ddc5c5c9cb5065855326', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '007eded85c508bdd2da05b1c9d489ff2d03a4df9', class: "sd-toast__icon" }, index.h("sd-icon", { key: '099d5556f4b0a11f5162cb76a6166a2d662d9590', name: this.icon, size: iconSize, color: iconColor }))), index.h("div", { key: '3825916248bc2385fe87c8aeb6d741b59738246f', class: "sd-toast__content" }, index.h("span", { key: 'fba817baf33179296f50d3fe4147cc99c38fbb83', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '39667765a9a72c761f0b464f78c7652e60e6dd16', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: '3da2f9a5daf53de4400bfec79654b5795c3b6af4', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (index.h("sd-ghost-button", { key: '2578d35dc11e06178c6902cb358bcdb8ccabbf36', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, index.h("div", { key: '92344f5bb95b0d4787591207f2e017d7dd177091', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '991db58b2cb019dd3a787e000e9d8813014bbb09', class: "sd-toast__icon" }, index.h("sd-icon", { key: '24d53cd77fdea82ec07663a8968493ec2b794751', name: this.icon, size: iconSize, color: iconColor }))), index.h("div", { key: '70cfad4ef389cca798be9baeac99bfc41efcc615', class: "sd-toast__content" }, index.h("span", { key: '5927023435b17dc25ee07630fc4ae4568aadd9b9', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '410c024fd81ebcc78175c1855a86f590566d1a81', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: 'd85287e7ef796a11f850a0ce5cde87f5881fa5c9', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (index.h("sd-ghost-button", { key: '55a6bf6457bd89254f6eb01072d46a0edbb8b510', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
 };
 SdToast.style = sdToastCss();

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

@@ -120,7 +120,7 @@ const SdToggle = class {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (index.h("label", { key: 'f1b1b68270d523f7f3e40c8145f35e93df269d73', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: '7e07c190916e19ffe8744f6b491e92e6bf8efd36', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (index.h("label", { key: 'b16577aa25863a9dc337314d9059328799c1cd1e', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: '6130825b74df8a573f4e062671fd694508759e82', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggle.style = sdToggleCss();

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

@@ -11,7 +11,7 @@ export class SdChip {
     internalValue = '';
     isEditing = false;
     update;
-    remove;
+    delete;
     focus;
     blur;
     inputEl;
@@ -145,7 +145,7 @@ export class SdChip {
         event.stopPropagation();
         if (this.disabled)
             return;
-        this.remove.emit();
+        this.delete.emit();
     };
     syncInputValue(value) {
         if (!this.inputEl)
@@ -378,7 +378,7 @@ export class SdChip {
                     "references": {}
                 }
             }, {
-                "method": "remove",
+                "method": "delete",
                 "name": "sdRemove",
                 "bubbles": true,
                 "cancelable": true,

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

@@ -7,7 +7,7 @@ export class SdDivider {
         const hostStyle = {
             '--sd-divider-color': DIVIDER_COLORS.default,
         };
-        return (h(Host, { key: '92e9f5ef8d6d382e1e2a62f3421feaf1bc27aab7', style: hostStyle }, h("hr", { key: '40827e6308a258e6de4a438c53d4de9465a6d0a1', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
+        return (h(Host, { key: '3b3c22b1c5bf2d1bfa52c136113719e26b2e6767', style: hostStyle }, h("hr", { key: '4eca9f280e452330a2f57b03466e00f04688ad06', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
     }
     static get is() { return "sd-divider"; }
     static get originalStyleUrls() {

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

@@ -185,7 +185,8 @@ export class SdField {
                 : {} }, h("div", { key: '1f3c5f2009a0d96b8a3544c58b96f7ecc4ddee6b', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': addon !== '',
-            } }, addon && h("div", { key: '39a28adaa959b89d3724672910157662e50b35ed', class: "sd-field__addon" }, addon), h("slot", { key: '0c9360e8644df658c389554c13a04bc22985e84d' })), this.errorMsg !== '' || this.errorMessage !== '' ? (h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && h("div", { class: "sd-field__hint" }, this.hint))))));
+            } }, addon && (h("div", { key: 'e4f180f0183267ea99e2b8b65b6e4cd769a47946', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: 'c5503a823d8c5534abd27dc59bbd399702a07283', name: this.icon.name, size: this.icon.size ??
+                Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), h("slot", { key: '8b8bd230703e0b1e45eab3a5334dbdbb55fae8c9' })), this.errorMsg !== '' || this.errorMessage !== '' ? (h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && h("div", { class: "sd-field__hint" }, this.hint))))));
     }
     renderLabel(label) {
         if (label == null || label === '')

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

@@ -1,8 +1,22 @@
 sd-file-picker {
-  display: inline-flex;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.sd-file-picker__wrapper {
+  display: flex;
+  flex-direction: column;
   width: 100%;
 }
 
+.sd-file-picker__chip-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 8px;
+}
+
 .sd-file-picker__content {
   width: 100%;
   height: 100%;

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

@@ -65,11 +65,11 @@ export class SdFilePicker {
             return undefined;
         return typeof value === 'string' ? Number(value) : value;
     }
-    validateFiles(files) {
+    validateFiles(files, existingCount = 0) {
         const maxFileSize = this.toBytes(this.maxFileSize);
         const maxTotalSize = this.toBytes(this.maxTotalSize);
         const maxFiles = this.maxFiles != null ? Number(this.maxFiles) : undefined;
-        if (maxFiles != null && files.length > maxFiles) {
+        if (maxFiles != null && existingCount + files.length > maxFiles) {
             return { accepted: [], rejected: files, reason: 'max-files' };
         }
         if (maxFileSize != null) {
@@ -93,22 +93,34 @@ export class SdFilePicker {
             return;
         }
         const fileArray = Array.from(files);
-        const { accepted, rejected, reason } = this.validateFiles(fileArray);
-        if (reason != null) {
-            this.reject?.emit({ files: rejected, reason });
+        if (this.multiple) {
+            const existing = Array.isArray(this.internalValue) ? this.internalValue : [];
+            const { accepted, rejected, reason } = this.validateFiles(fileArray, existing.length);
             if (this.fileInputRef) {
                 this.fileInputRef.value = '';
             }
-            return;
-        }
-        if (this.multiple) {
-            this.internalValue = accepted;
+            if (reason != null) {
+                this.reject?.emit({ files: rejected, reason });
+                return;
+            }
+            const merged = [...existing, ...accepted];
+            this.internalValue = merged;
+            this.value = merged;
+            this.update?.emit(this.value);
         }
         else {
+            const { accepted, rejected, reason } = this.validateFiles(fileArray);
+            if (reason != null) {
+                this.reject?.emit({ files: rejected, reason });
+                if (this.fileInputRef) {
+                    this.fileInputRef.value = '';
+                }
+                return;
+            }
             this.internalValue = accepted[0];
+            this.value = this.internalValue;
+            this.update?.emit(this.value);
         }
-        this.value = this.internalValue;
-        this.update?.emit(this.value);
     };
     handleClear = (event) => {
         if (this.disabled)
@@ -128,6 +140,8 @@ export class SdFilePicker {
         this.fileInputRef?.click();
     };
     hasFiles() {
+        if (this.multiple)
+            return false;
         if (!this.internalValue)
             return false;
         if (Array.isArray(this.internalValue)) {
@@ -135,14 +149,28 @@ export class SdFilePicker {
         }
         return true;
     }
+    hasChips() {
+        return Array.isArray(this.internalValue) && this.internalValue.length > 0;
+    }
     getDisplayText() {
         if (!this.hasFiles())
             return this.placeholder ?? 'Click to upload';
-        if (Array.isArray(this.internalValue)) {
-            return this.internalValue.map(f => f.name).join(', ');
-        }
         return this.internalValue?.name || (this.placeholder ?? 'Click to upload');
     }
+    handleChipRemove = (index) => {
+        if (!Array.isArray(this.internalValue))
+            return;
+        const newFiles = [...this.internalValue];
+        newFiles.splice(index, 1);
+        this.internalValue = newFiles;
+        this.value = newFiles;
+        this.update?.emit(this.value);
+    };
+    renderChipList() {
+        if (!this.hasChips())
+            return null;
+        return (h("div", { class: "sd-file-picker__chip-list" }, this.internalValue.map((file, index) => (h("sd-chip", { value: file.name, onSdRemove: () => this.handleChipRemove(index) })))));
+    }
     checkOverflow() {
         if (!this.fileNamesRef)
             return;
@@ -182,9 +210,9 @@ export class SdFilePicker {
             return (h("div", { class: {
                     'sd-file-picker--inline': true,
                     'sd-file-picker--inline-disabled': this.disabled,
-                }, style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content));
+                }, style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content, this.renderChipList()));
         }
-        return (h("sd-field", { name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, content));
+        return (h("div", { class: "sd-file-picker__wrapper", style: cssVars }, h("sd-field", { name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content), this.renderChipList()));
     }
     static get is() { return "sd-file-picker"; }
     static get originalStyleUrls() {

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

@@ -153,7 +153,7 @@ export class SdFloatingPopover {
         }
     }
     render() {
-        return h("slot", { key: 'df97046860db0225724f9768428063a3390c5f6e' });
+        return h("slot", { key: 'b1514fc54df3e304cfb53b824df96431fa815a6e' });
     }
     static get is() { return "sd-floating-portal"; }
     static get originalStyleUrls() {

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

@@ -112,12 +112,12 @@ export class SdInput {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (h("sd-field", { key: '184bd0b614071b1c26d0ef3588db8eea1ac519cb', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: '599d757b62bd61be0ba5c2dde2e1030b4d6f2973', class: "sd-input__content" }, h("slot", { key: '8b71b1449225e51cbab4204e34c077d83101e09e', name: "prefix" }), h("input", { key: 'ed48cf8544adc9e3475229b03129ace0af0e6d4e', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: 'f084df7c3174756111c6eeb824202e26273d369a', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: '62f87c780b971ef43ec9bd15ae47d1f773ec18ca', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: '44bf19bfbe047e00eb02530a4f9c9eac37d9f0fb', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: '2f610f980107fc552554b9415d878a7b8464e460', class: "sd-input__content" }, h("slot", { key: 'da4fa13a9f4c8e5cabb238743b74dbc216cf3d27', name: "prefix" }), h("input", { key: 'dd4fc95ef5136348e764552fb8847a7fedf6fd42', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: 'ab2403fafd7eecf37bc03b0147025b06154230a7', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: '7b6ca184d3c08fc160556abf135939d1e8064b98', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
                 if (this.disabled || this.readonly)
                     return;
                 this.internalValue = '';
                 await this.formField?.sdValidate();
-            } })), this.type === 'password' && (h("sd-ghost-button", { key: '83f511acdc0db74f6d7745e4a47c731f9bcf9bb5', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
+            } })), this.type === 'password' && (h("sd-ghost-button", { key: '52b5a72f6140b441ea971330594749208e302597', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
                 if (this.disabled || this.readonly)
                     return;
                 this.passwordVisible = !this.passwordVisible;