@sellmate/design-system 1.0.62 → 1.0.64

package/dist/esm/sd-select-v2-list-item_2.entry.js

@@ -1,147 +0,0 @@
-import { r as registerInstance, c as createEvent, h } from './index-DsU722JF.js';
-import { e as LIST_ITEM_LAYOUT, g as LIST_ITEM_COLORS, h as LIST_ITEM_TYPOGRAPHY, i as SEARCH_DEBOUNCE_MS } from './sd-select-v2.config-C3eQSZx-.js';
-
-const sdSelectV2ListItemCss = () => `sd-select-v2-list-item{display:block}sd-select-v2-list-item .sd-select-v2-list-item{display:flex;align-items:center;gap:var(--list-item-gap);padding:var(--list-item-padding-y) var(--list-item-padding-right) var(--list-item-padding-y) var(--list-item-padding-left);font-size:var(--list-item-font-size);line-height:var(--list-item-line-height);font-weight:var(--list-item-font-weight);background:var(--list-item-bg);color:var(--list-item-color);cursor:default;user-select:none}sd-select-v2-list-item .sd-select-v2-list-item--selectable{cursor:pointer}sd-select-v2-list-item .sd-select-v2-list-item--depth1-group{border-top:var(--list-item-border-top);font-weight:700}sd-select-v2-list-item .sd-select-v2-list-item--depth2-group{font-weight:500}sd-select-v2-list-item .sd-select-v2-list-item--focused.sd-select-v2-list-item--selectable:not(.sd-select-v2-list-item--disabled){background:var(--list-item-bg-hover);color:var(--list-item-color-hover)}sd-select-v2-list-item .sd-select-v2-list-item--selected:not(.sd-select-v2-list-item--group){font-weight:700;color:var(--list-item-bg-hover)}sd-select-v2-list-item .sd-select-v2-list-item--selected.sd-select-v2-list-item--focused{color:var(--list-item-color-hover)}sd-select-v2-list-item .sd-select-v2-list-item--disabled{color:var(--list-item-color-disabled);cursor:not-allowed}sd-select-v2-list-item .sd-select-v2-list-item__label{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-v2-list-item .sd-select-v2-list-item__count{flex-shrink:0;font-weight:500;color:var(--list-item-color-disabled)}sd-select-v2-list-item .sd-select-v2-list-item--group.sd-select-v2-list-item--focused .sd-select-v2-list-item__count{color:#ffffff}sd-select-v2-list-item .sd-select-v2-list-item__checkbox{flex-shrink:0}`;
-
-const SdSelectV2ListItem = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.listItemClick = createEvent(this, "sdListItemClick", 7);
-    }
-    option;
-    depth = 1;
-    isSelected = false;
-    isFocused = false;
-    useCheckbox = false;
-    countInfo;
-    listItemClick;
-    get isGroup() {
-        return !!this.option.children;
-    }
-    get isSelectable() {
-        return !this.isGroup || this.useCheckbox;
-    }
-    get depthKey() {
-        if (this.depth <= 1)
-            return 'depth1';
-        if (this.depth === 2)
-            return 'depth2';
-        return 'depth3';
-    }
-    get paddingLeft() {
-        return `${LIST_ITEM_LAYOUT.paddingLeft[this.depthKey]}px`;
-    }
-    handleClick = (e) => {
-        e.stopPropagation();
-        if (this.option.disabled || !this.isSelectable)
-            return;
-        this.listItemClick.emit(this.option);
-    };
-    handleCheckboxClick = (e) => {
-        e.stopPropagation();
-    };
-    handleCheckboxUpdate = (e) => {
-        e.stopPropagation();
-        if (this.option.disabled || !this.isSelectable)
-            return;
-        this.listItemClick.emit(this.option);
-    };
-    render() {
-        const isGroup = this.isGroup;
-        const isDepth1Group = isGroup && this.depth === 1;
-        const isDepth2Group = isGroup && this.depth === 2;
-        const cssVars = {
-            '--list-item-padding-y': `${LIST_ITEM_LAYOUT.paddingY}px`,
-            '--list-item-padding-left': this.paddingLeft,
-            '--list-item-padding-right': `${LIST_ITEM_LAYOUT.paddingRight}px`,
-            '--list-item-gap': `${LIST_ITEM_LAYOUT.gap}px`,
-            '--list-item-font-size': `${LIST_ITEM_TYPOGRAPHY.fontSize}px`,
-            '--list-item-line-height': `${LIST_ITEM_TYPOGRAPHY.lineHeight}px`,
-            '--list-item-font-weight': LIST_ITEM_TYPOGRAPHY.fontWeight,
-            '--list-item-bg': isDepth1Group
-                ? LIST_ITEM_COLORS.depth1.bg
-                : isDepth2Group
-                    ? LIST_ITEM_COLORS.depth2.bg
-                    : LIST_ITEM_COLORS.bg.default,
-            '--list-item-bg-hover': LIST_ITEM_COLORS.bg.hover,
-            '--list-item-color': LIST_ITEM_COLORS.content.default,
-            '--list-item-color-hover': LIST_ITEM_COLORS.content.hover,
-            '--list-item-color-disabled': LIST_ITEM_COLORS.content.disabled,
-        };
-        if (isDepth1Group) {
-            cssVars['--list-item-border-top'] = `${LIST_ITEM_COLORS.depth1.borderWidth}px solid ${LIST_ITEM_COLORS.depth1.border}`;
-        }
-        return (h("div", { key: '8cd297b8d4ff1a7ef5c64bcaefef9cc54b3de357', class: {
-                'sd-select-v2-list-item': true,
-                'sd-select-v2-list-item--group': isGroup,
-                'sd-select-v2-list-item--depth1-group': isDepth1Group,
-                'sd-select-v2-list-item--depth2-group': isDepth2Group,
-                'sd-select-v2-list-item--selected': this.isSelected === true,
-                'sd-select-v2-list-item--indeterminate': this.isSelected === null,
-                'sd-select-v2-list-item--focused': this.isFocused,
-                'sd-select-v2-list-item--selectable': this.isSelectable && !this.option.disabled,
-                'sd-select-v2-list-item--disabled': !!this.option.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: '11597153f05d17fc172920a65d26d74b4b7aa239', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, class: "sd-select-v2-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), h("span", { key: '1dc78dcbffc3f3826fac7a9a3b8aa300c3754de6', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (h("span", { key: '5b96136bc54b241359e60849ebd1e792eb749c0d', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
-    }
-};
-SdSelectV2ListItem.style = sdSelectV2ListItemCss();
-
-const sdSelectV2ListItemSearchCss = () => `sd-select-v2-list-item-search{display:block}sd-select-v2-list-item-search .sd-select-v2-list-item-search{padding:4px 8px;position:sticky;top:0;z-index:1;background:white}sd-select-v2-list-item-search .sd-select-v2-list-item-search--scrolled{box-shadow:0 2px 4px rgba(0, 0, 0, 0.08)}sd-select-v2-list-item-search .sd-select-v2-list-item-search__inner{display:flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid #CCCCCC;border-radius:4px;background:white}sd-select-v2-list-item-search .sd-select-v2-list-item-search__inner:focus-within{border-color:#0075FF}sd-select-v2-list-item-search .sd-select-v2-list-item-search__icon{flex-shrink:0}sd-select-v2-list-item-search .sd-select-v2-list-item-search__input{flex:1;border:none;outline:none;font-size:12px;line-height:20px;color:#222222;background:transparent;min-width:0}sd-select-v2-list-item-search .sd-select-v2-list-item-search__input::placeholder{color:#AAAAAA}sd-select-v2-list-item-search .sd-select-v2-list-item-search__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:2px;border:none;background:transparent;cursor:pointer;border-radius:2px}sd-select-v2-list-item-search .sd-select-v2-list-item-search__clear:hover{background:#F0F0F0}`;
-
-const SdSelectV2ListItemSearch = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.searchFilter = createEvent(this, "sdSearchFilter", 7);
-        this.searchFocus = createEvent(this, "sdSearchFocus", 7);
-    }
-    isScrolled = false;
-    searchText = '';
-    searchFilter;
-    searchFocus;
-    inputEl;
-    debounceTimer;
-    focusRafId;
-    componentDidLoad() {
-        requestAnimationFrame(() => {
-            this.focusRafId = requestAnimationFrame(() => {
-                this.inputEl?.focus();
-            });
-        });
-    }
-    async sdFocus() {
-        this.inputEl?.focus();
-    }
-    handleInput = (e) => {
-        this.searchText = e.target.value;
-        if (this.debounceTimer)
-            clearTimeout(this.debounceTimer);
-        this.debounceTimer = setTimeout(() => {
-            this.searchFilter.emit(this.searchText);
-        }, SEARCH_DEBOUNCE_MS);
-    };
-    handleClear = (e) => {
-        e.stopPropagation();
-        this.searchText = '';
-        if (this.debounceTimer)
-            clearTimeout(this.debounceTimer);
-        this.searchFilter.emit('');
-        this.inputEl?.focus();
-    };
-    disconnectedCallback() {
-        if (this.focusRafId)
-            cancelAnimationFrame(this.focusRafId);
-        if (this.debounceTimer)
-            clearTimeout(this.debounceTimer);
-    }
-    render() {
-        return (h("div", { key: '8ccebea10b658edba2c417893f2a939a7361ef1b', class: {
-                'sd-select-v2-list-item-search': true,
-                'sd-select-v2-list-item-search--scrolled': this.isScrolled,
-            } }, h("div", { key: '4007afb556220e746c2379f643afb38445345853', class: "sd-select-v2-list-item-search__inner" }, h("sd-icon", { key: '1afc1ef8aa6f3d26ee1001212ac9ea7d0bf3d1e4', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), h("input", { key: 'a32ddcc18a401217f1a624e544c56bd499b0f47e', ref: el => {
-                this.inputEl = el;
-            }, type: "text", class: "sd-select-v2-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), this.searchText && (h("button", { key: '150d5aca71d6ac6277917177ed4e4e157e4ba33f', type: "button", class: "sd-select-v2-list-item-search__clear", onClick: this.handleClear }, h("sd-icon", { key: 'f0397c023e5dd5972eb6dfd20f9fb1ac1027fb2f', name: "close", size: 12, color: "#888888" }))))));
-    }
-};
-SdSelectV2ListItemSearch.style = sdSelectV2ListItemSearchCss();
-
-export { SdSelectV2ListItem as sd_select_v2_list_item, SdSelectV2ListItemSearch as sd_select_v2_list_item_search };

package/dist/esm/sd-select-v2-listbox_2.entry.js

@@ -1,350 +0,0 @@
-import { r as registerInstance, c as createEvent, h } from './index-DsU722JF.js';
-import { c as countLeaves, S as SEARCH_THRESHOLD, f as filterTree, E as EMPTY_MESSAGE, L as LIST_BOX_LAYOUT, a as SELECT_COLORS, b as SELECT_TYPOGRAPHY, d as SELECT_LAYOUT } from './sd-select-v2.config-C3eQSZx-.js';
-
-const sdSelectV2ListboxCss = () => `sd-select-v2-listbox{display:block}sd-select-v2-listbox .sd-select-v2-listbox{display:flex;flex-direction:column;min-width:var(--listbox-trigger-width);max-width:var(--listbox-max-width);max-height:var(--listbox-max-height);width:fit-content;border-radius:var(--listbox-radius);background:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);overflow:hidden;outline:none}sd-select-v2-listbox .sd-select-v2-listbox__list{flex:1;min-height:0;overflow-y:auto;padding-bottom:0}sd-select-v2-listbox .sd-select-v2-listbox__empty{padding:12px;text-align:center;font-size:12px;line-height:20px;color:#888888}`;
-
-const SdSelectV2Listbox = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.optionSelect = createEvent(this, "sdOptionSelect", 7);
-    }
-    name = 'default';
-    options = [];
-    value = null;
-    emitValue = false;
-    triggerWidth = '200px';
-    maxWidth = '640px';
-    maxHeight = '260px';
-    searchKeyword = '';
-    isScrolled = false;
-    focusedIndex = -1;
-    optionSelect;
-    listEl;
-    lastScrolledIndex = -1;
-    keydownAttached = false;
-    suppressHover = false;
-    get isDepth() {
-        return this.name === 'default_depth' || this.name === 'multi_depth';
-    }
-    get isMulti() {
-        return this.name === 'multi' || this.name === 'multi_depth';
-    }
-    get showSearch() {
-        const count = this.isDepth ? countLeaves(this.options) : this.options.length;
-        return count >= SEARCH_THRESHOLD;
-    }
-    get filteredOptions() {
-        if (!this.searchKeyword)
-            return this.options;
-        if (this.isDepth)
-            return filterTree(this.options, this.searchKeyword);
-        const keyword = this.searchKeyword.toLowerCase();
-        return this.options.filter(o => o.label.toLowerCase().includes(keyword));
-    }
-    get isEmpty() {
-        if (this.isDepth)
-            return countLeaves(this.filteredOptions) === 0 && this.filteredOptions.length === 0;
-        return this.filteredOptions.length === 0;
-    }
-    getSelectedValues() {
-        if (!this.value || !Array.isArray(this.value))
-            return new Set();
-        if (this.emitValue) {
-            return new Set(this.value);
-        }
-        return new Set(this.value.map(s => s.value));
-    }
-    isOptionSelected(option) {
-        if (this.isMulti) {
-            return this.getSelectedValues().has(option.value);
-        }
-        if (this.emitValue) {
-            return this.value === option.value;
-        }
-        if (this.value != null && typeof this.value === 'object' && !Array.isArray(this.value)) {
-            return this.value.value === option.value;
-        }
-        return this.value === option.value;
-    }
-    getGroupSelectionState(option) {
-        if (!this.isMulti || !option.children)
-            return false;
-        const selectedValues = this.getSelectedValues();
-        if (selectedValues.size === 0)
-            return false;
-        const leaves = this.collectVisibleLeaves(option);
-        if (leaves.length === 0)
-            return false;
-        const selectedCount = leaves.filter(l => selectedValues.has(l.value)).length;
-        if (selectedCount === 0)
-            return false;
-        if (selectedCount === leaves.length)
-            return true;
-        return null;
-    }
-    getCountInfo(option) {
-        if (!this.isMulti || !option.children)
-            return undefined;
-        const selectedValues = this.getSelectedValues();
-        const leaves = this.collectVisibleLeaves(option);
-        const selectedCount = leaves.filter(l => selectedValues.has(l.value)).length;
-        return { selected: selectedCount, total: leaves.length };
-    }
-    findOriginalOption(value, options) {
-        for (const opt of options) {
-            if (opt.value === value)
-                return opt;
-            if (opt.children) {
-                const found = this.findOriginalOption(value, opt.children);
-                if (found)
-                    return found;
-            }
-        }
-        return undefined;
-    }
-    collectLeaves(option) {
-        if (!option.children)
-            return [option];
-        return option.children.flatMap(child => this.collectLeaves(child));
-    }
-    /**
-     * Returns the leaves currently visible to the user for the given (possibly
-     * filtered) option. When a group's own label matched the search keyword its
-     * `children` is emptied by `filterTree`; in that case we fall back to the
-     * full original subtree because the user has no way to deselect descendants
-     * individually.
-     */
-    collectVisibleLeaves(option) {
-        if (!option.children)
-            return [option];
-        if (option.children.length === 0) {
-            const original = this.findOriginalOption(option.value, this.options);
-            return original ? this.collectLeaves(original) : [];
-        }
-        return option.children.flatMap(child => this.collectVisibleLeaves(child));
-    }
-    get navigableOptions() {
-        const items = [];
-        const walk = (opts) => {
-            for (const opt of opts) {
-                const isGroup = !!opt.children;
-                const isSelectable = !isGroup || this.isMulti;
-                if (isSelectable && !opt.disabled)
-                    items.push(opt);
-                if (isGroup && opt.children && opt.children.length > 0)
-                    walk(opt.children);
-            }
-        };
-        walk(this.filteredOptions);
-        return items;
-    }
-    isOptionFocused(option) {
-        if (this.focusedIndex < 0)
-            return false;
-        const focused = this.navigableOptions[this.focusedIndex];
-        // filterTree 가 매 호출마다 옵션 객체를 새로 복제하기 때문에 참조 비교
-        // (=== / indexOf) 는 검색이 적용된 동안 항상 실패한다. 고유 식별자인
-        // value 로 비교해야 한다.
-        return !!focused && focused.value === option.value;
-    }
-    resetFocusOnFilter() {
-        // 필터가 바뀌면 이전 인덱스가 가리키던 항목이 사라질 수 있으므로
-        // 새 결과의 첫 항목으로 옮긴다. 결과가 비면 -1.
-        const items = this.navigableOptions;
-        this.focusedIndex = items.length > 0 ? 0 : -1;
-        // 키보드 네비게이션 직후 마우스가 한 번도 안 움직인 채로 사용자가
-        // 검색을 시작했다면 hover suppression 이 켜진 상태로 남아있을 수 있다.
-        // 검색이라는 명백한 사용자 의도 전환 시점에 강제로 해제한다.
-        if (this.suppressHover) {
-            document.removeEventListener('mousemove', this.releaseHoverSuppress, true);
-            this.suppressHover = false;
-        }
-    }
-    handleSearchFilter = (e) => {
-        this.searchKeyword = e.detail;
-    };
-    handleScroll = (e) => {
-        this.isScrolled = e.target.scrollTop > 0;
-    };
-    emitOptionSelect(option) {
-        this.optionSelect.emit({
-            option,
-            leaves: this.collectVisibleLeaves(option),
-        });
-    }
-    handleOptionClick = (e) => {
-        e.stopPropagation();
-        this.emitOptionSelect(e.detail);
-    };
-    handleOptionHover = (option) => {
-        if (this.suppressHover)
-            return;
-        const idx = this.navigableOptions.findIndex(o => o.value === option.value);
-        if (idx >= 0)
-            this.focusedIndex = idx;
-    };
-    releaseHoverSuppress = () => {
-        this.suppressHover = false;
-        document.removeEventListener('mousemove', this.releaseHoverSuppress, true);
-    };
-    handleKeyDown = (e) => {
-        const items = this.navigableOptions;
-        if (e.key === 'ArrowDown') {
-            if (items.length === 0)
-                return;
-            e.preventDefault();
-            e.stopPropagation();
-            this.focusedIndex = this.focusedIndex < 0 ? 0 : (this.focusedIndex + 1) % items.length;
-            this.beginHoverSuppression();
-        }
-        else if (e.key === 'ArrowUp') {
-            if (items.length === 0)
-                return;
-            e.preventDefault();
-            e.stopPropagation();
-            this.focusedIndex = this.focusedIndex <= 0 ? items.length - 1 : this.focusedIndex - 1;
-            this.beginHoverSuppression();
-        }
-        else if (e.key === 'Enter') {
-            if (this.focusedIndex < 0 || this.focusedIndex >= items.length)
-                return;
-            e.preventDefault();
-            e.stopPropagation();
-            this.emitOptionSelect(items[this.focusedIndex]);
-        }
-    };
-    /**
-     * 키보드로 인덱스를 옮기면 자동 스크롤이 일어나는데, 정지한 마우스 커서
-     * 아래로 다른 항목이 미끄러져 들어오면서 mouseenter 가 발화해 인덱스를
-     * 다시 덮어쓰는 문제를 막는다. 실제로 마우스가 한 번이라도 움직이기 전까지
-     * hover 갱신을 무시한다.
-     */
-    beginHoverSuppression() {
-        if (this.suppressHover)
-            return;
-        this.suppressHover = true;
-        document.addEventListener('mousemove', this.releaseHoverSuppress, true);
-    }
-    /**
-     * 리스트 컨테이너 내부에서만 스크롤한다. `scrollIntoView` 는 조상 스크롤
-     * 컨테이너(=문서 자체)까지 함께 스크롤시키므로 사용하지 않는다.
-     */
-    scrollFocusedIntoView() {
-        const list = this.listEl;
-        const focusedEl = list?.querySelector('.sd-select-v2-list-item--focused');
-        if (!list || !focusedEl)
-            return;
-        const listRect = list.getBoundingClientRect();
-        const itemRect = focusedEl.getBoundingClientRect();
-        if (itemRect.top < listRect.top) {
-            list.scrollTop += itemRect.top - listRect.top;
-        }
-        else if (itemRect.bottom > listRect.bottom) {
-            list.scrollTop += itemRect.bottom - listRect.bottom;
-        }
-    }
-    /**
-     * sd-portal 이 슬롯 노드를 body 로 이동시키면서 disconnect → connect 가
-     * 발생하므로, 키보드 리스너는 한 번만 실행되는 componentDidLoad 가 아니라
-     * connectedCallback / disconnectedCallback 에 묶어 매번 재부착한다.
-     * capture phase 로 잡아 포커스가 검색 input 에 있어도 ↑/↓/Enter 가
-     * input 의 기본 동작(커서 이동)·페이지 스크롤보다 먼저 처리되도록 한다.
-     */
-    connectedCallback() {
-        if (!this.keydownAttached) {
-            document.addEventListener('keydown', this.handleKeyDown, true);
-            this.keydownAttached = true;
-        }
-    }
-    disconnectedCallback() {
-        if (this.keydownAttached) {
-            document.removeEventListener('keydown', this.handleKeyDown, true);
-            this.keydownAttached = false;
-        }
-        if (this.suppressHover) {
-            document.removeEventListener('mousemove', this.releaseHoverSuppress, true);
-            this.suppressHover = false;
-        }
-    }
-    componentDidRender() {
-        if (this.focusedIndex !== this.lastScrolledIndex) {
-            this.lastScrolledIndex = this.focusedIndex;
-            if (this.focusedIndex >= 0)
-                this.scrollFocusedIntoView();
-        }
-    }
-    renderOptions(options, depth = 1) {
-        return options.map(option => {
-            const isGroup = !!option.children;
-            return [
-                h("sd-select-v2-list-item", { option: option, depth: depth, isSelected: isGroup ? this.getGroupSelectionState(option) : this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, countInfo: this.getCountInfo(option), onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) }),
-                isGroup && option.children ? this.renderOptions(option.children, depth + 1) : null,
-            ];
-        });
-    }
-    render() {
-        const cssVars = {
-            '--listbox-trigger-width': this.triggerWidth,
-            '--listbox-max-width': this.maxWidth,
-            '--listbox-max-height': this.maxHeight,
-            '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
-        };
-        return (h("div", { key: '92289973077789bd6f9657bb5b2e5567845bdc19', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (h("sd-select-v2-list-item-search", { key: 'a26b9ba36f42165ab80347ea4f0194b98746a9a6', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: 'd563a179278ec5c6eaa0b4c71d18cc5055bbebb5', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll, ref: el => {
-                this.listEl = el;
-            } }, this.isEmpty ? (h("div", { class: "sd-select-v2-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (h("sd-select-v2-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": [{
-                "resetFocusOnFilter": 0
-            }]
-    }; }
-};
-SdSelectV2Listbox.style = sdSelectV2ListboxCss();
-
-const sdSelectV2TriggerCss = () => `sd-select-v2-trigger{display:block;width:100%;height:100%}sd-select-v2-trigger .sd-select-v2-trigger{display:flex;width:100%;height:100%;cursor:pointer;user-select:none;overflow:hidden;border-radius:3px}sd-select-v2-trigger .sd-select-v2-trigger--disabled{cursor:not-allowed}sd-select-v2-trigger .sd-select-v2-trigger__content{display:flex;align-items:center;gap:var(--trigger-gap);flex:1;padding:0 var(--trigger-padding-x);min-width:0}sd-select-v2-trigger .sd-select-v2-trigger__text{flex:1;font-size:var(--trigger-font-size);line-height:var(--trigger-line-height);font-weight:var(--trigger-font-weight);color:var(--trigger-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-v2-trigger .sd-select-v2-trigger__icon{flex-shrink:0;transition:transform 0.2s ease}sd-select-v2-trigger .sd-select-v2-trigger__icon--open{transform:rotate(180deg)}`;
-
-const SdSelectV2Trigger = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.triggerClick = createEvent(this, "sdTriggerClick", 7);
-    }
-    displayText = '';
-    placeholder = '선택';
-    disabled = false;
-    isOpen = false;
-    triggerClick;
-    handleClick = () => {
-        if (this.disabled)
-            return;
-        this.triggerClick.emit();
-    };
-    render() {
-        const hasValue = !!this.displayText;
-        const cssVars = {
-            '--trigger-padding-x': `${SELECT_LAYOUT.paddingX}px`,
-            '--trigger-gap': `${SELECT_LAYOUT.gap}px`,
-            '--trigger-font-size': `${SELECT_TYPOGRAPHY.fontSize}px`,
-            '--trigger-line-height': `${SELECT_TYPOGRAPHY.lineHeight}px`,
-            '--trigger-font-weight': SELECT_TYPOGRAPHY.fontWeight,
-            '--trigger-color': this.disabled
-                ? SELECT_COLORS.text.disabled
-                : hasValue
-                    ? SELECT_COLORS.text.default
-                    : SELECT_COLORS.icon.default,
-            '--trigger-icon-color': this.disabled
-                ? SELECT_COLORS.icon.disabled
-                : SELECT_COLORS.icon.default,
-        };
-        return (h("div", { key: '02e382b2a1867fa8816c11e2d07bb042a15027fb', class: {
-                'sd-select-v2-trigger': true,
-                'sd-select-v2-trigger--open': this.isOpen,
-                'sd-select-v2-trigger--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, h("div", { key: 'e08360c05f765ccc0c9dbefe8e402a66edd1c242', class: "sd-select-v2-trigger__content" }, h("span", { key: 'dc00441e24e17b9bb28a36892ff3564d4bb40a42', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), h("sd-icon", { key: '3d78221139a6df71aa349277ed0f8d73fbba23ba', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
-                'sd-select-v2-trigger__icon': true,
-                'sd-select-v2-trigger__icon--open': this.isOpen,
-            } }))));
-    }
-};
-SdSelectV2Trigger.style = sdSelectV2TriggerCss();
-
-export { SdSelectV2Listbox as sd_select_v2_listbox, SdSelectV2Trigger as sd_select_v2_trigger };

package/dist/esm/sd-select-v2.config-C3eQSZx-.js

@@ -1,158 +0,0 @@
-const select = {
-	paddingX: "12",
-	icon: {
-		"default": "#888888",
-		disabled: "#BBBBBB"
-	},
-	gap: "8",
-	typography: {
-		fontWeight: "400",
-		fontSize: "12",
-		lineHeight: "20"},
-	text: {
-		"default": "#222222",
-		disabled: "#888888"
-	}};
-var selectTokens = {
-	select: select
-};
-
-const listItem = {
-	paddingY: "4",
-	paddingRight: "12",
-	gap: "8",
-	paddingLeft: {
-		depth1: "12",
-		depth2: "20",
-		depth3: "28"
-	},
-	typography: {
-		fontWeight: "400",
-		fontSize: "12",
-		lineHeight: "20"},
-	bg: {
-		"default": "#FFFFFF",
-		hover: "#0075FF"
-	},
-	content: {
-		"default": "#222222",
-		hover: "#FFFFFF",
-		disabled: "#888888"
-	},
-	depth1: {
-		bg: {
-			"default": "#EFF6FF"},
-		border: {
-			color: "#E1E1E1",
-			width: "1"
-		}},
-	depth2: {
-		middle: {
-			bg: "#F6F6F6"}
-	}};
-var listItemTokens = {
-	listItem: listItem
-};
-
-const listBox = {
-	radius: "4"};
-var listBoxTokens = {
-	listBox: listBox
-};
-
-// ── Select Trigger Tokens ──
-const SELECT_LAYOUT = {
-    paddingX: selectTokens.select.paddingX,
-    gap: selectTokens.select.gap};
-const SELECT_TYPOGRAPHY = {
-    fontSize: selectTokens.select.typography.fontSize,
-    lineHeight: selectTokens.select.typography.lineHeight,
-    fontWeight: selectTokens.select.typography.fontWeight,
-};
-const SELECT_COLORS = {
-    icon: {
-        default: selectTokens.select.icon.default,
-        disabled: selectTokens.select.icon.disabled,
-    },
-    text: {
-        default: selectTokens.select.text.default,
-        disabled: selectTokens.select.text.disabled,
-    },
-};
-// ── ListItem Tokens ──
-const LIST_ITEM_LAYOUT = {
-    paddingY: listItemTokens.listItem.paddingY,
-    paddingRight: listItemTokens.listItem.paddingRight,
-    paddingLeft: {
-        depth1: listItemTokens.listItem.paddingLeft.depth1,
-        depth2: listItemTokens.listItem.paddingLeft.depth2,
-        depth3: listItemTokens.listItem.paddingLeft.depth3,
-    },
-    gap: listItemTokens.listItem.gap,
-};
-const LIST_ITEM_TYPOGRAPHY = {
-    fontSize: listItemTokens.listItem.typography.fontSize,
-    lineHeight: listItemTokens.listItem.typography.lineHeight,
-    fontWeight: listItemTokens.listItem.typography.fontWeight,
-};
-const LIST_ITEM_COLORS = {
-    bg: {
-        default: listItemTokens.listItem.bg.default,
-        hover: listItemTokens.listItem.bg.hover,
-    },
-    content: {
-        default: listItemTokens.listItem.content.default,
-        hover: listItemTokens.listItem.content.hover,
-        disabled: listItemTokens.listItem.content.disabled,
-    },
-    depth1: {
-        bg: listItemTokens.listItem.depth1.bg.default,
-        border: listItemTokens.listItem.depth1.border.color,
-        borderWidth: listItemTokens.listItem.depth1.border.width,
-    },
-    depth2: {
-        bg: listItemTokens.listItem.depth2.middle.bg,
-    }};
-// ── ListBox Tokens ──
-const LIST_BOX_LAYOUT = {
-    radius: listBoxTokens.listBox.radius,
-};
-// ── Constants ──
-const SEARCH_THRESHOLD = 11;
-const SEARCH_DEBOUNCE_MS = 1000;
-const EMPTY_MESSAGE = '표시할 항목이 없습니다.';
-// ── Utilities ──
-function countLeaves(options) {
-    return options.reduce((sum, option) => {
-        if (option.children) {
-            return sum + countLeaves(option.children);
-        }
-        return sum + 1;
-    }, 0);
-}
-function filterTree(options, keyword) {
-    const lowerKeyword = keyword.toLowerCase();
-    return options.reduce((acc, option) => {
-        const selfMatch = option.label.toLowerCase().includes(lowerKeyword);
-        if (option.children) {
-            // 그룹: 자식은 항상 추가로 필터링한다.
-            // - 자식 중 일치하는 게 있으면 그 자식들만 노출
-            // - 자식 매칭이 없더라도 그룹명이 매칭되면 그룹 헤더는 그대로 노출
-            //   (이때 children 은 빈 배열로 두고, 선택 동작은 collectVisibleLeaves
-            //    의 fallback 이 원본 트리를 사용해 처리한다)
-            const filteredChildren = filterTree(option.children, keyword);
-            if (filteredChildren.length > 0) {
-                acc.push({ ...option, children: filteredChildren });
-            }
-            else if (selfMatch) {
-                acc.push({ ...option, children: [] });
-            }
-        }
-        else if (selfMatch) {
-            acc.push({ ...option });
-        }
-        return acc;
-    }, []);
-}
-
-export { EMPTY_MESSAGE as E, LIST_BOX_LAYOUT as L, SEARCH_THRESHOLD as S, SELECT_COLORS as a, SELECT_TYPOGRAPHY as b, countLeaves as c, SELECT_LAYOUT as d, LIST_ITEM_LAYOUT as e, filterTree as f, LIST_ITEM_COLORS as g, LIST_ITEM_TYPOGRAPHY as h, SEARCH_DEBOUNCE_MS as i };