@sellmate/design-system 1.27.0 → 1.27.1

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BTqAmfdr.js');
+var index = require('./index-DsYLSqCp.js');
 
 const tab = {
 	main: {
@@ -207,7 +207,7 @@ const SdTabs = class {
         };
     }
     render() {
-        return (index.h("div", { key: 'f43d5e2e441e11b57d488f8fe612a4e555006c2e', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index$1) => {
+        return (index.h("div", { key: 'd5df329922f73444775ec827ce8cf3850c369131', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index$1) => {
             const badgeName = this.getBadgeName(tab);
             return (index.h("div", { key: `tab-${index$1}`, role: "tab", tabindex: 0, "aria-selected": tab.value === this.value ? 'true' : 'false', class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab), onKeyDown: e => {
                     if (e.key === 'Enter' || e.key === ' ') {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BTqAmfdr.js');
+var index = require('./index-DsYLSqCp.js');
 var constants = require('./constants-DJRV1upE.js');
 
 const sdTdCss = () => `sd-td *{box-sizing:border-box}sd-td{display:contents}sd-td.align-left{text-align:left}sd-td.align-center{text-align:center}sd-td.align-right{text-align:right}`;
@@ -167,7 +167,7 @@ const SdTd = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '28d45d8cd629c6cdd826834cbae719fd7c851511', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: '0bab0005e4513464ad18698c111a55eb684434e9' })));
+        return (index.h(index.Host, { key: '2fce45ffda30fd75a0c0ef2ff0de5896c409c108', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: '3e2131547d544d01c745017f3375a26df35a9d6e' })));
     }
     static get watchers() { return {
         "field": [{

package/dist/cjs/sd-text-link.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BTqAmfdr.js');
+var index = require('./index-DsYLSqCp.js');
 
 const textLink = {
 	sm: {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BTqAmfdr.js');
+var index = require('./index-DsYLSqCp.js');
 
 const DEFAULT_DURATION = 4000;
 const DEFAULT_MAX_VISIBLE = 3;
@@ -161,9 +161,9 @@ const SdToastContainer = class {
             'top-left': { top: '20px', left: '20px' },
             'top-center': { top: '20px', left: '50%', transform: 'translateX(-50%)' },
             'top-right': { top: '20px', right: '20px' },
-            'bottom-left': { bottom: '20px', left: '20px' },
-            'bottom-center': { bottom: '20px', left: '50%', transform: 'translateX(-50%)' },
-            'bottom-right': { bottom: '20px', right: '20px' },
+            'bottom-left': { bottom: '100px', left: '20px' },
+            'bottom-center': { bottom: '100px', left: '50%', transform: 'translateX(-50%)' },
+            'bottom-right': { bottom: '100px', right: '20px' },
         };
         return { ...base, ...posMap[position] };
     }
@@ -243,7 +243,7 @@ const SdToastContainer = class {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (index.h("div", { key: '1e9af4dd46dd901ba903518c1425ce0bc723e4b4', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (index.h("div", { key: '17526924c57e06a77725f66233f5b5360097fac0', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BTqAmfdr.js');
+var index = require('./index-DsYLSqCp.js');
 
 const toast = {
 	icon: "16",
@@ -93,12 +93,12 @@ const SdToast = class {
         const linkColor = typeConfig.linkColor ?? typeConfig.content;
         const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
         const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
-        return (index.h("div", { key: '3d7a3fe3647010a8a96246ef3cdbfdf1550c0a91', style: {
+        return (index.h("div", { key: '124b32e52e9dfd7a09ac67ffb8032bf2217e9c05', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
                 '--sd-toast-icon': iconColor,
                 '--sd-toast-link': linkColor,
-            } }, index.h("div", { key: 'a863ff763bced7656cedc69f3598b3371fc13059', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '7606930ad68ab81543a719db8abb61055fdaf97d', class: "sd-toast__icon" }, index.h("sd-icon", { key: '9b75fb05ab26ddab43b677482a026b5860613e07', name: this.icon, size: iconSize, color: iconColor }))), index.h("div", { key: '5fb10f690ad560f0be74b5bf6afd288318e22082', class: "sd-toast__content" }, index.h("span", { key: 'c474a5e1f215a19e47a89ba154f6149e0a875f61', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: 'a0dcbba791c123776ccb6de62e169359777b3bd2', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: 'b85f734cbe429207c028602b29bd5f7fa78f7910', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (index.h("sd-ghost-button", { key: '09cb6b946c18c1c079b036799272d7bc7bdb6480', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, index.h("div", { key: '54eddcc1fe8a0eab427a084e589c0f9a2e0412bf', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '0ff05c4e7cb8dda2f2732cd09bfc586cb21020b6', class: "sd-toast__icon" }, index.h("sd-icon", { key: '41e1e259ef605454ee680bbd3228c418f013283e', name: this.icon, size: iconSize, color: iconColor }))), index.h("div", { key: '7db4e1bc0ce80bd1887476ac728a7999cb4fee93', class: "sd-toast__content" }, index.h("span", { key: '88925dfa075a5da813466a74a0f5fa4cb61e3bc9', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '068aaf887a6fe8c18f7db6e513778d862e09bd56', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: 'fb066d2cfaad7668aec48caafc6eb6d6e19ebaee', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (index.h("sd-ghost-button", { key: 'e610479efe5034a222aa98d19232682243214ee0', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
 };
 SdToast.style = sdToastCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BTqAmfdr.js');
+var index = require('./index-DsYLSqCp.js');
 
 const toggle = {
 	height: "28",
@@ -123,7 +123,7 @@ const SdToggle = class {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (index.h("label", { key: 'b25e66cadfeee2714f137504ad49c8bf66622f60', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: '276f7411899bcb14db93a6f2b93cc51b5363e1c9', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (index.h("label", { key: '2b988ca6148da376d9af21538b03764423cb3a0a', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: 'b1bd161b88a627ba296197902d46181925511c70', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/cjs/{tooltipArrow-CiM3irtY.js → tooltipArrow-FLiD3ceS.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BTqAmfdr.js');
+var index = require('./index-DsYLSqCp.js');
 
 const TooltipArrow = (props) => (index.h("svg", { width: "16", height: "12", viewBox: "0 0 16 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, index.h("path", { d: "M8.83205 10.7519C8.43623 11.3457 7.56377 11.3457 7.16795 10.7519L1.04907e-06 -1.39876e-06L16 0L8.83205 10.7519Z", fill: "currentColor" })));
 

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

@@ -54,8 +54,8 @@ export const DROPDOWN_CHEVRON_ICON_SIZE = {
 // 버튼 자체의 min-width (px). split 여부에 따라 chevron 버튼이 추가되므로 별도 값을 지정.
 // TODO: 디자인 토큰으로 관리될 때 대체 예정
 export const DROPDOWN_BUTTON_MIN_WIDTH = {
-    xs: { default: 44, split: 60 },
-    sm: { default: 70, split: 76 },
+    xs: { default: 64, split: 72 },
+    sm: { default: 72, split: 88 },
     md: { default: 100, split: 106 },
 };
 export const DROPDOWN_DISABLED_BACKGROUND = buttonTokens.button.bg.disabled;

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

@@ -112,6 +112,11 @@ sd-field .sd-field.sd-field--focus:not(.sd-field--readonly) .sd-field__wrapper .
   border: 1px solid var(--sd-system-color-field-border-focus) !important;
   box-shadow: 0px 0px 4px 0px rgba(0, 113, 255, 0.4);
 }
+sd-field .sd-field.sd-field--borderless .sd-field__wrapper .sd-field__control, sd-field .sd-field.sd-field--borderless.sd-field--error .sd-field__wrapper .sd-field__control:not(:hover), sd-field .sd-field.sd-field--borderless.sd-field--pass .sd-field__wrapper .sd-field__control, sd-field .sd-field.sd-field--borderless:not(.sd-field--disabled):not(.sd-field--readonly) .sd-field__wrapper .sd-field__control:hover, sd-field .sd-field.sd-field--borderless.sd-field--focus:not(.sd-field--readonly) .sd-field__wrapper .sd-field__control {
+  border-color: transparent !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
 sd-field .sd-field .sd-field__error-message {
   color: var(--sd-field-error-message-color);
   font-size: var(--sd-field-error-message-font-size);

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

@@ -38,6 +38,11 @@ export class SdField {
     width = '';
     /** 필드 크기 */
     size = 'sm';
+    /**
+     * 테두리 박스 제거 (inline 컨트롤용) — border/배경/hover·focus 강조만 사라지고
+     * label·hint·errorMessage 등 나머지 필드 구성은 그대로 동작한다.
+     */
+    borderless = false;
     // props - label
     /** 레이블 텍스트 */
     label = '';
@@ -205,18 +210,19 @@ export class SdField {
                     : {}),
             }
             : {};
-        return (h("div", { key: '7673ab0d94a03bcfa42381c961e749cd083d7af0', class: {
+        return (h("div", { key: 'bce0bc8ccc19e41c2a61980bd12f07d7f8838569', class: {
                 'sd-field': true,
                 'sd-field--has-label': this.label !== '',
                 'sd-field--has-addon': addon !== '',
+                'sd-field--borderless': this.borderless,
                 [this.fieldStatus]: this.fieldStatus !== '',
-            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, h("div", { key: '00c5056105b72f143a8c4249b8cd3b6a60fb6d1d', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'e99461246fa8ceadaf7a43f1c62c474caa160972', class: "sd-field__main" }, h("div", { key: '6bf754d3a167b1ca4f23d2e1d260643e278e85f6', class: {
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, h("div", { key: 'c6c4e3ec6e018ebd0dc6fbbae5fbaef4ea6503e5', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'bd778a24325412924e0a331db592535e4b4e542b', class: "sd-field__main" }, h("div", { key: '485cfbdbfa7299cb27d84e61306d6e2cf196d071', 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: '2d9acde5ecaeb32a94e1ba33c408160a2f2da46f', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: 'a0916124710c29478feffef96efdaffe599d4bc7', 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: '2e4690a4678ca40deb9e023baae24a44fd4da959' })), 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: '510238ac22b7e923724cc20abf2541adbddcb594', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: '2cca5b62cbe56050acd536764c33cbc3009f740b', 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: '470c0d559409a11f1c5650e88a50555a4656d3f9' })), 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 === '')
@@ -488,6 +494,26 @@ export class SdField {
                 "attribute": "size",
                 "defaultValue": "'sm'"
             },
+            "borderless": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uD14C\uB450\uB9AC \uBC15\uC2A4 \uC81C\uAC70 (inline \uCEE8\uD2B8\uB864\uC6A9) \u2014 border/\uBC30\uACBD/hover\u00B7focus \uAC15\uC870\uB9CC \uC0AC\uB77C\uC9C0\uACE0\nlabel\u00B7hint\u00B7errorMessage \uB4F1 \uB098\uBA38\uC9C0 \uD544\uB4DC \uAD6C\uC131\uC740 \uADF8\uB300\uB85C \uB3D9\uC791\uD55C\uB2E4."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "borderless",
+                "defaultValue": "false"
+            },
             "label": {
                 "type": "string",
                 "mutable": false,

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

@@ -12,7 +12,7 @@ sd-file-picker {
 
 .sd-file-picker__chip-list {
   display: flex;
-  flex-direction: column;
+  flex-flow: row wrap;
   gap: 8px;
   margin-top: 8px;
 }
@@ -90,15 +90,12 @@ sd-file-picker {
 }
 
 .sd-file-picker--inline .sd-file-picker__content {
-  border: none;
-  background-color: transparent;
   padding: 0;
-  height: auto;
 }
 .sd-file-picker--inline .sd-file-picker__text {
   color: var(--sd-file-picker-placeholder-color);
 }
-.sd-file-picker--inline:hover:not(.sd-file-picker--inline-disabled) .sd-file-picker__text {
+.sd-file-picker--inline:not(.sd-file-picker--inline-disabled) .sd-file-picker__content:hover .sd-file-picker__text {
   color: var(--sd-file-picker-text-color);
 }
 .sd-file-picker--inline .sd-file-picker__text--active {

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

@@ -9,7 +9,7 @@ export class SdFilePicker {
     placeholder = 'Click to upload';
     /** 비활성 상태 여부 */
     disabled = false;
-    /** sd-field 없이 인라인으로 표시하는 모드 여부 */
+    /** 인라인 표시 — sd-field 테두리 박스만 사라지고 label/rules/hint 는 그대로 동작 */
     inline = false;
     /** 다중 파일 선택 여부 */
     multiple = false;
@@ -170,14 +170,10 @@ export class SdFilePicker {
         this.fileInputRef?.click();
     };
     hasFiles() {
-        if (this.multiple)
-            return false;
-        if (!this.internalValue)
-            return false;
         if (Array.isArray(this.internalValue)) {
             return this.internalValue.length > 0;
         }
-        return true;
+        return !!this.internalValue;
     }
     hasChips() {
         return Array.isArray(this.internalValue) && this.internalValue.length > 0;
@@ -185,6 +181,9 @@ export class SdFilePicker {
     getDisplayText() {
         if (!this.hasFiles())
             return this.placeholder ?? 'Click to upload';
+        if (this.multiple && Array.isArray(this.internalValue)) {
+            return this.internalValue.map(f => f.name).join(', ');
+        }
         return this.internalValue?.name || (this.placeholder ?? 'Click to upload');
     }
     handleChipRemove = (index) => {
@@ -226,23 +225,21 @@ export class SdFilePicker {
             '--sd-system-size-field-sm-height': `${FILE_PICKER_LAYOUT.height}px`,
             '--sd-system-radius-field-sm': `${FILE_PICKER_LAYOUT.radius}px`,
         };
-        const content = (h("div", { role: "button", tabindex: this.disabled ? -1 : 0, class: "sd-file-picker__content", onClick: this.handleClick, onKeyDown: e => {
+        const content = (h("div", { key: 'f686c8d06b3dbecc037e21f41e7f307d08349e8b', role: "button", tabindex: this.disabled ? -1 : 0, class: "sd-file-picker__content", onClick: this.handleClick, onKeyDown: e => {
                 if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, h("input", { 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", { name: "attachFile", size: Number(FILE_PICKER_LAYOUT.iconSize), color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { ref: el => (this.fileNamesRef = el), class: {
+            } }, h("input", { key: 'a519e5a7c253d9d9bba21401b2f83092aa8a3a91', 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: 'b9e7548365f1d54957b6e575d3532a833e301a98', name: "attachFile", size: Number(FILE_PICKER_LAYOUT.iconSize), color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: 'cb28d1c3abf0e9c30454f01bb8c81cb0ea4477af', 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-ghost-button", { 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", { class: "sd-file-picker__tooltip" }, displayText))));
-        if (this.inline) {
-            return (h("div", { class: {
-                    'sd-file-picker--inline': true,
-                    'sd-file-picker--inline-disabled': this.disabled,
-                }, style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content, this.renderChipList()));
-        }
-        return (h("div", { class: "sd-file-picker__wrapper", style: cssVars }, h("sd-field", { name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content), this.renderChipList()));
+            } }, displayText), !this.disabled && hasFiles && (h("sd-ghost-button", { key: 'c97d7c306ef2087a9874a16b6e485a94c7cc571f', 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: '293a4c75766be383a4ad6f79052111c09608e0e2', class: "sd-file-picker__tooltip" }, displayText))));
+        return (h("div", { key: '4e25add1b74a232e8786efca26f87ccb5d48f19d', 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: 'fda8f53237f5efb4f1dec906d87851dd10c03593', borderless: this.inline, name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content), this.renderChipList()));
     }
     static get is() { return "sd-file-picker"; }
     static get originalStyleUrls() {
@@ -332,7 +329,7 @@ export class SdFilePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "sd-field \uC5C6\uC774 \uC778\uB77C\uC778\uC73C\uB85C \uD45C\uC2DC\uD558\uB294 \uBAA8\uB4DC \uC5EC\uBD80"
+                    "text": "\uC778\uB77C\uC778 \uD45C\uC2DC \u2014 sd-field \uD14C\uB450\uB9AC \uBC15\uC2A4\uB9CC \uC0AC\uB77C\uC9C0\uACE0 label/rules/hint \uB294 \uADF8\uB300\uB85C \uB3D9\uC791"
                 },
                 "getter": false,
                 "setter": false,

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

@@ -9,6 +9,7 @@
   box-sizing: border-box;
   background: var(--sd-floating-bg, #07284A);
   color: var(--sd-floating-content, #FFFFFF);
+  box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);
   animation: sd-floating-fade-in 0.35s ease-out;
 }
 .sd-floating-menu--top {

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

@@ -173,7 +173,7 @@ export class SdFloatingPopover {
         }
     }
     render() {
-        return h("slot", { key: '56deedcae378d170d9debca4cf1a07599f31dfc5' });
+        return h("slot", { key: '487d3c23320bd5f44492e3fb84e3cb357605de39' });
     }
     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: 'b29a9d582bd8993bd5c31c70bab02ff553f2e167', 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: '1a6ad118628ab8cb9282953c618ca61898cf241a', class: "sd-input__content" }, h("slot", { key: '4de06d36b71ce2cad70a735e7620c2d320973962', name: "prefix" }), h("input", { key: '11c448201927a769c56fd1500ba8dd164d1b695a', 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: '4ac88a21df8e2feaa67a68cab9fca4e24985d17d', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: '0985e2ed631ee746793563a22d766545a34d1562', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: '972d5e17746dc16d4e20b18bd278410fe9c13878', 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: '31e5f2aa7a2f0acaa0bfda8b9bfb94e2d6a98ebe', class: "sd-input__content" }, h("slot", { key: '8230767a7311121fca1d3a1d64be5a04fc3c38aa', name: "prefix" }), h("input", { key: '2961c50e416a08988d3d80022883eab696de2c7c', 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: '6862a98c1254979e0700cd8b18b61517a4c7386a', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: '9aa967f89fa448df98079ba1b16fe4ea4ef81c0e', 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: '16300e673a9c93209c403ec788217ba301c1d2e6', 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: '2dd03b4920f2e84932c6e8ddb8bbdea2070b070f', 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: '2c2024fc61418c73913dc0333ddef93e667fa6f0', style: hostStyle }, h("div", { key: '44fac7a5a5795451ab8fc7c5538161cb974c3b4f', class: "sd-linear-progress__track" }, h("div", { key: '050f19c7c2ae6f14f744a1a33f933b97d9d5d448', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (h("span", { key: '70233788c6f8b5d89ec1123e40cc97c89a9d20c4', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (h("span", { key: 'f2df0a4d96ca1224b902a360f4f1ef4856405ed6', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && h("span", { key: '00d72060f073ad6e046d7c68f248df6622f87088', class: "sd-linear-progress__label" }, this.label)));
+        return (h(Host, { key: '8d19b1c846b14994eceb6381802b19fa92a241cb', style: hostStyle }, h("div", { key: '23d3e839b1e64a81ae86e994bf77a0e9bf53e870', class: "sd-linear-progress__track" }, h("div", { key: '92ea4d28c312e639ec038002beeea60ab39e42bb', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (h("span", { key: 'd65a8726f14302260d0fad1b3a16ba7e8588530f', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (h("span", { key: '522efd6e3b6f6bbfcb8044113d2e2ae37da84dd6', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && h("span", { key: '2933b26dc95c1962dc19829f9bf1d8e62d71b0c4', 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

@@ -2,20 +2,40 @@ import { h } from "@stencil/core";
 export class SdLoadingContainer {
     visible = false;
     message = '';
+    prevBodyOverflow = null;
     /** 로딩 오버레이를 표시합니다. */
     async show(options = {}) {
         this.message = options.message ?? '';
         this.visible = true;
+        this.lockScroll();
     }
     /** 로딩 오버레이를 숨깁니다. */
     async hide() {
         this.visible = false;
+        this.unlockScroll();
+    }
+    disconnectedCallback() {
+        this.unlockScroll();
+    }
+    /** 오버레이 표시 중 배경 스크롤을 차단합니다. */
+    lockScroll() {
+        if (this.prevBodyOverflow !== null)
+            return;
+        this.prevBodyOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+    }
+    /** 배경 스크롤 차단을 해제합니다. */
+    unlockScroll() {
+        if (this.prevBodyOverflow === null)
+            return;
+        document.body.style.overflow = this.prevBodyOverflow;
+        this.prevBodyOverflow = null;
     }
     render() {
-        return (h("div", { key: 'be8150fa2321621b2761f886fe96dc4a9177de64', class: {
+        return (h("div", { key: '7abf314b6518ab7e6ba0ef60236a8ca6846b0cf4', class: {
                 'sd-loading-container': true,
                 'sd-loading-container--visible': this.visible,
-            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: '268f97c036ab8a15c465469ee467aa6a962e9bf0', class: "sd-loading-container__backdrop" }), h("div", { key: 'e7f8fcbffdfe462890706e896a476de7f734166e', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: '60e52996e7ba895a0375f344431e721c8bd34753', indeterminate: true, type: "inverse" }), this.message && h("p", { key: 'c7cbf5b183a22a3b9f693bb427057d3fa9611724', class: "sd-loading-container__message" }, this.message))));
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: '5c049ffd686654fb4c63bba829bcbe4968285a74', class: "sd-loading-container__backdrop" }), h("div", { key: '21c50b87eac65eedfe2ae475eda2c04a9b2f781d', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: '1dd29e83461be200d3d23037fc8965dbba675e77', indeterminate: true, type: "inverse" }), this.message && h("p", { key: 'deb08b4813d784cf47f43648e8187b22b143dfd5', 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.config.js

@@ -21,7 +21,7 @@ export const LOADING_MODAL_TYPOGRAPHY = {
     lineHeight: Number(modalTokens.modal.loading.message.typography.lineHeight),
 };
 export const LOADING_MODAL_DEFAULT_MESSAGE = {
-    loading: '작업을 진행하고 있습니다. 잠시만 기다려 주세요.',
+    loading: '작업 진행중...',
     error: '작업에 실패하였습니다. 다시 시도해 주세요.',
 };
 export const LOADING_MODAL_DEFAULT_BUTTON_LABEL = {

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

@@ -26,6 +26,10 @@ export class SdLoadingModal {
     get resolvedButtonLabel() {
         return this.buttonLabel || LOADING_MODAL_DEFAULT_BUTTON_LABEL[this.resolvedState];
     }
+    /** error 상태에서는 버튼이 필수로 표시됩니다. */
+    get showButton() {
+        return this.useButton || this.resolvedState === 'error';
+    }
     handleClick = () => {
         this.click.emit();
     };
@@ -54,7 +58,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: '9656d6f5adb9fdad989f9f5ecae7917c3bac76db', style: hostStyle }, h("div", { key: '15ed3e3d53785d66d1bdbbfe7391ba63572aff3b', class: "sd-loading-modal" }, h("div", { key: '27a949450dd9bd2e68320a3bf6d3ce1c671a3f37', 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: '258def7abc8017fea2d22ca19fc2c4f82943c5b2', 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.useButton && (h("div", { key: '6bce1bdc0661f468f4e58935bb38d1a0bb76b9ad', class: "sd-loading-modal__button" }, h("sd-button", { key: 'b7e37e71fff646701fe9afc0df925709bac14835', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
+        return (h(Host, { key: '01bd677e5ef79c7fba151be5d4fb28f4de53c063', style: hostStyle }, h("div", { key: 'f1062845695886535ee1d96613db83e1a8da4b88', class: "sd-loading-modal" }, h("div", { key: 'c1ca61a82f105e5582719375506634a2ee5a538f', 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: '60039cb0c90b9450355c6545a82301797c0b65bc', 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: '0f00c197e0f320ffb2a8bebe4418307639d5ee09', class: "sd-loading-modal__button" }, h("sd-button", { key: '6d8f96e681843afe1590f9a9fcc18c4668f64d22', 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

@@ -314,15 +314,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: '581504f245674e1644f672aa77dd22f710a3c766', 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: 'f17872e37d0b0369061deb508d44ce7ae4943c5b', class: {
+        return (h("sd-field", { key: '391ac51b1c7844a81664907af4e7c063d6c4c5e4', 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: '7bdc01654f679228c9893d4438daa0a8324b1e56', class: {
                 'sd-number-input__content': true,
                 'sd-number-input__content--no-stepper': !this.useButton,
-            } }, this.useButton && (h("button", { key: 'b513ee5c44e2475ab751dae3a333e95405c9a319', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '172dcff1a3559008183bed32c30ec02d98c12664', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+            } }, this.useButton && (h("button", { key: '57819a2fbc917ebf6fdf640e4226443cf6d138b1', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '05c900ee4b9ccb0f2b8bf5a555f5586fe91c3c53', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && h("span", { key: '24d631ea8330ed6e90f2aa77e46707867ff57539', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: 'ed0c70a534f1f6e246a407073aee9efa3a222b01', 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: 'e406fa40696f58e4a8ad4f2be2a33ecfc2f4ff3a', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: '3df235c03deac87a615d295d65473a487155f07c', 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: '7129df3b5cf544301cadaf5111e98ddcf3e7a340', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: 'd5cb9acd77be94e494fb4af3b78001cd22dbfe3c', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: 'dba88711bda7f5522425d96187bce402c8516fff', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && h("span", { key: 'b23bd9594ca53147d628d97b8a99512d0ecc6c82', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: 'c4757ac52cccab448a91458ca66e7de29b5d4b5d', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '45eadd745300df1f9bec18d7a9d6367f25ee53b7', 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.config.js

@@ -5,6 +5,7 @@ export const PAGINATION_LAYOUT = {
     radius: `${paginationTokens.pagination.radius}px`,
     gap: `${paginationTokens.pagination.gap}px`,
     moveGap: `${paginationTokens.pagination.move.gap}px`,
+    simpleGap: `${paginationTokens.pagination.simple.gap}px`,
     iconSize: Number(paginationTokens.pagination.icon),
 };
 export const PAGINATION_TYPOGRAPHY = {

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

@@ -75,7 +75,7 @@ sd-pagination {
 .sd-pagination__info {
   display: inline-flex;
   align-items: center;
-  gap: var(--sd-pagination-move-gap);
+  gap: var(--sd-pagination-simple-gap);
   height: var(--sd-pagination-height);
   padding: 0 var(--sd-pagination-padding-x);
   color: var(--sd-pagination-content);

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

@@ -75,6 +75,7 @@ export class SdPagination {
             '--sd-pagination-radius': PAGINATION_LAYOUT.radius,
             '--sd-pagination-gap': PAGINATION_LAYOUT.gap,
             '--sd-pagination-move-gap': PAGINATION_LAYOUT.moveGap,
+            '--sd-pagination-simple-gap': PAGINATION_LAYOUT.simpleGap,
             '--sd-pagination-font-family': PAGINATION_TYPOGRAPHY.fontFamily,
             '--sd-pagination-font-size': PAGINATION_TYPOGRAPHY.fontSize,
             '--sd-pagination-line-height': PAGINATION_TYPOGRAPHY.lineHeight,
@@ -87,13 +88,13 @@ export class SdPagination {
             '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
             '--sd-pagination-item-width': `${this.buttonWidth}px`,
         };
-        return (h("div", { key: '1ab90aa479a2ec1985a79efbcb48f0453ce670a9', class: {
+        return (h("div", { key: '2e5fdcc2d6a426be32128960131db2ed51674939', class: {
                 'sd-pagination': true,
                 'sd-pagination--simple': this.simple,
-            }, style: cssVars }, h("div", { key: 'd5e9fdd9f221536f5eb404095b2b6d052aaa6a9e', 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: 'a83ee12c1af9ca41e3a5773fcd840200fcb873e2', 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: 'a48d39b7db769a39f58e4b399aa7bb1d15748934', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: '3c98ea6c1bf5bea43baaa73a2a7db5c4fe1404e5', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
     }
     static get is() { return "sd-pagination"; }
     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: '5593e53ba5d8c098c3a3fea4a4ca20769457e322', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: 'e940d310e28c6b5ec34cc46b1a0aa3c8d7c37aed', class: "sd-popup__header" }, h("h2", { key: '367b21377987bb85ff453d05f314ac2cd76ac6be', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: '58c31c4d783cf957a6e84bc17f63a2ccb188c1e0', class: "sd-popup__body" }, h("slot", { key: '712ccc5b1e2e3ba24757e8a0d258b8af40a1dcc8' })), this.useFooter && (h("footer", { key: 'ff34ebe19afaceb1594726296245ec2a12ce2eec', class: "sd-popup__footer" }, h("div", { key: 'cfefab877abd29701e17ed7381ace27db0198ab6', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: '2947626fed14fba3778ddede7e1c8a868b7aba4a', name: "footer-left" })), h("sd-button", { key: 'ed0b0d43812d5d2ca28993b0f8ff2363684a9016', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
+        return (h("div", { key: 'cc0381250b37b498e93fd7f8d932ad95ff802bcc', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: '07b4378a9c8d292f73e0a6307ec2b6335087cc9f', class: "sd-popup__header" }, h("h2", { key: 'a17318a803d2d825e0a85f43ff436944424bb213', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: 'f2147c40fbd425565f6e61e62e2da2d97eacb27a', class: "sd-popup__body" }, h("slot", { key: '5600679290a775e53e838fd5ea2d9cfc1008130f' })), this.useFooter && (h("footer", { key: '2bfa07724438b8afa03a0654359ab760498ef7dc', class: "sd-popup__footer" }, h("div", { key: 'd70c88b18b23bd8d1b3f6d4899d65b25e378b9aa', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: '42d7108b390bf460398dcbc128a837784ba5c544', name: "footer-left" })), h("sd-button", { key: '0525a19c52caef0dcaf0eb2783391132d53d18db', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
     }
     static get is() { return "sd-popup"; }
     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: 'ffd420e1d1a6ff395ed3fff94cbaba66f71644ac', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
+        h("div", { key: 'dd2c4cbd210ed70c00a954a9c6da6923ea76c91e', 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: '4bc492e2021f255cb87344bd0498023b50d89c8a', 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: '34a7671fa3f6ec1bff7c302f02bb4bfd7a113ce5', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: '18fb5ec3ccd00aa34c974975324bb214aa4d38f8', 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: '70ee48fdece9e38db3bf9450a5d82ad6db4ec985', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
     static get is() { return "sd-select-list-item"; }
     static get originalStyleUrls() {