@sellmate/design-system 1.0.62 → 1.0.63

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

@@ -0,0 +1,656 @@
+import { r as registerInstance, c as createEvent, h } from './index-BqHL8W3c.js';
+
+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",
+	paddingBottom: "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,
+    paddingBottom: listBoxTokens.listBox.paddingBottom,
+};
+// ── 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;
+    }, []);
+}
+
+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: '2c6431785cccc79e4ce7eb0252877f18e799bb03', 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: '88751dff8393de63ff2762bf6a52f685b478cbe2', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-v2-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), h("span", { key: '09d711dbd6181ac2da194813cd8d298061428c8e', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (h("span", { key: '8d0e113be506cfefa1994ee8a43efa7b6f09c707', 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}sd-select-v2-list-item-search .sd-select-v2-list-item-search__clear--hidden{visibility:hidden;pointer-events:none}`;
+
+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: '10f081acd51cad3b6632b2afcd5017c02fe2ed57', class: {
+                'sd-select-v2-list-item-search': true,
+                'sd-select-v2-list-item-search--scrolled': this.isScrolled,
+            } }, h("div", { key: '585f29e2826841874e88ce01fa08306cffb39033', class: "sd-select-v2-list-item-search__inner" }, h("sd-icon", { key: 'fe3d85e03b2e7302102babd3736e7aea0b08fcee', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), h("input", { key: '62913d0721cf6171bc7dc52fb6548410fa87527e', 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() }), h("button", { key: '986ea74f6b02e65f138665f2afd19fa10f7f430a', type: "button", class: {
+                'sd-select-v2-list-item-search__clear': true,
+                'sd-select-v2-list-item-search__clear--hidden': !this.searchText,
+            }, onClick: this.handleClear, tabindex: this.searchText ? 0 : -1, "aria-hidden": this.searchText ? 'false' : 'true' }, h("sd-icon", { key: '344bbbb25eab6a6a3f4cce5cde8d9a10e9b13f25', name: "close", size: 12, color: "#888888" })))));
+    }
+};
+SdSelectV2ListItemSearch.style = sdSelectV2ListItemSearchCss();
+
+const sdSelectV2ListboxCss = () => `sd-select-v2-listbox{display:block}sd-select-v2-listbox .sd-select-v2-listbox{display:flex;flex-direction:column;width:var(--listbox-trigger-width);max-width:var(--listbox-max-width);max-height:var(--listbox-max-height);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:var(--listbox-padding-bottom)}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`,
+            '--listbox-padding-bottom': `${LIST_BOX_LAYOUT.paddingBottom}px`,
+        };
+        return (h("div", { key: 'd3f41c72aa6d013efff695f2435e72482f25a28f', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (h("sd-select-v2-list-item-search", { key: '6586d230d0eb3466cf30d644b3ebe94482e91847', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '9de0cfc6d458f48a3770fa61dfc019411cfd96bb', 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: '906bfdacc9ec8028d61335dd8a6eb9fa887ccd2d', 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: '3688fb32fbc996ce423a92007d1208b950f7baba', class: "sd-select-v2-trigger__content" }, h("span", { key: '1c38cf28cb536aa93541e1bfd0b3736ba8b59782', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), h("sd-icon", { key: '9bfc7681e142766eeaa42dd801c8ff88dec61861', 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 { SdSelectV2ListItem as sd_select_v2_list_item, SdSelectV2ListItemSearch as sd_select_v2_list_item_search, SdSelectV2Listbox as sd_select_v2_listbox, SdSelectV2Trigger as sd_select_v2_trigger };