@sellmate/design-system 1.0.37 → 1.0.38

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

@@ -5,7 +5,7 @@ export class SdBadge {
     label = '';
     render() {
         const resolvedColor = BADGE_COLOR_MAP[this.color] ?? BADGE_COLOR_MAP.blue;
-        return (h("div", { key: '58dcc44b3e0bc3e248508176ca19b3c66d30fd9f', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: 'deb6d20d33d0e4f614bc8283d21725f1c1911a07', class: "sd-badge__dot" }), h("div", { key: '47d1084381e76eb14e9ddaa380a15f8e87a8f1f8', class: "sd-badge__label" }, this.label)));
+        return (h("div", { key: '2326b8dc9bf6da9ab601dced34113bc62e99c4de', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '40366f078c74d07515a456ae3dcd9bdb02fe5f7b', class: "sd-badge__dot" }), h("div", { key: 'b2e03701635521a46d5a0dda4b489800f6f92cf9', class: "sd-badge__label" }, this.label)));
     }
     static get is() { return "sd-badge"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-button-v2/sd-button-v2.js

@@ -61,13 +61,13 @@ export class SdButtonV2 {
         const hasLabel = Boolean(this.label);
         const iconOnly = !this.label && Boolean(this.icon);
         const accessibleName = iconOnly && this.ariaLabel.trim() ? this.ariaLabel : undefined;
-        return (h("button", { key: 'bd0c68550b9372b5fda70e90bd7f7f83c37861cc', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
+        return (h("button", { key: '248e85751b7f7f1cdb770e4f4c1466fa8736f024', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
                 '--sd-button-v2-bg': config.variant === 'primary' ? config.color : '#FFFFFF',
                 '--sd-button-v2-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
                 '--sd-button-v2-border': PRESET_BORDER_COLORS[preset],
                 '--sd-button-v2-content': PRESET_CONTENT_COLORS[preset],
                 '--sd-button-v2-accent': BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, h("span", { key: '59ef03ee76cc7d4ea85aefe1e32692562b233292', class: "sd-button-v2__content" }, this.icon && (h("sd-icon", { key: 'eae0c177bab7e0dbe8702cb3e4d161e8415d9b61', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-content)" })), this.label && h("span", { key: '2244da58987418174c25f44c0300923ebdb04c86', class: "sd-button-v2__label" }, this.label))));
+            }, onClick: this.handleClick }, h("span", { key: '0b68fdf9711cd26d6f143fec848d3e16e32c81e2', class: "sd-button-v2__content" }, this.icon && (h("sd-icon", { key: '26bffa7135658f790e65a8b0aa32af055ea269f2', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-content)" })), this.label && h("span", { key: '5016092b05b4f068f823ae8dbd6a47ea23763086', class: "sd-button-v2__label" }, this.label))));
     }
     static get is() { return "sd-button-v2"; }
     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: '5469668df656a5992d9b3ac2a166bc9e39b8619d' }, h("div", { key: '95b883e6cc86fcaa8add6cbd029b5e4d1ed2759c', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: 'a09be5de9f8e0edab7e60045dffb39e52f9c545f' }))));
+        return (h(Fragment, { key: '01df653d1718aab046ee74275f13c926fbf05573' }, h("div", { key: '82dcf247f0f718328fa4f1c3548becff1c1d6fd3', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: '33b518500426f3abd40ee4a5719c8f784bfeb65a' }))));
     }
     static get is() { return "sd-card"; }
     static get originalStyleUrls() {

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

@@ -0,0 +1,17 @@
+import modalTokens from "../../tokens/generated/component.modal.json";
+export const CONFIRM_MODAL_DEFAULT_BUTTON = {
+    positive: 'primary_md',
+    negative: 'danger_md',
+};
+export const CONFIRM_MODAL_ICON_MAP = {
+    positive: 'notificationOutline',
+    negative: 'warningOutline',
+};
+export const CONFIRM_MODAL_ICON_COLOR = {
+    positive: modalTokens.modal.confirm.positive.icon,
+    negative: modalTokens.modal.confirm.negative.icon,
+};
+export const TITLE_ICON_SIZE = Number(modalTokens.modal.title.icon);
+export const CLOSE_ICON_SIZE = Number(modalTokens.modal.close.size);
+export const CLOSE_ICON_COLOR = modalTokens.modal.close.color;
+export const SUB_BUTTON_PRESET = 'neutral_outline_md';

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

@@ -0,0 +1,67 @@
+sd-confirm-modal {
+  display: block;
+  width: fit-content;
+  min-width: 520px;
+}
+sd-confirm-modal .sd-confirm-modal {
+  position: relative;
+  padding: var(--sd-modal-modal-padding-y) var(--sd-modal-modal-padding-x);
+  border-radius: var(--sd-modal-modal-radius);
+  box-shadow: 4px 4px 24px 4px rgba(0, 0, 0, 0.2);
+  background: var(--sd-modal-modal-bg);
+}
+sd-confirm-modal .sd-confirm-modal__close-button {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  cursor: pointer;
+}
+sd-confirm-modal .sd-confirm-modal__icon {
+  display: block;
+  width: var(--sd-modal-modal-title-icon);
+  height: var(--sd-modal-modal-title-icon);
+  margin: 0 auto var(--sd-modal-modal-title-gap) auto;
+}
+sd-confirm-modal .sd-confirm-modal__title {
+  color: var(--sd-modal-modal-title-color);
+  font-size: var(--sd-modal-modal-title-typography-font-size);
+  font-weight: var(--sd-modal-modal-title-typography-font-weight);
+  line-height: var(--sd-modal-modal-title-typography-line-height);
+  text-align: center;
+  margin: 0 0 var(--sd-modal-modal-body-gap) 0;
+}
+sd-confirm-modal .sd-confirm-modal__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sd-modal-modal-body-gap);
+}
+sd-confirm-modal .sd-confirm-modal__message-text {
+  color: var(--sd-modal-modal-message-color);
+  font-size: var(--sd-modal-modal-message-typography-font-size);
+  font-weight: var(--sd-modal-modal-message-typography-font-weight);
+  line-height: var(--sd-modal-modal-message-typography-line-height);
+  text-align: center;
+  margin: 0;
+}
+sd-confirm-modal .sd-confirm-modal__content-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border: 1px solid #e1e1e1;
+  border-radius: 8px;
+  background: white;
+}
+sd-confirm-modal .sd-confirm-modal__slot-label {
+  font-size: 14px;
+  font-weight: 700;
+  line-height: var(--sd-modal-modal-message-typography-line-height);
+  color: var(--sd-modal-modal-message-color);
+}
+sd-confirm-modal .sd-confirm-modal__button {
+  display: flex;
+  justify-content: center;
+  gap: var(--sd-modal-modal-button-gap);
+  margin-top: 32px;
+}

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

@@ -0,0 +1,384 @@
+import { h } from "@stencil/core";
+import { CONFIRM_MODAL_ICON_MAP, CONFIRM_MODAL_ICON_COLOR, CONFIRM_MODAL_DEFAULT_BUTTON, TITLE_ICON_SIZE, CLOSE_ICON_SIZE, CLOSE_ICON_COLOR, SUB_BUTTON_PRESET, } from "./sd-confirm-modal.config";
+export class SdConfirmModal {
+    el;
+    hasSlottedContent = false;
+    customContentRef;
+    slotObserver;
+    type = 'positive';
+    modalTitle = '';
+    titleClass = '';
+    topMessage = [];
+    bottomMessage = [];
+    mainButtonName;
+    mainButtonLabel = '확인';
+    subButtonLabel = '';
+    tagPreset;
+    tagLabel = '';
+    slotLabel = '';
+    tagContents;
+    close;
+    confirm;
+    componentWillLoad() {
+        this.syncHasSlottedContent();
+    }
+    componentDidLoad() {
+        if (typeof MutationObserver === 'undefined')
+            return;
+        this.slotObserver = new MutationObserver(() => this.syncHasSlottedContent());
+        this.slotObserver.observe(this.el, {
+            childList: true,
+            characterData: true,
+        });
+    }
+    componentDidRender() {
+        if (this.customContentRef && this.tagContents instanceof HTMLElement) {
+            if (typeof this.customContentRef.replaceChildren === 'function') {
+                this.customContentRef.replaceChildren(this.tagContents);
+            }
+            else {
+                this.customContentRef.innerHTML = '';
+                this.customContentRef.appendChild(this.tagContents);
+            }
+        }
+    }
+    disconnectedCallback() {
+        this.slotObserver?.disconnect();
+    }
+    get resolvedMainButton() {
+        return this.mainButtonName ?? CONFIRM_MODAL_DEFAULT_BUTTON[this.type];
+    }
+    get hasTagContent() {
+        return !!(this.tagLabel && this.tagPreset);
+    }
+    get showContentBox() {
+        return !!this.tagContents || this.hasTagContent || this.hasSlottedContent;
+    }
+    syncHasSlottedContent() {
+        const hasSlottedContent = Array.from(this.el.childNodes).some(node => !(node.nodeType === Node.ELEMENT_NODE &&
+            node.classList.contains('sd-confirm-modal')) &&
+            (node.nodeType === Node.ELEMENT_NODE ||
+                (node.nodeType === Node.TEXT_NODE && node.textContent?.trim())));
+        if (hasSlottedContent !== this.hasSlottedContent) {
+            this.hasSlottedContent = hasSlottedContent;
+        }
+    }
+    render() {
+        const iconName = CONFIRM_MODAL_ICON_MAP[this.type];
+        const iconColor = CONFIRM_MODAL_ICON_COLOR[this.type];
+        return (h("div", { key: '79b2bc6c82470f18097f709af199379b7f9c33e9', class: "sd-confirm-modal" }, h("sd-icon", { key: '20d09afc087d1f1d293295dfda2b7c0b65fca032', class: "sd-confirm-modal__close-button", name: "close", size: CLOSE_ICON_SIZE, color: CLOSE_ICON_COLOR, onClick: () => this.close.emit() }), h("sd-icon", { key: '7ef48200946dceef27e32bf51e2e57ee7db9e5c8', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor }), h("h2", { key: '7937da9ba581a59b6d33cef5c63ccaf01714cc71', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), h("div", { key: 'ded09b7f81f990fd5b4ce7bb78eebf4578012b41', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '25b0ad2313003f0fa5a119d63e80d1a96e1af5f5', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (h("div", { key: '51d76d5923a384ac82d1e4a463981ab25655037d', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+                this.customContentRef = el;
+            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.hasTagContent && h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '8ef574ff752ccee7ba28cb4824fc7968bb86b344', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), h("div", { key: 'bd5e3dc0bd36c33a7b47ce328121427d44d53a86', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button-v2", { key: 'ff8c7487883f2a4c740baa8966e641975bc4ba14', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.close.emit() })), h("sd-button-v2", { key: '176cfe2404deb3d57e4a87206a339f797536b51c', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.confirm.emit() }))));
+    }
+    static get is() { return "sd-confirm-modal"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-confirm-modal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-confirm-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ConfirmModalType",
+                    "resolved": "\"negative\" | \"positive\"",
+                    "references": {
+                        "ConfirmModalType": {
+                            "location": "import",
+                            "path": "./sd-confirm-modal.config",
+                            "id": "src/components/sd-confirm-modal/sd-confirm-modal.config.ts::ConfirmModalType",
+                            "referenceLocation": "ConfirmModalType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'positive'"
+            },
+            "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": "[]"
+            },
+            "mainButtonName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ConfirmModalMainButton",
+                    "resolved": "\"danger_md\" | \"danger_outline_md\" | \"primary_md\" | \"primary_outline_md\" | undefined",
+                    "references": {
+                        "ConfirmModalMainButton": {
+                            "location": "import",
+                            "path": "./sd-confirm-modal.config",
+                            "id": "src/components/sd-confirm-modal/sd-confirm-modal.config.ts::ConfirmModalMainButton",
+                            "referenceLocation": "ConfirmModalMainButton"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "main-button-name"
+            },
+            "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-confirm-modal.config",
+                            "id": "src/components/sd-confirm-modal/sd-confirm-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-date-picker/sd-date-picker.js

@@ -27,7 +27,7 @@ export class SdDatePicker {
         this.viewChange.emit(e.detail);
     };
     render() {
-        return (h("div", { key: '45d377178babbbf10004c3551de90abb1f8137cc', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, h("sd-input", { key: '7850afd672ecbdcbee68002add8a7ee3b223fc20', ref: el => (this.inputEl = el), value: this.value, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: '5b37640ab87c5a963bf153943f42467e3fa5dbfc', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '3585b5cee494f3d0871d50f47351cf278b493c35', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '5ebb7dd31aac4a7e8402a4bc393ef6b2afaea0c2', class: "sd-date-picker__menu" }, h("sd-calendar", { key: 'e7150c47392fab2a79442e0ca86912e1bb534c9d', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange }))))));
+        return (h("div", { key: '9f1e5b391dec4623e6f628449a459ab1a6f6ec7d', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, h("sd-input", { key: '5448efd4117535e96d1273395571e12bdf3063ea', ref: el => (this.inputEl = el), value: this.value, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: '97191fcbf8d9b1af8553ad867b38a189c480c6d8', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '945477bd6ef69263a9cefae982474d6889dd8d58', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '270188ccf5d174be496d31abcf9d8570e37a5ff0', class: "sd-date-picker__menu" }, h("sd-calendar", { key: 'f9d50e345744d0ce127028edba60ba4c17dba372', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange }))))));
     }
     static get is() { return "sd-date-picker"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js

@@ -158,16 +158,16 @@ export class SdDateRangePicker {
         this.setHoverDate(hoverDate);
     }
     render() {
-        return (h("div", { key: 'f96121cbdd02bd5dfafb47cee2c15084f53d77d2', class: {
+        return (h("div", { key: 'd76c5830570b080fe07fc01e9a3ea8f09ec1bf40', class: {
                 'sd-date-range-picker': true,
                 'sd-date-range-picker--disabled': this.disabled,
-            } }, h("sd-input", { key: 'bf18d51662c7bbe16e831175eb1b5df93f7ed78d', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: '7fa976563de08e44b8c9572d9e9ec717285cabba', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '69abd97403ea83264b4408526d0423470421f877', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, h("div", { key: '50dfb1e8b63e12f7707c53fa73063b8a88563209', class: "sd-date-range-picker__menu" }, h("div", { key: '666f6d6b41853f47d26bccb598dec7bcf1af6a5a', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: 'af226c05c51de90e073730d7b9557024d55ceed6', type: "button", name: "prev", title: "Previous", onClick: () => {
+            } }, h("sd-input", { key: '7f3683a35f770adb9a1539cbe9104fb06d5014d9', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: 'b8dea54c60be95b925de1ba755bd1cad6bd844d9', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '3d0ff67c8f63d212543404d38d7ddfb553be05f8', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, h("div", { key: 'f0f4f9ccd14f8a07c5ffad002da8e02d8dfb5f38', class: "sd-date-range-picker__menu" }, h("div", { key: '6f9363ff49c729138a0495d068a78102487bed27', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: '3766e1aef6555d489cd38c067314ed9fa4ce49f5', type: "button", name: "prev", title: "Previous", onClick: () => {
                 this.setPrevYear(this.prevYear - 1);
                 this.viewChange.emit({ year: this.prevYear, month: this.prevMonth });
-            } }, h("sd-icon", { key: '68a42e30d39305ff9d876389df1e26083cf170f8', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: 'b489964425b45cd993e474fe1c1f0c8a8e1fc2a5', class: "header-label" }, this.prevYear), h("button", { key: '4e4008ed5eaffec84a4ad17df60ab1753465d146', type: "button", name: "next", title: "Next", onClick: () => {
+            } }, h("sd-icon", { key: 'd824295817a8bba3a03bf6bfbb5f1f86b4fca84b', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: 'fc2e01affb1605d5f9953e61f680cc2d35238f82', class: "header-label" }, this.prevYear), h("button", { key: '2b26023f4b2ea2aea17fe9b582363080a8203b08', type: "button", name: "next", title: "Next", onClick: () => {
                 this.setPrevYear(this.prevYear + 1);
                 this.viewChange.emit({ year: this.prevYear, month: this.prevMonth });
-            } }, h("sd-icon", { key: 'c6067f45fa602520dff886ea5c2c01c46c439f1d', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '5cd806e75ade0161f3551bc99449b833bb2637be', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
+            } }, h("sd-icon", { key: 'dd16365c56efd6d017727341737e448f998d1229', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '68a2c1a793d8ed74cfc9fbe8b840004a0a88bb3d', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
             ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
             : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date === this.formatDate(index, Number(day))), type: this.getDateBoxType(this.formatDate(index, Number(day))), isToday: today === this.formatDate(index, Number(day)), disabled: !day ? true : this.isDisabledDate(this.formatDate(index, Number(day))), inRange: this.isDateInRange(this.formatDate(index, Number(day))), isStartDate: this.dateRange[0] === this.formatDate(index, Number(day)), isEndDate: this.dateRange[1] === this.formatDate(index, Number(day)), onSdClick: () => this.handleDateClick(index, Number(day)), onSdMouseOver: () => this.handleDateHover(index, Number(day)) }))))))))))))));
     }

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

@@ -186,7 +186,7 @@ export class SdDropdownButton extends BaseDropdownEvent {
     }
     render() {
         const { config, preset } = this.resolvedConfig;
-        return (h("div", { key: '69db2205a157752f264128ed38c541edf7ae155a', class: "sd-dropdown-button" }, h("button", { key: 'a765967799282988bd05f06750828024a94c11a4', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
+        return (h("div", { key: 'd2c725861a4667633a2726b47101d604436c5c16', class: "sd-dropdown-button" }, h("button", { key: '51a4a2f049f53d61f45632a89e179c95f9cf9755', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
                 '--sd-dropdown-button-min-width': `${DROPDOWN_BUTTON_MIN_WIDTHS[config.size]}px`,
                 '--sd-dropdown-button-bg': config.color,
                 '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
@@ -197,10 +197,10 @@ export class SdDropdownButton extends BaseDropdownEvent {
                 '--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
                 '--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_CONTENT,
                 '--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
-            } }, h("span", { key: '9df1ce5517422a283015d3e06068ced63b7b7ffe', class: "sd-dropdown-button__trigger-label" }, this.label), h("span", { key: 'c3c577e7366c66fbc17457d26b0c07ac3e8d4553', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), h("span", { key: '6df1177a45e91f5588c5c0688662e04b681a1b5e', class: {
+            } }, h("span", { key: '595bf90d834102371492f478e23f7886ec7e5dcf', class: "sd-dropdown-button__trigger-label" }, this.label), h("span", { key: '79a12ecba11d82944e2563d60dfb76c5a9bb9a39', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), h("span", { key: '7160b1e8f7e25d822c539a57ab19ee2572c7b146', class: {
                 'sd-dropdown-button__trigger-icon': true,
                 'sd-dropdown-button__trigger-icon--open': this.isOpen,
-            }, "aria-hidden": "true" }, h("sd-icon", { key: '702ed4e27a5de332396d23c35405b4e9217162a8', name: "arrowDown", size: 12, color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
+            }, "aria-hidden": "true" }, h("sd-icon", { key: 'd041b1bfb0bb902f5b670fbf5524babfa0ee47ac', name: "arrowDown", size: 12, color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
     }
     static get is() { return "sd-dropdown-button"; }
     static get originalStyleUrls() {

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

@@ -115,15 +115,15 @@ export class SdField {
         }
     }
     render() {
-        return (h("div", { key: '2fbaf36430425bac24666667a781dbf17c51da26', class: {
+        return (h("div", { key: 'a6b7771294f15396f8c59c5f39a461c43a69d0af', class: {
                 'sd-field': true,
                 'sd-field--has-label': !!this.label,
                 'sd-field--has-label-inside': !!this.label && this.insideLabel,
                 [this.fieldStatus]: !!this.fieldStatus,
-            } }, h("div", { key: 'c6559295b6bd18dbdc44b180dd401236e3dc1470', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '9ed48bc10ffb0a9bacc66f39ed22b2acf3fe4686', class: {
+            } }, h("div", { key: 'e8da3299b3797130544b03c2ec835f0ae609b262', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '03bdbb8604468fde4c643418a67951fca6d73c70', class: {
                 'sd-field__control': true,
                 'sd-field__control--label-inside ': !!this.label && this.insideLabel,
-            } }, h("slot", { key: '4e94489e186763f5cc16af7d38108f7d36ae3f90' }))), this.errorMsg && h("div", { key: '48f9d3e519615ed357f397041053345af23b5eff', class: "sd-field__error-message" }, this.errorMsg)));
+            } }, h("slot", { key: '1e3e62eb9184422a867730568397eebd1e777a41' }))), this.errorMsg && h("div", { key: 'cace55bf9fec37d973068b40a681f6167dc03ebd', class: "sd-field__error-message" }, this.errorMsg)));
     }
     renderLabel(label) {
         if (!label)

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

@@ -91,15 +91,15 @@ export class SdFilePicker {
     render() {
         const hasFiles = this.hasFiles();
         const displayText = this.getDisplayText();
-        return (h("div", { key: 'cb3a96b8911cb422bb30623d86b94b5c536f8f44', class: {
+        return (h("div", { key: '598e284933fe6dbcbd1a1f77a8f530aa22be5456', class: {
                 'sd-file-picker': true,
                 [this.getStatusClass()]: true,
                 'sd-file-picker--inline': this.inline,
-            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("input", { key: 'f507cd78ac9a05eea64b209f11ed9ab048a925ca', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), h("sd-icon", { key: '33f42ba84419b72a941b5e3162531fa795744525', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: '6e4252b659bc19d8f8841ff874a7bf50c86cee48', ref: el => (this.fileNamesRef = el), class: {
+            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("input", { key: '3f84b668c107219a3acecb32c8d473f12c162e3f', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), h("sd-icon", { key: '0fcc77f108d858f0ede5043c4da71988e68d8bd0', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: '5aeb75690a1922d765e19ada43cf7ab034f79979', ref: el => (this.fileNamesRef = el), class: {
                 'sd-file-picker__text': true,
                 'sd-file-picker__text--placeholder': !hasFiles,
                 'sd-file-picker__text--active': hasFiles,
-            } }, displayText), !this.disabled && hasFiles && (h("sd-icon", { key: '5879b1d0783ad1fbdbe44621efc42c86ea13a9af', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: '59718655bc66a60ee7d1ca53e78a1deea592406d', class: "sd-file-picker__tooltip" }, displayText))));
+            } }, displayText), !this.disabled && hasFiles && (h("sd-icon", { key: '1da963ffaded05153eb72803b3ca4127e82b7386', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: 'd4fdd2e2ed990c17c35eca0164f93f3323ba728c', class: "sd-file-picker__tooltip" }, displayText))));
     }
     static get is() { return "sd-file-picker"; }
     static get originalStyleUrls() {

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

@@ -144,7 +144,7 @@ export class SdFloatingPopover {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: 'ff0dbd7795ab2ee4f8ee89174b2b74fc2861f88e' });
+        return h("slot", { key: 'f2000891d7d3bd71982f591bf953d1421f67fb5e' });
     }
     static get is() { return "sd-floating-portal"; }
     static get originalStyleUrls() {