@sellmate/design-system 1.0.40 → 1.0.42

package/dist/cjs/sd-modal-container.cjs.entry.js

@@ -25,7 +25,7 @@ const SdModalContainer = class {
                 this.shakeModal(top.modalEl);
                 return;
             }
-            this.requestDismiss(top.id, 'cancel');
+            this.requestDismiss(top.id, 'close');
         }
     }
     async open(options, chain) {
@@ -35,33 +35,7 @@ const SdModalContainer = class {
             clearTimeout(this.containerDismissTimerId);
             this.containerDismissTimerId = undefined;
         }
-        this.entries = [...(this.entries ?? []), { id, modalEl, chain, persistent: !!options.persistent, closing: false }];
-        this.isVisible = true;
-        // Append after the container renders, then wait until the modal can paint before starting transitions.
-        requestAnimationFrame(() => {
-            if (this.contentRef) {
-                this.contentRef.appendChild(modalEl);
-                this.waitForModalReady(modalEl).then(() => {
-                    requestAnimationFrame(() => {
-                        const currentEntry = (this.entries ?? []).find(item => item.id === id);
-                        if (!currentEntry || currentEntry.closing || !modalEl.isConnected)
-                            return;
-                        this.isBackdropVisible = true;
-                        modalEl.classList.add('sd-modal-container__modal--visible');
-                    });
-                });
-            }
-        });
-        return id;
-    }
-    async openNotice(options, chain) {
-        const id = `modal-${++modalIdCounter}`;
-        const modalEl = this.createNoticeModal(id, options);
-        if (this.containerDismissTimerId) {
-            clearTimeout(this.containerDismissTimerId);
-            this.containerDismissTimerId = undefined;
-        }
-        this.entries = [...(this.entries ?? []), { id, modalEl, chain, persistent: !!options.persistent, closing: false }];
+        this.entries = [...(this.entries ?? []), { id, modalEl, chain, persistent: !!options.persistent, closeAction: options.closeAction ?? 'none', closing: false }];
         this.isVisible = true;
         requestAnimationFrame(() => {
             if (this.contentRef) {
@@ -90,11 +64,11 @@ const SdModalContainer = class {
         el.setAttribute('data-modal-id', id);
         el.classList.add('sd-modal-container__modal');
         this.applyProps(el, options);
-        el.addEventListener('sdConfirm', () => {
+        el.addEventListener('sdOk', () => {
             this.requestDismiss(id, 'confirm');
         });
         el.addEventListener('sdClose', () => {
-            this.requestDismiss(id, 'cancel');
+            this.requestDismiss(id, 'close');
         });
         return el;
     }
@@ -127,43 +101,6 @@ const SdModalContainer = class {
         if (this.hasOwnProp(options, 'tagContents'))
             el.tagContents = options.tagContents;
     }
-    createNoticeModal(id, options) {
-        const el = document.createElement('sd-notice-modal');
-        el.setAttribute('data-modal-id', id);
-        el.classList.add('sd-modal-container__modal');
-        this.applyNoticeProps(el, options);
-        el.addEventListener('sdConfirm', () => {
-            this.requestDismiss(id, 'confirm');
-        });
-        el.addEventListener('sdClose', () => {
-            this.requestDismiss(id, 'cancel');
-        });
-        return el;
-    }
-    applyNoticeProps(el, options) {
-        if (this.hasOwnProp(options, 'title'))
-            this.setAttr(el, 'modal-title', options.title);
-        if (this.hasOwnProp(options, 'titleClass'))
-            this.setAttr(el, 'title-class', options.titleClass);
-        if (this.hasOwnProp(options, 'mainButtonLabel')) {
-            this.setAttr(el, 'main-button-label', options.mainButtonLabel);
-        }
-        if (this.hasOwnProp(options, 'subButtonLabel')) {
-            this.setAttr(el, 'sub-button-label', options.subButtonLabel);
-        }
-        if (this.hasOwnProp(options, 'tagPreset'))
-            this.setAttr(el, 'tag-preset', options.tagPreset);
-        if (this.hasOwnProp(options, 'tagLabel'))
-            this.setAttr(el, 'tag-label', options.tagLabel);
-        if (this.hasOwnProp(options, 'slotLabel'))
-            this.setAttr(el, 'slot-label', options.slotLabel);
-        if (this.hasOwnProp(options, 'topMessage'))
-            el.topMessage = options.topMessage ?? [];
-        if (this.hasOwnProp(options, 'bottomMessage'))
-            el.bottomMessage = options.bottomMessage ?? [];
-        if (this.hasOwnProp(options, 'tagContents'))
-            el.tagContents = options.tagContents;
-    }
     handleBackdropClick = () => {
         const top = this.getTopEntry();
         if (!top)
@@ -172,7 +109,7 @@ const SdModalContainer = class {
             this.shakeModal(top.modalEl);
             return;
         }
-        this.requestDismiss(top.id, 'cancel');
+        this.requestDismiss(top.id, 'close');
     };
     shakeModal(modalEl) {
         const cls = 'sd-modal-container__modal--shake';
@@ -198,7 +135,6 @@ const SdModalContainer = class {
         if (!entry || entry.closing)
             return;
         entry.modalEl.classList.remove('sd-modal-container__modal--visible');
-        // fade out backdrop simultaneously if this is the last active modal
         const remainingActive = (this.entries ?? []).filter(item => item.id !== id && !item.closing);
         if (remainingActive.length === 0) {
             this.isBackdropVisible = false;
@@ -207,10 +143,18 @@ const SdModalContainer = class {
             this.finalizeDismiss(id);
         }, ANIMATION_DURATION);
         this.entries = (this.entries ?? []).map(item => item.id === id ? { ...item, closing: true, dismissTimerId } : item);
-        if (reason === 'confirm')
-            entry.chain._triggerOk();
-        if (reason === 'cancel')
-            entry.chain._triggerCancel();
+        if (reason === 'close') {
+            if (entry.closeAction === 'ok')
+                entry.chain._triggerOk();
+            else if (entry.closeAction === 'cancel')
+                entry.chain._triggerCancel();
+        }
+        else {
+            if (reason === 'confirm')
+                entry.chain._triggerOk();
+            if (reason === 'cancel')
+                entry.chain._triggerCancel();
+        }
     }
     finalizeDismiss(id) {
         const entry = (this.entries ?? []).find(item => item.id === id);

package/dist/cjs/sd-popover.cjs.entry.js

@@ -44,18 +44,26 @@ const SdPopover = class {
         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 (index.h(index.Fragment, { key: '205b8f574ce69afcb2abef1b0d0d6ec769230783' }, this.label ? (index.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) })) : (index.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 && (index.h("sd-floating-portal", { key: 'af82589e6ed773709c83a6855c37b1ac7092b9ec', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, index.h("div", { key: 'dfee40fa54b436a43583ebdc71830e6d590e1793', class: {
+        return (index.h(index.Fragment, { key: 'f367ea2ada0fda7c28c943bd7bd48785b1810999' }, this.label ? (index.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) })) : (index.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 && (index.h("sd-floating-portal", { key: 'afdb58bfdf25af2adc45a7b81221c1859b517a5a', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement, offset: this.popoverOffset }, index.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,
-            } }, index.h("i", { key: '388ac52f514ddd9247e79d20309a1de029fcd601', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '2502e1a63e3dca7e9c6d66805a9ec04e3106dd99' })), index.h("div", { key: 'e12b0df1dbdfe4b34de81ed231e1578bb5361afa', class: "sd-floating-menu__content" }, this.menuTitle && index.h("div", { key: '91f068beee3338f547157db06a0eee4f5e88355d', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (index.h("div", { key: '1283a6209c1c062d925ae1c32ba2a4f2aa98c8fa', class: "sd-floating-menu__messages" }, this.messages.map(message => (index.h("div", null, message))))), this.buttons.length > 0 && (index.h("div", { key: '130f5468eb8ac34bb02dce9a5a55c1fad17c8dcf', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (index.h("sd-button", { ...button })))))), this.useClose && (index.h("button", { key: '330fb79d032bac9da45afec3ccf0f2ec6e3dafba', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, index.h("sd-icon", { key: '7ba5d1e112ac776bb29253ac2cee510d36147ced', name: "close", size: popoverTokens.popover.close.icon, color: popoverTokens.popover.close.color }))))))));
+            } }, index.h("i", { key: '333bae4cb23470121d63d4d8b34a1d2b15837e7d', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '617781bb6fc8957576eb149471fd8bf0f44ca552' })), index.h("div", { key: '8c57d49782edd344c8c2c0b9bf44fff8ec154159', class: "sd-floating-menu__content" }, this.menuTitle && index.h("div", { key: 'a06b93124684cb96910ffa2603cf7410a01d6381', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (index.h("div", { key: '24691930b8ae03a3c92ed8e74dae708b5e64f03b', class: "sd-floating-menu__messages" }, this.messages.map(message => (index.h("div", null, message))))), this.buttons.length > 0 && (index.h("div", { key: 'd73cd4cc978711857c4c946dd2a1c1b64bb5feb6', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (index.h("sd-button", { ...button })))))), this.useClose && (index.h("button", { key: 'cda218024d04b03fc2931afa99f0127bc7a9c4c5', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, index.h("sd-icon", { key: '3f41ebce27fd4bab823370d6bbe25b5caed9d5e1', name: "close", size: popoverTokens.popover.close.icon, color: popoverTokens.popover.close.color }))))))));
     }
     static get watchers() { return {
         "show": [{

package/dist/cjs/sd-progress.cjs.entry.js

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

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

@@ -275,7 +275,7 @@ const SdSelectGroup = class extends baseDropdownEvent.BaseDropdownEvent {
         });
     }
     render() {
-        return (index.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' } }, index.h("div", { key: '57d0ff569579bb56810891a8e50a89e8b82096ac', class: {
+        return (index.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' } }, index.h("div", { key: 'f5a76e913d116469a9d3d9c777d5a3ad62ea42b7', class: {
                 'sd-select-group': true,
                 'sd-select-group--open': this.isOpen,
                 'sd-select-group--disabled': this.disabled,

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

@@ -155,7 +155,7 @@ const SdSelectMultiple = class extends baseDropdownEvent.BaseDropdownEvent {
         this.handleOptionSelection(option);
     };
     render() {
-        return (index.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) }, index.h("div", { key: '93e4dd74f1b0ad76429f37c5fe6a9cffb98697d5', class: {
+        return (index.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) }, index.h("div", { key: 'db4754bd0710e217119e02827e9e9db3285a5c74', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,

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

@@ -48,7 +48,7 @@ const SdSelectOptionGroup = class {
         }
     };
     render() {
-        return (index.h("div", { key: '70ab9a558faf068cfc4eb0a5f6a29453ceedc6ec', class: {
+        return (index.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,
@@ -57,10 +57,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) }, index.h("div", { key: 'ca5dc0033231ab204a8688f98453742cdbde7d26', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (index.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) }, index.h("div", { key: 'f2ff05ee37333111548779d9fe78d0c4b91c9a1e', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (index.h("sd-checkbox", { key: '4ca8aaffb38af21f27d429f6c937b1da3374c24a', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), index.h("span", { key: '7d03c080b7f5b92881389bfec787015a6ac55fa1', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (index.h("span", { key: '7066453f92eac7549569db6854e3dc32515d80b9', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), index.h("span", { key: 'b4b2943e68b98ce82c32e78a9841aae3be4d8e5f', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (index.h("span", { key: '6e1414b3738c43f8bd5d308b57440d34f9e1b7fa', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
 };
 SdSelectOptionGroup.style = sdSelectOptionGroupCss();

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

@@ -1,9 +1,9 @@
 'use strict';
 
 var index = require('./index-Qvv0fGgj.js');
-var sdSelectV2_config = require('./sd-select-v2.config-DZrPJ6OS.js');
+var sdSelectV2_config = require('./sd-select-v2.config-BJXi4hMP.js');
 
-const sdSelectV2ListItemCss = () => `sd-select-v2-list-item{display:block}sd-select-v2-list-item .sd-select-v2-list-item{display:flex;align-items:center;gap:var(--list-item-gap);padding:var(--list-item-padding-y) var(--list-item-padding-right) var(--list-item-padding-y) var(--list-item-padding-left);font-size:var(--list-item-font-size);line-height:var(--list-item-line-height);font-weight:var(--list-item-font-weight);background:var(--list-item-bg);color:var(--list-item-color);cursor:default;user-select:none}sd-select-v2-list-item .sd-select-v2-list-item--selectable{cursor:pointer}sd-select-v2-list-item .sd-select-v2-list-item--depth1-group{border-top:var(--list-item-border-top);font-weight:700}sd-select-v2-list-item .sd-select-v2-list-item--depth2-group{font-weight:500}sd-select-v2-list-item .sd-select-v2-list-item--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)}sd-select-v2-list-item .sd-select-v2-list-item--selected:not(.sd-select-v2-list-item--group){font-weight:700;color:var(--list-item-bg-hover)}sd-select-v2-list-item .sd-select-v2-list-item--selected:hover,sd-select-v2-list-item .sd-select-v2-list-item--selected.sd-select-v2-list-item--focused{color:var(--list-item-color-hover)}sd-select-v2-list-item .sd-select-v2-list-item--disabled{color:var(--list-item-color-disabled);cursor:not-allowed}sd-select-v2-list-item .sd-select-v2-list-item__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-v2-list-item .sd-select-v2-list-item__count{flex-shrink:0;font-weight:500;color:var(--list-item-color-disabled)}sd-select-v2-list-item .sd-select-v2-list-item__checkbox{flex-shrink:0}`;
+const sdSelectV2ListItemCss = () => `sd-select-v2-list-item{display:block}sd-select-v2-list-item .sd-select-v2-list-item{display:flex;align-items:center;gap:var(--list-item-gap);padding:var(--list-item-padding-y) var(--list-item-padding-right) var(--list-item-padding-y) var(--list-item-padding-left);font-size:var(--list-item-font-size);line-height:var(--list-item-line-height);font-weight:var(--list-item-font-weight);background:var(--list-item-bg);color:var(--list-item-color);cursor:default;user-select:none}sd-select-v2-list-item .sd-select-v2-list-item--selectable{cursor:pointer}sd-select-v2-list-item .sd-select-v2-list-item--depth1-group{border-top:var(--list-item-border-top);font-weight:700}sd-select-v2-list-item .sd-select-v2-list-item--depth2-group{font-weight:500}sd-select-v2-list-item .sd-select-v2-list-item--focused.sd-select-v2-list-item--selectable:not(.sd-select-v2-list-item--disabled){background:var(--list-item-bg-hover);color:var(--list-item-color-hover)}sd-select-v2-list-item .sd-select-v2-list-item--selected:not(.sd-select-v2-list-item--group){font-weight:700;color:var(--list-item-bg-hover)}sd-select-v2-list-item .sd-select-v2-list-item--selected.sd-select-v2-list-item--focused{color:var(--list-item-color-hover)}sd-select-v2-list-item .sd-select-v2-list-item--disabled{color:var(--list-item-color-disabled);cursor:not-allowed}sd-select-v2-list-item .sd-select-v2-list-item__label{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-v2-list-item .sd-select-v2-list-item__count{flex-shrink:0;font-weight:500;color:var(--list-item-color-disabled)}sd-select-v2-list-item .sd-select-v2-list-item--group.sd-select-v2-list-item--focused .sd-select-v2-list-item__count{color:#ffffff}sd-select-v2-list-item .sd-select-v2-list-item__checkbox{flex-shrink:0}`;
 
 const SdSelectV2ListItem = class {
     constructor(hostRef) {
@@ -73,7 +73,7 @@ const SdSelectV2ListItem = class {
         if (isDepth1Group) {
             cssVars['--list-item-border-top'] = `${sdSelectV2_config.LIST_ITEM_COLORS.depth1.borderWidth}px solid ${sdSelectV2_config.LIST_ITEM_COLORS.depth1.border}`;
         }
-        return (index.h("div", { key: '1e828b28202b9d22cc02dff0550e37e506167f90', class: {
+        return (index.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,
@@ -83,7 +83,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 && (index.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 })), index.h("span", { key: '51aad2d06ecdf11968f3f13c632081a663a3d200', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (index.h("span", { key: '1c1f5cd51460863ce41c8980dcc65cd2bb7bfee5', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (index.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 })), index.h("span", { key: '1a993c125767559c9cd27f343983b26a24413a93', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (index.h("span", { key: '377d0d6c6acab983aff2471fc0f4f78eaa637370', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
 };
 SdSelectV2ListItem.style = sdSelectV2ListItemCss();
@@ -121,15 +121,6 @@ const SdSelectV2ListItemSearch = class {
             this.searchFilter.emit(this.searchText);
         }, sdSelectV2_config.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 = '';
@@ -145,12 +136,12 @@ const SdSelectV2ListItemSearch = class {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (index.h("div", { key: 'e7bd315d17d554aa63346f44eb8b2661994b49aa', class: {
+        return (index.h("div", { key: '7e0f812a04f8f72e41916aad1c2bd8313dac44c7', class: {
                 'sd-select-v2-list-item-search': true,
                 'sd-select-v2-list-item-search--scrolled': this.isScrolled,
-            } }, index.h("div", { key: 'ee332050907bc7e9004ff27e3f79cf816e7a44e7', class: "sd-select-v2-list-item-search__inner" }, index.h("sd-icon", { key: 'ccd929d161ba92ef4e8b008cee8866815c21f430', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), index.h("input", { key: 'b10e1dcf4bee6df78e917c9e4c31563e0466f38e', ref: el => {
+            } }, index.h("div", { key: 'f9df679b4cab727ba2c29293194556dad00bf46b', class: "sd-select-v2-list-item-search__inner" }, index.h("sd-icon", { key: '5f9eb6de82437a6344cc3a0042a24196cb7392a5', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), index.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 && (index.h("button", { key: 'fa2ee3033cff6b707a409ada6982ed596492c81d', type: "button", class: "sd-select-v2-list-item-search__clear", onClick: this.handleClear }, index.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 && (index.h("button", { key: '00830db3b8d303993acf0787e3818e36f7c2c19c', type: "button", class: "sd-select-v2-list-item-search__clear", onClick: this.handleClear }, index.h("sd-icon", { key: 'a40a022ec7a3ea9d4bda28e7b5fd41850966c716', name: "close", size: 12, color: "#888888" }))))));
     }
 };
 SdSelectV2ListItemSearch.style = sdSelectV2ListItemSearchCss();

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

@@ -1,9 +1,9 @@
 'use strict';
 
 var index = require('./index-Qvv0fGgj.js');
-var sdSelectV2_config = require('./sd-select-v2.config-DZrPJ6OS.js');
+var sdSelectV2_config = require('./sd-select-v2.config-BJXi4hMP.js');
 
-const sdSelectV2ListboxCss = () => `sd-select-v2-listbox{display:block}sd-select-v2-listbox .sd-select-v2-listbox{display:flex;flex-direction:column;min-width:var(--listbox-trigger-width);max-width:var(--listbox-max-width);max-height:var(--listbox-max-height);width:fit-content;border-radius:var(--listbox-radius);background:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);overflow:hidden}sd-select-v2-listbox .sd-select-v2-listbox__list{flex:1;min-height:0;overflow-y:auto;padding-bottom:var(--listbox-padding-bottom)}sd-select-v2-listbox .sd-select-v2-listbox__empty{padding:12px;text-align:center;font-size:12px;line-height:20px;color:#888888}`;
+const sdSelectV2ListboxCss = () => `sd-select-v2-listbox{display:block}sd-select-v2-listbox .sd-select-v2-listbox{display:flex;flex-direction:column;min-width:var(--listbox-trigger-width);max-width:var(--listbox-max-width);max-height:var(--listbox-max-height);width:fit-content;border-radius:var(--listbox-radius);background:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);overflow:hidden;outline:none}sd-select-v2-listbox .sd-select-v2-listbox__list{flex:1;min-height:0;overflow-y:auto;padding-bottom:var(--listbox-padding-bottom)}sd-select-v2-listbox .sd-select-v2-listbox__empty{padding:12px;text-align:center;font-size:12px;line-height:20px;color:#888888}`;
 
 const SdSelectV2Listbox = class {
     constructor(hostRef) {
@@ -19,7 +19,12 @@ const SdSelectV2Listbox = class {
     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';
     }
@@ -69,9 +74,9 @@ const SdSelectV2Listbox = class {
         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;
@@ -83,10 +88,9 @@ const SdSelectV2Listbox = class {
         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) {
@@ -105,21 +109,177 @@ const SdSelectV2Listbox = class {
             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 [
-                index.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 }),
+                index.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,
             ];
         });
@@ -132,8 +292,15 @@ const SdSelectV2Listbox = class {
             '--listbox-radius': `${sdSelectV2_config.LIST_BOX_LAYOUT.radius}px`,
             '--listbox-padding-bottom': `${sdSelectV2_config.LIST_BOX_LAYOUT.paddingBottom}px`,
         };
-        return (index.h("div", { key: 'b64bc66e7f9a356e3f0cf752cba3a3c9de1928c5', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-v2-list-item-search", { key: '2444bdda4e2a83008d175ba9867ecad01da5ed25', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: '6307a0fd5480c006248dee44c4e1b54dd5749895', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll }, this.isEmpty ? (index.h("div", { class: "sd-select-v2-listbox__empty" }, sdSelectV2_config.EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (index.h("sd-select-v2-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick })))))));
+        return (index.h("div", { key: 'f47839574d0c149ab4aa2a3912b51318ec815b55', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-v2-list-item-search", { key: '3c3f9fd3e0c935da59bc7727af5c719b76b309d5', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: '4d4ef6c7c543689abb9ed085e07e613deca6c8d8', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll, ref: el => {
+                this.listEl = el;
+            } }, this.isEmpty ? (index.h("div", { class: "sd-select-v2-listbox__empty" }, sdSelectV2_config.EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (index.h("sd-select-v2-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
     }
+    static get watchers() { return {
+        "searchKeyword": [{
+                "resetFocusOnFilter": 0
+            }]
+    }; }
 };
 SdSelectV2Listbox.style = sdSelectV2ListboxCss();
 
@@ -169,11 +336,11 @@ const SdSelectV2Trigger = class {
                     : sdSelectV2_config.SELECT_COLORS.icon.default,
             '--trigger-icon-color': this.disabled ? sdSelectV2_config.SELECT_COLORS.icon.disabled : sdSelectV2_config.SELECT_COLORS.icon.default,
         };
-        return (index.h("div", { key: '4fe2634aee7071ed48348b19dc367b1af88fd6d9', class: {
+        return (index.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 }, index.h("div", { key: 'e0f71cdd91c6e04ebe5543fb2bc87d7331735da6', class: "sd-select-v2-trigger__content" }, index.h("span", { key: '3abfbc0541569c68870addc16a7d3439d7189ab5', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), index.h("sd-icon", { key: '8fcb187f67be75cf03c0f0bde42121cba0b16a47', name: "arrowDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, style: cssVars, onClick: this.handleClick }, index.h("div", { key: '8835de30555a7ef7846afacad8ec6ee5482b36cf', class: "sd-select-v2-trigger__content" }, index.h("span", { key: '5afd6845dc9b412a3cd87e6a16de8bd506b38dbb', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), index.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,
             } }))));