@sellmate/design-system 1.32.0 → 1.33.0

package/dist/collection/components/sd-expansion-item/sd-expansion-item.js

@@ -0,0 +1,201 @@
+import { h } from "@stencil/core";
+import { EXPANSION_ITEM } from "./sd-expansion-item.config";
+export class SdExpansionItem {
+    /** 헤더에 표시할 텍스트 */
+    title = '';
+    /** 펼침 상태 */
+    expanded = false;
+    /** compact 높이 사용 여부 */
+    dense = false;
+    /** 중첩 단계 (1~3) */
+    depth = 1;
+    hasBody = false;
+    /** body 내부 패딩 사용 여부 */
+    bodyPadding = true;
+    /** 토글 비활성화 여부 */
+    disabled = false;
+    /** 펼침 상태 변경 시 발생합니다. */
+    toggle;
+    handleToggle = () => {
+        if (this.disabled)
+            return;
+        this.expanded = !this.expanded;
+        this.toggle.emit(this.expanded);
+    };
+    handleSlotChange = (event) => {
+        const slot = event.target;
+        this.hasBody = slot.assignedNodes({ flatten: true }).some(node => node.nodeType === Node.ELEMENT_NODE || (node.textContent ?? '').trim() !== '');
+    };
+    render() {
+        const contentId = `sd-expansion-item-content-${this.title.replace(/\W+/g, '-').toLowerCase() || 'content'}`;
+        return (h("div", { key: 'd9914623cb545eb9782dd9f99aba586525a8db34', class: {
+                'sd-expansion-item': true,
+                'sd-expansion-item--dense': this.dense,
+                'sd-expansion-item--expanded': this.expanded,
+                'sd-expansion-item--disabled': this.disabled,
+            } }, h("button", { key: 'fc5b2f42015c3cf717653dc541e41a7dee526bfa', class: "sd-expansion-item__header", style: {
+                '--sd-expansion-item-padding-x': `${EXPANSION_ITEM.title.paddingX}px`,
+                '--sd-expansion-item-padding-y': `${this.dense ? EXPANSION_ITEM.title.paddingY.dense : EXPANSION_ITEM.title.paddingY.normal}px`,
+                '--sd-expansion-item-gap': `${EXPANSION_ITEM.title.gap}px`,
+                '--sd-expansion-item-indent': `${(this.depth - 1) * 32}px`,
+            }, type: "button", disabled: this.disabled, "aria-expanded": this.expanded ? 'true' : 'false', "aria-controls": contentId, onClick: this.handleToggle }, this.hasBody && h("sd-icon", { key: '754d7c535b20fad28f1b8efaedfa7efa44ea39d6', name: this.expanded ? 'caretUp' : 'caretDown', size: "12" }), h("slot", { key: '2d958b7cb20bab23861a548e45376214cc6ee50e', name: "leading" }), h("span", { key: '0b61cddfdebec252d8b7e22cd2586d475978fbeb', class: "sd-expansion-item__title" }, h("slot", { key: 'd8bf71d9589d2c642bf914bfe1bc5212559dd787', name: "title" }, this.title)), h("slot", { key: 'f1bf03fb094cab7e3f4c7bca41e10ea906b3e628', name: "trailing" })), h("div", { key: 'ff12f0643b1bdb098e2d7312f963ede03e857913', id: contentId, class: "sd-expansion-item__body", hidden: !this.expanded }, h("div", { key: '635b91b1ff04957b015fd81ed4ab0d84d56a793e', class: { 'sd-expansion-item__content': this.bodyPadding } }, h("slot", { key: '1f3937ffde6f83db745e6d362ddc2bb95a959ad5', onSlotchange: this.handleSlotChange })))));
+    }
+    static get is() { return "sd-expansion-item"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-expansion-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-expansion-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "title": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uD5E4\uB354\uC5D0 \uD45C\uC2DC\uD560 \uD14D\uC2A4\uD2B8"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "title",
+                "defaultValue": "''"
+            },
+            "expanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uD3BC\uCE68 \uC0C1\uD0DC"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "expanded",
+                "defaultValue": "false"
+            },
+            "dense": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "compact \uB192\uC774 \uC0AC\uC6A9 \uC5EC\uBD80"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dense",
+                "defaultValue": "false"
+            },
+            "depth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "1 | 2 | 3",
+                    "resolved": "1 | 2 | 3",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uC911\uCCA9 \uB2E8\uACC4 (1~3)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "depth",
+                "defaultValue": "1"
+            },
+            "bodyPadding": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "body \uB0B4\uBD80 \uD328\uB529 \uC0AC\uC6A9 \uC5EC\uBD80"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "body-padding",
+                "defaultValue": "true"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uD1A0\uAE00 \uBE44\uD65C\uC131\uD654 \uC5EC\uBD80"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasBody": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "toggle",
+                "name": "sdToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\uD3BC\uCE68 \uC0C1\uD0DC \uBCC0\uACBD \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -4,6 +4,11 @@ sd-field {
   height: fit-content;
   width: 100%;
 }
