@sellmate/design-system 1.0.76 → 1.0.77

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

@@ -1,169 +1,268 @@
 import { h, } from "@stencil/core";
-import { BaseDropdownEvent } from "../../utils/base-dropdown-event";
-import { SelectKeyboardNavigation } from "../../utils/select-keyboard-navigation";
 import { nanoid } from "nanoid/non-secure";
-/**
- * @deprecated sd-select-v2를 사용하세요.
- */
-export class SdSelect extends BaseDropdownEvent {
-    constructor() {
-        super();
-    }
+export class SdSelect {
+    static VIEWPORT_PADDING = 20;
+    static PORTAL_OFFSET_Y = 4;
+    static CLOSE_ANIMATION_DURATION = 150;
     el;
-    // props
+    type = 'default';
     value = null;
     options = [];
     placeholder = '선택';
-    optionPlaceholder = '선택지가 없습니다.';
-    width = '200px';
+    maxDropdownWidth = '640px';
     dropdownHeight = '260px';
-    autoFocus = false;
     disabled = false;
-    clearable = false;
-    searchable = false;
-    // props - label
     label = '';
     labelWidth = '';
     addonLabel = '';
     addonAlign = 'start';
+    error = false;
+    hint = '';
+    errorMessage = '';
+    rules = [];
     icon = undefined;
     labelTooltip = '';
     labelTooltipProps = null;
-    // props - form
-    rules = [];
-    error = false;
-    // props - custom slots
-    optionRenderer;
-    // states
+    emitValue = false;
+    width = '';
+    useSearch = false;
+    allSelectedLabel = '전체';
+    useSelectAll = false;
     isOpen = false;
-    itemIndex = -1;
-    isScrolled = false;
-    // events
+    isAnimatingOut = false;
+    triggerWidth = '200px';
+    resolvedDropdownHeight = '260px';
+    resolvedMaxDropdownWidth = '640px';
+    focused = false;
+    hovered = false;
     update;
     dropDownShow;
-    selectRef;
-    triggerRef;
-    formField;
-    filteredOptions = [];
-    dropDownWidth = '200px';
-    name = nanoid();
+    async sdFocus() {
+        if (this.disabled)
+            return;
+        await this.triggerComponentRef?.sdFocus();
+    }
     async sdOpen() {
+        // sdFocus 직후 호출 시 트리거 ref/레이아웃이 안정될 때까지 한 틱 대기
+        await new Promise(resolve => setTimeout(resolve, 0));
+        if (this.disabled || this.isOpen)
+            return;
+        this.prepareDropdownGeometry();
+        if (this.closeAnimationTimer)
+            clearTimeout(this.closeAnimationTimer);
+        this.isAnimatingOut = false;
         this.isOpen = true;
     }
-    async sdValidate() {
-        this.formField?.sdValidate();
-    }
-    async sdReset() {
-        this.formField?.sdReset();
-    }
-    async sdResetValidate() {
-        this.formField?.sdResetValidation();
+    triggerRef;
+    triggerComponentRef;
+    closeAnimationTimer;
+    name = nanoid();
+    triggerHasFocus = false;
+    watchIsOpen(newValue) {
+        this.syncFocusedState(newValue);
+        this.dropDownShow.emit({ isOpen: newValue });
     }
-    async sdFocus() {
-        this.formField?.sdFocus();
+    get isMulti() {
+        return this.type === 'multi' || this.type === 'multi_depth';
     }
-    async isOpenChanged() {
-        // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지
-        this.onDropdownToggle(this.isOpen);
-        this.dropDownShow?.emit({ isOpen: this.isOpen });
-        if (this.isOpen === false) {
-            await this.formField?.sdValidate();
+    get displayText() {
+        if (this.isMulti) {
+            if (!Array.isArray(this.value) || this.value.length === 0)
+                return '';
+            const nonDisabledLeaves = this.getNonDisabledLeaves(this.options);
+            const selected = this.getSelectedOptions();
+            const allSelected = nonDisabledLeaves.length > 0 &&
+                nonDisabledLeaves.every(leaf => selected.some(s => s.value === leaf.value));
+            if (allSelected)
+                return this.allSelectedLabel ?? '전체';
+            const flat = this.flattenOptions(this.options);
+            return this.value
+                .map(item => {
+                if (item != null && typeof item === 'object') {
+                    const opt = item;
+                    return opt.label ?? flat.find(o => o.value === opt.value)?.label ?? '';
+                }
+                return flat.find(o => o.value === item)?.label ?? '';
+            })
+                .filter(Boolean)
+                .join(', ');
+        }
+        if (this.value == null)
+            return '';
+        if (!this.emitValue && typeof this.value === 'object' && !Array.isArray(this.value)) {
+            return this.value.label ?? '';
         }
+        const flat = this.flattenOptions(this.options);
+        const found = flat.find(o => o.value === this.value);
+        return found?.label ?? '';
     }
-    componentWillLoad() {
-        this.filteredOptions = this.options;
-        this.dropDownWidth = this.width;
-        this.initializeEvent();
+    flattenOptions(options) {
+        return options.flatMap(o => (o.children ? this.flattenOptions(o.children) : [o]));
     }
-    componentDidLoad() {
-        if (this.autoFocus) {
-            this.selectRef?.focus();
+    getNonDisabledLeaves(options) {
+        return options.flatMap(o => {
+            if (o.disabled)
+                return [];
+            if (o.children)
+                return this.getNonDisabledLeaves(o.children);
+            return [o];
+        });
+    }
+    getSelectedOptions() {
+        const val = this.value;
+        if (!val || !Array.isArray(val))
+            return [];
+        if (this.emitValue) {
+            return val
+                .map(v => this.findOriginalOption(v, this.options))
+                .filter((o) => !!o);
         }
+        return val;
     }
-    // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정
-    componentDidRender() {
-        const trigger = this.triggerRef;
-        const rect = trigger?.getBoundingClientRect();
-        this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;
+    toMultiValue(options) {
+        return this.emitValue ? options.map(o => o.value) : options;
     }
-    disconnectedCallback() {
-        this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리
+    parsePixelValue(value, fallback) {
+        const parsed = Number.parseFloat(value);
+        return Number.isFinite(parsed) ? parsed : fallback;
     }
-    handleDocumentClick(event) {
-        if (!this.selectRef?.contains(event.target)) {
-            this.isOpen = false;
-        }
+    updateDropdownViewportConstraints() {
+        if (!this.triggerRef)
+            return;
+        const triggerRect = this.triggerRef.getBoundingClientRect();
+        const viewportPadding = SdSelect.VIEWPORT_PADDING;
+        const offsetY = SdSelect.PORTAL_OFFSET_Y;
+        const preferredHeight = this.parsePixelValue(this.dropdownHeight, 260);
+        const preferredWidth = this.parsePixelValue(this.maxDropdownWidth, 640);
+        const availableBelow = Math.max(window.innerHeight - triggerRect.bottom - viewportPadding - offsetY, 0);
+        const availableAbove = Math.max(triggerRect.top - viewportPadding - offsetY, 0);
+        const availableHeight = Math.max(availableBelow, availableAbove);
+        const availableWidth = Math.max(window.innerWidth - viewportPadding * 2, 0);
+        this.resolvedDropdownHeight = `${Math.min(preferredHeight, availableHeight)}px`;
+        this.resolvedMaxDropdownWidth = `${Math.min(preferredWidth, availableWidth)}px`;
     }
-    handleDocumentKeydown(keyboardEvent) {
-        keyboardEvent.stopPropagation();
-        const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
-        if (!targetKey.includes(keyboardEvent.key))
+    handleViewportResize = () => {
+        if (!this.isOpen)
             return;
-        keyboardEvent.preventDefault();
-        switch (keyboardEvent.key) {
-            case 'ArrowDown':
-            case 'ArrowUp':
-                const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);
-                const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);
-                this.itemIndex = nextIndex;
-                break;
-            case 'Enter':
-                const selectedOption = this.filteredOptions[this.itemIndex];
-                if (selectedOption && !selectedOption.disabled) {
-                    this.value = selectedOption.value;
-                    this.isOpen = false;
-                }
-                break;
-            case 'Escape':
-                this.isOpen = false;
-                break;
+        this.updateDropdownViewportConstraints();
+    };
+    findOriginalOption(value, options) {
+        for (const opt of options) {
+            if (opt.value === value)
+                return opt;
+            if (opt.children) {
+                const found = this.findOriginalOption(value, opt.children);
+                if (found)
+                    return found;
+            }
         }
-    }
-    getSelectedOption() {
-        return this.options.find(option => option.value === this.value);
+        return undefined;
     }
     closeDropdown() {
+        if (!this.isOpen)
+            return;
         this.isOpen = false;
+        this.isAnimatingOut = true;
+        if (this.closeAnimationTimer)
+            clearTimeout(this.closeAnimationTimer);
+        this.closeAnimationTimer = setTimeout(() => {
+            this.isAnimatingOut = false;
+        }, SdSelect.CLOSE_ANIMATION_DURATION);
     }
-    handleTriggerClick = (event) => {
-        event.stopPropagation();
-        if (!this.disabled) {
-            this.isOpen = !this.isOpen;
-            this.dropDownShow?.emit({ isOpen: this.isOpen });
+    prepareDropdownGeometry() {
+        if (this.triggerRef) {
+            this.triggerWidth = `${this.triggerRef.offsetWidth}px`;
         }
+        this.updateDropdownViewportConstraints();
+    }
+    syncFocusedState(isOpen = this.isOpen) {
+        this.focused = isOpen || this.triggerHasFocus;
+    }
+    handleTriggerFocus = () => {
+        this.triggerHasFocus = true;
+        this.syncFocusedState();
+    };
+    handleTriggerBlur = () => {
+        this.triggerHasFocus = false;
+        this.syncFocusedState();
     };
-    handleOptionClick = (detail) => {
-        const { option, event } = detail;
-        event.stopPropagation();
-        if (!option.disabled) {
-            this.value = option.value;
-            this.isOpen = false;
-            const selectedOption = this.getSelectedOption();
-            this.update?.emit({ value: selectedOption?.value || null, option: selectedOption || null });
+    handleTriggerClick = () => {
+        if (this.isOpen) {
+            this.closeDropdown();
+            return;
         }
+        this.prepareDropdownGeometry();
+        if (this.closeAnimationTimer)
+            clearTimeout(this.closeAnimationTimer);
+        this.isAnimatingOut = false;
+        this.isOpen = true;
     };
-    render() {
-        return (h("sd-field", { key: '28b4667a386236c2486af08f636ede3dc6c41f91', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, addonAlign: this.addonAlign, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: 'ccee78ca4a773c521634e4054ce3b3d8e9713362', class: {
-                'sd-select': true,
-                'sd-select--disabled': this.disabled,
-                'sd-select--error': !!this.error,
-                'sd-select--label': !!this.label,
-            }, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
+    emitUpdate(value) {
+        this.update.emit(value);
     }
-    renderTrigger() {
-        const selectedOption = this.getSelectedOption();
-        return (h("div", { class: "sd-select__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, ref: el => (this.triggerRef = el) }, h("span", { class: "sd-select__value" }, selectedOption ? selectedOption.label : this.placeholder), this.clearable && selectedOption && !this.disabled && (h("sd-icon", { key: "clear-icon", name: "close", size: 10, color: "#888", class: "sd-select__clear", onClick: async (event) => {
-                event.stopPropagation();
-                this.value = null;
-                await this.formField?.sdValidate();
-            } })), h("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: { 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen } })));
+    handleOptionSelect = (detail) => {
+        const { option, leaves } = detail;
+        if (this.isMulti) {
+            this.handleMultiSelect(option, leaves);
+        }
+        else {
+            this.closeDropdown();
+            this.value = this.emitValue ? option.value : option;
+            const nextValue = this.value;
+            requestAnimationFrame(() => {
+                this.emitUpdate(nextValue);
+            });
+        }
+    };
+    handleMultiSelect(option, leaves) {
+        const selected = this.getSelectedOptions();
+        const isGroup = !!option.children;
+        let newSelected;
+        if (isGroup) {
+            const allSelected = leaves.every(l => selected.some(s => s.value === l.value));
+            if (allSelected) {
+                const leafValues = new Set(leaves.map(l => l.value));
+                newSelected = selected.filter(s => !leafValues.has(s.value));
+            }
+            else {
+                const existing = new Set(selected.map(s => s.value));
+                const toAdd = leaves.filter(l => !existing.has(l.value));
+                newSelected = [...selected, ...toAdd];
+            }
+        }
+        else {
+            const exists = selected.some(s => s.value === option.value);
+            newSelected = exists ? selected.filter(s => s.value !== option.value) : [...selected, option];
+        }
+        this.value = this.toMultiValue(newSelected);
+        this.emitUpdate(this.value);
     }
-    renderDropdown() {
-        if (this.isOpen === false)
-            return null;
-        const parentRef = (this.selectRef?.querySelector('.sd-select__trigger') ||
-            this.selectRef);
-        return (h("sd-portal", { open: this.isOpen, parentRef: parentRef, onSdClose: this.closeDropdown }, h("sd-select-dropdown", { value: this.value, options: this.options, itemIndex: this.itemIndex, width: this.dropDownWidth, dropdownHeight: this.dropdownHeight, searchable: this.searchable, optionPlaceholder: this.optionPlaceholder, onSdOptionClick: ({ detail }) => this.handleOptionClick(detail), onSdOptionFiltered: ({ detail }) => (this.filteredOptions = detail) })));
+    connectedCallback() {
+        window.addEventListener('resize', this.handleViewportResize);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.handleViewportResize);
+        if (this.closeAnimationTimer)
+            clearTimeout(this.closeAnimationTimer);
+    }
+    render() {
+        const portalProps = {
+            open: this.isOpen,
+            parentRef: this.triggerRef,
+            viewportPadding: SdSelect.VIEWPORT_PADDING,
+            onSdClose: () => {
+                this.closeDropdown();
+            },
+        };
+        return (h("sd-field", { key: '76625e332090d20e2f66159bba5ee1b9a11320a6', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
+                this.hovered = true;
+            }, onMouseLeave: () => {
+                this.hovered = false;
+            } }, h("div", { key: '8a0ae8a5e05459128409dbe21779f5e3d91b3a04', class: "sd-select", ref: el => {
+                this.triggerRef = el;
+            } }, h("sd-select-trigger", { key: '6b47231914655a8e197e3b38cd8e37c5214efc17', ref: el => {
+                this.triggerComponentRef = el;
+            }, displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: 'eaed402d276cc94a1324ede9cbf09bc436f8a1db', ...portalProps }, h("sd-select-listbox", { key: 'a96f75e06d974c8fd88ac72f083fe4b0ef424a0b', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
     static get is() { return "sd-select"; }
     static get originalStyleUrls() {
@@ -178,13 +277,47 @@ export class SdSelect extends BaseDropdownEvent {
     }
     static get properties() {
         return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SelectType",
+                    "resolved": "\"default\" | \"default_depth\" | \"multi\" | \"multi_depth\"",
+                    "references": {
+                        "SelectType": {
+                            "location": "import",
+                            "path": "./sd-select.config",
+                            "id": "src/components/sd-select/sd-select.config.ts::SelectType",
+                            "referenceLocation": "SelectType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'default'"
+            },
             "value": {
                 "type": "any",
                 "mutable": true,
                 "complexType": {
-                    "original": "string | number | null",
-                    "resolved": "null | number | string",
-                    "references": {}
+                    "original": "SelectValue",
+                    "resolved": "(string | number)[] | SelectOption | SelectOption[] | null | number | string",
+                    "references": {
+                        "SelectValue": {
+                            "location": "import",
+                            "path": "./sd-select.config",
+                            "id": "src/components/sd-select/sd-select.config.ts::SelectValue",
+                            "referenceLocation": "SelectValue"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -200,15 +333,16 @@ export class SdSelect extends BaseDropdownEvent {
             },
             "options": {
                 "type": "unknown",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "SelectOption[]",
                     "resolved": "SelectOption[]",
                     "references": {
                         "SelectOption": {
-                            "location": "local",
-                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-select/sd-select.tsx",
-                            "id": "src/components/sd-select/sd-select.tsx::SelectOption"
+                            "location": "import",
+                            "path": "./sd-select.config",
+                            "id": "src/components/sd-select/sd-select.config.ts::SelectOption",
+                            "referenceLocation": "SelectOption"
                         }
                     }
                 },
@@ -242,7 +376,7 @@ export class SdSelect extends BaseDropdownEvent {
                 "attribute": "placeholder",
                 "defaultValue": "'\uC120\uD0DD'"
             },
-            "optionPlaceholder": {
+            "maxDropdownWidth": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -259,10 +393,10 @@ export class SdSelect extends BaseDropdownEvent {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "option-placeholder",
-                "defaultValue": "'\uC120\uD0DD\uC9C0\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.'"
+                "attribute": "max-dropdown-width",
+                "defaultValue": "'640px'"
             },
-            "width": {
+            "dropdownHeight": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -279,15 +413,15 @@ export class SdSelect extends BaseDropdownEvent {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "width",
-                "defaultValue": "'200px'"
+                "attribute": "dropdown-height",
+                "defaultValue": "'260px'"
             },
-            "dropdownHeight": {
-                "type": "string",
+            "disabled": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
@@ -299,15 +433,15 @@ export class SdSelect extends BaseDropdownEvent {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "dropdown-height",
-                "defaultValue": "'260px'"
+                "attribute": "disabled",
+                "defaultValue": "false"
             },
-            "autoFocus": {
-                "type": "boolean",
+            "label": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -319,15 +453,15 @@ export class SdSelect extends BaseDropdownEvent {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "auto-focus",
-                "defaultValue": "false"
+                "attribute": "label",
+                "defaultValue": "''"
             },
-            "disabled": {
-                "type": "boolean",
+            "labelWidth": {
+                "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string | number",
+                    "resolved": "number | string",
                     "references": {}
                 },
                 "required": false,
@@ -339,15 +473,15 @@ export class SdSelect extends BaseDropdownEvent {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
+                "attribute": "label-width",
+                "defaultValue": "''"
             },
-            "clearable": {
-                "type": "boolean",
+            "addonLabel": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -359,16 +493,23 @@ export class SdSelect extends BaseDropdownEvent {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "clearable",
-                "defaultValue": "false"
+                "attribute": "addon-label",
+                "defaultValue": "''"
             },
-            "searchable": {
-                "type": "boolean",
+            "addonAlign": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "FieldAddonAlign",
+                    "resolved": "\"center\" | \"end\" | \"start\"",
+                    "references": {
+                        "FieldAddonAlign": {
+                            "location": "import",
+                            "path": "../sd-field/sd-field.config",
+                            "id": "src/components/sd-field/sd-field.config.ts::FieldAddonAlign",
+                            "referenceLocation": "FieldAddonAlign"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -379,15 +520,15 @@ export class SdSelect extends BaseDropdownEvent {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "searchable",
-                "defaultValue": "false"
+                "attribute": "addon-align",
+                "defaultValue": "'start'"
             },
-            "label": {
-                "type": "string",
-                "mutable": false,
+            "error": {
+                "type": "boolean",
+                "mutable": true,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
@@ -399,15 +540,15 @@ export class SdSelect extends BaseDropdownEvent {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "label",
-                "defaultValue": "''"
+                "attribute": "error",
+                "defaultValue": "false"
             },
-            "labelWidth": {
-                "type": "any",
+            "hint": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | number",
-                    "resolved": "number | string",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -419,10 +560,10 @@ export class SdSelect extends BaseDropdownEvent {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "label-width",
+                "attribute": "hint",
                 "defaultValue": "''"
             },
-            "addonLabel": {
+            "errorMessage": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -439,35 +580,33 @@ export class SdSelect extends BaseDropdownEvent {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "addon-label",
+                "attribute": "error-message",
                 "defaultValue": "''"
             },
-            "addonAlign": {
-                "type": "string",
+            "rules": {
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "FieldAddonAlign",
-                    "resolved": "\"center\" | \"end\" | \"start\"",
+                    "original": "Rule[]",
+                    "resolved": "Rule[] | undefined",
                     "references": {
-                        "FieldAddonAlign": {
+                        "Rule": {
                             "location": "import",
-                            "path": "../sd-field/sd-field.config",
-                            "id": "src/components/sd-field/sd-field.config.ts::FieldAddonAlign",
-                            "referenceLocation": "FieldAddonAlign"
+                            "path": "../../types/form",
+                            "id": "src/types/form.d.ts::Rule",
+                            "referenceLocation": "Rule"
                         }
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "attribute": "addon-align",
-                "defaultValue": "'start'"
+                "defaultValue": "[]"
             },
             "icon": {
                 "type": "unknown",
@@ -537,41 +676,56 @@ export class SdSelect extends BaseDropdownEvent {
                 "setter": false,
                 "defaultValue": "null"
             },
-            "rules": {
-                "type": "unknown",
+            "emitValue": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "Rule[]",
-                    "resolved": "Rule[] | undefined",
-                    "references": {
-                        "Rule": {
-                            "location": "import",
-                            "path": "../../components",
-                            "id": "src/components.d.ts::Rule",
-                            "referenceLocation": "Rule"
-                        }
-                    }
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[]"
+                "reflect": false,
+                "attribute": "emit-value",
+                "defaultValue": "false"
             },
-            "error": {
+            "width": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "''"
+            },
+            "useSearch": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean | undefined",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -579,31 +733,48 @@ export class SdSelect extends BaseDropdownEvent {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "error",
+                "attribute": "use-search",
                 "defaultValue": "false"
             },
-            "optionRenderer": {
-                "type": "unknown",
+            "allSelectedLabel": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "(option: SelectOption, index: number, isSelected: boolean) => any",
-                    "resolved": "((option: SelectOption, index: number, isSelected: boolean) => any) | undefined",
-                    "references": {
-                        "SelectOption": {
-                            "location": "local",
-                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-select/sd-select.tsx",
-                            "id": "src/components/sd-select/sd-select.tsx::SelectOption"
-                        }
-                    }
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "all-selected-label",
+                "defaultValue": "'\uC804\uCCB4'"
+            },
+            "useSelectAll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "reflect": false,
+                "attribute": "use-select-all",
+                "defaultValue": "false"
             },
             "name": {
                 "type": "string",
@@ -630,8 +801,12 @@ export class SdSelect extends BaseDropdownEvent {
     static get states() {
         return {
             "isOpen": {},
-            "itemIndex": {},
-            "isScrolled": {}
+            "isAnimatingOut": {},
+            "triggerWidth": {},
+            "resolvedDropdownHeight": {},
+            "resolvedMaxDropdownWidth": {},
+            "focused": {},
+            "hovered": {}
         };
     }
     static get events() {
@@ -646,13 +821,14 @@ export class SdSelect extends BaseDropdownEvent {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "SelectEvents['sdUpdate']",
-                    "resolved": "{ value: string | number | null; option: SelectOption | null; }",
+                    "original": "SelectValue",
+                    "resolved": "(string | number)[] | SelectOption | SelectOption[] | null | number | string",
                     "references": {
-                        "SelectEvents": {
-                            "location": "local",
-                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-select/sd-select.tsx",
-                            "id": "src/components/sd-select/sd-select.tsx::SelectEvents"
+                        "SelectValue": {
+                            "location": "import",
+                            "path": "./sd-select.config",
+                            "id": "src/components/sd-select/sd-select.config.ts::SelectValue",
+                            "referenceLocation": "SelectValue"
                         }
                     }
                 }
@@ -667,72 +843,15 @@ export class SdSelect extends BaseDropdownEvent {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "SelectEvents['dropDownShow']",
+                    "original": "{ isOpen: boolean }",
                     "resolved": "{ isOpen: boolean; }",
-                    "references": {
-                        "SelectEvents": {
-                            "location": "local",
-                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-select/sd-select.tsx",
-                            "id": "src/components/sd-select/sd-select.tsx::SelectEvents"
-                        }
-                    }
+                    "references": {}
                 }
             }];
     }
     static get methods() {
         return {
-            "sdOpen": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
-            "sdValidate": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
-            "sdReset": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
-            "sdResetValidate": {
+            "sdFocus": {
                 "complexType": {
                     "signature": "() => Promise<void>",
                     "parameters": [],
@@ -749,7 +868,7 @@ export class SdSelect extends BaseDropdownEvent {
                     "tags": []
                 }
             },
-            "sdFocus": {
+            "sdOpen": {
                 "complexType": {
                     "signature": "() => Promise<void>",
                     "parameters": [],
@@ -772,7 +891,7 @@ export class SdSelect extends BaseDropdownEvent {
     static get watchers() {
         return [{
                 "propName": "isOpen",
-                "methodName": "isOpenChanged"
+                "methodName": "watchIsOpen"
             }];
     }
 }