@sellmate/design-system 1.20.1 → 1.22.0

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

@@ -9,9 +9,13 @@ const BUTTON_WIDTH = {
     5: 56,
 };
 export class SdPagination {
+    /** 현재 페이지 번호 */
     currentPage = 1;
+    /** 마지막 페이지 번호 */
     lastPage = 1;
+    /** true이면 현재/마지막 페이지만 표시하는 단순 모드 */
     simple = false;
+    /** 페이지가 변경될 때 새 페이지 번호를 전달합니다. */
     pageChange;
     get pageNumbers() {
         const start = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
@@ -83,13 +87,13 @@ export class SdPagination {
             '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
             '--sd-pagination-item-width': `${this.buttonWidth}px`,
         };
-        return (h("div", { key: '8a2219bbc3a17951ed66501e7246f230f0495e74', class: {
+        return (h("div", { key: '733bf7952c4e38a65a1042c6a8784d6502c81667', class: {
                 'sd-pagination': true,
                 'sd-pagination--simple': this.simple,
-            }, style: cssVars }, h("div", { key: '7e9ddb98aff7506fc3b6053d84c1be211e3d1ff7', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "sd-pagination__info" }, h("span", { class: "sd-pagination__current" }, this.currentPage), h("span", { class: "sd-pagination__divider" }, "/"), h("span", { class: "sd-pagination__last" }, this.lastPage))) : (h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+            }, style: cssVars }, h("div", { key: '4c23bdfb9a58950a04107fc4b4c921bbafa4e601', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "sd-pagination__info" }, h("span", { class: "sd-pagination__current" }, this.currentPage), h("span", { class: "sd-pagination__divider" }, "/"), h("span", { class: "sd-pagination__last" }, this.lastPage))) : (h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'sd-pagination__item': true,
                 'sd-pagination__item--selected': this.currentPage === n,
-            }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: '937554ea8d3ae71da85e2c1f49d82c99658141f0', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: 'a0406c1f9cd13970d47f25ed88095ac1c684203c', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
     }
     static get is() { return "sd-pagination"; }
     static get originalStyleUrls() {
@@ -116,7 +120,7 @@ export class SdPagination {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD604\uC7AC \uD398\uC774\uC9C0 \uBC88\uD638"
                 },
                 "getter": false,
                 "setter": false,
@@ -136,7 +140,7 @@ export class SdPagination {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB9C8\uC9C0\uB9C9 \uD398\uC774\uC9C0 \uBC88\uD638"
                 },
                 "getter": false,
                 "setter": false,
@@ -156,7 +160,7 @@ export class SdPagination {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "true\uC774\uBA74 \uD604\uC7AC/\uB9C8\uC9C0\uB9C9 \uD398\uC774\uC9C0\uB9CC \uD45C\uC2DC\uD558\uB294 \uB2E8\uC21C \uBAA8\uB4DC"
                 },
                 "getter": false,
                 "setter": false,
@@ -175,7 +179,7 @@ export class SdPagination {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD398\uC774\uC9C0\uAC00 \uBCC0\uACBD\uB420 \uB54C \uC0C8 \uD398\uC774\uC9C0 \uBC88\uD638\uB97C \uC804\uB2EC\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "number",

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

@@ -3,22 +3,38 @@ import { TooltipArrow } from "../assets/tooltipArrow";
 import popoverTokens from "../../tokens/generated/component.popover.json";
 export class SdPopover {
     el;
+    /** 팝오버 표시 여부 */
     show = false;
+    /** 팝오버를 표시할 방향 */
     placement = 'bottom';
+    /** 아이콘 트리거 색상 */
     color = '#01BB4B';
+    /** 아이콘 트리거 아이콘명 */
     icon = 'helpOutline';
+    /** 아이콘 트리거 크기 */
     iconSize = 12;
+    /** 버튼 트리거 레이블 (있으면 아이콘 대신 버튼 렌더링) */
     label = '';
+    /** 버튼 트리거 프리셋 */
     name = 'primary_sm';
+    /** 버튼 트리거 우측 아이콘 */
     rightIcon;
+    /** 스크린리더용 접근성 레이블 */
     ariaLabel = '';
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 버튼 type 속성 */
     type = 'button';
+    /** 팝오버 메뉴 제목 */
     menuTitle;
+    /** 팝오버 하단 좌측 링크 옵션 */
     leftLink;
+    /** 팝오버 하단 버튼 옵션 */
     button;
+    /** 팝오버 메뉴에 추가할 클래스 */
     menuClass = '';
     slotContentHTML = '';
+    /** 팝오버 표시 상태가 바뀔 때 발생합니다. */
     showChange;
     buttonEl;
     setShow = (next) => {
@@ -53,17 +69,17 @@ export class SdPopover {
         const leftLink = this.leftLink;
         const button = this.button;
         const hasFooter = !!leftLink || !!button;
-        return (h(Fragment, { key: '649e07ee45d3e7e5f72a438ef2939bfe6d3c56e4' }, 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: '486d1859387b0c8cc82646ab5e7b6800792ca2be', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, h("div", { key: '4418e064c76478a5b4dfd2fb69d11e1603a22530', class: {
+        return (h(Fragment, { key: '94fcf54c8b20ffd1bcf2c7f540de31e1f41154fa' }, 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: '9f1585f2d268452f3d5c713e30ff865c3fc5fbac', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, h("div", { key: '2cd2103f56c45364df5db9b73a2d89447b7c2bcc', class: {
                 'sd-floating-menu': true,
                 'sd-floating-menu--popover': true,
                 [`sd-floating-menu--${placement}`]: true,
                 [menuClass]: menuClass !== '',
             }, style: {
                 '--sd-floating-bg': popoverTokens.popover.default.bg,
-            } }, h("i", { key: 'a181ce40ae957e77be7c8f9b10e6f1fe8190cd52', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '323bca17c3c245063cbd1ac55ed64bf6f6df9e3e' })), h("div", { key: '06e98cf6e888dc66a6a700710669c61ac9d9c494', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: '831ca9893ccafcad8e0858fb28269428ebac6a07', class: "sd-floating-menu__title" }, this.menuTitle), this.slotContentHTML && (h("div", { key: 'cdd2eafe18d5b0b44f10dbebbb68ed9d010173b1', class: "sd-floating-menu__messages", innerHTML: this.slotContentHTML })), hasFooter && (h("div", { key: '8149044a08de968ef38f432ee3303d969b49eace', class: {
+            } }, h("i", { key: '5fd6c333790d3bb45bf4d43391ed1457d5eb54c3', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '062b11e3b6cee1e87f20064ab62a589a23f3eb26' })), h("div", { key: 'b863abd8e31c8ce0dfddfdb25b6a49be69f34da1', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: '1873c595d7ad91b3a7c71d979414820694c23ff5', class: "sd-floating-menu__title" }, this.menuTitle), this.slotContentHTML && (h("div", { key: '7a197b43d34a59ec298ed5e733cae0f3390c87a3', class: "sd-floating-menu__messages", innerHTML: this.slotContentHTML })), hasFooter && (h("div", { key: 'be9034b4150421be08c17978beba643e73c5568d', class: {
                 'sd-floating-menu__buttons': true,
                 'sd-floating-menu__buttons--with-link': !!leftLink,
-            } }, leftLink && (h("sd-text-link", { key: '4c7e9c2b4fe8664b3af375a3c89b1cd50d64a9c3', 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: '730d867339257f168c11d7d1417c9d28a408f462', 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: '7a1f2edf0a601c0dfa91b4a02405c815d3257214', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose }))))));
+            } }, leftLink && (h("sd-text-link", { key: '890a163609b8544450ad1b8c009648d73ef0d269', 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: '128270add7ea99f7c9f61abe9f2a113f152465d8', 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: 'bc4c4d982da8fe72c85cd4ae7ba6cd2e09154164', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose }))))));
     }
     static get is() { return "sd-popover"; }
     static get originalStyleUrls() {
@@ -90,7 +106,7 @@ export class SdPopover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD31D\uC624\uBC84 \uD45C\uC2DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -110,7 +126,7 @@ export class SdPopover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD31D\uC624\uBC84\uB97C \uD45C\uC2DC\uD560 \uBC29\uD5A5"
                 },
                 "getter": false,
                 "setter": false,
@@ -130,7 +146,7 @@ export class SdPopover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC544\uC774\uCF58 \uD2B8\uB9AC\uAC70 \uC0C9\uC0C1"
                 },
                 "getter": false,
                 "setter": false,
@@ -155,7 +171,7 @@ export class SdPopover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC544\uC774\uCF58 \uD2B8\uB9AC\uAC70 \uC544\uC774\uCF58\uBA85"
                 },
                 "getter": false,
                 "setter": false,
@@ -175,7 +191,7 @@ export class SdPopover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC544\uC774\uCF58 \uD2B8\uB9AC\uAC70 \uD06C\uAE30"
                 },
                 "getter": false,
                 "setter": false,
@@ -195,7 +211,7 @@ export class SdPopover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBC84\uD2BC \uD2B8\uB9AC\uAC70 \uB808\uC774\uBE14 (\uC788\uC73C\uBA74 \uC544\uC774\uCF58 \uB300\uC2E0 \uBC84\uD2BC \uB80C\uB354\uB9C1)"
                 },
                 "getter": false,
                 "setter": false,
@@ -222,7 +238,7 @@ export class SdPopover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBC84\uD2BC \uD2B8\uB9AC\uAC70 \uD504\uB9AC\uC14B"
                 },
                 "getter": false,
                 "setter": false,
@@ -247,7 +263,7 @@ export class SdPopover {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBC84\uD2BC \uD2B8\uB9AC\uAC70 \uC6B0\uCE21 \uC544\uC774\uCF58"
                 },
                 "getter": false,
                 "setter": false,
@@ -266,7 +282,7 @@ export class SdPopover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC2A4\uD06C\uB9B0\uB9AC\uB354\uC6A9 \uC811\uADFC\uC131 \uB808\uC774\uBE14"
                 },
                 "getter": false,
                 "setter": false,
@@ -286,7 +302,7 @@ export class SdPopover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBE44\uD65C\uC131 \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -313,7 +329,7 @@ export class SdPopover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBC84\uD2BC type \uC18D\uC131"
                 },
                 "getter": false,
                 "setter": false,
@@ -333,7 +349,7 @@ export class SdPopover {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD31D\uC624\uBC84 \uBA54\uB274 \uC81C\uBAA9"
                 },
                 "getter": false,
                 "setter": false,
@@ -358,7 +374,7 @@ export class SdPopover {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD31D\uC624\uBC84 \uD558\uB2E8 \uC88C\uCE21 \uB9C1\uD06C \uC635\uC158"
                 },
                 "getter": false,
                 "setter": false
@@ -381,7 +397,7 @@ export class SdPopover {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD31D\uC624\uBC84 \uD558\uB2E8 \uBC84\uD2BC \uC635\uC158"
                 },
                 "getter": false,
                 "setter": false
@@ -398,7 +414,7 @@ export class SdPopover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD31D\uC624\uBC84 \uBA54\uB274\uC5D0 \uCD94\uAC00\uD560 \uD074\uB798\uC2A4"
                 },
                 "getter": false,
                 "setter": false,
