@sellmate/design-system 1.0.40 → 1.0.42

package/dist/collection/components/sd-number-input/sd-number-input.js

@@ -242,17 +242,17 @@ export class SdNumberInput {
         const inputStyles = {
             textAlign: this.useButton ? 'center' : 'right',
         };
-        return (h("sd-field", { key: 'd7e2abb6482c6861862456f72674ed48feb1d617', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), style: inputWidth }, h("label", { key: 'e733a22e50abdfc9a03753286c4614257a7380f6', class: {
+        return (h("sd-field", { key: '7c278ee43828ff5619efe471b7f2a8c6ea09c300', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), style: inputWidth }, h("label", { key: '10987e5255b183d774affb873866d2fab5721997', class: {
                 'sd-number-input': true,
                 [this.getInputStatus()]: true,
                 'sd-number-input--with-buttons': this.useButton,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("input", { key: 'aa568fd5836adafc7ea4e9f1d51366e4ec0c2b1e', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__input ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, style: inputStyles, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.useButton && (h("div", { key: 'fa1cb14a367babcaa2b253f2e24dfc5b68cd7cc3', class: "sd-number-input__buttons" }, h("button", { key: '94ae3710515a5e2d29937aea5b643a3132d07552', type: "button", class: {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("input", { key: 'ea09e409d3c4c0a9e59b57b8f0d9211ca271b0ed', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__input ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, style: inputStyles, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.useButton && (h("div", { key: '3539fa8237cde3c5220934d18152bd6e3c20b979', class: "sd-number-input__buttons" }, h("button", { key: '4b48a586dbe4509a9c780c1d23b06252f3e5cf55', type: "button", class: {
                 'sd-number-input__button': true,
                 'sd-number-input__button--decrement': true,
-            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'e74cbeb24ac58cae25e43c40b7a1dbd9051c730c', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), h("button", { key: '7d593ba24ed62cfe6ca79a1c5a626151d21bbbd6', type: "button", class: {
+            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '25076f714328a1bce556ecff6317573c98bd8214', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), h("button", { key: '99b5951b072d6bdbd1f36f217d441604aada3f4b', type: "button", class: {
                 'sd-number-input__button': true,
                 'sd-number-input__button--increment': true,
-            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '167b9cb37a439df8d9ecf4532e32d1323c9a7e57', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
+            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '13e8eda3bb5042bd65381057159dd60f04ecf69d', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
     }
     static get is() { return "sd-number-input"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-pagination/sd-pagination.js

@@ -68,12 +68,12 @@ export class SdPagination {
         }
     }
     render() {
-        return (h("div", { key: '403af836a1c920164401029eb1e52339ddd4b69e', class: this.paginationClasses }, h("div", { key: '5b899b37cabe16ccef734f45a3ca8752b7f37b08', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (h("div", { key: 'fe61b181ec08d65564d8e68787403a7a83a90631', class: this.paginationClasses }, h("div", { key: '79237017bd874cf9bfa9af51e66f06ec641cefcf', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'pagination-btn': true,
                 'pagination-btn--selected': this.currentPage === n,
             }, disabled: this.currentPage === n, style: {
                 '--pagination-btn-width': `${this.buttonWidth}px`,
-            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '58e0c871da394403b7504c9a8293b63703ca55f0', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '416e4c3b231a8a9987cce6bd4359edc759c134ee', class: "append-btns" }, this.renderNextButtons())));
     }
     static get is() { return "sd-pagination"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-popover/sd-popover.js

@@ -27,18 +27,26 @@ export class SdPopover {
         this.slotContent = this.el.innerHTML;
     }
     buttonEl;
+    get popoverOffset() {
+        switch (this.placement) {
+            case 'top': return [0, -4];
+            case 'bottom': return [0, 4];
+            case 'left': return [4, 0];
+            case 'right': return [4, 0];
+        }
+    }
     handleClose = () => {
         this.showPopover = false;
     };
     render() {
-        return (h(Fragment, { key: '205b8f574ce69afcb2abef1b0d0d6ec769230783' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onSdClick: () => (this.showPopover = !this.showPopover) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (h("sd-floating-portal", { key: 'af82589e6ed773709c83a6855c37b1ac7092b9ec', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: 'dfee40fa54b436a43583ebdc71830e6d590e1793', class: {
+        return (h(Fragment, { key: 'f367ea2ada0fda7c28c943bd7bd48785b1810999' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onSdClick: () => (this.showPopover = !this.showPopover) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (h("sd-floating-portal", { key: 'afdb58bfdf25af2adc45a7b81221c1859b517a5a', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement, offset: this.popoverOffset }, h("div", { key: '38757707dd8c055674edbc2381409f5fd8712c8d', class: {
                 'sd-floating-menu': true,
                 'sd-floating-menu--popover': true,
                 [`sd-floating-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
             }, style: {
                 '--sd-floating-bg': popoverTokens.popover.bg,
-            } }, h("i", { key: '388ac52f514ddd9247e79d20309a1de029fcd601', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '2502e1a63e3dca7e9c6d66805a9ec04e3106dd99' })), h("div", { key: 'e12b0df1dbdfe4b34de81ed231e1578bb5361afa', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: '91f068beee3338f547157db06a0eee4f5e88355d', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '1283a6209c1c062d925ae1c32ba2a4f2aa98c8fa', class: "sd-floating-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '130f5468eb8ac34bb02dce9a5a55c1fad17c8dcf', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: '330fb79d032bac9da45afec3ccf0f2ec6e3dafba', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '7ba5d1e112ac776bb29253ac2cee510d36147ced', name: "close", size: popoverTokens.popover.close.icon, color: popoverTokens.popover.close.color }))))))));
+            } }, h("i", { key: '333bae4cb23470121d63d4d8b34a1d2b15837e7d', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '617781bb6fc8957576eb149471fd8bf0f44ca552' })), h("div", { key: '8c57d49782edd344c8c2c0b9bf44fff8ec154159', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: 'a06b93124684cb96910ffa2603cf7410a01d6381', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '24691930b8ae03a3c92ed8e74dae708b5e64f03b', class: "sd-floating-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: 'd73cd4cc978711857c4c946dd2a1c1b64bb5feb6', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: 'cda218024d04b03fc2931afa99f0127bc7a9c4c5', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '3f41ebce27fd4bab823370d6bbe25b5caed9d5e1', name: "close", size: popoverTokens.popover.close.icon, color: popoverTokens.popover.close.color }))))))));
     }
     static get is() { return "sd-popover"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-portal/sd-portal.js

@@ -220,7 +220,7 @@ export class SdPortal {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: 'de500e5ee667c295313afda908429b55ed768969' });
+        return h("slot", { key: '04581cb6d22882520a7da534d19dcbec7b540af7' });
     }
     static get is() { return "sd-portal"; }
     static get properties() {

package/dist/collection/components/sd-progress/sd-progress.js

@@ -33,10 +33,10 @@ export class SdProgress {
         return this.statusColor[this.progressStatus];
     }
     render() {
-        return (h("div", { key: '864f669831515b9c149ad579b6233e960eee79a9', style: {
+        return (h("div", { key: 'b97a1ba0ad800ada8a2e87aab6108a77053a3ed5', style: {
                 '--progress-color': this.progressColor,
                 '--progress-percentage': `${this.progressPercentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '42920cc06b249371ec7d98c07d2185d71265a538', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '6a182e4ade2d9c361a85d3fda62f08f62f4722a3', class: "sd-progress__label" }, this.label)));
     }
     renderBarProgress() {
         return (h("div", { class: `sd-progress__bar sd-progress__bar--${this.progressStatus}` }, h("div", { class: ['sd-progress__bar__percent', this.progressPercentage < 100 ? 'proceed' : ''].join(' ') }), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.progressPercentage, "%"), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.progressPercentage, "%")));

package/dist/collection/components/sd-select/sd-select-dropdown/sd-select-dropdown.js

@@ -144,10 +144,10 @@ export class SdSelectDropdown {
         this.isScrolled = scrollTop > 0;
     };
     render() {
-        return (h("div", { key: 'aca6d4044905863975c944afb44f92df0d6f1568', class: {
+        return (h("div", { key: '70bea150872ff4b70b70d358972b14bf0ad2bdf2', 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: 'c87e4d9a391bf7b583bca1cda8930f977a1aec2c', 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)))));
+            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("sd-select-search-input", { key: '79ebdc72ca4a905f700dc6293d8033a5ec22d679', 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 is() { return "sd-select-dropdown"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js

@@ -24,7 +24,7 @@ export class SdSelectOption {
         }
     };
     render() {
-        return (h("div", { key: 'e28519019fa39af328fe7f5a25f18bb227e4d622', class: {
+        return (h("div", { key: '2e04258ee26b376794a5ebe76503875e48dd3ff2', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,

package/dist/collection/components/sd-select/sd-select-search-input/sd-select-search-input.js

@@ -16,17 +16,17 @@ export class SdSelectSearchInput {
         input?.focus({ preventScroll: true });
     }
     render() {
-        return (h("div", { key: '2f4e9dfd95524f7d62f49f2cba50f14157d56fe3', class: {
+        return (h("div", { key: '82fd2b838c46c47b51b93a23e5a837708fb944b1', class: {
                 'sd-select-search-input': true,
                 'sd-select-search-input--scrolled': !!this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, h("sd-input", { key: '509714588ae43b950ea7abc8cd045aee9007e04c', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
+            }, onClick: event => event.stopPropagation() }, h("sd-input", { key: 'fc0821ce63f445bed3dfce51668ece1831914f86', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
                 this.searchInput.emit(String(event?.detail));
             }, onSdFocus: () => {
                 this.searchFocus.emit();
             }, onKeyDown: event => {
                 if (event.code === 'Enter')
                     event.stopPropagation();
-            } }, h("sd-icon", { key: '1f13b6f332a930d7ffe515ccd4a77cf4e7e1af7f', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
+            } }, h("sd-icon", { key: '6a9b19f5910132be045e3a2cc33546307e3d5cb9', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
     }
     static get is() { return "sd-select-search-input"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-select-group/sd-select-group.js

@@ -270,7 +270,7 @@ export class SdSelectGroup extends BaseDropdownEvent {
         });
     }
     render() {
-        return (h("sd-field", { key: '2ff7d25f8fd9724fead7722757f174610d7c084d', 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: '57d0ff569579bb56810891a8e50a89e8b82096ac', class: {
+        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: {
                 'sd-select-group': true,
                 'sd-select-group--open': this.isOpen,
                 'sd-select-group--disabled': this.disabled,

package/dist/collection/components/sd-select-multiple/sd-select-multiple.js

@@ -150,7 +150,7 @@ export class SdSelectMultiple extends BaseDropdownEvent {
         this.handleOptionSelection(option);
     };
     render() {
-        return (h("sd-field", { key: '022f39a42986c29f8cab7f6801a7d2e4bbd5aaa5', 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: '93e4dd74f1b0ad76429f37c5fe6a9cffb98697d5', class: {
+        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: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,

package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js

@@ -39,7 +39,7 @@ export class SdSelectOptionGroup {
         }
     };
     render() {
-        return (h("div", { key: '70ab9a558faf068cfc4eb0a5f6a29453ceedc6ec', class: {
+        return (h("div", { key: '809d58fbd23e57920785835b37f00b66b579a96c', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -48,10 +48,10 @@ export class SdSelectOptionGroup {
                 '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: 'ca5dc0033231ab204a8688f98453742cdbde7d26', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: 'bba6cb9fe649f6eda82ba287f73d0142e02c53c2', 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: 'f2ff05ee37333111548779d9fe78d0c4b91c9a1e', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '4ca8aaffb38af21f27d429f6c937b1da3374c24a', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), h("span", { key: '7d03c080b7f5b92881389bfec787015a6ac55fa1', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: '7066453f92eac7549569db6854e3dc32515d80b9', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), 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})`)))));
     }
     static get is() { return "sd-select-option-group"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-select-v2/sd-select-v2-list-item/sd-select-v2-list-item.css

@@ -24,10 +24,6 @@ sd-select-v2-list-item .sd-select-v2-list-item--depth1-group {
 sd-select-v2-list-item .sd-select-v2-list-item--depth2-group {
   font-weight: 500;
 }
-sd-select-v2-list-item .sd-select-v2-list-item--selectable:not(.sd-select-v2-list-item--disabled):hover {
-  background: var(--list-item-bg-hover);
-  color: var(--list-item-color-hover);
-}
 sd-select-v2-list-item .sd-select-v2-list-item--focused.sd-select-v2-list-item--selectable:not(.sd-select-v2-list-item--disabled) {
   background: var(--list-item-bg-hover);
   color: var(--list-item-color-hover);
@@ -36,7 +32,7 @@ sd-select-v2-list-item .sd-select-v2-list-item--selected:not(.sd-select-v2-list-
   font-weight: 700;
   color: var(--list-item-bg-hover);
 }
-sd-select-v2-list-item .sd-select-v2-list-item--selected:hover, sd-select-v2-list-item .sd-select-v2-list-item--selected.sd-select-v2-list-item--focused {
+sd-select-v2-list-item .sd-select-v2-list-item--selected.sd-select-v2-list-item--focused {
   color: var(--list-item-color-hover);
 }
 sd-select-v2-list-item .sd-select-v2-list-item--disabled {
@@ -44,7 +40,8 @@ sd-select-v2-list-item .sd-select-v2-list-item--disabled {
   cursor: not-allowed;
 }
 sd-select-v2-list-item .sd-select-v2-list-item__label {
-  flex: 1;
+  flex: 0 1 auto;
+  min-width: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -54,6 +51,9 @@ sd-select-v2-list-item .sd-select-v2-list-item__count {
   font-weight: 500;
   color: var(--list-item-color-disabled);
 }
+sd-select-v2-list-item .sd-select-v2-list-item--group.sd-select-v2-list-item--focused .sd-select-v2-list-item__count {
+  color: #ffffff;
+}
 sd-select-v2-list-item .sd-select-v2-list-item__checkbox {
   flex-shrink: 0;
 }

package/dist/collection/components/sd-select-v2/sd-select-v2-list-item/sd-select-v2-list-item.js

@@ -64,7 +64,7 @@ export class SdSelectV2ListItem {
         if (isDepth1Group) {
             cssVars['--list-item-border-top'] = `${LIST_ITEM_COLORS.depth1.borderWidth}px solid ${LIST_ITEM_COLORS.depth1.border}`;
         }
-        return (h("div", { key: '1e828b28202b9d22cc02dff0550e37e506167f90', class: {
+        return (h("div", { key: 'af73e77fdeb673b1862b7bd0b153ee0726a3f5db', class: {
                 'sd-select-v2-list-item': true,
                 'sd-select-v2-list-item--group': isGroup,
                 'sd-select-v2-list-item--depth1-group': isDepth1Group,
@@ -74,7 +74,7 @@ export class SdSelectV2ListItem {
                 '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: '7f49b89aff1a269944551664bc8a51447b5b2f7e', 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: '51aad2d06ecdf11968f3f13c632081a663a3d200', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (h("span", { key: '1c1f5cd51460863ce41c8980dcc65cd2bb7bfee5', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, 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, ")"))));
     }
     static get is() { return "sd-select-v2-list-item"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-select-v2/sd-select-v2-list-item-search/sd-select-v2-list-item-search.js

@@ -26,15 +26,6 @@ export class SdSelectV2ListItemSearch {
             this.searchFilter.emit(this.searchText);
         }, SEARCH_DEBOUNCE_MS);
     };
-    handleKeyDown = (e) => {
-        if (e.key === 'Enter') {
-            e.preventDefault();
-            e.stopPropagation();
-            if (this.debounceTimer)
-                clearTimeout(this.debounceTimer);
-            this.searchFilter.emit(this.searchText);
-        }
-    };
     handleClear = (e) => {
         e.stopPropagation();
         this.searchText = '';
@@ -50,12 +41,12 @@ export class SdSelectV2ListItemSearch {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (h("div", { key: 'e7bd315d17d554aa63346f44eb8b2661994b49aa', class: {
+        return (h("div", { key: '7e0f812a04f8f72e41916aad1c2bd8313dac44c7', class: {
                 'sd-select-v2-list-item-search': true,
                 'sd-select-v2-list-item-search--scrolled': this.isScrolled,
-            } }, h("div", { key: 'ee332050907bc7e9004ff27e3f79cf816e7a44e7', class: "sd-select-v2-list-item-search__inner" }, h("sd-icon", { key: 'ccd929d161ba92ef4e8b008cee8866815c21f430', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), h("input", { key: 'b10e1dcf4bee6df78e917c9e4c31563e0466f38e', ref: el => {
+            } }, 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 => {
                 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, onKeyDown: this.handleKeyDown, onFocus: () => this.searchFocus.emit() }), this.searchText && (h("button", { key: 'fa2ee3033cff6b707a409ada6982ed596492c81d', type: "button", class: "sd-select-v2-list-item-search__clear", onClick: this.handleClear }, h("sd-icon", { key: '0e2cab7ca1a11c1ce60e74ac435dc55fbc375438', 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: '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" }))))));
     }
     static get is() { return "sd-select-v2-list-item-search"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-select-v2/sd-select-v2-listbox/sd-select-v2-listbox.css

@@ -12,6 +12,7 @@ sd-select-v2-listbox .sd-select-v2-listbox {
   background: white;
   box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);
   overflow: hidden;
+  outline: none;
 }
 sd-select-v2-listbox .sd-select-v2-listbox__list {
   flex: 1;

package/dist/collection/components/sd-select-v2/sd-select-v2-listbox/sd-select-v2-listbox.js

@@ -10,7 +10,12 @@ export class SdSelectV2Listbox {
     maxHeight = '260px';
     searchKeyword = '';
     isScrolled = false;
+    focusedIndex = -1;
     optionSelect;
+    listEl;
+    lastScrolledIndex = -1;
+    keydownAttached = false;
+    suppressHover = false;
     get isDepth() {
         return this.name === 'default_depth' || this.name === 'multi_depth';
     }
@@ -60,9 +65,9 @@ export class SdSelectV2Listbox {
         const selectedValues = this.getSelectedValues();
         if (selectedValues.size === 0)
             return false;
-        const originalOption = this.findOriginalOption(option.value, this.options);
-        const targetOption = originalOption ?? option;
-        const leaves = this.collectLeaves(targetOption);
+        const leaves = this.collectVisibleLeaves(option);
+        if (leaves.length === 0)
+            return false;
         const selectedCount = leaves.filter(l => selectedValues.has(l.value)).length;
         if (selectedCount === 0)
             return false;
@@ -74,10 +79,9 @@ export class SdSelectV2Listbox {
         if (!this.isMulti || !option.children)
             return undefined;
         const selectedValues = this.getSelectedValues();
-        const originalOption = this.findOriginalOption(option.value, this.options);
-        const totalLeaves = originalOption ? this.collectLeaves(originalOption) : this.collectLeaves(option);
-        const selectedCount = totalLeaves.filter(l => selectedValues.has(l.value)).length;
-        return { selected: selectedCount, total: totalLeaves.length };
+        const leaves = this.collectVisibleLeaves(option);
+        const selectedCount = leaves.filter(l => selectedValues.has(l.value)).length;
+        return { selected: selectedCount, total: leaves.length };
     }
     findOriginalOption(value, options) {
         for (const opt of options) {
@@ -96,21 +100,177 @@ export class SdSelectV2Listbox {
             return [option];
         return option.children.flatMap(child => this.collectLeaves(child));
     }
+    /**
+     * Returns the leaves currently visible to the user for the given (possibly
+     * filtered) option. When a group's own label matched the search keyword its
+     * `children` is emptied by `filterTree`; in that case we fall back to the
+     * full original subtree because the user has no way to deselect descendants
+     * individually.
+     */
+    collectVisibleLeaves(option) {
+        if (!option.children)
+            return [option];
+        if (option.children.length === 0) {
+            const original = this.findOriginalOption(option.value, this.options);
+            return original ? this.collectLeaves(original) : [];
+        }
+        return option.children.flatMap(child => this.collectVisibleLeaves(child));
+    }
+    get navigableOptions() {
+        const items = [];
+        const walk = (opts) => {
+            for (const opt of opts) {
+                const isGroup = !!opt.children;
+                const isSelectable = !isGroup || this.isMulti;
+                if (isSelectable && !opt.disabled)
+                    items.push(opt);
+                if (isGroup && opt.children && opt.children.length > 0)
+                    walk(opt.children);
+            }
+        };
+        walk(this.filteredOptions);
+        return items;
+    }
+    isOptionFocused(option) {
+        if (this.focusedIndex < 0)
+            return false;
+        const focused = this.navigableOptions[this.focusedIndex];
+        // filterTree 가 매 호출마다 옵션 객체를 새로 복제하기 때문에 참조 비교
+        // (=== / indexOf) 는 검색이 적용된 동안 항상 실패한다. 고유 식별자인
+        // value 로 비교해야 한다.
+        return !!focused && focused.value === option.value;
+    }
+    resetFocusOnFilter() {
+        // 필터가 바뀌면 이전 인덱스가 가리키던 항목이 사라질 수 있으므로
+        // 새 결과의 첫 항목으로 옮긴다. 결과가 비면 -1.
+        const items = this.navigableOptions;
+        this.focusedIndex = items.length > 0 ? 0 : -1;
+        // 키보드 네비게이션 직후 마우스가 한 번도 안 움직인 채로 사용자가
+        // 검색을 시작했다면 hover suppression 이 켜진 상태로 남아있을 수 있다.
+        // 검색이라는 명백한 사용자 의도 전환 시점에 강제로 해제한다.
+        if (this.suppressHover) {
+            document.removeEventListener('mousemove', this.releaseHoverSuppress, true);
+            this.suppressHover = false;
+        }
+    }
     handleSearchFilter = (e) => {
         this.searchKeyword = e.detail;
     };
     handleScroll = (e) => {
         this.isScrolled = e.target.scrollTop > 0;
     };
+    emitOptionSelect(option) {
+        this.optionSelect.emit({
+            option,
+            leaves: this.collectVisibleLeaves(option),
+        });
+    }
     handleOptionClick = (e) => {
         e.stopPropagation();
-        this.optionSelect.emit(e.detail);
+        this.emitOptionSelect(e.detail);
+    };
+    handleOptionHover = (option) => {
+        if (this.suppressHover)
+            return;
+        const idx = this.navigableOptions.findIndex(o => o.value === option.value);
+        if (idx >= 0)
+            this.focusedIndex = idx;
+    };
+    releaseHoverSuppress = () => {
+        this.suppressHover = false;
+        document.removeEventListener('mousemove', this.releaseHoverSuppress, true);
+    };
+    handleKeyDown = (e) => {
+        const items = this.navigableOptions;
+        if (e.key === 'ArrowDown') {
+            if (items.length === 0)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            this.focusedIndex = this.focusedIndex < 0 ? 0 : (this.focusedIndex + 1) % items.length;
+            this.beginHoverSuppression();
+        }
+        else if (e.key === 'ArrowUp') {
+            if (items.length === 0)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            this.focusedIndex = this.focusedIndex <= 0 ? items.length - 1 : this.focusedIndex - 1;
+            this.beginHoverSuppression();
+        }
+        else if (e.key === 'Enter') {
+            if (this.focusedIndex < 0 || this.focusedIndex >= items.length)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            this.emitOptionSelect(items[this.focusedIndex]);
+        }
     };
+    /**
+     * 키보드로 인덱스를 옮기면 자동 스크롤이 일어나는데, 정지한 마우스 커서
+     * 아래로 다른 항목이 미끄러져 들어오면서 mouseenter 가 발화해 인덱스를
+     * 다시 덮어쓰는 문제를 막는다. 실제로 마우스가 한 번이라도 움직이기 전까지
+     * hover 갱신을 무시한다.
+     */
+    beginHoverSuppression() {
+        if (this.suppressHover)
+            return;
+        this.suppressHover = true;
+        document.addEventListener('mousemove', this.releaseHoverSuppress, true);
+    }
+    /**
+     * 리스트 컨테이너 내부에서만 스크롤한다. `scrollIntoView` 는 조상 스크롤
+     * 컨테이너(=문서 자체)까지 함께 스크롤시키므로 사용하지 않는다.
+     */
+    scrollFocusedIntoView() {
+        const list = this.listEl;
+        const focusedEl = list?.querySelector('.sd-select-v2-list-item--focused');
+        if (!list || !focusedEl)
+            return;
+        const listRect = list.getBoundingClientRect();
+        const itemRect = focusedEl.getBoundingClientRect();
+        if (itemRect.top < listRect.top) {
+            list.scrollTop += itemRect.top - listRect.top;
+        }
+        else if (itemRect.bottom > listRect.bottom) {
+            list.scrollTop += itemRect.bottom - listRect.bottom;
+        }
+    }
+    /**
+     * sd-portal 이 슬롯 노드를 body 로 이동시키면서 disconnect → connect 가
+     * 발생하므로, 키보드 리스너는 한 번만 실행되는 componentDidLoad 가 아니라
+     * connectedCallback / disconnectedCallback 에 묶어 매번 재부착한다.
+     * capture phase 로 잡아 포커스가 검색 input 에 있어도 ↑/↓/Enter 가
+     * input 의 기본 동작(커서 이동)·페이지 스크롤보다 먼저 처리되도록 한다.
+     */
+    connectedCallback() {
+        if (!this.keydownAttached) {
+            document.addEventListener('keydown', this.handleKeyDown, true);
+            this.keydownAttached = true;
+        }
+    }
+    disconnectedCallback() {
+        if (this.keydownAttached) {
+            document.removeEventListener('keydown', this.handleKeyDown, true);
+            this.keydownAttached = false;
+        }
+        if (this.suppressHover) {
+            document.removeEventListener('mousemove', this.releaseHoverSuppress, true);
+            this.suppressHover = false;
+        }
+    }
+    componentDidRender() {
+        if (this.focusedIndex !== this.lastScrolledIndex) {
+            this.lastScrolledIndex = this.focusedIndex;
+            if (this.focusedIndex >= 0)
+                this.scrollFocusedIntoView();
+        }
+    }
     renderOptions(options, depth = 1) {
         return options.map(option => {
             const isGroup = !!option.children;
             return [
-                h("sd-select-v2-list-item", { option: option, depth: depth, isSelected: isGroup ? this.getGroupSelectionState(option) : this.isOptionSelected(option), useCheckbox: this.isMulti, countInfo: this.getCountInfo(option), onSdListItemClick: this.handleOptionClick }),
+                h("sd-select-v2-list-item", { option: option, depth: depth, isSelected: isGroup ? this.getGroupSelectionState(option) : this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, countInfo: this.getCountInfo(option), onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) }),
                 isGroup && option.children ? this.renderOptions(option.children, depth + 1) : null,
             ];
         });
@@ -123,7 +283,9 @@ export class SdSelectV2Listbox {
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
             '--listbox-padding-bottom': `${LIST_BOX_LAYOUT.paddingBottom}px`,
         };
-        return (h("div", { key: 'b64bc66e7f9a356e3f0cf752cba3a3c9de1928c5', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (h("sd-select-v2-list-item-search", { key: '2444bdda4e2a83008d175ba9867ecad01da5ed25', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '6307a0fd5480c006248dee44c4e1b54dd5749895', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll }, 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), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick })))))));
+        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 => {
+                this.listEl = el;
+            } }, this.isEmpty ? (h("div", { class: "sd-select-v2-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (h("sd-select-v2-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
     }
     static get is() { return "sd-select-v2-listbox"; }
     static get originalStyleUrls() {
@@ -302,7 +464,8 @@ export class SdSelectV2Listbox {
     static get states() {
         return {
             "searchKeyword": {},
-            "isScrolled": {}
+            "isScrolled": {},
+            "focusedIndex": {}
         };
     }
     static get events() {
@@ -317,17 +480,23 @@ export class SdSelectV2Listbox {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "SelectV2Option",
-                    "resolved": "SelectV2Option",
+                    "original": "SelectV2OptionSelectDetail",
+                    "resolved": "SelectV2OptionSelectDetail",
                     "references": {
-                        "SelectV2Option": {
+                        "SelectV2OptionSelectDetail": {
                             "location": "import",
                             "path": "../sd-select-v2.config",
-                            "id": "src/components/sd-select-v2/sd-select-v2.config.ts::SelectV2Option",
-                            "referenceLocation": "SelectV2Option"
+                            "id": "src/components/sd-select-v2/sd-select-v2.config.ts::SelectV2OptionSelectDetail",
+                            "referenceLocation": "SelectV2OptionSelectDetail"
                         }
                     }
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "searchKeyword",
+                "methodName": "resetFocusOnFilter"
+            }];
+    }
 }

package/dist/collection/components/sd-select-v2/sd-select-v2-trigger/sd-select-v2-trigger.js

@@ -26,11 +26,11 @@ export class SdSelectV2Trigger {
                     : SELECT_COLORS.icon.default,
             '--trigger-icon-color': this.disabled ? SELECT_COLORS.icon.disabled : SELECT_COLORS.icon.default,
         };
-        return (h("div", { key: '4fe2634aee7071ed48348b19dc367b1af88fd6d9', class: {
+        return (h("div", { key: '2cf4cc98bbfc8808f84d1d6b9dbfbb4f1afee272', 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: 'e0f71cdd91c6e04ebe5543fb2bc87d7331735da6', class: "sd-select-v2-trigger__content" }, h("span", { key: '3abfbc0541569c68870addc16a7d3439d7189ab5', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), h("sd-icon", { key: '8fcb187f67be75cf03c0f0bde42121cba0b16a47', name: "arrowDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, 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: {
                 'sd-select-v2-trigger__icon': true,
                 'sd-select-v2-trigger__icon--open': this.isOpen,
             } }))));