@sellmate/design-system 1.28.0 → 1.29.0

package/dist/esm/{sd-select_3.entry.js → sd-select-list-item_4.entry.js}

@@ -1,317 +1,295 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-DDNBPrZh.js';
-import { n as nanoid } from './index-CCwNgVmC.js';
-import { c as countLeaves, S as SEARCH_THRESHOLD, f as filterTree, i as isHtmlLabel, e as extractText, E as EMPTY_MESSAGE, L as LIST_BOX_LAYOUT, a as SELECT_COLORS, b as SELECT_TYPOGRAPHY, d as SELECT_LAYOUT } from './sd-select.config-CeHGlqOT.js';
+import { r as registerInstance, c as createEvent, h } from './index-Dz490Ukt.js';
+import { l as listItemTokens } from './component.listItem-4S0_Ykmo.js';
+import { l as listBoxTokens } from './component.listBox-DlJaYVWf.js';
 import { s as sanitizeInlineHtml } from './sanitize-inline-html-BE4tnQ2Z.js';
-import './component.listItem-4S0_Ykmo.js';
-import './component.listBox-DlJaYVWf.js';
 
-const sdSelectCss = () => `sd-select{display:inline-flex}sd-select sd-portal{display:none}sd-select .sd-select{position:relative;width:100%;height:100%}`;
+const select = {
+	sm: {
+		paddingX: "12",
+		gap: "8",
+		typography: {
+			fontWeight: "400",
+			fontSize: "12",
+			lineHeight: "20"}},
+	icon: {
+		"default": "#888888",
+		disabled: "#BBBBBB"
+	},
+	text: {
+		"default": "#222222",
+		disabled: "#888888"
+	}
+};
+var selectTokens = {
+	select: select
+};
 
