@sellmate/design-system 1.0.37 → 1.0.38

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

@@ -0,0 +1,324 @@
+import { h } from "@stencil/core";
+import { NOTICE_BUTTON_PRESET, CLOSE_ICON_SIZE, CLOSE_ICON_COLOR, } from "./sd-notice-modal.config";
+export class SdNoticeModal {
+    el;
+    hasSlottedContent = false;
+    customContentRef;
+    slotObserver;
+    modalTitle = '';
+    titleClass = '';
+    topMessage = [];
+    bottomMessage = [];
+    mainButtonLabel = '확인';
+    subButtonLabel = '';
+    tagPreset;
+    tagLabel = '';
+    slotLabel = '';
+    tagContents;
+    close;
+    confirm;
+    componentWillLoad() {
+        this.syncHasSlottedContent();
+    }
+    componentDidLoad() {
+        if (typeof MutationObserver === 'undefined')
+            return;
+        this.slotObserver = new MutationObserver(() => this.syncHasSlottedContent());
+        this.slotObserver.observe(this.el, {
+            childList: true,
+            characterData: true,
+        });
+    }
+    componentDidRender() {
+        if (this.customContentRef && this.tagContents instanceof HTMLElement) {
+            if (typeof this.customContentRef.replaceChildren === 'function') {
+                this.customContentRef.replaceChildren(this.tagContents);
+            }
+            else {
+                this.customContentRef.innerHTML = '';
+                this.customContentRef.appendChild(this.tagContents);
+            }
+        }
+    }
+    disconnectedCallback() {
+        this.slotObserver?.disconnect();
+    }
+    get hasTagContent() {
+        return !!(this.tagLabel && this.tagPreset);
+    }
+    get showContentBox() {
+        return !!this.tagContents || this.hasTagContent || this.hasSlottedContent;
+    }
+    syncHasSlottedContent() {
+        const hasSlottedContent = Array.from(this.el.childNodes).some(node => !(node.nodeType === Node.ELEMENT_NODE &&
+            node.classList.contains('sd-notice-modal')) &&
+            (node.nodeType === Node.ELEMENT_NODE ||
+                (node.nodeType === Node.TEXT_NODE && node.textContent?.trim())));
+        if (hasSlottedContent !== this.hasSlottedContent) {
+            this.hasSlottedContent = hasSlottedContent;
+        }
+    }
+    render() {
+        return (h("div", { key: '522489e0b0c0706b25f5e99215d8bb75e94f1596', class: "sd-notice-modal" }, h("sd-icon", { key: 'e6ca52391427d0f1a429feeb97337e716aae5920', class: "sd-notice-modal__close-button", name: "close", size: CLOSE_ICON_SIZE, color: CLOSE_ICON_COLOR, onClick: () => this.close.emit() }), h("h2", { key: '7c7f4c3ad01d421a7f75f14d93cc0ba58526bfd6', class: `sd-notice-modal__title ${this.titleClass}` }, this.modalTitle), h("div", { key: 'afc982ef15da5884f181e189f78a9986a467ff40', class: "sd-notice-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '028b03030a7a1b29ec54910807878da39f8ea156', class: "sd-notice-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-notice-modal__message-text", innerHTML: msg }))))), this.showContentBox && (h("div", { key: 'fa12a72c4ac271d6e57ec85415f6144f1b38b146', class: "sd-notice-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-notice-modal__custom-content", ref: el => {
+                this.customContentRef = el;
+            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.hasTagContent && h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && h("span", { class: "sd-notice-modal__slot-label" }, this.slotLabel))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '39008c0c41e84a92b02aa310e32dacf7b1b3ea83', class: "sd-notice-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-notice-modal__message-text", innerHTML: msg })))))), h("div", { key: '54062ddaf99170af5bcf8caa1f6d80ce3f24b4b2', class: "sd-notice-modal__button" }, this.subButtonLabel && (h("sd-button-v2", { key: 'c0365120540bf5e7f9e43955a8099e019837e4d6', name: NOTICE_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.close.emit() })), h("sd-button-v2", { key: 'c51c93f72ebbe91e87aa0d0d561227f6b66b5e74', name: NOTICE_BUTTON_PRESET, label: this.mainButtonLabel, onSdClick: () => this.confirm.emit() }))));
+    }
+    static get is() { return "sd-notice-modal"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-notice-modal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-notice-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "modalTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "modal-title",
+                "defaultValue": "''"
+            },
+            "titleClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "title-class",
+                "defaultValue": "''"
+            },
+            "topMessage": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "bottomMessage": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "mainButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "main-button-label",
+                "defaultValue": "'\uD655\uC778'"
+            },
+            "subButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sub-button-label",
+                "defaultValue": "''"
+            },
+            "tagPreset": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TagName",
+                    "resolved": "\"pill_md_blue\" | \"pill_md_darkblue\" | \"pill_md_green\" | \"pill_md_grey\" | \"pill_md_indigo\" | \"pill_md_orange\" | \"pill_md_red\" | \"pill_md_yellow\" | \"pill_sm_blue\" | \"pill_sm_darkblue\" | \"pill_sm_green\" | \"pill_sm_grey\" | \"pill_sm_indigo\" | \"pill_sm_orange\" | \"pill_sm_red\" | \"pill_sm_yellow\" | \"pill_xs_blue\" | \"pill_xs_darkblue\" | \"pill_xs_green\" | \"pill_xs_grey\" | \"pill_xs_indigo\" | \"pill_xs_orange\" | \"pill_xs_red\" | \"pill_xs_yellow\" | \"square_md_blue\" | \"square_md_darkblue\" | \"square_md_green\" | \"square_md_grey\" | \"square_md_indigo\" | \"square_md_orange\" | \"square_md_red\" | \"square_md_yellow\" | \"square_sm_blue\" | \"square_sm_darkblue\" | \"square_sm_green\" | \"square_sm_grey\" | \"square_sm_indigo\" | \"square_sm_orange\" | \"square_sm_red\" | \"square_sm_yellow\" | \"square_xs_blue\" | \"square_xs_darkblue\" | \"square_xs_green\" | \"square_xs_grey\" | \"square_xs_indigo\" | \"square_xs_orange\" | \"square_xs_red\" | \"square_xs_yellow\" | undefined",
+                    "references": {
+                        "TagName": {
+                            "location": "import",
+                            "path": "./sd-notice-modal.config",
+                            "id": "src/components/sd-notice-modal/sd-notice-modal.config.ts::TagName",
+                            "referenceLocation": "TagName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tag-preset"
+            },
+            "tagLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tag-label",
+                "defaultValue": "''"
+            },
+            "slotLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "slot-label",
+                "defaultValue": "''"
+            },
+            "tagContents": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement",
+                    "resolved": "HTMLElement | undefined",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasSlottedContent": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "close",
+                "name": "sdClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "confirm",
+                "name": "sdConfirm",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -240,17 +240,17 @@ export class SdNumberInput {
         const inputStyles = {
             textAlign: this.useButton ? 'center' : 'right',
         };
-        return (h("sd-field", { key: 'c3a485796694d2c210160197267b930772357976', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), style: inputWidth }, h("label", { key: '3b7ac29ad4ac268df76c1fe9c06d77064ee75230', class: {
+        return (h("sd-field", { key: '0ec5a9e4ceaed777c964107654784edc749735ff', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), style: inputWidth }, h("label", { key: 'ea74323317baec7816553fd4cce5754f707d513a', class: {
                 'sd-number-input': true,
                 [this.getInputStatus()]: true,
                 'sd-number-input--with-buttons': this.useButton,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("input", { key: 'f8c9c5319e4793eb2be18a8a6d6bf36a2defb41e', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__input ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, style: inputStyles, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.useButton && (h("div", { key: '6e76bf90e33092abfe7cf6315edf389d157d3121', class: "sd-number-input__buttons" }, h("button", { key: 'd020a14949c547b1d0ad1fa6087c10f29c7aa341', type: "button", class: {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("input", { key: '1c702736fb99736d7a42478ba565f1ac2ec68353', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__input ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, style: inputStyles, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.useButton && (h("div", { key: '7a6ddd6432e4b75eb4854df30551be4abeecc59b', class: "sd-number-input__buttons" }, h("button", { key: '1af466b78c9cde914b65369c9462e2ec60e65246', type: "button", class: {
                 'sd-number-input__button': true,
                 'sd-number-input__button--decrement': true,
-            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '6d1c5d5b44027d58eb7460aab4369cead93d9555', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), h("button", { key: '093e027e89c05973d97bed7b2a547df4253fa99b', type: "button", class: {
+            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '1d14fd79f63e5f0cf62be28b55dc23300c958d10', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), h("button", { key: 'dc1e9a3aa010fd049aaa9ec00bb5223c2d435cf7', type: "button", class: {
                 'sd-number-input__button': true,
                 'sd-number-input__button--increment': true,
-            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '8eb8d91c84ce4d5b5a6c205018047291bf0f092c', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
+            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '44297019634fbd47d054d2a4822222ef6eb36fac', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
     }
     static get is() { return "sd-number-input"; }
     static get originalStyleUrls() {

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

@@ -68,12 +68,12 @@ export class SdPagination {
         }
     }
     render() {
-        return (h("div", { key: '9fe78e2e23e4f31e0979e2d04f80169e0e0dcc0e', class: this.paginationClasses }, h("div", { key: '257d3b64a41ebcfcf99c6385dc4f25fe8bef76d2', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (h("div", { key: '9e0f4dff733cfc9a204fa3015e2db8063f9dd0b7', class: this.paginationClasses }, h("div", { key: '1e0801d8bdf19ac2d6351aeb9245635faf2fe1c5', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'pagination-btn': true,
                 'pagination-btn--selected': this.currentPage === n,
             }, disabled: this.currentPage === n, style: {
                 '--pagination-btn-width': `${this.buttonWidth}px`,
-            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '1f39f1c793802461d78fe946f814ef20e428b375', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '4e53c048a9404e0a664ebec465b93405cf2bc6b5', class: "append-btns" }, this.renderNextButtons())));
     }
     static get is() { return "sd-pagination"; }
     static get originalStyleUrls() {

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

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

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

@@ -220,7 +220,7 @@ export class SdPortal {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: '5c8086dcde22ac632a914b2b7efb2b1b1f6147bd' });
+        return h("slot", { key: 'de500e5ee667c295313afda908429b55ed768969' });
     }
     static get is() { return "sd-portal"; }
     static get properties() {

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

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

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

@@ -23,7 +23,7 @@ export class SdRadio {
         this.update.emit(this.value);
     }
     render() {
-        return (h("div", { key: '54f13256c7d3af2ca702dcd8c63fbb50eb8f10cc', "aria-label": this.val || 'radio option', "aria-checked": String(this.val) === String(this.value) ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: this.getRadioClasses() }, h("label", { key: `radio-${this.val}` }, h("input", { key: '28c55d4f7612e37c3f5c715dc6c338826d203a9d', type: "radio", name: this.val, value: String(this.val), checked: String(this.val) === String(this.value), disabled: this.disabled, onInput: ({ detail }) => this.handleRadioChange(detail) }), this.val && h("span", { key: 'e5a5b475e6f0b47fc77119cbf9eeca97338f71ff', class: "sd-radio-group__label" }, this.label || this.val))));
+        return (h("div", { key: '22f461c707a4493e9cd1c3249b8e9d7ba2e8c1d3', "aria-label": this.val || 'radio option', "aria-checked": String(this.val) === String(this.value) ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: this.getRadioClasses() }, h("label", { key: `radio-${this.val}` }, h("input", { key: 'fa3a86b504202c9d74038fba3d6dafc04632e2fb', type: "radio", name: this.val, value: String(this.val), checked: String(this.val) === String(this.value), disabled: this.disabled, onInput: ({ detail }) => this.handleRadioChange(detail) }), this.val && h("span", { key: 'bc4e311599a3b9c4339dc07538a2e27149c3d816', class: "sd-radio-group__label" }, this.label || this.val))));
     }
     static get is() { return "sd-radio"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-radio-button-group/sd-radio-button-group.js

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

package/dist/collection/components/sd-radio-group/sd-radio-group.js

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

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

@@ -144,10 +144,10 @@ export class SdSelectDropdown {
         this.isScrolled = scrollTop > 0;
     };
     render() {
-        return (h("div", { key: '4f22112f05b66852b064a73f3d20ee0d633a6989', class: {
+        return (h("div", { key: 'b9e4867efa896b6435e8fa0fafa0d5c4ba1f36a4', class: {
                 'sd-select-dropdown': true,
                 'sd-select-dropdown--ready': this.isDropdownReady,
-            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("sd-select-search-input", { key: 'e068422c6d4586dc833489a0d77f0a78a4f02ada', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("slot", { name: `option-${option.value}` }, h("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
+            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("sd-select-search-input", { key: '8600234406b252a0d09252c4b9286870e77a6394', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("slot", { name: `option-${option.value}` }, h("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
     }
     static get is() { return "sd-select-dropdown"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js

@@ -24,7 +24,7 @@ export class SdSelectOption {
         }
     };
     render() {
-        return (h("div", { key: '8d5d64e5888bca2e204168a58a9e8de65df44581', class: {
+        return (h("div", { key: 'd3ab86ef3bb92c0e912a344e95de4be8e5ffed4d', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,

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

@@ -16,17 +16,17 @@ export class SdSelectSearchInput {
         input?.focus({ preventScroll: true });
     }
     render() {
-        return (h("div", { key: 'e4d9726c7c294a2c435cc4c9aaf6d2ada1fa58ff', class: {
+        return (h("div", { key: 'e14663520ea13fd32617e0811406d64da0789fb1', class: {
                 'sd-select-search-input': true,
                 'sd-select-search-input--scrolled': !!this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, h("sd-input", { key: '7be3654c2171a71ade6b61670a73d25a0f68cc9e', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
+            }, onClick: event => event.stopPropagation() }, h("sd-input", { key: '0067dc90a975583ebd0676fcca059896f152592e', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
                 this.searchInput.emit(String(event?.detail));
             }, onSdFocus: () => {
                 this.searchFocus.emit();
             }, onKeyDown: event => {
                 if (event.code === 'Enter')
                     event.stopPropagation();
-            } }, h("sd-icon", { key: 'e1746218cac13b6b935eacc27f524de78edd2684', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
+            } }, h("sd-icon", { key: '60a0fa1fd2bcb1beb7954f2c13e322f142b5ca66', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
     }
     static get is() { return "sd-select-search-input"; }
     static get originalStyleUrls() {

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

@@ -141,7 +141,7 @@ export class SdSelect extends BaseDropdownEvent {
         }
     };
     render() {
-        return (h("sd-field", { key: 'da4d19d27d49ba3be711e35bd8090602e3d96dbd', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, insideLabel: this.insideLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: 'a0c5e55a1c31def2095b98f95b79fe877d114fb9', class: {
+        return (h("sd-field", { key: '2ac382aca68d636be323d87a6feb3eae63fd8d35', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, insideLabel: this.insideLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: '781a0950f3f18480e320ce25cf03fd1bc04b9349', class: {
                 'sd-select': true,
                 'sd-select--disabled': this.disabled,
                 'sd-select--error': !!this.error,

package/dist/collection/components/sd-select-group/sd-select-group.js

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

package/dist/collection/components/sd-select-multiple/sd-select-multiple.js

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

package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.js

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

package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js

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

package/dist/collection/components/sd-select-v2/sd-select-v2-list-item/sd-select-v2-list-item.js

@@ -64,7 +64,7 @@ export class SdSelectV2ListItem {
         if (isDepth1Group) {
             cssVars['--list-item-border-top'] = `${LIST_ITEM_COLORS.depth1.borderWidth}px solid ${LIST_ITEM_COLORS.depth1.border}`;
         }
-        return (h("div", { key: '68c45b6a345a90fe1b44d1c744cb27881ddca772', class: {
+        return (h("div", { key: '0abaaaf9e87dd7faa5ca7566d54367fc1a883d6e', class: {
                 'sd-select-v2-list-item': true,
                 'sd-select-v2-list-item--group': isGroup,
                 'sd-select-v2-list-item--depth1-group': isDepth1Group,
@@ -74,7 +74,7 @@ export class SdSelectV2ListItem {
                 'sd-select-v2-list-item--focused': this.isFocused,
                 'sd-select-v2-list-item--selectable': this.isSelectable && !this.option.disabled,
                 'sd-select-v2-list-item--disabled': !!this.option.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: '8eda4135c2d3a6a79efe48eb39d7ada530543be2', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, class: "sd-select-v2-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), h("span", { key: '939299b58c52bfc8626723d63f03e915f2be89c8', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (h("span", { key: '59598495bb83488f5e4a0b0005f80c7bfa00bdf3', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: 'd2b00059ae0792d7d162e8ea7c8f35640ab6086f', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, class: "sd-select-v2-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), h("span", { key: '588434f01076bc963ca733eabf62a74795788c07', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (h("span", { key: '6238cac7c3da53813eb8e65f98167874947625af', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
     static get is() { return "sd-select-v2-list-item"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-select-v2/sd-select-v2-list-item-search/sd-select-v2-list-item-search.js

@@ -50,12 +50,12 @@ export class SdSelectV2ListItemSearch {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (h("div", { key: '6a58d3109bba6cf63f08e3d035570f95847389b0', class: {
+        return (h("div", { key: '0b97d37d739a22f488b313cfcc6e210c19cd3b7f', class: {
                 'sd-select-v2-list-item-search': true,
                 'sd-select-v2-list-item-search--scrolled': this.isScrolled,
-            } }, h("div", { key: '9f4229f0c21a85964f3264ead376cf05b548b1b3', class: "sd-select-v2-list-item-search__inner" }, h("sd-icon", { key: '7f02ec472bc56398e961e20c2499e3469a3b94d1', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), h("input", { key: 'c9211570ff1b852dcce6fececa00b0660c13b94f', ref: el => {
+            } }, h("div", { key: 'c0667cb553c481507149baa6da6b07cdc3ed69c4', class: "sd-select-v2-list-item-search__inner" }, h("sd-icon", { key: '0a9f76e5f8bb9a202ca921d076552f7ca8868528', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), h("input", { key: 'ac3dffc2b22f14ed356c92f64f8d1d46e57040f7', ref: el => {
                 this.inputEl = el;
-            }, type: "text", class: "sd-select-v2-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: () => this.searchFocus.emit() }), this.searchText && (h("button", { key: '0a0e6a5e8a0c0f3584e2af1f1e2f5f82cc719fad', type: "button", class: "sd-select-v2-list-item-search__clear", onClick: this.handleClear }, h("sd-icon", { key: '2874ce9881ffe6d0e71c0b9fb95f533def0cea6b', name: "close", size: 12, color: "#888888" }))))));
+            }, type: "text", class: "sd-select-v2-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: () => this.searchFocus.emit() }), this.searchText && (h("button", { key: 'c81a0a057ad862603c3ccb627102182898fd004f', type: "button", class: "sd-select-v2-list-item-search__clear", onClick: this.handleClear }, h("sd-icon", { key: 'b65fcc15d27b3feafba27944dada2c9ed844b870', name: "close", size: 12, color: "#888888" }))))));
     }
     static get is() { return "sd-select-v2-list-item-search"; }
     static get originalStyleUrls() {