@sellmate/design-system 1.27.0 → 1.28.0

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BTqAmfdr.js');
+var index = require('./index-D12oddge.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: 'e60aa1379566c4586ea4f7e852425f8829e806d1', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: '9f2260749b392c0c72ad2a53b515f0b886e62c3a', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggle.style = sdToggleCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BTqAmfdr.js');
+var index = require('./index-D12oddge.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-circle-progress/sd-circle-progress.css

@@ -34,6 +34,18 @@ sd-circle-progress .sd-circle-progress__label {
   font-weight: 400;
   line-height: 20px;
 }
+sd-circle-progress {
+  /* innerValue 모드: 퍼센트를 원 가운데에 오버레이 */
+}
+sd-circle-progress[inner-value] {
+  position: relative;
+}
+sd-circle-progress[inner-value] .sd-circle-progress__percent {
+  position: absolute;
+  top: 40px;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 sd-circle-progress {
   /* indeterminate 모드: 회전 + dasharray grow/shrink 애니메이션 */
 }

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

@@ -9,6 +9,8 @@ export class SdCircleProgress {
     type = 'primary';
     /** 원 하단에 표시할 레이블 텍스트 */
     label;
+    /** true면 퍼센트를 원 아래가 아닌 원 가운데에 표시 */
+    innerValue = false;
     get clampedValue() {
         if (!Number.isFinite(this.value))
             return 0;
@@ -31,7 +33,7 @@ export class SdCircleProgress {
         }
         const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
         const showPercent = !this.indeterminate;
-        return (h(Host, { key: '49f42179ae3f58775dda407b2a0fe3ad01baf2b8', style: hostStyle }, h("svg", { key: 'f2bcc5ae953409481b823fc7dd754f1e68bc47d8', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '1dbbe8d19a29cd271c8fa483497ca085ee10831f', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: '86e6514b2986e5574a78e15e0e3299d8cde858cc', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (h("span", { key: '38d0dfc1f810acbe086852b24d83af2d4f707f2a', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: 'b10ae78d8b3894b89f0096bea66773006bf526e9', class: "sd-circle-progress__label" }, this.label)));
+        return (h(Host, { key: '869ec15d8df4b3e240b70599d8ba72618cda4c87', style: hostStyle }, h("svg", { key: '446fa350f3c7e225e455f5f6c12b4aab45d20287', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: 'c3555674067f60ab1a1458d789d62fc9bbc8015f', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: '62716c5645d957be08ea0e0818e47edda2c9e471', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (h("span", { key: 'b56d75c0c40cb82d4c4c87161913b28063a9d369', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: '65cfb5cd0426c7cbf5ee7aefeaf675471abccaaf', class: "sd-circle-progress__label" }, this.label)));
     }
     static get is() { return "sd-circle-progress"; }
     static get originalStyleUrls() {
@@ -131,6 +133,26 @@ export class SdCircleProgress {
                 "setter": false,
                 "reflect": false,
                 "attribute": "label"
+            },
+            "innerValue": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "true\uBA74 \uD37C\uC13C\uD2B8\uB97C \uC6D0 \uC544\uB798\uAC00 \uC544\uB2CC \uC6D0 \uAC00\uC6B4\uB370\uC5D0 \uD45C\uC2DC"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "inner-value",
+                "defaultValue": "false"
             }
         };
     }

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.config.js

@@ -1,5 +1,6 @@
 import filePickerTokens from "../../tokens/generated/component.filepicker.json";
 import fieldTokens from "../../tokens/generated/component.field.json";
+import listBoxTokens from "../../tokens/generated/component.listBox.json";
 const fp = filePickerTokens.filepicker;
 export const FILE_PICKER_LAYOUT = {
     height: fp.sm.height,
@@ -22,3 +23,11 @@ export const FILE_PICKER_COLORS = {
         disabled: fp.icon.disabled,
     },
 };
+// useMultipleListBox 모드에서 파일 칩을 담는 floating 리스트박스 카드
+// (sd-select-listbox 와 동일한 배경/radius/그림자 토큰 사용)
+export const FILE_PICKER_LIST_BOX = {
+    radius: listBoxTokens.listBox.radius,
+    bg: listBoxTokens.listBox.bg,
+    chipPadding: listBoxTokens.listBox.chip.paddingXY,
+    chipGap: listBoxTokens.listBox.chip.gap,
+};

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;
 }
@@ -62,6 +62,24 @@ sd-file-picker {
   opacity: 0.7;
 }
 
+.sd-file-picker__caret {
+  flex-shrink: 0;
+  cursor: pointer;
+  transition: transform 0.15s ease;
+}
+.sd-file-picker__caret--open {
+  transform: rotate(180deg);
+}
+
+.sd-file-picker__listbox {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  box-sizing: border-box;
+  max-width: 100%;
+  box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);
+}
+
 .sd-file-picker__input {
   display: none;
 }
@@ -90,15 +108,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

@@ -1,6 +1,6 @@
 import { h, } from "@stencil/core";
 import { nanoid } from "nanoid/non-secure";
-import { FILE_PICKER_LAYOUT, FILE_PICKER_COLORS } from "./sd-file-picker.config";
+import { FILE_PICKER_LAYOUT, FILE_PICKER_COLORS, FILE_PICKER_LIST_BOX, } from "./sd-file-picker.config";
 export class SdFilePicker {
     el;
     /** 선택된 파일 값 */
@@ -9,10 +9,12 @@ export class SdFilePicker {
     placeholder = 'Click to upload';
     /** 비활성 상태 여부 */
     disabled = false;
-    /** sd-field 없이 인라인으로 표시하는 모드 여부 */
+    /** 인라인 표시 — sd-field 테두리 박스만 사라지고 label/rules/hint 는 그대로 동작 */
     inline = false;
     /** 다중 파일 선택 여부 */
     multiple = false;
+    /** multiple 파일 목록을 필드 아래 칩 대신, caret(▼) 클릭 시 열리는 리스트박스 카드로 표시 */
+    useMultipleListBox = false;
     /** 허용할 파일 타입 (input accept 속성과 동일) */
     accept;
     /** 파일 한 개의 최대 크기 (bytes) */
@@ -56,9 +58,13 @@ export class SdFilePicker {
     hovered = false;
     internalValue = null;
     showTooltip = false;
+    isListboxOpen = false;
+    listboxWidth = '';
     fileInputRef;
     fileNamesRef;
+    contentRef;
     formField;
+    static VIEWPORT_PADDING = 20;
     /** 파일 선택 또는 삭제 시 현재 파일 값을 전달합니다. */
     update;
     /** 파일이 크기·개수 제한을 초과하여 거부됐을 때 발생합니다. */
@@ -160,6 +166,7 @@ export class SdFilePicker {
         this.value = clearedValue;
         this.internalValue = clearedValue;
         this.update?.emit(clearedValue);
+        this.isListboxOpen = false;
         if (this.fileInputRef) {
             this.fileInputRef.value = '';
         }
@@ -169,15 +176,28 @@ export class SdFilePicker {
             return;
         this.fileInputRef?.click();
     };
+    /** caret(▼) 클릭 시 파일 목록 리스트박스를 토글한다. */
+    handleListboxToggle = (event) => {
+        event.stopPropagation();
+        if (this.disabled)
+            return;
+        if (this.isListboxOpen) {
+            this.isListboxOpen = false;
+            return;
+        }
+        if (this.contentRef) {
+            this.listboxWidth = `${this.contentRef.offsetWidth}px`;
+        }
+        this.isListboxOpen = true;
+    };
+    closeListbox = () => {
+        this.isListboxOpen = false;
+    };
     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 +205,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) => {
@@ -195,12 +218,28 @@ export class SdFilePicker {
         this.internalValue = newFiles;
         this.value = newFiles;
         this.update?.emit(this.value);
+        // 리스트박스에서 마지막 파일을 지우면 caret 이 사라지므로 함께 닫는다.
+        if (newFiles.length === 0) {
+            this.isListboxOpen = false;
+        }
     };
     renderChipList() {
         if (!this.hasChips())
             return null;
         return (h("div", { class: "sd-file-picker__chip-list" }, this.internalValue.map((file, index) => (h("sd-chip", { value: file.name, onSdRemove: () => this.handleChipRemove(index) })))));
     }
+    renderListbox() {
+        if (!this.hasChips() || !this.isListboxOpen)
+            return null;
+        const listboxStyle = {
+            width: this.listboxWidth,
+            padding: `${FILE_PICKER_LIST_BOX.chipPadding}px`,
+            gap: `${FILE_PICKER_LIST_BOX.chipGap}px`,
+            borderRadius: `${FILE_PICKER_LIST_BOX.radius}px`,
+            background: FILE_PICKER_LIST_BOX.bg,
+        };
+        return (h("sd-portal", { open: this.isListboxOpen, parentRef: this.contentRef, viewportPadding: SdFilePicker.VIEWPORT_PADDING, onSdClose: this.closeListbox }, h("div", { class: "sd-file-picker__listbox", style: listboxStyle }, this.internalValue.map((file, index) => (h("sd-chip", { value: file.name, editable: false, onSdRemove: () => this.handleChipRemove(index) }))))));
+    }
     checkOverflow() {
         if (!this.fileNamesRef)
             return;
@@ -226,23 +265,25 @@ 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 showListbox = this.multiple && this.useMultipleListBox;
+        const content = (h("div", { key: '692bb28ba1adaa90317e18c6b824ab7d2287eb96', 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", { 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: '7a1cddff8097952c0c9eda9ae8d1b46b4a18967e', 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: '2f7dffb5bfc39efb0eace252a45aaaa23091d337', name: "attachFile", size: Number(FILE_PICKER_LAYOUT.iconSize), color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: '1a6ae3daa59c7befebcfcfdcbbb2c46a32c6c40c', 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), showListbox && hasFiles && !this.disabled && (h("sd-ghost-button", { key: '895eafa47b1e1d851794fd471b304f8458bcac0f', 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: '38d3fe31be05ae66a170671ffb4855bce4984630', 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: 'bb94815d7149ce9f1117828f893224c8bc1dbc50', class: "sd-file-picker__tooltip" }, displayText))));
+        return (h("div", { key: '3ada174508214a9fafd4f7f228ff52eb60aa76e4', 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: '29314b3ba5fc7c6b7d2f1a93a14381d9fb91bcfc', 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.useMultipleListBox ? this.renderListbox() : this.renderChipList()));
     }
     static get is() { return "sd-file-picker"; }
     static get originalStyleUrls() {
@@ -332,7 +373,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,
@@ -360,6 +401,26 @@ export class SdFilePicker {
                 "attribute": "multiple",
                 "defaultValue": "false"
             },
+            "useMultipleListBox": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "multiple \uD30C\uC77C \uBAA9\uB85D\uC744 \uD544\uB4DC \uC544\uB798 \uCE69 \uB300\uC2E0, caret(\u25BC) \uD074\uB9AD \uC2DC \uC5F4\uB9AC\uB294 \uB9AC\uC2A4\uD2B8\uBC15\uC2A4 \uCE74\uB4DC\uB85C \uD45C\uC2DC"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "use-multiple-list-box",
+                "defaultValue": "false"
+            },
             "accept": {
                 "type": "string",
                 "mutable": false,
@@ -779,7 +840,9 @@ export class SdFilePicker {
     static get states() {
         return {
             "internalValue": {},
-            "showTooltip": {}
+            "showTooltip": {},
+            "isListboxOpen": {},
+            "listboxWidth": {}
         };
     }
     static get events() {

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

@@ -113,6 +113,7 @@
 }
 .sd-floating-menu--popover {
   padding: 16px 20px;
+  box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);
 }
 .sd-floating-menu--popover .sd-floating-menu__content {
   gap: 4px;

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: '7bdfc66c7baa0a195d1c0438e6bdd0705a7e5ffd' });
     }
     static get is() { return "sd-floating-portal"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-guide/sd-guide.config.js

@@ -29,7 +29,6 @@ export const GUIDE_CONFIG = {
         paddingX: `${contents.paddingX}px`,
         paddingY: `${contents.paddingY}px`,
         gap: `${contents.gap}px`,
-        rowGap: `${contents.row.gap}px`,
         bodyGap: `${contents.body.gap}px`,
         titleGap: `${contents.title.gap}px`,
         radius: `${contents.radius}px`,

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

@@ -124,9 +124,6 @@ sd-guide {
   margin-right: 12px;
   flex-shrink: 0;
 }
-.sd-guide__popup__list__item--depth-1:not(:first-child) {
-  margin-top: var(--sd-guide-contents-row-gap);
-}
 .sd-guide__popup__list__item--depth-2 {
   margin-top: var(--sd-guide-contents-body-gap);
 }

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

@@ -60,7 +60,6 @@ export class SdGuide {
             '--sd-guide-contents-padding-x': contents.paddingX,
             '--sd-guide-contents-padding-y': contents.paddingY,
             '--sd-guide-contents-gap': contents.gap,
-            '--sd-guide-contents-row-gap': contents.rowGap,
             '--sd-guide-contents-body-gap': contents.bodyGap,
             '--sd-guide-contents-title-gap': contents.titleGap,
             '--sd-guide-contents-radius': contents.radius,
@@ -83,10 +82,10 @@ export class SdGuide {
         const buttonClasses = ['sd-guide__button', `sd-guide__button--type-${this.type ?? 'tip'}`];
         if (isActive)
             buttonClasses.push('sd-guide__button--active');
-        return (h("div", { key: 'd89a517d78a8f9624c94d320291e5a4b5bd0715d', class: "sd-guide", style: this.guideStyle }, h("sd-button", { key: '6e959f0f5fd6f816fd1cef4545852b860d30de85', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), name: isActive ? 'primary_sm' : 'neutral_outline_sm', label: this.label || defaultLabel, icon: iconName, onSdClick: this.handleClickGuide }), this.popupShow && (h("sd-portal", { key: 'a837cababa5504400293729ad28e4dcd2450eeec', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '61dd3c574495f85021495d80865e162999368f9c', class: "sd-guide__popup", style: {
+        return (h("div", { key: '7d85d4650de1bef19699cdacaceeeab69a7f221c', class: "sd-guide", style: this.guideStyle }, h("sd-button", { key: 'b4cd191ba9593ce83343097e9b24fb56d86c6859', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), name: isActive ? 'primary_sm' : 'neutral_outline_sm', label: this.label || defaultLabel, icon: iconName, onSdClick: this.handleClickGuide }), this.popupShow && (h("sd-portal", { key: '2523de8af47987b2f0761c999817bf1ca595b4e6', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '2fcc5a768d626d5ba97427ad99dc1c6155b5c36b', class: "sd-guide__popup", style: {
                 ...this.guideStyle,
                 width: this.popupWidth != null ? this.popupWidth + 'px' : '426px',
-            } }, h("sd-ghost-button", { key: 'dbf8aebd1be4b5286bf726d22e0a5f80c29e867f', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), h("div", { key: '5a08fa823bb8839e654d7bb2ba027df2dc68b85b', class: "sd-guide__popup__header" }, h("sd-icon", { key: '1dda43d100b4f5f3b7fa81115a1ac4bfbd584a51', name: iconName, size: 24, color: popupIconColor }), h("h3", { key: 'cfe6342f44f4e1355397ed94d6db74807f917548', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), h("ul", { key: '9acc2f507ed3d3d6f1fda27a9e5cf66dcc2f619d', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
+            } }, h("sd-ghost-button", { key: 'de6b053ff6373bf2690d0874d01692e456a38991', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), h("div", { key: '10f2de0819a6a97571719ca2e04101833c78f1d3', class: "sd-guide__popup__header" }, h("sd-icon", { key: 'b11478e02574f5e211cd9d2478080d2c9895cb5d', name: iconName, size: 24, color: popupIconColor }), h("h3", { key: 'ef361769bc0363ebb7215b6fbd1fdb38b2864434', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), h("ul", { key: '914ae5fa0fa7ae52954df58e17beb187ddc2a966', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {

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: '7ec67f4433bff2a7d2f1b44935f761d79f0e8681', 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: '6c0118c2610f06d13d4a38a857bf37c7ad9508d0', class: "sd-input__content" }, h("slot", { key: '31cd8fe72ab21cb7a562accff98545fdf59efa80', name: "prefix" }), h("input", { key: '47579f31e9255bda6d5623eca8071ffdafd0ca55', 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: 'f2d6e313c8c542d88c252e26cbb2618977fda5fa', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: 'b24cb32d5963b244aef76e31f1c0f350d316be5c', 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: '9592350fd3820fa8c8af637cb84f2d4517d6decd', 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: 'c87705d4ca2e7d61de15412af8df8fe32aec6e56', style: hostStyle }, h("div", { key: '0343b5d209cf49e7d25bb7ede349eae791890e29', class: "sd-linear-progress__track" }, h("div", { key: '7771c6589c061d7bba7eb2ae88e1752d80912357', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (h("span", { key: '66f85b9d5f87d7c2aeafd6eadcdc3fb1739124c9', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (h("span", { key: 'd8581b453770e4c8db55abddc6c57f9b90701786', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && h("span", { key: '4223bfa7292cc9adeb9dca1ce18ee45cefc8d670', 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: 'c2dad1bed0e513341a447f164fecbb2f879ed523', 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: '254c3cb5eeb25b6c69b3812fbaada2a26d6620e0', class: "sd-loading-container__backdrop" }), h("div", { key: '58ca4033b25302d8a7ea3f25e6b5e8aa7ce9f51c', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: 'c8d48fa1814186a674d3f7c8b63bcd26541299ba', indeterminate: true, type: "inverse" }), this.message && h("p", { key: '899a5f32ceecb23b4f88b750aa634106bb42b394', 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 = {