-const SdSelect = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.update = createEvent(this, "sdUpdate", 7);
-        this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
-    }
-    static VIEWPORT_PADDING = 20;
-    static PORTAL_OFFSET_Y = 4;
-    static CLOSE_ANIMATION_DURATION = 150;
-    get el() { return 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;
-    triggerWidth = '200px';
-    resolvedDropdownHeight = '260px';
-    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));
-        if (this.disabled || this.isOpen)
-            return;
-        this.prepareDropdownGeometry();
-        if (this.closeAnimationTimer)
-            clearTimeout(this.closeAnimationTimer);
-        this.isAnimatingOut = false;
-        this.isOpen = true;
-    }
-    triggerRef;
-    triggerComponentRef;
-    closeAnimationTimer;
-    /** 폼 연동용 name 속성 */
-    name = nanoid();
-    triggerHasFocus = false;
-    watchIsOpen(newValue) {
-        this.syncFocusedState(newValue);
-        this.dropDownShow.emit({ isOpen: newValue });
-    }
-    get isMulti() {
-        return this.type === 'multi' || this.type === 'multi_depth';
-    }
-    get displayText() {
-        if (this.isMulti) {
-            if (!Array.isArray(this.value) || this.value.length === 0)
-                return '';
-            const nonDisabledLeaves = this.getNonDisabledLeaves(this.options);
-            const selected = this.getSelectedOptions();
-            const allSelected = nonDisabledLeaves.length > 0 &&
-                nonDisabledLeaves.every(leaf => selected.some(s => s.value === leaf.value));
-            if (allSelected)
-                return this.allSelectedLabel ?? '전체';
-            const flat = this.flattenOptions(this.options);
-            return this.value
-                .map(item => {
-                if (item != null && typeof item === 'object') {
-                    const opt = item;
-                    return opt.label ?? flat.find(o => o.value === opt.value)?.label ?? '';
-                }
-                return flat.find(o => o.value === item)?.label ?? '';
-            })
-                .filter(Boolean)
-                .join(', ');
+// ── Select Trigger Tokens ──
+const SELECT_LAYOUT = {
+    paddingX: selectTokens.select.sm.paddingX,
+    gap: selectTokens.select.sm.gap};
+const SELECT_TYPOGRAPHY = {
+    fontSize: selectTokens.select.sm.typography.fontSize,
+    lineHeight: selectTokens.select.sm.typography.lineHeight,
+    fontWeight: selectTokens.select.sm.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.default.fontSize,
+    lineHeight: listItemTokens.listItem.typography.default.lineHeight,
+    fontWeight: listItemTokens.listItem.typography.default.fontWeight,
+    selectedFontWeight: listItemTokens.listItem.typography.selected.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,
+        selected: listItemTokens.listItem.content.selected,
+    },
+    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 isHtmlLabel(label) {
+    return /<[a-z][\s\S]*>/i.test(label);
+}
+function extractText(html) {
+    return html.replace(/<[^>]*>/g, '');
+}
+function countLeaves(options) {
+    return options.reduce((sum, option) => {
+        if (option.children) {
+            return sum + countLeaves(option.children);
         }
-        if (this.value == null)
-            return '';
-        if (!this.emitValue && typeof this.value === 'object' && !Array.isArray(this.value)) {
-            return this.value.label ?? '';
+        return sum + 1;
+    }, 0);
+}
+function filterTree(options, keyword) {
+    const lowerKeyword = (keyword ?? '').toLowerCase();
+    return options.reduce((acc, option) => {
+        const labelText = isHtmlLabel(option.label) ? extractText(option.label) : option.label;
+        const selfMatch = labelText != null && labelText.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: [] });
+            }
         }
-        const flat = this.flattenOptions(this.options);
-        return flat.find(o => o.value === this.value)?.label ?? '';
-    }
-    flattenOptions(options) {
-        return options.flatMap(o => (o.children ? this.flattenOptions(o.children) : [o]));
-    }
-    getNonDisabledLeaves(options) {
-        return options.flatMap(o => {
-            if (o.disabled)
-                return [];
-            if (o.children)
-                return this.getNonDisabledLeaves(o.children);
-            return [o];
-        });
-    }
-    getSelectedOptions() {
-        const val = this.value;
-        if (val == null || !Array.isArray(val))
-            return [];
-        if (this.emitValue) {
-            return val
-                .map(v => this.findOriginalOption(v, this.options))
-                .filter((o) => !!o);
+        else if (selfMatch) {
+            acc.push({ ...option });
         }
-        return val;
-    }
-    toMultiValue(options) {
-        return this.emitValue ? options.map(o => o.value) : options;
-    }
-    parsePixelValue(value, fallback) {
-        const parsed = Number.parseFloat(value);
-        return Number.isFinite(parsed) ? parsed : fallback;
-    }
-    updateDropdownViewportConstraints() {
-        if (!this.triggerRef)
+        return acc;
+    }, []);
+}
+
+const sdSelectListItemCss = () => `sd-select-list-item{display:block}sd-select-list-item .sd-select-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-list-item .sd-select-list-item--selectable{cursor:pointer}sd-select-list-item .sd-select-list-item--depth1-group{border-top:var(--list-item-border-top);font-weight:700}sd-select-list-item .sd-select-list-item--depth2-group{font-weight:500}sd-select-list-item .sd-select-list-item--focused.sd-select-list-item--selectable:not(.sd-select-list-item--disabled){background:var(--list-item-bg-hover);color:var(--list-item-color-hover)}sd-select-list-item .sd-select-list-item--selected:not(.sd-select-list-item--group){font-weight:var(--list-item-font-weight-selected);color:var(--list-item-color-selected)}sd-select-list-item .sd-select-list-item--selected.sd-select-list-item--focused{color:var(--list-item-color-hover)}sd-select-list-item .sd-select-list-item--disabled{color:var(--list-item-color-disabled);cursor:not-allowed}sd-select-list-item .sd-select-list-item__label{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-list-item .sd-select-list-item__count{flex-shrink:0;font-weight:500;color:var(--list-item-color-disabled)}sd-select-list-item .sd-select-list-item--group.sd-select-list-item--focused .sd-select-list-item__count{color:#ffffff}sd-select-list-item .sd-select-list-item__checkbox{flex-shrink:0}`;
+
+const SdSelectListItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.listItemClick = createEvent(this, "sdListItemClick", 7);
+    }
+    /** 렌더링할 옵션 데이터 */
+    option;
+    /** 계층 깊이 (1~3) */
+    depth = 1;
+    /** 선택 상태 (null=중간) */
+    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;
-        const triggerRect = this.triggerRef.getBoundingClientRect();
-        const viewportPadding = SdSelect.VIEWPORT_PADDING;
-        const offsetY = SdSelect.PORTAL_OFFSET_Y;
-        const preferredHeight = this.parsePixelValue(this.dropdownHeight, 260);
-        const preferredWidth = this.parsePixelValue(this.maxDropdownWidth, 640);
-        const availableBelow = Math.max(window.innerHeight - triggerRect.bottom - viewportPadding - offsetY, 0);
-        const availableAbove = Math.max(triggerRect.top - viewportPadding - offsetY, 0);
-        const availableHeight = Math.max(availableBelow, availableAbove);
-        const availableWidth = Math.max(window.innerWidth - viewportPadding * 2, 0);
-        this.resolvedDropdownHeight = `${Math.min(preferredHeight, availableHeight)}px`;
-        this.resolvedMaxDropdownWidth = `${Math.min(preferredWidth, availableWidth)}px`;
-    }
-    handleViewportResize = () => {
-        if (!this.isOpen)
+        this.listItemClick.emit(this.option);
+    };
+    handleCheckboxClick = (e) => {
+        e.stopPropagation();
+    };
+    handleCheckboxUpdate = (e) => {
+        e.stopPropagation();
+        if (this.option.disabled || !this.isSelectable)
             return;
-        this.updateDropdownViewportConstraints();
+        this.listItemClick.emit(this.option);
     };
