@sellmate/design-system 1.0.46 → 1.0.48

package/dist/esm/sd-input_2.entry.js

@@ -0,0 +1,203 @@
+import { r as registerInstance, c as createEvent, g as getElement, h } from './index-B8tGP77V.js';
+import { n as nanoid } from './index-CCwNgVmC.js';
+import { i as inputTokens } from './component.textinput-CbjDAdZ_.js';
+import { s as systemTokens } from './system-CS6ohqwt.js';
+
+const sm = inputTokens.input.sm;
+const md = inputTokens.input.md;
+const INPUT_SIZE_MAP = {
+    sm: {
+        height: sm.height,
+        paddingX: sm.paddingX,
+        gap: sm.gap,
+        radius: sm.radius,
+        fontSize: sm.typography.fontSize,
+        lineHeight: sm.typography.lineHeight,
+        fontWeight: sm.typography.fontWeight,
+    },
+    md: {
+        height: md.height,
+        paddingX: md.paddingX,
+        gap: md.gap,
+        radius: md.radius,
+        fontSize: md.typography.fontSize,
+        lineHeight: md.typography.lineHeight,
+        fontWeight: md.typography.fontWeight,
+    },
+};
+const INPUT_COLORS = {
+    text: inputTokens.input.text,
+    icon: inputTokens.input.icon,
+};
+const INPUT_ICON = {
+    frameSize: Number(inputTokens.input.size.icon),
+    iconSize: Number(systemTokens.size.field.icon),
+};
+
+const sdInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}.sd-date-picker{width:100%;display:inline-block}.sd-date-picker .sd-date-picker--disabled .date-icon{cursor:not-allowed !important;color:#888888 !important}.sd-date-picker .sd-date-picker__input{text-align:center !important}.sd-date-picker__menu{border-radius:8px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2)}sd-date-range-picker{width:fit-content;display:inline-flex}sd-date-range-picker .sd-date-range-picker--disabled .date-icon{cursor:not-allowed !important;color:#888888 !important}sd-date-range-picker .sd-date-range-picker--disabled .sd-input__native{color:#888888 !important}sd-date-range-picker .sd-field .sd-field__control{min-width:210px}sd-date-range-picker .sd-field .sd-input__native{margin-left:17px !important}.sd-date-range-picker__menu{width:609px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-range-picker__menu .sd-date-range-picker__header{margin-bottom:16px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center}.sd-date-range-picker__menu .sd-date-range-picker__header .header-label{margin:0 12px;width:40px;text-align:center;font-size:14px;line-height:24px}.sd-date-range-picker__menu .sd-date-range-picker__body{display:flex;flex-flow:row nowrap;align-items:stretch;gap:19px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container{width:266px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header{width:100%;height:24px;line-height:24px;font-size:14px;text-align:center;position:relative;padding:0 5px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button{position:absolute;top:50%;transform:translateY(-50%)}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-prev{left:5px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-next{right:5px;left:auto}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days{padding:0 5px;margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days .day{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-body{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.sd-date-range-picker__menu .sd-date-range-picker__body .separator{width:1px;background-color:#D8D8D8}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}sd-input{display:inline-flex}sd-input .sd-input__content{width:100%;height:100%;display:flex;flex-flow:row nowrap;align-items:center;color:var(--sd-input-text-color);font-size:var(--sd-input-font-size);line-height:var(--sd-input-line-height);font-weight:var(--sd-input-font-weight);padding:0 var(--sd-input-padding-x);gap:var(--sd-input-gap)}sd-input .sd-input__content .sd-input__native{width:100%;height:100%;border:none;outline:none;background:transparent;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit}sd-input .sd-input__content .sd-input__native[disabled]{cursor:not-allowed;color:var(--sd-input-disabled-color)}sd-input .sd-input__content .sd-input__native::placeholder{color:var(--sd-input-placeholder-color)}sd-input .sd-input__content .sd-input__clear-icon,sd-input .sd-input__content .sd-input__password-icon{flex-shrink:0;cursor:pointer}`;
+
+const SdInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.input = createEvent(this, "sdUpdate");
+        this.focus = createEvent(this, "sdFocus");
+        this.blur = createEvent(this, "sdBlur");
+    }
+    get host() { return getElement(this); }
+    value = null;
+    type = 'text';
+    size = 'sm';
+    addonLabel = '';
+    placeholder = '입력해 주세요.';
+    disabled = false;
+    clearable = false;
+    width = '';
+    rules = [];
+    autoFocus = false;
+    status;
+    hint = '';
+    errorMessage = '';
+    inputClass = '';
+    readonly = false;
+    error = false;
+    focused = false;
+    hovered = false;
+    // props - label
+    label = '';
+    icon = undefined;
+    labelTooltip = '';
+    labelTooltipProps = null;
+    //  props - custom styles
+    inputStyle = {};
+    internalValue = null;
+    passwordVisible = false;
+    nativeEl = undefined;
+    formField;
+    name = nanoid();
+    input;
+    focus;
+    blur;
+    valueChanged(newValue) {
+        this.internalValue = newValue;
+    }
+    internalValueChanged(newValue) {
+        if (newValue !== this.value) {
+            this.value = newValue;
+            this.input?.emit(this.value);
+        }
+    }
+    async sdGetNativeElement() {
+        return this.nativeEl || null;
+    }
+    async sdValidate() {
+        this.formField?.sdValidate();
+    }
+    async sdReset() {
+        this.formField?.sdReset();
+    }
+    async sdResetValidate() {
+        this.formField?.sdResetValidation();
+    }
+    async sdFocus() {
+        this.formField?.sdFocus();
+    }
+    componentWillLoad() {
+        if (this.value) {
+            this.internalValue = this.value;
+        }
+    }
+    componentDidLoad() {
+        if (this.autoFocus) {
+            this.nativeEl?.focus();
+        }
+    }
+    handleInput = (event) => {
+        const target = event.target;
+        this.internalValue = target.value;
+    };
+    handleFocus = async (type, event) => {
+        this.focused = type === 'focus';
+        if (type === 'blur') {
+            // Auto-validate on blur if rules exist
+            if (this.rules && this.rules.length > 0) {
+                await this.formField?.sdValidate();
+            }
+            this.blur?.emit(event);
+        }
+        else {
+            this.focus?.emit(event);
+        }
+    };
+    render() {
+        const sizeTokens = INPUT_SIZE_MAP[this.size] ?? INPUT_SIZE_MAP.sm;
+        const cssVars = {
+            // sd-input 자체 토큰
+            '--sd-input-font-size': `${sizeTokens.fontSize}px`,
+            '--sd-input-line-height': `${sizeTokens.lineHeight}px`,
+            '--sd-input-font-weight': sizeTokens.fontWeight,
+            '--sd-input-padding-x': `${sizeTokens.paddingX}px`,
+            '--sd-input-gap': `${sizeTokens.gap}px`,
+            '--sd-input-text-color': INPUT_COLORS.text.default,
+            '--sd-input-placeholder-color': INPUT_COLORS.text.placeholder,
+            '--sd-input-disabled-color': INPUT_COLORS.text.disabled,
+            '--sd-input-icon-color': INPUT_COLORS.icon.default,
+            // sd-field 시스템 변수 override (size별 높이/반경)
+            '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
+            '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
+        };
+        return (h("sd-field", { key: '421eeff951b21ce57727ab023c026c7b00d97a36', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: '90e8182f3c2ea87696311eabc6bb33c8def7bc1d', class: "sd-input__content" }, h("slot", { key: '4a8f311ae31036ffc2bce4ca0b2fd42799287339', name: "prefix" }), h("input", { key: 'c3d69ca0146358eccf80565a557e5e94490953d2', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: 'd0d5aa897fee76985c87e72d7fa48541dfeead1e', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: 'c57f105b957d4fa70c9dd1eec0d359c599945038', name: "close", color: INPUT_COLORS.icon.default, size: INPUT_ICON.iconSize, class: "sd-input__clear-icon", onClick: async () => {
+                this.internalValue = '';
+                await this.formField?.sdValidate();
+            } })), this.type === 'password' && (h("sd-icon", { key: '75c80ff0143ae0351dafe5166855132af3516b00', name: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', color: INPUT_COLORS.icon.default, size: INPUT_ICON.frameSize, class: "sd-input__password-icon", onClick: () => { this.passwordVisible = !this.passwordVisible; } })))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }],
+        "internalValue": [{
+                "internalValueChanged": 0
+            }]
+    }; }
+};
+SdInput.style = sdInputCss();
+
+const sdSelectSearchInputCss = () => `sd-select-search-input{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center}sd-select-search-input .sd-select-search-input{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px}sd-select-search-input .sd-select-search-input sd-input{width:100%}sd-select-search-input .sd-select-search-input--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}`;
+
+const SdSelectSearchInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.searchInput = createEvent(this, "sdSearchInput");
+        this.searchFocus = createEvent(this, "sdSearchFocus");
+    }
+    isScrolled = false;
+    searchText = '';
+    searchInput;
+    searchFocus;
+    searchRef;
+    async sdGetNativeElement() {
+        if (this.searchRef) {
+            return this.searchRef.sdGetNativeElement();
+        }
+        return null;
+    }
+    async sdSearchInputFocus() {
+        const input = await this.sdGetNativeElement();
+        input?.focus({ preventScroll: true });
+    }
+    render() {
+        return (h("div", { key: 'cfc997e9e3c418a2aa6eb33cb39a3928fba84f91', class: {
+                'sd-select-search-input': true,
+                'sd-select-search-input--scrolled': !!this.isScrolled,
+            }, onClick: event => event.stopPropagation() }, h("sd-input", { key: '5d2528dfba7a392c31d47699f4afbcee41583754', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
+                this.searchInput.emit(String(event?.detail));
+            }, onSdFocus: () => {
+                this.searchFocus.emit();
+            }, onKeyDown: event => {
+                if (event.code === 'Enter')
+                    event.stopPropagation();
+            } }, h("sd-icon", { key: 'a9161175dfd27e86fa5ac036ab592c33d5820040', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
+    }
+};
+SdSelectSearchInput.style = sdSelectSearchInputCss();
+
+export { SdInput as sd_input, SdSelectSearchInput as sd_select_search_input };

package/dist/esm/sd-loading-spinner_3.entry.js

@@ -0,0 +1,279 @@
+import { r as registerInstance, h, F as Fragment, c as createEvent, g as getElement } from './index-B8tGP77V.js';
+import { r as resolveColor } from './resolveColor-CquSJNHV.js';
+import { B as BaseDropdownEvent } from './base-dropdown-event-CRdYeSBK.js';
+import { S as SelectKeyboardNavigation } from './select-keyboard-navigation-Cy6HMEsK.js';
+import { n as nanoid } from './index-CCwNgVmC.js';
+
+const sdLoadingSpinnerCss = () => `sd-loading-spinner{display:inline-flex;width:fit-content;height:fit-content;align-items:center}sd-loading-spinner .sd-loading-spinner{animation:sd-loading-spin 2s linear infinite;transform-origin:center center}sd-loading-spinner .sd-loading-spinner .path{animation:sd-loading-spin-path 1.5s ease-in-out infinite}@keyframes sd-loading-spin{0%{transform:rotate3d(0, 0, 1, 0deg)}25%{transform:rotate3d(0, 0, 1, 90deg)}50%{transform:rotate3d(0, 0, 1, 180deg)}75%{transform:rotate3d(0, 0, 1, 270deg)}100%{transform:rotate3d(0, 0, 1, 359deg)}}@keyframes sd-loading-spin-path{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35px}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124px}}`;
+
+const SdLoadingSpinner = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    color = '#0075ff';
+    get resolvedColor() {
+        return resolveColor(this.color);
+    }
+    render() {
+        return (h(Fragment, { key: '739d89956c75131c785c9037495509783fbcfe7a' }, h("svg", { key: '3938cc3d2f2abbb51477f900222b4ba434411e6a', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, h("circle", { key: '4a21337e193f56c62da1268d3bf6d56651263771', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+    }
+};
+SdLoadingSpinner.style = sdLoadingSpinnerCss();
+
+const sdPaginationCss = () => `.sd-pagination{display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;gap:8px;color:#555555;width:100%;font-size:12px}.sd-pagination .prepend-btns{display:flex;flex-flow:row nowrap;align-items:center;gap:8px;width:60px}.sd-pagination .prepend-btns button{width:26px;height:26px;border:0;background:none}.sd-pagination .prepend-btns button:hover{border:1px solid #006AC1;border-radius:14px}.sd-pagination .append-btns{display:flex;flex-flow:row nowrap;align-items:center;gap:8px;width:60px}.sd-pagination .append-btns button{width:26px;height:26px;border:0;background:none}.sd-pagination .append-btns button:hover{border:1px solid #006AC1;border-radius:14px}.sd-pagination .pagination-btn{display:flex;align-items:center;justify-content:center;border-radius:14px;outline:none;border:none;cursor:pointer;height:26px;color:#555555;width:var(--pagination-btn-width, 26px)}.sd-pagination .pagination-btn--selected{background-color:#006AC1;color:white}.sd-pagination .pagination-btn:hover{border:1px solid #006AC1}.sd-pagination--simple .pagination-info{line-height:26px;display:flex;flex-flow:row nowrap;align-items:center;gap:8px}.sd-pagination--simple .pagination-info .current-page,.sd-pagination--simple .pagination-info .last-page{padding:0 2px}`;
+
+const BUTTON_WIDTH = {
+    1: 26,
+    2: 36,
+    3: 42,
+    4: 50,
+    5: 58,
+};
+const PER_PAGE = 10;
+const SdPagination = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.pageChange = createEvent(this, "sdPageChange");
+    }
+    currentPage = 1;
+    lastPage = 1;
+    simple = false;
+    pageChange;
+    get paginationClasses() {
+        const classes = ['sd-pagination'];
+        if (this.simple) {
+            classes.push('sd-pagination--simple');
+        }
+        return classes.join(' ');
+    }
+    get pageNumbers() {
+        const start = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
+        const end = Math.min(start + PER_PAGE - 1, this.lastPage);
+        return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+    }
+    get buttonWidth() {
+        const lastPageNum = this.pageNumbers.at(-1) ?? 1;
+        const maxPageLength = lastPageNum.toString().length;
+        return BUTTON_WIDTH[maxPageLength] || BUTTON_WIDTH[1];
+    }
+    handlePageChange(page) {
+        if (page < 1 || page > this.lastPage)
+            return;
+        this.currentPage = page;
+        this.pageChange.emit(page);
+    }
+    handleGroupChange(direction) {
+        const delta = direction === 'forward' ? PER_PAGE : -PER_PAGE;
+        const newPage = Math.min(Math.max(this.currentPage + delta, 1), this.lastPage);
+        this.handlePageChange(newPage);
+    }
+    get isFirstGroup() {
+        return this.currentPage <= PER_PAGE;
+    }
+    get isLastGroup() {
+        const startPageGroup = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
+        return startPageGroup + PER_PAGE - 1 >= this.lastPage;
+    }
+    renderPrevButtons() {
+        if (this.simple) {
+            if (this.currentPage <= 1)
+                return null;
+            return (h(Fragment, null, h("button", { "aria-label": "Go to first page", onClick: () => this.handlePageChange(1) }, h("sd-icon", { name: "chevronLeftEnd", size: "12", color: "#222222" })), h("button", { "aria-label": "Go to previous page", onClick: () => this.handlePageChange(this.currentPage - 1) }, h("sd-icon", { name: "arrowLeft", size: "12", color: "#222222" }))));
+        }
+        if (!this.isFirstGroup) {
+            return (h(Fragment, null, h("button", { "aria-label": "Go to first page", onClick: () => this.handlePageChange(1) }, h("sd-icon", { name: "chevronLeftEnd", size: "12", color: "#222222" })), h("button", { "aria-label": "Go to previous page group", onClick: () => this.handleGroupChange('backward') }, h("sd-icon", { name: "arrowLeft", size: "12", color: "#222222" }))));
+        }
+    }
+    renderNextButtons() {
+        if (this.simple) {
+            if (this.currentPage >= this.lastPage)
+                return null;
+            return (h(Fragment, null, h("button", { "aria-label": "Go to next page", onClick: () => this.handlePageChange(this.currentPage + 1) }, h("sd-icon", { name: "arrowRight", size: "12", color: "#222222" })), h("button", { "aria-label": "Go to last page", onClick: () => this.handlePageChange(this.lastPage) }, h("sd-icon", { name: "chevronRightEnd", size: "12", color: "#222222" }))));
+        }
+        if (!this.isLastGroup) {
+            return (h(Fragment, null, h("button", { "aria-label": "Go to next page group", onClick: () => this.handleGroupChange('forward') }, h("sd-icon", { name: "arrowRight", size: "12", color: "#222222" })), h("button", { "aria-label": "Go to last page", onClick: () => this.handlePageChange(this.lastPage) }, h("sd-icon", { name: "chevronRightEnd", size: "12", color: "#222222" }))));
+        }
+    }
+    render() {
+        return (h("div", { key: 'c689cc21909b50a709487a409ecbd2ba48d3db3a', class: this.paginationClasses }, h("div", { key: 'a38cee49c5d225beea8acd35cb7b370319886bee', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+                'pagination-btn': true,
+                'pagination-btn--selected': this.currentPage === n,
+            }, disabled: this.currentPage === n, style: {
+                '--pagination-btn-width': `${this.buttonWidth}px`,
+            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '40dcb43cd251c5cbdf18e502acd67962e87d4496', class: "append-btns" }, this.renderNextButtons())));
+    }
+};
+SdPagination.style = sdPaginationCss();
+
+const sdSelectCss = () => `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-select{width:100%}sd-select .sd-select .sd-select__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;height:100%;align-items:center}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)}`;
+
+const SdSelect = class extends BaseDropdownEvent {
+    constructor(hostRef) {
+        super();
+        registerInstance(this, hostRef);
+        this.update = createEvent(this, "sdUpdate");
+        this.dropDownShow = createEvent(this, "sdDropDownShow");
+    }
+    get el() { return getElement(this); }
+    // props
+    value = null;
+    options = [];
+    placeholder = '선택';
+    optionPlaceholder = '선택지가 없습니다.';
+    width = '200px';
+    dropdownHeight = '260px';
+    autoFocus = false;
+    disabled = false;
+    clearable = false;
+    searchable = false;
+    // props - label
+    label = '';
+    addonLabel = '';
+    icon = undefined;
+    labelTooltip = '';
+    labelTooltipProps = null;
+    // props - form
+    rules = [];
+    error = false;
+    // props - custom slots
+    optionRenderer;
+    // states
+    isOpen = false;
+    itemIndex = -1;
+    isScrolled = false;
+    // events
+    update;
+    dropDownShow;
+    selectRef;
+    triggerRef;
+    formField;
+    filteredOptions = [];
+    dropDownWidth = '200px';
+    name = nanoid();
+    async sdOpen() {
+        this.isOpen = true;
+    }
+    async sdValidate() {
+        this.formField?.sdValidate();
+    }
+    async sdReset() {
+        this.formField?.sdReset();
+    }
+    async sdResetValidate() {
+        this.formField?.sdResetValidation();
+    }
+    async sdFocus() {
+        this.formField?.sdFocus();
+    }
+    async isOpenChanged() {
+        // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지
+        this.onDropdownToggle(this.isOpen);
+        this.dropDownShow?.emit({ isOpen: this.isOpen });
+        if (this.isOpen === false) {
+            await this.formField?.sdValidate();
+        }
+    }
+    componentWillLoad() {
+        this.filteredOptions = this.options;
+        this.dropDownWidth = this.width;
+        this.initializeEvent();
+    }
+    componentDidLoad() {
+        if (this.autoFocus) {
+            this.selectRef?.focus();
+        }
+    }
+    // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정
+    componentDidRender() {
+        const trigger = this.triggerRef;
+        const rect = trigger?.getBoundingClientRect();
+        this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;
+    }
+    disconnectedCallback() {
+        this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리
+    }
+    handleDocumentClick(event) {
+        if (!this.selectRef?.contains(event.target)) {
+            this.isOpen = false;
+        }
+    }
+    handleDocumentKeydown(keyboardEvent) {
+        keyboardEvent.stopPropagation();
+        const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
+        if (!targetKey.includes(keyboardEvent.key))
+            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;
+        }
+    }
+    getSelectedOption() {
+        return this.options.find(option => option.value === this.value);
+    }
+    closeDropdown() {
+        this.isOpen = false;
+    }
+    handleTriggerClick = (event) => {
+        event.stopPropagation();
+        if (!this.disabled) {
+            this.isOpen = !this.isOpen;
+            this.dropDownShow?.emit({ isOpen: this.isOpen });
+        }
+    };
+    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 });
+        }
+    };
+    render() {
+        return (h("sd-field", { key: 'f7cd0c34188712a30389d07bde7edc7875e9923b', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: '460a8a23247e24a02bd25470105598914029e205', 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())));
+    }
+    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 } })));
+    }
+    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) })));
+    }
+    static get watchers() { return {
+        "isOpen": [{
+                "isOpenChanged": 0
+            }]
+    }; }
+};
+SdSelect.style = sdSelectCss();
+
+export { SdLoadingSpinner as sd_loading_spinner, SdPagination as sd_pagination, SdSelect as sd_select };

