@sellmate/design-system 1.29.0 → 1.31.0

package/dist/cjs/sd-ghost-button_3.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-iiJZMzVM.js');
+var index = require('./index-Jr8OU0y9.js');
 
 const ghostButton = {
 	xxs: {
@@ -128,6 +128,11 @@ const SdGhostButton = class {
     intent = 'default';
     /** 스크린리더용 접근성 레이블 */
     ariaLabel = '';
+    /**
+     * 토글 버튼일 때 눌림 상태 → `aria-pressed`로 반영. 미지정 시 속성 자체를 내보내지 않는다.
+     * (DOM `Element.ariaPressed`(문자열 예약 속성)와 충돌하므로 prop 이름은 `pressed`)
+     */
+    pressed;
     /** 호버 시 표시할 툴팁 텍스트 */
     tooltipText;
     /** 비활성 상태 여부 */
@@ -185,16 +190,16 @@ const SdGhostButton = class {
         const accessibleName = (this.ariaLabel ?? '').trim() || undefined;
         const tooltipText = (this.tooltipText ?? '').trim();
         const hasTooltip = tooltipText.length > 0;
-        return (index.h("button", { key: '9d2d352d36c7c34c67d8c57de6236d72727bd078', class: {
+        return (index.h("button", { key: '921a2e6e54aa3cbb0e6c14ad117d6ddcfc753618', class: {
                 'sd-ghost-button': true,
                 'sd-ghost-button--disabled': this.disabled,
-            }, type: "button", "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled ? -1 : undefined, "aria-label": accessibleName, style: {
+            }, type: "button", "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled ? -1 : undefined, "aria-label": accessibleName, "aria-pressed": this.pressed, style: {
                 '--sd-ghost-button-size': `${sizeConfig.size}px`,
                 '--sd-ghost-button-radius': `${GHOST_BUTTON_RADIUS[size]}px`,
                 '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[intent],
                 '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
                 '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && (index.h("sd-portal", { key: '1a73fb53be28a622d03e4f20be0b30e0e76bccd4', parentRef: this.hostEl, open: true, offset: [sizeConfig.size / 2, 4], placement: "top" }, index.h("div", { key: 'e4a349dbfbf2fd16eed9a46f5e2ed43935212cfe', class: "sd-ghost-button__tooltip-inner", "aria-hidden": "true" }, index.h("sd-tag", { key: '4aa1525a6da6ee72daf1815f1440d665bd1cf2c8', name: "square_xs_grey", label: tooltipText })))), index.h("sd-icon", { key: '4caac22d0d888c1998032697043e3a3761e012aa', name: this.icon, size: sizeConfig.icon, color: contentColor })));
+            }, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && (index.h("sd-portal", { key: '90817207f1b8b5c1d55ce510dfb5ea90cf614bfd', parentRef: this.hostEl, open: true, offset: [sizeConfig.size / 2, 4], placement: "top" }, index.h("div", { key: '75379a80a230eb197d56df9eb3a79f4536c425d5', class: "sd-ghost-button__tooltip-inner", "aria-hidden": "true" }, index.h("sd-tag", { key: 'b7cc000adb2aaa3e9f65635d7e9cab7fceff62c3', name: "square_xs_grey", label: tooltipText })))), index.h("sd-icon", { key: '0df3fd325eb7e82b3da6427e22c05819f35d307e', name: this.icon, size: sizeConfig.icon, color: contentColor })));
     }
 };
 SdGhostButton.style = sdGhostButtonCss();
@@ -472,7 +477,7 @@ const SdPortal = class {
         this.close.emit();
     }
     render() {
-        return index.h("slot", { key: '623ee5423b145701ba9dd801d44874214f7a76e3' });
+        return index.h("slot", { key: '8b2a674bbd8c75c150940d53c0e5204e951cbb82' });
     }
     static get watchers() { return {
         "open": [{
@@ -668,9 +673,8 @@ const SdTag = class {
     label = '';
     /** 아이콘명 */
     icon;
-    // 아이콘이 좌측 배치되는 게 자연스러운 default. prop 이름 변경(isRight 등)은 public API breaking 이라 별도 이슈로 분리.
-    /** true이면 아이콘을 레이블 왼쪽에 배치 */
-    isLeft = true;
+    /** 아이콘을 레이블 왼쪽에 배치할지 여부 (기본값 true) */
+    iconLeft = true;
     /** 태그 너비 (숫자면 px, 문자열이면 그대로 적용). 미지정 시 콘텐츠 크기(fit-content) */
     width = '';
     componentWillLoad() {
@@ -699,7 +703,7 @@ const SdTag = class {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
         const width = this.resolvedWidth;
-        return (index.h(index.Host, { key: '9eb41b65a887a524d22e0a2663292de1f12674f6', style: width != null ? { '--sd-tag-width': width } : undefined }, index.h("span", { key: '2c08b419141250c00e6ef1aec1c691c1a41434c0', class: "sd-tag", style: {
+        return (index.h(index.Host, { key: '9e893a8ec67d1baa12cdfe030d3ae15798666c0c', style: width != null ? { '--sd-tag-width': width } : undefined }, index.h("span", { key: 'fe6b05143032b33bec7cc95ce5355701e894d0ea', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -709,7 +713,7 @@ const SdTag = class {
                 '--sd-tag-font-weight': config.fontWeight,
                 '--sd-tag-line-height': config.lineHeight,
                 '--sd-tag-radius': config.radius,
-            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, index.h("span", { key: '5041322f15e5273cc3129f57958dc97fdce8c50c', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode)));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.iconLeft && iconNode, index.h("span", { key: '9c4a07ac015672839dc5dda40d01609870979e04', class: "sd-tag__label" }, this.label), this.icon && !this.iconLeft && iconNode)));
     }
 };
 SdTag.style = sdTagCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-iiJZMzVM.js');
+var index = require('./index-Jr8OU0y9.js');
 var system = require('./system-B4KkVpu2.js');
 var sanitizeInlineHtml = require('./sanitize-inline-html-CRCAeQ46.js');
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-iiJZMzVM.js');
+var index = require('./index-Jr8OU0y9.js');
 var system = require('./system-B4KkVpu2.js');
 
 const table = {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-iiJZMzVM.js');
+var index = require('./index-Jr8OU0y9.js');
 var component_progress = require('./component.progress-DimGJZAd.js');
 var system = require('./system-B4KkVpu2.js');
 
@@ -52,7 +52,7 @@ const SdLinearProgress = class {
             clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
         };
         const valueText = `${Math.round(this.clampedValue)}%`;
-        return (index.h(index.Host, { key: 'fb7aacfafc15a5570717f4ba13cd7d6a8193375a', style: hostStyle }, index.h("div", { key: '7a054e0cac8fcc757c15871ff4d2305a8d190fb9', class: "sd-linear-progress__track" }, index.h("div", { key: '35b45b58b899e4c7201bf39783d3d4c6be42ede5', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (index.h("span", { key: 'a9b44e03fe2446fe8dbfd9bbd6801d6b9bebfc10', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (index.h("span", { key: '363bacb116ca51417892f9f49db58360a97899c4', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && index.h("span", { key: 'c8b9c15d2eb85ca1ac46ba8983ae399661012f31', class: "sd-linear-progress__label" }, this.label)));
+        return (index.h(index.Host, { key: 'bb8b4b933b609a42d1c342b7b480d32a48527321', style: hostStyle }, index.h("div", { key: 'd127baf4c4cf49d5c6e04ada72636c9d3fd81733', class: "sd-linear-progress__track" }, index.h("div", { key: '6251da38b070cf9f064b22ed1ecb694da41f63ec', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (index.h("span", { key: '7b15d0383e4cc391a22e4fc7e2a85bc6cd076f80', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (index.h("span", { key: '8755f23a83aede79a141a14b73337eacca0fc10d', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && index.h("span", { key: 'c874dd1ca0cb86c90a84c318790639c0f4283255', class: "sd-linear-progress__label" }, this.label)));
     }
 };
 SdLinearProgress.style = sdLinearProgressCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-iiJZMzVM.js');
+var index = require('./index-Jr8OU0y9.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}`;
 
@@ -40,10 +40,10 @@ const SdLoadingContainer = class {
         this.prevBodyOverflow = null;
     }
     render() {
-        return (index.h("div", { key: '89949c219d7ace3858c7539f3db4843a20a2c67e', class: {
+        return (index.h("div", { key: 'c7821d4c50651217e48f424cbdfb9a32006afda4', class: {
                 'sd-loading-container': true,
                 'sd-loading-container--visible': this.visible,
-            }, "aria-hidden": this.visible ? 'false' : 'true' }, index.h("div", { key: '0c538680987653059a8baae6e6f6d2b7dabeda69', class: "sd-loading-container__backdrop" }), index.h("div", { key: '8b5b01c51e97d9ebdd63be32aff8f228449c1e47', class: "sd-loading-container__content" }, index.h("sd-circle-progress", { key: 'ccf47434cf4c7b3e948cc10741e63fe362bd9316', indeterminate: true, type: "inverse" }), this.message && index.h("p", { key: 'db63acff8b44e5725e9c8e29fed7d9957f18aa9d', class: "sd-loading-container__message" }, this.message))));
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, index.h("div", { key: 'f7674699f3dd15edd74fc3224203b59ad2a96735', class: "sd-loading-container__backdrop" }), index.h("div", { key: 'cd361e1a1f470109298459cc2872be104e382015', class: "sd-loading-container__content" }, index.h("sd-circle-progress", { key: 'c856a1e9ab203040dd8bf0d01dbdf151718aaa3e', indeterminate: true, type: "inverse" }), this.message && index.h("p", { key: '8af15dba086fb024b652db5f776d384f00fd9cf7', class: "sd-loading-container__message" }, this.message))));
     }
 };
 SdLoadingContainer.style = sdLoadingContainerCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-iiJZMzVM.js');
+var index = require('./index-Jr8OU0y9.js');
 var modalStack = require('./modal-stack-DucFLON7.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/cjs/sd-pagination.cjs.entry.js

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

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

@@ -1,61 +1,139 @@
 'use strict';
 
-var index = require('./index-iiJZMzVM.js');
-var tooltipArrow = require('./tooltipArrow-DOOcBlLp.js');
+var index = require('./index-Jr8OU0y9.js');
+var tooltipArrow = require('./tooltipArrow-BlrFItn5.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) {
         index.registerInstance(this, hostRef);
         this.showChange = index.createEvent(this, "sdShowChange", 7);
+        this.buttonClick = index.createEvent(this, "sdButtonClick", 7);
+        this.leftLinkClick = index.createEvent(this, "sdLeftLinkClick", 7);
     }
     get el() { return index.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() {
@@ -70,31 +148,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 (index.h(index.Fragment, { key: '163802d6f0954b87902bbf957831f311829e63dc' }, this.label !== '' ? (index.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) })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (index.h("sd-floating-portal", { key: '1bd73048fd65916a400840c572d988c445dd662b', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, index.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 (index.h(index.Fragment, { key: '16cc231907c02de80749163ce4b639303e969f4a' }, this.triggerHTML !== '' ? (
+        // 사용자가 넘긴 slot="trigger" 콘텐츠를 감싸 클릭을 전달하는 래퍼(키보드 상호작용은 내부 트리거가 담당)
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
+        index.h("span", { ref: el => (this.triggerEl = el), class: "sd-popover", "aria-label": this.ariaLabel || undefined, innerHTML: this.triggerHTML, onClick: () => this.setOpen(!this.isOpen) })) : (index.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 && (index.h("sd-floating-portal", { key: 'c59ec7fb1b7ea137b95542f7e8f775c6bd837975', parentRef: this.triggerEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, index.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,
-            } }, index.h("i", { key: 'f9ab66a933669a057a1da5188cb82ca9e5f17ed6', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '6ea9ca3bacd2c84c468e5f00fa33e93e61a6bf9d' })), index.h("div", { key: '91d094cd45973bcc5ea6e6016510006f41956546', class: "sd-floating-menu__content" }, this.menuTitle && index.h("div", { key: 'ebe9a1e130792d7e60ca9abef9020dff6c0bd4c4', class: "sd-floating-menu__title" }, this.menuTitle), this.slotContentHTML && (index.h("div", { key: 'b898402e77f125099b29f6bd8eb5384a70aa671a', class: "sd-floating-menu__messages", innerHTML: this.slotContentHTML })), hasFooter && (index.h("div", { key: 'e797202b27ff538d4148f3b6782b33f58fc6bc2f', class: {
+                '--sd-floating-bg': typeConfig.bg,
+                '--sd-floating-content': typeConfig.description,
+            } }, index.h("i", { key: 'b96d7dc623a1fab61ee84f612c68c9f7bbac7405', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '92c6e5ef1258d6e99f744c75cef7ee3dd26d0367' })), index.h("div", { key: '9c9f3cfcc8a3d60e5282a5f6f2653e2cce17cf56', class: "sd-floating-menu__content" }, this.menuTitle && (index.h("div", { key: '044ae6b271fbf0cede0b4983e074d56882d5f50f', class: "sd-floating-menu__title", style: {
+                color: typeConfig.title,
+                display: 'flex',
+                alignItems: 'center',
+                gap: `${POPOVER_TITLE_GAP}px`,
+            } }, this.titleIcon && (index.h("sd-icon", { key: '360cf55b73ee395191836ee13a2d492460059f4a', name: this.titleIcon, size: Number(POPOVER_TITLE_ICON_SIZE), color: typeConfig.title })), index.h("span", { key: '5cc44d0806971433b42c41e48a48e7ea8cc2c975' }, this.menuTitle))), this.slotContentHTML && (index.h("div", { key: 'a5343a56938c0d6d5d5fd07fb83b7ccee4e81cf0', class: "sd-floating-menu__messages", innerHTML: this.slotContentHTML })), index.h("div", { key: '1f6a0f46b2b6b5f08a0d453cae2a868f93015ac7', class: {
                 'sd-floating-menu__buttons': true,
-                'sd-floating-menu__buttons--with-link': !!leftLink,
-            } }, leftLink && (index.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 && (index.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 }))))), index.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 && (index.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() })), index.h("sd-button", { key: '3d9df22cd0b65add5cd18b3750888248dc235408', name: typeConfig.buttonName, label: this.buttonLabel, ariaLabel: this.buttonLabel || 'confirm', onSdClick: () => this.buttonClick.emit() }))), index.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/cjs/sd-popup.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-iiJZMzVM.js');
+var index = require('./index-Jr8OU0y9.js');
 var component_overlay = require('./component.overlay-CBhFnzM2.js');
 var system = require('./system-B4KkVpu2.js');
 
@@ -104,7 +104,7 @@ const SdPopup = class {
             ...DEFAULT_SUBMIT_BUTTON_PROPS,
             ...this.submitButtonProps,
         };
-        return (index.h("div", { key: 'd86bb173d6fe8540e8b96f5dff4c8285cbf9ff91', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, index.h("header", { key: '0f006173fda3be589cdc208f382ed1898c49396a', class: "sd-popup__header" }, index.h("h2", { key: '62179c692f08b21e6386175b153d4f8c1013ea53', class: "sd-popup__title" }, this.popupTitle)), index.h("div", { key: 'a1a786d9d71f0a17eb4f3bce3a6b1ae8a1fa3367', class: "sd-popup__body" }, index.h("slot", { key: '40b772fd34963ef78507dddf81474eb5e1a58174' })), this.useFooter && (index.h("footer", { key: '40c981163f237b44764dec66205e01203a0d150d', class: "sd-popup__footer" }, index.h("div", { key: '0c91d37584c0bc5f74b510430a83889aea4abb93', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, index.h("slot", { key: '120c41484fee23d160a1fa7b5ab7cd70c1422d12', name: "footer-left" })), index.h("sd-button", { key: '6dadd08ab99380d0e55730888fbbd2fea88bcfe9', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
+        return (index.h("div", { key: '1b8dc171a7b0dea5216aa63425ccc72ae80e3a3e', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, index.h("header", { key: '1ae57ef360ad124a2afac3340258dce481bb7bc7', class: "sd-popup__header" }, index.h("h2", { key: '3d0cc0df6ba901b4dc9e0917103e57d6279cde31', class: "sd-popup__title" }, this.popupTitle)), index.h("div", { key: 'a0fee226ac513744243d6f78ddce6125170700da', class: "sd-popup__body" }, index.h("slot", { key: '55c5f94dff5413810f2c4648c9684e520db7268b' })), this.useFooter && (index.h("footer", { key: 'f8f0dc3751324ac5976aef55bec974341db036c1', class: "sd-popup__footer" }, index.h("div", { key: 'ea2f7e63c857d135eeffd7c2a43b171619067161', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, index.h("slot", { key: '0d56c0c25e1e10f6900af0f632c7bb339b736032', name: "footer-left" })), index.h("sd-button", { key: 'd334174cd98be32856a6f3b1b3348ca2ebea3cdd', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
     }
 };
 SdPopup.style = sdPopupCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-iiJZMzVM.js');
+var index = require('./index-Jr8OU0y9.js');
 
 const radioButton = {
 	xs: {
@@ -104,7 +104,7 @@ const SdRadioButton = class {
         index.registerInstance(this, hostRef);
         this.change = index.createEvent(this, "sdUpdate", 7);
     }
-    /** 현재 선택된 값 */
+    /** 현재 선택된 값 (미지정 시 선택 없음) */
     value;
     /** 라디오 버튼 옵션 목록 */
     options = [];
@@ -184,7 +184,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 (index.h("div", { key: '17355ebde09f652f5b94b4f70f09f68ef44cd29d', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
+        return (index.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 (index.h("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, index.h("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && index.h("span", { class: "sd-radio-button__label" }, option.label)));

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-iiJZMzVM.js');
+var index = require('./index-Jr8OU0y9.js');
 
 const radio = {
 	size: "16",
@@ -91,6 +91,8 @@ const SdRadio = class {
     disabled = false;
     /** 표시할 라벨 텍스트 */
     label;
+    /** native radio 그룹핑을 위한 name 속성 (미지정 시 val을 name으로 사용) */
+    name;
     /** 선택 값이 변경될 때 발생합니다. */
     update;
     valueChanged(newValue) {
@@ -134,7 +136,7 @@ const SdRadio = class {
             '--sd-radio-label-color': RADIO_COLORS.label.default,
             '--sd-radio-label-disabled-color': RADIO_COLORS.label.disabled,
         };
-        return (index.h("label", { key: 'cc7ff62ac992791ef81db9212bb5986989f6b4d6', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, index.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 }), index.h("span", { key: '61d8bdfdb5f8309b8832b89ea2979db5b80968c8', class: "sd-radio__circle" }), this.label && (index.h("span", { key: 'cc2a5402e4745aaae897c8f37d5fc287a2ba9b29', class: "sd-radio__label", "data-label": this.label }, this.label))));
+        return (index.h("label", { key: 'c4179fa98fcfdb885e7760a99acad56106cf2445', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, index.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 }), index.h("span", { key: 'abf2338b324ee693edf3c98564f2e8f63028e584', class: "sd-radio__circle" }), this.label && (index.h("span", { key: '738c30cf39dd497bc2b710d5384be9634bbf74bf', class: "sd-radio__label", "data-label": this.label }, this.label))));
     }
     static get watchers() { return {
         "value": [{

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-iiJZMzVM.js');
+var index = require('./index-Jr8OU0y9.js');
 var component_listItem = require('./component.listItem-cAO_ppOz.js');
 var component_listBox = require('./component.listBox-MHAv4Yy7.js');
 var sanitizeInlineHtml = require('./sanitize-inline-html-CRCAeQ46.js');
@@ -213,7 +213,7 @@ const SdSelectListItem = class {
         return (
         // 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        index.h("div", { key: '86ebbdb437d7799cefb9a9466997df44ea346e44', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
+        index.h("div", { key: '4fff470052d5d02cddf204f33df24247e087a55d', 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,
@@ -223,7 +223,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 && (index.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) ? (index.h("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml.sanitizeInlineHtml(this.option.label)) })) : (index.h("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (index.h("span", { key: 'e71dbbfcd454a43fe2364aa0205f14805de20653', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (index.h("sd-checkbox", { key: '45649f31743eac574560399b07c9ba94d7185013', 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) ? (index.h("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml.sanitizeInlineHtml(this.option.label)) })) : (index.h("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (index.h("span", { key: '2e2c1dca85ed4be38cf8435df86f8ea4b7273673', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
 };
 SdSelectListItem.style = sdSelectListItemCss();
@@ -280,15 +280,15 @@ const SdSelectListItemSearch = class {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (index.h("div", { key: 'fd13ed863fa624bb672a80594a1397831c55b859', class: {
+        return (index.h("div", { key: '3231c0ea91e678a71cac6a1c5805fa255a96deb2', class: {
                 'sd-select-list-item-search': true,
                 'sd-select-list-item-search--scrolled': this.isScrolled,
-            } }, index.h("div", { key: 'c36783523de2c29b04ce300307770a666daad9df', class: "sd-select-list-item-search__inner" }, index.h("sd-icon", { key: '6e21aebf25090024c882dda1e9fec46219dce8ee', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), index.h("input", { key: '2ed89f33de74c98cde3caa4e8924ef2e7b3baa0f', ref: el => {
+            } }, index.h("div", { key: 'f25df864ea6bbe2db7c0ca8e1abc0645f11b12f3', class: "sd-select-list-item-search__inner" }, index.h("sd-icon", { key: '494d5b964543e3a595629c02ef7b61b492d26eed', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), index.h("input", { key: '475b925b7987d98fb0a46d6b63a0a9edd2db00ae', 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() }), index.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() }), index.h("button", { key: '26fa161589df77bea51e4568bfd2d501008a0846', 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' }, index.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' }, index.h("sd-icon", { key: 'aca5037c9dbc171f201cc02e7a2d00f49e6e6397', name: "close", size: 12, color: "#888888" })))));
     }
 };
 SdSelectListItemSearch.style = sdSelectListItemSearchCss();
@@ -660,9 +660,9 @@ const SdSelectListbox = class {
             '--listbox-max-height': this.maxHeight ?? '260px',
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
         };
-        return (index.h("div", { key: 'cec8e4e12dd806a93375853386a1d7cc3ac6b269', class: "sd-select-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-list-item-search", { key: '9e07a7e742e956df314796e9babf6c0a7fb21d7f', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: 'd5ff5620c63b5c53e69b6348f2c9cd6cb73cbe88', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (index.h("div", { key: '1686c9749284be82edcf4eaf9c4741e1be3920d4', class: "sd-select-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-list-item-search", { key: '934e1bf38324bda71e0c4c956fd8ad82eb9c4f46', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: '33ec8b142a0f60b329fcd58bc8952d3577c92f83', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
-            } }, this.showSelectAll && (index.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 ? (index.h("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (index.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 && (index.h("sd-select-list-item", { key: '46d1f11884ed2fa9a55144fbf0633cb78f2f8ec3', 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 ? (index.h("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (index.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": [{
@@ -730,7 +730,7 @@ const SdSelectTrigger = class {
                 ? SELECT_COLORS.icon.disabled
                 : SELECT_COLORS.icon.default,
         };
-        return (index.h("div", { key: '2ec5e736c0742a10fdfa9b4b12b0820e99c30f7f', ref: el => {
+        return (index.h("div", { key: '3e5b42da3a391f52f597594ccf9ebf9e9b236ccc', 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,
@@ -741,7 +741,7 @@ const SdSelectTrigger = class {
                     e.preventDefault();
                     this.handleClick();
                 }
-            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("div", { key: '6b71e60a76d430bfe14bc5b7c59d82130be27c8a', class: "sd-select-trigger__content" }, hasValue && isHtmlLabel(this.displayText) ? (index.h("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml.sanitizeInlineHtml(this.displayText)) })) : (index.h("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), index.h("sd-icon", { key: 'e34eae87f518f1b015e1d59bacf97bec66b6ec6d', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("div", { key: '56938d493425d54b2c69840014b0354674fcf9d6', class: "sd-select-trigger__content" }, hasValue && isHtmlLabel(this.displayText) ? (index.h("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml.sanitizeInlineHtml(this.displayText)) })) : (index.h("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), index.h("sd-icon", { key: '90e7df2f8bd416ccd1545c78c79f02746c119db3', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
                 'sd-select-trigger__icon': true,
                 'sd-select-trigger__icon--open': this.isOpen,
             } }))));

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-iiJZMzVM.js');
+var index = require('./index-Jr8OU0y9.js');
 
 var switchTokens = {
 	"switch": {
@@ -67,7 +67,14 @@ const SdSwitch = class {
     }
     /** 현재 on/off 상태 */
     value = false;
-    /** 표시할 라벨 텍스트 */
+    /** 스위치 좌측 라벨 */
+    leftLabel;
+    /** 스위치 우측 라벨 */
+    rightLabel;
+    /**
+     * 표시할 라벨 텍스트
+     * @deprecated `rightLabel` 사용. 우측 라벨(하위호환)
+     */
     label = '';
     /** 비활성 상태 여부 */
     disabled = false;
@@ -109,7 +116,10 @@ const SdSwitch = class {
             '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
             '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
         };
-        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)));
+        // label(deprecated)은 rightLabel 로 흡수 (하위호환)
+        const right = this.rightLabel ?? this.label;
+        const accessibleName = [this.leftLabel, right].filter(Boolean).join(' ') || 'switch';
+        return (index.h("label", { key: '617ec652e8878aa41abd2d376479730e4db69025', "aria-label": accessibleName, class: this.switchClasses, style: cssVars }, index.h("input", { key: 'd765a1b3038d2decec2bf561d96a201cb617b40d', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.leftLabel && index.h("span", { key: '2c6e398e7f926d3d9d9049aa1aa3fe459b92f51e', class: "sd-switch__label" }, this.leftLabel), index.h("div", { key: 'c71fdd196c0d50ce499c4c524005d01b834d066a', class: "sd-switch__track" }, index.h("div", { key: 'eabac4c3305fabf2e857fc8066a9acb80f90bf31', class: "sd-switch__knob" })), right && index.h("span", { key: '41a0f8ffd56791138b605379f88545b6e20d8df3', class: "sd-switch__label" }, right)));
     }
 };
 SdSwitch.style = sdSwitchCss();