-    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;
-            }
+    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,
+            '--list-item-color-selected': LIST_ITEM_COLORS.content.selected,
+            '--list-item-font-weight-selected': LIST_ITEM_TYPOGRAPHY.selectedFontWeight,
+        };
+        if (isDepth1Group) {
+            cssVars['--list-item-border-top'] =
+                `${LIST_ITEM_COLORS.depth1.borderWidth}px solid ${LIST_ITEM_COLORS.depth1.border}`;
         }
-        return undefined;
+        return (
+        // 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+        h("div", { key: '86ebbdb437d7799cefb9a9466997df44ea346e44', 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,
+                'sd-select-list-item--depth2-group': isDepth2Group,
+                'sd-select-list-item--selected': this.isSelected === true,
+                'sd-select-list-item--indeterminate': this.isSelected === null,
+                '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 && (h("sd-checkbox", { key: '297067b88bedf8eed648f60050688e23e9dfcbdd', 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 })), isHtmlLabel(this.option.label) ? (h("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.option.label)) })) : (h("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (h("span", { key: 'e71dbbfcd454a43fe2364aa0205f14805de20653', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
-    closeDropdown() {
-        if (!this.isOpen)
-            return;
-        this.isOpen = false;
-        this.isAnimatingOut = true;
-        if (this.closeAnimationTimer)
-            clearTimeout(this.closeAnimationTimer);
-        this.closeAnimationTimer = setTimeout(() => {
-            this.isAnimatingOut = false;
-        }, SdSelect.CLOSE_ANIMATION_DURATION);
-    }
-    prepareDropdownGeometry() {
-        if (this.triggerRef) {
-            this.triggerWidth = `${this.triggerRef.offsetWidth}px`;
-        }
-        this.updateDropdownViewportConstraints();
+};
+SdSelectListItem.style = sdSelectListItemCss();
+
+const sdSelectListItemSearchCss = () => `sd-select-list-item-search{display:block}sd-select-list-item-search .sd-select-list-item-search{padding:4px 8px;position:sticky;top:0;z-index:1;background:white}sd-select-list-item-search .sd-select-list-item-search--scrolled{box-shadow:0 2px 4px rgba(0, 0, 0, 0.08)}sd-select-list-item-search .sd-select-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-list-item-search .sd-select-list-item-search__inner:focus-within{border-color:#0075ff}sd-select-list-item-search .sd-select-list-item-search__icon{flex-shrink:0}sd-select-list-item-search .sd-select-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-list-item-search .sd-select-list-item-search__input::placeholder{color:#aaaaaa}sd-select-list-item-search .sd-select-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-list-item-search .sd-select-list-item-search__clear:hover{background:#f0f0f0}sd-select-list-item-search .sd-select-list-item-search__clear--hidden{visibility:hidden;pointer-events:none}`;
+
+const SdSelectListItemSearch = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.searchFilter = createEvent(this, "sdSearchFilter", 7);
+        this.searchFocus = createEvent(this, "sdSearchFocus", 7);
     }
