@sellmate/design-system 1.0.75 → 1.0.77

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-number-input/sd-number-input.js

@@ -272,12 +272,12 @@ export class SdNumberInput {
             '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
             '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
         };
-        return (h("sd-field", { key: 'a62a0abbef4e817173d3e627d61c36523c2db81a', 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, status: this.status, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: 'd395366da25ef5ab333e4b314093a89e41519786', class: "sd-number-input__content" }, this.useButton && (h("button", { key: 'eb97c4c29165e6237064bbce54ea2031c756fe12', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '7cd260e4356d320825a75350982174446b40e15c', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+        return (h("sd-field", { key: '7f4012ec048ab69f3c6b241c7fc103fd798572ca', 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, status: this.status, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '975c0800b1fd6e4ab3502fc966db8917fe60bb3e', class: "sd-number-input__content" }, this.useButton && (h("button", { key: 'f2a630109b883740362dd2946ceeeaa93bbfeb36', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'dcd539c5035b1363edacadf7ed9c1096ef24714a', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (h("span", { key: 'a25c707b127f63239dbb92be5e9d569e1be58005', class: "sd-number-input__prefix" }, this.inputPrefix)), h("input", { key: '0dc0864a4434122a717041028c732aa5d370f65c', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${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, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
+                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (h("span", { key: '5acf113c5e60dd5f77fb1206a60d4b5ce14e2b7f', class: "sd-number-input__prefix" }, this.inputPrefix)), h("input", { key: '5dd0f9ba9643fce07de811b2a93c8763a3d84b2c', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${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, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
                 textAlign: this.useButton ? 'center' : 'right',
                 ...this.inputStyle,
-            } }), this.inputSuffix && (h("span", { key: 'd31337cdacceb84ee6347a2c38210ad491667d2c', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (h("button", { key: '217fcbc2b75e76adb0ed969a719e632b5eb74b27', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '48ff6d0417aadcd975a6863a0003e63ca525cdfd', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && (h("span", { key: 'aa7e4dbb29d7e8de4e94f0411f2f4b622411a60a', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (h("button", { key: '40deeadfcfe87cb61f09ee2959b6afb5757ff56b', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: 'b8ffcbbf663bacb7249e696d3eabf8b9ac832ddc', name: "add", size: iconSize, color: this.isIncrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
                 : NUMBER_INPUT_STEPPER.icon.default }))))));
     }

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

@@ -83,13 +83,13 @@ export class SdPagination {
             '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
             '--sd-pagination-item-width': `${this.buttonWidth}px`,
         };
-        return (h("div", { key: '386fdd2d1c0b5a7284c299201f19fd3384670ab1', class: {
+        return (h("div", { key: 'e648886fbec4723b7be767d9e1bfc04004cca234', class: {
                 'sd-pagination': true,
                 'sd-pagination--simple': this.simple,
-            }, style: cssVars }, h("div", { key: 'cd73997ae59f87b70c31e88fd5b4246bd6044bd0', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "sd-pagination__info" }, h("span", { class: "sd-pagination__current" }, this.currentPage), h("span", { class: "sd-pagination__divider" }, "/"), h("span", { class: "sd-pagination__last" }, this.lastPage))) : (h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+            }, style: cssVars }, h("div", { key: '43ff8b8f6682c4d2b70c5085a6d3199de1d01596', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "sd-pagination__info" }, h("span", { class: "sd-pagination__current" }, this.currentPage), h("span", { class: "sd-pagination__divider" }, "/"), h("span", { class: "sd-pagination__last" }, this.lastPage))) : (h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'sd-pagination__item': true,
                 'sd-pagination__item--selected': this.currentPage === n,
-            }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: '86389ea83d2965efdd938d2f9b2e2c3469f05fe8', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: '1975d14028485438a728b23d717abfcde8722fcf', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
     }
     static get is() { return "sd-pagination"; }
     static get originalStyleUrls() {

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

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

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-list-item/sd-select-v2-list-item.css → sd-select/sd-select-list-item/sd-select-list-item.css}

@@ -1,7 +1,7 @@
-sd-select-v2-list-item {
+sd-select-list-item {
   display: block;
 }
-sd-select-v2-list-item .sd-select-v2-list-item {
+sd-select-list-item .sd-select-list-item {
   display: flex;
   align-items: center;
   gap: var(--list-item-gap);
@@ -14,46 +14,46 @@ sd-select-v2-list-item .sd-select-v2-list-item {
   cursor: default;
   user-select: none;
 }
-sd-select-v2-list-item .sd-select-v2-list-item--selectable {
+sd-select-list-item .sd-select-list-item--selectable {
   cursor: pointer;
 }
-sd-select-v2-list-item .sd-select-v2-list-item--depth1-group {
+sd-select-list-item .sd-select-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 {
+sd-select-list-item .sd-select-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) {
+sd-select-list-item .sd-select-list-item--focused.sd-select-list-item--selectable:not(.sd-select-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) {
+sd-select-list-item .sd-select-list-item--selected:not(.sd-select-list-item--group) {
   font-weight: var(--list-item-font-weight-selected);
   color: var(--list-item-color-selected);
 }
-sd-select-v2-list-item .sd-select-v2-list-item--selected.sd-select-v2-list-item--focused {
+sd-select-list-item .sd-select-list-item--selected.sd-select-list-item--focused {
   color: var(--list-item-color-hover);
 }
-sd-select-v2-list-item .sd-select-v2-list-item--disabled {
+sd-select-list-item .sd-select-list-item--disabled {
   color: var(--list-item-color-disabled);
   cursor: not-allowed;
 }
-sd-select-v2-list-item .sd-select-v2-list-item__label {
+sd-select-list-item .sd-select-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 {
+sd-select-list-item .sd-select-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 {
+sd-select-list-item .sd-select-list-item--group.sd-select-list-item--focused .sd-select-list-item__count {
   color: #ffffff;
 }
-sd-select-v2-list-item .sd-select-v2-list-item__checkbox {
+sd-select-list-item .sd-select-list-item__checkbox {
   flex-shrink: 0;
 }

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

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
-import { LIST_ITEM_LAYOUT, LIST_ITEM_TYPOGRAPHY, LIST_ITEM_COLORS, } from "../sd-select-v2.config";
-export class SdSelectV2ListItem {
+import { LIST_ITEM_LAYOUT, LIST_ITEM_TYPOGRAPHY, LIST_ITEM_COLORS, } from "../sd-select.config";
+export class SdSelectListItem {
     option;
     depth = 1;
     isSelected = false;
@@ -66,27 +66,27 @@ 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: '62974a8d1442730ca752b3fc11f151c4a5be4ad1', class: {
-                'sd-select-v2-list-item': true,
-                'sd-select-v2-list-item--group': isGroup,
-                'sd-select-v2-list-item--depth1-group': isDepth1Group,
-                'sd-select-v2-list-item--depth2-group': isDepth2Group,
-                'sd-select-v2-list-item--selected': this.isSelected === true,
-                'sd-select-v2-list-item--indeterminate': this.isSelected === null,
-                '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: 'cf29df3617e45f3b9415b8da1beed7ba5918b8cd', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-v2-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), h("span", { key: '478e566c74c0078ef72b90d836f67156e905bbac', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (h("span", { key: '0cde990cb1fff4898581c8c7d321c8669dfac226', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+        return (h("div", { key: 'c6f959e9290213c9003914dbdd696c3c339cce51', class: {
+                'sd-select-list-item': true,
+                'sd-select-list-item--group': isGroup,
+                'sd-select-list-item--depth1-group': isDepth1Group,
+                'sd-select-list-item--depth2-group': isDepth2Group,
+                'sd-select-list-item--selected': this.isSelected === true,
+                'sd-select-list-item--indeterminate': this.isSelected === null,
+                'sd-select-list-item--focused': this.isFocused,
+                'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
+                'sd-select-list-item--disabled': !!this.option.disabled,
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: 'a884bd82722cd45efc19abd2139d08596f7eda86', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), h("span", { key: '9aacbeca13e591406454ef7e1c7be40a56a2926b', class: "sd-select-list-item__label" }, this.option.label), this.countInfo && (h("span", { key: '76be4eda3799cfa329016c2ea636feaf624e5025', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
-    static get is() { return "sd-select-v2-list-item"; }
+    static get is() { return "sd-select-list-item"; }
     static get originalStyleUrls() {
         return {
-            "$": ["sd-select-v2-list-item.scss"]
+            "$": ["sd-select-list-item.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["sd-select-v2-list-item.css"]
+            "$": ["sd-select-list-item.css"]
         };
     }
     static get properties() {
@@ -95,14 +95,14 @@ export class SdSelectV2ListItem {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "SelectV2Option",
-                    "resolved": "SelectV2Option",
+                    "original": "SelectOption",
+                    "resolved": "SelectOption",
                     "references": {
-                        "SelectV2Option": {
+                        "SelectOption": {
                             "location": "import",
-                            "path": "../sd-select-v2.config",
-                            "id": "src/components/sd-select-v2/sd-select-v2.config.ts::SelectV2Option",
-                            "referenceLocation": "SelectV2Option"
+                            "path": "../sd-select.config",
+                            "id": "src/components/sd-select/sd-select.config.ts::SelectOption",
+                            "referenceLocation": "SelectOption"
                         }
                     }
                 },
@@ -226,14 +226,14 @@ export class SdSelectV2ListItem {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "SelectV2Option",
-                    "resolved": "SelectV2Option",
+                    "original": "SelectOption",
+                    "resolved": "SelectOption",
                     "references": {
-                        "SelectV2Option": {
+                        "SelectOption": {
                             "location": "import",
-                            "path": "../sd-select-v2.config",
-                            "id": "src/components/sd-select-v2/sd-select-v2.config.ts::SelectV2Option",
-                            "referenceLocation": "SelectV2Option"
+                            "path": "../sd-select.config",
+                            "id": "src/components/sd-select/sd-select.config.ts::SelectOption",
+                            "referenceLocation": "SelectOption"
                         }
                     }
                 }

package/dist/collection/components/{sd-select-v2/sd-select-v2-list-item-search/sd-select-v2-list-item-search.css → sd-select/sd-select-list-item-search/sd-select-list-item-search.css}

@@ -1,17 +1,17 @@
-sd-select-v2-list-item-search {
+sd-select-list-item-search {
   display: block;
 }
-sd-select-v2-list-item-search .sd-select-v2-list-item-search {
+sd-select-list-item-search .sd-select-list-item-search {
   padding: 4px 8px;
   position: sticky;
   top: 0;
   z-index: 1;
   background: white;
 }
-sd-select-v2-list-item-search .sd-select-v2-list-item-search--scrolled {
+sd-select-list-item-search .sd-select-list-item-search--scrolled {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
 }
-sd-select-v2-list-item-search .sd-select-v2-list-item-search__inner {
+sd-select-list-item-search .sd-select-list-item-search__inner {
   display: flex;
   align-items: center;
   gap: 6px;
@@ -20,13 +20,13 @@ sd-select-v2-list-item-search .sd-select-v2-list-item-search__inner {
   border-radius: 4px;
   background: white;
 }
-sd-select-v2-list-item-search .sd-select-v2-list-item-search__inner:focus-within {
+sd-select-list-item-search .sd-select-list-item-search__inner:focus-within {
   border-color: #0075FF;
 }
-sd-select-v2-list-item-search .sd-select-v2-list-item-search__icon {
+sd-select-list-item-search .sd-select-list-item-search__icon {
   flex-shrink: 0;
 }
-sd-select-v2-list-item-search .sd-select-v2-list-item-search__input {
+sd-select-list-item-search .sd-select-list-item-search__input {
   flex: 1;
   border: none;
   outline: none;
@@ -36,10 +36,10 @@ sd-select-v2-list-item-search .sd-select-v2-list-item-search__input {
   background: transparent;
   min-width: 0;
 }
-sd-select-v2-list-item-search .sd-select-v2-list-item-search__input::placeholder {
+sd-select-list-item-search .sd-select-list-item-search__input::placeholder {
   color: #AAAAAA;
 }
-sd-select-v2-list-item-search .sd-select-v2-list-item-search__clear {
+sd-select-list-item-search .sd-select-list-item-search__clear {
   flex-shrink: 0;
   display: flex;
   align-items: center;
@@ -50,10 +50,10 @@ sd-select-v2-list-item-search .sd-select-v2-list-item-search__clear {
   cursor: pointer;
   border-radius: 2px;
 }
-sd-select-v2-list-item-search .sd-select-v2-list-item-search__clear:hover {
+sd-select-list-item-search .sd-select-list-item-search__clear:hover {
   background: #F0F0F0;
 }
-sd-select-v2-list-item-search .sd-select-v2-list-item-search__clear--hidden {
+sd-select-list-item-search .sd-select-list-item-search__clear--hidden {
   visibility: hidden;
   pointer-events: none;
 }

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

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
-import { SEARCH_DEBOUNCE_MS } from "../sd-select-v2.config";
-export class SdSelectV2ListItemSearch {
+import { SEARCH_DEBOUNCE_MS } from "../sd-select.config";
+export class SdSelectListItemSearch {
     isScrolled = false;
     searchText = '';
     searchFilter;
@@ -41,25 +41,25 @@ export class SdSelectV2ListItemSearch {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (h("div", { key: '75c6b01fbe256bca732553a27711fa7197535688', class: {
-                'sd-select-v2-list-item-search': true,
-                'sd-select-v2-list-item-search--scrolled': this.isScrolled,
-            } }, h("div", { key: 'b66cd053b89942f3de55feecdd0eee79b863eb0d', class: "sd-select-v2-list-item-search__inner" }, h("sd-icon", { key: 'bed6f00452187d1087b6bb4653c04e8babeaa277', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), h("input", { key: '4c29192547fcf9ec2563b7d843b8e77a3eb900b1', ref: el => {
+        return (h("div", { key: '139aa74cb44baef15a5a75008dd291f11ad2965b', class: {
+                'sd-select-list-item-search': true,
+                'sd-select-list-item-search--scrolled': this.isScrolled,
+            } }, h("div", { key: '2df6559c3a0e769e50e72ef06828adcf595fc433', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: '20dfe4a309c7879bcdd1e5890f183a9e1eb98fae', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: '825724eedf71693ce39a21f413c5a4eb6f1495e3', ref: el => {
                 this.inputEl = el;
-            }, type: "text", class: "sd-select-v2-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), h("button", { key: '55f94ce6eb29cec10897259b894c3460d766268e', type: "button", class: {
-                'sd-select-v2-list-item-search__clear': true,
-                'sd-select-v2-list-item-search__clear--hidden': !this.searchText,
-            }, onClick: this.handleClear, tabindex: this.searchText ? 0 : -1, "aria-hidden": this.searchText ? 'false' : 'true' }, h("sd-icon", { key: 'a7332ec5ecebf522797bb6db1fdc385c0dfa1abe', name: "close", size: 12, color: "#888888" })))));
+            }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), h("button", { key: '20fb0c745d423b008f482a2e33e7e711ea40b5df', type: "button", class: {
+                'sd-select-list-item-search__clear': true,
+                'sd-select-list-item-search__clear--hidden': !this.searchText,
+            }, onClick: this.handleClear, tabindex: this.searchText ? 0 : -1, "aria-hidden": this.searchText ? 'false' : 'true' }, h("sd-icon", { key: 'ce6e4f9b5281ebb767d6542a223e425660ec01c9', name: "close", size: 12, color: "#888888" })))));
     }
-    static get is() { return "sd-select-v2-list-item-search"; }
+    static get is() { return "sd-select-list-item-search"; }
     static get originalStyleUrls() {
         return {
-            "$": ["sd-select-v2-list-item-search.scss"]
+            "$": ["sd-select-list-item-search.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["sd-select-v2-list-item-search.css"]
+            "$": ["sd-select-list-item-search.css"]
         };
     }
     static get properties() {

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

@@ -1,7 +1,7 @@
 :host {
   display: block;
 }
-:host .sd-select-v2-listbox {
+:host .sd-select-listbox {
   display: flex;
   flex-direction: column;
   width: var(--listbox-trigger-width);
@@ -13,13 +13,13 @@
   overflow: hidden;
   outline: none;
 }
-:host .sd-select-v2-listbox__list {
+:host .sd-select-listbox__list {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
   padding-bottom: 0;
 }
-:host .sd-select-v2-listbox__empty {
+:host .sd-select-listbox__empty {
   padding: 12px;
   text-align: center;
   font-size: 12px;