@sellmate/design-system 1.0.76 → 1.0.77

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;

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

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
-import { LIST_BOX_LAYOUT, SEARCH_THRESHOLD, EMPTY_MESSAGE, countLeaves, filterTree, } from "../sd-select-v2.config";
-export class SdSelectV2Listbox {
+import { LIST_BOX_LAYOUT, SEARCH_THRESHOLD, EMPTY_MESSAGE, countLeaves, filterTree, } from "../sd-select.config";
+export class SdSelectListbox {
     type = 'default';
     options = [];
     value = null;
@@ -160,7 +160,7 @@ export class SdSelectV2Listbox {
     get navigableOptions() {
         const items = [];
         if (this.showSelectAll) {
-            items.push(SdSelectV2Listbox.SELECT_ALL_OPTION);
+            items.push(SdSelectListbox.SELECT_ALL_OPTION);
         }
         const walk = (opts) => {
             for (const opt of opts) {
@@ -176,14 +176,14 @@ export class SdSelectV2Listbox {
         return items;
     }
     isSelectAllOption(option) {
-        return this.showSelectAll && option.value === SdSelectV2Listbox.SELECT_ALL_OPTION.value;
+        return this.showSelectAll && option.value === SdSelectListbox.SELECT_ALL_OPTION.value;
     }
     emitSelectAll() {
         if (!this.showSelectAll)
             return;
         const allLeaves = this.getAllNonDisabledLeaves();
         this.optionSelect.emit({
-            option: { ...SdSelectV2Listbox.SELECT_ALL_OPTION, children: allLeaves },
+            option: { ...SdSelectListbox.SELECT_ALL_OPTION, children: allLeaves },
             leaves: allLeaves,
         });
     }
@@ -290,7 +290,7 @@ export class SdSelectV2Listbox {
      */
     scrollFocusedIntoView() {
         const list = this.listEl;
-        const focusedEl = list?.querySelector('.sd-select-v2-list-item--focused');
+        const focusedEl = list?.querySelector('.sd-select-list-item--focused');
         if (!list || !focusedEl)
             return;
         const listRect = list.getBoundingClientRect();
@@ -336,7 +336,7 @@ export class SdSelectV2Listbox {
         return options.map(option => {
             const isGroup = !!option.children;
             return [
-                h("sd-select-v2-list-item", { option: option, depth: depth, isSelected: isGroup ? this.getGroupSelectionState(option) : this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, countInfo: this.getCountInfo(option), onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) }),
+                h("sd-select-list-item", { option: option, depth: depth, isSelected: isGroup ? this.getGroupSelectionState(option) : this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, countInfo: this.getCountInfo(option), onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) }),
                 isGroup && option.children ? this.renderOptions(option.children, depth + 1) : null,
             ];
         });
@@ -348,20 +348,20 @@ export class SdSelectV2Listbox {
             '--listbox-max-height': this.maxHeight,
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
         };
-        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 => {
+        return (h("div", { key: 'c1582b1bc6058b78a8581511854f0878e7f39a94', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: '4fd2099bf8069f258596479123053a34a41c528d', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: 'ff8643a308b07dbaebf627c7082a37efa6b72a10', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
-            } }, 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) })))))));
+            } }, this.showSelectAll && (h("sd-select-list-item", { key: '30f0cfbc24304af8c704db33d0e51236971226ee', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (h("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (h("sd-select-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 is() { return "sd-select-listbox"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["sd-select-v2-listbox.scss"]
+            "$": ["sd-select-listbox.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["sd-select-v2-listbox.css"]
+            "$": ["sd-select-listbox.css"]
         };
     }
     static get properties() {
@@ -370,14 +370,14 @@ export class SdSelectV2Listbox {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "SelectV2Type",
+                    "original": "SelectType",
                     "resolved": "\"default\" | \"default_depth\" | \"multi\" | \"multi_depth\"",
                     "references": {
-                        "SelectV2Type": {
+                        "SelectType": {
                             "location": "import",
-                            "path": "../sd-select-v2.config",
-                            "id": "src/components/sd-select-v2/sd-select-v2.config.ts::SelectV2Type",
-                            "referenceLocation": "SelectV2Type"
+                            "path": "../sd-select.config",
+                            "id": "src/components/sd-select/sd-select.config.ts::SelectType",
+                            "referenceLocation": "SelectType"
                         }
                     }
                 },
@@ -397,14 +397,14 @@ export class SdSelectV2Listbox {
                 "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"
                         }
                     }
                 },
@@ -422,14 +422,14 @@ export class SdSelectV2Listbox {
                 "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "SelectV2Value",
-                    "resolved": "(string | number)[] | SelectV2Option | SelectV2Option[] | null | number | string",
+                    "original": "SelectValue",
+                    "resolved": "(string | number)[] | SelectOption | SelectOption[] | null | number | string",
                     "references": {
-                        "SelectV2Value": {
+                        "SelectValue": {
                             "location": "import",
-                            "path": "../sd-select-v2.config",
-                            "id": "src/components/sd-select-v2/sd-select-v2.config.ts::SelectV2Value",
-                            "referenceLocation": "SelectV2Value"
+                            "path": "../sd-select.config",
+                            "id": "src/components/sd-select/sd-select.config.ts::SelectValue",
+                            "referenceLocation": "SelectValue"
                         }
                     }
                 },
@@ -586,14 +586,14 @@ export class SdSelectV2Listbox {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "SelectV2OptionSelectDetail",
-                    "resolved": "SelectV2OptionSelectDetail",
+                    "original": "SelectOptionSelectDetail",
+                    "resolved": "SelectOptionSelectDetail",
                     "references": {
-                        "SelectV2OptionSelectDetail": {
+                        "SelectOptionSelectDetail": {
                             "location": "import",
-                            "path": "../sd-select-v2.config",
-                            "id": "src/components/sd-select-v2/sd-select-v2.config.ts::SelectV2OptionSelectDetail",
-                            "referenceLocation": "SelectV2OptionSelectDetail"
+                            "path": "../sd-select.config",
+                            "id": "src/components/sd-select/sd-select.config.ts::SelectOptionSelectDetail",
+                            "referenceLocation": "SelectOptionSelectDetail"
                         }
                     }
                 }

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

@@ -1,9 +1,9 @@
-sd-select-v2-trigger {
+sd-select-trigger {
   display: block;
   width: 100%;
   height: 100%;
 }
-sd-select-v2-trigger .sd-select-v2-trigger {
+sd-select-trigger .sd-select-trigger {
   display: flex;
   width: 100%;
   height: 100%;
@@ -12,10 +12,10 @@ sd-select-v2-trigger .sd-select-v2-trigger {
   overflow: hidden;
   border-radius: 3px;
 }
-sd-select-v2-trigger .sd-select-v2-trigger--disabled {
+sd-select-trigger .sd-select-trigger--disabled {
   cursor: not-allowed;
 }
-sd-select-v2-trigger .sd-select-v2-trigger__content {
+sd-select-trigger .sd-select-trigger__content {
   display: flex;
   align-items: center;
   gap: var(--trigger-gap);
@@ -23,7 +23,7 @@ sd-select-v2-trigger .sd-select-v2-trigger__content {
   padding: 0 var(--trigger-padding-x);
   min-width: 0;
 }
-sd-select-v2-trigger .sd-select-v2-trigger__text {
+sd-select-trigger .sd-select-trigger__text {
   flex: 1;
   font-size: var(--trigger-font-size);
   line-height: var(--trigger-line-height);
@@ -33,10 +33,10 @@ sd-select-v2-trigger .sd-select-v2-trigger__text {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-sd-select-v2-trigger .sd-select-v2-trigger__icon {
+sd-select-trigger .sd-select-trigger__icon {
   flex-shrink: 0;
   transition: transform 0.2s ease;
 }
-sd-select-v2-trigger .sd-select-v2-trigger__icon--open {
+sd-select-trigger .sd-select-trigger__icon--open {
   transform: rotate(180deg);
 }

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

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
-import { SELECT_LAYOUT, SELECT_TYPOGRAPHY, SELECT_COLORS } from "../sd-select-v2.config";
-export class SdSelectV2Trigger {
+import { SELECT_LAYOUT, SELECT_TYPOGRAPHY, SELECT_COLORS } from "../sd-select.config";
+export class SdSelectTrigger {
     displayText = '';
     placeholder = '선택';
     disabled = false;
@@ -42,26 +42,26 @@ export class SdSelectV2Trigger {
                 ? SELECT_COLORS.icon.disabled
                 : SELECT_COLORS.icon.default,
         };
-        return (h("div", { key: 'ec8bf544b2878082a046fbe881afa2369709033f', ref: el => {
+        return (h("div", { key: 'dddccfd47738e104a9c715a0c93df1882d28d704', 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: '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,
+                'sd-select-trigger': true,
+                'sd-select-trigger--open': this.isOpen,
+                'sd-select-trigger--disabled': this.disabled,
+            }, style: cssVars, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: '9f8572c4ec3fa02c9f94bb94a8a10358c4d6b3ae', class: "sd-select-trigger__content" }, h("span", { key: 'a4b5b27fc3a84adbd2e24981742ca45402993afb', class: "sd-select-trigger__text" }, hasValue ? this.displayText : this.placeholder), h("sd-icon", { key: '97bbcda656bae2248ca83fb2bd56373b2dd8dd41', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+                'sd-select-trigger__icon': true,
+                'sd-select-trigger__icon--open': this.isOpen,
             } }))));
     }
-    static get is() { return "sd-select-v2-trigger"; }
+    static get is() { return "sd-select-trigger"; }
     static get originalStyleUrls() {
         return {
-            "$": ["sd-select-v2-trigger.scss"]
+            "$": ["sd-select-trigger.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["sd-select-v2-trigger.css"]
+            "$": ["sd-select-trigger.css"]
         };
     }
     static get properties() {

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

@@ -1,55 +1,11 @@
 sd-select {
   display: inline-flex;
-  flex-flow: column nowrap;
-  height: fit-content;
 }
-sd-select *:focus,
-sd-select *:focus-visible,
-sd-select *:focus-within {
-  outline: none !important;
+sd-select sd-portal {
+  display: none;
 }
 sd-select .sd-select {
-  width: 100%;
-}
-sd-select .sd-select .sd-select__trigger {
-  padding: 4px 28px 4px 12px;
-  display: flex;
+  position: relative;
   width: 100%;
   height: 100%;
-  align-items: center;
-  cursor: pointer;
-}
-.sd-field--disabled sd-select .sd-select .sd-select__trigger {
-  cursor: not-allowed;
-}
-sd-select .sd-select .sd-select__trigger .sd-select__value {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  line-height: 20px;
-  font-size: 12px;
-  font-weight: 400;
-  text-align: left;
-}
-sd-select .sd-select .sd-select__trigger .sd-select__clear {
-  margin: 0 4px;
-  width: 8px;
-  height: 8px;
-  background-color: transparent;
-  outline: none;
-  border: none;
-}
-sd-select .sd-select .sd-select__arrow {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  width: 12px;
-  height: 12px;
-  color: #888888;
-  transition: transform 0.3s ease;
-  margin-left: 8px;
-}
-sd-select .sd-select .sd-select__arrow--open {
-  transform: rotate(180deg);
 }