-    syncFocusedState(isOpen = this.isOpen) {
-        this.focused = isOpen || this.triggerHasFocus;
+    /** 리스트가 스크롤된 상태 여부 (그림자 효과용) */
+    isScrolled = false;
+    searchText = '';
+    /** 검색어가 변경될 때 발생합니다. */
+    searchFilter;
+    /** 검색 입력에 포커스될 때 발생합니다. */
+    searchFocus;
+    inputEl;
+    debounceTimer;
+    focusRafId;
+    componentDidLoad() {
+        requestAnimationFrame(() => {
+            this.focusRafId = requestAnimationFrame(() => {
+                this.inputEl?.focus();
+            });
+        });
     }
-    handleTriggerFocus = () => {
-        this.triggerHasFocus = true;
-        this.syncFocusedState();
-    };
-    handleTriggerBlur = () => {
-        this.triggerHasFocus = false;
-        this.syncFocusedState();
-    };
-    handleTriggerClick = () => {
-        if (this.isOpen) {
-            this.closeDropdown();
-            return;
-        }
-        this.prepareDropdownGeometry();
-        if (this.closeAnimationTimer)
-            clearTimeout(this.closeAnimationTimer);
-        this.isAnimatingOut = false;
-        this.isOpen = true;
+    /** 검색 입력에 포커스를 이동합니다. */
+    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);
     };
