@sellmate/design-system 1.0.39 → 1.0.41

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

@@ -10,10 +10,12 @@ export class SdInput {
     placeholder = '입력해 주세요.';
     disabled = false;
     clearable = false;
-    width = '100%';
+    width = '';
     rules = [];
     autoFocus = false;
     status;
+    hint = '';
+    errorMessage = '';
     inputClass = '';
     readonly = false;
     error = false;
@@ -27,6 +29,7 @@ export class SdInput {
     //  props - custom styles
     inputStyle = {};
     internalValue = null;
+    passwordVisible = false;
     nativeEl = undefined;
     formField;
     name = nanoid();
@@ -86,7 +89,6 @@ export class SdInput {
     };
     render() {
         const sizeTokens = INPUT_SIZE_MAP[this.size] ?? INPUT_SIZE_MAP.sm;
-        const resolvedWidth = /^\d+$/.test(this.width) ? `${this.width}px` : this.width;
         const cssVars = {
             // sd-input 자체 토큰
             '--sd-input-font-size': `${sizeTokens.fontSize}px`,
@@ -102,10 +104,10 @@ export class SdInput {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (h("sd-field", { key: '3b559e592e3bcc57072eda7b081f6dc42f34813c', name: this.name, label: this.label, addonLabel: this.addonLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: { width: resolvedWidth, ...cssVars } }, h("label", { key: '6da8d8636353f3287c45c85ac75ac0a6202296e9', class: "sd-input__content" }, h("slot", { key: '065e5cb193ba2e3e91380ffd32d9c84854540fe2', name: "prefix" }), h("input", { key: 'c549470eb09eee2605871495f53a271d9978811e', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: 'd3259163d6aa2eef4346afa5f26c4d4ba722bf40', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: 'eaec3486b16a2b19e98e1c0629d8ca8dd284e8e7', name: "close", color: INPUT_COLORS.icon.default, size: INPUT_ICON.iconSize, class: "sd-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: '82adfc401e74a6d823aa4f95442aa74b663e3ee4', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: '6c7a76e6d863cddf4e7ca83d1231255fe5e7edea', class: "sd-input__content" }, h("slot", { key: '14ab01247317f114f92127b6c1c43c42251fa90c', name: "prefix" }), h("input", { key: 'ee546204bc6cfa28f8e42dce6deebdf251dc04da', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '4f52aa176c00462996d8794da1d8fd86c468e132', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '40ab163ef22e68a261e639ec5d8fb3bc1d6cd42a', name: "close", color: INPUT_COLORS.icon.default, size: INPUT_ICON.iconSize, class: "sd-input__clear-icon", onClick: async () => {
                 this.internalValue = '';
                 await this.formField?.sdValidate();
-            } })))));
+            } })), this.type === 'password' && (h("sd-icon", { key: 'd841ed3ca46d065048107b8733c41e63155b0990', name: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', color: INPUT_COLORS.icon.default, size: INPUT_ICON.frameSize, class: "sd-input__password-icon", onClick: () => { this.passwordVisible = !this.passwordVisible; } })))));
     }
     static get is() { return "sd-input"; }
     static get originalStyleUrls() {
@@ -268,11 +270,11 @@ export class SdInput {
                 "defaultValue": "false"
             },
             "width": {
-                "type": "string",
+                "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "string | number",
+                    "resolved": "number | string",
                     "references": {}
                 },
                 "required": false,
@@ -285,7 +287,7 @@ export class SdInput {
                 "setter": false,
                 "reflect": false,
                 "attribute": "width",
-                "defaultValue": "'100%'"
+                "defaultValue": "''"
             },
             "rules": {
                 "type": "unknown",
@@ -351,6 +353,46 @@ export class SdInput {
                 "reflect": false,
                 "attribute": "status"
             },
+            "hint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hint",
+                "defaultValue": "''"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message",
+                "defaultValue": "''"
+            },
             "inputClass": {
                 "type": "string",
                 "mutable": false,
@@ -561,7 +603,8 @@ export class SdInput {
     }
     static get states() {
         return {
-            "internalValue": {}
+            "internalValue": {},
+            "passwordVisible": {}
         };
     }
     static get events() {

package/dist/collection/components/sd-loading-spinner/sd-loading-spinner.js

@@ -6,7 +6,7 @@ export class SdLoadingSpinner {
         return resolveColor(this.color);
     }
     render() {
-        return (h(Fragment, { key: '463ab22264fafc013af7a602066eb8ebed10ac05' }, h("svg", { key: '6b90c0c3448c309813038fb8281b4ed73b1145d3', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, h("circle", { key: 'aa553d712b98c3316c98b7e52b955b7185eaee20', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+        return (h(Fragment, { key: 'debc93482bd2c47f317457fd97ee2bf40b6f3e59' }, h("svg", { key: '915a8e743e9286e32c81b1bf49714da01ba9a1c3', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, h("circle", { key: '04abf57521d77d5492a0e5553a7f64017fe0d1a3', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
     }
     static get is() { return "sd-loading-spinner"; }
     static get originalStyleUrls() {

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

@@ -29,32 +29,6 @@ export class SdModalContainer {
         }
         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.isVisible = true;
         requestAnimationFrame(() => {
             if (this.contentRef) {
                 this.contentRef.appendChild(modalEl);
@@ -119,43 +93,6 @@ export class SdModalContainer {
         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)
@@ -190,7 +127,6 @@ export class SdModalContainer {
         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;
@@ -306,53 +242,16 @@ export class SdModalContainer {
                     "tags": []
                 }
             },
-            "openNotice": {
-                "complexType": {
-                    "signature": "(options: NoticeModalOptions, chain: ModalDialogChainLike) => Promise<string>",
-                    "parameters": [{
-                            "name": "options",
-                            "type": "NoticeModalOptions",
-                            "docs": ""
-                        }, {
-                            "name": "chain",
-                            "type": "ModalDialogChainLike",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "NoticeModalOptions": {
-                            "location": "import",
-                            "path": "./sd-modal-container.config",
-                            "id": "src/components/sd-modal-container/sd-modal-container.config.ts::NoticeModalOptions",
-                            "referenceLocation": "NoticeModalOptions"
-                        },
-                        "ModalDialogChainLike": {
-                            "location": "import",
-                            "path": "./sd-modal-container.config",
-                            "id": "src/components/sd-modal-container/sd-modal-container.config.ts::ModalDialogChainLike",
-                            "referenceLocation": "ModalDialogChainLike"
-                        }
-                    },
-                    "return": "Promise<string>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
             "update": {
                 "complexType": {
-                    "signature": "(id: string, props: Partial<ConfirmModalOptions & NoticeModalOptions>) => Promise<void>",
+                    "signature": "(id: string, props: Partial<ConfirmModalOptions>) => Promise<void>",
                     "parameters": [{
                             "name": "id",
                             "type": "string",
                             "docs": ""
                         }, {
                             "name": "props",
-                            "type": "{ type?: ConfirmModalType | undefined; title?: string | undefined; titleClass?: string | undefined; topMessage?: string[] | undefined; bottomMessage?: string[] | undefined; mainButtonName?: ConfirmModalMainButton | undefined; mainButtonLabel?: string | undefined; subButtonLabel?: string | undefined; tagPreset?: \"square_xs_red\" | \"square_xs_orange\" | \"square_xs_yellow\" | \"square_xs_green\" | \"square_xs_blue\" | \"square_xs_darkblue\" | \"square_xs_indigo\" | \"square_xs_grey\" | \"square_sm_red\" | \"square_sm_orange\" | \"square_sm_yellow\" | \"square_sm_green\" | \"square_sm_blue\" | \"square_sm_darkblue\" | \"square_sm_indigo\" | \"square_sm_grey\" | \"square_md_red\" | \"square_md_orange\" | \"square_md_yellow\" | \"square_md_green\" | \"square_md_blue\" | \"square_md_darkblue\" | \"square_md_indigo\" | \"square_md_grey\" | \"pill_xs_red\" | \"pill_xs_orange\" | \"pill_xs_yellow\" | \"pill_xs_green\" | \"pill_xs_blue\" | \"pill_xs_darkblue\" | \"pill_xs_indigo\" | \"pill_xs_grey\" | \"pill_sm_red\" | \"pill_sm_orange\" | \"pill_sm_yellow\" | \"pill_sm_green\" | \"pill_sm_blue\" | \"pill_sm_darkblue\" | \"pill_sm_indigo\" | \"pill_sm_grey\" | \"pill_md_red\" | \"pill_md_orange\" | \"pill_md_yellow\" | \"pill_md_green\" | \"pill_md_blue\" | \"pill_md_darkblue\" | \"pill_md_indigo\" | \"pill_md_grey\" | undefined; tagLabel?: string | undefined; slotLabel?: string | undefined; tagContents?: HTMLElement | undefined; persistent?: boolean | undefined; }",
+                            "type": "{ type?: ConfirmModalType | undefined; title?: string | undefined; titleClass?: string | undefined; topMessage?: string[] | undefined; bottomMessage?: string[] | undefined; mainButtonName?: ConfirmModalMainButton | undefined; mainButtonLabel?: string | undefined; subButtonLabel?: string | undefined; tagPreset?: \"square_sm_red\" | \"square_sm_orange\" | \"square_sm_yellow\" | \"square_sm_green\" | \"square_sm_blue\" | \"square_sm_darkblue\" | \"square_sm_indigo\" | \"square_sm_grey\" | \"square_md_red\" | \"square_md_orange\" | \"square_md_yellow\" | \"square_md_green\" | \"square_md_blue\" | \"square_md_darkblue\" | \"square_md_indigo\" | \"square_md_grey\" | \"square_xs_red\" | \"square_xs_orange\" | \"square_xs_yellow\" | \"square_xs_green\" | \"square_xs_blue\" | \"square_xs_darkblue\" | \"square_xs_indigo\" | \"square_xs_grey\" | \"pill_sm_red\" | \"pill_sm_orange\" | \"pill_sm_yellow\" | \"pill_sm_green\" | \"pill_sm_blue\" | \"pill_sm_darkblue\" | \"pill_sm_indigo\" | \"pill_sm_grey\" | \"pill_md_red\" | \"pill_md_orange\" | \"pill_md_yellow\" | \"pill_md_green\" | \"pill_md_blue\" | \"pill_md_darkblue\" | \"pill_md_indigo\" | \"pill_md_grey\" | \"pill_xs_red\" | \"pill_xs_orange\" | \"pill_xs_yellow\" | \"pill_xs_green\" | \"pill_xs_blue\" | \"pill_xs_darkblue\" | \"pill_xs_indigo\" | \"pill_xs_grey\" | undefined; tagLabel?: string | undefined; slotLabel?: string | undefined; tagContents?: HTMLElement | undefined; persistent?: boolean | undefined; }",
                             "docs": ""
                         }],
                     "references": {
@@ -369,12 +268,6 @@ export class SdModalContainer {
                             "path": "./sd-modal-container.config",
                             "id": "src/components/sd-modal-container/sd-modal-container.config.ts::ConfirmModalOptions",
                             "referenceLocation": "ConfirmModalOptions"
-                        },
-                        "NoticeModalOptions": {
-                            "location": "import",
-                            "path": "./sd-modal-container.config",
-                            "id": "src/components/sd-modal-container/sd-modal-container.config.ts::NoticeModalOptions",
-                            "referenceLocation": "NoticeModalOptions"
                         }
                     },
                     "return": "Promise<void>"

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

@@ -16,6 +16,8 @@ export class SdNumberInput {
     rules = [];
     autoFocus = false;
     status;
+    hint = '';
+    errorMessage = '';
     inputClass = '';
     readonly = false;
     inputStyle = {};
@@ -240,17 +242,17 @@ export class SdNumberInput {
         const inputStyles = {
             textAlign: this.useButton ? 'center' : 'right',
         };
-        return (h("sd-field", { key: '6e530f1a553adc3dfcf244f9d5119c4c3585105e', name: this.name, label: this.label, addonLabel: this.addonLabel, 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: 'b3c548af3db1c15ef53d4dd1e171a5ba39b638f6', 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: '0857278d2ef0c288bedd90adcea519bdc894417a', 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: '5b58e8dcfb83db649aedb13faf556c9e6e5b5bb6', class: "sd-number-input__buttons" }, h("button", { key: '8cdd4eccb323e1e3974e5de0c99e5a622a36c41e', 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: '0d6d37ebbd7548484e6cf51a2dce962e52e74042', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), h("button", { key: '0da4636adfbd8918a5180d1f5abbc97d16664271', 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: '16d62c22bcbfed3a7098780784b58376700f9a5b', 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() {
@@ -547,6 +549,46 @@ export class SdNumberInput {
                 "reflect": false,
                 "attribute": "status"
             },
+            "hint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hint",
+                "defaultValue": "''"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message",
+                "defaultValue": "''"
+            },
             "inputClass": {
                 "type": "string",
                 "mutable": false,

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

@@ -31,14 +31,14 @@ export class SdPopover {
         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: '0ff8739ff39d53fdc5fb4553c4d8a483b1c089c8' }, 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: 'c2373df5edb583a6027575f9b489f669d7864367', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: 'e86db6af4e6a1fac3c2ed78367bf95038d0e618a', 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: 'b5d9109d520bebc16b9b42e663f595d3287c4c9c', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '4981cc2c7bced0653be487ded749563baa17c068' })), h("div", { key: '9abaac42bed464418fb1bf13891ce26a98d78784', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: '022ba941f74b58dd9221aec89a13aa295810b6da', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: 'c391e3db270e291864f0e10f98501bf00ebc9d05', class: "sd-floating-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: 'ae10feb7e6c1cd98d7ddb3b0527954c2ff89aced', 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: '0fc4fa46086167325c30403eb8f745f4a81a14d6', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '1b8b5c85a77036075a4554645fda2fabb97016a5', name: "close", size: popoverTokens.popover.close.icon, color: popoverTokens.popover.close.color }))))))));
     }
     static get is() { return "sd-popover"; }
     static get originalStyleUrls() {
@@ -118,7 +118,7 @@ export class SdPopover {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrow2Down\" | \"arrow2Left\" | \"arrow2Right\" | \"arrow2Up\" | \"arrow2UpDown\" | \"arrowDown\" | \"arrowLeft\" | \"arrowLeftEnd\" | \"arrowRight\" | \"arrowRightEnd\" | \"arrowUp\" | \"attachFile\" | \"badgeNew\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"cancelFilled\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFilled\" | \"checkOutline\" | \"clockFilled\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"etc\" | \"event\" | \"global\" | \"helpFilled\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageLine\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"notificationFilled\" | \"notificationOutline\" | \"notion\" | \"outLine\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseLine\" | \"warehouseSolid\" | \"warningFilled\" | \"warningOutline\" | \"youtube\"",
+                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrow2Down\" | \"arrow2Left\" | \"arrow2Right\" | \"arrow2Up\" | \"arrow2UpDown\" | \"arrowDown\" | \"arrowLeft\" | \"arrowLeftEnd\" | \"arrowRight\" | \"arrowRightEnd\" | \"arrowUp\" | \"attachFile\" | \"badgeNew\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFilled\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFilled\" | \"checkOutline\" | \"clockFilled\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"etc\" | \"event\" | \"global\" | \"helpFilled\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageLine\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"notificationFilled\" | \"notificationOutline\" | \"notion\" | \"outLine\" | \"pageEdit\" | \"pageEdit2\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseLine\" | \"warehouseSolid\" | \"warningFilled\" | \"warningOutline\" | \"youtube\"",
                     "references": {
                         "IconName": {
                             "location": "global",

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() {