@sellmate/design-system 1.0.45 → 1.0.47

package/dist/esm/sd-select-dropdown_2.entry.js

@@ -0,0 +1,228 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-B8tGP77V.js';
+
+const sdSelectDropdownCss = () => `.sd-select-dropdown .sd-select-option-placeholder{height:48px;display:flex;align-items:center;padding:8px 16px;font-size:12px;line-height:0;text-align:left;color:#888888}.sd-select-dropdown{overflow:auto;min-width:fit-content;width:var(--select-dropdown-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333;display:flex;flex-direction:column;opacity:0.5;transition:opacity 0.15s ease-in}.sd-select-dropdown--ready{opacity:1}`;
+
+const SdSelectDropdown = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.optionClick = createEvent(this, "sdOptionClick");
+        this.optionFiltered = createEvent(this, "sdOptionFiltered");
+        this.scroll = createEvent(this, "sdScroll");
+    }
+    itemIndex;
+    value = null;
+    options;
+    width;
+    dropdownHeight;
+    searchable;
+    optionPlaceholder;
+    useCheckbox = false;
+    useAll = false;
+    filteredOptions = [];
+    searchText = null;
+    isScrolled = false;
+    isDropdownReady = false;
+    optionClick;
+    optionFiltered;
+    scroll;
+    filteredOptionsChanged(newValue) {
+        this.optionFiltered.emit(newValue);
+    }
+    searchTextChanged() {
+        this.filterOptions();
+    }
+    async itemIndexChanged(newIndex, oldIndex) {
+        if (this.searchable) {
+            const searchInput = await this.getNativeInputElement();
+            if (this.itemIndex === -1) {
+                searchInput?.focus({ preventScroll: true });
+                return;
+            }
+            else if (searchInput?.matches(':focus')) {
+                searchInput?.blur();
+            }
+        }
+        const optionElements = this.dropdownRef?.querySelectorAll('.sd-select-dropdown sd-select-option') || [];
+        const currentItem = optionElements?.[this.itemIndex];
+        if (!currentItem)
+            return;
+        this.optionRef = currentItem;
+        const isOptionDisabled = await this.optionRef.sdIsDisabled();
+        if (isOptionDisabled) {
+            newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;
+            return;
+        }
+        this.scrollToOption(currentItem);
+    }
+    componentWillLoad() {
+        this.filteredOptions = this.options;
+        // DOM 렌더링을 기다리기 위해 이중 requestAnimationFrame 사용 - (레이아웃/스타일 계산 - 페인트 이후)
+        requestAnimationFrame(() => {
+            requestAnimationFrame(async () => {
+                const selectedOptions = this.getSelectedOption();
+                // 선택된 옵션이 있으면 첫 번째 선택된 항목으로 스크롤
+                if (selectedOptions) {
+                    const selectedIndex = Array.isArray(selectedOptions)
+                        ? this.options.indexOf(selectedOptions[0])
+                        : this.options.indexOf(selectedOptions);
+                    const optionElements = Array.from(this.dropdownRef?.querySelectorAll('sd-select-option') || []);
+                    // useAll 사용시 "전체" 옵션 포함한 인덱스 사용
+                    const actualIndex = this.useAll ? selectedIndex + 1 : selectedIndex;
+                    // 선택된 옵션이 화면 가운데에 오도록 index 조정
+                    const targetIndex = Math.min(actualIndex + 4, optionElements.length - 1);
+                    const currentItem = optionElements?.[targetIndex];
+                    if (currentItem) {
+                        this.scrollToOption(currentItem, 'instant');
+                    }
+                }
+                this.isDropdownReady = true;
+                if (this.searchable) {
+                    const searchInput = await this.getNativeInputElement();
+                    if (searchInput) {
+                        requestAnimationFrame(() => {
+                            searchInput.focus({ preventScroll: true });
+                        });
+                    }
+                }
+            });
+        });
+    }
+    dropdownRef;
+    searchRef;
+    optionRef;
+    get dropdownSize() {
+        return {
+            '--select-dropdown-width': this.width || '200px',
+            '--select-dropdown-height': this.dropdownHeight || '260px',
+        };
+    }
+    filterOptions() {
+        if (!this.searchText || this.searchText.trim() === '') {
+            // 검색어가 없으면 전체 옵션 표시
+            this.filteredOptions = this.options;
+        }
+        else {
+            // 검색어가 있으면 필터링
+            this.filteredOptions = this.options.filter(option => option.label.toLowerCase().includes(this.searchText.toLowerCase()));
+        }
+    }
+    getSelectedOption() {
+        if (typeof this.value !== 'object') {
+            return this.options.find(option => option.value === this.value);
+        }
+        return this.options.filter(option => this.value?.includes(option));
+    }
+    isOptionSelected(value) {
+        if (Array.isArray(this.value)) {
+            return this.value.some(selected => selected.value === value);
+        }
+        return value === this.value;
+    }
+    async getNativeInputElement() {
+        if (this.searchRef) {
+            return this.searchRef.sdGetNativeElement();
+        }
+        return null;
+    }
+    scrollToOption(optionElement, scrollBehavior = 'smooth') {
+        if (!this.dropdownRef || !optionElement)
+            return;
+        const dropdown = this.dropdownRef;
+        const optionTop = optionElement.offsetTop;
+        const optionHeight = optionElement.offsetHeight;
+        const dropdownScrollTop = dropdown.scrollTop;
+        const dropdownHeight = dropdown.clientHeight;
+        const searchContainer = dropdown.querySelector('.sd-select-search-input');
+        const searchOffset = searchContainer ? searchContainer.offsetHeight : 0;
+        const visibleTop = dropdownScrollTop + searchOffset;
+        const visibleBottom = dropdownScrollTop + dropdownHeight;
+        if (optionTop < visibleTop) {
+            dropdown.scrollTo({ top: optionTop - searchOffset, behavior: scrollBehavior });
+        }
+        else if (optionTop + optionHeight > visibleBottom) {
+            dropdown.scrollTo({
+                top: optionTop + optionHeight - dropdownHeight + searchOffset,
+                behavior: scrollBehavior,
+            });
+        }
+    }
+    handleDropdownScroll = (event) => {
+        const target = event.target;
+        const scrollTop = target.scrollTop;
+        // 스크롤이 조금이라도 되면 그림자 표시
+        this.isScrolled = scrollTop > 0;
+    };
+    render() {
+        return (h("div", { key: '85941422969d2472f73acbfde70b9f4c84b19182', class: {
+                'sd-select-dropdown': true,
+                'sd-select-dropdown--ready': this.isDropdownReady,
+            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("sd-select-search-input", { key: 'a1e560a5e7540ceff7b6f318a912eea7f01e6133', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("slot", { name: `option-${option.value}` }, h("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
+    }
+    static get watchers() { return {
+        "filteredOptions": [{
+                "filteredOptionsChanged": 0
+            }],
+        "searchText": [{
+                "searchTextChanged": 0
+            }],
+        "itemIndex": [{
+                "itemIndexChanged": 0
+            }]
+    }; }
+};
+SdSelectDropdown.style = sdSelectDropdownCss();
+
+const sdSelectOptionCss = () => `sd-select-option{display:block;height:fit-content;line-height:0}sd-select-option .sd-select__option{display:flex;padding:4px 12px;font-size:12px;line-height:20px;cursor:pointer}sd-select-option .sd-select__option__checkbox-wrapper{display:flex;width:100%;column-gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}sd-select-option .sd-select__option--focused{background-color:#E6F1FF}sd-select-option .sd-select__option--selected:not(:hover):not(.sd-select__option--use-checkbox),sd-select-option .sd-select__option--focused:not(:hover):not(.sd-select__option--use-checkbox){color:#0075FF;font-weight:700}sd-select-option .sd-select__option--disabled{color:#AAAAAA;cursor:not-allowed}sd-select-option .sd-select__option:hover:not(.sd-select__option--disabled){background-color:#0075FF;color:white}`;
+
+const SdSelectOption = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.optionClick = createEvent(this, "optionClick");
+    }
+    get el() { return getElement(this); }
+    option;
+    index;
+    isSelected = false;
+    isFocused = false;
+    optionStyle;
+    disabled = false;
+    useCheckbox = false;
+    isHovered = false;
+    async sdIsDisabled() {
+        return !!this.option.disabled;
+    }
+    optionClick;
+    handleClick = (event) => {
+        event.stopPropagation();
+        if (!this.option.disabled && !this.disabled) {
+            this.optionClick.emit({
+                option: this.option,
+                index: this.index,
+                event,
+            });
+        }
+    };
+    render() {
+        return (h("div", { key: 'cf7d1713909ca6a3019108696db2ddd5c463a096', class: {
+                'sd-select__option': true,
+                'sd-select__option--selected': this.isSelected,
+                'sd-select__option--disabled': !!this.option.disabled,
+                'sd-select__option--focused': this.isFocused,
+                'sd-select__option--use-checkbox': this.useCheckbox,
+            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: this.handleClick }, this.useCheckbox ? (h("div", { class: "sd-select__option__checkbox-wrapper" }, h("sd-checkbox", { value: this.isSelected, disabled: this.option.disabled,
+            //   checkboxStyle={
+            //    !this.isSelected
+            //     ? { borderColor: '#888' }
+            //     : this.isHovered
+            //       ? { borderColor: 'white' }
+            //       : { borderColor: '#0075ff' }
+            //   }
+            onClick: e => {
+                e.preventDefault();
+                this.handleClick(e);
+            } }), h("span", { class: "sd-select__option-label" }, this.option.label))) : (this.option.label)));
+    }
+};
+SdSelectOption.style = sdSelectOptionCss();
+
+export { SdSelectDropdown as sd_select_dropdown, SdSelectOption as sd_select_option };

package/dist/esm/sd-select-group.entry.js

@@ -273,7 +273,7 @@ const SdSelectGroup = class extends BaseDropdownEvent {
         });
     }
     render() {
-        return (h("sd-field", { key: '822acc0b4200ab415646218d0f059b45f348f5ea', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, h("div", { key: 'f5a76e913d116469a9d3d9c777d5a3ad62ea42b7', class: {
+        return (h("sd-field", { key: '9e061f322fd1d9b167799bee6d65492713eb362a', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, h("div", { key: '47c889231afc91990925e1c45756aae807488aec', class: {
                 'sd-select-group': true,
                 'sd-select-group--open': this.isOpen,
                 'sd-select-group--disabled': this.disabled,

package/dist/esm/sd-select-multiple.entry.js

@@ -153,7 +153,7 @@ const SdSelectMultiple = class extends BaseDropdownEvent {
         this.handleOptionSelection(option);
     };
     render() {
-        return (h("sd-field", { key: '315be9fce15876ab835f0a6609657dfc04b4f9cf', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: 'db4754bd0710e217119e02827e9e9db3285a5c74', class: {
+        return (h("sd-field", { key: '12131e1b42264d0bbbbb532853d0c06b965b3bbf', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: '160851723259f7a08c1ad04e4556a91f3e279692', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,

package/dist/esm/sd-select-option-group.entry.js

@@ -46,7 +46,7 @@ const SdSelectOptionGroup = class {
         }
     };
     render() {
-        return (h("div", { key: '809d58fbd23e57920785835b37f00b66b579a96c', class: {
+        return (h("div", { key: '698eebc16494ef9b8aa329ccf2549be1351b11c7', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -55,10 +55,10 @@ const SdSelectOptionGroup = class {
                 'sd-select__option-group--group': this.option.type === 'group',
                 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
                 'sd-select__option-group--item': this.option.type === 'item',
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: 'f2ff05ee37333111548779d9fe78d0c4b91c9a1e', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '4ca8aaffb38af21f27d429f6c937b1da3374c24a', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
+            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: 'e33a6e2db8bc391d7f21ac3d659afcb29eef058d', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '953c9d5b908a43258d81518796c2be42f6a56eca', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), h("span", { key: 'b4b2943e68b98ce82c32e78a9841aae3be4d8e5f', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: '6e1414b3738c43f8bd5d308b57440d34f9e1b7fa', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), h("span", { key: '21bbbebce2462b7a20dd06402bbf16ff6e3c0e97', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: '3a846467af0b14799c6686e9c391f1277c79d5f5', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
 };
 SdSelectOptionGroup.style = sdSelectOptionGroupCss();

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

@@ -71,7 +71,7 @@ const SdSelectV2ListItem = class {
         if (isDepth1Group) {
             cssVars['--list-item-border-top'] = `${LIST_ITEM_COLORS.depth1.borderWidth}px solid ${LIST_ITEM_COLORS.depth1.border}`;
         }
-        return (h("div", { key: 'af73e77fdeb673b1862b7bd0b153ee0726a3f5db', class: {
+        return (h("div", { key: 'f0d65a9105fa1c67d3221c4f74e3d09ef2f8e04f', class: {
                 'sd-select-v2-list-item': true,
                 'sd-select-v2-list-item--group': isGroup,
                 'sd-select-v2-list-item--depth1-group': isDepth1Group,
@@ -81,7 +81,7 @@ const SdSelectV2ListItem = class {
                 '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: '8cfcf0375fc756562c4ac698c843bfde3ec3750c', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, class: "sd-select-v2-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), h("span", { key: '1a993c125767559c9cd27f343983b26a24413a93', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (h("span", { key: '377d0d6c6acab983aff2471fc0f4f78eaa637370', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: '03a603a7df7cc2cff1053a892063914ea8779d1e', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, class: "sd-select-v2-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), h("span", { key: 'bf97b1fe93f9473563bbf5545bc094240e3c52ac', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (h("span", { key: '3dfa34cb1d40eb253adcf468e5191c8dd6542c12', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
 };
 SdSelectV2ListItem.style = sdSelectV2ListItemCss();
@@ -134,12 +134,12 @@ const SdSelectV2ListItemSearch = class {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (h("div", { key: '7e0f812a04f8f72e41916aad1c2bd8313dac44c7', class: {
+        return (h("div", { key: 'b8b4a1d9ad17e6e69f7dde67fdd33efd63037b93', class: {
                 'sd-select-v2-list-item-search': true,
                 'sd-select-v2-list-item-search--scrolled': this.isScrolled,
-            } }, h("div", { key: 'f9df679b4cab727ba2c29293194556dad00bf46b', class: "sd-select-v2-list-item-search__inner" }, h("sd-icon", { key: '5f9eb6de82437a6344cc3a0042a24196cb7392a5', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), h("input", { key: '382b15077dd49e3addceca6026953c6065a5f60c', ref: el => {
+            } }, h("div", { key: 'adc75b18cc7fa1d5342a27b0c280dc30fe8a3096', class: "sd-select-v2-list-item-search__inner" }, h("sd-icon", { key: '4d5836bbc46dc3812643c6de3b6d9d8c5f464115', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), h("input", { key: '8578c547e402cba605e754923cbf5be3e70d0990', ref: el => {
                 this.inputEl = el;
-            }, type: "text", class: "sd-select-v2-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), this.searchText && (h("button", { key: '00830db3b8d303993acf0787e3818e36f7c2c19c', type: "button", class: "sd-select-v2-list-item-search__clear", onClick: this.handleClear }, h("sd-icon", { key: 'a40a022ec7a3ea9d4bda28e7b5fd41850966c716', name: "close", size: 12, color: "#888888" }))))));
+            }, type: "text", class: "sd-select-v2-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), this.searchText && (h("button", { key: 'ca47bf60370a7789902b5a4b0f88d05d367ea203', type: "button", class: "sd-select-v2-list-item-search__clear", onClick: this.handleClear }, h("sd-icon", { key: '2a54de3c1def6ae013ed71556132aaf62244d515', name: "close", size: 12, color: "#888888" }))))));
     }
 };
 SdSelectV2ListItemSearch.style = sdSelectV2ListItemSearchCss();

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

@@ -290,7 +290,7 @@ const SdSelectV2Listbox = class {
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
             '--listbox-padding-bottom': `${LIST_BOX_LAYOUT.paddingBottom}px`,
         };
-        return (h("div", { key: 'f47839574d0c149ab4aa2a3912b51318ec815b55', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (h("sd-select-v2-list-item-search", { key: '3c3f9fd3e0c935da59bc7727af5c719b76b309d5', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '4d4ef6c7c543689abb9ed085e07e613deca6c8d8', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (h("div", { key: '3e4f1dc3dd46a518746784a6fd1e5d81dcb12018', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (h("sd-select-v2-list-item-search", { key: '625073cdb743d84349e2212ba3b487f5c8e2de46', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '12178f969858857281b1798a202230cf4936ed94', 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) })))))));
     }
@@ -332,13 +332,15 @@ const SdSelectV2Trigger = class {
                 : hasValue
                     ? SELECT_COLORS.text.default
                     : SELECT_COLORS.icon.default,
-            '--trigger-icon-color': this.disabled ? SELECT_COLORS.icon.disabled : SELECT_COLORS.icon.default,
+            '--trigger-icon-color': this.disabled
+                ? SELECT_COLORS.icon.disabled
+                : SELECT_COLORS.icon.default,
         };
-        return (h("div", { key: '2cf4cc98bbfc8808f84d1d6b9dbfbb4f1afee272', class: {
+        return (h("div", { key: '4db2c9bb26cb817f899f238063afd9855c2ae502', 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: '8835de30555a7ef7846afacad8ec6ee5482b36cf', class: "sd-select-v2-trigger__content" }, h("span", { key: '5afd6845dc9b412a3cd87e6a16de8bd506b38dbb', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), h("sd-icon", { key: '727d44f2814321bc80ca5a9d127ce5676f0bfdc6', name: "arrowDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, style: cssVars, onClick: this.handleClick }, h("div", { key: '227a745b7ba73901dbfe17945279387b758c0577', class: "sd-select-v2-trigger__content" }, h("span", { key: 'bc6756c4f7f72906d40edab3610bde366a5b107d', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), h("sd-icon", { key: 'ac2b4b404820b05fea838ff9ddfa45f780fa08a8', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
                 'sd-select-v2-trigger__icon': true,
                 'sd-select-v2-trigger__icon--open': this.isOpen,
             } }))));

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

@@ -214,13 +214,13 @@ const SdSelectV2 = class {
                 this.closeDropdown();
             },
         };
-        return (h("sd-field", { key: 'd9659682ab2e8b46fe24491149b8bc3c19d169c2', name: this.fieldName || this.internalName, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
+        return (h("sd-field", { key: '4fe1bd7befbfc60ad90192f3079cf54ce5d8bd09', name: this.fieldName || this.internalName, label: this.label, addonLabel: this.addonLabel, 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: '75a27f70ba737748900efd4a68f8b3885b183f27', class: "sd-select-v2", ref: el => {
+            } }, h("div", { key: '99809365b96f08d6e3b2e9b1b780b5a4cf8a9870', class: "sd-select-v2", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-select-v2-trigger", { key: 'e639279afd63ec5addbaccd76bf9c73ec3a3da7d', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '3df82f58ba7bf599694ab1ce6ae7ef1ec3fb6035', ...portalProps }, h("sd-select-v2-listbox", { key: 'a1afe865d25f3afd39e28011dbb036f74604b76f', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+            } }, h("sd-select-v2-trigger", { key: 'dc17ab21d65c3f522c6ba1212509135ecc147b17', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '33bc089499fd4b08c1593769062a7c4ee174ffbc', ...portalProps }, h("sd-select-v2-listbox", { key: '237dd065a3b82a4ac3be7a8553a196356d54ff02', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
     static get watchers() { return {
         "isOpen": [{