-    emitUpdate(value) {
-        this.update.emit(value);
-    }
-    handleOptionSelect = (detail) => {
-        const { option, leaves } = detail;
-        if (this.isMulti) {
-            this.handleMultiSelect(option, leaves);
-        }
-        else {
-            this.closeDropdown();
-            this.value = this.emitValue ? option.value : option;
-            const nextValue = this.value;
-            requestAnimationFrame(() => {
-                this.emitUpdate(nextValue);
-            });
-        }
+    handleClear = (e) => {
+        e.stopPropagation();
+        this.searchText = '';
+        if (this.debounceTimer)
+            clearTimeout(this.debounceTimer);
+        this.searchFilter.emit('');
+        this.inputEl?.focus();
     };
-    handleMultiSelect(option, leaves) {
-        const selected = this.getSelectedOptions();
-        const isGroup = !!option.children;
-        let newSelected;
-        if (isGroup) {
-            const allSelected = leaves.every(l => selected.some(s => s.value === l.value));
-            if (allSelected) {
-                const leafValues = new Set(leaves.map(l => l.value));
-                newSelected = selected.filter(s => !leafValues.has(s.value));
-            }
-            else {
-                const existing = new Set(selected.map(s => s.value));
-                const toAdd = leaves.filter(l => !existing.has(l.value));
-                newSelected = [...selected, ...toAdd];
-            }
-        }
-        else {
-            const exists = selected.some(s => s.value === option.value);
-            newSelected = exists ? selected.filter(s => s.value !== option.value) : [...selected, option];
-        }
-        this.value = this.toMultiValue(newSelected);
-        this.emitUpdate(this.value);
-    }
-    connectedCallback() {
-        window.addEventListener('resize', this.handleViewportResize);
-    }
     disconnectedCallback() {
-        window.removeEventListener('resize', this.handleViewportResize);
-        if (this.closeAnimationTimer)
-            clearTimeout(this.closeAnimationTimer);
+        if (this.focusRafId !== undefined)
+            cancelAnimationFrame(this.focusRafId);
+        if (this.debounceTimer !== undefined)
+            clearTimeout(this.debounceTimer);
     }
     render() {
-        const portalProps = {
-            open: this.isOpen,
-            parentRef: this.triggerRef,
-            viewportPadding: SdSelect.VIEWPORT_PADDING,
-            onSdClose: () => {
-                this.closeDropdown();
-            },
-        };
-        return (h("sd-field", { key: '2272f300b9aa6645dd772d06694e728f9abcea28', 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;
-            } }, h("div", { key: 'b9c769146720634abb4d018d022e28749ef0b939', class: "sd-select", ref: el => {
-                this.triggerRef = el;
-            } }, h("sd-select-trigger", { key: '792bbee6e36298a306d720bc15bff61d5bba7545', 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) && (h("sd-portal", { key: 'c70299735ea4f9fd257a0b3384e728bbf9fc9d97', ...portalProps }, h("sd-select-listbox", { key: 'd0dbfc0382131e998f54d6a0cb04fc6b1a9128c8', 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) })))));
+        return (h("div", { key: 'fd13ed863fa624bb672a80594a1397831c55b859', class: {
+                'sd-select-list-item-search': true,
+                'sd-select-list-item-search--scrolled': this.isScrolled,
+            } }, h("div", { key: 'c36783523de2c29b04ce300307770a666daad9df', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: '6e21aebf25090024c882dda1e9fec46219dce8ee', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: '2ed89f33de74c98cde3caa4e8924ef2e7b3baa0f', 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() }), h("button", { key: 'c16ed94bbddd24e829548b4ff063a6a3095f955a', 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' }, h("sd-icon", { key: 'f2808e3b1b5ae6937bd818e4f29f999d04286b60', name: "close", size: 12, color: "#888888" })))));
     }
-    static get watchers() { return {
-        "isOpen": [{
-                "watchIsOpen": 0
-            }]
-    }; }
 };
-SdSelect.style = sdSelectCss();
+SdSelectListItemSearch.style = sdSelectListItemSearchCss();
 
 const sdSelectListboxCss = () => `:host{display:block}:host .sd-select-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}:host .sd-select-listbox__list{flex:1;min-height:0;overflow-y:auto;padding-bottom:0}:host .sd-select-listbox__list::-webkit-scrollbar{opacity:0;width:8px;background:#E5E5E5}:host .sd-select-listbox__list::-webkit-scrollbar:horizontal{height:8px}:host .sd-select-listbox__list::-webkit-scrollbar-thumb{height:80px;background-color:#CCCCCC;border-radius:4px}:host .sd-select-listbox__list::-webkit-scrollbar-track{background-color:#E5E5E5}:host .sd-select-listbox__empty{padding:12px;text-align:center;font-size:12px;line-height:20px;color:#888888}`;
 
@@ -680,9 +658,9 @@ const SdSelectListbox = class {
             '--listbox-max-height': this.maxHeight ?? '260px',
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
         };
-        return (h("div", { key: '4de15e4c150ee542656ee3f73aa41dd32379748f', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: 'cb656ccafc2833b438f14ac48ca8686684212ead', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '5ffaefb63605c4319810046e9d40aa5fcb4754de', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (h("div", { key: 'cec8e4e12dd806a93375853386a1d7cc3ac6b269', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: '9e07a7e742e956df314796e9babf6c0a7fb21d7f', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: 'd5ff5620c63b5c53e69b6348f2c9cd6cb73cbe88', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
-            } }, this.showSelectAll && (h("sd-select-list-item", { key: 'e1d3f7a37a037b386aae50cceb61e2b79d37453e', 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 ? (h("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (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 && (h("sd-select-list-item", { key: '9b36cdd7466b639c65497da94ee1e3c5129566cb', 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 ? (h("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (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": [{
@@ -750,7 +728,7 @@ const SdSelectTrigger = class {
                 ? SELECT_COLORS.icon.disabled
                 : SELECT_COLORS.icon.default,
         };
-        return (h("div", { key: '33e639898a581e8556e1e9c966f14cb863246c35', ref: el => {
+        return (h("div", { key: '2ec5e736c0742a10fdfa9b4b12b0820e99c30f7f', 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,
@@ -761,7 +739,7 @@ const SdSelectTrigger = class {
                     e.preventDefault();
                     this.handleClick();
                 }
-            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: 'a935f82879727eb212422c875b16e5fbf01460ba', class: "sd-select-trigger__content" }, hasValue && isHtmlLabel(this.displayText) ? (h("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.displayText)) })) : (h("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), h("sd-icon", { key: 'e98e8e317aa86a960674b21714ca90cfa3920197', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: '6b71e60a76d430bfe14bc5b7c59d82130be27c8a', class: "sd-select-trigger__content" }, hasValue && isHtmlLabel(this.displayText) ? (h("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.displayText)) })) : (h("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), h("sd-icon", { key: 'e34eae87f518f1b015e1d59bacf97bec66b6ec6d', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
                 'sd-select-trigger__icon': true,
                 'sd-select-trigger__icon--open': this.isOpen,
             } }))));
@@ -769,4 +747,4 @@ const SdSelectTrigger = class {
 };
 SdSelectTrigger.style = sdSelectTriggerCss();
 
-export { SdSelect as sd_select, SdSelectListbox as sd_select_listbox, SdSelectTrigger as sd_select_trigger };
+export { SdSelectListItem as sd_select_list_item, SdSelectListItemSearch as sd_select_list_item_search, SdSelectListbox as sd_select_listbox, SdSelectTrigger as sd_select_trigger };