@sellmate/design-system 1.29.0 → 1.32.0

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

@@ -1,46 +1,56 @@
 import { Fragment, h } from "@stencil/core";
 import { TooltipArrow } from "../assets/tooltipArrow";
-import popoverTokens from "../../tokens/generated/component.popover.json";
+import { POPOVER_TYPE_CONFIG, POPOVER_TITLE_GAP, POPOVER_TITLE_ICON_SIZE, } from "./sd-popover.config";
 export class SdPopover {
     el;
-    /** 팝오버 표시 여부 */
-    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() {
@@ -55,31 +65,43 @@ export class SdPopover {
                 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 }))))));
     }
     static get is() { return "sd-popover"; }
     static get originalStyleUrls() {
@@ -94,76 +116,77 @@ export class SdPopover {
     }
     static get properties() {
         return {
-            "show": {
+            "open": {
                 "type": "boolean",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "\uD31D\uC624\uBC84 \uD45C\uC2DC \uC5EC\uBD80"
+                    "text": "\uD45C\uC2DC \uC5EC\uBD80 (\uC81C\uC5B4). \uBBF8\uC9C0\uC815 \uC2DC defaultOpen \uAE30\uBC18 \uBE44\uC81C\uC5B4\uB85C \uB3D9\uC791"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "show",
-                "defaultValue": "false"
+                "attribute": "open"
             },
-            "placement": {
-                "type": "string",
+            "defaultOpen": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "'top' | 'bottom' | 'left' | 'right'",
-                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "\uD31D\uC624\uBC84\uB97C \uD45C\uC2DC\uD560 \uBC29\uD5A5"
+                    "text": "\uAE30\uBCF8 \uD45C\uC2DC \uC5EC\uBD80 (\uBE44\uC81C\uC5B4)"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
-                "attribute": "placement",
-                "defaultValue": "'bottom'"
+                "reflect": false,
+                "attribute": "default-open",
+                "defaultValue": "false"
             },
-            "color": {
+            "placement": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "'top' | 'bottom' | 'left' | 'right'",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "\uC544\uC774\uCF58 \uD2B8\uB9AC\uAC70 \uC0C9\uC0C1"
+                    "text": "\uD31D\uC624\uBC84\uB97C \uD45C\uC2DC\uD560 \uBC29\uD5A5"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "color",
-                "defaultValue": "'#01BB4B'"
+                "attribute": "placement",
+                "defaultValue": "'bottom'"
             },
-            "icon": {
+            "type": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "IconName",
-                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"bill\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"checkboxCheck\" | \"checkboxIndeterminate\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"coupon\" | \"dashboard\" | \"date\" | \"delete\" | \"dot\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"launcher\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"monitor\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"shield\" | \"sidebar\" | \"star\" | \"store\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\"",
+                    "original": "PopoverType",
+                    "resolved": "\"accent\" | \"danger\" | \"default\" | \"warning\"",
                     "references": {
-                        "IconName": {
-                            "location": "global",
-                            "id": "global::IconName"
+                        "PopoverType": {
+                            "location": "import",
+                            "path": "./sd-popover.config",
+                            "id": "src/components/sd-popover/sd-popover.config.ts::PopoverType",
+                            "referenceLocation": "PopoverType"
                         }
                     }
                 },
@@ -171,35 +194,15 @@ export class SdPopover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "\uC544\uC774\uCF58 \uD2B8\uB9AC\uAC70 \uC544\uC774\uCF58\uBA85"
+                    "text": "\uC0C9\uC0C1 \uD0C0\uC785 (default=\uB2E4\uD06C \uBC30\uACBD / danger\u00B7warning\u00B7accent=\uB77C\uC774\uD2B8 \uBC30\uACBD)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "icon",
-                "defaultValue": "'helpOutline'"
-            },
-            "iconSize": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "\uC544\uC774\uCF58 \uD2B8\uB9AC\uAC70 \uD06C\uAE30"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "icon-size",
-                "defaultValue": "12"
+                "attribute": "type",
+                "defaultValue": "'default'"
             },
-            "label": {
+            "menuTitle": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -207,51 +210,47 @@ export class SdPopover {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "\uBC84\uD2BC \uD2B8\uB9AC\uAC70 \uB808\uC774\uBE14 (\uC788\uC73C\uBA74 \uC544\uC774\uCF58 \uB300\uC2E0 \uBC84\uD2BC \uB80C\uB354\uB9C1)"
+                    "text": "\uBA54\uB274 \uC81C\uBAA9 (\uD544\uC218)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "label",
-                "defaultValue": "''"
+                "attribute": "menu-title"
             },
-            "name": {
+            "titleIcon": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "ButtonName",
-                    "resolved": "\"danger_lg\" | \"danger_md\" | \"danger_outline_lg\" | \"danger_outline_md\" | \"danger_outline_sm\" | \"danger_outline_xs\" | \"danger_sm\" | \"danger_xs\" | \"neutral_outline_lg\" | \"neutral_outline_md\" | \"neutral_outline_sm\" | \"neutral_outline_xs\" | \"primary_lg\" | \"primary_md\" | \"primary_outline_lg\" | \"primary_outline_md\" | \"primary_outline_sm\" | \"primary_outline_xs\" | \"primary_sm\" | \"primary_xs\" | \"secondary_lg\" | \"secondary_md\" | \"secondary_sm\" | \"secondary_xs\"",
+                    "original": "IconName",
+                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"bill\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"checkboxCheck\" | \"checkboxIndeterminate\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"coupon\" | \"dashboard\" | \"date\" | \"delete\" | \"dot\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"launcher\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"monitor\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"shield\" | \"sidebar\" | \"star\" | \"store\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\" | undefined",
                     "references": {
-                        "ButtonName": {
-                            "location": "import",
-                            "path": "../sd-button/sd-button.config",
-                            "id": "src/components/sd-button/sd-button.config.ts::ButtonName",
-                            "referenceLocation": "ButtonName"
+                        "IconName": {
+                            "location": "global",
+                            "id": "global::IconName"
                         }
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "\uBC84\uD2BC \uD2B8\uB9AC\uAC70 \uD504\uB9AC\uC14B"
+                    "text": "\uC81C\uBAA9 \uC88C\uCE21 \uC544\uC774\uCF58 (\uC120\uD0DD)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "name",
-                "defaultValue": "'primary_sm'"
+                "attribute": "title-icon"
             },
-            "rightIcon": {
+            "icon": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"bill\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"checkboxCheck\" | \"checkboxIndeterminate\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"coupon\" | \"dashboard\" | \"date\" | \"delete\" | \"dot\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"launcher\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"monitor\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"shield\" | \"sidebar\" | \"star\" | \"store\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\" | undefined",
+                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"bill\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"checkboxCheck\" | \"checkboxIndeterminate\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"coupon\" | \"dashboard\" | \"date\" | \"delete\" | \"dot\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"launcher\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"monitor\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"shield\" | \"sidebar\" | \"star\" | \"store\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\"",
                     "references": {
                         "IconName": {
                             "location": "global",
@@ -260,84 +259,58 @@ export class SdPopover {
                     }
                 },
                 "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "\uBC84\uD2BC \uD2B8\uB9AC\uAC70 \uC6B0\uCE21 \uC544\uC774\uCF58"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "right-icon"
-            },
-            "ariaLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "\uC2A4\uD06C\uB9B0\uB9AC\uB354\uC6A9 \uC811\uADFC\uC131 \uB808\uC774\uBE14"
+                    "text": "\uAE30\uBCF8(\uC544\uC774\uCF58) \uD2B8\uB9AC\uAC70 \uC544\uC774\uCF58\uBA85. slot=\"trigger\" \uAC00 \uC788\uC73C\uBA74 \uBB34\uC2DC"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "attribute": "aria-label",
-                "defaultValue": "''"
+                "reflect": true,
+                "attribute": "icon",
+                "defaultValue": "'helpOutline'"
             },
-            "disabled": {
-                "type": "boolean",
+            "iconSize": {
+                "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "number",
+                    "resolved": "number",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "\uBE44\uD65C\uC131 \uC0C1\uD0DC \uC5EC\uBD80"
+                    "text": "\uAE30\uBCF8(\uC544\uC774\uCF58) \uD2B8\uB9AC\uAC70 \uD06C\uAE30"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
+                "reflect": true,
+                "attribute": "icon-size",
+                "defaultValue": "12"
             },
-            "type": {
+            "color": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "ButtonType",
-                    "resolved": "\"button\" | \"reset\" | \"submit\"",
-                    "references": {
-                        "ButtonType": {
-                            "location": "import",
-                            "path": "../sd-button/sd-button.config",
-                            "id": "src/components/sd-button/sd-button.config.ts::ButtonType",
-                            "referenceLocation": "ButtonType"
-                        }
-                    }
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "\uBC84\uD2BC type \uC18D\uC131"
+                    "text": "\uAE30\uBCF8(\uC544\uC774\uCF58) \uD2B8\uB9AC\uAC70 \uC0C9\uC0C1"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "attribute": "type",
-                "defaultValue": "'button'"
+                "reflect": true,
+                "attribute": "color",
+                "defaultValue": "'#01BB4B'"
             },
-            "menuTitle": {
+            "leftLinkLabel": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -349,60 +322,53 @@ export class SdPopover {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "\uD31D\uC624\uBC84 \uBA54\uB274 \uC81C\uBAA9"
+                    "text": "\uD558\uB2E8 \uC88C\uCE21 \uB9C1\uD06C \uB808\uC774\uBE14 (\uC120\uD0DD)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "menu-title"
+                "attribute": "left-link-label"
             },
-            "leftLink": {
-                "type": "unknown",
+            "buttonLabel": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "PopoverLink",
-                    "resolved": "(Partial<Pick<SdTextLink, \"disabled\" | \"underline\" | \"icon\" | \"iconColor\" | \"rightArrow\">> & { label: string; onClick?: ((e: Event) => void) | undefined; }) | undefined",
-                    "references": {
-                        "PopoverLink": {
-                            "location": "local",
-                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-popover/sd-popover.tsx",
-                            "id": "src/components/sd-popover/sd-popover.tsx::PopoverLink"
-                        }
-                    }
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
                 },
-                "required": false,
-                "optional": true,
+                "required": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "\uD31D\uC624\uBC84 \uD558\uB2E8 \uC88C\uCE21 \uB9C1\uD06C \uC635\uC158"
+                    "text": "\uD558\uB2E8 \uC6B0\uCE21 \uBC84\uD2BC \uB808\uC774\uBE14 (\uD544\uC218). \uC0C9\uC0C1/\uC2A4\uD0C0\uC77C\uC740 type \uBCC4\uB85C \uACE0\uC815"
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "reflect": false,
+                "attribute": "button-label"
             },
-            "button": {
-                "type": "unknown",
+            "ariaLabel": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "PopoverButton",
-                    "resolved": "(Partial<Pick<SdButton, \"disabled\" | \"type\" | \"name\" | \"icon\" | \"rightIcon\" | \"ariaLabel\">> & { label: string; onClick?: ((e: Event) => void) | undefined; }) | undefined",
-                    "references": {
-                        "PopoverButton": {
-                            "location": "local",
-                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-popover/sd-popover.tsx",
-                            "id": "src/components/sd-popover/sd-popover.tsx::PopoverButton"
-                        }
-                    }
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "\uD31D\uC624\uBC84 \uD558\uB2E8 \uBC84\uD2BC \uC635\uC158"
+                    "text": "\uC2A4\uD06C\uB9B0\uB9AC\uB354\uC6A9 \uC811\uADFC\uC131 \uB808\uC774\uBE14"
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "''"
             },
-            "menuClass": {
+            "menuClassName": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -419,14 +385,16 @@ export class SdPopover {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "menu-class",
+                "attribute": "menu-class-name",
                 "defaultValue": "''"
             }
         };
     }
     static get states() {
         return {
-            "slotContentHTML": {}
+            "internalOpen": {},
+            "slotContentHTML": {},
+            "triggerHTML": {}
         };
     }
     static get events() {
@@ -445,6 +413,36 @@ export class SdPopover {
                     "resolved": "boolean",
                     "references": {}
                 }
+            }, {
+                "method": "buttonClick",
+                "name": "sdButtonClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\uD558\uB2E8 \uC6B0\uCE21 \uBC84\uD2BC \uD074\uB9AD \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "leftLinkClick",
+                "name": "sdLeftLinkClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\uD558\uB2E8 \uC88C\uCE21 \uB9C1\uD06C \uD074\uB9AD \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get elementRef() { return "el"; }