@sellmate/design-system 1.20.1 → 1.22.0

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 var component_progress = require('./component.progress-Bmg3vAAy.js');
 var system = require('./system-MjrAugX-.js');
 
@@ -22,9 +22,13 @@ const SdLinearProgress = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
+    /** true이면 진행률 없이 무한 애니메이션 표시 */
     indeterminate = false;
+    /** 진행률 (0–100) */
     value = 0;
+    /** 색상 타입 */
     type = 'primary';
+    /** 하단에 표시할 레이블 텍스트 */
     label;
     get clampedValue() {
         if (!Number.isFinite(this.value))
@@ -32,8 +36,7 @@ const SdLinearProgress = class {
         return Math.max(0, Math.min(100, this.value));
     }
     render() {
-        const fillColor = LINEAR_PROGRESS_FILL_COLOR_MAP[this.type] ??
-            LINEAR_PROGRESS_FILL_COLOR_MAP.primary;
+        const fillColor = LINEAR_PROGRESS_FILL_COLOR_MAP[this.type] ?? LINEAR_PROGRESS_FILL_COLOR_MAP.primary;
         const valueColor = this.clampedValue === 0 ? LINEAR_PROGRESS_COLORS.valueZero : fillColor;
         const hostStyle = {
             '--sd-linear-progress-track-color': LINEAR_PROGRESS_COLORS.track,
@@ -49,7 +52,7 @@ const SdLinearProgress = class {
             clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
         };
         const valueText = `${Math.round(this.clampedValue)}%`;
-        return (index.h(index.Host, { key: '1e6aa9c81d3e9516a2f986d3f209df005de38f48', style: hostStyle }, index.h("div", { key: '06115d6245603c7ae54d892a23074f34db203592', class: 'sd-linear-progress__track' }, index.h("div", { key: '353549cb3c885cef86f114830599f375bfad8e50', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (index.h("span", { key: '61afec063cd8f6ccaca27217fe7b599926245192', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (index.h("span", { key: 'fec238b0a6c73e06db3e53c019319a21b62e2836', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && index.h("span", { key: '668f63765b78c1047e3b850f3a17d6b2a1b9bfd4', class: 'sd-linear-progress__label' }, this.label)));
+        return (index.h(index.Host, { key: '232520f9e720d13e28bbac8f61864e943f03c12e', style: hostStyle }, index.h("div", { key: '6c5659e65da3f6d01c1029d9441f8619c304935c', class: "sd-linear-progress__track" }, index.h("div", { key: '81f1c5ca5e4422e33f5505eda07fd4a04b24465c', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (index.h("span", { key: 'd3542eddf302448742a3564c6f48d4d3f71d3733', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (index.h("span", { key: 'f9c650167b1d9653a6745399226e480f15c19f65', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && index.h("span", { key: 'fa8759f871902a4c3ebf0d982fe9b63d956a2f24', class: "sd-linear-progress__label" }, this.label)));
     }
 };
 SdLinearProgress.style = sdLinearProgressCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 
 const sdLoadingContainerCss = () => `sd-loading-container .sd-loading-container{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--sd-loading-container-z-index, 999);opacity:0;visibility:hidden;transition:opacity 0.2s ease, visibility 0s linear 0.2s;pointer-events:none}sd-loading-container .sd-loading-container--visible{opacity:1;visibility:visible;transition:opacity 0.2s ease, visibility 0s linear 0s;pointer-events:auto}sd-loading-container .sd-loading-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4)}sd-loading-container .sd-loading-container__content{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px}sd-loading-container .sd-loading-container__message{margin:0;color:#ffffff;font-size:14px;font-weight:500;line-height:22px;text-align:center;max-width:400px;word-break:keep-all}`;
 
@@ -10,18 +10,20 @@ const SdLoadingContainer = class {
     }
     visible = false;
     message = '';
+    /** 로딩 오버레이를 표시합니다. */
     async show(options = {}) {
         this.message = options.message ?? '';
         this.visible = true;
     }
+    /** 로딩 오버레이를 숨깁니다. */
     async hide() {
         this.visible = false;
     }
     render() {
-        return (index.h("div", { key: '6525405e4edafd9257be9887cca824a436b2807c', class: {
+        return (index.h("div", { key: 'b8efbc6422fded2472a6e575c9a7102375f90600', class: {
                 'sd-loading-container': true,
                 'sd-loading-container--visible': this.visible,
-            }, "aria-hidden": this.visible ? 'false' : 'true' }, index.h("div", { key: 'd5f1e1e3df8b704d4a5dabe8cf7b50cc07a2699a', class: "sd-loading-container__backdrop" }), index.h("div", { key: '40dce62049e04a997b982ab65b47a755b6e917c7', class: "sd-loading-container__content" }, index.h("sd-circle-progress", { key: '9cb7a1ed52433f2d0982ceef1a298b1367a99dd4', indeterminate: true, type: "inverse" }), this.message && (index.h("p", { key: 'bc581b692122ef5553e4e8eb99056b89257eb6d9', class: "sd-loading-container__message" }, this.message)))));
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, index.h("div", { key: '1ff327157be008e278636d49069945e553c1ecbd', class: "sd-loading-container__backdrop" }), index.h("div", { key: 'd55d2ab11528e35c04e8dd98f8c10d0f913a536e', class: "sd-loading-container__content" }, index.h("sd-circle-progress", { key: '29060ee18eb4e5a47bae25462abe11b8d5abfb0c', indeterminate: true, type: "inverse" }), this.message && index.h("p", { key: 'cf0478da282996ba4f7ecb920d8262181369af8a', class: "sd-loading-container__message" }, this.message))));
     }
 };
 SdLoadingContainer.style = sdLoadingContainerCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 var modalStack = require('./modal-stack-DucFLON7.js');
 
 const sdModalContainerCss = () => `sd-modal-container{display:block}sd-modal-container .sd-modal-container{position:fixed;inset:0;z-index:var(--sd-modal-container-z-index, 997);pointer-events:none}sd-modal-container .sd-modal-container__layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}sd-modal-container .sd-modal-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4);opacity:0;transition:opacity 0.3s ease-out;pointer-events:none}sd-modal-container .sd-modal-container__backdrop--visible{opacity:1;pointer-events:auto}sd-modal-container .sd-modal-container__modal{position:relative;z-index:1;opacity:0;transform:scale(0);pointer-events:auto;transition:opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}sd-modal-container .sd-modal-container__modal--visible{opacity:1;transform:scale(1)}sd-modal-container .sd-modal-container__modal--shake{animation:modal-shake 0.3s ease-out}@keyframes modal-shake{0%,100%{transform:scale(1)}25%{transform:scale(1.03)}50%{transform:scale(0.97)}75%{transform:scale(1.01)}}`;
@@ -13,9 +13,11 @@ const SdModalContainer = class {
         index.registerInstance(this, hostRef);
     }
     get el() { return index.getElement(this); }
+    /** 마지막 모달이 닫힐 때 자신을 DOM에서 제거할지 여부 */
     autoRemove = false;
     entries = [];
     layerRefs = new Map();
+    /** 확인 모달을 열고 모달 ID를 반환합니다. */
     async open(options, modalRef) {
         const id = `modal-${++modalIdCounter}`;
         const modalEl = this.createConfirmModal(id, options);
@@ -30,6 +32,7 @@ const SdModalContainer = class {
         });
         return id;
     }
+    /** 로딩 모달을 열고 모달 ID를 반환합니다. */
     async openLoading(options, modalRef) {
         const id = `modal-${++modalIdCounter}`;
         const modalEl = this.createLoadingModal(id, options);
@@ -44,6 +47,7 @@ const SdModalContainer = class {
         });
         return id;
     }
+    /** 커스텀 엘리먼트를 모달로 등록하고 모달 ID를 반환합니다. */
     async createCustom(element, options, modalRef) {
         const id = `modal-${++modalIdCounter}`;
         element.setAttribute('data-modal-id', id);
@@ -89,12 +93,14 @@ const SdModalContainer = class {
             modalStack.unregisterModal(entry.id);
         }
     }
+    /** 지정한 ID의 모달을 닫습니다. */
     async dismissById(id, reason) {
         const entry = this.entries.find(e => e.id === id);
         if (!entry)
             return;
         this.requestDismiss(id, reason);
     }
+    /** 열려있는 모달의 props를 동적으로 업데이트합니다. */
     async update(id, props) {
         const entry = this.entries.find(e => e.id === id && !e.closing);
         if (!entry)

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 var constants = require('./constants-DJRV1upE.js');
 var sdTable_config = require('./sd-table.config-B7MuRLoR.js');
 require('./component.table-DIxmbGBT.js');
@@ -80,9 +80,13 @@ const SdPagination = class {
         index.registerInstance(this, hostRef);
         this.pageChange = index.createEvent(this, "sdPageChange", 7);
     }
+    /** 현재 페이지 번호 */
     currentPage = 1;
+    /** 마지막 페이지 번호 */
     lastPage = 1;
+    /** true이면 현재/마지막 페이지만 표시하는 단순 모드 */
     simple = false;
+    /** 페이지가 변경될 때 새 페이지 번호를 전달합니다. */
     pageChange;
     get pageNumbers() {
         const start = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
@@ -154,13 +158,13 @@ const SdPagination = class {
             '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
             '--sd-pagination-item-width': `${this.buttonWidth}px`,
         };
-        return (index.h("div", { key: '8a2219bbc3a17951ed66501e7246f230f0495e74', class: {
+        return (index.h("div", { key: '733bf7952c4e38a65a1042c6a8784d6502c81667', class: {
                 'sd-pagination': true,
                 'sd-pagination--simple': this.simple,
-            }, style: cssVars }, index.h("div", { key: '7e9ddb98aff7506fc3b6053d84c1be211e3d1ff7', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "sd-pagination__info" }, index.h("span", { class: "sd-pagination__current" }, this.currentPage), index.h("span", { class: "sd-pagination__divider" }, "/"), index.h("span", { class: "sd-pagination__last" }, this.lastPage))) : (index.h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (index.h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+            }, style: cssVars }, index.h("div", { key: '4c23bdfb9a58950a04107fc4b4c921bbafa4e601', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "sd-pagination__info" }, index.h("span", { class: "sd-pagination__current" }, this.currentPage), index.h("span", { class: "sd-pagination__divider" }, "/"), index.h("span", { class: "sd-pagination__last" }, this.lastPage))) : (index.h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (index.h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'sd-pagination__item': true,
                 'sd-pagination__item--selected': this.currentPage === n,
-            }, onClick: () => this.handlePageChange(n) }, n))))), index.h("div", { key: '937554ea8d3ae71da85e2c1f49d82c99658141f0', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n))))), index.h("div", { key: 'a0406c1f9cd13970d47f25ed88095ac1c684203c', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
     }
 };
 SdPagination.style = sdPaginationCss();
@@ -172,6 +176,7 @@ const SdTbody = class {
         index.registerInstance(this, hostRef);
     }
     get el() { return index.getElement(this); }
+    /** 렌더링할 행 데이터 목록 */
     rows = [];
     tableId = '';
     topSpacerHeight = 0;
@@ -215,9 +220,9 @@ const SdTbody = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'ae49b4a7e18afd3d44d07e7da6c3663a6a043796', slot: `${this.tableId}-body` }, index.h("tbody", { key: '7275cf9214f6917c5437b8a72a06cde3ca48dc8c', class: { tbody: true } }, [
+        return (index.h(index.Host, { key: '0f85168b22221551714f3c75bd12c366538cc5ec', slot: `${this.tableId}-body` }, index.h("tbody", { key: 'f9a8528d40c51988cfbca2c349905dafdafce8d3', class: { tbody: true } }, [
             this.topSpacerHeight > 0 && (index.h("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
-            index.h("slot", { key: '6455be878c24df5371e094fbfe9687ddb992e0e6' }),
+            index.h("slot", { key: '7ecfe2f730b4c909d394fdee2d9aa015c5410cb4' }),
             this.bottomSpacerHeight > 0 && (index.h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
         ])));
     }
@@ -229,7 +234,7 @@ const SdTbody = class {
 };
 SdTbody.style = sdTbodyCss();
 
-const sdTheadCss = () => `sd-thead{display:contents}sd-thead *{box-sizing:border-box}.thead{display:table-header-group;height:var(--table-header-height, 36px)}.thead--sticky{position:sticky;top:0;z-index:120}.tr{display:table-row;width:100%}.th{display:table-cell;background:var(--table-header-bg, #F5FAFF);height:var(--table-header-height, 36px);padding:0 var(--table-header-padding-x, 16px);font-family:var(--table-header-font-family, inherit);font-weight:var(--table-header-font-weight, 500);font-size:var(--table-header-font-size, 12px);line-height:var(--table-header-line-height, 20px);text-decoration:var(--table-header-text-decoration, none);vertical-align:middle;border-bottom:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);-webkit-user-select:none;user-select:none;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th--selected{position:relative;width:var(--table-selectable-width, 48px) !important;max-width:var(--table-selectable-width, 48px) !important;min-width:var(--table-selectable-width, 48px) !important;text-align:center}.th--selected sd-checkbox label{position:relative}.th--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.th.sticky-left{position:sticky;background-color:var(--table-header-bg, #F5FAFF);z-index:110 !important;left:var(--sticky-left-offset, 0)}.th.sticky-right{position:sticky;background-color:var(--table-header-bg, #F5FAFF);z-index:110 !important;right:var(--sticky-right-offset, 0)}.th.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.th.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.th.sticky-left-edge.is-scrolled-left{overflow:visible}.th.sticky-left-edge.is-scrolled-left:after{opacity:1}.th.sticky-right-edge.is-scrolled-right{overflow:visible}.th.sticky-right-edge.is-scrolled-right:after{opacity:1}.th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:var(--table-header-gap, 4px)}.th__content--left{justify-content:flex-start}.th__content--center{justify-content:center}.th__content--right{justify-content:flex-end}.th__content--label{white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th__bar{position:absolute;top:50%;right:0;transform:translateY(-50%);width:var(--table-border-width, 1px);height:var(--table-header-resizer-height, 16px);z-index:3;background-color:var(--table-header-resizer-color, #CCCCCC)}.th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:var(--table-header-resizer-height, 16px);cursor:col-resize;z-index:3;border-left:var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC);border-right:var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC)}.th__resizer--left{right:auto;left:0}`;
+const sdTheadCss = () => `sd-thead{display:contents}sd-thead *{box-sizing:border-box}.thead{display:table-header-group;height:var(--table-header-height, 36px)}.thead--sticky{position:sticky;top:0;z-index:120}.tr{display:table-row;width:100%}.th{display:table-cell;background:var(--table-header-bg, #F5FAFF);height:var(--table-header-height, 36px);padding:0 var(--table-header-padding-x, 16px);font-family:var(--table-header-font-family, inherit);font-weight:var(--table-header-font-weight, 500);font-size:var(--table-header-font-size, 12px);line-height:var(--table-header-line-height, 20px);text-decoration:var(--table-header-text-decoration, none);vertical-align:middle;border-bottom:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);-webkit-user-select:none;user-select:none;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th--selected{position:relative;width:var(--table-selectable-width, 48px) !important;max-width:var(--table-selectable-width, 48px) !important;min-width:var(--table-selectable-width, 48px) !important;text-align:center}.th--selected sd-checkbox label{position:relative}.th--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.th.sticky-left{position:sticky;background-color:var(--table-header-bg, #F5FAFF);z-index:110 !important;left:var(--sticky-left-offset, 0)}.th.sticky-right{position:sticky;background-color:var(--table-header-bg, #F5FAFF);z-index:110 !important;right:var(--sticky-right-offset, 0)}.th.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.th.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.th.sticky-left-edge.is-scrolled-left{overflow:visible}.th.sticky-left-edge.is-scrolled-left:after{opacity:1}.th.sticky-right-edge.is-scrolled-right{overflow:visible}.th.sticky-right-edge.is-scrolled-right:after{opacity:1}.th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:var(--table-header-gap, 4px)}.th__content--left{justify-content:flex-start}.th__content--center{justify-content:center}.th__content--right{justify-content:flex-end}.th__content--label{white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th__bar{position:absolute;top:50%;right:0;transform:translateY(-50%);width:var(--table-border-width, 1px);height:var(--table-header-resizer-height, 16px);z-index:3;background-color:var(--table-header-resizer-color, #CCCCCC)}.th__dropdown-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;padding:0;border:none;background:transparent;cursor:pointer;color:inherit;border-radius:2px}.th__dropdown-trigger sd-icon{transition:transform 0.15s ease}.th__dropdown-trigger--open sd-icon{transform:rotate(180deg)}.th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:var(--table-header-resizer-height, 16px);cursor:col-resize;z-index:3;border-left:var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC);border-right:var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC)}.th__resizer--left{right:auto;left:0}`;
 
 const SdThead = class {
     constructor(hostRef) {
@@ -237,15 +242,25 @@ const SdThead = class {
         this.sdColumnSort = index.createEvent(this, "sdColumnSort", 7);
     }
     get el() { return index.getElement(this); }
+    /** 테이블 컬럼 목록 */
     columns;
+    /** 행 선택 기능 사용 여부 */
     selectable;
+    /** 컬럼 너비 조절 가능 여부 */
     resizable;
+    /** 고정 컬럼 설정 */
     stickyColumn;
+    /** 헤더 고정 여부 */
     stickyHeader;
+    /** 좌측 스크롤 여부 */
     scrolledLeft;
+    /** 우측 스크롤 여부 */
     scrolledRight;
+    /** 전체 선택 체크박스용 행 데이터 */
     rows = [];
+    /** 컬럼 너비 목록 */
     columnWidths = [];
+    /** 컬럼 정렬 버튼 클릭 시 발생합니다. */
     sdColumnSort;
     tableId = '';
     _columns = [];
@@ -255,14 +270,29 @@ const SdThead = class {
     _stickyHeader = false;
     _scrolledLeft = false;
     _scrolledRight = false;
+    dropdownOpenMap = {};
     tableEl = null;
+    dropdownRefs = {};
+    dropdownThRefs = {};
+    dropdownPortals = {};
     handleColumnsChange(newCols) {
         if (Array.isArray(newCols) && (this.columnWidths ?? []).length === 0) {
             this.columnWidths = newCols.map(c => (c.autoWidth ? 0 : parseInt(c.width || '120', 10)));
         }
     }
+    disconnectedCallback() {
+        const portals = this.dropdownPortals ?? {};
+        Object.values(portals).forEach(portal => {
+            if (portal?.parentNode != null)
+                portal.parentNode.removeChild(portal);
+        });
+    }
     componentWillLoad() {
         this.syncTableContext();
+        this.dropdownOpenMap = this.dropdownOpenMap ?? {};
+        this.dropdownRefs = this.dropdownRefs ?? {};
+        this.dropdownThRefs = this.dropdownThRefs ?? {};
+        this.dropdownPortals = this.dropdownPortals ?? {};
         this.columnWidths = Array.isArray(this.columnWidths) ? this.columnWidths : [];
         this.resolveConfig();
         if ((this.columnWidths ?? []).length === 0) {
@@ -272,6 +302,36 @@ const SdThead = class {
     componentDidLoad() {
         this.syncTableContext();
         this.resolveConfig();
+        this.initDropdownPortals();
+    }
+    // sd-portal을 body에 붙여 CSS transform 영향 없이 정확한 위치에 패널을 표시한다.
+    // <slot>을 render에 두지 않고 직접 DOM 이동(slot 속성 제거)으로 Stencil 슬롯 에뮬레이션 충돌을 피한다.
+    initDropdownPortals() {
+        const cols = this._columns ?? [];
+        const hasDropdownCols = cols.filter(c => c.hasDropdown === true);
+        if (hasDropdownCols.length === 0)
+            return;
+        for (const col of hasDropdownCols) {
+            const colName = col.name;
+            // 이미 포탈이 생성된 컬럼은 건너뜀 (refreshConfig 재호출 대비)
+            if ((this.dropdownPortals ?? {})[colName] != null)
+                continue;
+            const slotContent = this.el.querySelector(`[slot="dropdown-${colName}"]`);
+            if (slotContent == null)
+                continue;
+            // slot 속성 제거: Stencil 슬롯 에뮬레이션이 재배포하지 못하게 한다
+            slotContent.removeAttribute('slot');
+            const portal = document.createElement('sd-portal');
+            portal.parentRef = this.dropdownThRefs[colName] ?? null;
+            portal.open = false;
+            // 첫 open 전까지 포탈 호스트 자체를 숨긴다.
+            // moveSlotContent()가 open=true 시 children을 독립 wrapper div로 이동하므로 이후 동작에 영향 없음.
+            portal.style.display = 'none';
+            portal.addEventListener('sdClose', () => this.closeDropdown(colName));
+            portal.appendChild(slotContent);
+            document.body.appendChild(portal);
+            this.dropdownPortals[colName] = portal;
+        }
     }
     syncTableContext() {
         // sd-table이 shadow:true이므로 fallback content로 렌더되면 closest가 경계를 못 넘는다.
@@ -311,12 +371,16 @@ const SdThead = class {
             this.columnWidths = [];
         }
     }
+    /** 테이블 설정을 다시 불러옵니다. */
     async refreshConfig() {
         this.resolveConfig();
+        this.initDropdownPortals();
     }
+    /** 컬럼 너비를 업데이트합니다. */
     async setColumnWidths(widths) {
         this.columnWidths = Array.isArray(widths) ? widths : [];
     }
+    /** 전체 선택 체크박스 상태를 갱신합니다. */
     async refreshSelection() {
         const checkbox = this.el.querySelector('sd-checkbox');
         if (checkbox) {
@@ -355,6 +419,28 @@ const SdThead = class {
     handleColumnSort = (col) => {
         this.sdColumnSort.emit({ column: col });
     };
+    toggleDropdown(name) {
+        const isOpen = this.dropdownOpenMap[name] !== true;
+        const portals = this.dropdownPortals ?? {};
+        const newMap = { ...this.dropdownOpenMap };
+        // _columns 기준으로 순회: portals가 비어도 dropdownOpenMap은 항상 갱신됨
+        for (const col of (this._columns ?? []).filter(c => c.hasDropdown === true)) {
+            const shouldBeOpen = col.name === name ? isOpen : false;
+            newMap[col.name] = shouldBeOpen;
+            const portal = portals[col.name];
+            if (portal != null)
+                portal.open = shouldBeOpen;
+        }
+        this.dropdownOpenMap = newMap;
+    }
+    closeDropdown(name) {
+        if (this.dropdownOpenMap[name] !== true)
+            return;
+        this.dropdownOpenMap = { ...this.dropdownOpenMap, [name]: false };
+        const portal = (this.dropdownPortals ?? {})[name];
+        if (portal != null)
+            portal.open = false;
+    }
     handleSelectAll(checked) {
         const nextChecked = !!checked;
         const safeRows = Array.isArray(this.rows) ? this.rows : [];
@@ -371,6 +457,8 @@ const SdThead = class {
     }
     render() {
         const safeRows = Array.isArray(this.rows) ? this.rows : [];
+        const dropdownOpenMap = this.dropdownOpenMap ?? {};
+        const dropdownRefs = this.dropdownRefs ?? {};
         const stickyLeftCount = this._stickyColumn.left || 0;
         const stickyRightCount = this._stickyColumn.right || 0;
         const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
@@ -392,22 +480,25 @@ const SdThead = class {
             '--table-border-color': sdTable_config.TABLE_BORDER.color,
             '--table-border-width': `${sdTable_config.TABLE_BORDER.width}px`,
         };
-        return (index.h(index.Host, { key: 'c25f6f9704c079d4cb93da7e65c8c15b6dedcb67', slot: `${this.tableId}-head`, style: headStyle }, index.h("thead", { key: 'd91019378caafa2ec32dfa838eaa4d1fe815fb0d', class: {
+        return (index.h(index.Host, { key: '947f5e5b0e59e7e6f8a73e4fd44dbfa646cb630a', slot: `${this.tableId}-head`, style: headStyle }, index.h("thead", { key: '2e0ffbfe9d96528c6e0082d4883fa462a18831d6', class: {
                 'thead': true,
                 'thead--sticky': this._stickyHeader,
-            } }, index.h("tr", { key: '84e581f5c564693d356f56525f57d6b1da211442', class: "tr" }, this._selectable && (index.h("th", { key: 'fb92e978229c32d560f46af4e90e0980c9c0a213', class: {
+            } }, index.h("tr", { key: '5843a18e1548bc6546e447d4c9213375116af0e9', class: "tr" }, this._selectable && (index.h("th", { key: '914024ca35874747e39f1819337cd4ad1cbe733d', class: {
                 'th': true,
                 'th--selected': true,
                 'sticky-left': true,
                 'sticky-left-edge': stickyLeftCount === 0,
                 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
-            }, style: { '--sticky-left-offset': '0px' } }, index.h("sd-checkbox", { key: '157f59b56a4ef2a8529318c8beaf6f59b91e12f0', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), index.h("div", { key: 'b65e099ebe4940b26cc251961e66a375400f2379', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (index.h("th", { key: col.name, class: {
+            }, style: { '--sticky-left-offset': '0px' } }, index.h("sd-checkbox", { key: 'e07232f1f5fa02589573ddaae53ebdadbdb97674', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), index.h("div", { key: '08b504cfd4f420e76e91d649eed28c7068517044', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (index.h("th", { key: col.name, class: {
                 'th': true,
                 [`${col.thClass}`]: Boolean(col.thClass),
                 'sticky-left': true,
                 'sticky-left-edge': idx === stickyLeftCount - 1,
                 'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
-            }, style: { ...col.thStyle, ...this.getStickyStyle(idx) } }, index.h("div", { class: `th__content th__content--${col.align || 'left'}` }, index.h("div", { class: "th__content--label" }, col.label), col.icon && (index.h("sd-icon", { name: col.icon, size: "12", color: sdTable_config.resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (index.h("sd-icon", { name: sdTable_config.resolveSortIconName(col.sort), size: "12", color: sdTable_config.resolveTableIconColor(sdTable_config.resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text))))))), this._resizable && idx !== lastColIdx && (
+            }, style: { ...col.thStyle, ...this.getStickyStyle(idx) }, ref: col.hasDropdown === true ? (el => { this.dropdownThRefs[col.name] = el; }) : undefined }, index.h("div", { class: `th__content th__content--${col.align || 'left'}` }, index.h("div", { class: "th__content--label" }, col.label), col.icon && (index.h("sd-icon", { name: col.icon, size: "12", color: sdTable_config.resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (index.h("sd-icon", { name: sdTable_config.resolveSortIconName(col.sort), size: "12", color: sdTable_config.resolveTableIconColor(sdTable_config.resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text)))))), col.hasDropdown === true && (index.h("button", { class: {
+                'th__dropdown-trigger': true,
+                'th__dropdown-trigger--open': dropdownOpenMap[col.name] === true,
+            }, ref: el => { dropdownRefs[col.name] = el; }, onClick: () => this.toggleDropdown(col.name), "aria-haspopup": "listbox", "aria-expanded": dropdownOpenMap[col.name] === true ? 'true' : 'false' }, index.h("sd-icon", { name: "chevronDown", size: "12" })))), this._resizable && idx !== lastColIdx && (
         // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions
         index.h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))))), middleCols.map((col, relativeIdx) => {
@@ -415,7 +506,10 @@ const SdThead = class {
             return (index.h("th", { key: col.name, class: {
                     th: true,
                     [`${col.thClass}`]: Boolean(col.thClass),
-                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, index.h("div", { class: `th__content th__content--${col.align || 'left'}` }, index.h("div", { class: "th__content--label" }, col.label), col.icon && (index.h("sd-icon", { name: col.icon, size: "12", color: sdTable_config.resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (index.h("sd-icon", { name: sdTable_config.resolveSortIconName(col.sort), size: "12", color: sdTable_config.resolveTableIconColor(sdTable_config.resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text))))))), this._resizable && actualColIdx !== lastColIdx && (
+                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true ? (el => { this.dropdownThRefs[col.name] = el; }) : undefined }, index.h("div", { class: `th__content th__content--${col.align || 'left'}` }, index.h("div", { class: "th__content--label" }, col.label), col.icon && (index.h("sd-icon", { name: col.icon, size: "12", color: sdTable_config.resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (index.h("sd-icon", { name: sdTable_config.resolveSortIconName(col.sort), size: "12", color: sdTable_config.resolveTableIconColor(sdTable_config.resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text)))))), col.hasDropdown === true && (index.h("button", { class: {
+                    'th__dropdown-trigger': true,
+                    'th__dropdown-trigger--open': this.dropdownOpenMap[col.name] === true,
+                }, ref: el => { this.dropdownRefs[col.name] = el; }, onClick: () => this.toggleDropdown(col.name), "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, index.h("sd-icon", { name: "chevronDown", size: "12" })))), this._resizable && actualColIdx !== lastColIdx && (
             // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
             // eslint-disable-next-line jsx-a11y/no-static-element-interactions
             index.h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
@@ -427,7 +521,10 @@ const SdThead = class {
                     'sticky-right': true,
                     'sticky-right-edge': relativeIdx === 0,
                     'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
-                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, index.h("div", { class: `th__content th__content--${col.align || 'left'}` }, index.h("div", { class: "th__content--label" }, col.label), col.icon && (index.h("sd-icon", { name: col.icon, size: "12", color: sdTable_config.resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (index.h("sd-icon", { name: sdTable_config.resolveSortIconName(col.sort), size: "12", color: sdTable_config.resolveTableIconColor(sdTable_config.resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text))))))), this._resizable && (
+                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true ? (el => { this.dropdownThRefs[col.name] = el; }) : undefined }, index.h("div", { class: `th__content th__content--${col.align || 'left'}` }, index.h("div", { class: "th__content--label" }, col.label), col.icon && (index.h("sd-icon", { name: col.icon, size: "12", color: sdTable_config.resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (index.h("sd-icon", { name: sdTable_config.resolveSortIconName(col.sort), size: "12", color: sdTable_config.resolveTableIconColor(sdTable_config.resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text)))))), col.hasDropdown === true && (index.h("button", { class: {
+                    'th__dropdown-trigger': true,
+                    'th__dropdown-trigger--open': this.dropdownOpenMap[col.name] === true,
+                }, ref: el => { this.dropdownRefs[col.name] = el; }, onClick: () => this.toggleDropdown(col.name), "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, index.h("sd-icon", { name: "chevronDown", size: "12" })))), this._resizable && (
             // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
             // eslint-disable-next-line jsx-a11y/no-static-element-interactions
             index.h("div", { class: "th__resizer th__resizer--left", onMouseDown: (evt) => this.handleResize(actualColIdx, evt, true) }))));
@@ -448,11 +545,17 @@ const SdTr = class {
         index.registerInstance(this, hostRef);
     }
     get el() { return index.getElement(this); }
+    /** 테이블 컬럼 목록 */
     columns;
+    /** 행 선택 기능 사용 여부 */
     selectable;
+    /** 고정 컬럼 설정 */
     stickyColumn;
+    /** 행 식별 키 */
     rowKey = '';
+    /** 행 데이터 객체 */
     row = {};
+    /** 구분선 높이 (4 또는 6px, null이면 일반 행) */
     separator = null;
     tableId = '';
     columnWidths = [];
@@ -505,12 +608,15 @@ const SdTr = class {
             this.columnWidths = [...config.columnWidths];
         }
     }
+    /** 테이블 설정을 다시 불러옵니다. */
     async refreshConfig() {
         this.resolveConfig();
     }
+    /** 셀 병합 버전을 갱신해 td를 재렌더링합니다. */
     async bumpSpansVersion() {
         this.spansVersion = this.spansVersion + 1;
     }
+    /** 페이지네이션에 따른 행 표시 여부를 갱신합니다. */
     async updateVisibility() {
         this.updateVisibilitySync();
     }
@@ -523,9 +629,11 @@ const SdTr = class {
         }
         this.isVisible = rowIndex >= pageInfo.startIndex && rowIndex < pageInfo.endIndex;
     }
+    /** 컬럼 너비를 업데이트합니다. */
     async setColumnWidths(widths) {
         this.columnWidths = widths;
     }
+    /** 체크박스 선택 상태를 갱신합니다. */
     async refreshSelection() {
         const checkbox = this.el.querySelector('sd-checkbox');
         if (checkbox) {

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
-var tooltipArrow = require('./tooltipArrow-D3P3JC08.js');
+var index = require('./index-C-F-JEv_.js');
+var tooltipArrow = require('./tooltipArrow-26hYtSrD.js');
 
 const popover = {
 	"default": {
@@ -18,22 +18,38 @@ const SdPopover = class {
         this.showChange = index.createEvent(this, "sdShowChange", 7);
     }
     get el() { return index.getElement(this); }
+    /** 팝오버 표시 여부 */
     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) => {
@@ -68,17 +84,17 @@ const SdPopover = class {
         const leftLink = this.leftLink;
         const button = this.button;
         const hasFooter = !!leftLink || !!button;
-        return (index.h(index.Fragment, { key: '649e07ee45d3e7e5f72a438ef2939bfe6d3c56e4' }, this.label !== '' ? (index.h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel || this.label || icon || 'Open popover', disabled: this.disabled, type: this.type ?? 'button', class: "sd-popover", onSdClick: () => this.setShow(!this.show) })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (index.h("sd-floating-portal", { key: '486d1859387b0c8cc82646ab5e7b6800792ca2be', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, index.h("div", { key: '4418e064c76478a5b4dfd2fb69d11e1603a22530', class: {
+        return (index.h(index.Fragment, { key: '94fcf54c8b20ffd1bcf2c7f540de31e1f41154fa' }, this.label !== '' ? (index.h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel || this.label || icon || 'Open popover', disabled: this.disabled, type: this.type ?? 'button', class: "sd-popover", onSdClick: () => this.setShow(!this.show) })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (index.h("sd-floating-portal", { key: '9f1585f2d268452f3d5c713e30ff865c3fc5fbac', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, index.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,
-            } }, index.h("i", { key: 'a181ce40ae957e77be7c8f9b10e6f1fe8190cd52', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '323bca17c3c245063cbd1ac55ed64bf6f6df9e3e' })), index.h("div", { key: '06e98cf6e888dc66a6a700710669c61ac9d9c494', class: "sd-floating-menu__content" }, this.menuTitle && index.h("div", { key: '831ca9893ccafcad8e0858fb28269428ebac6a07', class: "sd-floating-menu__title" }, this.menuTitle), this.slotContentHTML && (index.h("div", { key: 'cdd2eafe18d5b0b44f10dbebbb68ed9d010173b1', class: "sd-floating-menu__messages", innerHTML: this.slotContentHTML })), hasFooter && (index.h("div", { key: '8149044a08de968ef38f432ee3303d969b49eace', class: {
+            } }, index.h("i", { key: '5fd6c333790d3bb45bf4d43391ed1457d5eb54c3', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '062b11e3b6cee1e87f20064ab62a589a23f3eb26' })), index.h("div", { key: 'b863abd8e31c8ce0dfddfdb25b6a49be69f34da1', class: "sd-floating-menu__content" }, this.menuTitle && index.h("div", { key: '1873c595d7ad91b3a7c71d979414820694c23ff5', class: "sd-floating-menu__title" }, this.menuTitle), this.slotContentHTML && (index.h("div", { key: '7a197b43d34a59ec298ed5e733cae0f3390c87a3', class: "sd-floating-menu__messages", innerHTML: this.slotContentHTML })), hasFooter && (index.h("div", { key: 'be9034b4150421be08c17978beba643e73c5568d', class: {
                 'sd-floating-menu__buttons': true,
                 'sd-floating-menu__buttons--with-link': !!leftLink,
-            } }, leftLink && (index.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 && (index.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 }))))), index.h("sd-ghost-button", { key: '7a1f2edf0a601c0dfa91b4a02405c815d3257214', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose }))))));
+            } }, leftLink && (index.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 && (index.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 }))))), index.h("sd-ghost-button", { key: 'bc4c4d982da8fe72c85cd4ae7ba6cd2e09154164', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose }))))));
     }
 };
 SdPopover.style = sdPopoverCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 var system = require('./system-MjrAugX-.js');
 
 const popup$1 = {
@@ -74,12 +74,16 @@ const SdPopup = class {
         index.registerInstance(this, hostRef);
         this.submit = index.createEvent(this, "sdSubmit", 7);
     }
+    /** 팝업 헤더에 표시할 제목 */
     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 = {
@@ -105,7 +109,7 @@ const SdPopup = class {
             ...DEFAULT_SUBMIT_BUTTON_PROPS,
             ...this.submitButtonProps,
         };
-        return (index.h("div", { key: 'fd14b75d27d3006978ceae9287486d9716bbbf5a', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, index.h("header", { key: 'ac0222dc9512b99cd1d1b4684b9775cd462f39fa', class: "sd-popup__header" }, index.h("h2", { key: 'a11bea9fac5828161090d09d06d6e1c54c390392', class: "sd-popup__title" }, this.popupTitle)), index.h("div", { key: 'ced8961a853cdf014d602c235cfc839a648fb19e', class: "sd-popup__body" }, index.h("slot", { key: '142807fd74e8b32a31ffb7ed8f3dfdcb07a6a1ba' })), this.useFooter && (index.h("footer", { key: '35a6b42e82ec13890b4fa56bda5b9781adeff229', class: "sd-popup__footer" }, index.h("div", { key: '44b2471e0f302bd001fdf1e1d72485dff4af094f', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, index.h("slot", { key: 'd1c8e29b60eb7ce86639e336c99a48a67437103a', name: "footer-left" })), index.h("sd-button", { key: '67b0a8530cae73e344cdae2ac0cb48fa3bdf4827', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
+        return (index.h("div", { key: '4455120f02fc1df1b1661062a22f3d82508627c4', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, index.h("header", { key: '96a5e7cdc21fa239e4275f4b57379f36246048f4', class: "sd-popup__header" }, index.h("h2", { key: 'cdf8d05561f470fef31c46e6508e1e0c41aa7fa9', class: "sd-popup__title" }, this.popupTitle)), index.h("div", { key: 'ddb32332f8822634f544f2fa5a246c5f37c7fcc2', class: "sd-popup__body" }, index.h("slot", { key: '8f36daf8c918da6babcbb4383957e979930bfd73' })), this.useFooter && (index.h("footer", { key: '2b84ed134a8d53633bb4feb7ab423e58955dfdae', class: "sd-popup__footer" }, index.h("div", { key: '95e55875b38102ff809e752a3cc647dc830699a9', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, index.h("slot", { key: 'fbd86c77e1117018793279c9b90fd8e2f6db4934', name: "footer-left" })), index.h("sd-button", { key: 'e8710c15d20e52d0476e7f656e800cda008187d8', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
     }
 };
 SdPopup.style = sdPopupCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 
 const radioButton = {
 	xs: {
@@ -104,11 +104,17 @@ const SdRadioButton = class {
         index.registerInstance(this, hostRef);
         this.change = index.createEvent(this, "sdUpdate", 7);
     }
+    /** 현재 선택된 값 */
     value;
+    /** 라디오 버튼 옵션 목록 */
     options = [];
+    /** 버튼 크기 */
     size = 'sm';
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** input name 속성 (없으면 자동 생성) */
     name;
+    /** 선택 값이 변경될 때 발생합니다. */
     change;
     componentWillLoad() {
         this.size ??= 'sm';
@@ -178,7 +184,7 @@ const SdRadioButton = class {
             '--sd-radio-button-content-select': RADIO_BUTTON_COLORS.content.select,
             '--sd-radio-button-content-disabled': RADIO_BUTTON_COLORS.content.disabled,
         };
-        return (index.h("div", { key: 'b916d790862409f8b8e1da566f049daadfc4e5e2', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
+        return (index.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 (index.h("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, index.h("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && index.h("span", { class: "sd-radio-button__label" }, option.label)));