@sellmate/design-system 1.20.1 → 1.21.0

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 var index$1 = require('./index-BUvXpPc3.js');
 var sdSelect_config = require('./sd-select.config-C9Ohe1QA.js');
 var sanitizeInlineHtml = require('./sanitize-inline-html-CRCAeQ46.js');
@@ -18,29 +18,53 @@ const SdSelect = class {
     static PORTAL_OFFSET_Y = 4;
     static CLOSE_ANIMATION_DURATION = 150;
     get el() { return index.getElement(this); }
+    /** 셀렉트 타입 (단일/다중/계층) */
     type = 'default';
+    /** 현재 선택된 값 */
     value = null;
+    /** 선택 옵션 목록 */
     options = [];
+    /** 값이 없을 때 표시할 플레이스홀더 */
     placeholder = '선택';
+    /** 드롭다운 너비 (없으면 트리거 너비로 자동 맞춤) */
     dropdownWidth = '';
+    /** 드롭다운 최대 너비 */
     maxDropdownWidth = '640px';
+    /** 드롭다운 최대 높이 */
     dropdownHeight = '260px';
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 레이블 텍스트 */
     label = '';
+    /** 레이블 너비 */
     labelWidth = '';
+    /** 필드 우측 어드온 레이블 */
     addonLabel = '';
+    /** 어드온 정렬 방향 */
     addonAlign = 'start';
+    /** 에러 상태 여부 */
     error = false;
+    /** 필드 하단 힌트 텍스트 */
     hint = '';
+    /** 에러 메시지 */
     errorMessage = '';
+    /** 유효성 검사 규칙 목록 */
     rules = [];
+    /** 레이블 영역 아이콘 */
     icon = undefined;
+    /** 레이블 툴팁 텍스트 */
     labelTooltip = '';
+    /** 레이블 툴팁 상세 옵션 */
     labelTooltipProps = null;
+    /** true이면 value로 SelectOption 대신 원시값(string|number) 방출 */
     emitValue = false;
+    /** 필드 너비 */
     width = '';
+    /** 드롭다운 내 검색 입력 표시 여부 */
     useSearch = false;
+    /** 전체 선택 시 표시할 레이블 */
     allSelectedLabel = '전체';
+    /** 전체 선택 체크박스 표시 여부 */
     useSelectAll = false;
     isOpen = false;
     isAnimatingOut = false;
@@ -49,13 +73,17 @@ const SdSelect = class {
     resolvedMaxDropdownWidth = '640px';
     focused = false;
     hovered = false;
+    /** 선택 값이 변경될 때 발생합니다. */
     update;
+    /** 드롭다운 열림/닫힘 상태가 바뀔 때 발생합니다. */
     dropDownShow;
+    /** 셀렉트 트리거에 포커스를 이동합니다. */
     async sdFocus() {
         if (this.disabled)
             return;
         await this.triggerComponentRef?.sdFocus();
     }
+    /** 드롭다운을 엽니다. */
     async sdOpen() {
         // sdFocus 직후 호출 시 트리거 ref/레이아웃이 안정될 때까지 한 틱 대기
         await new Promise(resolve => setTimeout(resolve, 0));
@@ -70,6 +98,7 @@ const SdSelect = class {
     triggerRef;
     triggerComponentRef;
     closeAnimationTimer;
+    /** 폼 연동용 name 속성 */
     name = index$1.nanoid();
     triggerHasFocus = false;
     watchIsOpen(newValue) {
@@ -267,15 +296,15 @@ const SdSelect = class {
                 this.closeDropdown();
             },
         };
-        return (index.h("sd-field", { key: 'f95dc4008dd1f252f8cb41637aa817bdd4d72ba0', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
+        return (index.h("sd-field", { key: '3387dc16a6f54bfae652338c71c4c0e1553828c9', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
                 this.hovered = true;
             }, onMouseLeave: () => {
                 this.hovered = false;
-            } }, index.h("div", { key: 'f12b88dc846a01fc2076242623ac1376ebc0105c', class: "sd-select", ref: el => {
+            } }, index.h("div", { key: '124325f8f6882a3c9ee1a1795ee969f13d67dfe2', class: "sd-select", ref: el => {
                 this.triggerRef = el;
-            } }, index.h("sd-select-trigger", { key: '8cef3403ca0a0430c3ce9f8255c98f0e28142d80', ref: el => {
+            } }, index.h("sd-select-trigger", { key: '2e0e44ae666282d3931f9889650a7999929a312b', ref: el => {
                 this.triggerComponentRef = el;
-            }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '417194938ff7aac0b22abbba621342dbe767b146', ...portalProps }, index.h("sd-select-listbox", { key: '0c311407fdc72f37fa7dddf48fdfbaab668a18f4', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.dropdownWidth || this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+            }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: 'b6e97e43c5ea3a06fbb2976dab52d4f544822ae0', ...portalProps }, index.h("sd-select-listbox", { key: '3d8a01c54667149507db2757d81813d2f285b32d', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.dropdownWidth || this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
     static get watchers() { return {
         "isOpen": [{
@@ -292,18 +321,28 @@ const SdSelectListbox = class {
         index.registerInstance(this, hostRef);
         this.optionSelect = index.createEvent(this, "sdOptionSelect", 7);
     }
+    /** 셀렉트 타입 */
     type = 'default';
+    /** 옵션 목록 */
     options = [];
+    /** 현재 선택 값 */
     value = null;
+    /** 값만 emit할지 여부 */
     emitValue = false;
+    /** 검색 기능 사용 여부 */
     useSearch = false;
+    /** 전체 선택 기능 사용 여부 */
     useSelectAll = false;
+    /** 트리거 너비 (드롭다운 최소 너비) */
     triggerWidth = '200px';
+    /** 드롭다운 최대 너비 */
     maxWidth = '640px';
+    /** 드롭다운 최대 높이 */
     maxHeight = '260px';
     searchKeyword = '';
     isScrolled = false;
     focusedIndex = -1;
+    /** 옵션 선택 시 발생합니다. */
     optionSelect;
     listEl;
     lastScrolledIndex = -1;
@@ -642,9 +681,9 @@ const SdSelectListbox = class {
             '--listbox-max-height': this.maxHeight ?? '260px',
             '--listbox-radius': `${sdSelect_config.LIST_BOX_LAYOUT.radius}px`,
         };
-        return (index.h("div", { key: '77f3df8e7105f08340cf46ee0ce146d48b927228', class: "sd-select-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-list-item-search", { key: 'bd79903b4799e6a074895e0ea2b0987a4775a8e0', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: '08c5e0a70837025d62b08d85b0f5044b826dc133', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (index.h("div", { key: '6ca1107a8aadc1fbae26f3d8d3385b355981b65e', class: "sd-select-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-list-item-search", { key: '8612b45a4e9b7d2701b8decd6865ebb50d6fcaa3', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: 'c02c9c1d96176f94d2f83c66ad3e7cc0946c0270', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
-            } }, this.showSelectAll && (index.h("sd-select-list-item", { key: '918c481cc05f4839d6a133e68a90c68ddfac5fba', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (index.h("div", { class: "sd-select-listbox__empty" }, sdSelect_config.EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (index.h("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
+            } }, this.showSelectAll && (index.h("sd-select-list-item", { key: 'f4fe1769d14812ba63fb73ff21ebfdaaf9d76409', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (index.h("div", { class: "sd-select-listbox__empty" }, sdSelect_config.EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (index.h("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
     }
     static get watchers() { return {
         "searchKeyword": [{
@@ -663,14 +702,22 @@ const SdSelectTrigger = class {
         this.triggerFocus = index.createEvent(this, "sdTriggerFocus", 7);
         this.triggerBlur = index.createEvent(this, "sdTriggerBlur", 7);
     }
+    /** 표시할 선택된 값 텍스트 */
     displayText = '';
+    /** 미선택 상태 플레이스홀더 */
     placeholder = '선택';
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 드롭다운 열림 상태 */
     isOpen = false;
+    /** 트리거 클릭 시 발생합니다. */
     triggerClick;
+    /** 트리거 포커스 시 발생합니다. */
     triggerFocus;
+    /** 트리거 블러 시 발생합니다. */
     triggerBlur;
     triggerEl;
+    /** 트리거 엘리먼트에 포커스를 이동합니다. */
     async sdFocus() {
         if (this.disabled)
             return;
@@ -704,7 +751,7 @@ const SdSelectTrigger = class {
                 ? sdSelect_config.SELECT_COLORS.icon.disabled
                 : sdSelect_config.SELECT_COLORS.icon.default,
         };
-        return (index.h("div", { key: '361344e040569fa6f7c2b5d16762d9b2120ca50e', ref: el => {
+        return (index.h("div", { key: '7f5940ce19feb2d3ae9b2cbb6b5fdeb6d0151f61', ref: el => {
                 this.triggerEl = el;
             }, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
                 'sd-select-trigger': true,
@@ -715,7 +762,7 @@ const SdSelectTrigger = class {
                     e.preventDefault();
                     this.handleClick();
                 }
-            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("div", { key: '3ccbf7c188ca90dc8ba94f10ef2fa3f7cea70076', class: "sd-select-trigger__content" }, hasValue && sdSelect_config.isHtmlLabel(this.displayText) ? (index.h("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml.sanitizeInlineHtml(this.displayText)) })) : (index.h("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), index.h("sd-icon", { key: '623f1f83d7b8c89e64f9ec8d8e3261bd771c45b4', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("div", { key: 'b50dea3450ee6fd2bf30811cc33facf00761f0d1', class: "sd-select-trigger__content" }, hasValue && sdSelect_config.isHtmlLabel(this.displayText) ? (index.h("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml.sanitizeInlineHtml(this.displayText)) })) : (index.h("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), index.h("sd-icon", { key: '778b3d1c738951f9a18950b668a34a1bc36006ca', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
                 'sd-select-trigger__icon': true,
                 'sd-select-trigger__icon--open': this.isOpen,
             } }))));

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 
 var switchTokens = {
 	"switch": {
@@ -65,9 +65,13 @@ const SdSwitch = class {
         index.registerInstance(this, hostRef);
         this.change = index.createEvent(this, "sdUpdate", 7);
     }
+    /** 현재 on/off 상태 */
     value = false;
+    /** 표시할 라벨 텍스트 */
     label = '';
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 상태가 변경될 때 발생합니다. */
     change;
     get switchClasses() {
         const classes = ['sd-switch', this.value ? 'sd-switch--on' : 'sd-switch--off'];
@@ -105,7 +109,7 @@ const SdSwitch = class {
             '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
             '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
         };
-        return (index.h("label", { key: '4746eeb0cd3b977be3bc537c30cbf58c51d3a8fc', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, index.h("input", { key: 'f022803741f2ac787a8993a2d987eedc5d6c8f24', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), index.h("div", { key: 'd8684dcb2b446885f849e6f00d773ef340e37c73', class: "sd-switch__track" }, index.h("div", { key: '572bd3dd7f65c9a9fd36c27b4444b0e653ae2b23', class: "sd-switch__knob" })), this.label && index.h("span", { key: '5228763c541a4bc0a71bfb457a4432dca01d452f', class: "sd-switch__label" }, this.label)));
+        return (index.h("label", { key: '2cbee35194a8218f1526ecd26d0ff0cc660ed5fb', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, index.h("input", { key: '8c9a330a7b69035ace0644f0a2cab8f6f8672bfd', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), index.h("div", { key: '738a28fb9c26628d6b67f03d0b75f4155ad85966', class: "sd-switch__track" }, index.h("div", { key: '91b7bac6c4e48d1b5b1331713620a132e9921906', class: "sd-switch__knob" })), this.label && index.h("span", { key: 'a9cdfb08c240f3d6a15bef3e119c0c02f3fe3462', class: "sd-switch__label" }, this.label)));
     }
 };
 SdSwitch.style = sdSwitchCss();

package/dist/cjs/sd-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 constants = require('./constants-DJRV1upE.js');
 var sdTable_config = require('./sd-table.config-B7MuRLoR.js');
 require('./component.table-DIxmbGBT.js');
@@ -32,28 +32,48 @@ const SdTable = class {
     }
     static DEFAULT_NO_DATA_LABEL = '데이터가 없습니다.';
     get el() { return index.getElement(this); }
+    /** 테이블 고유 ID (자식 슬롯 매핑에 사용) */
     tableId = nanoid(8);
     fallbackTableId = nanoid(8);
+    /** 컬럼 정의 목록 */
     columns = [];
+    /** 행 데이터 배열 */
     rows;
+    /** 현재 선택된 행 목록 */
     selected = [];
+    /** 행 고유 식별 필드명 */
     rowKey = 'id';
+    /** 행 선택(체크박스) 기능 활성화 여부 */
     selectable = false;
+    /** 컬럼 너비 조절 기능 활성화 여부 */
     resizable = false;
+    /** 테이블 너비 */
     width;
+    /** 테이블 높이 */
     height;
+    /** 헤더 고정(sticky) 여부 */
     stickyHeader = false;
+    /** 고정할 좌우 컬럼 수 */
     stickyColumn = { left: 0, right: 0 };
+    /** border-radius 제어 */
     radius = 'default';
+    /** 데이터 없을 때 표시할 메시지 */
     noDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
     resolvedNoDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
+    /** 로딩 스피너 표시 여부 */
     isLoading = false;
+    /** 페이지네이션 옵션 */
     pagination;
+    /** 테이블 내부에서 페이지네이션을 직접 관리할지 여부 */
     useInternalPagination = false;
+    /** 페이지당 행 수 선택 셀렉트 표시 여부 */
     useRowsPerPageSelect = false;
+    /** 행 높이를 줄인 조밀 모드 여부 */
     dense = false;
     // ─── Virtual Scroll ───────────────────────────────────────────────
+    /** 가상 스크롤 사용 여부 */
     useVirtualScroll = false;
+    /** 가상 스크롤 행 높이 (px, 없으면 dense 여부에 따라 자동) */
     rowHeight;
     get effectiveRowHeight() {
         if (this.rowHeight != null)
@@ -62,19 +82,27 @@ const SdTable = class {
             ? Number(sdTable_config.TABLE_BODY_LAYOUT.dense.height)
             : Number(sdTable_config.TABLE_BODY_LAYOUT.default.height);
     }
+    /** 가상 스크롤 상하 버퍼 행 수 */
     virtualBuffer = 5;
+    /** 가상 스크롤 끝 도달 감지 임계값 (마지막 N행 이내에 들어오면 이벤트 발생) */
     virtualEndThreshold = 10;
     // ─────────────────────────────────────────────────────────────────
+    /** 페이지당 행 수 선택 옵션 목록 */
     rowsPerPageOption = [
         { label: '10개씩 보기', value: 10 },
         { label: '25개씩 보기', value: 25 },
         { label: '50개씩 보기', value: 50 },
         { label: '100개씩 보기', value: 100 },
     ];
+    /** 행 선택 상태가 변경될 때 선택된 행 목록을 전달합니다. */
     sdSelectChange;
+    /** 페이지가 변경될 때 새 페이지 번호를 전달합니다. */
     sdPageChange;
+    /** 페이지당 행 수가 변경될 때 발생합니다. */
     sdRowsPerPageChange;
+    /** 가상 스크롤 가시 범위가 변경될 때 발생합니다. */
     sdVirtualUpdate;
+    /** 가상 스크롤이 끝 임계값에 도달할 때 발생합니다. */
     sdVirtualReachEnd;
     currentPage = 1;
     innerRowsPerPage = 10;
@@ -479,6 +507,7 @@ const SdTable = class {
     isRowSelectedSync(row) {
         return Array.from(this.innerSelected).some(r => r[this.rowKey ?? 'id'] === row[this.rowKey ?? 'id']);
     }
+    /** 행이 선택되어 있는지 확인합니다. */
     async isRowSelected(row) {
         return this.isRowSelectedSync(row);
     }
@@ -495,6 +524,7 @@ const SdTable = class {
         this.sdSelectChange.emit(Array.from(this.innerSelected));
         this.refreshChildrenSelection();
     }
+    /** 행 선택 상태를 토글합니다. */
     async updateRowSelect(row) {
         this.updateRowSelectSync(row);
     }
@@ -511,6 +541,7 @@ const SdTable = class {
         this.sdSelectChange.emit(Array.from(this.innerSelected));
         this.refreshChildrenSelection();
     }
+    /** 전체 행 선택/해제를 처리합니다. */
     async toggleSelectAll(checked, rows) {
         this.toggleSelectAllSync(checked, rows);
     }
@@ -523,6 +554,7 @@ const SdTable = class {
             return true;
         return null; // indeterminate
     }
+    /** 전체 선택 체크 상태를 반환합니다 (true/false/null=indeterminate). */
     async getIsAllChecked(rows) {
         return this.getIsAllCheckedSync(rows);
     }
@@ -613,6 +645,7 @@ const SdTable = class {
         }
         return base;
     }
+    /** 지정한 컬럼 인덱스의 sticky 스타일 객체를 반환합니다. */
     async getStickyStyle(colIdx) {
         return this.getStickyStyleSync(colIdx);
     }
@@ -755,6 +788,7 @@ const SdTable = class {
             this.propagateVirtualUpdate(true);
         }
     }
+    /** 가상 스크롤 총 행 수를 설정합니다. */
     async setRowCount(count) {
         this.setRowCountSync(count);
     }
@@ -782,6 +816,7 @@ const SdTable = class {
             rowsPerPage: this.innerRowsPerPage,
         };
     }
+    /** 현재 페이지네이션 상태(startIndex, endIndex, currentPage, rowsPerPage)를 반환합니다. */
     async getPaginationInfo() {
         return this.getPaginationInfoSync();
     }
@@ -845,25 +880,25 @@ const SdTable = class {
             '--table-selectable-width': `${sdTable_config.TABLE_SELECTABLE_COLUMN_WIDTH}px`,
             '--table-host-height': hostHeight,
         };
-        return (index.h(index.Host, { key: 'f5a5a2d4012f069619d110dcd9c2d5e6bd446407', style: hostStyle }, index.h("div", { key: '96ca8b8e4291ac077a6e1b6d3eed897777817b25', class: "sd-table__container", style: {
+        return (index.h(index.Host, { key: '2606b0d7fc3657a8021a6dfc64672996b756f762', style: hostStyle }, index.h("div", { key: '4def416edfe630ead35b80cb2f04081a89740f62', class: "sd-table__container", style: {
                 '--table-width': this.width,
                 '--pagination-height': `${paginationHeight}px`,
-            } }, index.h("div", { key: 'd8225691e78e5fe5341f03def8ad1d6dfb057056', class: {
+            } }, index.h("div", { key: '316a359f2be84895719f452e056dcd2f54cd5b56', class: {
                 'sd-table__wrapper': true,
                 'sd-table__wrapper--radius-useTop': this.radius === 'useTop',
                 'sd-table__wrapper--radius-full': this.radius === 'full',
-            } }, index.h("div", { key: 'fb8403bd7587a4d1fcbb77b1fe226ae0aa27be7a', class: {
+            } }, index.h("div", { key: 'e798b58104f56b3250a7d74261a8c320a8049f28', class: {
                 'sd-table__scroll-container': true,
                 'sd-table__scroll-container--loading': this.isLoading,
                 'sd-table__scroll-container--no-data': isNoData,
-            } }, this.isLoading && (index.h("div", { key: '4202fa1f03feff066f9779c5eb21c3b0c96f5cf3', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, index.h("sd-circle-progress", { key: '394c52823f5c24f288d51b34daec6f228de119d7', indeterminate: true }))), isNoData && (index.h(index.h.Fragment, null, index.h("div", { key: 'bb1d3d8b592194006bea7cd5ab2efc587f9abc44', class: "sd-table__no-data-header-overlay" }), index.h("div", { key: 'c34df2b4f35c7ea8b5bbe6cf49dc354e11dac344', class: "sd-table__no-data" }, index.h("div", { key: '05006aacc2c242606ba8585ee0bdea50eea1b688', class: "sd-table__no-data-content", ref: el => {
+            } }, this.isLoading && (index.h("div", { key: 'af91877075c8d4ed8b608bdfdc7f04bd844f5574', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, index.h("sd-circle-progress", { key: '2422c7020046fa468dbaaf34220230737cb6b02e', indeterminate: true }))), isNoData && (index.h(index.h.Fragment, null, index.h("div", { key: 'bd5c2237d8c3a34cc4bf12a187f471e22ce02efd', class: "sd-table__no-data-header-overlay" }), index.h("div", { key: '1e0da67564879a175e89a3482195742b1b4451dc', class: "sd-table__no-data" }, index.h("div", { key: '391bc76e748d64b84c39de669396b2f5f288e5a1', class: "sd-table__no-data-content", ref: el => {
                 this.noDataContentEl = el;
                 if (el)
                     this.syncNoDataContentObserver();
-            } }, index.h("slot", { key: 'ad707be9bc8062da5a6236c9833176adb7b95851', name: "no-data" }, index.h("span", { key: '3aa57b547e05bd455829cff770c435af2ac78383' }, this.resolvedNoDataLabel)))))), index.h("table", { key: '6b2958f14d9708a49e3cbaff7cdb3653f7267e1c', class: this.tableClasses }, this.autoThead ? (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-thead", { rows: this.rows ?? [] }))) : (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
+            } }, index.h("slot", { key: '3e2e26f4951d9b834ae811906c137a78067fecab', name: "no-data" }, index.h("span", { key: '54ed0371d60f5312376d8ffab50efd9ec0947729' }, this.resolvedNoDataLabel)))))), index.h("table", { key: '46cab11834ca3f5aa9010bd6f603d301b2a54c9c', class: this.tableClasses }, this.autoThead ? (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-thead", { rows: this.rows ?? [] }))) : (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
             this.pagination.rowsPerPage > 0 &&
             this.rowCount > 0 &&
-            !this.useVirtualScroll && (index.h("div", { key: '950e80fdb6c06af2b4423e3b0c75ded7cfe4a298', class: "sd-table__pagination" }, index.h("sd-pagination", { key: '3257c7b631c262c9ddadbd23c83f2eb43f9bf7f5', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (index.h("sd-select", { key: '7bb00889139aa7dbee4723efac511753afcb15e9', value: this.useInternalPagination
+            !this.useVirtualScroll && (index.h("div", { key: 'b9c738172d4e2993f15f6a7e051406d3b7e8d568', class: "sd-table__pagination" }, index.h("sd-pagination", { key: '62c199e61dd2010f2c19aabb3599d75a561ef83d', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (index.h("sd-select", { key: '5f305858818e720bf5a53499777d2f5aac843487', value: this.useInternalPagination
                 ? this.innerRowsPerPage
                 : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
                 if (!this.isRowsPerPageValue(e.detail))

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 
 const tab = {
 	main: {
@@ -130,11 +130,17 @@ const SdTabs = class {
         index.registerInstance(this, hostRef);
         this.update = index.createEvent(this, "sdUpdate", 7);
     }
+    /** 현재 선택된 탭 value */
     value;
+    /** 탭 옵션 목록 */
     tabs = [];
+    /** 탭 크기 */
     size = 'md';
+    /** true이면 서브 탭 스타일 적용 */
     isSub = false;
+    /** true이면 탭을 세로로 배치 */
     vertical = false;
+    /** 탭이 변경될 때 새 value를 전달합니다. */
     update;
     valueChanged(newValue) {
         this.value = newValue;
@@ -201,7 +207,7 @@ const SdTabs = class {
         };
     }
     render() {
-        return (index.h("div", { key: 'c2a2bd86833267ca4b47e7c6420e04a504af05f5', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index$1) => {
+        return (index.h("div", { key: 'd8d86075bbf5e13444f99e57cf63c2f5b9ef28fc', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index$1) => {
             const badgeName = this.getBadgeName(tab);
             return (index.h("div", { key: `tab-${index$1}`, role: "tab", tabindex: 0, "aria-selected": tab.value === this.value ? 'true' : 'false', class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab), onKeyDown: e => {
                     if (e.key === 'Enter' || e.key === ' ') {

package/dist/cjs/sd-td.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');
 
 const sdTdCss = () => `sd-td *{box-sizing:border-box}sd-td{display:contents}sd-td.align-left{text-align:left}sd-td.align-center{text-align:center}sd-td.align-right{text-align:right}`;
@@ -10,18 +10,27 @@ const SdTd = class {
         index.registerInstance(this, hostRef);
     }
     get el() { return index.getElement(this); }
+    /** 데이터 필드명 (슬롯 이름 생성에 사용) */
     field;
+    /** 행 식별 키 */
     rowKey;
+    /** 셀 내용 정렬 */
     align;
+    /** 행 병합 수 */
     rowspan;
+    /** 열 병합 수 */
     colspan;
     // sd-tr가 그리는 실제 <td>에 머지될 사용자 클래스.
     // <sd-td> 호스트는 display:contents라 호스트의 class는 시각 효과가 없기 때문에,
     // 이 prop을 통해 sd-table 레지스트리에 등록 → sd-tr가 td 렌더 시 합쳐 사용한다.
+    /** td에 병합할 사용자 클래스 */
     sdClass;
+    /** 좌측 구분선 표시 여부 */
     dividerLeft = false;
+    /** 우측 구분선 표시 여부 */
     dividerRight = false;
     // true이면 이 셀이 속한 행 전체가 dense를 무시하고 default 레이아웃으로 동작한다.
+    /** frame 레이아웃 사용 여부 */
     useFrame = false;
     handleFieldChange(_newField, oldField) {
         this.syncSlotName();
@@ -158,7 +167,7 @@ const SdTd = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'ed5419d9190514381bb8fe43a8588c7d88983527', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: '308d16388614375c94bd4c5efc8e173b56b4af2a' })));
+        return (index.h(index.Host, { key: 'd7cea28b006a4903fab00e7a709252e6009f911f', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: '1d8695ff6c6890838e4b18ec4da1d7ff6a5c8858' })));
     }
     static get watchers() { return {
         "field": [{

package/dist/cjs/sd-text-link.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 
 const textLink = {
 	sm: {
@@ -118,14 +118,23 @@ const SdTextLink = class {
         index.registerInstance(this, hostRef);
         this.click = index.createEvent(this, "sdClick", 7);
     }
+    /** 표시할 레이블 텍스트 */
     label = '';
+    /** 좌측 아이콘명 */
     icon = '';
+    /** 좌측 아이콘 색상 */
     iconColor = '';
+    /** 레이블 span에 추가할 클래스 */
     labelClass = '';
+    /** 우측 화살표 타입 */
     rightArrow = 'none';
+    /** 밑줄 스타일 여부 */
     underline = false;
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 텍스트 크기 */
     size = 'sm';
+    /** 클릭 시 발생합니다. */
     click;
     handleClick = () => {
         if (this.disabled)
@@ -147,7 +156,7 @@ const SdTextLink = class {
             '--sd-text-link-text-decoration': typo.textDecoration,
             ...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
         };
-        return (index.h("span", { key: '74e9dd05f3efa3ecfec4edca1b74c29bb7207894', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (index.h("span", { key: '1b58c27c2754182b1fc6249e7e4bf52f42d1d11d', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
             }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -155,13 +164,13 @@ const SdTextLink = class {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, this.icon && (index.h("sd-icon", { key: 'e60be0764adf889af988fd887582776d44239e07', name: this.icon, size: sizeConfig.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: '17996ef0620948fe1660945e68c9bb55e62fc982', class: labelClassName }, this.label), this.rightArrow && this.rightArrow !== 'none' && (index.h("span", { key: 'b9cfc03d4295beb9956f661032ea3fd1d9acfbe9', class: "sd-text-link__arrow", style: {
+            } }, this.icon && (index.h("sd-icon", { key: '85076e7cf4873b527606aa737c2899233dcc3d9f', name: this.icon, size: sizeConfig.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: '75b16e64155770ccdb889497caea6b4240b2e8c0', class: labelClassName }, this.label), this.rightArrow && this.rightArrow !== 'none' && (index.h("span", { key: '8dd32b1b640a8e81f306b0387f783a4c1435abd6', class: "sd-text-link__arrow", style: {
                 width: `${TEXT_LINK_ARROW.arrowFrame}px`,
                 height: `${TEXT_LINK_ARROW.arrowFrame}px`,
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-            } }, index.h("sd-icon", { key: '6c2e4640a767acd5e66089e7e78f27c0fb8a0955', name: this.rightArrow === 'chevron' ? 'chevronRight' : 'caretRight', size: TEXT_LINK_ARROW.arrowIconSize, color: arrowColor })))));
+            } }, index.h("sd-icon", { key: '605572568dd4c2b6dcde9c932d5593e5fdb916a4', name: this.rightArrow === 'chevron' ? 'chevronRight' : 'caretRight', size: TEXT_LINK_ARROW.arrowIconSize, color: arrowColor })))));
     }
 };
 SdTextLink.style = sdTextLinkCss();

package/dist/cjs/sd-toast-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 DEFAULT_DURATION = 4000;
 const DEFAULT_MAX_VISIBLE = 3;
@@ -21,15 +21,22 @@ const SdToastContainer = class {
         this.toastDismiss = index.createEvent(this, "sdToastDismiss", 7);
     }
     get el() { return index.getElement(this); }
+    /** 토스트 표시 위치 */
     position = 'bottom-center';
+    /** 동시에 표시할 최대 토스트 수 */
     maxVisible = DEFAULT_MAX_VISIBLE;
+    /** 자동 닫힘 지연 시간 (ms, 0이면 자동 닫힘 없음) */
     defaultDuration = DEFAULT_DURATION;
+    /** z-index */
     zIndex = DEFAULT_Z_INDEX;
     toasts = [];
     expanded = false;
     toastRefs = new Map();
+    /** 토스트가 표시될 때 발생합니다. */
     toastShow;
+    /** 토스트가 제거될 때 발생합니다. */
     toastDismiss;
+    /** 토스트를 생성하고 ID를 반환합니다. */
     async create(options) {
         const id = `toast-${++toastIdCounter}`;
         const entry = { id, options, state: 'entering' };
@@ -54,9 +61,11 @@ const SdToastContainer = class {
         this.toastShow.emit({ id });
         return id;
     }
+    /** 지정한 ID의 토스트를 닫습니다. */
     async dismiss(id) {
         this.startDismiss(id);
     }
+    /** 모든 토스트를 닫습니다. */
     async dismissAll() {
         (this.toasts || []).forEach(t => this.startDismiss(t.id));
     }
@@ -234,7 +243,7 @@ const SdToastContainer = class {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (index.h("div", { key: 'f5b2cb8f4d1286bbd8f7cd648916294397ed4742', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (index.h("div", { key: 'b75aeffdddcd16267169ae99305ef5f475f53950', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 
 const toast = {
 	icon: "16",
@@ -68,14 +68,23 @@ const SdToast = class {
         this.close = index.createEvent(this, "sdClose", 7);
         this.buttonClick = index.createEvent(this, "sdButtonClick", 7);
     }
+    /** 좌측 아이콘명 */
     icon;
+    /** 표시할 메시지 */
     message;
+    /** 우측 링크 URL */
     link;
+    /** 링크 표시 레이블 (없으면 URL 표시) */
     linkLabel;
+    /** 우측 버튼 레이블 */
     buttonLabel;
+    /** 닫기 버튼 표시 여부 */
     useClose = false;
+    /** 토스트 타입 (색상/아이콘 프리셋) */
     type = 'default';
+    /** 닫기 버튼 클릭 또는 자동 닫힘 시 발생합니다. */
     close;
+    /** 우측 버튼 클릭 시 발생합니다. */
     buttonClick;
     render() {
         const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
@@ -84,12 +93,12 @@ const SdToast = class {
         const linkColor = typeConfig.linkColor ?? typeConfig.content;
         const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
         const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
-        return (index.h("div", { key: '45a278a76dde70b17794763fa35365ac8d634194', style: {
+        return (index.h("div", { key: 'ee54d9d9821821e0c422725c94d465f1e2df7bc6', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
                 '--sd-toast-icon': iconColor,
                 '--sd-toast-link': linkColor,
-            } }, index.h("div", { key: 'eb00957c65514153867322942ed111d24622c75b', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: 'd30f442041ea963e86f8558f3ed07ceb28049ae9', class: "sd-toast__icon" }, index.h("sd-icon", { key: '04e57935a4fe4344f3eb1338cfc436bef449805e', name: this.icon, size: iconSize, color: iconColor }))), index.h("div", { key: '02270cd25d409d44bbd1d7932b074494d2cbeca1', class: "sd-toast__content" }, index.h("span", { key: '5f180c70d130fc04b16901c69a399f6effa328b9', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '4fd2adab87dbdaae94c21483f66256ce773ae965', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: '2c60553150114d6d5b99a2e86b35b4a85c4a34a4', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (index.h("sd-ghost-button", { key: 'c3e01391b713286b65a05352dd39ab98790564f8', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, index.h("div", { key: 'b258e4b49fe530c778c0003516a2ad159805158a', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '850a02dd996c7d1ca214b887e0d3d9899972e319', class: "sd-toast__icon" }, index.h("sd-icon", { key: '50d2817b160bd767a509956338347ee09a34a845', name: this.icon, size: iconSize, color: iconColor }))), index.h("div", { key: '0200da1ef6cfa9fcafa4cacf08998a33847038dc', class: "sd-toast__content" }, index.h("span", { key: 'af039afb2f457acded350ae2323e0bc59765a09e', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '98fdcf360ca632e9f919e01ab0dce8369a1ebe79', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: '45202c0f969ab64e50265ee81f34fc14def26ce2', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (index.h("sd-ghost-button", { key: '48f30258527ae7a8a96db9609f096f5d216246ff', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
 };
 SdToast.style = sdToastCss();