@sellmate/design-system 1.27.1 → 1.29.0

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DsYLSqCp.js');
+var index = require('./index-iiJZMzVM.js');
 
 var switchTokens = {
 	"switch": {
@@ -109,7 +109,7 @@ const SdSwitch = class {
             '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
             '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
         };
-        return (index.h("label", { key: 'dded99ece17ee7308da9c7183a725493f705caf2', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, index.h("input", { key: '8ca9b17fbbd97cdfe351f06fa5dba7efb22faf39', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), index.h("div", { key: 'dffb2503df8755076218fc24ce974ed5cccb37c3', class: "sd-switch__track" }, index.h("div", { key: '52b8d7b125bf3a2fdddbcfe4690933432cb0ff29', class: "sd-switch__knob" })), this.label && index.h("span", { key: 'e4e62e02aa1d7336bf1de5add45ed0b2dbecbcd1', class: "sd-switch__label" }, this.label)));
+        return (index.h("label", { key: '96321de1da84594a8c4fc760c44e49f12168be13', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, index.h("input", { key: '5c89628f13ef22e19fadc53eea7e42428e783e83', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), index.h("div", { key: '11aa858c208ae5fb7c0f782e857abced64bcb0c3', class: "sd-switch__track" }, index.h("div", { key: '9fc34ece3e66ca3c60824e44123d98a4179924ee', class: "sd-switch__knob" })), this.label && index.h("span", { key: '1439b0ef2b5511560e5737452d1d21e74801e325', class: "sd-switch__label" }, this.label)));
     }
 };
 SdSwitch.style = sdSwitchCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DsYLSqCp.js');
+var index = require('./index-iiJZMzVM.js');
 
 const tab = {
 	main: {
@@ -207,7 +207,7 @@ const SdTabs = class {
         };
     }
     render() {
-        return (index.h("div", { key: 'd5df329922f73444775ec827ce8cf3850c369131', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index$1) => {
+        return (index.h("div", { key: '4306137f9dd004ec5ef43b8bdd9e3614adab23ed', 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-text-link.cjs.entry.js

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

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DsYLSqCp.js');
+var index = require('./index-iiJZMzVM.js');
 
 const DEFAULT_DURATION = 4000;
 const DEFAULT_MAX_VISIBLE = 3;
@@ -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: '17526924c57e06a77725f66233f5b5360097fac0', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (index.h("div", { key: '9d0347cd5aba313c4e5cddaf7ecd9eaa3be096c8', 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-DsYLSqCp.js');
+var index = require('./index-iiJZMzVM.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: '124b32e52e9dfd7a09ac67ffb8032bf2217e9c05', style: {
+        return (index.h("div", { key: 'c402e2eabab8b2d229cc40550d2ffb7c601ad992', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
                 '--sd-toast-icon': iconColor,
                 '--sd-toast-link': linkColor,
-            } }, 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() })))));
+            } }, index.h("div", { key: 'a6dbbc079649181799f434f7158791ec1e52fd4a', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: 'c8210c48776c0722ed025049ebfce5eb8477df0a', class: "sd-toast__icon" }, index.h("sd-icon", { key: 'ee99941287447694a3aa700281bacdbb5d9605bc', name: this.icon, size: iconSize, color: iconColor }))), index.h("div", { key: 'f4be8a8599e84bb75aeaa5414cf6ff2cd063e391', class: "sd-toast__content" }, index.h("span", { key: 'af60e01cf1be615fd3b462885c9060445e49c809', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: 'cd7bbe3ef56e6f475d4182118321645b444c2334', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: '87c9a38fead8416d36850ff9247d02a962e92f27', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (index.h("sd-ghost-button", { key: '1af5e0ffa26a26574bb9935fdeb01192895c32eb', 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-DsYLSqCp.js');
+var index = require('./index-iiJZMzVM.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: '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 })));
+        return (index.h("label", { key: '26ca7c70bf68964bc7bd0fd321912ee49dfc5c73', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: '5189d6d9f234921d78a0bd3cdded8256ad273702', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/cjs/{system-MjrAugX-.js → system-B4KkVpu2.js}

@@ -21,13 +21,7 @@ const color = {
 	},
 	divider: {
 		"default": "#E1E1E1"
-	},
-	blue: {
-		strong: "#0075FF"},
-	darkblue: {
-		strong: "#006AC1"},
-	grey: {
-		strong: "#737373"}};
+	}};
 const shadow = {
 	spread: {
 		md: {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DsYLSqCp.js');
+var index = require('./index-iiJZMzVM.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/cjs/{useDatePicker-iMd6WToc.js → useDatePicker-CgpIfwLA.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var component_datepicker = require('./component.datepicker-CUQbDSku.js');
+var component_datepicker = require('./component.datepicker-zFTQQKMH.js');
 
 const CALENDAR_LAYOUT = {
     bg: component_datepicker.datepickerTokens.datepicker.calendar.bg,

package/dist/collection/collection-manifest.json

@@ -48,11 +48,6 @@
     "components/sd-select/sd-select-list-item-search/sd-select-list-item-search.js",
     "components/sd-select/sd-select-listbox/sd-select-listbox.js",
     "components/sd-switch/sd-switch.js",
-    "components/sd-table/sd-table.js",
-    "components/sd-table/sd-tbody/sd-tbody.js",
-    "components/sd-table/sd-td/sd-td.js",
-    "components/sd-table/sd-thead/sd-thead.js",
-    "components/sd-table/sd-tr/sd-tr.js",
     "components/sd-tabs/sd-tabs.js",
     "components/sd-textarea/sd-textarea.js",
     "components/sd-toast/sd-toast.js",

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

@@ -34,6 +34,19 @@ 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%);
+  line-height: normal;
+}
 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-confirm-modal/sd-confirm-modal.css

@@ -52,6 +52,9 @@ sd-confirm-modal .sd-confirm-modal__content-box {
   border-radius: 8px;
   background: white;
 }
+sd-confirm-modal .sd-confirm-modal__option {
+  text-align: center;
+}
 sd-confirm-modal .sd-confirm-modal__slot-label {
   font-size: 14px;
   font-weight: 700;

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

@@ -3,8 +3,8 @@ import { sanitizeInlineHtml } from "../../utils/html/sanitize-inline-html";
 import { CONFIRM_MODAL_DEFAULT_BUTTON, CONFIRM_MODAL_ICON_COLOR, CONFIRM_MODAL_ICON_MAP, SUB_BUTTON_PRESET, TITLE_ICON_SIZE, } from "./sd-confirm-modal.config";
 export class SdConfirmModal {
     el;
-    hasSlottedContent = false;
-    customContentRef;
+    hasTagSlot = false;
+    hasOptionSlot = false;
     slotObserver;
     /** 모달 타입 (아이콘·버튼 색상 결정) */
     type = 'positive';
@@ -22,14 +22,12 @@ export class SdConfirmModal {
     mainButtonLabel = '확인';
     /** 취소 버튼 레이블 (없으면 취소 버튼 미표시) */
     subButtonLabel = '';
-    /** 콘텐츠 박스에 표시할 태그 프리셋 */
+    /** 콘텐츠 박스 tag 슬롯 기본 태그 프리셋 (slot="tag" 미지정 시) */
     tagPreset = 'square_sm_grey';
-    /** 콘텐츠 박스에 표시할 태그 레이블 */
+    /** 콘텐츠 박스 tag 슬롯 기본 태그 레이블 (slot="tag" 미지정 시) */
     tagLabel = '';
-    /** 콘텐츠 박스에 표시할 텍스트 (tagLabel 없을 때 사용) */
+    /** 콘텐츠 박스 option 슬롯 기본 텍스트 (slot="option" 미지정 시) */
     slotLabel = '';
-    /** 콘텐츠 박스에 직접 삽입할 HTMLElement */
-    tagContents;
     /** 닫기 버튼 클릭 시 발생합니다. */
     close;
     /** 취소 버튼 클릭 시 발생합니다. */
@@ -48,17 +46,6 @@ export class SdConfirmModal {
             characterData: true,
         });
     }
-    componentDidRender() {
-        if (this.customContentRef && this.tagContents instanceof HTMLElement) {
-            if (typeof this.customContentRef.replaceChildren === 'function') {
-                this.customContentRef.replaceChildren(this.tagContents);
-            }
-            else {
-                this.customContentRef.innerHTML = '';
-                this.customContentRef.appendChild(this.tagContents);
-            }
-        }
-    }
     disconnectedCallback() {
         this.slotObserver?.disconnect();
     }
@@ -68,29 +55,39 @@ export class SdConfirmModal {
     get resolvedMainButton() {
         return this.mainButtonName ?? CONFIRM_MODAL_DEFAULT_BUTTON[this.resolvedType];
     }
-    get hasTagContent() {
-        return ((this.tagLabel !== undefined && this.tagLabel !== '') ||
-            (this.slotLabel !== undefined && this.slotLabel !== ''));
+    /** tag 위치 콘텐츠 박스 표시 여부 (tagLabel fallback 또는 slot="tag") */
+    get showTagBox() {
+        return this.tagLabel !== '' || this.hasTagSlot;
     }
-    get showContentBox() {
-        return this.tagContents != null || this.hasTagContent || this.hasSlottedContent;
+    /** option 위치(bottomMessage 아래) 표시 여부 (slotLabel fallback 또는 slot="option") */
+    get showOption() {
+        return this.slotLabel !== '' || this.hasOptionSlot;
     }
+    /** light-DOM 에 slot="tag" / slot="option" 콘텐츠가 있는지 감지 */
     syncHasSlottedContent() {
-        const hasSlottedContent = Array.from(this.el.childNodes).some(node => !(node.nodeType === Node.ELEMENT_NODE &&
-            node.classList.contains('sd-confirm-modal')) &&
-            (node.nodeType === Node.ELEMENT_NODE ||
-                (node.nodeType === Node.TEXT_NODE && node.textContent?.trim())));
-        if (hasSlottedContent !== this.hasSlottedContent) {
-            this.hasSlottedContent = hasSlottedContent;
-        }
+        let hasTagSlot = false;
+        let hasOptionSlot = false;
+        Array.from(this.el.children).forEach(node => {
+            if (!(node instanceof HTMLElement))
+                return;
+            if (node.classList.contains('sd-confirm-modal'))
+                return;
+            const slot = node.getAttribute('slot');
+            if (slot === 'tag')
+                hasTagSlot = true;
+            else if (slot === 'option')
+                hasOptionSlot = true;
+        });
+        if (hasTagSlot !== this.hasTagSlot)
+            this.hasTagSlot = hasTagSlot;
+        if (hasOptionSlot !== this.hasOptionSlot)
+            this.hasOptionSlot = hasOptionSlot;
     }
     render() {
         const type = this.resolvedType;
         const iconName = CONFIRM_MODAL_ICON_MAP[type];
         const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
-        return (h("div", { key: '396bef971efaab6638586fa1a067eae54c1897f4', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: '4716168808371f4515bf763e77198386fc9fe7cf', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '1ab7ca2c5262374a0823a8e5c501758433c25051', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: 'a190f975d27153e4d928c95395f13ecd8ba0667a', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: 'da7821097377b7a9781df87ae40b2439a103ff9b', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: 'ced23315888ad43b3d91b8bb5388b77e517dd52a', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showContentBox && (h("div", { key: '5bdbe145bdb6639ebe582e7295f413a4b1990c15', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
-                this.customContentRef = el;
-            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (h("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel })), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: 'e99adc95c95be16945407d54833164908aad0b50', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), h("div", { key: '20a6660323e1d9f4ee096f0c07bf0596f5a2445a', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: '73141dd6fc6f703bff11e71ca9820cf3e1045466', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: 'bed2d910b4b35d59897e14222f86f20a7e8c3bde', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
+        return (h("div", { key: '0376a60d15b1e090a6ff8d4181f8afb107d5ede3', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: 'e652536ecf9a97c19a943de4ef5ebca99323a40a', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '8bb1e4a9207681ced8f06fa1919c99104a03b71c', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: '08991739402f4a1f8b4da3af3df24eec556cf88e', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: 'ba7aad2acaacc31f6e66122648c36b3398620b5b', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '6a0ccc07791d2d4c8923c1616fe9346d4a3c92c0', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showTagBox && (h("div", { key: '0e380d6d5ffe607863bae04821098b7585016f96', class: "sd-confirm-modal__content-box" }, h("slot", { key: 'de4eddc19f18831bf59797bda48aa4eaea3fac6a', name: "tag", onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (h("sd-tag", { key: 'a63cfc4baaef0a1a8e666d5dba8528b8b135c1bc', name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel }))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '0e9ebab6b5aaf4af7282358f7ddc57dc75cd682a', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showOption && (h("div", { key: 'cd8088453591b2fbda51aac93c8284e0f3c23aa9', class: "sd-confirm-modal__option" }, h("slot", { key: '4cbe1c57b47f12ba1f3cae23b55fb694f6b00787', name: "option", onSlotchange: () => this.syncHasSlottedContent() }, this.slotLabel && (h("span", { key: 'ed7e7aa05f5e32de4a361dcf8e3f2c2207dc9981', class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), h("div", { key: '069af4cfe63733e6960dd9e35888b26a06269026', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: 'a5371149596d109bede88df34736aaff88745f18', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: '46c0406da30bd761aa4d09f70ae9bb735b8dff5f', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
     }
     static get is() { return "sd-confirm-modal"; }
     static get originalStyleUrls() {
@@ -293,7 +290,7 @@ export class SdConfirmModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "\uCF58\uD150\uCE20 \uBC15\uC2A4\uC5D0 \uD45C\uC2DC\uD560 \uD0DC\uADF8 \uD504\uB9AC\uC14B"
+                    "text": "\uCF58\uD150\uCE20 \uBC15\uC2A4 tag \uC2AC\uB86F \uAE30\uBCF8 \uD0DC\uADF8 \uD504\uB9AC\uC14B (slot=\"tag\" \uBBF8\uC9C0\uC815 \uC2DC)"
                 },
                 "getter": false,
                 "setter": false,
@@ -313,7 +310,7 @@ export class SdConfirmModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "\uCF58\uD150\uCE20 \uBC15\uC2A4\uC5D0 \uD45C\uC2DC\uD560 \uD0DC\uADF8 \uB808\uC774\uBE14"
+                    "text": "\uCF58\uD150\uCE20 \uBC15\uC2A4 tag \uC2AC\uB86F \uAE30\uBCF8 \uD0DC\uADF8 \uB808\uC774\uBE14 (slot=\"tag\" \uBBF8\uC9C0\uC815 \uC2DC)"
                 },
                 "getter": false,
                 "setter": false,
@@ -333,41 +330,20 @@ export class SdConfirmModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "\uCF58\uD150\uCE20 \uBC15\uC2A4\uC5D0 \uD45C\uC2DC\uD560 \uD14D\uC2A4\uD2B8 (tagLabel \uC5C6\uC744 \uB54C \uC0AC\uC6A9)"
+                    "text": "\uCF58\uD150\uCE20 \uBC15\uC2A4 option \uC2AC\uB86F \uAE30\uBCF8 \uD14D\uC2A4\uD2B8 (slot=\"option\" \uBBF8\uC9C0\uC815 \uC2DC)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "slot-label",
                 "defaultValue": "''"
-            },
-            "tagContents": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "HTMLElement",
-                    "resolved": "HTMLElement | undefined",
-                    "references": {
-                        "HTMLElement": {
-                            "location": "global",
-                            "id": "global::HTMLElement"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "\uCF58\uD150\uCE20 \uBC15\uC2A4\uC5D0 \uC9C1\uC811 \uC0BD\uC785\uD560 HTMLElement"
-                },
-                "getter": false,
-                "setter": false
             }
         };
     }
     static get states() {
         return {
-            "hasSlottedContent": {}
+            "hasTagSlot": {},
+            "hasOptionSlot": {}
         };
     }
     static get events() {

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

@@ -38,7 +38,7 @@ export class SdDatePickerTrigger {
                 ? DATEPICKER_COLORS.icon.disabled
                 : DATEPICKER_COLORS.icon.default,
         };
-        return (h("div", { key: '6fbd05e53170cb323d3db5fe5fb7bf17e03f3af9', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (h("div", { key: '60a3b3ac02181faaabc1b77bdd8923069afa0af0', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-date-picker-trigger': true,
                 'sd-date-picker-trigger--disabled': this.disabled,
             }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -46,7 +46,7 @@ export class SdDatePickerTrigger {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, h("sd-icon", { key: '60e23369acd45ae6a74b076c08309644a10aceb3', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: '5db37f4d71914215e4ae4236791dd3e0eda10c96', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
+            } }, h("sd-icon", { key: 'cafd36605dcc7edb20f11c008abd7b434eb1d36e', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: '6d9b6fad8b60fe8d9bcc02762b688eccc66f63b3', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
     }
     static get is() { return "sd-date-picker-trigger"; }
     static get originalStyleUrls() {

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

@@ -116,9 +116,9 @@ export class SdDatePicker {
             '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
         };
-        return (h("sd-field", { key: '4359c9ce80bfc919088774a4458c730c427aa3f5', 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, 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: '638f4e59c9a7c5c841428c424181b3d2320857eb', class: "sd-date-picker", ref: el => {
+        return (h("sd-field", { key: 'f6fe03d9c87b8de3d33d641934b28f1e42a1b23a', 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, 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: '0d77d31b48f1ee8f87f7e59f472b0335f19b00be', class: "sd-date-picker", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-date-picker-trigger", { key: 'cbfe2bee0fdea1f089860cf3a7da9b7e35327c87', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: 'a348437c5f9f53180cc7f74d5b275e4f3fbedea6', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-calendar", { key: '7dd08053b3a24d25e6149d4bc751c75eff94f752', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, h("sd-date-picker-trigger", { key: '003de27ec2c3c660b1c183f10af02d6d982a6069', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '719f5f0a191286d2f2d06ca41c5746f6dea569e3', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-calendar", { key: 'd4a62d31666f21f6fb9d03f09cf36d16acc1c8a9', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get is() { return "sd-date-picker"; }
     static get originalStyleUrls() {

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

@@ -244,7 +244,7 @@ export class SdDateRangePickerCalendar {
             '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
             '--range-divider': RANGE_LAYOUT.divider,
         };
-        return (h(Fragment, { key: '4502cc08eb9df7c24cdc9f22564fb2a4a0b2736e' }, h("div", { key: '9da4356920cbce83c548a4c5f40cb2af9e36a257', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: 'a8117206cd3d9368a86f4cc307037461c1314aad', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: '0f6cbaf53781429b3de08aa992a45f2c26444625', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
+        return (h(Fragment, { key: '21999354836fc4068eecc9d115fb4c5e28a8f411' }, h("div", { key: '1bc993c9e5cb6f02152591c3f70b68fb580a392b', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: '09564bf7c14a55c7be56726fefbb6cec793df783', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: '5d8910e7c463c33ad8719a293a616b7f50095532', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
     }
     static get is() { return "sd-date-range-picker-calendar"; }
     static get originalStyleUrls() {

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

@@ -7,7 +7,7 @@ export class SdDivider {
         const hostStyle = {
             '--sd-divider-color': DIVIDER_COLORS.default,
         };
-        return (h(Host, { key: '73be9d4cc38b230e4cff7f8ebcdc81bd2d56e0e7', style: hostStyle }, h("hr", { key: 'a4da09faca453df8cb6ea3ed00609d4e0c238a7a', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
+        return (h(Host, { key: 'b19941ad314f31fccf77ea0dd3373f9e3362ecd2', style: hostStyle }, h("hr", { key: 'bbc765fc901298fbacb8323fecd8fd1ca4683d19', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
     }
     static get is() { return "sd-divider"; }
     static get originalStyleUrls() {

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

@@ -210,19 +210,19 @@ export class SdField {
                     : {}),
             }
             : {};
-        return (h("div", { key: 'bce0bc8ccc19e41c2a61980bd12f07d7f8838569', class: {
+        return (h("div", { key: '7474477aa89e459e5f31cc085e855db6d1851822', 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: 'c6c4e3ec6e018ebd0dc6fbbae5fbaef4ea6503e5', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'bd778a24325412924e0a331db592535e4b4e542b', class: "sd-field__main" }, h("div", { key: '485cfbdbfa7299cb27d84e61306d6e2cf196d071', class: {
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, h("div", { key: '9bea489357731d9630753e552a73e98ff85a47d8', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '582b762cea494f2987381eebfcdd9cab9c6dd3e0', class: "sd-field__main" }, h("div", { key: '24f1b2ffa75077573178de296be26c48d5f36958', 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: '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))))));
+                : {} }, addon && (h("div", { key: 'ace4b56d75bbaff3335694b6549b383a023d9125', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: 'aba7a6c3834f73be2c1be1e82f4673aad317c383', 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: '4a3776fc53bc003cc5b54696a8353668ce306a0c' })), 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 === '')

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

@@ -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;
 }