@@ -422,7 +438,7 @@ export class SdPopover {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD31D\uC624\uBC84 \uD45C\uC2DC \uC0C1\uD0DC\uAC00 \uBC14\uB014 \uB54C \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "boolean",

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

@@ -5,12 +5,16 @@ const DEFAULT_SUBMIT_BUTTON_PROPS = {
     label: '확인',
 };
 export class SdPopup {
+    /** 팝업 헤더에 표시할 제목 */
     popupTitle = '';
+    /** 팝업 타입 */
     type = 'default';
     // 기본 footer 표시가 자연스러운 UX. prop 이름 변경(hideFooter 등)은 public API breaking 이라 별도 이슈로 분리.
-    // eslint-disable-next-line stencil/ban-default-true
+    /** 하단 footer 영역 표시 여부 */
     useFooter = true;
+    /** 확인 버튼 커스텀 props */
     submitButtonProps;
+    /** 확인 버튼 클릭 시 발생합니다. */
     submit;
     render() {
         const cssVars = {
@@ -36,7 +40,7 @@ export class SdPopup {
             ...DEFAULT_SUBMIT_BUTTON_PROPS,
             ...this.submitButtonProps,
         };
-        return (h("div", { key: 'fd14b75d27d3006978ceae9287486d9716bbbf5a', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: 'ac0222dc9512b99cd1d1b4684b9775cd462f39fa', class: "sd-popup__header" }, h("h2", { key: 'a11bea9fac5828161090d09d06d6e1c54c390392', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: 'ced8961a853cdf014d602c235cfc839a648fb19e', class: "sd-popup__body" }, h("slot", { key: '142807fd74e8b32a31ffb7ed8f3dfdcb07a6a1ba' })), this.useFooter && (h("footer", { key: '35a6b42e82ec13890b4fa56bda5b9781adeff229', class: "sd-popup__footer" }, h("div", { key: '44b2471e0f302bd001fdf1e1d72485dff4af094f', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: 'd1c8e29b60eb7ce86639e336c99a48a67437103a', name: "footer-left" })), h("sd-button", { key: '67b0a8530cae73e344cdae2ac0cb48fa3bdf4827', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
+        return (h("div", { key: '4455120f02fc1df1b1661062a22f3d82508627c4', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: '96a5e7cdc21fa239e4275f4b57379f36246048f4', class: "sd-popup__header" }, h("h2", { key: 'cdf8d05561f470fef31c46e6508e1e0c41aa7fa9', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: 'ddb32332f8822634f544f2fa5a246c5f37c7fcc2', class: "sd-popup__body" }, h("slot", { key: '8f36daf8c918da6babcbb4383957e979930bfd73' })), this.useFooter && (h("footer", { key: '2b84ed134a8d53633bb4feb7ab423e58955dfdae', class: "sd-popup__footer" }, h("div", { key: '95e55875b38102ff809e752a3cc647dc830699a9', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: 'fbd86c77e1117018793279c9b90fd8e2f6db4934', name: "footer-left" })), h("sd-button", { key: 'e8710c15d20e52d0476e7f656e800cda008187d8', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
     }
     static get is() { return "sd-popup"; }
     static get originalStyleUrls() {
@@ -63,7 +67,7 @@ export class SdPopup {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD31D\uC5C5 \uD5E4\uB354\uC5D0 \uD45C\uC2DC\uD560 \uC81C\uBAA9"
                 },
                 "getter": false,
                 "setter": false,
@@ -90,7 +94,7 @@ export class SdPopup {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD31D\uC5C5 \uD0C0\uC785"
                 },
                 "getter": false,
                 "setter": false,
@@ -110,7 +114,7 @@ export class SdPopup {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD558\uB2E8 footer \uC601\uC5ED \uD45C\uC2DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -137,7 +141,7 @@ export class SdPopup {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD655\uC778 \uBC84\uD2BC \uCEE4\uC2A4\uD140 props"
                 },
                 "getter": false,
                 "setter": false
@@ -153,7 +157,7 @@ export class SdPopup {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD655\uC778 \uBC84\uD2BC \uD074\uB9AD \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "void",

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

@@ -1,13 +1,21 @@
 import { h } from "@stencil/core";
 export class SdPortal {
     hostEl;
+    /** 포탈 콘텐츠를 마운트할 대상 (CSS 선택자 또는 HTMLElement) */
     to = 'body';
+    /** 위치 기준이 되는 부모 엘리먼트 */
     parentRef = null;
+    /** [x, y] 오프셋 (px) */
     offset = [0, 4];
+    /** 뷰포트 경계 여백 (px) */
     viewportPadding = 0;
-    zIndex = 998;
+    /** z-index */
+    zIndex = 996;
+    /** 표시 여부 */
     open = false;
+    /** 콘텐츠를 표시할 방향 (공간이 부족하면 자동으로 반대 방향으로 전환) */
     placement = 'bottom';
+    /** 외부 클릭 등으로 닫힐 때 발생합니다. */
     close;
     container;
     wrapper;
@@ -46,13 +54,27 @@ export class SdPortal {
         const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;
         return el instanceof HTMLElement ? el : document.body;
     }
+    /**
+     * 트리거(parentRef)가 모달 내부에 있으면 해당 모달보다 위에, 아니면 페이지 기본값에 둔다.
+     * 페이지 기본값(996)은 모달(997)보다 낮아, 모달 뒤의 페이지 포털이 모달 위로 떠오르지 않는다.
+     */
+    resolveZIndex() {
+        const base = this.zIndex ?? 996;
+        const layer = this.parentRef?.closest('.sd-modal-container__layer');
+        if (!layer)
+            return base;
+        const container = layer.closest('.sd-modal-container');
+        const z = container instanceof HTMLElement ? parseInt(getComputedStyle(container).zIndex, 10) : NaN;
+        const modalZIndex = Number.isFinite(z) ? z : 997;
+        return Math.max(base, modalZIndex + 1);
+    }
     createWrapper() {
         this.wrapper = document.createElement('div');
         Object.assign(this.wrapper.style, {
             position: 'fixed',
             top: '0',
             left: '0',
-            zIndex: (this.zIndex ?? 998).toString(),
+            zIndex: this.resolveZIndex().toString(),
             opacity: '0',
             transition: 'opacity 0.15s ease-out',
             boxSizing: 'border-box',
@@ -218,8 +240,7 @@ export class SdPortal {
         return scrollParents;
     }
     isInsideTarget(target) {
-        return !!((this.wrapper?.contains(target)) ||
-            (this.parentRef?.contains(target)));
+        return !!(this.wrapper?.contains(target) || this.parentRef?.contains(target));
     }
     // 외부 클릭 감지
     handleMouseDown(e) {
@@ -235,7 +256,7 @@ export class SdPortal {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: '911d01b26a26a4bb4d7c4a15b51755acb9615c3a' });
+        return h("slot", { key: 'e4523bbb6fd56072c4f5a4dc241ab8a3ac0ea1bf' });
     }
     static get is() { return "sd-portal"; }
     static get properties() {
@@ -257,7 +278,7 @@ export class SdPortal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD3EC\uD0C8 \uCF58\uD150\uCE20\uB97C \uB9C8\uC6B4\uD2B8\uD560 \uB300\uC0C1 (CSS \uC120\uD0DD\uC790 \uB610\uB294 HTMLElement)"
                 },
                 "getter": false,
                 "setter": false,
@@ -282,7 +303,7 @@ export class SdPortal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC704\uCE58 \uAE30\uC900\uC774 \uB418\uB294 \uBD80\uBAA8 \uC5D8\uB9AC\uBA3C\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -300,7 +321,7 @@ export class SdPortal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "[x, y] \uC624\uD504\uC14B (px)"
                 },
                 "getter": false,
                 "setter": false,
@@ -318,7 +339,7 @@ export class SdPortal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBDF0\uD3EC\uD2B8 \uACBD\uACC4 \uC5EC\uBC31 (px)"
                 },
                 "getter": false,
                 "setter": false,
@@ -338,13 +359,13 @@ export class SdPortal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "z-index"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "z-index",
-                "defaultValue": "998"
+                "defaultValue": "996"
             },
             "open": {
                 "type": "boolean",
@@ -358,7 +379,7 @@ export class SdPortal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD45C\uC2DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -378,7 +399,7 @@ export class SdPortal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCF58\uD150\uCE20\uB97C \uD45C\uC2DC\uD560 \uBC29\uD5A5 (\uACF5\uAC04\uC774 \uBD80\uC871\uD558\uBA74 \uC790\uB3D9\uC73C\uB85C \uBC18\uB300 \uBC29\uD5A5\uC73C\uB85C \uC804\uD658)"
                 },
                 "getter": false,
                 "setter": false,
@@ -397,7 +418,7 @@ export class SdPortal {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC678\uBD80 \uD074\uB9AD \uB4F1\uC73C\uB85C \uB2EB\uD790 \uB54C \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "void",

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

@@ -1,10 +1,15 @@
 import { h } from "@stencil/core";
 import { RADIO_COLORS, RADIO_LAYOUT, RADIO_TYPOGRAPHY } from "./sd-radio.config";
 export class SdRadio {
+    /** 라디오 그룹의 현재 선택 값 */
     value;
+    /** 이 라디오 아이템의 값 */
     val;
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 표시할 라벨 텍스트 */
     label;
+    /** 선택 값이 변경될 때 발생합니다. */
     update;
     valueChanged(newValue) {
         this.value = newValue;
@@ -47,7 +52,7 @@ export class SdRadio {
             '--sd-radio-label-color': RADIO_COLORS.label.default,
             '--sd-radio-label-disabled-color': RADIO_COLORS.label.disabled,
         };
-        return (h("label", { key: 'f403a1fd88109a6907cc37b03b35fe5a7bbafdfb', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("input", { key: 'ba8c105d6d52bc4452e1b9614f42dfa2d99221e1', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), h("span", { key: 'd92352c59bf7f144a68decd3652dc7208b813a0e', class: "sd-radio__circle" }), this.label && (h("span", { key: 'bc0b1384dee0b22efec56249edc88184a96c6efe', class: "sd-radio__label", "data-label": this.label }, this.label))));
+        return (h("label", { key: 'f220a45add2be550bc696cd2442b8520ea0143f0', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("input", { key: '64692f5bf49783f166be9327877a474816a556ca', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), h("span", { key: '3c30268adcbd735857b4163ecba444b5a57cba08', class: "sd-radio__circle" }), this.label && (h("span", { key: 'b641086ab4ff9161ba4fb733b87c751b6863fe06', class: "sd-radio__label", "data-label": this.label }, this.label))));
     }
     static get is() { return "sd-radio"; }
     static get originalStyleUrls() {
@@ -80,7 +85,7 @@ export class SdRadio {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB77C\uB514\uC624 \uADF8\uB8F9\uC758 \uD604\uC7AC \uC120\uD0DD \uAC12"
                 },
                 "getter": false,
                 "setter": false,
@@ -105,7 +110,7 @@ export class SdRadio {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC774 \uB77C\uB514\uC624 \uC544\uC774\uD15C\uC758 \uAC12"
                 },
                 "getter": false,
                 "setter": false,
@@ -124,7 +129,7 @@ export class SdRadio {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBE44\uD65C\uC131 \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -144,7 +149,7 @@ export class SdRadio {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD45C\uC2DC\uD560 \uB77C\uBCA8 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -162,7 +167,7 @@ export class SdRadio {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC120\uD0DD \uAC12\uC774 \uBCC0\uACBD\uB420 \uB54C \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "RadioValue",

package/dist/collection/components/sd-radio-button/sd-radio-button.js

@@ -1,11 +1,17 @@
 import { h } from "@stencil/core";
 import { RADIO_BUTTON_COLORS, RADIO_BUTTON_LAYOUT, RADIO_BUTTON_SIZES, } from "./sd-radio-button.config";
 export class SdRadioButton {
+    /** 현재 선택된 값 */
     value;
+    /** 라디오 버튼 옵션 목록 */
     options = [];
+    /** 버튼 크기 */
     size = 'sm';
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** input name 속성 (없으면 자동 생성) */
     name;
+    /** 선택 값이 변경될 때 발생합니다. */
     change;
     componentWillLoad() {
         this.size ??= 'sm';
@@ -75,7 +81,7 @@ export class SdRadioButton {
             '--sd-radio-button-content-select': RADIO_BUTTON_COLORS.content.select,
             '--sd-radio-button-content-disabled': RADIO_BUTTON_COLORS.content.disabled,
         };
-        return (h("div", { key: 'b916d790862409f8b8e1da566f049daadfc4e5e2', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
+        return (h("div", { key: 'c0ed4c6927bd32a7335e003856de4b43ead97b1c', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
             const isSelected = this.isOptionSelected(option);
             const isDisabled = this.isOptionDisabled(option);
             return (h("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, h("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && h("span", { class: "sd-radio-button__label" }, option.label)));
@@ -113,7 +119,7 @@ export class SdRadioButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD604\uC7AC \uC120\uD0DD\uB41C \uAC12"
                 },
                 "getter": false,
                 "setter": false,
@@ -138,7 +144,7 @@ export class SdRadioButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB77C\uB514\uC624 \uBC84\uD2BC \uC635\uC158 \uBAA9\uB85D"
                 },
                 "getter": false,
                 "setter": false,
@@ -156,7 +162,7 @@ export class SdRadioButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBC84\uD2BC \uD06C\uAE30"
                 },
                 "getter": false,
                 "setter": false,
@@ -176,7 +182,7 @@ export class SdRadioButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBE44\uD65C\uC131 \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -196,7 +202,7 @@ export class SdRadioButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "input name \uC18D\uC131 (\uC5C6\uC73C\uBA74 \uC790\uB3D9 \uC0DD\uC131)"
                 },
                 "getter": false,
                 "setter": false,
@@ -214,7 +220,7 @@ export class SdRadioButton {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC120\uD0DD \uAC12\uC774 \uBCC0\uACBD\uB420 \uB54C \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "RadioValue",