@sellmate/design-system 1.20.1 → 1.21.0

package/dist/cjs/sd-date-range-picker-calendar.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 var useDatePicker = require('./useDatePicker-iMd6WToc.js');
 var component_datepicker = require('./component.datepicker-CUQbDSku.js');
 
@@ -31,15 +31,20 @@ const SdDateRangePickerCalendar = class {
         this.select = index.createEvent(this, "sdSelect", 7);
         this.viewChange = index.createEvent(this, "sdViewChange", 7);
     }
+    /** 선택된 날짜 범위 [시작일, 종료일] */
     value = null;
+    /** 선택 가능한 날짜 범위 제한 */
     selectable;
+    /** 최대 선택 가능 일 수 */
     maxRange;
     currentYear;
     currentMonth;
     pendingStart = '';
     hoverDate = '';
     displayValue = null;
+    /** 날짜 범위 선택 시 발생합니다. */
     select;
+    /** 달력 뷰가 변경될 때 발생합니다. */
     viewChange;
     dateUtil = useDatePicker.useDatePicker();
     componentWillLoad() {
@@ -267,7 +272,7 @@ const SdDateRangePickerCalendar = class {
             '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
             '--range-divider': RANGE_LAYOUT.divider,
         };
-        return (index.h(index.Fragment, { key: 'd46df258093b5c57d1b958efb7e52cabd4cb1eb4' }, index.h("div", { key: '04fc01524115d9b57462ad1eaf9281fe1c63dd84', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), index.h("div", { key: '91428a1dd98b7a9c534b28a9cd683f35935dfee2', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), index.h("span", { key: '26d4f7e3391c50340e0f45f018b02d11ad7bd23b', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
+        return (index.h(index.Fragment, { key: '351cf65dcf32acba409f32c5bfa0681989093f32' }, index.h("div", { key: '99f29a4e401d2ebaea0ebb55c2a4e55d55f23a7f', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), index.h("div", { key: '251fe254a39d7093633be176c413608abd3c47c1', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), index.h("span", { key: 'fb69fea401d17f3862b4a21162747161246c42e2', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
     }
     static get watchers() { return {
         "value": [{

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 var system = require('./system-MjrAugX-.js');
 
 const DIVIDER_COLORS = {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 var sanitizeInlineHtml = require('./sanitize-inline-html-CRCAeQ46.js');
 var sdButton_config = require('./sd-button.config-eTAJM2iW.js');
 var system = require('./system-MjrAugX-.js');
@@ -168,10 +168,15 @@ const SdDropdownButton = class extends BaseDropdownEvent {
         this.dropDownShow = index.createEvent(this, "sdDropDownShow", 7);
     }
     get el() { return index.getElement(this); }
+    /** 버튼 프리셋 이름 (크기와 색상 조합) */
     name = 'primary_sm';
+    /** 버튼 레이블 */
     label = '';
+    /** 드롭다운 메뉴 아이템 목록 */
     items = [];
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 레이블 버튼과 드롭다운 토글을 분리하는 split 모드 여부 */
     split = false;
     static CLOSE_ANIMATION_DURATION = 150;
     isOpen = false;
@@ -181,8 +186,11 @@ const SdDropdownButton = class extends BaseDropdownEvent {
     splitContainerRef;
     menuRef;
     closeAnimationTimer;
+    /** 메뉴 아이템 선택 시 해당 아이템의 value를 전달합니다. */
     click;
+    /** split 모드에서 레이블 버튼 클릭 시 발생합니다. */
     buttonClick;
+    /** 드롭다운 열림/닫힘 상태 변경 시 발생합니다. */
     dropDownShow;
     handleOpenChange(isOpen) {
         this.onDropdownToggle(isOpen);
@@ -199,11 +207,13 @@ const SdDropdownButton = class extends BaseDropdownEvent {
         if (this.closeAnimationTimer)
             clearTimeout(this.closeAnimationTimer);
     }
+    /** 드롭다운 메뉴를 엽니다. */
     async sdOpen() {
         if (this.disabled || this.items.length === 0)
             return;
         this.isOpen = true;
     }
+    /** 드롭다운 메뉴를 닫습니다. */
     async sdClose() {
         this.closeDropdown();
     }

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 var component_field = require('./component.field-YIQ9TAhV.js');
-var tooltipArrow = require('./tooltipArrow-D3P3JC08.js');
+var tooltipArrow = require('./tooltipArrow-26hYtSrD.js');
 
 const FIELD_ADDON_ALIGN_MAP = {
     start: 'flex-start',
@@ -48,25 +48,44 @@ const SdField = class {
         index.registerInstance(this, hostRef);
     }
     get el() { return index.getElement(this); }
+    /** 폼 연동용 name 속성 */
     name = '';
+    /** 유효성 검사 규칙 목록 */
     rules = [];
+    /** 에러 상태 여부 */
     error = false;
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 읽기 전용 여부 */
     readonly = false;
+    /** 호버 상태 여부 */
     hovered = false;
+    /** 포커스 상태 여부 */
     focused = false;
+    /** 필드 상태 (없으면 rules 결과로 자동 결정) */
     status;
+    /** 필드 하단 힌트 텍스트 */
     hint = '';
+    /** 에러 메시지 */
     errorMessage = '';
+    /** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
     width = '';
+    /** 필드 크기 */
     size = 'sm';
     // props - label
+    /** 레이블 텍스트 */
     label = '';
+    /** 레이블 너비 */
     labelWidth = '';
+    /** 필드 우측 어드온 레이블 */
     addonLabel = '';
+    /** 어드온 정렬 방향 */
     addonAlign = 'start';
+    /** 레이블 영역 아이콘 */
     icon = undefined;
+    /** 레이블 툴팁 텍스트 */
     labelTooltip = '';
+    /** 레이블 툴팁 상세 옵션 */
     labelTooltipProps = null;
     errorMsg = '';
     hostElement = null;
@@ -131,6 +150,7 @@ const SdField = class {
             form.sdUnregisterField(this);
         });
     }
+    /** 유효성 검사를 실행합니다. */
     async sdValidate() {
         if (!this.rules || this.rules.length === 0)
             return true;
@@ -144,15 +164,18 @@ const SdField = class {
         this.setError(false, '');
         return true;
     }
+    /** 필드 값과 유효성 상태를 초기화합니다. */
     async sdReset() {
         if (this.hostElement) {
             this.hostElement.value = null;
         }
         this.setError(false, '');
     }
+    /** 유효성 상태만 초기화합니다. */
     async sdResetValidation() {
         this.setError(false, '');
     }
+    /** 필드에 포커스를 이동하고 스크롤합니다. */
     async sdFocus() {
         this.hostElement?.focus?.();
         this.hostElement?.scrollIntoView({ behavior: 'smooth', block: 'center' });
@@ -216,21 +239,21 @@ const SdField = class {
                     : {}),
             }
             : {};
-        return (index.h("div", { key: '76a1a2f41cafb2a665415f4e6e7bd9561aacb57f', class: {
+        return (index.h("div", { key: 'baf943d77385c9c02e2fe1d938f9622bd858129c', class: {
                 'sd-field': true,
                 'sd-field--has-label': this.label !== '',
                 'sd-field--has-addon': addon !== '',
                 [this.fieldStatus]: this.fieldStatus !== '',
-            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, index.h("div", { key: 'b4219a5e3e80ead00b0cb67d6c5c8a1b25e59f57', class: "sd-field__wrapper" }, this.renderLabel(this.label), index.h("div", { key: '91dd10be9bf9fe70615d6f4f0ee00601cab5ee4a', class: "sd-field__main", style: this.width !== '' && this.width !== 0
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, index.h("div", { key: 'f5f204929ef4a4e1a260d7609bc00d9a1fe998f4', class: "sd-field__wrapper" }, this.renderLabel(this.label), index.h("div", { key: 'eff02956e5aae08691b2850bb0d1978865a446f9', class: "sd-field__main", style: this.width !== '' && this.width !== 0
                 ? {
                     width: typeof this.width === 'number' ? `${this.width}px` : this.width,
                     flex: 'none',
                 }
-                : {} }, index.h("div", { key: 'd15df53ff3d76ab9f9bd5e6ffe55f98b53c1211a', class: {
+                : {} }, index.h("div", { key: 'bf00b81dbb3d36a8a8ddf4919c9ec3383a1f3f14', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': addon !== '',
-            } }, addon && (index.h("div", { key: 'fa65e5f352e20ae9f533bdf93d95b2d2f3ec4d7b', class: "sd-field__addon" }, this.icon && (index.h("sd-icon", { key: '5c6d67ca4a72191622d14727567b8bca0975dcee', name: this.icon.name, size: this.icon.size ??
-                Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), index.h("slot", { key: 'c4f4e9392b3e6df8bba7a0f9e39bb3847ccf5931' })), this.errorMsg !== '' || this.errorMessage !== '' ? (index.h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && index.h("div", { class: "sd-field__hint" }, this.hint))))));
+            } }, addon && (index.h("div", { key: '4cef1308de0b709d5924ff7a02ee5bd3b78c1502', class: "sd-field__addon" }, this.icon && (index.h("sd-icon", { key: '7fdfca555d80f5409082c43967224fd8108a6f29', name: this.icon.name, size: this.icon.size ??
+                Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), index.h("slot", { key: 'c523813390db6f6f4acce3ffb8377820ffb95fad' })), this.errorMsg !== '' || this.errorMessage !== '' ? (index.h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && index.h("div", { class: "sd-field__hint" }, this.hint))))));
     }
     renderLabel(label) {
         if (label == null || label === '')
@@ -249,12 +272,19 @@ const SdFloatingPopover = class {
         this.close = index.createEvent(this, "sdClose", 7);
     }
     get el() { return index.getElement(this); }
+    /** 포탈 콘텐츠를 마운트할 대상 (CSS 선택자 또는 HTMLElement) */
     to = 'body';
+    /** 위치 기준이 되는 부모 엘리먼트 */
     parentRef = null;
+    /** [x, y] 오프셋 (px) */
     offset = [0, 0];
-    zIndex = 998;
+    /** z-index */
+    zIndex = 996;
+    /** 콘텐츠를 표시할 방향 */
     placement = 'bottom';
+    /** 표시 여부 */
     open = false;
+    /** 외부 클릭 등으로 닫힐 때 발생합니다. */
     close;
     container;
     wrapper;
@@ -309,11 +339,25 @@ const SdFloatingPopover = class {
         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',
-            zIndex: (this.zIndex ?? 998).toString(),
+            zIndex: this.resolveZIndex().toString(),
             transition: 'opacity 0.4s',
             top: '-9999px',
             left: '-9999px',
@@ -400,7 +444,7 @@ const SdFloatingPopover = class {
         }
     }
     render() {
-        return index.h("slot", { key: '77829bed54180a72d233738d1f82d9996ae29cae' });
+        return index.h("slot", { key: 'ee2a502ac1c924abb9be9fae19b4450659515c15' });
     }
 };
 SdFloatingPopover.style = sdFloatingPortalCss();
@@ -437,19 +481,33 @@ const SdTooltip = class {
         index.registerInstance(this, hostRef);
     }
     get el() { return index.getElement(this); }
+    /** 툴팁 트리거 방식 */
     trigger = 'hover';
+    /** 툴팁 표시 방향 */
     placement = 'top';
+    /** 아이콘 트리거 색상 */
     color = '#01BB4B';
+    /** 툴팁 배경/텍스트 색상 타입 */
     tooltipType = 'default';
+    /** 아이콘 트리거 아이콘명 */
     icon = 'helpOutline';
+    /** 아이콘 트리거 크기 */
     iconSize = 12;
+    /** 버튼 트리거 레이블 (있으면 아이콘 대신 버튼 렌더링) */
     label = '';
+    /** 버튼 트리거 프리셋 */
     name = 'primary_sm';
+    /** 버튼 트리거 우측 아이콘 */
     rightIcon;
+    /** 스크린리더용 접근성 레이블 */
     ariaLabel = '';
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 버튼 type 속성 */
     type = 'button';
+    /** 툴팁 우측 상단 닫기 버튼 표시 여부 */
     useClose = false;
+    /** 트리거 래퍼(.sd-tooltip-trigger)에 추가할 클래스 */
     sdClass = '';
     /**
      * 툴팁 본문에 표시할 메시지. 각 항목이 한 줄로 innerHTML 렌더링됩니다.
@@ -562,7 +620,7 @@ const SdTooltip = class {
         const bodyHTML = this.message && this.message.length > 0
             ? this.message.map(line => `<div>${line}</div>`).join('')
             : this.slotContentHTML;
-        return (index.h(index.Fragment, { key: 'da2904e5cc41627283ff383366548453ef892dbc' }, index.h("div", { key: 'e94184fa6a51524f0dc5d3ba0610a3fa63663b4f', ref: el => (this.triggerEl = el), class: triggerClasses, ...divTrigger }, anchorMode ? (index.h("slot", { name: "anchor" })) : hasLabel ? (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, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (index.h("sd-floating-portal", { key: '52b86274d938e67a89018839812b4d26108f0921', parentRef: anchorMode ? this.triggerEl : this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, index.h("div", { key: '177149d153ca4659a1dc4b71cd9d98cf36e19cd9', ref: el => (this.menuEl = el), class: {
+        return (index.h(index.Fragment, { key: 'c5a5c69267ac8a7d7f06324a63b6410092b84f04' }, index.h("div", { key: 'f7323385e1b2e6ef4199c6318bdc55984182d3da', ref: el => (this.triggerEl = el), class: triggerClasses, ...divTrigger }, anchorMode ? (index.h("slot", { name: "anchor" })) : hasLabel ? (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, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (index.h("sd-floating-portal", { key: '0ba07ee2a20862df43755264d9390b3229da57e6', parentRef: anchorMode ? this.triggerEl : this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, index.h("div", { key: 'f92217cb8cca4d1467cbeac7b36f9a00f28babd3', ref: el => (this.menuEl = el), class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${tooltipType}`]: true,
                 [`sd-floating-menu--${placement}`]: true,
@@ -570,7 +628,7 @@ const SdTooltip = class {
             }, style: {
                 '--sd-floating-bg': typeConfig.bg,
                 '--sd-floating-content': typeConfig.content,
-            }, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, index.h("i", { key: '6412bc25156af7a4bc276bc29f46458df7ac123b', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, index.h(tooltipArrow.TooltipArrow, { key: 'af6b98e12d0ce7816b9888614d7f70e93c9accd6' })), index.h("div", { key: '4b3bdb5eda8a67374a68e2ef3dbc51d630720c08', class: "sd-floating-menu__content", innerHTML: bodyHTML }), this.useClose && (index.h("sd-ghost-button", { key: '2bbe32da05ec4e84dba7b00d12826d9fb2492dfe', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xxs", onClick: () => this.closeTooltip() })))))));
+            }, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, index.h("i", { key: '6d7671dbac4fa026788f0804df4a97ca86c492c1', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '31321fbfef392af0fa64111a32c3ecd6c6144d35' })), index.h("div", { key: '67e54a935c9f684d713ab943e7049737d5a8596a', class: "sd-floating-menu__content", innerHTML: bodyHTML }), this.useClose && (index.h("sd-ghost-button", { key: '355101a4efed88fbb687e1f972f88b6dfb4be309', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xxs", onClick: () => this.closeTooltip() })))))));
     }
 };
 SdTooltip.style = sdTooltipCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 
 const SdForm = class {
     constructor(hostRef) {
@@ -8,9 +8,12 @@ const SdForm = class {
         this.sdSubmit = index.createEvent(this, "sdSubmit", 7);
         this.sdValidationError = index.createEvent(this, "sdValidationError", 7);
     }
+    /** form 엘리먼트에 추가할 클래스 */
     formClass = '';
     fields = [];
+    /** 유효성 검사 통과 후 submit 시 발생합니다. */
     sdSubmit;
+    /** 유효성 검사 실패 시 실패한 필드 name 목록을 전달합니다. */
     sdValidationError;
     sortFieldsByDomOrder() {
         this.fields.sort((a, b) => {
@@ -28,6 +31,7 @@ const SdForm = class {
             return 0;
         });
     }
+    /** 폼에 필드를 등록합니다. */
     async sdRegisterField(field) {
         if (field.name === '') {
             console.warn('[sd-form] field.name is required');
@@ -38,6 +42,7 @@ const SdForm = class {
         this.fields.push(field);
         this.sortFieldsByDomOrder();
     }
+    /** 폼에서 필드를 제거합니다. */
     async sdUnregisterField(fieldOrName) {
         if (typeof fieldOrName === 'string') {
             const index = this.fields.findIndex(field => field.name === fieldOrName);
@@ -58,13 +63,16 @@ const SdForm = class {
         }
         return { valid: invalidFields.length === 0, invalidFields };
     }
+    /** 모든 등록된 필드의 유효성 검사를 실행합니다. */
     async sdValidate() {
         const { valid } = await this.runValidation();
         return valid;
     }
+    /** 모든 필드의 값과 유효성 상태를 초기화합니다. */
     async sdReset() {
         this.fields.forEach(f => f.sdReset());
     }
+    /** 모든 필드의 유효성 상태만 초기화합니다. */
     async sdResetValidation() {
         this.fields.forEach(f => f.sdResetValidation());
     }
@@ -78,7 +86,7 @@ const SdForm = class {
         this.sdSubmit.emit();
     }
     render() {
-        return (index.h("form", { key: 'd64dc85bce08da6a18f7dac5038a89f8bd7b5f01', onSubmit: e => this.onSubmit(e), class: this.formClass }, index.h("slot", { key: 'a0c6d177cc4c656369714ff0ebc5269255d2c2b5' })));
+        return (index.h("form", { key: 'f533f9dcf3a13e66d37644baa5217b90a67350a2', onSubmit: e => this.onSubmit(e), class: this.formClass }, index.h("slot", { key: '8a108703faeb2ed7d1e47a72b407b7a7fc88063d' })));
     }
 };
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 
 const ghostButton = {
 	xxs: {
@@ -121,14 +121,21 @@ const SdGhostButton = class {
         index.registerInstance(this, hostRef);
         this.click = index.createEvent(this, "sdClick", 7);
     }
+    /** 버튼에 표시할 아이콘명 */
     icon;
+    /** 버튼 크기 */
     size = 'sm';
+    /** 버튼 색상 의도 */
     intent = 'default';
+    /** 스크린리더용 접근성 레이블 */
     ariaLabel = '';
+    /** 호버 시 표시할 툴팁 텍스트 */
     tooltipText;
+    /** 비활성 상태 여부 */
     disabled = false;
     get hostEl() { return index.getElement(this); }
     isTooltipOpen = false;
+    /** 버튼 클릭 시 발생합니다. */
     click;
     hasWarnedMissingAriaLabel = false;
     componentWillLoad() {
@@ -143,10 +150,18 @@ const SdGhostButton = class {
         }
         this.click.emit(event);
     };
-    handleMouseEnter = () => { this.isTooltipOpen = true; };
-    handleMouseLeave = () => { this.isTooltipOpen = false; };
-    handleFocus = () => { this.isTooltipOpen = true; };
-    handleBlur = () => { this.isTooltipOpen = false; };
+    handleMouseEnter = () => {
+        this.isTooltipOpen = true;
+    };
+    handleMouseLeave = () => {
+        this.isTooltipOpen = false;
+    };
+    handleFocus = () => {
+        this.isTooltipOpen = true;
+    };
+    handleBlur = () => {
+        this.isTooltipOpen = false;
+    };
     componentWillRender() {
         this.warnIfMissingAriaLabel();
     }
@@ -171,7 +186,7 @@ const SdGhostButton = class {
         const accessibleName = (this.ariaLabel ?? '').trim() || undefined;
         const tooltipText = (this.tooltipText ?? '').trim();
         const hasTooltip = tooltipText.length > 0;
-        return (index.h("button", { key: '59b95275f6acd737d4b0d5c2187e1d40b3a6543f', class: {
+        return (index.h("button", { key: 'a49c5b93f4dfcd434c20225acae4c7454e8f8e4f', class: {
                 'sd-ghost-button': true,
                 'sd-ghost-button--disabled': this.disabled,
             }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
@@ -180,7 +195,7 @@ const SdGhostButton = class {
                 '--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 && !this.disabled && (index.h("sd-portal", { key: 'd8ca94b6a931208c2c56eb2dbfee843935c6b666', parentRef: this.hostEl, open: true, offset: [sizeConfig.size / 2, 4], placement: "top" }, index.h("div", { key: '450d5dc528ad4eeb4a2a0d2920fe4553ab3f91f8', class: "sd-ghost-button__tooltip-inner", "aria-hidden": "true" }, index.h("sd-tag", { key: 'cc25d0e2794d3d4dc418b0c0aa1a57e4b76b56e1', name: "square_xs_grey", label: tooltipText })))), index.h("sd-icon", { key: 'bf9bf8bcc779011635fd34566ec7320d76f8d16b', 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 && !this.disabled && (index.h("sd-portal", { key: '36ef78d79a99da1fd26c282ef68293b9fb9f87b1', parentRef: this.hostEl, open: true, offset: [sizeConfig.size / 2, 4], placement: "top" }, index.h("div", { key: 'a0cf8b4e84a79841ab09e6a81ee6bcbfe57e6805', class: "sd-ghost-button__tooltip-inner", "aria-hidden": "true" }, index.h("sd-tag", { key: 'a263167142b891add0a32900504f541dcb3a4959', name: "square_xs_grey", label: tooltipText })))), index.h("sd-icon", { key: 'ba90e9b489b4f43577313052635db598e3d30037', name: this.icon, size: sizeConfig.icon, color: contentColor })));
     }
 };
 SdGhostButton.style = sdGhostButtonCss();
@@ -191,13 +206,21 @@ const SdPortal = class {
         this.close = index.createEvent(this, "sdClose", 3);
     }
     get hostEl() { return index.getElement(this); }
+    /** 포탈 콘텐츠를 마운트할 대상 (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;
@@ -236,13 +259,27 @@ const SdPortal = class {
         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',
@@ -408,8 +445,7 @@ const SdPortal = class {
         return scrollParents;
     }
     isInsideTarget(target) {
-        return !!((this.wrapper?.contains(target)) ||
-            (this.parentRef?.contains(target)));
+        return !!(this.wrapper?.contains(target) || this.parentRef?.contains(target));
     }
     // 외부 클릭 감지
     handleMouseDown(e) {
@@ -425,7 +461,7 @@ const SdPortal = class {
         this.close.emit();
     }
     render() {
-        return index.h("slot", { key: '911d01b26a26a4bb4d7c4a15b51755acb9615c3a' });
+        return index.h("slot", { key: 'e4523bbb6fd56072c4f5a4dc241ab8a3ac0ea1bf' });
     }
     static get watchers() { return {
         "open": [{
@@ -615,11 +651,14 @@ const SdTag = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
+    /** 태그 프리셋 이름 */
     name = 'square_sm_grey';
+    /** 표시할 레이블 텍스트 */
     label = '';
+    /** 아이콘명 */
     icon;
     // 아이콘이 좌측 배치되는 게 자연스러운 default. prop 이름 변경(isRight 등)은 public API breaking 이라 별도 이슈로 분리.
-    // eslint-disable-next-line stencil/ban-default-true
+    /** true이면 아이콘을 레이블 왼쪽에 배치 */
     isLeft = true;
     componentWillLoad() {
         this.name = this.name ?? 'square_sm_grey';
@@ -641,7 +680,7 @@ const SdTag = class {
     render() {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (index.h("span", { key: '3117d8d5f3d9751dc193e426dbab7e0ead9fb369', class: "sd-tag", style: {
+        return (index.h("span", { key: '09cc181654983b64dec9860fdf656677ebcfcd15', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -651,7 +690,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: '8c299f140dc5bd026ed52d3f0921939bbf69fdd5', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, index.h("span", { key: '044ab51afc474799b400c608fd5531bed9a7ad18', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
 };
 SdTag.style = sdTagCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 var system = require('./system-MjrAugX-.js');
 var sanitizeInlineHtml = require('./sanitize-inline-html-CRCAeQ46.js');
 
@@ -122,11 +122,17 @@ const SdGuide = class {
         index.registerInstance(this, hostRef);
     }
     get el() { return index.getElement(this); }
+    /** 가이드 타입 (tip: 팝업, notion: 외부 링크) */
     type = 'tip';
+    /** 버튼에 표시할 레이블 (없으면 type에 따른 기본값 사용) */
     label = '';
+    /** 팝업에 표시할 메시지 (배열이면 리스트로 렌더링) */
     message = '';
+    /** notion 타입일 때 클릭 시 이동할 URL */
     url = '';
+    /** 팝업 제목 (없으면 type에 따른 기본값 사용) */
     popupTitle = '';
+    /** 팝업 너비 (px, 없으면 426px) */
     popupWidth;
     popupShow = false;
     guideRef;
@@ -188,10 +194,10 @@ const SdGuide = class {
         const buttonClasses = ['sd-guide__button', `sd-guide__button--type-${this.type ?? 'tip'}`];
         if (isActive)
             buttonClasses.push('sd-guide__button--active');
-        return (index.h("div", { key: 'ea4f220faf6165f7650360f74a19d9f781b81489', class: "sd-guide", style: this.guideStyle }, index.h("sd-button", { key: 'c90eaa6cc42a9a2f20b8fc79db16697db0cf2ff2', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), name: isActive ? 'primary_sm' : 'neutral_outline_sm', label: this.label || defaultLabel, icon: iconName, onSdClick: this.handleClickGuide }), this.popupShow && (index.h("sd-portal", { key: '21f57a739141ffa36f3b799a2688ca5b3c1bd428', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, index.h("div", { key: '94e12fa797748a02334b97e13c5012ab95bc2bce', class: "sd-guide__popup", style: {
+        return (index.h("div", { key: 'd89a517d78a8f9624c94d320291e5a4b5bd0715d', class: "sd-guide", style: this.guideStyle }, index.h("sd-button", { key: '6e959f0f5fd6f816fd1cef4545852b860d30de85', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), name: isActive ? 'primary_sm' : 'neutral_outline_sm', label: this.label || defaultLabel, icon: iconName, onSdClick: this.handleClickGuide }), this.popupShow && (index.h("sd-portal", { key: 'a837cababa5504400293729ad28e4dcd2450eeec', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, index.h("div", { key: '61dd3c574495f85021495d80865e162999368f9c', class: "sd-guide__popup", style: {
                 ...this.guideStyle,
                 width: this.popupWidth != null ? this.popupWidth + 'px' : '426px',
-            } }, index.h("sd-ghost-button", { key: '6fc71032016e7a3be0581508ef0ecc6772981185', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), index.h("div", { key: '385c0c18bc888be6a654525dc6f4359a56ad6de9', class: "sd-guide__popup__header" }, index.h("sd-icon", { key: '34624d2ac3397ba15b2dc7ba23dc460a87cb878b', name: iconName, size: 24, color: popupIconColor }), index.h("h3", { key: 'dd3527ec329698b0fd1ec82f2a7d0cf5865802c2', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), index.h("ul", { key: '429357d0203acdf31177353ceb45d9ac41fadae7', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
+            } }, index.h("sd-ghost-button", { key: 'dbf8aebd1be4b5286bf726d22e0a5f80c29e867f', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), index.h("div", { key: '5a08fa823bb8839e654d7bb2ba027df2dc68b85b', class: "sd-guide__popup__header" }, index.h("sd-icon", { key: '1dda43d100b4f5f3b7fa81115a1ac4bfbd584a51', name: iconName, size: 24, color: popupIconColor }), index.h("h3", { key: 'cfe6342f44f4e1355397ed94d6db74807f917548', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), index.h("ul", { key: '9acc2f507ed3d3d6f1fda27a9e5cf66dcc2f619d', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 var system = require('./system-MjrAugX-.js');
 var component_table = require('./component.table-DIxmbGBT.js');
 
@@ -63,7 +63,9 @@ const SdKeyValueTable = class {
      * - 'full': 상하단 모두 radius 0 (요소 사이에 끼워 쓸 때)
      */
     radius = 'default';
+    /** 필드 값이 변경될 때 `{ name, value }` 형태로 발생합니다. */
     change;
+    /** search 패널의 검색 버튼 클릭 시 발생합니다. */
     searchEvent;
     emit = (name, value) => {
         this.change.emit({ name, value });