package/dist/esm/sd-modal-container.entry.js

@@ -23,33 +23,66 @@ const SdModalContainer = class {
                 this.shakeModal(top.modalEl);
                 return;
             }
-            this.requestDismiss(top.id, 'close');
+            this.dispatchClose(top.modalEl);
         }
     }
     async open(options, chain) {
         const id = `modal-${++modalIdCounter}`;
         const modalEl = this.createConfirmModal(id, options);
+        this.attachModalEventListeners(id, modalEl);
+        this.registerEntry(id, modalEl, chain, {
+            persistent: !!options.persistent,
+        });
+        return id;
+    }
+    async createCustom(element, options, chain) {
+        const id = `modal-${++modalIdCounter}`;
+        element.setAttribute('data-modal-id', id);
+        element.classList.add('sd-modal-container__modal');
+        this.attachModalEventListeners(id, element);
+        this.registerEntry(id, element, chain, {
+            persistent: !!options.persistent,
+        });
+        return id;
+    }
+    attachModalEventListeners(id, modalEl) {
+        modalEl.addEventListener('sdOk', () => this.requestDismiss(id, 'confirm'));
+        modalEl.addEventListener('sdCancel', () => this.requestDismiss(id, 'cancel'));
+        modalEl.addEventListener('sdClose', () => this.requestDismiss(id, 'close'));
+    }
+    dispatchClose(modalEl) {
+        modalEl.dispatchEvent(new CustomEvent('sdClose'));
+    }
+    registerEntry(id, modalEl, chain, meta) {
         if (this.containerDismissTimerId) {
             clearTimeout(this.containerDismissTimerId);
             this.containerDismissTimerId = undefined;
         }
-        this.entries = [...(this.entries ?? []), { id, modalEl, chain, persistent: !!options.persistent, closeAction: options.closeAction ?? 'none', closing: false }];
+        this.entries = [
+            ...(this.entries ?? []),
+            {
+                id,
+                modalEl,
+                chain,
+                persistent: meta.persistent,
+                closing: false,
+            },
+        ];
         this.isVisible = true;
         requestAnimationFrame(() => {
-            if (this.contentRef) {
-                this.contentRef.appendChild(modalEl);
-                this.waitForModalReady(modalEl).then(() => {
-                    requestAnimationFrame(() => {
-                        const currentEntry = (this.entries ?? []).find(item => item.id === id);
-                        if (!currentEntry || currentEntry.closing || !modalEl.isConnected)
-                            return;
-                        this.isBackdropVisible = true;
-                        modalEl.classList.add('sd-modal-container__modal--visible');
-                    });
+            if (!this.contentRef)
+                return;
+            this.contentRef.appendChild(modalEl);
+            this.waitForModalReady(modalEl).then(() => {
+                requestAnimationFrame(() => {
+                    const currentEntry = (this.entries ?? []).find(item => item.id === id);
+                    if (!currentEntry || currentEntry.closing || !modalEl.isConnected)
+                        return;
+                    this.isBackdropVisible = true;
+                    modalEl.classList.add('sd-modal-container__modal--visible');
                 });
-            }
+            });
         });
-        return id;
     }
     async update(id, props) {
         const entry = (this.entries ?? []).find(e => e.id === id);
@@ -62,12 +95,6 @@ const SdModalContainer = class {
         el.setAttribute('data-modal-id', id);
         el.classList.add('sd-modal-container__modal');
         this.applyProps(el, options);
-        el.addEventListener('sdOk', () => {
-            this.requestDismiss(id, 'confirm');
-        });
-        el.addEventListener('sdClose', () => {
-            this.requestDismiss(id, 'close');
-        });
         return el;
     }
     applyProps(el, options) {
@@ -107,7 +134,7 @@ const SdModalContainer = class {
             this.shakeModal(top.modalEl);
             return;
         }
-        this.requestDismiss(top.id, 'close');
+        this.dispatchClose(top.modalEl);
     };
     shakeModal(modalEl) {
         const cls = 'sd-modal-container__modal--shake';
@@ -141,18 +168,12 @@ const SdModalContainer = class {
             this.finalizeDismiss(id);
         }, ANIMATION_DURATION);
         this.entries = (this.entries ?? []).map(item => item.id === id ? { ...item, closing: true, dismissTimerId } : item);
-        if (reason === 'close') {
-            if (entry.closeAction === 'ok')
-                entry.chain._triggerOk();
-            else if (entry.closeAction === 'cancel')
-                entry.chain._triggerCancel();
-        }
-        else {
-            if (reason === 'confirm')
-                entry.chain._triggerOk();
-            if (reason === 'cancel')
-                entry.chain._triggerCancel();
-        }
+        if (reason === 'confirm')
+            entry.chain._triggerOk();
+        else if (reason === 'cancel')
+            entry.chain._triggerCancel();
+        else if (reason === 'close')
+            entry.chain._triggerClose();
     }
     finalizeDismiss(id) {
         const entry = (this.entries ?? []).find(item => item.id === id);
@@ -171,6 +192,7 @@ const SdModalContainer = class {
                 this.containerDismissTimerId = undefined;
             }, ANIMATION_DURATION);
         }
+        entry.chain._triggerDismissed();
     }
     waitForModalReady(modalEl) {
         const componentOnReady = modalEl.componentOnReady;