@sellmate/design-system 1.0.78 → 1.2.0

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

@@ -1,316 +1,285 @@
-import { r as registerInstance, c as createEvent, h } from './index-Cnwbjz1F.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-0U6dRjlq.js';
+import { n as nanoid } from './index-CCwNgVmC.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.config-CxOCk_ge.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: {
-		"default": {
-			fontWeight: "400",
-			fontSize: "12",
-			lineHeight: "20"},
-		selected: {
-			fontWeight: "700"}
-	},
-	bg: {
-		"default": "#FFFFFF",
-		hover: "#0075FF"
-	},
-	content: {
-		"default": "#222222",
-		hover: "#FFFFFF",
-		disabled: "#888888",
-		selected: "#0075FF"
-	},
-	depth1: {
-		bg: {
-			"default": "#EFF6FF"},
-		border: {
-			color: "#E1E1E1",
-			width: "1"
-		}},
-	depth2: {
-		middle: {
-			bg: "#F6F6F6"}
-	}};
-var listItemTokens = {
-	listItem: listItem
-};
+const sdSelectCss = () => `sd-select{display:inline-flex}sd-select sd-portal{display:none}sd-select .sd-select{position:relative;width:100%;height:100%}`;
 
-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.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 countLeaves(options) {
-    return options.reduce((sum, option) => {
-        if (option.children) {
-            return sum + countLeaves(option.children);
+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 = '선택';
+    maxDropdownWidth = '640px';
+    dropdownHeight = '260px';
+    disabled = false;
+    label = '';
+    labelWidth = '';
+    addonLabel = '';
+    addonAlign = 'start';
+    error = false;
+    hint = '';
+    errorMessage = '';
+    rules = [];
+    icon = undefined;
+    labelTooltip = '';
+    labelTooltipProps = null;
+    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 = 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(', ');
         }
-        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: [] });
-            }
+        if (this.value == null)
+            return '';
+        if (!this.emitValue && typeof this.value === 'object' && !Array.isArray(this.value)) {
+            return this.value.label ?? '';
         }
-        else if (selfMatch) {
-            acc.push({ ...option });
+        const flat = this.flattenOptions(this.options);
+        const found = flat.find(o => o.value === this.value);
+        return found?.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);
         }
-        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;
-    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 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;
-        this.listItemClick.emit(this.option);
-    };
-    handleCheckboxClick = (e) => {
-        e.stopPropagation();
-    };
-    handleCheckboxUpdate = (e) => {
-        e.stopPropagation();
-        if (this.option.disabled || !this.isSelectable)
+        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)
             return;
-        this.listItemClick.emit(this.option);
+        this.updateDropdownViewportConstraints();
     };
-    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}`;
+    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 (h("div", { key: 'c6f959e9290213c9003914dbdd696c3c339cce51', 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: 'a884bd82722cd45efc19abd2139d08596f7eda86', 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 })), h("span", { key: '9aacbeca13e591406454ef7e1c7be40a56a2926b', class: "sd-select-list-item__label" }, this.option.label), this.countInfo && (h("span", { key: '76be4eda3799cfa329016c2ea636feaf624e5025', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+        return undefined;
     }
-};
-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);
+    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();
     }
-    isScrolled = false;
-    searchText = '';
-    searchFilter;
-    searchFocus;
-    inputEl;
-    debounceTimer;
-    focusRafId;
-    componentDidLoad() {
-        requestAnimationFrame(() => {
-            this.focusRafId = requestAnimationFrame(() => {
-                this.inputEl?.focus();
-            });
-        });
+    syncFocusedState(isOpen = this.isOpen) {
+        this.focused = isOpen || this.triggerHasFocus;
     }
-    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);
+    handleTriggerFocus = () => {
+        this.triggerHasFocus = true;
+        this.syncFocusedState();
     };
-    handleClear = (e) => {
-        e.stopPropagation();
-        this.searchText = '';
-        if (this.debounceTimer)
-            clearTimeout(this.debounceTimer);
-        this.searchFilter.emit('');
-        this.inputEl?.focus();
+    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;
+    };
+    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);
+            });
+        }
     };
+    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() {
-        if (this.focusRafId)
-            cancelAnimationFrame(this.focusRafId);
-        if (this.debounceTimer)
-            clearTimeout(this.debounceTimer);
+        window.removeEventListener('resize', this.handleViewportResize);
+        if (this.closeAnimationTimer)
+            clearTimeout(this.closeAnimationTimer);
     }
     render() {
-        return (h("div", { key: '139aa74cb44baef15a5a75008dd291f11ad2965b', class: {
-                'sd-select-list-item-search': true,
-                'sd-select-list-item-search--scrolled': this.isScrolled,
-            } }, h("div", { key: '2df6559c3a0e769e50e72ef06828adcf595fc433', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: '20dfe4a309c7879bcdd1e5890f183a9e1eb98fae', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: '825724eedf71693ce39a21f413c5a4eb6f1495e3', 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: '20fb0c745d423b008f482a2e33e7e711ea40b5df', 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: 'ce6e4f9b5281ebb767d6542a223e425660ec01c9', name: "close", size: 12, color: "#888888" })))));
+        const portalProps = {
+            open: this.isOpen,
+            parentRef: this.triggerRef,
+            viewportPadding: SdSelect.VIEWPORT_PADDING,
+            onSdClose: () => {
+                this.closeDropdown();
+            },
+        };
+        return (h("sd-field", { key: '668df27ea03b5c2479f89649c494375bacd762ec', 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: '7d391d2c0719c165e9d19f5fdc34d39c374401e9', class: "sd-select", ref: el => {
+                this.triggerRef = el;
+            } }, h("sd-select-trigger", { key: 'b09a0f9dcb0071b79a21c8184deb7d07ba54185f', 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: '2ae67c5e98c66c2a74ba96f4602ea14d53dd0177', ...portalProps }, h("sd-select-listbox", { key: '97ee517fa777abd4926f8105fd046e39dfeeb5ff', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
+    static get watchers() { return {
+        "isOpen": [{
+                "watchIsOpen": 0
+            }]
+    }; }
 };
-SdSelectListItemSearch.style = sdSelectListItemSearchCss();
+SdSelect.style = sdSelectCss();
 
 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__empty{padding:12px;text-align:center;font-size:12px;line-height:20px;color:#888888}`;
 