+sd-field.sd-field-host--hug {
+  display: flex;
+  width: fit-content;
+  max-width: 100%;
+}
 sd-field .sd-field *:focus,
 sd-field .sd-field *:focus-visible,
 sd-field .sd-field *:focus-within {
@@ -93,6 +98,9 @@ sd-field .sd-field__wrapper .sd-field__main {
   display: flex;
   flex-direction: column;
 }
+sd-field .sd-field__wrapper .sd-field__main--fixed {
+  flex: 0 1 auto;
+}
 sd-field .sd-field__wrapper .sd-field__control {
   position: relative;
   height: var(--sd-field-wrapper-height);

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

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import fieldTokens from "../../tokens/generated/component.field.json";
 import { FIELD_ADDON_ALIGN_MAP, FIELD_LABEL_SIZE_MAP, } from "./sd-field.config";
 const FORM_PARENT_TAGS = [
@@ -36,7 +36,11 @@ export class SdField {
     hint = '';
     /** 에러 메시지 */
     errorMessage = '';
-    /** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
+    /**
+     * 필드 너비 (숫자면 px, 문자열이면 그대로 적용).
+     * 지정하면 필드가 부모 폭을 다 먹지 않고 (레이블 + width) 만큼만 차지한다.
+     * 다른 요소와 나란히 놓으려면 부모를 flex 로 두면 된다.
+     */
     width = '';
     /** 필드 크기 */
     size = 'sm';
@@ -168,6 +172,11 @@ export class SdField {
     }
     render() {
         const addon = this.addonLabel;
+        // width 가 지정되면 호스트가 부모 폭을 다 먹지 않고 (label + width) 만큼만 hug 한다.
+        const hasWidth = this.width !== '' && this.width !== 0 && this.width !== undefined;
+        const widthStyle = hasWidth
+            ? { width: typeof this.width === 'number' ? `${this.width}px` : String(this.width) }
+            : {};
         const addonTokens = fieldTokens.field.addonLabel;
         const size = this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm';
         const labelTokens = FIELD_LABEL_SIZE_MAP[size];
@@ -223,20 +232,18 @@ export class SdField {
                     : {}),
             }
             : {};
-        return (h("div", { key: 'd29e49fe9ecf467f0c1ed443524fac2648dc9da4', class: {
+        return (h(Host, { key: '1a9732da019834d223e497e263fc6c5c98b117de', class: { 'sd-field-host--hug': hasWidth } }, h("div", { key: '875872a3a781335c0109f3221f8c6a46c6f0e5f8', class: {
                 'sd-field': true,
                 'sd-field--has-label': this.label !== '',
                 'sd-field--has-addon': addon !== '',
                 'sd-field--multiline': this.multiline,
                 'sd-field--borderless': this.borderless,
                 [this.fieldStatus]: this.fieldStatus !== '',
-            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, h("div", { key: '396173067f4a8ce38ea8ea9f5a6b9d76303b16fa', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '3e4aab5e10cf52f116aabfe1a8d36a806eb03af4', class: "sd-field__main" }, h("div", { key: 'edbe4443387935e2b51469339284024429f1f0d3', class: {
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, h("div", { key: 'd72d11850cd82c920412b2d8ab8d2eb87b6b1c07', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '8182b5023ccd43964b3a2a838088b254f1435a8e', class: { 'sd-field__main': true, 'sd-field__main--fixed': hasWidth }, style: widthStyle }, h("div", { key: 'fd0324d231bdf3877a44cdbff12e29c4fcc95fb5', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': addon !== '',
-            }, style: this.width !== '' && this.width !== 0
-                ? { width: typeof this.width === 'number' ? `${this.width}px` : this.width }
-                : {} }, addon && (h("div", { key: '7ac28abf5f37b7ada42b16f81227afb5c7f8d656', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: 'd995424c6f620b090006cdbcf8645d2ff822e802', name: this.icon.name, size: this.icon.size ??
-                Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), h("slot", { key: 'd105a65b5c926b5db9dd1d68239c0a2015739aba' })), this.errorMsg !== '' || this.errorMessage !== '' ? (h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && h("div", { class: "sd-field__hint" }, this.hint))))));
+            } }, addon && (h("div", { key: '0ed9f83d5d1be42107f0d8d873694c0283c81f71', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: 'ee553842c50e4170b835dc7af1d98e02d1f821cb', name: this.icon.name, size: this.icon.size ??
+                Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), h("slot", { key: '05952088edba5a354150b9b1cf5238ce5c911f3e' })), this.errorMsg !== '' || this.errorMessage !== '' ? (h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && h("div", { class: "sd-field__hint" }, this.hint)))))));
     }
     renderLabel(label) {
         if (label == null || label === '')
@@ -473,7 +480,7 @@ export class SdField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "\uD544\uB4DC \uB108\uBE44 (\uC22B\uC790\uBA74 px, \uBB38\uC790\uC5F4\uC774\uBA74 \uADF8\uB300\uB85C \uC801\uC6A9)"
+                    "text": "\uD544\uB4DC \uB108\uBE44 (\uC22B\uC790\uBA74 px, \uBB38\uC790\uC5F4\uC774\uBA74 \uADF8\uB300\uB85C \uC801\uC6A9).\n\uC9C0\uC815\uD558\uBA74 \uD544\uB4DC\uAC00 \uBD80\uBAA8 \uD3ED\uC744 \uB2E4 \uBA39\uC9C0 \uC54A\uACE0 (\uB808\uC774\uBE14 + width) \uB9CC\uD07C\uB9CC \uCC28\uC9C0\uD55C\uB2E4.\n\uB2E4\uB978 \uC694\uC18C\uC640 \uB098\uB780\uD788 \uB193\uC73C\uB824\uBA74 \uBD80\uBAA8\uB97C flex \uB85C \uB450\uBA74 \uB41C\uB2E4."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -269,24 +269,24 @@ export class SdFilePicker {
             [`--sd-system-radius-field-${this.size}`]: `${layout.radius}px`,
         };
         const showListbox = this.multiple && this.useMultipleListBox;
-        const content = (h("div", { key: 'd1c3af9860038ddb11d540af8312ad59d051524f', role: "button", tabindex: this.disabled ? -1 : 0, class: "sd-file-picker__content", ref: el => (this.contentRef = el), onClick: this.handleClick, onKeyDown: e => {
+        const content = (h("div", { key: '89b5383f3aaf2f230fd16b64e5587b4d7c37e82e', role: "button", tabindex: this.disabled ? -1 : 0, class: "sd-file-picker__content", ref: el => (this.contentRef = el), onClick: this.handleClick, onKeyDown: e => {
                 if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, h("input", { key: '760c38cd73d0a2a3d0832c5597c0e22bf737bb06', 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 ?? 'Click to upload' }), h("sd-icon", { key: '96ff0bf43eb3f17df92bd8834cd38a1ae36ad475', name: "attachFile", size: Number(layout.iconSize), color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: '0757b8b734e21fcf7bed04d7306ee3a9d202f950', ref: el => (this.fileNamesRef = el), class: {
+            } }, h("input", { key: '58ca8f7af6b7760eefb3a37a0b076ea3eccd7d07', 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 ?? 'Click to upload' }), h("sd-icon", { key: '3ed78b87ebd74fe12184f76d52ed6dc03fad5730', name: "attachFile", size: Number(layout.iconSize), color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: '035e18f041ad7ed5da3890f80c2fe33990496efa', ref: el => (this.fileNamesRef = el), class: {
                 'sd-file-picker__text': true,
                 'sd-file-picker__text--placeholder': !hasFiles,
                 'sd-file-picker__text--active': hasFiles,
-            } }, displayText), showListbox && hasFiles && !this.disabled && (h("sd-ghost-button", { key: '8e42d38452d00256147ee65e614bdeb7040917d7', icon: "caretDown", size: "xxs", ariaLabel: "toggle file list", disabled: this.disabled, class: {
+            } }, displayText), showListbox && hasFiles && !this.disabled && (h("sd-ghost-button", { key: 'da396b601196f3bd9c23f8a1113b4aa5401e3725', icon: "caretDown", size: "xxs", ariaLabel: "toggle file list", disabled: this.disabled, class: {
                 'sd-file-picker__caret': true,
                 'sd-file-picker__caret--open': this.isListboxOpen,
-            }, onClick: this.handleListboxToggle })), !this.disabled && hasFiles && (h("sd-ghost-button", { key: '6f65042ce5e4efa1b6ab126653d434ca77cdd790', icon: "close", size: "xxs", ariaLabel: "clear", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: 'b41146f39c384a5954dca22f2d3da767a63ef0c0', class: "sd-file-picker__tooltip" }, displayText))));
-        return (h("div", { key: '858fea100a9317ac6806ae40699e9f5608394e10', class: {
+            }, onClick: this.handleListboxToggle })), !this.disabled && hasFiles && (h("sd-ghost-button", { key: '1b73bb7ef8c9a8e4367a7d1983a75a85f96c35fa', icon: "close", size: "xxs", ariaLabel: "clear", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: 'a1f532e4a680592d8cff62926405846f7ae386e0', class: "sd-file-picker__tooltip" }, displayText))));
+        return (h("div", { key: '1f235bfb586260961d00b4058009bbdd4a4eb8e7', class: {
                 'sd-file-picker__wrapper': true,
                 'sd-file-picker--inline': this.inline,
                 'sd-file-picker--inline-disabled': this.inline && this.disabled,
-            }, style: cssVars }, h("sd-field", { key: '1b7a6a57e4e46c253bd9f77c500dabf92edc2ae0', borderless: this.inline, size: this.size, name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content), this.useMultipleListBox ? this.renderListbox() : this.renderChipList()));
+            }, style: cssVars }, h("sd-field", { key: '7354bb733c65d30947fc35f6e67083eb255c07f9', borderless: this.inline, size: this.size, name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content), this.useMultipleListBox ? this.renderListbox() : this.renderChipList()));
     }
     static get is() { return "sd-file-picker"; }
     static get originalStyleUrls() {

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

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

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

@@ -152,12 +152,12 @@ export class SdInput {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (h("sd-field", { key: '66c7d6a9292bf8129fea6a33d2288733c264a39f', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: 'b429ae6e521440eb917b17b10525ff3d3767a50d', class: "sd-input__content" }, h("slot", { key: 'dc1cd825ff1bea6484eada71d5aff621f82522c2', name: "prefix" }), h("input", { key: '93bd923644ac7660c2c9be28e4c64d39d93365c3', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: 'ec2f67a7ae01ebbaaa1f48f1e231f6fe2cfb413c', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: 'de33f6902ab5560e151ef13e01ef84eea14da17d', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: '3ae7b521de6759b8def5ff40f439628f18c7a91c', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: '2a36f4af08b6fd5263491aeae7ada7a3038dbe8c', class: "sd-input__content" }, h("slot", { key: 'c13be01f5aedba1076401aa3ba41a8503d9f14ce', name: "prefix" }), h("input", { key: '7cd2bfd289b9f0e87e6de45772c3fdb9d74d1c21', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '036abcab351dd45705e1a4abf87cf6b6181171ac', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: 'a6ad01e9586019b30189cd8facf45eef4ddb80f5', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
                 if (this.disabled || this.readonly)
                     return;
                 this.internalValue = '';
                 await this.formField?.sdValidate();
-            } })), this.type === 'password' && (h("sd-ghost-button", { key: 'db07c28cede67dbec93454b5ea90e94f72c5f313', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
+            } })), this.type === 'password' && (h("sd-ghost-button", { key: 'abd32a3b71cda45e67b62d57c10c3fa59840ad75', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
                 if (this.disabled || this.readonly)
                     return;
                 this.passwordVisible = !this.passwordVisible;

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

@@ -31,7 +31,7 @@ export class SdLinearProgress {
             clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
         };
         const valueText = `${Math.round(this.clampedValue)}%`;
-        return (h(Host, { key: 'bb8b4b933b609a42d1c342b7b480d32a48527321', style: hostStyle }, h("div", { key: 'd127baf4c4cf49d5c6e04ada72636c9d3fd81733', class: "sd-linear-progress__track" }, h("div", { key: '6251da38b070cf9f064b22ed1ecb694da41f63ec', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (h("span", { key: '7b15d0383e4cc391a22e4fc7e2a85bc6cd076f80', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (h("span", { key: '8755f23a83aede79a141a14b73337eacca0fc10d', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && h("span", { key: 'c874dd1ca0cb86c90a84c318790639c0f4283255', class: "sd-linear-progress__label" }, this.label)));
+        return (h(Host, { key: 'ebed80a75ed922c7a51fac5ee6e76a708476c2a5', style: hostStyle }, h("div", { key: '31867c35250dbb0131071d96af50eee5fc6c286d', class: "sd-linear-progress__track" }, h("div", { key: '379bcb00908b9c47ecb6661a0e0351deb3f5f0d8', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (h("span", { key: 'badb47b8d0ae486988b1f3ac40960dbb7c68ef80', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (h("span", { key: '0a884b1e3cdf262b7b22a2f7c2593bd4b2028d0a', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && h("span", { key: 'fd4fce63d80521cfa1b5a0c64d610dd4a7d7f701', class: "sd-linear-progress__label" }, this.label)));
     }
     static get is() { return "sd-linear-progress"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-loading-container/sd-loading-container.js

@@ -32,10 +32,10 @@ export class SdLoadingContainer {
         this.prevBodyOverflow = null;
     }
     render() {
-        return (h("div", { key: 'c7821d4c50651217e48f424cbdfb9a32006afda4', class: {
+        return (h("div", { key: '2b2f22bf65020005652698c748c6f809e966c6c5', class: {
                 'sd-loading-container': true,
                 'sd-loading-container--visible': this.visible,
-            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: 'f7674699f3dd15edd74fc3224203b59ad2a96735', class: "sd-loading-container__backdrop" }), h("div", { key: 'cd361e1a1f470109298459cc2872be104e382015', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: 'c856a1e9ab203040dd8bf0d01dbdf151718aaa3e', indeterminate: true, type: "inverse" }), this.message && h("p", { key: '8af15dba086fb024b652db5f776d384f00fd9cf7', class: "sd-loading-container__message" }, this.message))));
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: 'c2eb1da1c4e702ad318a79f952c0afaeca61cbb8', class: "sd-loading-container__backdrop" }), h("div", { key: '6f9640f155cd62cd49428999f4d13edead099108', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: 'ff891f62d4534b0ce6367bc5a2972eda5fe41792', indeterminate: true, type: "inverse" }), this.message && h("p", { key: 'f353e27e3d8d087f60ca6c34c80e6f488f1f5ec6', class: "sd-loading-container__message" }, this.message))));
     }
     static get is() { return "sd-loading-container"; }
     static get originalStyleUrls() {

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

@@ -60,7 +60,7 @@ export class SdLoadingModal {
             '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
             '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
         };
-        return (h(Host, { key: 'c6b6406cc751cfc007f6fbff72580a22b2975c03', style: hostStyle }, h("div", { key: '139b7397598768e526275dc8b508a333ba1e6058', class: "sd-loading-modal" }, this.resolvedState === 'error' && (h("sd-ghost-button", { key: '098c693d5da0c333fb06309be5371a5e8a6c3016', class: "sd-loading-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: 'f072a17c4c8e47e296cbf52d34414a32efa6aaa1', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (this.progress !== undefined ? (h("sd-circle-progress", { value: this.progress })) : (h("sd-circle-progress", { indeterminate: true }))) : (h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), h("div", { key: 'a2c501cfee2181b2a7dda2544e03bf1a709baaf3', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (h("p", { class: "sd-loading-modal__message" }, message)))) : (h("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.showButton && (h("div", { key: 'e9d1beef80bf8fa4a0647802ce4a6e023e74bc12', class: "sd-loading-modal__button" }, h("sd-button", { key: '63a64f356fc09cbaf56ff715d04c97b208f63945', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
+        return (h(Host, { key: '3345eafdbadbeafbded749980fc430a562641186', style: hostStyle }, h("div", { key: 'f2e176fef188efddf8da7c1eb7ec1b81c297103a', class: "sd-loading-modal" }, this.resolvedState === 'error' && (h("sd-ghost-button", { key: '10467944830b01596eaf0d2b71bed674965a4c49', class: "sd-loading-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: '93f086d4e84705eebd44ad08eaca0a99f9d604a0', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (this.progress !== undefined ? (h("sd-circle-progress", { value: this.progress })) : (h("sd-circle-progress", { indeterminate: true }))) : (h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), h("div", { key: 'c18752743b70f933746d8057c78c126b2f02520e', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (h("p", { class: "sd-loading-modal__message" }, message)))) : (h("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.showButton && (h("div", { key: '260f9247f8a7e66ea16ddf7866b560f15c824be8', class: "sd-loading-modal__button" }, h("sd-button", { key: 'ab5ca5a2bc6adb63b15f7a8cc22fa9c091f627bd', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
     }
     static get is() { return "sd-loading-modal"; }
     static get originalStyleUrls() {

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

@@ -346,15 +346,15 @@ export class SdNumberInput {
             '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
             '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
         };
-        return (h("sd-field", { key: 'ffa6befb9565a33e762fce231c29d7a2f663eb08', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '2fb1686b071fd69c65fc0c908807c029edc3b253', class: {
+        return (h("sd-field", { key: '4a54c567270f657086819fc6e3856d84c60315d5', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: 'ce88be1aa4f4b684e3a4036495b39a3b0fc88289', class: {
                 'sd-number-input__content': true,
                 'sd-number-input__content--no-stepper': !this.useButton,
-            } }, this.useButton && (h("button", { key: '6b2464867bb0224f4fbcb50ea4e4bfc5386474ba', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'f65e9144ad93f4ba8d293b5af1bf9fd1286e7520', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+            } }, this.useButton && (h("button", { key: 'fb7b50a15c6925fb39ab0ccc0b6df2ad14d07aa6', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '6e53dc6237c049c0a766f5c141abe872abc17e32', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && h("span", { key: '3d89b3557f961f36b429e3cf4ae247098a412b30', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: 'c5c503b634aee3b0c8d81f855b5de1d0abe35eac', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${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, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
+                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && h("span", { key: 'c378b1efe0df186b2a6137fd7738467b53892d12', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: 'f264c7af10764a0d4b49bd5696b5f84985b9df2d', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${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, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
                 textAlign: this.useButton ? 'center' : 'right',
                 ...this.inputStyle,
-            } }), this.inputSuffix && h("span", { key: '15177064a4daab2ede3af4f8758912da266f1c29', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: 'dcc1fbfe7c4e7eaa6db95fe7dc9a34f4b82ade8b', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '58eee48f37c0e942a3734a9275a9d459bc9bc420', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && h("span", { key: '100aeecc5de810c6f67679bf214ec9d612decf26', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: '2fa415cdfa3e0b2bb8f4bdd992ff69457d496913', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: 'ec2e9109753f67d28d3b819e4902d4c00ce7e4e6', name: "add", size: iconSize, color: this.isIncrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
                 : NUMBER_INPUT_STEPPER.icon.default }))))));
     }

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

@@ -88,13 +88,13 @@ export class SdPagination {
             '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
             '--sd-pagination-item-width': `${this.buttonWidth}px`,
         };
-        return (h("div", { key: '0b5a2e9aec83e6f6a8de3426e57b3f9a53623652', class: {
+        return (h("div", { key: '9ed057ae1af69f0703c7191f5f3367806d2a3081', class: {
                 'sd-pagination': true,
                 'sd-pagination--simple': this.simple,
-            }, style: cssVars }, h("div", { key: 'aa53d0366ae4678950ecd3917fd0d7011dd9608d', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "sd-pagination__info" }, h("span", { class: "sd-pagination__current" }, this.currentPage), h("span", { class: "sd-pagination__divider" }, "/"), h("span", { class: "sd-pagination__last" }, this.lastPage))) : (h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+            }, style: cssVars }, h("div", { key: '7808a3b793aeb0dafc3fb04b6b16ea0fc0a0beb9', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "sd-pagination__info" }, h("span", { class: "sd-pagination__current" }, this.currentPage), h("span", { class: "sd-pagination__divider" }, "/"), h("span", { class: "sd-pagination__last" }, this.lastPage))) : (h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (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))))), h("div", { key: '1aa72933c849af4fc886cc4e5f8962710c6c40bf', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: 'be54a6060c5811bd8b3853fb6b1f6f1b124a5856', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
     }
     static get is() { return "sd-pagination"; }
     static get originalStyleUrls() {

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

@@ -82,10 +82,10 @@ export class SdPopover {
         const typeConfig = POPOVER_TYPE_CONFIG[this.type ?? 'default'] ?? POPOVER_TYPE_CONFIG.default;
         const menuClassName = this.menuClassName ?? '';
         const hasLeftLink = this.leftLinkLabel !== undefined && this.leftLinkLabel !== '';
-        return (h(Fragment, { key: '16cc231907c02de80749163ce4b639303e969f4a' }, this.triggerHTML !== '' ? (
+        return (h(Fragment, { key: 'f0849060d410a5ef747e7da4f0287456a465fc06' }, this.triggerHTML !== '' ? (
         // 사용자가 넘긴 slot="trigger" 콘텐츠를 감싸 클릭을 전달하는 래퍼(키보드 상호작용은 내부 트리거가 담당)
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
-        h("span", { ref: el => (this.triggerEl = el), class: "sd-popover", "aria-label": this.ariaLabel || undefined, innerHTML: this.triggerHTML, onClick: () => this.setOpen(!this.isOpen) })) : (h("sd-icon", { ref: el => (this.triggerEl = el), name: this.icon ?? 'helpOutline', size: this.iconSize ?? 12, color: this.color ?? '#01BB4B', class: "sd-popover", "aria-label": this.ariaLabel || undefined, onClick: () => this.setOpen(!this.isOpen) })), this.isOpen && (h("sd-floating-portal", { key: 'c59ec7fb1b7ea137b95542f7e8f775c6bd837975', parentRef: this.triggerEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, h("div", { key: '97e68e0246997a0a73beb3e984331daa57161e8e', class: {
+        h("span", { ref: el => (this.triggerEl = el), class: "sd-popover", "aria-label": this.ariaLabel || undefined, innerHTML: this.triggerHTML, onClick: () => this.setOpen(!this.isOpen) })) : (h("sd-icon", { ref: el => (this.triggerEl = el), name: this.icon ?? 'helpOutline', size: this.iconSize ?? 12, color: this.color ?? '#01BB4B', class: "sd-popover", "aria-label": this.ariaLabel || undefined, onClick: () => this.setOpen(!this.isOpen) })), this.isOpen && (h("sd-floating-portal", { key: 'ac56aff939de31ac2c0c3d4fdb84795ea2d93794', parentRef: this.triggerEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, h("div", { key: '4a909c45f386c87b47202f366dcf29ec9c65e579', class: {
                 'sd-floating-menu': true,
                 'sd-floating-menu--popover': true,
                 [`sd-floating-menu--${placement}`]: true,
@@ -93,15 +93,15 @@ export class SdPopover {
             }, style: {
                 '--sd-floating-bg': typeConfig.bg,
                 '--sd-floating-content': typeConfig.description,
-            } }, h("i", { key: 'b96d7dc623a1fab61ee84f612c68c9f7bbac7405', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '92c6e5ef1258d6e99f744c75cef7ee3dd26d0367' })), h("div", { key: '9c9f3cfcc8a3d60e5282a5f6f2653e2cce17cf56', class: "sd-floating-menu__content" }, this.menuTitle && (h("div", { key: '044ae6b271fbf0cede0b4983e074d56882d5f50f', class: "sd-floating-menu__title", style: {
+            } }, h("i", { key: '577c0547175d2a9780b06ec5acc111e5f1f86fa2', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: 'c13302edc4af665fcfaaf191efb8e50bc7aaf847' })), h("div", { key: '30ec8cb2c957a99884437cc7e696518ca6865f3f', class: "sd-floating-menu__content" }, this.menuTitle && (h("div", { key: '12ccc7ca3b48d989d48905c83883a67e89571b7c', class: "sd-floating-menu__title", style: {
                 color: typeConfig.title,
                 display: 'flex',
                 alignItems: 'center',
                 gap: `${POPOVER_TITLE_GAP}px`,
-            } }, this.titleIcon && (h("sd-icon", { key: '360cf55b73ee395191836ee13a2d492460059f4a', name: this.titleIcon, size: Number(POPOVER_TITLE_ICON_SIZE), color: typeConfig.title })), h("span", { key: '5cc44d0806971433b42c41e48a48e7ea8cc2c975' }, this.menuTitle))), this.slotContentHTML && (h("div", { key: 'a5343a56938c0d6d5d5fd07fb83b7ccee4e81cf0', class: "sd-floating-menu__messages", innerHTML: this.slotContentHTML })), h("div", { key: '1f6a0f46b2b6b5f08a0d453cae2a868f93015ac7', class: {
+            } }, this.titleIcon && (h("sd-icon", { key: '164a41e2d4c14b715eb4387f1af0a61389faefcc', name: this.titleIcon, size: Number(POPOVER_TITLE_ICON_SIZE), color: typeConfig.title })), h("span", { key: '8128f3c7b098434c4405e63e6dff453f1d03706c' }, this.menuTitle))), this.slotContentHTML && (h("div", { key: '1647bab6f71a8a9cdcf24a5d84119bb49ad94d59', class: "sd-floating-menu__messages", innerHTML: this.slotContentHTML })), h("div", { key: '01e3b60765a680517ddf2331c2e606bcf2b8c1ee', class: {
                 'sd-floating-menu__buttons': true,
                 'sd-floating-menu__buttons--with-link': hasLeftLink,
-            } }, hasLeftLink && (h("sd-text-link", { key: '5ec7502837f7417266810769885e2318c80ad986', class: "sd-floating-menu__left-link", style: { '--sd-text-link-color': typeConfig.subAction }, label: this.leftLinkLabel, onSdClick: () => this.leftLinkClick.emit() })), h("sd-button", { key: '3d9df22cd0b65add5cd18b3750888248dc235408', name: typeConfig.buttonName, label: this.buttonLabel, ariaLabel: this.buttonLabel || 'confirm', onSdClick: () => this.buttonClick.emit() }))), h("sd-ghost-button", { key: '7e1ca491a2539b52ded454aca8afd26a92dc2ef6', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose }))))));
+            } }, hasLeftLink && (h("sd-text-link", { key: 'a23b8c584d949011cbee5aa3f53b54e5b3bc7a40', class: "sd-floating-menu__left-link", style: { '--sd-text-link-color': typeConfig.subAction }, label: this.leftLinkLabel, onSdClick: () => this.leftLinkClick.emit() })), h("sd-button", { key: '7369617d40af365fa8f54b62cbec68e3121c2d23', name: typeConfig.buttonName, label: this.buttonLabel, ariaLabel: this.buttonLabel || 'confirm', onSdClick: () => this.buttonClick.emit() }))), h("sd-ghost-button", { key: 'ef95a47efa7b7ea73b6b56a2fbb13880132773a8', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose }))))));
     }
     static get is() { return "sd-popover"; }
     static get originalStyleUrls() {

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

@@ -40,7 +40,7 @@ export class SdPopup {
             ...DEFAULT_SUBMIT_BUTTON_PROPS,
             ...this.submitButtonProps,
         };
-        return (h("div", { key: '1b8dc171a7b0dea5216aa63425ccc72ae80e3a3e', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: '1ae57ef360ad124a2afac3340258dce481bb7bc7', class: "sd-popup__header" }, h("h2", { key: '3d0cc0df6ba901b4dc9e0917103e57d6279cde31', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: 'a0fee226ac513744243d6f78ddce6125170700da', class: "sd-popup__body" }, h("slot", { key: '55c5f94dff5413810f2c4648c9684e520db7268b' })), this.useFooter && (h("footer", { key: 'f8f0dc3751324ac5976aef55bec974341db036c1', class: "sd-popup__footer" }, h("div", { key: 'ea2f7e63c857d135eeffd7c2a43b171619067161', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: '0d56c0c25e1e10f6900af0f632c7bb339b736032', name: "footer-left" })), h("sd-button", { key: 'd334174cd98be32856a6f3b1b3348ca2ebea3cdd', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
+        return (h("div", { key: 'e899263de5d4302c9a58c8e22ca1366abcd43587', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: '53e061eec94ad45d381fb15e94dff0f690a20223', class: "sd-popup__header" }, h("h2", { key: '39fcc038b4e903fcb4d86ec6e0e70d73873138e9', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: 'df51ca67e7107f8b221500613d97d823cf94bb8a', class: "sd-popup__body" }, h("slot", { key: 'cbeeddd919167af08e67b9d15fe90099b40a7725' })), this.useFooter && (h("footer", { key: '8811d33320a3034b38f11628bced2aa7dc07df80', class: "sd-popup__footer" }, h("div", { key: 'c58051284ec4d304ec49782f1ef05a9e6622888a', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: '4b5bdf0dd89940af008ffc09f527c19afdcb8f84', name: "footer-left" })), h("sd-button", { key: '7257231b31aa62b47af221bc5899ba3960c8c2af', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
     }
     static get is() { return "sd-popup"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-scroll-area/sd-scroll-area.js

@@ -19,12 +19,12 @@ export class SdScrollArea {
             viewportStyle.maxHeight = this.maxHeight;
         if (this.maxWidth !== '')
             viewportStyle.maxWidth = this.maxWidth;
-        return (h(Host, { key: '4b9b22910436388a2017af0bea5d1c55463a5f94' }, h("div", { key: '13d9301c1bd43dad765a6f18bb11482d7ae4788a', class: {
+        return (h(Host, { key: '238d7d1221187a0c679b486e7f2dd61fa902bc94' }, h("div", { key: 'cfe4d56bdc5c8749f84fa42990eab6b872bc9e10', class: {
                 'sd-scroll-area__viewport': true,
                 [`sd-scroll-area__viewport--${this.axis}`]: true,
                 'sd-scroll-area__viewport--bg': this.background,
                 'sd-scroll-area__viewport--bordered': this.bordered,
-            }, style: viewportStyle }, h("slot", { key: '1d28dd8bac0a3b40d8beca9553b061ae21be8342' }))));
+            }, style: viewportStyle }, h("slot", { key: 'be9fbcce4477fd96a485af314f561cbd538faac4' }))));
     }
     static get is() { return "sd-scroll-area"; }
     static get originalStyleUrls() {

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

@@ -78,7 +78,7 @@ export class SdSelectListItem {
         return (
         // 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        h("div", { key: 'e4f8fc195a7231cd3218b91a26c77f51df14e6dc', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
+        h("div", { key: '20492e7ba882ac768bee279fe1506e69186ec958', 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,
@@ -88,7 +88,7 @@ export class SdSelectListItem {
                 '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 && (h("sd-checkbox", { key: 'a9720067837860a8259b1a16b5eab111f02c7ac4', 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 })), isHtmlLabel(this.option.label) ? (h("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.option.label)) })) : (h("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (h("span", { key: '8ece77c44bea9aea99883efe099137bca7d89475', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: '1b413ea873fb41380928bbc1de435242966e8649', 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 })), isHtmlLabel(this.option.label) ? (h("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.option.label)) })) : (h("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (h("span", { key: 'b6b97fcfc49794b61ec27e48680a0168ce895a6b', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
     static get is() { return "sd-select-list-item"; }
     static get originalStyleUrls() {

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

@@ -45,15 +45,15 @@ export class SdSelectListItemSearch {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (h("div", { key: '5e1dc595bd89df5364d9a302dc917abb29fa2c7b', class: {
+        return (h("div", { key: 'e461ae14d90896bf0abfbe357b0d8068c25b439b', class: {
                 'sd-select-list-item-search': true,
                 'sd-select-list-item-search--scrolled': this.isScrolled,
-            } }, h("div", { key: 'd07b293bf685652dcc965071f47c0492776f9d41', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: '065e1df3105048322ababd7237df83d045543fc3', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: '973977bfbd98f5430b1b53f1ad59128383481197', ref: el => {
+            } }, h("div", { key: '870b68748e166f56fbf921ab6431e165c397278c', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: '0252b5648c10042ce7b7db6af880f00a0f81f50a', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: '5154a2d317f66d4722dfcd4f9ae8a87a3e9d651f', 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() }), h("button", { key: '2a1386ef266f7398f97ff99adc89ee3cec4a594e', 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() }), h("button", { key: 'a6d7e8ee24139325d66ff0e987d6b1140ea88ea7', 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' }, h("sd-icon", { key: '1060c9fe4e3e6ce239800f04b382df9ce83e9d16', name: "close", size: 12, color: "#888888" })))));
+            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, h("sd-icon", { key: '03a33242101dbe710cb3c3327b6f2c695d76baab', name: "close", size: 12, color: "#888888" })))));
     }
     static get is() { return "sd-select-list-item-search"; }
     static get originalStyleUrls() {

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

@@ -361,9 +361,9 @@ export class SdSelectListbox {
             '--listbox-max-height': this.maxHeight ?? '260px',
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
         };
-        return (h("div", { key: '060d455fa7eb31d50fb13251f352643460cc1232', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: '70543defd307911c3885b9ef3a0726465e9e4471', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '17aed7b1eb402f3b61044814cfad734e2cd4b922', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (h("div", { key: 'c336ef386ead6881694925cc3e1fb1cd99e92037', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: '9b8db37fbd34b71e2206e6919c122fa2666a68f9', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '5e02d3d337dd337c2029c50a7582abd0dbaafd33', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
-            } }, this.showSelectAll && (h("sd-select-list-item", { key: '1f43ef353e470ebb0f70bfed5c495eb7de227c62', 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 ? (h("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (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 && (h("sd-select-list-item", { key: '955b332da48d42a76637827e966568af3b495b39', 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 ? (h("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (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 is() { return "sd-select-listbox"; }
     static get encapsulation() { return "shadow"; }