@sellmate/design-system 1.0.75 → 1.0.76

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

@@ -57,10 +57,10 @@ const SdToast = class {
     render() {
         const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
         const iconSize = Number(TOAST_LAYOUT.iconSize);
-        return (index.h("div", { key: 'd4b73e2503514143f5174bc8859baf0e59c2f8da', style: {
+        return (index.h("div", { key: '77954c9d285339cb48032eec5eca0dcbe308affc', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
-            } }, index.h("div", { key: '7334daee691fb03a1005c2afac64033554489046', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '297ada835b0710bf43a936b02e53b0873b7f4af3', class: "sd-toast__icon" }, index.h("sd-icon", { key: 'b5bc4716df28231dc7af15db63595ae9044189b5', name: this.icon, size: iconSize, color: typeConfig.content }))), index.h("div", { key: 'd0239c8f8b495fbdaedad0f65a6d0a0edfaada60', class: "sd-toast__content" }, index.h("span", { key: 'dc70d403673bb8f99cfd91393054a86bf17e5ac2', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '1a76bcee482720693b501d3a13c54e720bbe44fc', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (index.h("sd-ghost-button", { key: 'a8dc3c15cabf5ca4e075e75c4fb2744dd5da4fa0', class: "sd-toast__close", icon: "close", intent: this.type === 'caution' ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, index.h("div", { key: '73c792f19982140f91397a3ec7d6e22914ca316f', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: 'cc140bfd043b0d0cd6a7697053f736dac707f86b', class: "sd-toast__icon" }, index.h("sd-icon", { key: '85f38036cd39cb4d0f4a43ef0d307ef9faa03eb1', name: this.icon, size: iconSize, color: typeConfig.content }))), index.h("div", { key: '4d36e34a9ccac80fc2ed01f33b1e2aa80d70c78b', class: "sd-toast__content" }, index.h("span", { key: '9105d37004bbde90e8a7118ca5a58a6e4d6953f5', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: 'fdaabae7d8efb6540ce770cc5783b286789cdb3c', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (index.h("sd-ghost-button", { key: 'c5985e50041b8f3e8c77e142fd06afaf0537de47', class: "sd-toast__close", icon: "close", intent: this.type === 'caution' ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
 };
 SdToast.style = sdToastCss();

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

@@ -120,7 +120,7 @@ const SdToggle = class {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (index.h("label", { key: 'fe56ffe876ccc859536ca74703e0870ad97e1668', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: 'f473fd71c03d0e4e3e8fb354753d769033f148f2', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (index.h("label", { key: 'e9bb126d92605cdd3a88ff1840aa79a4b66c7cf8', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: '41c18a29c10ae91b84ecd6d2619a40ab99f5d151', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/collection/components/sd-ghost-button/sd-ghost-button.js

@@ -8,6 +8,11 @@ export class SdGhostButton {
     disabled = false;
     click;
     hasWarnedMissingAriaLabel = false;
+    componentWillLoad() {
+        this.size ??= 'sm';
+        this.intent ??= 'default';
+        this.ariaLabel ??= '';
+    }
     handleClick = (event) => {
         if (this.disabled) {
             event.preventDefault();
@@ -32,19 +37,19 @@ export class SdGhostButton {
     render() {
         const sizeConfig = GHOST_BUTTON_SIZES[this.size];
         const contentColor = this.disabled
-            ? GHOST_BUTTON_DISABLED_COLORS[this.intent ?? 'default']
-            : GHOST_BUTTON_CONTENT_COLORS[this.intent ?? 'default'];
+            ? GHOST_BUTTON_DISABLED_COLORS[this.intent]
+            : GHOST_BUTTON_CONTENT_COLORS[this.intent];
         const accessibleName = this.ariaLabel.trim() || undefined;
-        return (h("button", { key: '34c5026b4819b624b19d1773bad413b689633c2a', class: {
+        return (h("button", { key: 'd7f6fcbed3526ffb8b90b205dbe2bbf55abf03a0', class: {
                 'sd-ghost-button': true,
                 'sd-ghost-button--disabled': this.disabled,
             }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
                 '--sd-ghost-button-size': `${sizeConfig.size}px`,
                 '--sd-ghost-button-radius': `${GHOST_BUTTON_RADIUS[this.size]}px`,
-                '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent ?? 'default'],
+                '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent],
                 '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
                 '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, h("sd-icon", { key: '063f7cfabfdbf0f4f2f4c1a2c811e6c3734d941f', name: this.icon, size: sizeConfig.icon, color: contentColor })));
+            }, onClick: this.handleClick }, h("sd-icon", { key: '9efc3a3fbf7878a9a50b2efbf054b335d9cddfe0', name: this.icon, size: sizeConfig.icon, color: contentColor })));
     }
     static get is() { return "sd-ghost-button"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-modal-container/sd-modal-container.js

@@ -5,10 +5,8 @@ const ANIMATION_DURATION = 350;
 export class SdModalContainer {
     el;
     autoRemove = false;
-    entry;
-    isVisible = false;
-    backdropVisible = false;
-    layerRef;
+    entries = [];
+    layerRefs = new Map();
     async open(options, modalRef) {
         const id = `modal-${++modalIdCounter}`;
         const modalEl = this.createConfirmModal(id, options);
@@ -19,6 +17,7 @@ export class SdModalContainer {
             modalRef,
             persistent: !!options.persistent,
             closing: false,
+            backdropVisible: false,
         });
         return id;
     }
@@ -32,6 +31,7 @@ export class SdModalContainer {
             modalRef,
             persistent: !!options.persistent,
             closing: false,
+            backdropVisible: false,
         });
         return id;
     }
@@ -46,91 +46,93 @@ export class SdModalContainer {
             modalRef,
             persistent: !!options.persistent,
             closing: false,
+            backdropVisible: false,
         });
         return id;
     }
     componentDidRender() {
-        if (!this.entry || this.entry.closing || !this.layerRef)
+        if (!Array.isArray(this.entries))
             return;
-        if (this.entry.modalEl.isConnected)
-            return;
-        const { id, modalEl } = this.entry;
-        this.layerRef.appendChild(modalEl);
-        this.waitForModalReady(modalEl).then(() => {
-            requestAnimationFrame(() => {
-                if (!this.entry || this.entry.id !== id || this.entry.closing || !modalEl.isConnected)
-                    return;
-                this.backdropVisible = true;
-                modalEl.classList.add('sd-modal-container__modal--visible');
+        for (const entry of this.entries) {
+            if (entry.closing || entry.modalEl.isConnected)
+                continue;
+            const layerRef = this.layerRefs.get(entry.id);
+            if (!layerRef)
+                continue;
+            const { id, modalEl } = entry;
+            layerRef.appendChild(modalEl);
+            this.waitForModalReady(modalEl).then(() => {
+                requestAnimationFrame(() => {
+                    const current = this.entries.find(e => e.id === id);
+                    if (!current || current.closing || !modalEl.isConnected)
+                        return;
+                    this.entries = this.entries.map(e => e.id === id ? { ...e, backdropVisible: true } : e);
+                    modalEl.classList.add('sd-modal-container__modal--visible');
+                });
             });
-        });
+        }
     }
     disconnectedCallback() {
-        if (this.entry?.dismissTimerId)
-            clearTimeout(this.entry.dismissTimerId);
-        if (this.entry)
-            unregisterModal(this.entry.id);
+        for (const entry of this.entries ?? []) {
+            if (entry.dismissTimerId)
+                clearTimeout(entry.dismissTimerId);
+            unregisterModal(entry.id);
+        }
     }
     async dismissById(id, reason) {
-        if (this.entry?.id !== id)
+        const entry = this.entries.find(e => e.id === id);
+        if (!entry)
             return;
-        this.requestDismiss(reason);
+        this.requestDismiss(id, reason);
     }
     async update(id, props) {
-        if (!this.entry || this.entry.id !== id || this.entry.closing)
+        const entry = this.entries.find(e => e.id === id && !e.closing);
+        if (!entry)
             return;
-        const tag = this.entry.modalEl.tagName.toLowerCase();
+        const tag = entry.modalEl.tagName.toLowerCase();
         if (tag === 'sd-loading-modal') {
-            this.applyLoadingProps(this.entry.modalEl, props);
+            this.applyLoadingProps(entry.modalEl, props);
             return;
         }
-        this.applyProps(this.entry.modalEl, props);
+        this.applyProps(entry.modalEl, props);
     }
     mountEntry(entry) {
-        if (this.entry) {
-            throw new Error('[sd-modal-container] This instance already manages an active modal.');
-        }
-        this.entry = entry;
-        this.backdropVisible = false;
-        this.isVisible = true;
+        this.entries = [...(this.entries ?? []), entry];
         registerModal({
             id: entry.id,
             persistent: entry.persistent,
-            requestClose: () => this.dispatchClose(),
+            requestClose: () => this.dispatchClose(entry.id),
             shake: () => this.shakeModal(entry.modalEl),
             setZIndex: zIndex => {
                 this.el.style.setProperty('--sd-modal-container-z-index', String(zIndex));
             },
         });
     }
-    attachModalEventListeners(_id, modalEl) {
-        modalEl.addEventListener('sdOk', () => this.requestDismiss('confirm'));
-        modalEl.addEventListener('sdCancel', () => this.requestDismiss('cancel'));
-        modalEl.addEventListener('sdClose', () => this.requestDismiss('close'));
+    attachModalEventListeners(id, modalEl) {
+        modalEl.addEventListener('sdOk', () => this.requestDismiss(id, 'confirm'));
+        modalEl.addEventListener('sdCancel', () => this.requestDismiss(id, 'cancel'));
+        modalEl.addEventListener('sdClose', () => this.requestDismiss(id, 'close'));
     }
-    attachLoadingModalEventListeners(_id, modalEl) {
+    attachLoadingModalEventListeners(id, modalEl) {
         modalEl.addEventListener('sdClick', () => {
-            this.entry?.modalRef._triggerClick?.();
+            const entry = this.entries.find(e => e.id === id);
+            entry?.modalRef._triggerClick?.();
         });
     }
-    dispatchClose() {
-        this.entry?.modalEl.dispatchEvent(new CustomEvent('sdClose'));
+    dispatchClose(id) {
+        const entry = this.entries.find(e => e.id === id);
+        entry?.modalEl.dispatchEvent(new CustomEvent('sdClose'));
     }
-    requestDismiss(reason) {
-        const currentEntry = this.entry;
+    requestDismiss(id, reason) {
+        const currentEntry = this.entries.find(e => e.id === id);
         if (!currentEntry || currentEntry.closing)
             return;
         currentEntry.modalEl.classList.remove('sd-modal-container__modal--visible');
         const dismissTimerId = setTimeout(() => {
-            this.finalizeDismiss(currentEntry.id);
+            this.finalizeDismiss(id);
         }, ANIMATION_DURATION);
-        setModalInteractive(currentEntry.id, false);
-        this.entry = {
-            ...currentEntry,
-            closing: true,
-            dismissTimerId,
-        };
-        this.backdropVisible = false;
+        setModalInteractive(id, false);
+        this.entries = (this.entries ?? []).map(e => e.id === id ? { ...e, closing: true, dismissTimerId, backdropVisible: false } : e);
         if (reason === 'confirm')
             currentEntry.modalRef._triggerOk();
         else if (reason === 'cancel')
@@ -139,18 +141,17 @@ export class SdModalContainer {
             currentEntry.modalRef._triggerClose();
     }
     finalizeDismiss(id) {
-        const currentEntry = this.entry;
-        if (!currentEntry || currentEntry.id !== id)
+        const currentEntry = this.entries.find(e => e.id === id);
+        if (!currentEntry)
             return;
         if (currentEntry.dismissTimerId)
             clearTimeout(currentEntry.dismissTimerId);
         currentEntry.modalEl.remove();
         unregisterModal(id);
         currentEntry.modalRef._triggerDismissed();
-        this.entry = undefined;
-        this.backdropVisible = false;
-        this.isVisible = false;
-        if (this.autoRemove) {
+        this.layerRefs.delete(id);
+        this.entries = (this.entries ?? []).filter(e => e.id !== id);
+        if (this.autoRemove && this.entries.length === 0) {
             this.el.remove();
         }
     }
@@ -171,8 +172,14 @@ export class SdModalContainer {
     applyLoadingProps(el, options) {
         if (this.hasOwnProp(options, 'state'))
             this.setAttr(el, 'state', options.state);
-        if (this.hasOwnProp(options, 'message'))
-            this.setAttr(el, 'message', options.message);
+        if (this.hasOwnProp(options, 'message')) {
+            if (Array.isArray(options.message)) {
+                el.message = options.message;
+            }
+            else {
+                this.setAttr(el, 'message', options.message);
+            }
+        }
         if (this.hasOwnProp(options, 'useButton')) {
             if (options.useButton)
                 el.setAttribute('use-button', '');
@@ -218,11 +225,11 @@ export class SdModalContainer {
         if (this.hasOwnProp(options, 'tagContents'))
             el.tagContents = options.tagContents;
     }
-    handleBackdropClick = () => {
-        if (!this.entry || !isTopInteractiveModal(this.entry.id))
+    handleBackdropClick(id) {
+        if (!isTopInteractiveModal(id))
             return;
-        requestCloseForModal(this.entry.id);
-    };
+        requestCloseForModal(id);
+    }
     shakeModal(modalEl) {
         const cls = 'sd-modal-container__modal--shake';
         modalEl.classList.remove(cls);
@@ -251,14 +258,15 @@ export class SdModalContainer {
         el.setAttribute(name, value);
     }
     render() {
-        if (!this.isVisible || !this.entry)
+        if (!this.entries?.length)
             return null;
-        return (h("div", { class: "sd-modal-container" }, h("div", { class: "sd-modal-container__layer", "data-modal-id": this.entry.id, ref: el => {
-                this.layerRef = el;
+        return (h("div", { class: "sd-modal-container" }, this.entries.map((entry, index) => (h("div", { key: entry.id, class: "sd-modal-container__layer", style: { zIndex: String(index + 1) }, "data-modal-id": entry.id, ref: el => {
+                if (el)
+                    this.layerRefs.set(entry.id, el);
             } }, h("div", { class: {
                 'sd-modal-container__backdrop': true,
-                'sd-modal-container__backdrop--visible': this.backdropVisible,
-            }, onClick: this.handleBackdropClick }))));
+                'sd-modal-container__backdrop--visible': entry.backdropVisible,
+            }, onClick: () => this.handleBackdropClick(entry.id) }))))));
     }
     static get is() { return "sd-modal-container"; }
     static get originalStyleUrls() {
@@ -297,9 +305,7 @@ export class SdModalContainer {
     }
     static get states() {
         return {
-            "entry": {},
-            "isVisible": {},
-            "backdropVisible": {}
+            "entries": {}
         };
     }
     static get methods() {

package/dist/collection/components/sd-radio-button/sd-radio-button.js

@@ -7,6 +7,11 @@ export class SdRadioButton {
     disabled = false;
     name;
     change;
+    componentWillLoad() {
+        this.size ??= 'sm';
+        this.options ??= [];
+        this.disabled ??= false;
+    }
     handleRadioChange = (optionValue, optionDisabled) => {
         if (this.disabled || optionDisabled)
             return;
@@ -67,7 +72,7 @@ export class SdRadioButton {
             '--sd-radio-button-content-select': RADIO_BUTTON_COLORS.content.select,
             '--sd-radio-button-content-disabled': RADIO_BUTTON_COLORS.content.disabled,
         };
-        return (h("div", { key: '67c8e7ad03fb6ee4cabd06591e3e11e5d38914f0', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
+        return (h("div", { key: 'fbc0246d9cf615956121295e29bf8c702ee73edc', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
             const isSelected = this.isOptionSelected(option);
             const isDisabled = this.isOptionDisabled(option);
             return (h("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, h("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && h("span", { class: "sd-radio-button__label" }, option.label)));

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

@@ -5,6 +5,8 @@ export class SdSelectV2Listbox {
     options = [];
     value = null;
     emitValue = false;
+    useSearch = false;
+    useSelectAll = false;
     triggerWidth = '200px';
     maxWidth = '640px';
     maxHeight = '260px';
@@ -22,7 +24,40 @@ export class SdSelectV2Listbox {
     get isMulti() {
         return this.type === 'multi' || this.type === 'multi_depth';
     }
+    static SELECT_ALL_OPTION = {
+        value: '__select_all__',
+        label: '전체',
+    };
+    get showSelectAll() {
+        return this.useSelectAll && this.isMulti;
+    }
+    getAllNonDisabledLeaves() {
+        const collect = (opts) => opts.flatMap(o => {
+            if (o.disabled)
+                return [];
+            if (o.children)
+                return collect(o.children);
+            return [o];
+        });
+        return collect(this.options);
+    }
+    get selectAllState() {
+        if (!this.showSelectAll)
+            return false;
+        const allLeaves = this.getAllNonDisabledLeaves();
+        if (allLeaves.length === 0)
+            return false;
+        const selectedValues = this.getSelectedValues();
+        const selectedCount = allLeaves.filter(l => selectedValues.has(l.value)).length;
+        if (selectedCount === 0)
+            return false;
+        if (selectedCount === allLeaves.length)
+            return true;
+        return null;
+    }
     get showSearch() {
+        if (!this.useSearch)
+            return false;
         const count = this.isDepth ? countLeaves(this.options) : this.options.length;
         return count >= SEARCH_THRESHOLD;
     }
@@ -124,6 +159,9 @@ export class SdSelectV2Listbox {
     }
     get navigableOptions() {
         const items = [];
+        if (this.showSelectAll) {
+            items.push(SdSelectV2Listbox.SELECT_ALL_OPTION);
+        }
         const walk = (opts) => {
             for (const opt of opts) {
                 const isGroup = !!opt.children;
@@ -137,6 +175,22 @@ export class SdSelectV2Listbox {
         walk(this.filteredOptions);
         return items;
     }
+    isSelectAllOption(option) {
+        return this.showSelectAll && option.value === SdSelectV2Listbox.SELECT_ALL_OPTION.value;
+    }
+    emitSelectAll() {
+        if (!this.showSelectAll)
+            return;
+        const allLeaves = this.getAllNonDisabledLeaves();
+        this.optionSelect.emit({
+            option: { ...SdSelectV2Listbox.SELECT_ALL_OPTION, children: allLeaves },
+            leaves: allLeaves,
+        });
+    }
+    handleSelectAllClick = (e) => {
+        e.stopPropagation();
+        this.emitSelectAll();
+    };
     isOptionFocused(option) {
         if (this.focusedIndex < 0)
             return false;
@@ -209,7 +263,13 @@ export class SdSelectV2Listbox {
                 return;
             e.preventDefault();
             e.stopPropagation();
-            this.emitOptionSelect(items[this.focusedIndex]);
+            const focused = items[this.focusedIndex];
+            if (this.isSelectAllOption(focused)) {
+                this.emitSelectAll();
+            }
+            else {
+                this.emitOptionSelect(focused);
+            }
         }
     };
     /**
@@ -288,9 +348,9 @@ export class SdSelectV2Listbox {
             '--listbox-max-height': this.maxHeight,
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
         };
-        return (h("div", { key: 'd4d80ebd565436cd929961a2f9ce50adf92c124b', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (h("sd-select-v2-list-item-search", { key: 'bd549975fe6187aa7e77e718c8d2ba4a6d6e33de', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '4ac6a1512781942fef3e42d6ca32762962df1836', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (h("div", { key: '34efe12dfb3829dd7024eb473d0bb6460ad07e61', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (h("sd-select-v2-list-item-search", { key: 'd59a97386213e93f905a817b7c3242d1fb5d5035', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '0feb6763afe5ac661de85df2c1a3683e56b17035', 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) })))))));
+            } }, this.showSelectAll && (h("sd-select-v2-list-item", { key: 'b4a765ddfadd39808baafd925d0cd2fcdab78800', option: SdSelectV2Listbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectV2Listbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectV2Listbox.SELECT_ALL_OPTION) })), 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 encapsulation() { return "shadow"; }
@@ -405,6 +465,46 @@ export class SdSelectV2Listbox {
                 "attribute": "emit-value",
                 "defaultValue": "false"
             },
+            "useSearch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "use-search",
+                "defaultValue": "false"
+            },
+            "useSelectAll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "use-select-all",
+                "defaultValue": "false"
+            },
             "triggerWidth": {
                 "type": "string",
                 "mutable": false,

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

@@ -42,13 +42,13 @@ export class SdSelectV2Trigger {
                 ? SELECT_COLORS.icon.disabled
                 : SELECT_COLORS.icon.default,
         };
-        return (h("div", { key: '7c4f60c972c17b5954cbf0d0cc7ee38c8e6c16a3', ref: el => {
+        return (h("div", { key: 'ec8bf544b2878082a046fbe881afa2369709033f', ref: el => {
                 this.triggerEl = el;
             }, tabindex: this.disabled ? -1 : 0, 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, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: 'de5f5a44626fce29c5a83cf0a14dd03352d40b57', class: "sd-select-v2-trigger__content" }, h("span", { key: 'a36a013e9ef359160c2b9d24b42ee6f228aca302', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), h("sd-icon", { key: '4bfcfce96fbe2008517ee26d7802d4492292faa5', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, style: cssVars, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: '1a6a5cf66208aa5a996e788886ff593ec0830d51', class: "sd-select-v2-trigger__content" }, h("span", { key: 'bd905f9149f3842e5e169e1a6086b33164b0ab66', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), h("sd-icon", { key: 'cc487e430f42fdd61540e265a9e5bb01e9045a58', 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/collection/components/sd-select-v2/sd-select-v2.js

@@ -25,6 +25,9 @@ export class SdSelectV2 {
     labelTooltipProps = null;
     emitValue = false;
     width = '';
+    useSearch = false;
+    allSelectedLabel = '전체';
+    useSelectAll = false;
     isOpen = false;
     isAnimatingOut = false;
     triggerWidth = '200px';
@@ -66,6 +69,12 @@ export class SdSelectV2 {
         if (this.isMulti) {
             if (!Array.isArray(this.value) || this.value.length === 0)
                 return '';
+            const nonDisabledLeaves = this.getNonDisabledLeaves(this.options);
+            const selected = this.getSelectedOptions();
+            const allSelected = nonDisabledLeaves.length > 0 &&
+                nonDisabledLeaves.every(leaf => selected.some(s => s.value === leaf.value));
+            if (allSelected)
+                return this.allSelectedLabel ?? '전체';
             const flat = this.flattenOptions(this.options);
             return this.value
                 .map(item => {
@@ -90,6 +99,15 @@ export class SdSelectV2 {
     flattenOptions(options) {
         return options.flatMap(o => (o.children ? this.flattenOptions(o.children) : [o]));
     }
+    getNonDisabledLeaves(options) {
+        return options.flatMap(o => {
+            if (o.disabled)
+                return [];
+            if (o.children)
+                return this.getNonDisabledLeaves(o.children);
+            return [o];
+        });
+    }
     getSelectedOptions() {
         const val = this.value;
         if (!val || !Array.isArray(val))
@@ -236,15 +254,15 @@ export class SdSelectV2 {
                 this.closeDropdown();
             },
         };
-        return (h("sd-field", { key: '76b432c04fa0f9fca70e63e9c7d16ed768fc9dd1', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
+        return (h("sd-field", { key: '62bb998e1d455a3792001da4849ba867c60cdd9f', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
                 this.hovered = true;
             }, onMouseLeave: () => {
                 this.hovered = false;
-            } }, h("div", { key: 'dba3a313b7e0171a441540877aacdc7d5c2e7f04', class: "sd-select-v2", ref: el => {
+            } }, h("div", { key: '42fa82a3c53804d9f90aadb0465d52fd9f4e446e', class: "sd-select-v2", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-select-v2-trigger", { key: '7790357558f174eb70b15ed72574f738b062c479', ref: el => {
+            } }, h("sd-select-v2-trigger", { key: 'c97ae1e67019b099eee72f829d554b9e0350af30', ref: el => {
                 this.triggerComponentRef = el;
-            }, displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '672f3583b24e363b74d184d13866ee19a78b04d9', ...portalProps }, h("sd-select-v2-listbox", { key: 'f71d95ad06c74356e4d5ce94da7e720c002390b6', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+            }, displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '5018c8bf4c60a13541f0872149d12b92f164ca96', ...portalProps }, h("sd-select-v2-listbox", { key: 'b7222f7649a8f096f085840a3dd97b7aa069152c', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
     static get is() { return "sd-select-v2"; }
     static get originalStyleUrls() {
@@ -698,6 +716,66 @@ export class SdSelectV2 {
                 "attribute": "width",
                 "defaultValue": "''"
             },
+            "useSearch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "use-search",
+                "defaultValue": "false"
+            },
+            "allSelectedLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "all-selected-label",
+                "defaultValue": "'\uC804\uCCB4'"
+            },
+            "useSelectAll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "use-select-all",
+                "defaultValue": "false"
+            },
             "name": {
                 "type": "string",
                 "mutable": false,