@@ -380,7 +349,7 @@ const SdSelectListbox = class {
         return count >= SEARCH_THRESHOLD;
     }
     get filteredOptions() {
-        if (!this.searchKeyword)
+        if (this.searchKeyword === '')
             return this.options;
         if (this.isDepth)
             return filterTree(this.options, this.searchKeyword);
@@ -393,7 +362,7 @@ const SdSelectListbox = class {
         return this.filteredOptions.length === 0;
     }
     getSelectedValues() {
-        if (!this.value || !Array.isArray(this.value))
+        if (this.value == null || !Array.isArray(this.value))
             return new Set();
         if (this.emitValue) {
             return new Set(this.value);
@@ -516,7 +485,7 @@ const SdSelectListbox = class {
         // filterTree 가 매 호출마다 옵션 객체를 새로 복제하기 때문에 참조 비교
         // (=== / indexOf) 는 검색이 적용된 동안 항상 실패한다. 고유 식별자인
         // value 로 비교해야 한다.
-        return !!focused && focused.value === option.value;
+        return focused != null && focused.value === option.value;
     }
     resetFocusOnFilter() {
         // 필터가 바뀌면 이전 인덱스가 가리키던 항목이 사라질 수 있으므로
@@ -661,14 +630,14 @@ const SdSelectListbox = class {
     }
     render() {
         const cssVars = {
-            '--listbox-trigger-width': this.triggerWidth,
-            '--listbox-max-width': this.maxWidth,
-            '--listbox-max-height': this.maxHeight,
+            '--listbox-trigger-width': this.triggerWidth ?? '200px',
+            '--listbox-max-width': this.maxWidth ?? '640px',
+            '--listbox-max-height': this.maxHeight ?? '260px',
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
         };
-        return (h("div", { key: 'c1582b1bc6058b78a8581511854f0878e7f39a94', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: '4fd2099bf8069f258596479123053a34a41c528d', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: 'ff8643a308b07dbaebf627c7082a37efa6b72a10', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (h("div", { key: '8c9b1a4471bf4e535c5f156d087e1b9be76ad903', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: '4cc596a1ac21c9b258d5db07ecb15d566179d743', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '977e15c7987ca387cf30783741f99b322150627b', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
-            } }, this.showSelectAll && (h("sd-select-list-item", { key: '30f0cfbc24304af8c704db33d0e51236971226ee', 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: 'dada5a6662b2d3fa63ed11ab1c82561d5e2d2400', 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": [{
@@ -712,7 +681,7 @@ const SdSelectTrigger = class {
         this.triggerBlur.emit();
     };
     render() {
-        const hasValue = !!this.displayText;
+        const hasValue = this.displayText !== '';
         const cssVars = {
             '--trigger-padding-x': `${SELECT_LAYOUT.paddingX}px`,
             '--trigger-gap': `${SELECT_LAYOUT.gap}px`,
@@ -728,13 +697,18 @@ const SdSelectTrigger = class {
                 ? SELECT_COLORS.icon.disabled
                 : SELECT_COLORS.icon.default,
         };
-        return (h("div", { key: 'dddccfd47738e104a9c715a0c93df1882d28d704', ref: el => {
+        return (h("div", { key: '67cb0ffaf0197a3ad12c402810317801ce69d4a1', ref: el => {
                 this.triggerEl = el;
-            }, tabindex: this.disabled ? -1 : 0, class: {
+            }, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
                 'sd-select-trigger': true,
                 'sd-select-trigger--open': this.isOpen,
                 'sd-select-trigger--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: '9f8572c4ec3fa02c9f94bb94a8a10358c4d6b3ae', class: "sd-select-trigger__content" }, h("span", { key: 'a4b5b27fc3a84adbd2e24981742ca45402993afb', class: "sd-select-trigger__text" }, hasValue ? this.displayText : this.placeholder), h("sd-icon", { key: '97bbcda656bae2248ca83fb2bd56373b2dd8dd41', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.handleClick();
+                }
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: '4c28c852054fd7b09e5c45c9eb13882540f66553', class: "sd-select-trigger__content" }, h("span", { key: 'df415c9ac8d00a58e5539c8c655f12ebd49208a4', class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택')), h("sd-icon", { key: '429008e1edaf778e8a85f945a681cd675f2489b7', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
                 'sd-select-trigger__icon': true,
                 'sd-select-trigger__icon--open': this.isOpen,
             } }))));
@@ -742,4 +716,4 @@ const SdSelectTrigger = class {
 };
 SdSelectTrigger.style = sdSelectTriggerCss();
 
-export { SdSelectListItem as sd_select_list_item, SdSelectListItemSearch as sd_select_list_item_search, SdSelectListbox as sd_select_listbox, SdSelectTrigger as sd_select_trigger };
+export { SdSelect as sd_select, SdSelectListbox as sd_select_listbox, SdSelectTrigger as sd_select_trigger };