@sellmate/design-system 1.20.1 → 1.22.0

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 
 const radio = {
 	size: "16",
@@ -84,10 +84,15 @@ const SdRadio = class {
         index.registerInstance(this, hostRef);
         this.update = index.createEvent(this, "sdUpdate", 7);
     }
+    /** 라디오 그룹의 현재 선택 값 */
     value;
+    /** 이 라디오 아이템의 값 */
     val;
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 표시할 라벨 텍스트 */
     label;
+    /** 선택 값이 변경될 때 발생합니다. */
     update;
     valueChanged(newValue) {
         this.value = newValue;
@@ -130,7 +135,7 @@ const SdRadio = class {
             '--sd-radio-label-color': RADIO_COLORS.label.default,
             '--sd-radio-label-disabled-color': RADIO_COLORS.label.disabled,
         };
-        return (index.h("label", { key: 'f403a1fd88109a6907cc37b03b35fe5a7bbafdfb', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("input", { key: 'ba8c105d6d52bc4452e1b9614f42dfa2d99221e1', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), index.h("span", { key: 'd92352c59bf7f144a68decd3652dc7208b813a0e', class: "sd-radio__circle" }), this.label && (index.h("span", { key: 'bc0b1384dee0b22efec56249edc88184a96c6efe', class: "sd-radio__label", "data-label": this.label }, this.label))));
+        return (index.h("label", { key: 'f220a45add2be550bc696cd2442b8520ea0143f0', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("input", { key: '64692f5bf49783f166be9327877a474816a556ca', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), index.h("span", { key: '3c30268adcbd735857b4163ecba444b5a57cba08', class: "sd-radio__circle" }), this.label && (index.h("span", { key: 'b641086ab4ff9161ba4fb733b87c751b6863fe06', class: "sd-radio__label", "data-label": this.label }, this.label))));
     }
     static get watchers() { return {
         "value": [{

package/dist/cjs/sd-select-list-item_2.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 var sdSelect_config = require('./sd-select.config-C9Ohe1QA.js');
 var sanitizeInlineHtml = require('./sanitize-inline-html-CRCAeQ46.js');
 require('./component.listItem-Bnh0r_CA.js');
@@ -12,12 +12,19 @@ const SdSelectListItem = class {
         index.registerInstance(this, hostRef);
         this.listItemClick = index.createEvent(this, "sdListItemClick", 7);
     }
+    /** 렌더링할 옵션 데이터 */
     option;
+    /** 계층 깊이 (1~3) */
     depth = 1;
+    /** 선택 상태 (null=중간) */
     isSelected = false;
+    /** 키보드 포커스 상태 여부 */
     isFocused = false;
+    /** 체크박스 표시 여부 */
     useCheckbox = false;
+    /** 다중 선택 시 (선택/전체) 카운트 */
     countInfo;
+    /** 항목 클릭 시 발생합니다. */
     listItemClick;
     get isGroup() {
         return !!this.option.children;
@@ -81,7 +88,7 @@ const SdSelectListItem = class {
         return (
         // 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        index.h("div", { key: '4322a04d65e4b2e1d82d0a6b09fdf6a57cce79ca', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
+        index.h("div", { key: '7717c82ea9f36bd44bf8a19d16ba7df6441f6715', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
                 'sd-select-list-item': true,
                 'sd-select-list-item--group': isGroup,
                 'sd-select-list-item--depth1-group': isDepth1Group,
@@ -91,7 +98,7 @@ const SdSelectListItem = class {
                 'sd-select-list-item--focused': this.isFocused,
                 'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
                 'sd-select-list-item--disabled': !!this.option.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (index.h("sd-checkbox", { key: '47ae4bbe3c2fd960dcee0f1157ae8003dc45f205', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), sdSelect_config.isHtmlLabel(this.option.label) ? (index.h("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml.sanitizeInlineHtml(this.option.label)) })) : (index.h("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (index.h("span", { key: 'c89ba1e3ef52a1809d1252aaee5a18c40ff7cd61', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (index.h("sd-checkbox", { key: '68d8c03d580fc2c411ee4fba917207705f3cf2d2', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), sdSelect_config.isHtmlLabel(this.option.label) ? (index.h("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml.sanitizeInlineHtml(this.option.label)) })) : (index.h("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (index.h("span", { key: '56ae08c55215a3970df99ecd74549ded5667265c', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
 };
 SdSelectListItem.style = sdSelectListItemCss();
@@ -104,9 +111,12 @@ const SdSelectListItemSearch = class {
         this.searchFilter = index.createEvent(this, "sdSearchFilter", 7);
         this.searchFocus = index.createEvent(this, "sdSearchFocus", 7);
     }
+    /** 리스트가 스크롤된 상태 여부 (그림자 효과용) */
     isScrolled = false;
     searchText = '';
+    /** 검색어가 변경될 때 발생합니다. */
     searchFilter;
+    /** 검색 입력에 포커스될 때 발생합니다. */
     searchFocus;
     inputEl;
     debounceTimer;
@@ -118,6 +128,7 @@ const SdSelectListItemSearch = class {
             });
         });
     }
+    /** 검색 입력에 포커스를 이동합니다. */
     async sdFocus() {
         this.inputEl?.focus();
     }
@@ -144,15 +155,15 @@ const SdSelectListItemSearch = class {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (index.h("div", { key: '94215143f5e47887943c726147739cdb1a9fcbf7', class: {
+        return (index.h("div", { key: 'fed1a43f1901d23c7c007a4597b95970c0aad4ad', class: {
                 'sd-select-list-item-search': true,
                 'sd-select-list-item-search--scrolled': this.isScrolled,
-            } }, index.h("div", { key: '0ff422b93d0e15f2425ef760706ae0e6e2cb79f6', class: "sd-select-list-item-search__inner" }, index.h("sd-icon", { key: 'cc3468339c8b76103b67182309fa3aa2baf24380', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), index.h("input", { key: 'acc468ede845d0f5890c7908311443ea2aa156cf', ref: el => {
+            } }, index.h("div", { key: '23b278a4b40b7b8506a13f284b3759b96b613b99', class: "sd-select-list-item-search__inner" }, index.h("sd-icon", { key: '2150f73e1f20f05a28407b984977f7e91131217e', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), index.h("input", { key: '7dc4470ea57b54ebc5f3313f6e22d100f4cc4591', ref: el => {
                 this.inputEl = el;
-            }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), index.h("button", { key: 'b1f1539aea4eb76458794dcb041e53c7af7b91e2', type: "button", class: {
+            }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), index.h("button", { key: '60a363380da8689baa1e9e20b075df749846137a', type: "button", class: {
                 'sd-select-list-item-search__clear': true,
                 'sd-select-list-item-search__clear--hidden': this.searchText === '',
-            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, index.h("sd-icon", { key: 'a137986e0c801a6cf95e279edeb6a9b21cf00170', name: "close", size: 12, color: "#888888" })))));
+            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, index.h("sd-icon", { key: '7b27eb444864674578f97eaa374d1e9af486f97a', name: "close", size: 12, color: "#888888" })))));
     }
 };
 SdSelectListItemSearch.style = sdSelectListItemSearchCss();

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": [{