@sellmate/design-system 1.28.0 → 1.31.0

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

@@ -1,61 +1,139 @@
 'use strict';
 
-var index = require('./index-D12oddge.js');
-var tooltipArrow = require('./tooltipArrow-Dda4ik0V.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,8 +1,8 @@
 'use strict';
 
-var index = require('./index-D12oddge.js');
+var index = require('./index-Jr8OU0y9.js');
 var component_overlay = require('./component.overlay-CBhFnzM2.js');
-var system = require('./system-MjrAugX-.js');
+var system = require('./system-B4KkVpu2.js');
 
 const popup$1 = {
 	header: {
@@ -104,7 +104,7 @@ const SdPopup = class {
             ...DEFAULT_SUBMIT_BUTTON_PROPS,
             ...this.submitButtonProps,
         };
-        return (index.h("div", { key: 'f138f3d792295a6e1cb3894033547176cfd03163', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, index.h("header", { key: '7ff26c89a03cd79d5abe83513d96ae5f40b83869', class: "sd-popup__header" }, index.h("h2", { key: 'd9d3282b60b5b6baa5c2b1568c13db5847e9f9af', class: "sd-popup__title" }, this.popupTitle)), index.h("div", { key: 'a296adcd58df30f4915b2523931c5b9eb4588e5d', class: "sd-popup__body" }, index.h("slot", { key: 'aaf4dfc93d5664ca19a8071e3f37bf8a5857e471' })), this.useFooter && (index.h("footer", { key: '1afb1b638fa8bfa69f5d4bc87fca538800614312', class: "sd-popup__footer" }, index.h("div", { key: '7539bc751847a03fef6ec1e15587b346ffb19c83', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, index.h("slot", { key: '66fbec51d23bd1a203159f6c968935034a4c086c', name: "footer-left" })), index.h("sd-button", { key: '8d236d5fcd9b5fdae1c27ade7bff6bc605ef8bde', ...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-D12oddge.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-D12oddge.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": [{