@sellmate/design-system 1.29.0 → 1.32.0

package/dist/esm/sd-guide.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, a as getElement, h } from './index-Dz490Ukt.js';
-import { s as systemTokens } from './system-Bth2l1cy.js';
+import { r as registerInstance, a as getElement, h } from './index-CdvQqvIe.js';
+import { s as systemTokens } from './system-rayWyWtG.js';
 import { s as sanitizeInlineHtml } from './sanitize-inline-html-BE4tnQ2Z.js';
 
 const guide = {

package/dist/esm/sd-key-value-table.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h } from './index-Dz490Ukt.js';
-import { s as systemTokens } from './system-Bth2l1cy.js';
+import { r as registerInstance, c as createEvent, h } from './index-CdvQqvIe.js';
+import { s as systemTokens } from './system-rayWyWtG.js';
 
 const table = {
 	header: {

package/dist/esm/sd-linear-progress.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-Dz490Ukt.js';
+import { r as registerInstance, h, H as Host } from './index-CdvQqvIe.js';
 import { p as progressTokens } from './component.progress-BG5nGnBi.js';
-import { s as systemTokens } from './system-Bth2l1cy.js';
+import { s as systemTokens } from './system-rayWyWtG.js';
 
 const LINEAR_PROGRESS_COLORS = {
     track: progressTokens.progress.color.track,
@@ -50,7 +50,7 @@ const SdLinearProgress = class {
             clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
         };
         const valueText = `${Math.round(this.clampedValue)}%`;
-        return (h(Host, { key: 'fb7aacfafc15a5570717f4ba13cd7d6a8193375a', style: hostStyle }, h("div", { key: '7a054e0cac8fcc757c15871ff4d2305a8d190fb9', class: "sd-linear-progress__track" }, h("div", { key: '35b45b58b899e4c7201bf39783d3d4c6be42ede5', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (h("span", { key: 'a9b44e03fe2446fe8dbfd9bbd6801d6b9bebfc10', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (h("span", { key: '363bacb116ca51417892f9f49db58360a97899c4', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && h("span", { key: 'c8b9c15d2eb85ca1ac46ba8983ae399661012f31', class: "sd-linear-progress__label" }, this.label)));
+        return (h(Host, { key: 'bb8b4b933b609a42d1c342b7b480d32a48527321', style: hostStyle }, h("div", { key: 'd127baf4c4cf49d5c6e04ada72636c9d3fd81733', class: "sd-linear-progress__track" }, h("div", { key: '6251da38b070cf9f064b22ed1ecb694da41f63ec', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (h("span", { key: '7b15d0383e4cc391a22e4fc7e2a85bc6cd076f80', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (h("span", { key: '8755f23a83aede79a141a14b73337eacca0fc10d', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && h("span", { key: 'c874dd1ca0cb86c90a84c318790639c0f4283255', class: "sd-linear-progress__label" }, this.label)));
     }
 };
 SdLinearProgress.style = sdLinearProgressCss();

package/dist/esm/sd-loading-container.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-Dz490Ukt.js';
+import { r as registerInstance, h } from './index-CdvQqvIe.js';
 
 const sdLoadingContainerCss = () => `sd-loading-container .sd-loading-container{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--sd-loading-container-z-index, 999);opacity:0;visibility:hidden;transition:opacity 0.2s ease, visibility 0s linear 0.2s;pointer-events:none}sd-loading-container .sd-loading-container--visible{opacity:1;visibility:visible;transition:opacity 0.2s ease, visibility 0s linear 0s;pointer-events:auto}sd-loading-container .sd-loading-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4)}sd-loading-container .sd-loading-container__content{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px}sd-loading-container .sd-loading-container__message{margin:0;color:#ffffff;font-size:14px;font-weight:500;line-height:22px;text-align:center;max-width:400px;word-break:keep-all}`;
 
@@ -38,10 +38,10 @@ const SdLoadingContainer = class {
         this.prevBodyOverflow = null;
     }
     render() {
-        return (h("div", { key: '89949c219d7ace3858c7539f3db4843a20a2c67e', class: {
+        return (h("div", { key: 'c7821d4c50651217e48f424cbdfb9a32006afda4', class: {
                 'sd-loading-container': true,
                 'sd-loading-container--visible': this.visible,
-            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: '0c538680987653059a8baae6e6f6d2b7dabeda69', class: "sd-loading-container__backdrop" }), h("div", { key: '8b5b01c51e97d9ebdd63be32aff8f228449c1e47', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: 'ccf47434cf4c7b3e948cc10741e63fe362bd9316', indeterminate: true, type: "inverse" }), this.message && h("p", { key: 'db63acff8b44e5725e9c8e29fed7d9957f18aa9d', class: "sd-loading-container__message" }, this.message))));
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: 'f7674699f3dd15edd74fc3224203b59ad2a96735', class: "sd-loading-container__backdrop" }), h("div", { key: 'cd361e1a1f470109298459cc2872be104e382015', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: 'c856a1e9ab203040dd8bf0d01dbdf151718aaa3e', indeterminate: true, type: "inverse" }), this.message && h("p", { key: '8af15dba086fb024b652db5f776d384f00fd9cf7', class: "sd-loading-container__message" }, this.message))));
     }
 };
 SdLoadingContainer.style = sdLoadingContainerCss();

package/dist/esm/sd-modal-container.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, a as getElement, h } from './index-Dz490Ukt.js';
+import { r as registerInstance, a as getElement, h } from './index-CdvQqvIe.js';
 import { u as unregisterModal, r as registerModal, s as setModalInteractive, i as isTopInteractiveModal, a as requestCloseForModal } from './modal-stack-DRVnqiWc.js';
 
 const sdModalContainerCss = () => `sd-modal-container{display:block}sd-modal-container .sd-modal-container{position:fixed;inset:0;z-index:var(--sd-modal-container-z-index, 997);pointer-events:none}sd-modal-container .sd-modal-container__layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}sd-modal-container .sd-modal-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4);opacity:0;transition:opacity 0.3s ease-out;pointer-events:none}sd-modal-container .sd-modal-container__backdrop--visible{opacity:1;pointer-events:auto}sd-modal-container .sd-modal-container__modal{position:relative;z-index:1;opacity:0;transform:scale(0);pointer-events:auto;transition:opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}sd-modal-container .sd-modal-container__modal--visible{opacity:1;transform:scale(1)}sd-modal-container .sd-modal-container__modal--shake{animation:modal-shake 0.3s ease-out}@keyframes modal-shake{0%,100%{transform:scale(1)}25%{transform:scale(1.03)}50%{transform:scale(0.97)}75%{transform:scale(1.01)}}`;

package/dist/esm/sd-pagination.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-Dz490Ukt.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-CdvQqvIe.js';
 
 const pagination = {
 	height: "24",
@@ -157,13 +157,13 @@ const SdPagination = class {
             '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
             '--sd-pagination-item-width': `${this.buttonWidth}px`,
         };
-        return (h("div", { key: '78ef11e415c8d086e0a5f582fa5b4568ed3e49a4', class: {
+        return (h("div", { key: '0b5a2e9aec83e6f6a8de3426e57b3f9a53623652', class: {
                 'sd-pagination': true,
                 'sd-pagination--simple': this.simple,
-            }, style: cssVars }, h("div", { key: '360cdb85715508d2f8155851b11928031015909c', 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: 'aa53d0366ae4678950ecd3917fd0d7011dd9608d', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "sd-pagination__info" }, h("span", { class: "sd-pagination__current" }, this.currentPage), h("span", { class: "sd-pagination__divider" }, "/"), h("span", { class: "sd-pagination__last" }, this.lastPage))) : (h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'sd-pagination__item': true,
                 'sd-pagination__item--selected': this.currentPage === n,
-            }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: '3726aaab29e0347cf7ae5e2aebad268e33eb33c7', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: '1aa72933c849af4fc886cc4e5f8962710c6c40bf', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
     }
 };
 SdPagination.style = sdPaginationCss();

package/dist/esm/sd-popover.entry.js

@@ -1,59 +1,137 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, F as Fragment } from './index-Dz490Ukt.js';
-import { T as TooltipArrow } from './tooltipArrow-CEHVt90h.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, F as Fragment } from './index-CdvQqvIe.js';
+import { T as TooltipArrow } from './tooltipArrow-BsQ__AbZ.js';
 
 const popover = {
 	"default": {
-		bg: "#07284A"}};
+		bg: "#07284A",
+		title: "#FFFFFF",
+		description: "#FFFFFF",
+		subAction: "#D8D8D8"
+	},
+	title: {
+		leadingIcon: "16",
+		gap: "8"
+	},
+	danger: {
+		bg: "#FCEFEF",
+		title: "#FB4444"
+	},
+	warning: {
+		bg: "#FEF1EA",
+		title: "#FF6B00"
+	},
+	accent: {
+		bg: "#E6F1FF",
+		title: "#0075FF"
+	},
+	light: {
+		description: "#555555",
+		subAction: "#888888"
+	}
+};
 var popoverTokens = {
 	popover: popover
 };
 
+const t = popoverTokens.popover;
+/** 제목-아이콘 간격 */
+const POPOVER_TITLE_GAP = t.title.gap;
+/** 제목 좌측 아이콘 크기 */
+const POPOVER_TITLE_ICON_SIZE = t.title.leadingIcon;
+/**
+ * popoverType별 색상·버튼 매핑.
+ * - default·accent: 하단 버튼 primary(solid) / danger: danger outline / warning: neutral outline
+ * - default: 다크 배경 + 흰색 텍스트 / danger·warning·accent: 라이트 배경 + 타입 색상 제목 + light 계열 본문·링크 색상
+ */
+const POPOVER_TYPE_CONFIG = {
+    default: {
+        bg: t.default.bg,
+        title: t.default.title,
+        description: t.default.description,
+        subAction: t.default.subAction,
+        buttonName: 'primary_xs',
+    },
+    danger: {
+        bg: t.danger.bg,
+        title: t.danger.title,
+        description: t.light.description,
+        subAction: t.light.subAction,
+        buttonName: 'danger_outline_xs',
+    },
+    warning: {
+        bg: t.warning.bg,
+        title: t.warning.title,
+        description: t.light.description,
+        subAction: t.light.subAction,
+        buttonName: 'neutral_outline_xs',
+    },
+    accent: {
+        bg: t.accent.bg,
+        title: t.accent.title,
+        description: t.light.description,
+        subAction: t.light.subAction,
+        buttonName: 'primary_xs',
+    },
+};
+
 const sdPopoverCss = () => `sd-popover{position:relative;cursor:pointer;display:inline-flex}`;
 
 const SdPopover = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.showChange = createEvent(this, "sdShowChange", 7);
+        this.buttonClick = createEvent(this, "sdButtonClick", 7);
+        this.leftLinkClick = createEvent(this, "sdLeftLinkClick", 7);
     }
     get el() { return getElement(this); }
-    /** 팝오버 표시 여부 */
-    show = false;
+    /** 표시 여부 (제어). 미지정 시 defaultOpen 기반 비제어로 동작 */
+    open;
+    /** 기본 표시 여부 (비제어) */
+    defaultOpen = false;
     /** 팝오버를 표시할 방향 */
     placement = 'bottom';
-    /** 아이콘 트리거 색상 */
-    color = '#01BB4B';
-    /** 아이콘 트리거 아이콘명 */
+    /** 색상 타입 (default=다크 배경 / danger·warning·accent=라이트 배경) */
+    type = 'default';
+    /** 메뉴 제목 (필수) */
+    menuTitle;
+    /** 제목 좌측 아이콘 (선택) */
+    titleIcon;
+    /** 기본(아이콘) 트리거 아이콘명. slot="trigger" 가 있으면 무시 */
     icon = 'helpOutline';
-    /** 아이콘 트리거 크기 */
+    /** 기본(아이콘) 트리거 크기 */
     iconSize = 12;
-    /** 버튼 트리거 레이블 (있으면 아이콘 대신 버튼 렌더링) */
-    label = '';
-    /** 버튼 트리거 프리셋 */
-    name = 'primary_sm';
-    /** 버튼 트리거 우측 아이콘 */
-    rightIcon;
+    /** 기본(아이콘) 트리거 색상 */
+    color = '#01BB4B';
+    /** 하단 좌측 링크 레이블 (선택) */
+    leftLinkLabel;
+    /** 하단 우측 버튼 레이블 (필수). 색상/스타일은 type 별로 고정 */
+    buttonLabel;
     /** 스크린리더용 접근성 레이블 */
     ariaLabel = '';
-    /** 비활성 상태 여부 */
-    disabled = false;
-    /** 버튼 type 속성 */
-    type = 'button';
-    /** 팝오버 메뉴 제목 */
-    menuTitle;
-    /** 팝오버 하단 좌측 링크 옵션 */
-    leftLink;
-    /** 팝오버 하단 버튼 옵션 */
-    button;
     /** 팝오버 메뉴에 추가할 클래스 */
-    menuClass = '';
+    menuClassName = '';
+    internalOpen = false;
     slotContentHTML = '';
+    triggerHTML = '';
     /** 팝오버 표시 상태가 바뀔 때 발생합니다. */
     showChange;
-    buttonEl;
-    setShow = (next) => {
-        if (this.show === next)
+    /** 하단 우측 버튼 클릭 시 발생합니다. */
+    buttonClick;
+    /** 하단 좌측 링크 클릭 시 발생합니다. */
+    leftLinkClick;
+    triggerEl;
+    get isOpen() {
+        return this.open !== undefined ? this.open : this.internalOpen;
+    }
+    setOpen = (next) => {
+        if (this.isOpen === next)
             return;
-        this.show = next;
+        if (this.open === undefined) {
+            this.internalOpen = next;
+        }
+        else {
+            this.open = next;
+        }
         this.showChange.emit(next);
     };
     get popoverOffset() {
@@ -68,31 +146,43 @@ const SdPopover = class {
                 return [4, 0];
         }
     }
-    handleClose = () => this.setShow(false);
+    handleClose = () => this.setOpen(false);
     componentWillLoad() {
+        this.internalOpen = this.defaultOpen;
+        // slot="trigger" 커스텀 트리거를 분리해 두고, 나머지 라이트 DOM은 메뉴 본문으로 캡처한다.
+        const triggerSlot = this.el.querySelector('[slot="trigger"]');
+        if (triggerSlot) {
+            this.triggerHTML = triggerSlot.outerHTML;
+            triggerSlot.remove();
+        }
         this.slotContentHTML = this.el.innerHTML;
         this.el.innerHTML = '';
     }
     render() {
         const placement = this.placement ?? 'bottom';
-        const color = this.color ?? '#01BB4B';
-        const icon = this.icon ?? 'helpOutline';
-        const iconSize = this.iconSize ?? 12;
-        const menuClass = this.menuClass ?? '';
-        const leftLink = this.leftLink;
-        const button = this.button;
-        const hasFooter = !!leftLink || !!button;
-        return (h(Fragment, { key: '163802d6f0954b87902bbf957831f311829e63dc' }, this.label !== '' ? (h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel || this.label || icon || 'Open popover', disabled: this.disabled, type: this.type ?? 'button', class: "sd-popover", onSdClick: () => this.setShow(!this.show) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (h("sd-floating-portal", { key: '1bd73048fd65916a400840c572d988c445dd662b', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, h("div", { key: 'f3791b078c7970174d9394ffcbb19beb450f12c5', class: {
+        const typeConfig = POPOVER_TYPE_CONFIG[this.type ?? 'default'] ?? POPOVER_TYPE_CONFIG.default;
+        const menuClassName = this.menuClassName ?? '';
+        const hasLeftLink = this.leftLinkLabel !== undefined && this.leftLinkLabel !== '';
+        return (h(Fragment, { key: '16cc231907c02de80749163ce4b639303e969f4a' }, this.triggerHTML !== '' ? (
+        // 사용자가 넘긴 slot="trigger" 콘텐츠를 감싸 클릭을 전달하는 래퍼(키보드 상호작용은 내부 트리거가 담당)
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
+        h("span", { ref: el => (this.triggerEl = el), class: "sd-popover", "aria-label": this.ariaLabel || undefined, innerHTML: this.triggerHTML, onClick: () => this.setOpen(!this.isOpen) })) : (h("sd-icon", { ref: el => (this.triggerEl = el), name: this.icon ?? 'helpOutline', size: this.iconSize ?? 12, color: this.color ?? '#01BB4B', class: "sd-popover", "aria-label": this.ariaLabel || undefined, onClick: () => this.setOpen(!this.isOpen) })), this.isOpen && (h("sd-floating-portal", { key: 'c59ec7fb1b7ea137b95542f7e8f775c6bd837975', parentRef: this.triggerEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, h("div", { key: '97e68e0246997a0a73beb3e984331daa57161e8e', class: {
                 'sd-floating-menu': true,
                 'sd-floating-menu--popover': true,
                 [`sd-floating-menu--${placement}`]: true,
-                [menuClass]: menuClass !== '',
+                [menuClassName]: menuClassName !== '',
             }, style: {
-                '--sd-floating-bg': popoverTokens.popover.default.bg,
-            } }, h("i", { key: 'f9ab66a933669a057a1da5188cb82ca9e5f17ed6', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '6ea9ca3bacd2c84c468e5f00fa33e93e61a6bf9d' })), h("div", { key: '91d094cd45973bcc5ea6e6016510006f41956546', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: 'ebe9a1e130792d7e60ca9abef9020dff6c0bd4c4', class: "sd-floating-menu__title" }, this.menuTitle), this.slotContentHTML && (h("div", { key: 'b898402e77f125099b29f6bd8eb5384a70aa671a', class: "sd-floating-menu__messages", innerHTML: this.slotContentHTML })), hasFooter && (h("div", { key: 'e797202b27ff538d4148f3b6782b33f58fc6bc2f', class: {
+                '--sd-floating-bg': typeConfig.bg,
+                '--sd-floating-content': typeConfig.description,
+            } }, h("i", { key: 'b96d7dc623a1fab61ee84f612c68c9f7bbac7405', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '92c6e5ef1258d6e99f744c75cef7ee3dd26d0367' })), h("div", { key: '9c9f3cfcc8a3d60e5282a5f6f2653e2cce17cf56', class: "sd-floating-menu__content" }, this.menuTitle && (h("div", { key: '044ae6b271fbf0cede0b4983e074d56882d5f50f', class: "sd-floating-menu__title", style: {
+                color: typeConfig.title,
+                display: 'flex',
+                alignItems: 'center',
+                gap: `${POPOVER_TITLE_GAP}px`,
+            } }, this.titleIcon && (h("sd-icon", { key: '360cf55b73ee395191836ee13a2d492460059f4a', name: this.titleIcon, size: Number(POPOVER_TITLE_ICON_SIZE), color: typeConfig.title })), h("span", { key: '5cc44d0806971433b42c41e48a48e7ea8cc2c975' }, this.menuTitle))), this.slotContentHTML && (h("div", { key: 'a5343a56938c0d6d5d5fd07fb83b7ccee4e81cf0', class: "sd-floating-menu__messages", innerHTML: this.slotContentHTML })), h("div", { key: '1f6a0f46b2b6b5f08a0d453cae2a868f93015ac7', class: {
                 'sd-floating-menu__buttons': true,
-                'sd-floating-menu__buttons--with-link': !!leftLink,
-            } }, leftLink && (h("sd-text-link", { key: 'fdeacc2b97c997d0c7385bab5260e060a70292e6', class: "sd-floating-menu__left-link", label: leftLink.label, icon: leftLink.icon ?? '', iconColor: leftLink.iconColor ?? '', rightArrow: leftLink.rightArrow ?? 'none', underline: !!leftLink.underline, disabled: !!leftLink.disabled, onSdClick: leftLink.onClick })), button && (h("sd-button", { key: '4a56e7e714517edcbea075e7d4521f0a54388e9f', name: button.name ?? 'secondary_xs', label: button.label, icon: button.icon, rightIcon: button.rightIcon, ariaLabel: button.ariaLabel || button.label || button.icon || 'Open popover', disabled: button.disabled, type: button.type, onSdClick: button.onClick }))))), h("sd-ghost-button", { key: 'ca713f6a07637b014c58923db2ff7af1f3ae98a8', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose }))))));
+                'sd-floating-menu__buttons--with-link': hasLeftLink,
+            } }, hasLeftLink && (h("sd-text-link", { key: '5ec7502837f7417266810769885e2318c80ad986', class: "sd-floating-menu__left-link", style: { '--sd-text-link-color': typeConfig.subAction }, label: this.leftLinkLabel, onSdClick: () => this.leftLinkClick.emit() })), h("sd-button", { key: '3d9df22cd0b65add5cd18b3750888248dc235408', name: typeConfig.buttonName, label: this.buttonLabel, ariaLabel: this.buttonLabel || 'confirm', onSdClick: () => this.buttonClick.emit() }))), h("sd-ghost-button", { key: '7e1ca491a2539b52ded454aca8afd26a92dc2ef6', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose }))))));
     }
 };
 SdPopover.style = sdPopoverCss();

package/dist/esm/sd-popup.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h } from './index-Dz490Ukt.js';
+import { r as registerInstance, c as createEvent, h } from './index-CdvQqvIe.js';
 import { o as overlayTokens } from './component.overlay-De0OtxK5.js';
-import { s as systemTokens } from './system-Bth2l1cy.js';
+import { s as systemTokens } from './system-rayWyWtG.js';
 
 const popup$1 = {
 	header: {
@@ -56,7 +56,7 @@ const POPUP_FOOTER = {
     shadow: `${shadowSpreadMd.x}px ${shadowSpreadMd.y}px ${shadowSpreadMd.blur}px ${shadowSpreadMd.spread}px ${shadowSpreadMd.color}`,
 };
 
-const sdPopupCss = () => `sd-popup{display:block;width:100%;height:100%}sd-popup .sd-popup{display:flex;flex-direction:column;width:100%;height:100%;background:var(--sd-popup-bg);overflow:hidden;box-sizing:border-box}sd-popup .sd-popup__header{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:100%;height:var(--sd-popup-header-height);padding:var(--sd-popup-header-padding-y) var(--sd-popup-header-padding-x);background:var(--sd-popup-header-bg);box-sizing:border-box}sd-popup .sd-popup__title{margin:0;color:var(--sd-popup-header-title-color);font-family:var(--sd-popup-header-font-family);font-weight:var(--sd-popup-header-font-weight);font-size:var(--sd-popup-header-font-size);line-height:var(--sd-popup-header-line-height);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-popup .sd-popup__body{flex:1 1 auto;min-height:0;overflow:auto}sd-popup .sd-popup__footer{display:flex;align-items:center;flex-shrink:0;width:100%;height:var(--sd-popup-footer-height);padding:var(--sd-popup-footer-padding-y) var(--sd-popup-footer-padding-x);gap:var(--sd-popup-footer-gap);background:var(--sd-popup-footer-bg);box-shadow:var(--sd-popup-footer-shadow);box-sizing:border-box;position:relative;z-index:1}sd-popup .sd-popup__footer-slot{display:flex;align-items:center;height:var(--sd-popup-footer-slot-height)}sd-popup .sd-popup__footer-slot--left{justify-content:flex-start;flex:1 1 auto;min-width:0}sd-popup .sd-popup__footer-slot:empty{display:none}sd-popup .sd-popup__submit{flex-shrink:0;margin-left:auto}`;
+const sdPopupCss = () => `sd-popup{display:block;width:100%;height:100%}sd-popup .sd-popup{display:flex;flex-direction:column;width:100%;height:100%;background:var(--sd-popup-bg);overflow:hidden;box-sizing:border-box}sd-popup .sd-popup__header{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:100%;height:var(--sd-popup-header-height);padding:var(--sd-popup-header-padding-y) var(--sd-popup-header-padding-x);background:var(--sd-popup-header-bg);box-sizing:border-box}sd-popup .sd-popup__title{margin:0;color:var(--sd-popup-header-title-color);font-family:var(--sd-popup-header-font-family);font-weight:var(--sd-popup-header-font-weight);font-size:var(--sd-popup-header-font-size);line-height:var(--sd-popup-header-line-height);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-popup .sd-popup__body{flex:1 1 auto;min-height:0;overflow:auto}sd-popup .sd-popup__body::-webkit-scrollbar{width:12px;height:12px;background:transparent}sd-popup .sd-popup__body::-webkit-scrollbar-track{background:transparent}sd-popup .sd-popup__body::-webkit-scrollbar-thumb{background-color:#CCCCCC;border:2px solid transparent;border-radius:8px;background-clip:padding-box}@supports not selector(::-webkit-scrollbar){sd-popup .sd-popup__body{scrollbar-width:thin;scrollbar-color:#CCCCCC transparent}}sd-popup .sd-popup__body::-webkit-scrollbar,sd-popup .sd-popup__body::-webkit-scrollbar-track{background:#F6F6F6}@supports not selector(::-webkit-scrollbar){sd-popup .sd-popup__body{scrollbar-color:#CCCCCC #F6F6F6}}sd-popup .sd-popup__body::-webkit-scrollbar-track:vertical{border-left:1px solid #E1E1E1}sd-popup .sd-popup__body::-webkit-scrollbar-track:horizontal{border-top:1px solid #E1E1E1}sd-popup .sd-popup__body::-webkit-scrollbar-thumb:vertical{border-left-width:3px}sd-popup .sd-popup__body::-webkit-scrollbar-thumb:horizontal{border-top-width:3px}sd-popup .sd-popup__footer{display:flex;align-items:center;flex-shrink:0;width:100%;height:var(--sd-popup-footer-height);padding:var(--sd-popup-footer-padding-y) var(--sd-popup-footer-padding-x);gap:var(--sd-popup-footer-gap);background:var(--sd-popup-footer-bg);box-shadow:var(--sd-popup-footer-shadow);box-sizing:border-box;position:relative;z-index:1}sd-popup .sd-popup__footer-slot{display:flex;align-items:center;height:var(--sd-popup-footer-slot-height)}sd-popup .sd-popup__footer-slot--left{justify-content:flex-start;flex:1 1 auto;min-width:0}sd-popup .sd-popup__footer-slot:empty{display:none}sd-popup .sd-popup__submit{flex-shrink:0;margin-left:auto}`;
 
 const DEFAULT_SUBMIT_BUTTON_PROPS = {
     name: 'primary_md',
@@ -102,7 +102,7 @@ const SdPopup = class {
             ...DEFAULT_SUBMIT_BUTTON_PROPS,
             ...this.submitButtonProps,
         };
-        return (h("div", { key: 'd86bb173d6fe8540e8b96f5dff4c8285cbf9ff91', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: '0f006173fda3be589cdc208f382ed1898c49396a', class: "sd-popup__header" }, h("h2", { key: '62179c692f08b21e6386175b153d4f8c1013ea53', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: 'a1a786d9d71f0a17eb4f3bce3a6b1ae8a1fa3367', class: "sd-popup__body" }, h("slot", { key: '40b772fd34963ef78507dddf81474eb5e1a58174' })), this.useFooter && (h("footer", { key: '40c981163f237b44764dec66205e01203a0d150d', class: "sd-popup__footer" }, h("div", { key: '0c91d37584c0bc5f74b510430a83889aea4abb93', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: '120c41484fee23d160a1fa7b5ab7cd70c1422d12', name: "footer-left" })), h("sd-button", { key: '6dadd08ab99380d0e55730888fbbd2fea88bcfe9', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
+        return (h("div", { key: '1b8dc171a7b0dea5216aa63425ccc72ae80e3a3e', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: '1ae57ef360ad124a2afac3340258dce481bb7bc7', class: "sd-popup__header" }, h("h2", { key: '3d0cc0df6ba901b4dc9e0917103e57d6279cde31', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: 'a0fee226ac513744243d6f78ddce6125170700da', class: "sd-popup__body" }, h("slot", { key: '55c5f94dff5413810f2c4648c9684e520db7268b' })), this.useFooter && (h("footer", { key: 'f8f0dc3751324ac5976aef55bec974341db036c1', class: "sd-popup__footer" }, h("div", { key: 'ea2f7e63c857d135eeffd7c2a43b171619067161', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: '0d56c0c25e1e10f6900af0f632c7bb339b736032', name: "footer-left" })), h("sd-button", { key: 'd334174cd98be32856a6f3b1b3348ca2ebea3cdd', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
     }
 };
 SdPopup.style = sdPopupCss();

package/dist/esm/sd-radio-button.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-Dz490Ukt.js';
+import { r as registerInstance, c as createEvent, h } from './index-CdvQqvIe.js';
 
 const radioButton = {
 	xs: {
@@ -102,7 +102,7 @@ const SdRadioButton = class {
         registerInstance(this, hostRef);
         this.change = createEvent(this, "sdUpdate", 7);
     }
-    /** 현재 선택된 값 */
+    /** 현재 선택된 값 (미지정 시 선택 없음) */
     value;
     /** 라디오 버튼 옵션 목록 */
     options = [];
@@ -182,7 +182,7 @@ const SdRadioButton = class {
             '--sd-radio-button-content-select': RADIO_BUTTON_COLORS.content.select,
             '--sd-radio-button-content-disabled': RADIO_BUTTON_COLORS.content.disabled,
         };
-        return (h("div", { key: '17355ebde09f652f5b94b4f70f09f68ef44cd29d', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
+        return (h("div", { key: '7621cf9885bb69bc18083dc076b4e6babc86ff62', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
             const isSelected = this.isOptionSelected(option);
             const isDisabled = this.isOptionDisabled(option);
             return (h("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, h("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && h("span", { class: "sd-radio-button__label" }, option.label)));

package/dist/esm/sd-radio.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-Dz490Ukt.js';
+import { r as registerInstance, c as createEvent, h } from './index-CdvQqvIe.js';
 
 const radio = {
 	size: "16",
@@ -89,6 +89,8 @@ const SdRadio = class {
     disabled = false;
     /** 표시할 라벨 텍스트 */
     label;
+    /** native radio 그룹핑을 위한 name 속성 (미지정 시 val을 name으로 사용) */
+    name;
     /** 선택 값이 변경될 때 발생합니다. */
     update;
     valueChanged(newValue) {
@@ -132,7 +134,7 @@ const SdRadio = class {
             '--sd-radio-label-color': RADIO_COLORS.label.default,
             '--sd-radio-label-disabled-color': RADIO_COLORS.label.disabled,
         };
-        return (h("label", { key: 'cc7ff62ac992791ef81db9212bb5986989f6b4d6', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("input", { key: '20bfeaf5bc322335f5300955ebf653213d662fa6', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), h("span", { key: '61d8bdfdb5f8309b8832b89ea2979db5b80968c8', class: "sd-radio__circle" }), this.label && (h("span", { key: 'cc2a5402e4745aaae897c8f37d5fc287a2ba9b29', class: "sd-radio__label", "data-label": this.label }, this.label))));
+        return (h("label", { key: 'c4179fa98fcfdb885e7760a99acad56106cf2445', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("input", { key: '0fe92e2cf0a539ebe2562e907f41c0055eb5d54e', type: "radio", name: this.name || String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), h("span", { key: 'abf2338b324ee693edf3c98564f2e8f63028e584', class: "sd-radio__circle" }), this.label && (h("span", { key: '738c30cf39dd497bc2b710d5384be9634bbf74bf', class: "sd-radio__label", "data-label": this.label }, this.label))));
     }
     static get watchers() { return {
         "value": [{

package/dist/esm/sd-scroll-area.entry.js

@@ -0,0 +1,42 @@
+import { r as registerInstance, h, H as Host } from './index-CdvQqvIe.js';
+import { s as systemTokens } from './system-rayWyWtG.js';
+
+const SCROLL_AREA_COLORS = {
+    border: systemTokens.color.border.default,
+};
+
+const sdScrollAreaCss = () => `sd-scroll-area{display:block;min-width:0;min-height:0}.sd-scroll-area__viewport{width:100%;height:100%}.sd-scroll-area__viewport::-webkit-scrollbar{width:12px;height:12px;background:transparent}.sd-scroll-area__viewport::-webkit-scrollbar-track{background:transparent}.sd-scroll-area__viewport::-webkit-scrollbar-thumb{background-color:#CCCCCC;border:2px solid transparent;border-radius:8px;background-clip:padding-box}@supports not selector(::-webkit-scrollbar){.sd-scroll-area__viewport{scrollbar-width:thin;scrollbar-color:#CCCCCC transparent}}.sd-scroll-area__viewport--bg::-webkit-scrollbar,.sd-scroll-area__viewport--bg::-webkit-scrollbar-track{background:#F6F6F6}@supports not selector(::-webkit-scrollbar){.sd-scroll-area__viewport--bg{scrollbar-color:#CCCCCC #F6F6F6}}.sd-scroll-area__viewport--bordered::-webkit-scrollbar-track:vertical{border-left:1px solid var(--sd-scroll-area-border-color)}.sd-scroll-area__viewport--bordered::-webkit-scrollbar-track:horizontal{border-top:1px solid var(--sd-scroll-area-border-color)}.sd-scroll-area__viewport--bordered::-webkit-scrollbar-thumb:vertical{border-left-width:3px}.sd-scroll-area__viewport--bordered::-webkit-scrollbar-thumb:horizontal{border-top-width:3px}.sd-scroll-area__viewport--vertical{overflow-x:hidden;overflow-y:auto}.sd-scroll-area__viewport--horizontal{overflow-x:auto;overflow-y:hidden}.sd-scroll-area__viewport--both{overflow:auto}`;
+
+const SdScrollArea = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** 스크롤 방향. vertical=세로만, horizontal=가로만, both=양방향 */
+    axis = 'both';
+    /** true면 스크롤바 트랙 배경을 채운다. 콘텐츠 영역 배경은 바뀌지 않는다. */
+    background = false;
+    /** true면 스크롤바와 콘텐츠 사이에 1px 구분선을 그린다. 컨테이너 테두리가 아니다. */
+    bordered = false;
+    /** viewport 최대 높이 (예: '400px'). 비우면 호스트 크기를 따른다. */
+    maxHeight = '';
+    /** viewport 최대 너비 (예: '480px'). 비우면 호스트 크기를 따른다. */
+    maxWidth = '';
+    render() {
+        const viewportStyle = {
+            '--sd-scroll-area-border-color': SCROLL_AREA_COLORS.border,
+        };
+        if (this.maxHeight !== '')
+            viewportStyle.maxHeight = this.maxHeight;
+        if (this.maxWidth !== '')
+            viewportStyle.maxWidth = this.maxWidth;
+        return (h(Host, { key: '4b9b22910436388a2017af0bea5d1c55463a5f94' }, h("div", { key: '13d9301c1bd43dad765a6f18bb11482d7ae4788a', class: {
+                'sd-scroll-area__viewport': true,
+                [`sd-scroll-area__viewport--${this.axis}`]: true,
+                'sd-scroll-area__viewport--bg': this.background,
+                'sd-scroll-area__viewport--bordered': this.bordered,
+            }, style: viewportStyle }, h("slot", { key: '1d28dd8bac0a3b40d8beca9553b061ae21be8342' }))));
+    }
+};
+SdScrollArea.style = sdScrollAreaCss();
+
+export { SdScrollArea as sd_scroll_area };

package/dist/esm/sd-select-list-item_4.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-Dz490Ukt.js';
+import { r as registerInstance, c as createEvent, h } from './index-CdvQqvIe.js';
 import { l as listItemTokens } from './component.listItem-4S0_Ykmo.js';
 import { l as listBoxTokens } from './component.listBox-DlJaYVWf.js';
 import { s as sanitizeInlineHtml } from './sanitize-inline-html-BE4tnQ2Z.js';
@@ -211,7 +211,7 @@ const SdSelectListItem = class {
         return (
         // 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        h("div", { key: '86ebbdb437d7799cefb9a9466997df44ea346e44', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
+        h("div", { key: 'e4f8fc195a7231cd3218b91a26c77f51df14e6dc', 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,
@@ -221,7 +221,7 @@ const SdSelectListItem = class {
                 '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: '297067b88bedf8eed648f60050688e23e9dfcbdd', 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: 'e71dbbfcd454a43fe2364aa0205f14805de20653', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: 'a9720067837860a8259b1a16b5eab111f02c7ac4', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), isHtmlLabel(this.option.label) ? (h("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.option.label)) })) : (h("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (h("span", { key: '8ece77c44bea9aea99883efe099137bca7d89475', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
 };
 SdSelectListItem.style = sdSelectListItemCss();
@@ -278,20 +278,20 @@ const SdSelectListItemSearch = class {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (h("div", { key: 'fd13ed863fa624bb672a80594a1397831c55b859', class: {
+        return (h("div", { key: '5e1dc595bd89df5364d9a302dc917abb29fa2c7b', class: {
                 'sd-select-list-item-search': true,
                 'sd-select-list-item-search--scrolled': this.isScrolled,
-            } }, h("div", { key: 'c36783523de2c29b04ce300307770a666daad9df', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: '6e21aebf25090024c882dda1e9fec46219dce8ee', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: '2ed89f33de74c98cde3caa4e8924ef2e7b3baa0f', ref: el => {
+            } }, h("div", { key: 'd07b293bf685652dcc965071f47c0492776f9d41', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: '065e1df3105048322ababd7237df83d045543fc3', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: '973977bfbd98f5430b1b53f1ad59128383481197', ref: el => {
                 this.inputEl = el;
-            }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), h("button", { key: 'c16ed94bbddd24e829548b4ff063a6a3095f955a', type: "button", class: {
+            }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), h("button", { key: '2a1386ef266f7398f97ff99adc89ee3cec4a594e', type: "button", class: {
                 'sd-select-list-item-search__clear': true,
                 'sd-select-list-item-search__clear--hidden': this.searchText === '',
-            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, h("sd-icon", { key: 'f2808e3b1b5ae6937bd818e4f29f999d04286b60', name: "close", size: 12, color: "#888888" })))));
+            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, h("sd-icon", { key: '1060c9fe4e3e6ce239800f04b382df9ce83e9d16', name: "close", size: 12, color: "#888888" })))));
     }
 };
 SdSelectListItemSearch.style = sdSelectListItemSearchCss();
 
-const sdSelectListboxCss = () => `:host{display:block}:host .sd-select-listbox{display:flex;flex-direction:column;width:var(--listbox-trigger-width);max-width:var(--listbox-max-width);max-height:var(--listbox-max-height);border-radius:var(--listbox-radius);background:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);overflow:hidden;outline:none}:host .sd-select-listbox__list{flex:1;min-height:0;overflow-y:auto;padding-bottom:0}:host .sd-select-listbox__list::-webkit-scrollbar{opacity:0;width:8px;background:#E5E5E5}:host .sd-select-listbox__list::-webkit-scrollbar:horizontal{height:8px}:host .sd-select-listbox__list::-webkit-scrollbar-thumb{height:80px;background-color:#CCCCCC;border-radius:4px}:host .sd-select-listbox__list::-webkit-scrollbar-track{background-color:#E5E5E5}:host .sd-select-listbox__empty{padding:12px;text-align:center;font-size:12px;line-height:20px;color:#888888}`;
+const sdSelectListboxCss = () => `:host{display:block}:host .sd-select-listbox{display:flex;flex-direction:column;width:var(--listbox-trigger-width);max-width:var(--listbox-max-width);max-height:var(--listbox-max-height);border-radius:var(--listbox-radius);background:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);overflow:hidden;outline:none}:host .sd-select-listbox__list{flex:1;min-height:0;overflow-y:auto;padding-bottom:0}:host .sd-select-listbox__list::-webkit-scrollbar{width:12px;height:12px;background:transparent}:host .sd-select-listbox__list::-webkit-scrollbar-track{background:transparent}:host .sd-select-listbox__list::-webkit-scrollbar-thumb{background-color:#CCCCCC;border:2px solid transparent;border-radius:8px;background-clip:padding-box}@supports not selector(::-webkit-scrollbar){:host .sd-select-listbox__list{scrollbar-width:thin;scrollbar-color:#CCCCCC transparent}}:host .sd-select-listbox__list::-webkit-scrollbar,:host .sd-select-listbox__list::-webkit-scrollbar-track{background:#F6F6F6}@supports not selector(::-webkit-scrollbar){:host .sd-select-listbox__list{scrollbar-color:#CCCCCC #F6F6F6}}:host .sd-select-listbox__list::-webkit-scrollbar-track:vertical{border-left:1px solid #E1E1E1}:host .sd-select-listbox__list::-webkit-scrollbar-track:horizontal{border-top:1px solid #E1E1E1}:host .sd-select-listbox__list::-webkit-scrollbar-thumb:vertical{border-left-width:3px}:host .sd-select-listbox__list::-webkit-scrollbar-thumb:horizontal{border-top-width:3px}:host .sd-select-listbox__empty{padding:12px;text-align:center;font-size:12px;line-height:20px;color:#888888}`;
 
 const SdSelectListbox = class {
     constructor(hostRef) {
@@ -658,9 +658,9 @@ const SdSelectListbox = class {
             '--listbox-max-height': this.maxHeight ?? '260px',
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
         };
-        return (h("div", { key: 'cec8e4e12dd806a93375853386a1d7cc3ac6b269', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: '9e07a7e742e956df314796e9babf6c0a7fb21d7f', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: 'd5ff5620c63b5c53e69b6348f2c9cd6cb73cbe88', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (h("div", { key: '060d455fa7eb31d50fb13251f352643460cc1232', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: '70543defd307911c3885b9ef3a0726465e9e4471', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '17aed7b1eb402f3b61044814cfad734e2cd4b922', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
-            } }, this.showSelectAll && (h("sd-select-list-item", { key: '9b36cdd7466b639c65497da94ee1e3c5129566cb', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (h("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (h("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
+            } }, this.showSelectAll && (h("sd-select-list-item", { key: '1f43ef353e470ebb0f70bfed5c495eb7de227c62', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (h("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (h("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
     }
     static get watchers() { return {
         "searchKeyword": [{
@@ -728,7 +728,7 @@ const SdSelectTrigger = class {
                 ? SELECT_COLORS.icon.disabled
                 : SELECT_COLORS.icon.default,
         };
-        return (h("div", { key: '2ec5e736c0742a10fdfa9b4b12b0820e99c30f7f', ref: el => {
+        return (h("div", { key: 'afda44bd2f8dcf0ab75d75b0178b067f96e61707', ref: el => {
                 this.triggerEl = el;
             }, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
                 'sd-select-trigger': true,
@@ -739,7 +739,7 @@ const SdSelectTrigger = class {
                     e.preventDefault();
                     this.handleClick();
                 }
-            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: '6b71e60a76d430bfe14bc5b7c59d82130be27c8a', class: "sd-select-trigger__content" }, hasValue && isHtmlLabel(this.displayText) ? (h("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.displayText)) })) : (h("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), h("sd-icon", { key: 'e34eae87f518f1b015e1d59bacf97bec66b6ec6d', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: '061acc7d557d222b2616538346d415a6f37a198e', class: "sd-select-trigger__content" }, hasValue && isHtmlLabel(this.displayText) ? (h("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.displayText)) })) : (h("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), h("sd-icon", { key: '6444177838d54360776bbbfa7f08da7a6f556a16', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
                 'sd-select-trigger__icon': true,
                 'sd-select-trigger__icon--open': this.isOpen,
             } }))));