@sellmate/design-system 1.19.0 → 1.20.1

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

@@ -7,6 +7,7 @@ const sdModalContainerCss = () => `sd-modal-container{display:block}sd-modal-con
 
 let modalIdCounter = 0;
 const ANIMATION_DURATION = 350;
+const FOCUSABLE_SELECTOR = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
 const SdModalContainer = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -76,6 +77,7 @@ const SdModalContainer = class {
                         return;
                     this.entries = this.entries.map(e => (e.id === id ? { ...e, backdropVisible: true } : e));
                     modalEl.classList.add('sd-modal-container__modal--visible');
+                    this.focusInitialElement(modalEl);
                 });
             });
         }
@@ -105,7 +107,14 @@ const SdModalContainer = class {
         this.applyProps(entry.modalEl, props);
     }
     mountEntry(entry) {
-        this.entries = [...(this.entries ?? []), entry];
+        const activeElement = typeof document !== 'undefined' ? document.activeElement : null;
+        this.entries = [
+            ...(this.entries ?? []),
+            {
+                ...entry,
+                previousActiveElement: activeElement,
+            },
+        ];
         modalStack.registerModal({
             id: entry.id,
             persistent: entry.persistent,
@@ -163,6 +172,7 @@ const SdModalContainer = class {
             clearTimeout(currentEntry.dismissTimerId);
         currentEntry.modalEl.remove();
         modalStack.unregisterModal(id);
+        this.restoreFocus(currentEntry.previousActiveElement);
         currentEntry.modalRef._triggerDismissed();
         this.layerRefs.delete(id);
         this.entries = (this.entries ?? []).filter(e => e.id !== id);
@@ -248,6 +258,44 @@ const SdModalContainer = class {
             return;
         modalStack.requestCloseForModal(id);
     }
+    /**
+     * 모달이 열릴 때 트리거 요소(버튼 등)에 남아 있던 포커스를 모달 내부로
+     * 이동시킨다. 이를 하지 않으면 모달을 연 버튼이 계속 포커스를 가져,
+     * Enter 키를 누를 때마다 트리거가 재실행되어 모달이 중첩으로 쌓인다.
+     */
+    focusInitialElement(modalEl) {
+        const target = this.getInitialFocusTarget(modalEl);
+        target?.focus();
+    }
+    getInitialFocusTarget(modalEl) {
+        const explicit = modalEl.querySelector('[autofocus]');
+        if (explicit)
+            return explicit;
+        // 각 모달 타입의 메인(주요 액션) 버튼에 우선 포커스해 Enter 로 확정 가능하게 한다.
+        // confirm/action/loading 모두 대응한다.
+        const mainButton = modalEl.querySelector([
+            '.sd-confirm-modal__button sd-button:last-of-type button',
+            '.sd-action-modal__footer > sd-button button',
+            '.sd-loading-modal__button sd-button button',
+        ].join(','));
+        if (mainButton)
+            return mainButton;
+        // 그 외(커스텀 모달 등): 헤더의 닫기(X) 버튼을 제외한 첫 포커스 가능 요소.
+        const focusables = Array.from(modalEl.querySelectorAll(FOCUSABLE_SELECTOR));
+        const preferred = focusables.find(el => !el.closest('.sd-action-modal__close, .sd-confirm-modal__close-button'));
+        if (focusables.length > 0)
+            return preferred ?? focusables[0];
+        if (!modalEl.hasAttribute('tabindex'))
+            modalEl.setAttribute('tabindex', '-1');
+        return modalEl;
+    }
+    restoreFocus(previousActiveElement) {
+        if (previousActiveElement &&
+            typeof previousActiveElement.focus === 'function' &&
+            previousActiveElement.isConnected) {
+            previousActiveElement.focus();
+        }
+    }
     shakeModal(modalEl) {
         const cls = 'sd-modal-container__modal--shake';
         modalEl.classList.remove(cls);

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: 'c1925f0f312cf5c18f08f158efb599e5b6f0d503', class: {
+        return (index.h("div", { key: '8a2219bbc3a17951ed66501e7246f230f0495e74', class: {
                 'sd-pagination': true,
                 'sd-pagination--simple': this.simple,
-            }, style: cssVars }, index.h("div", { key: '1f22be76697820bf455cea5476efa84a09d03c44', 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: '7e9ddb98aff7506fc3b6053d84c1be211e3d1ff7', 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: 'b85b00b637152d5071db0652b6682541fbfd6ab5', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n))))), index.h("div", { key: '937554ea8d3ae71da85e2c1f49d82c99658141f0', 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: '1f9dba3a06233de0457c6fe7d2df39e0e406fb30', slot: `${this.tableId}-body` }, index.h("tbody", { key: '758d795512ff546ec23863a1b9a0940f5d0f445a', class: { tbody: true } }, [
+        return (index.h(index.Host, { key: 'ae49b4a7e18afd3d44d07e7da6c3663a6a043796', slot: `${this.tableId}-body` }, index.h("tbody", { key: '7275cf9214f6917c5437b8a72a06cde3ca48dc8c', 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: 'cd9755c4f082478b1e75a6efcf9b4e7a9a9767b4' }),
+            index.h("slot", { key: '6455be878c24df5371e094fbfe9687ddb992e0e6' }),
             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: '1e352d3996dc6cd60acd20c22c8c426edabaa9ea', slot: `${this.tableId}-head`, style: headStyle }, index.h("thead", { key: 'd76dbdd5b03096197fe09d69c198ab3a5892106c', class: {
+        return (index.h(index.Host, { key: 'c25f6f9704c079d4cb93da7e65c8c15b6dedcb67', slot: `${this.tableId}-head`, style: headStyle }, index.h("thead", { key: 'd91019378caafa2ec32dfa838eaa4d1fe815fb0d', class: {
                 'thead': true,
                 'thead--sticky': this._stickyHeader,
-            } }, index.h("tr", { key: 'fb0c1f8ff93ddb8682b07e9b4f55eaf56b1be41a', class: "tr" }, this._selectable && (index.h("th", { key: 'a53b9771dbec3ef7f3888bf9fc9393c683356c50', class: {
+            } }, index.h("tr", { key: '84e581f5c564693d356f56525f57d6b1da211442', class: "tr" }, this._selectable && (index.h("th", { key: 'fb92e978229c32d560f46af4e90e0980c9c0a213', 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: '8dc233b34b68a5daca91a60364ec8faffeb4b21d', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), index.h("div", { key: 'bfc496c2468f3f81c1db4ffe70584a9229bd3512', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (index.h("th", { key: col.name, class: {
+            }, style: { '--sticky-left-offset': '0px' } }, index.h("sd-checkbox", { key: '157f59b56a4ef2a8529318c8beaf6f59b91e12f0', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), index.h("div", { key: 'b65e099ebe4940b26cc251961e66a375400f2379', 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-popup.cjs.entry.js

@@ -105,7 +105,7 @@ const SdPopup = class {
             ...DEFAULT_SUBMIT_BUTTON_PROPS,
             ...this.submitButtonProps,
         };
-        return (index.h("div", { key: 'a978706454e3964818cc96b3a583880b952c2533', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, index.h("header", { key: '1164fc29d4040d51b74ebc45fedc4fd19038e900', class: "sd-popup__header" }, index.h("h2", { key: '6ac1ea61e52f952f3bea4c4149222b4ff43b61db', class: "sd-popup__title" }, this.popupTitle)), index.h("div", { key: 'fe8cebfc5ea513ae07e3a2987a8c7d9b36ed26e9', class: "sd-popup__body" }, index.h("slot", { key: 'f7ce06ae60cc8af6dbae2b24db4fd6b00e13d365' })), this.useFooter && (index.h("footer", { key: '84251ae1e48522fcf47d0081c9c0689e5fb236a6', class: "sd-popup__footer" }, index.h("div", { key: 'c7d4a8546bd185c812a98569cc3b2a818cbb2963', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, index.h("slot", { key: '474e09481472b96ff4eacc66502aa06987b463b8', name: "footer-left" })), index.h("sd-button", { key: '2b23204ffad997f022dd06b772433ceb69950d04', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
+        return (index.h("div", { key: 'fd14b75d27d3006978ceae9287486d9716bbbf5a', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, index.h("header", { key: 'ac0222dc9512b99cd1d1b4684b9775cd462f39fa', class: "sd-popup__header" }, index.h("h2", { key: 'a11bea9fac5828161090d09d06d6e1c54c390392', class: "sd-popup__title" }, this.popupTitle)), index.h("div", { key: 'ced8961a853cdf014d602c235cfc839a648fb19e', class: "sd-popup__body" }, index.h("slot", { key: '142807fd74e8b32a31ffb7ed8f3dfdcb07a6a1ba' })), this.useFooter && (index.h("footer", { key: '35a6b42e82ec13890b4fa56bda5b9781adeff229', class: "sd-popup__footer" }, index.h("div", { key: '44b2471e0f302bd001fdf1e1d72485dff4af094f', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, index.h("slot", { key: 'd1c8e29b60eb7ce86639e336c99a48a67437103a', name: "footer-left" })), index.h("sd-button", { key: '67b0a8530cae73e344cdae2ac0cb48fa3bdf4827', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
     }
 };
 SdPopup.style = sdPopupCss();

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

@@ -81,7 +81,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: 'c964b0cf5b064c74a7e063be21350bca8124d77d', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
+        index.h("div", { key: '4322a04d65e4b2e1d82d0a6b09fdf6a57cce79ca', 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,
@@ -91,7 +91,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: '981e055f47aa512d18d61ae938b41942197f3088', 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 })), sdSelect_config.isHtmlLabel(this.option.label) ? (index.h("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml.sanitizeInlineHtml(this.option.label)) })) : (index.h("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (index.h("span", { key: 'ac34372d921afcb3eba0a51bed3dd70b4e8f1d0f', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (index.h("sd-checkbox", { key: '47ae4bbe3c2fd960dcee0f1157ae8003dc45f205', 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 })), sdSelect_config.isHtmlLabel(this.option.label) ? (index.h("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml.sanitizeInlineHtml(this.option.label)) })) : (index.h("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (index.h("span", { key: 'c89ba1e3ef52a1809d1252aaee5a18c40ff7cd61', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
 };
 SdSelectListItem.style = sdSelectListItemCss();
@@ -144,15 +144,15 @@ const SdSelectListItemSearch = class {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (index.h("div", { key: '6250cee5611a36f6c5fb317d7d24abeae1ed142f', class: {
+        return (index.h("div", { key: '94215143f5e47887943c726147739cdb1a9fcbf7', class: {
                 'sd-select-list-item-search': true,
                 'sd-select-list-item-search--scrolled': this.isScrolled,
-            } }, index.h("div", { key: 'fa48adb1406c8922b61083a19cc270f02ddab100', class: "sd-select-list-item-search__inner" }, index.h("sd-icon", { key: '868519f09dc11fc4e9bde7a1148ce5ce666dd851', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), index.h("input", { key: 'ff946fa2f360cd21eb785d13cb91e23f18abe05c', ref: el => {
+            } }, index.h("div", { key: '0ff422b93d0e15f2425ef760706ae0e6e2cb79f6', class: "sd-select-list-item-search__inner" }, index.h("sd-icon", { key: 'cc3468339c8b76103b67182309fa3aa2baf24380', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), index.h("input", { key: 'acc468ede845d0f5890c7908311443ea2aa156cf', 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: 'e70e4c0af6e11f89d2893ae5bb28887a0ed8a5ee', 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: 'b1f1539aea4eb76458794dcb041e53c7af7b91e2', 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: '57b4af6446a565b6e1e95153e8553b1c3c363a33', 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: 'a137986e0c801a6cf95e279edeb6a9b21cf00170', name: "close", size: 12, color: "#888888" })))));
     }
 };
 SdSelectListItemSearch.style = sdSelectListItemSearchCss();

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

@@ -267,15 +267,15 @@ const SdSelect = class {
                 this.closeDropdown();
             },
         };
-        return (index.h("sd-field", { key: 'fced3680a535c60d5750908acf1226426e12182b', 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: 'f95dc4008dd1f252f8cb41637aa817bdd4d72ba0', 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: '38d53e92c022affd40bfc7951bbcdf7e02071446', class: "sd-select", ref: el => {
+            } }, index.h("div", { key: 'f12b88dc846a01fc2076242623ac1376ebc0105c', class: "sd-select", ref: el => {
                 this.triggerRef = el;
-            } }, index.h("sd-select-trigger", { key: '9cd9bdb89db37204f9a5c312d26277da772b1209', ref: el => {
+            } }, index.h("sd-select-trigger", { key: '8cef3403ca0a0430c3ce9f8255c98f0e28142d80', 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: '8666dc885f3dcbae13011fd312eb72b7e6c906d9', ...portalProps }, index.h("sd-select-listbox", { key: '04e6dba3d2837cbef68ded80bd2f89c5bbe9dc01', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.dropdownWidth || 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: '417194938ff7aac0b22abbba621342dbe767b146', ...portalProps }, index.h("sd-select-listbox", { key: '0c311407fdc72f37fa7dddf48fdfbaab668a18f4', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.dropdownWidth || this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
     static get watchers() { return {
         "isOpen": [{
@@ -642,9 +642,9 @@ const SdSelectListbox = class {
             '--listbox-max-height': this.maxHeight ?? '260px',
             '--listbox-radius': `${sdSelect_config.LIST_BOX_LAYOUT.radius}px`,
         };
-        return (index.h("div", { key: 'fe30af2954ea5669f2071698e6ef9e2b26244d9b', class: "sd-select-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-list-item-search", { key: 'aa7ce87d8c0c7163921445325121562603edd960', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: 'e8b5b3f73653ddc5096101f7109d427de1efa93a', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (index.h("div", { key: '77f3df8e7105f08340cf46ee0ce146d48b927228', class: "sd-select-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-list-item-search", { key: 'bd79903b4799e6a074895e0ea2b0987a4775a8e0', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: '08c5e0a70837025d62b08d85b0f5044b826dc133', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
-            } }, this.showSelectAll && (index.h("sd-select-list-item", { key: '7fbde730eca0b8234475b714ea38a4393425410e', 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: '918c481cc05f4839d6a133e68a90c68ddfac5fba', 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": [{
@@ -704,7 +704,7 @@ const SdSelectTrigger = class {
                 ? sdSelect_config.SELECT_COLORS.icon.disabled
                 : sdSelect_config.SELECT_COLORS.icon.default,
         };
-        return (index.h("div", { key: '0a929b8c0d68e25a64c352b5ea93b2e9c5f52611', ref: el => {
+        return (index.h("div", { key: '361344e040569fa6f7c2b5d16762d9b2120ca50e', 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,
@@ -715,7 +715,7 @@ const SdSelectTrigger = class {
                     e.preventDefault();
                     this.handleClick();
                 }
-            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("div", { key: 'd8c91e392604c462aa9228147eb18c0b2ac13851', class: "sd-select-trigger__content" }, hasValue && sdSelect_config.isHtmlLabel(this.displayText) ? (index.h("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml.sanitizeInlineHtml(this.displayText)) })) : (index.h("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), index.h("sd-icon", { key: '1afdcb944b30b675d4d2b31d6aeaa2ce41045d36', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("div", { key: '3ccbf7c188ca90dc8ba94f10ef2fa3f7cea70076', class: "sd-select-trigger__content" }, hasValue && sdSelect_config.isHtmlLabel(this.displayText) ? (index.h("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml.sanitizeInlineHtml(this.displayText)) })) : (index.h("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), index.h("sd-icon", { key: '623f1f83d7b8c89e64f9ec8d8e3261bd771c45b4', 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

@@ -105,7 +105,7 @@ const SdSwitch = class {
             '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
             '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
         };
-        return (index.h("label", { key: '8038810bfcf78ddea9ef73706689e19fdfe0b57f', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, index.h("input", { key: 'ee4c60f379f20f56af01bafb0533e6b64bb3054a', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), index.h("div", { key: '8ce56df6d631b742331466ded340298a888576c7', class: "sd-switch__track" }, index.h("div", { key: 'e02c48a7af9e005524b5d3ba8689e99dd42555f2', class: "sd-switch__knob" })), this.label && index.h("span", { key: 'c1533c489ef8d0a2b8374d2eaeeb0ac743a9c507', class: "sd-switch__label" }, this.label)));
+        return (index.h("label", { key: '4746eeb0cd3b977be3bc537c30cbf58c51d3a8fc', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, index.h("input", { key: 'f022803741f2ac787a8993a2d987eedc5d6c8f24', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), index.h("div", { key: 'd8684dcb2b446885f849e6f00d773ef340e37c73', class: "sd-switch__track" }, index.h("div", { key: '572bd3dd7f65c9a9fd36c27b4444b0e653ae2b23', class: "sd-switch__knob" })), this.label && index.h("span", { key: '5228763c541a4bc0a71bfb457a4432dca01d452f', class: "sd-switch__label" }, this.label)));
     }
 };
 SdSwitch.style = sdSwitchCss();

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

@@ -19,7 +19,7 @@ let nanoid = (size = 21) => {
   return id
 };
 
-const sdTableCss = () => `sd-table,:host{display:block;width:100%;height:var(--table-host-height);max-width:100%;min-width:0}sd-table *,:host *{box-sizing:border-box}.sd-table__container{height:100%;width:var(--table-width, 100%);max-width:100%;min-width:0;color:#222222;display:flex;flex-direction:column}.sd-table__wrapper{width:100%;min-width:0;height:calc(100% - var(--pagination-height, 0px));border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);border-radius:var(--table-radius, 8px);overflow:hidden}.sd-table__wrapper--radius-usetop{border-radius:0 0 var(--table-radius, 8px) var(--table-radius, 8px)}.sd-table__wrapper--radius-full{border-radius:0}.sd-table__scroll-container{width:100%;height:100%;display:flex;flex-direction:column;position:relative;font-family:var(--table-body-font-family, inherit);font-weight:var(--table-body-font-weight, 400);font-size:var(--table-body-font-size, 12px);line-height:var(--table-body-line-height, 20px);text-decoration:var(--table-body-text-decoration, none);overflow:auto;background:#FFFFFF}.sd-table__scroll-container--loading{overflow:hidden !important;pointer-events:none}.sd-table__scroll-container--no-data{overflow:hidden;pointer-events:none}.sd-table__no-data{position:absolute;top:36px;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:var(--table-body-font-size, 12px);color:#888888;pointer-events:none;z-index:200;background:rgba(255, 255, 255, 0.6)}.sd-table__no-data-header-overlay{position:absolute;top:0;left:0;right:0;height:36px;background:rgba(255, 255, 255, 0.6);z-index:210;pointer-events:none}.sd-table__no-data-content{pointer-events:auto;min-height:60px;width:100%;display:flex;align-items:center;justify-content:center}.sd-table__loading{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none}.sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table--selectable sd-thead,.sd-table--selectable sd-tbody{--selectable:true}.sd-table--sticky-header sd-thead thead{position:sticky;top:0;z-index:120}.sd-table--sticky-column sd-thead,.sd-table--sticky-column sd-tbody{--sticky-column:true}.sd-table--scrolled-left sd-thead,.sd-table--scrolled-left sd-tbody{--scrolled-left:true}.sd-table--scrolled-right sd-thead,.sd-table--scrolled-right sd-tbody{--scrolled-right:true}.sd-table--resizable sd-thead{--resizable:true}.sd-table--no-data sd-thead{opacity:0.4}.sd-table__pagination{position:relative;background:#F9F9F9;height:48px;display:flex;align-items:center;justify-content:center;border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);margin-top:-1px;border-radius:var(--table-radius, 8px)}.sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}`;
+const sdTableCss = () => `sd-table,:host{display:block;width:100%;height:var(--table-host-height);max-width:100%;min-width:0}sd-table *,:host *{box-sizing:border-box}.sd-table__container{height:100%;width:var(--table-width, 100%);max-width:100%;min-width:0;color:#222222;display:flex;flex-direction:column}.sd-table__wrapper{width:100%;min-width:0;height:calc(100% - var(--pagination-height, 0px));border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);border-radius:var(--table-radius, 8px);overflow:hidden}.sd-table__wrapper--radius-useTop{border-radius:0 0 var(--table-radius, 8px) var(--table-radius, 8px)}.sd-table__wrapper--radius-full{border-radius:0}.sd-table__scroll-container{width:100%;height:100%;display:flex;flex-direction:column;position:relative;font-family:var(--table-body-font-family, inherit);font-weight:var(--table-body-font-weight, 400);font-size:var(--table-body-font-size, 12px);line-height:var(--table-body-line-height, 20px);text-decoration:var(--table-body-text-decoration, none);overflow:auto;background:#FFFFFF}.sd-table__scroll-container--loading{overflow:hidden !important;pointer-events:none}.sd-table__scroll-container--no-data{overflow:hidden;pointer-events:none}.sd-table__no-data{position:absolute;top:36px;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:var(--table-body-font-size, 12px);color:#888888;pointer-events:none;z-index:200;background:rgba(255, 255, 255, 0.6)}.sd-table__no-data-header-overlay{position:absolute;top:0;left:0;right:0;height:36px;background:rgba(255, 255, 255, 0.6);z-index:210;pointer-events:none}.sd-table__no-data-content{pointer-events:auto;min-height:60px;width:100%;display:flex;align-items:center;justify-content:center}.sd-table__loading{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none}.sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table--selectable sd-thead,.sd-table--selectable sd-tbody{--selectable:true}.sd-table--sticky-header sd-thead thead{position:sticky;top:0;z-index:120}.sd-table--sticky-column sd-thead,.sd-table--sticky-column sd-tbody{--sticky-column:true}.sd-table--scrolled-left sd-thead,.sd-table--scrolled-left sd-tbody{--scrolled-left:true}.sd-table--scrolled-right sd-thead,.sd-table--scrolled-right sd-tbody{--scrolled-right:true}.sd-table--resizable sd-thead{--resizable:true}.sd-table--no-data sd-thead{opacity:0.4}.sd-table__pagination{position:relative;background:#F9F9F9;height:48px;display:flex;align-items:center;justify-content:center;border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);margin-top:-1px;border-radius:var(--table-radius, 8px)}.sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}`;
 
 const SdTable = class {
     constructor(hostRef) {
@@ -845,25 +845,25 @@ const SdTable = class {
             '--table-selectable-width': `${sdTable_config.TABLE_SELECTABLE_COLUMN_WIDTH}px`,
             '--table-host-height': hostHeight,
         };
-        return (index.h(index.Host, { key: '87170da602bd45011a4f03e0bb7c1ce35ac4b771', style: hostStyle }, index.h("div", { key: '899ad5a375b30565141fc50063620975a1c87b95', class: "sd-table__container", style: {
+        return (index.h(index.Host, { key: 'f5a5a2d4012f069619d110dcd9c2d5e6bd446407', style: hostStyle }, index.h("div", { key: '96ca8b8e4291ac077a6e1b6d3eed897777817b25', class: "sd-table__container", style: {
                 '--table-width': this.width,
                 '--pagination-height': `${paginationHeight}px`,
-            } }, index.h("div", { key: '73db070c9018b814e9c55f605c22a13f81fefc5d', class: {
+            } }, index.h("div", { key: 'd8225691e78e5fe5341f03def8ad1d6dfb057056', class: {
                 'sd-table__wrapper': true,
-                'sd-table__wrapper--radius-usetop': this.radius === 'usetop',
+                'sd-table__wrapper--radius-useTop': this.radius === 'useTop',
                 'sd-table__wrapper--radius-full': this.radius === 'full',
-            } }, index.h("div", { key: 'f52d585b54a29a6e44c3d9f5ec3a8f20f0e62e8c', class: {
+            } }, index.h("div", { key: 'fb8403bd7587a4d1fcbb77b1fe226ae0aa27be7a', 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: 'cd9ee8de1d3a4f7abe553372342da1d3ee38b6fe', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, index.h("sd-circle-progress", { key: 'b239353973c8e6959ff9b5c3308696b4c743dbf0', indeterminate: true }))), isNoData && (index.h(index.h.Fragment, null, index.h("div", { key: '7f219801def31f4f19f6042e85e02d9e2b366c90', class: "sd-table__no-data-header-overlay" }), index.h("div", { key: '2dcb2227ea402c4fcc176e3e493b88d37843f8ed', class: "sd-table__no-data" }, index.h("div", { key: '47b8e69f4518200cd87c79d50bfc0d505310aff9', class: "sd-table__no-data-content", ref: el => {
+            } }, this.isLoading && (index.h("div", { key: '4202fa1f03feff066f9779c5eb21c3b0c96f5cf3', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, index.h("sd-circle-progress", { key: '394c52823f5c24f288d51b34daec6f228de119d7', indeterminate: true }))), isNoData && (index.h(index.h.Fragment, null, index.h("div", { key: 'bb1d3d8b592194006bea7cd5ab2efc587f9abc44', class: "sd-table__no-data-header-overlay" }), index.h("div", { key: 'c34df2b4f35c7ea8b5bbe6cf49dc354e11dac344', class: "sd-table__no-data" }, index.h("div", { key: '05006aacc2c242606ba8585ee0bdea50eea1b688', class: "sd-table__no-data-content", ref: el => {
                 this.noDataContentEl = el;
                 if (el)
                     this.syncNoDataContentObserver();
-            } }, index.h("slot", { key: '3cdbaa3552166b915d0bd30a2e19324679615da4', name: "no-data" }, index.h("span", { key: 'dd14af39eb6658f3a1d876745f80fcbe13529846' }, this.resolvedNoDataLabel)))))), index.h("table", { key: 'f11b8e0e7bb53f3ceda805ecc2b0911ea83cb79f', 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: 'ad707be9bc8062da5a6236c9833176adb7b95851', name: "no-data" }, index.h("span", { key: '3aa57b547e05bd455829cff770c435af2ac78383' }, this.resolvedNoDataLabel)))))), index.h("table", { key: '6b2958f14d9708a49e3cbaff7cdb3653f7267e1c', 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: 'ac990f82d327f1dbfd5fc8e395b348b228c7b724', class: "sd-table__pagination" }, index.h("sd-pagination", { key: '724c0b1f72efdaae442dde22391e0035c9ddf8f9', 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: 'b5fcde2f53f9d5b497e5da3b4099f9d56f67c245', value: this.useInternalPagination
+            !this.useVirtualScroll && (index.h("div", { key: '950e80fdb6c06af2b4423e3b0c75ded7cfe4a298', class: "sd-table__pagination" }, index.h("sd-pagination", { key: '3257c7b631c262c9ddadbd23c83f2eb43f9bf7f5', 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: '7bb00889139aa7dbee4723efac511753afcb15e9', 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

@@ -201,7 +201,7 @@ const SdTabs = class {
         };
     }
     render() {
-        return (index.h("div", { key: 'fd65e555621e8b9f9c8e93578f41f1c24a8cbeda', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index$1) => {
+        return (index.h("div", { key: 'c2a2bd86833267ca4b47e7c6420e04a504af05f5', 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: '02464050ab6179a4d19bc5885aff8c2690cc3dd6', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: 'a4cde26644aea2e1a99690c407b7020b20bd3981' })));
+        return (index.h(index.Host, { key: 'ed5419d9190514381bb8fe43a8588c7d88983527', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: '308d16388614375c94bd4c5efc8e173b56b4af2a' })));
     }
     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: '44b4f34b231186fd00ef9c1a65bd68a83fced6da', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (index.h("div", { key: 'f5b2cb8f4d1286bbd8f7cd648916294397ed4742', 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: '656bf6231262cc7d974adbe5f0ce0053d03aca84', style: {
+        return (index.h("div", { key: '45a278a76dde70b17794763fa35365ac8d634194', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
                 '--sd-toast-icon': iconColor,
                 '--sd-toast-link': linkColor,
-            } }, index.h("div", { key: '1e15e50c926ce65cea86db069dd1e79a642da01c', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '692277c23c4530d9fa0c5e26ea9d3b9759024dea', class: "sd-toast__icon" }, index.h("sd-icon", { key: '0a15993313f3a9d1f27d6ae727c2c248c3390701', name: this.icon, size: iconSize, color: iconColor }))), index.h("div", { key: '9c1af0c9cedbb772b9b59ae80a0ff861066aa0de', class: "sd-toast__content" }, index.h("span", { key: '2aacd89fe1cf31f271da027459a6cfaece3dbdbf', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '094a68e843d9ab50cea46a506d6ccdc1ebf375d7', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: '7dabe182870a01cf285ee7441dfe39b07e943751', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (index.h("sd-ghost-button", { key: '2a893c6ace888d8f21ce16c9dbf2a35b23bc9372', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, index.h("div", { key: 'eb00957c65514153867322942ed111d24622c75b', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: 'd30f442041ea963e86f8558f3ed07ceb28049ae9', class: "sd-toast__icon" }, index.h("sd-icon", { key: '04e57935a4fe4344f3eb1338cfc436bef449805e', name: this.icon, size: iconSize, color: iconColor }))), index.h("div", { key: '02270cd25d409d44bbd1d7932b074494d2cbeca1', class: "sd-toast__content" }, index.h("span", { key: '5f180c70d130fc04b16901c69a399f6effa328b9', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '4fd2adab87dbdaae94c21483f66256ce773ae965', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: '2c60553150114d6d5b99a2e86b35b4a85c4a34a4', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (index.h("sd-ghost-button", { key: 'c3e01391b713286b65a05352dd39ab98790564f8', 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: '5657698c379c71e770b18006b5f5c69c122a06a7', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: '8f72307d4efd029df200243cf670377aea2cff02', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (index.h("label", { key: '9ef981165b998f43ec23f3bb1cf0ef385962d7fb', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: '6b6d2a89f43036f624c7bc291b2c5aa7a93c8f0a', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/collection/components/assets/Close.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
 export const Close = (props) => {
     const { size = 24, ...rest } = props;
-    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M20.0693 2.86969C20.3621 2.57688 20.837 2.57705 21.1299 2.86969C21.4228 3.16258 21.4228 3.63734 21.1299 3.93024L13.0596 11.9996L21.1299 20.0699C21.4228 20.3628 21.4228 20.8375 21.1299 21.1304C20.837 21.4232 20.3622 21.4233 20.0693 21.1304L12 13.0601L3.93067 21.1304C3.63785 21.4232 3.16303 21.4231 2.87012 21.1304C2.57723 20.8375 2.57723 20.3628 2.87012 20.0699L10.9395 11.9996L2.87012 3.93024C2.57728 3.63734 2.57725 3.16256 2.87012 2.86969C3.16303 2.57716 3.63789 2.57696 3.93067 2.86969L12 10.939L20.0693 2.86969Z", fill: "currentColor" })));
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M18.8281 4.11135C19.121 3.81849 19.5958 3.81854 19.8887 4.11135C20.1816 4.40424 20.1816 4.879 19.8887 5.1719L13.0596 12L19.8887 18.8291C20.1815 19.122 20.1815 19.5968 19.8887 19.8897C19.5958 20.1822 19.1209 20.1824 18.8281 19.8897L12 13.0606L5.17188 19.8897C4.87911 20.1823 4.40422 20.1821 4.11133 19.8897C3.81844 19.5968 3.81844 19.121 4.11133 18.8281L10.9385 12L4.11133 5.1719C3.81844 4.879 3.81844 4.40424 4.11133 4.11135C4.40424 3.8186 4.87903 3.81851 5.17188 4.11135L11.999 10.9395L18.8281 4.11135Z", fill: "currentColor" })));
 };

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

@@ -4,7 +4,7 @@ export class SdBadge {
     color = 'blue';
     render() {
         const resolvedColor = BADGE_COLOR_MAP[this.color] ?? BADGE_COLOR_MAP.blue;
-        return (h("div", { key: '0f337c449618a6182f00d9557305f42983610a98', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '68a559c01a6b65dab5bee08236d36bea565633a9', class: "sd-badge__dot" })));
+        return (h("div", { key: '161a6ab81185300e392e2a8cd54146185a8a6216', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '30f9ed293d34e78caf0d832da0ea5f6ce2caf1c3', class: "sd-badge__dot" })));
     }
     static get is() { return "sd-badge"; }
     static get originalStyleUrls() {

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

@@ -102,7 +102,7 @@ export class SdBarcodeInput {
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
             '--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
         };
-        return (h("sd-field", { key: '80a633774754f20f136ae6bd7319a7be69719155', 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, 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: 'a48fabe8c70f13337386f136e63c495aadbb4bf9', class: "sd-barcode-input__content" }, h("slot", { key: '5b192ccacd1cdb7b2736c422d56ab54cd2c90e0e', name: "prefix" }), h("input", { key: '01677b39141de0213c12160632a6b56da3671cbd', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '55a3a9e0cfa1ea615f3ca502c3e5bdf85d9f1a3d', name: "suffix" }), this.clearable && this.internalValue && (h("sd-ghost-button", { key: '5d410c58f7ec630051a39405e966663bb7aaa64b', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: '453566ff018ea2131361fcc18d6094491d3b04dd', 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, 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: '153174624e5ec10908df6f40711a7a37039ab67b', class: "sd-barcode-input__content" }, h("slot", { key: 'ce9326a5b3157ad511171f48ee95dd2ce6a6b5dd', name: "prefix" }), h("input", { key: '069c037e8c27575f70ebfed9c2b2e61817f202f5', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '7ba3162a850e8d3d787ee44aaa807bb5be54cddc', name: "suffix" }), this.clearable && this.internalValue && (h("sd-ghost-button", { key: 'f12e8083d050d96b34cad2d332d5aeb08f4f3913', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
                 if (this.disabled)
                     return;
                 this.internalValue = '';

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

@@ -173,7 +173,7 @@ export class SdCalendar {
         const eventMap = this.eventMap;
         const legend = this.legendItems;
         const hasEvents = (this.events?.length ?? 0) > 0;
-        return (h("div", { key: 'e939d5fae94ff8f44bd2167abd78ac331359f35d', class: { 'sd-calendar': true, 'sd-calendar--elevated': this.elevated }, style: cssVars }, h("div", { key: '2dad0f6cfd58d1a4ce430142df0af56ed0a5cfa3', class: "sd-calendar__header" }, h("div", { key: '5d7424dc210f3ff9fa28ee5c24e958130449b798', class: "sd-calendar__nav-group" }, h("sd-ghost-button", { key: 'd15c0d1691492d0bbdb099893701c2538c183513', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), h("span", { key: 'a2e936f9a4626bdd4d48bcd7b513e33f76d4affb', class: "sd-calendar__label" }, this.currentYear), h("sd-ghost-button", { key: 'c4c50b1a3440ef2eeb1a0ed95c61d3f5b55ba055', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), h("span", { key: 'ec677bd90799db7032f188b521c32f06688c8659', class: "sd-calendar__divider", "aria-hidden": "true" }), h("div", { key: 'd8ab3d1a8efa607ee6f8cd4c3af5ba2d2af31639', class: "sd-calendar__nav-group sd-calendar__nav-group-month" }, h("sd-ghost-button", { key: '1a76dcd9d9655bdac72d78a8bf6c40e546c9c4a1', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), h("span", { key: '08b4274631b31aa028f14f8d3ecd63d135c125d7', class: "sd-calendar__label sd-calendar__label-month" }, this.currentMonth, "\uC6D4"), h("sd-ghost-button", { key: 'ec404faf07c03f7a1949d2379a1313e99b712883', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), h("div", { key: '98775d3b2d885492347dec3e13258b33936b92bc', class: "sd-calendar__week" }, WEEK_LABELS.map(label => (h("span", { key: label, class: "sd-calendar__week-cell" }, label)))), h("div", { key: '87a4739a0ddf26302d22bcb39b545cffab44dd09', class: "sd-calendar__grid" }, this.cells.map(cell => {
+        return (h("div", { key: 'c8456b5c2b6617cef1aacd140d600458e9b05f32', class: { 'sd-calendar': true, 'sd-calendar--elevated': this.elevated }, style: cssVars }, h("div", { key: '9b73abcc81e28e3f791dcd3a5d1b1284b76c71b3', class: "sd-calendar__header" }, h("div", { key: '89e582eb5c4ad7ee7ea3e4e7d8139a25c32cd09e', class: "sd-calendar__nav-group" }, h("sd-ghost-button", { key: '75b3bb651ed6c840f85b50869d3d074fbdda10d7', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), h("span", { key: '2be9c1dc4e9ab339890a8f066fc416bace8a3d6a', class: "sd-calendar__label" }, this.currentYear), h("sd-ghost-button", { key: 'fe38866bac1c10dc66e0392eb2d9efe7f12ba225', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), h("span", { key: '7552892c7247f6a10aa7cd53dede0e2464e45647', class: "sd-calendar__divider", "aria-hidden": "true" }), h("div", { key: '09a142cb6e71f95c3f9c60be100441b6a5543b00', class: "sd-calendar__nav-group sd-calendar__nav-group-month" }, h("sd-ghost-button", { key: '12f116ed4b1f5dc57a682d1af5ef244f797cb347', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), h("span", { key: '5adfc5a6469fde17d1bea030c84be29fea151601', class: "sd-calendar__label sd-calendar__label-month" }, this.currentMonth, "\uC6D4"), h("sd-ghost-button", { key: '1f1b44b1cd201e0ec45b696dbb70d36f3e81f21c', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), h("div", { key: 'b866d161ea35935cc5ead385c0b30015e9d5838d', class: "sd-calendar__week" }, WEEK_LABELS.map(label => (h("span", { key: label, class: "sd-calendar__week-cell" }, label)))), h("div", { key: 'a63bf0d78122c6c2f668497a3c902d30a8e74c3f', class: "sd-calendar__grid" }, this.cells.map(cell => {
             const isSelected = cell.inCurrentMonth && this.value !== '' && this.value === cell.date;
             const isToday = cell.inCurrentMonth && today === cell.date;
             const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);
@@ -186,8 +186,8 @@ export class SdCalendar {
                     'sd-calendar__day--disabled': isDisabled,
                 }, disabled: !cell.inCurrentMonth || isDisabled, tabindex: !cell.inCurrentMonth ? -1 : undefined, "aria-hidden": !cell.inCurrentMonth ? 'true' : undefined, onClick: () => cell.inCurrentMonth && this.handleDayClick(cell) }, h("span", { class: "sd-calendar__day-circle" }, cell.inCurrentMonth ? cell.day : ''), hasEvents && (h("span", { class: "sd-calendar__dot-row", "aria-hidden": "true" }, dayEvents?.map((ev, i) => (h("span", { key: `${ev.color}|${ev.label}|${i}`, class: "sd-calendar__dot", style: { backgroundColor: ev.color } })))))));
         })), legend.length > 0 && [
-            h("span", { key: '9c1c21573694ca6702d19ba451c31cbdb47e727c', class: "sd-calendar__divider-bottom", "aria-hidden": "true" }),
-            h("div", { key: 'dae2d35ea2971f6c7b1b3ec4774934efb2fcd168', class: "sd-calendar__legend" }, legend.map(item => (h("span", { key: `${item.color}|${item.label}`, class: "sd-calendar__legend-item" }, h("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { class: "sd-calendar__legend-label" }, item.label))))),
+            h("span", { key: '79a0c77b04cc46c5278502e7062c13e3113a8ee2', class: "sd-calendar__divider-bottom", "aria-hidden": "true" }),
+            h("div", { key: '7b87c016d96a48efabcbc3b684a6fea78004f790', class: "sd-calendar__legend" }, legend.map(item => (h("span", { key: `${item.color}|${item.label}`, class: "sd-calendar__legend-item" }, h("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { class: "sd-calendar__legend-label" }, item.label))))),
         ]));
     }
     static get is() { return "sd-calendar"; }

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

@@ -49,7 +49,7 @@ export class SdCallout {
     }
     render() {
         const showTitle = this.type === 'danger';
-        return (h("div", { key: '7fc363dc8a8621220cdf966af89a5aa8a55f4941', class: "sd-callout", style: this.calloutStyle, role: "note" }, showTitle && this.renderTitle(), h("div", { key: '69f8d46fc2e9c3f77c992fef98164c19f027b1f1', class: "sd-callout__body" }, this.renderBody())));
+        return (h("div", { key: '545b90999ad57577156a214468102ae5090e6f3e', class: "sd-callout", style: this.calloutStyle, role: "note" }, showTitle && this.renderTitle(), h("div", { key: '14e021beb9b1c9deb63490e17baf9bb72caefe0d', class: "sd-callout__body" }, this.renderBody())));
     }
     static get is() { return "sd-callout"; }
     static get originalStyleUrls() {

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

@@ -3,7 +3,7 @@ export class SdCard {
     bordered = false;
     sdClass = '';
     render() {
-        return (h(Fragment, { key: 'bf7511e8d9fccc98adf963ae20f59710bb0d00f3' }, h("div", { key: '729a6053062c3959ee1e9561f5673c8a75a4dc9d', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: '11ec4fa43f694901a85879ec04e146ace90be435' }))));
+        return (h(Fragment, { key: 'cda3366416a347552ffe66446f9fd1267654fa75' }, h("div", { key: '5b29d955402031dcc82df70df25fe1146787adec', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: 'f2a5c548de34d6bf32de75db76686da91d605e28' }))));
     }
     static get is() { return "sd-card"; }
     static get originalStyleUrls() {

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

@@ -215,7 +215,7 @@ export class SdChip {
             '--sd-chip-font-weight': typography.fontWeight,
             '--sd-chip-line-height': typography.lineHeight,
         };
-        return (h("span", { key: '26f863e035272df44fec64b16ebe6c17230d3452', class: {
+        return (h("span", { key: 'a51c874d8f2ce5abea1dbcf878b4f1ceda0952a3', class: {
                 'sd-chip': true,
                 [`sd-chip--${state}`]: true,
                 'sd-chip--disabled': this.disabled,

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

@@ -392,7 +392,7 @@ export class SdChipInput {
             fontFamily: CHIP_INPUT_SUGGESTIONS.itemFontFamily,
             color: CHIP_INPUT_SUGGESTIONS.emptyColor,
         };
-        return (h("sd-field", { key: '33ae95b159edcb8ee407cf8d311428f419f26e95', name: this.name, label: this.label, labelWidth: this.labelWidth, hint: this.hint, errorMessage: this.errorMessage, rules: [this.duplicateRule, ...(this.rules ?? [])], error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, width: this.width, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: '4f7cd96e4cda06239a7498b8af5f1f3169362028', class: "sd-chip-input", ref: el => (this.chipInputRef = el), onClick: this.handleContainerClick }, (this.internalValues ?? []).map((value, i) => (h("sd-chip", { key: i, value: value, error: this.getChipError(i), disabled: this.getChipDisabled(i), editable: false, onSdRemove: () => this.handleChipRemove(i) }))), !isMaxReached && (h("div", { key: 'dab7b1c520923fdb8cb026141727d8d008b83663', class: {
+        return (h("sd-field", { key: 'ee88b5c82466b6470fcf6bd7c55b6269b81b04be', name: this.name, label: this.label, labelWidth: this.labelWidth, hint: this.hint, errorMessage: this.errorMessage, rules: [this.duplicateRule, ...(this.rules ?? [])], error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, width: this.width, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: 'e040d339e12ce0b038d195a829d4fc1795f12155', class: "sd-chip-input", ref: el => (this.chipInputRef = el), onClick: this.handleContainerClick }, (this.internalValues ?? []).map((value, i) => (h("sd-chip", { key: i, value: value, error: this.getChipError(i), disabled: this.getChipDisabled(i), editable: false, onSdRemove: () => this.handleChipRemove(i) }))), !isMaxReached && (h("div", { key: '37b6e51a5e1b5b5b37651cba797739ac74770d8a', class: {
                 'sd-chip-input__field': true,
                 'sd-chip-input__field--filled': this.inputValue !== '',
                 'sd-chip-input__field--empty': this.inputValue === '' && this.internalValues.length > 0 && !this.focused,
@@ -400,7 +400,7 @@ export class SdChipInput {
                 ? this.inputValue
                 : this.internalValues.length === 0
                     ? this.placeholder
-                    : '' }, h("input", { key: '0aee2d0f30c5af7fccfc2e35e5cee17912712ce9', ref: el => (this.inputEl = el), class: "sd-chip-input__input", placeholder: this.internalValues.length === 0 ? this.placeholder : '', disabled: this.disabled, size: 1, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }))), showResetArea && (h("div", { key: 'b0b508db62d31f6427d5a2def435fec7fc552e92', class: "sd-chip-input__reset" }, this.inputValue === '' && h("span", { key: '30ce147f3bc8070192d95f381fa7f75ad37aab9b', class: "sd-chip-input__divider" }), this.maxCount != null && (h("span", { key: '8c43a2920e55a36ff0c0ab952a52ab3df8d3c98d', class: "sd-chip-input__max-count" }, "\uCD5C\uB300 ", this.maxCount, "\uAC1C")), this.useReset && this.internalValues.length > 0 && (h("sd-text-link", { key: '543316c12760fe16449e2b89a9afb8c43344eab5', icon: "reset", iconColor: CHIP_INPUT_RESET.iconColor, label: "\uC785\uB825 \uCD08\uAE30\uD654", underline: true, disabled: this.disabled, style: { '--sd-text-link-color': CHIP_INPUT_RESET.labelColor }, onSdClick: this.handleResetInput })))), showDropdown && (h("sd-portal", { key: 'c402b8336f7d62213f2b803f80f7a2ffabce2c9d', open: showDropdown, parentRef: this.chipInputRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, h("div", { key: '4ade4acb535b2db7011699a449afd8c17fe5696d', class: "sd-chip-input__suggestions", role: "listbox", style: suggestionBoxStyle }, isDropdownLoading && (h("div", { key: 'e07a447f7c9a9d376680ddb3af6daf58e0d39167', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), dropdownItems.map((item, i) => (h("div", { key: item, class: {
+                    : '' }, h("input", { key: 'f628f9dee70e60435afb8d01ed41830850bebb44', ref: el => (this.inputEl = el), class: "sd-chip-input__input", placeholder: this.internalValues.length === 0 ? this.placeholder : '', disabled: this.disabled, size: 1, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }))), showResetArea && (h("div", { key: 'd154fb5ccd1875ec6beee462a3d93b7e4480f384', class: "sd-chip-input__reset" }, this.inputValue === '' && h("span", { key: 'ae84a0b4c83ca26e3b58b48d32469bd46be29f78', class: "sd-chip-input__divider" }), this.maxCount != null && (h("span", { key: 'e5790a98cbe3e07a395ddf8b5d286ec48efcabb2', class: "sd-chip-input__max-count" }, "\uCD5C\uB300 ", this.maxCount, "\uAC1C")), this.useReset && this.internalValues.length > 0 && (h("sd-text-link", { key: '7ed1d61c9518f0cf2bdf2a6be62effb7bc90b8ab', icon: "reset", iconColor: CHIP_INPUT_RESET.iconColor, label: "\uC785\uB825 \uCD08\uAE30\uD654", underline: true, disabled: this.disabled, style: { '--sd-text-link-color': CHIP_INPUT_RESET.labelColor }, onSdClick: this.handleResetInput })))), showDropdown && (h("sd-portal", { key: '45d65cf1c364e4c3f46770f98a6c7597f6aaeb01', open: showDropdown, parentRef: this.chipInputRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, h("div", { key: '055ea7aeb71f7a4640b3ac7406f435c3f3b1d50c', class: "sd-chip-input__suggestions", role: "listbox", style: suggestionBoxStyle }, isDropdownLoading && (h("div", { key: 'fc56e57fb5c62fa39cb7b13d51fe74baca539647', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), dropdownItems.map((item, i) => (h("div", { key: item, class: {
                 'sd-chip-input__suggestion-item': true,
                 'sd-chip-input__suggestion-item--active': i === this.activeSuggestionIndex,
             }, role: "option", tabIndex: -1, "aria-selected": i === this.activeSuggestionIndex, style: i === this.activeSuggestionIndex

package/dist/collection/components/sd-circle-progress/sd-circle-progress.js

@@ -27,7 +27,7 @@ export class SdCircleProgress {
         }
         const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
         const showPercent = !this.indeterminate;
-        return (h(Host, { key: '35b4dc433f5e2bbd02dc3422b286da179472082f', style: hostStyle }, h("svg", { key: 'de1d3e44eccf421491a1107ba234e1562917945b', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: 'b0a54a2e155222a416a6bdcb75f4fe54d9de8270', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: '6bc314b3fce758d41a3499e9d87b7158b15777a5', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (h("span", { key: '16ec46b178d5f2f2f5ad245703c2f4362b8df261', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: 'c199799d2466c75f91f1bc1f20fdb7e71c64ba0e', class: "sd-circle-progress__label" }, this.label)));
+        return (h(Host, { key: 'b8dc57144fcab41a7dce8f9aff9bec4609290a8e', style: hostStyle }, h("svg", { key: '2f38f745684057e2b568da3cdbb8a940125fa920', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: 'e829f78dddbf5fb08e23b5774fe653c0019eedfd', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: '4643ac0edf25a12660791d87acebbecd8a5c2ead', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (h("span", { key: '1ccaad0864e44d09902201bde466b7867c51646f', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: '0e26d97267552ef75dcc30f94392cbc733fee636', class: "sd-circle-progress__label" }, this.label)));
     }
     static get is() { return "sd-circle-progress"; }
     static get originalStyleUrls() {

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

@@ -73,9 +73,9 @@ export class SdConfirmModal {
         const type = this.resolvedType;
         const iconName = CONFIRM_MODAL_ICON_MAP[type];
         const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
-        return (h("div", { key: '51fb051b436cc511aeac2f578832a267e12ef3c4', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: 'dd9605e312eac8b0602ec558ad5439ea3daa7aa7', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '5027ec2d03731338a9197f7b5b910d2adbf83f0e', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: '8456707355cc779c169b56abc16b0949909b829e', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: 'd11cb38e749f54ce5767ba9b5cca0129df742aca', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: 'de653458605a9591d7c66d644a143d0f33738b28', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showContentBox && (h("div", { key: '0517e400485551ab21f0f5452af764b5ede7a76d', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        return (h("div", { key: '689c6d50f52e1a4c5b8f501fcc1e14f0da42fcfc', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: 'fc3aedaa2b6aa3b95b9c0ce1e766df69af86c82f', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '4560ad7ee0d8929221a47b6c1b00cac04c7b387a', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: '8689d86f85c72a9f36e94f083842fc3354d3d82c', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: '5828e937b3b1d3f34c389e73a3d953388dd30cd0', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '0f64cda9195807dbf637a463ba2bc8acc8c1ff3a', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showContentBox && (h("div", { key: 'a090330cab2dbbc99127e616f3e50420bd44b9e4', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
                 this.customContentRef = el;
-            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (h("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel })), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: 'd542a08caee30ed7eb1d22ed85a51be6e1f6855e', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), h("div", { key: '02d012e899969ee55cba43c11d9caeaaff65a348', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: 'fd50d151e515646e5bef5658a1b05b2e26b21461', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: '0c2092edf0866a8b1f4f432b176d78eedd9655d6', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
+            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (h("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel })), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: 'a665a0ea56685496adf7c306b4a940762a8a2b3a', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), h("div", { key: '0ad69928a260ed78edd7606f89790e6afa6b2d76', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: '1f835e091b4d96cb6c95dbda88d93ce86828da2c', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: '8e3cb23cb7207e402543b009b49d23a50521db24', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
     }
     static get is() { return "sd-confirm-modal"; }
     static get originalStyleUrls() {