@sellmate/design-system 1.27.1 → 1.29.0

package/dist/esm/{sd-date-picker_7.entry.js → sd-date-picker_8.entry.js}

@@ -1,9 +1,10 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BZg-6aSz.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Dz490Ukt.js';
 import { n as nanoid } from './index-CCwNgVmC.js';
-import { D as DATEPICKER_COLORS, a as DATEPICKER_SIZE_MAP } from './sd-date-picker.config-D-ks6qNf.js';
+import { D as DATEPICKER_COLORS, a as DATEPICKER_SIZE_MAP } from './sd-date-picker.config-krRuSUsA.js';
+import { l as listBoxTokens } from './component.listBox-DlJaYVWf.js';
 import { i as inputTokens } from './component.textinput-e0ABNkP6.js';
 import { f as fieldTokens } from './component.field-DjKOoQuF.js';
-import './component.datepicker-laVsm9VM.js';
+import './component.datepicker-BOxGhKKP.js';
 
 const sdDatePickerCss = () => `sd-date-picker{display:inline-flex}sd-date-picker sd-portal{display:none}sd-date-picker .sd-date-picker{position:relative;width:100%;height:100%}`;
 
@@ -127,9 +128,9 @@ const SdDatePicker = class {
             '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
         };
-        return (h("sd-field", { key: '4359c9ce80bfc919088774a4458c730c427aa3f5', 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, size: this.size, 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("div", { key: '638f4e59c9a7c5c841428c424181b3d2320857eb', class: "sd-date-picker", ref: el => {
+        return (h("sd-field", { key: 'f6fe03d9c87b8de3d33d641934b28f1e42a1b23a', 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, size: this.size, 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("div", { key: '0d77d31b48f1ee8f87f7e59f472b0335f19b00be', class: "sd-date-picker", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-date-picker-trigger", { key: 'cbfe2bee0fdea1f089860cf3a7da9b7e35327c87', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: 'a348437c5f9f53180cc7f74d5b275e4f3fbedea6', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-calendar", { key: '7dd08053b3a24d25e6149d4bc751c75eff94f752', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, h("sd-date-picker-trigger", { key: '003de27ec2c3c660b1c183f10af02d6d982a6069', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '719f5f0a191286d2f2d06ca41c5746f6dea569e3', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-calendar", { key: 'd4a62d31666f21f6fb9d03f09cf36d16acc1c8a9', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get watchers() { return {
         "isOpen": [{
@@ -321,8 +322,16 @@ const FILE_PICKER_COLORS = {
         disabled: fp.icon.disabled,
     },
 };
+// useMultipleListBox 모드에서 파일 칩을 담는 floating 리스트박스 카드
+// (sd-select-listbox 와 동일한 배경/radius/그림자 토큰 사용)
+const FILE_PICKER_LIST_BOX = {
+    radius: listBoxTokens.listBox.radius,
+    bg: listBoxTokens.listBox.bg,
+    chipPadding: listBoxTokens.listBox.chip.paddingXY,
+    chipGap: listBoxTokens.listBox.chip.gap,
+};
 
-const sdFilePickerCss = () => `sd-file-picker{display:flex;flex-direction:column;width:100%}.sd-file-picker__wrapper{display:flex;flex-direction:column;width:100%}.sd-file-picker__chip-list{display:flex;flex-flow:row wrap;gap:8px;margin-top:8px}.sd-file-picker__content{width:100%;height:100%;display:flex;align-items:center;padding:0 var(--sd-file-picker-padding-x);gap:var(--sd-file-picker-gap);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;vertical-align:middle}.sd-file-picker__text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:var(--sd-file-picker-font-weight);font-size:var(--sd-file-picker-font-size);line-height:var(--sd-file-picker-line-height);color:var(--sd-file-picker-placeholder-color)}.sd-file-picker__text--active{color:var(--sd-file-picker-text-color)}.sd-file-picker__text--placeholder{color:var(--sd-file-picker-placeholder-color)}.sd-file-picker__icon{flex-shrink:0}.sd-file-picker__clear-icon{flex-shrink:0;cursor:pointer;transition:opacity 0.2s ease}.sd-file-picker__clear-icon:hover{opacity:0.7}.sd-file-picker__input{display:none}.sd-file-picker__tooltip{position:absolute;top:calc(100% - 4px);left:50%;transform:translate(-50%);z-index:998;white-space:nowrap;padding:8px 12px;background:rgba(0, 0, 0, 0.8);color:white;font-size:12px;line-height:18px;border-radius:4px;pointer-events:none}.sd-field--disabled .sd-file-picker__content{cursor:not-allowed}.sd-field--disabled .sd-file-picker__text{color:var(--sd-file-picker-disabled-color)}.sd-file-picker--inline .sd-file-picker__content{padding:0}.sd-file-picker--inline .sd-file-picker__text{color:var(--sd-file-picker-placeholder-color)}.sd-file-picker--inline:not(.sd-file-picker--inline-disabled) .sd-file-picker__content:hover .sd-file-picker__text{color:var(--sd-file-picker-text-color)}.sd-file-picker--inline .sd-file-picker__text--active{color:var(--sd-file-picker-text-color)}.sd-file-picker--inline.sd-file-picker--inline-disabled .sd-file-picker__content{cursor:not-allowed}.sd-file-picker--inline.sd-file-picker--inline-disabled .sd-file-picker__text{color:var(--sd-file-picker-disabled-color)}`;
+const sdFilePickerCss = () => `sd-file-picker{display:flex;flex-direction:column;width:100%}.sd-file-picker__wrapper{display:flex;flex-direction:column;width:100%}.sd-file-picker__chip-list{display:flex;flex-flow:row wrap;gap:8px;margin-top:8px}.sd-file-picker__content{width:100%;height:100%;display:flex;align-items:center;padding:0 var(--sd-file-picker-padding-x);gap:var(--sd-file-picker-gap);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;vertical-align:middle}.sd-file-picker__text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:var(--sd-file-picker-font-weight);font-size:var(--sd-file-picker-font-size);line-height:var(--sd-file-picker-line-height);color:var(--sd-file-picker-placeholder-color)}.sd-file-picker__text--active{color:var(--sd-file-picker-text-color)}.sd-file-picker__text--placeholder{color:var(--sd-file-picker-placeholder-color)}.sd-file-picker__icon{flex-shrink:0}.sd-file-picker__clear-icon{flex-shrink:0;cursor:pointer;transition:opacity 0.2s ease}.sd-file-picker__clear-icon:hover{opacity:0.7}.sd-file-picker__caret{flex-shrink:0;cursor:pointer;transition:transform 0.15s ease}.sd-file-picker__caret--open{transform:rotate(180deg)}.sd-file-picker__listbox{display:flex;flex-direction:column;align-items:stretch;box-sizing:border-box;max-width:100%;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1)}.sd-file-picker__input{display:none}.sd-file-picker__tooltip{position:absolute;top:calc(100% - 4px);left:50%;transform:translate(-50%);z-index:998;white-space:nowrap;padding:8px 12px;background:rgba(0, 0, 0, 0.8);color:white;font-size:12px;line-height:18px;border-radius:4px;pointer-events:none}.sd-field--disabled .sd-file-picker__content{cursor:not-allowed}.sd-field--disabled .sd-file-picker__text{color:var(--sd-file-picker-disabled-color)}.sd-file-picker--inline .sd-file-picker__content{padding:0}.sd-file-picker--inline .sd-file-picker__text{color:var(--sd-file-picker-placeholder-color)}.sd-file-picker--inline:not(.sd-file-picker--inline-disabled) .sd-file-picker__content:hover .sd-file-picker__text{color:var(--sd-file-picker-text-color)}.sd-file-picker--inline .sd-file-picker__text--active{color:var(--sd-file-picker-text-color)}.sd-file-picker--inline.sd-file-picker--inline-disabled .sd-file-picker__content{cursor:not-allowed}.sd-file-picker--inline.sd-file-picker--inline-disabled .sd-file-picker__text{color:var(--sd-file-picker-disabled-color)}`;
 
 const SdFilePicker = class {
     constructor(hostRef) {
@@ -341,6 +350,8 @@ const SdFilePicker = class {
     inline = false;
     /** 다중 파일 선택 여부 */
     multiple = false;
+    /** multiple 파일 목록을 필드 아래 칩 대신, caret(▼) 클릭 시 열리는 리스트박스 카드로 표시 */
+    useMultipleListBox = false;
     /** 허용할 파일 타입 (input accept 속성과 동일) */
     accept;
     /** 파일 한 개의 최대 크기 (bytes) */
@@ -384,9 +395,13 @@ const SdFilePicker = class {
     hovered = false;
     internalValue = null;
     showTooltip = false;
+    isListboxOpen = false;
+    listboxWidth = '';
     fileInputRef;
     fileNamesRef;
+    contentRef;
     formField;
+    static VIEWPORT_PADDING = 20;
     /** 파일 선택 또는 삭제 시 현재 파일 값을 전달합니다. */
     update;
     /** 파일이 크기·개수 제한을 초과하여 거부됐을 때 발생합니다. */
@@ -488,6 +503,7 @@ const SdFilePicker = class {
         this.value = clearedValue;
         this.internalValue = clearedValue;
         this.update?.emit(clearedValue);
+        this.isListboxOpen = false;
         if (this.fileInputRef) {
             this.fileInputRef.value = '';
         }
@@ -497,6 +513,23 @@ const SdFilePicker = class {
             return;
         this.fileInputRef?.click();
     };
+    /** caret(▼) 클릭 시 파일 목록 리스트박스를 토글한다. */
+    handleListboxToggle = (event) => {
+        event.stopPropagation();
+        if (this.disabled)
+            return;
+        if (this.isListboxOpen) {
+            this.isListboxOpen = false;
+            return;
+        }
+        if (this.contentRef) {
+            this.listboxWidth = `${this.contentRef.offsetWidth}px`;
+        }
+        this.isListboxOpen = true;
+    };
+    closeListbox = () => {
+        this.isListboxOpen = false;
+    };
     hasFiles() {
         if (Array.isArray(this.internalValue)) {
             return this.internalValue.length > 0;
@@ -522,12 +555,28 @@ const SdFilePicker = class {
         this.internalValue = newFiles;
         this.value = newFiles;
         this.update?.emit(this.value);
+        // 리스트박스에서 마지막 파일을 지우면 caret 이 사라지므로 함께 닫는다.
+        if (newFiles.length === 0) {
+            this.isListboxOpen = false;
+        }
     };
     renderChipList() {
         if (!this.hasChips())
             return null;
         return (h("div", { class: "sd-file-picker__chip-list" }, this.internalValue.map((file, index) => (h("sd-chip", { value: file.name, onSdRemove: () => this.handleChipRemove(index) })))));
     }
+    renderListbox() {
+        if (!this.hasChips() || !this.isListboxOpen)
+            return null;
+        const listboxStyle = {
+            width: this.listboxWidth,
+            padding: `${FILE_PICKER_LIST_BOX.chipPadding}px`,
+            gap: `${FILE_PICKER_LIST_BOX.chipGap}px`,
+            borderRadius: `${FILE_PICKER_LIST_BOX.radius}px`,
+            background: FILE_PICKER_LIST_BOX.bg,
+        };
+        return (h("sd-portal", { open: this.isListboxOpen, parentRef: this.contentRef, viewportPadding: SdFilePicker.VIEWPORT_PADDING, onSdClose: this.closeListbox }, h("div", { class: "sd-file-picker__listbox", style: listboxStyle }, this.internalValue.map((file, index) => (h("sd-chip", { value: file.name, editable: false, onSdRemove: () => this.handleChipRemove(index) }))))));
+    }
     checkOverflow() {
         if (!this.fileNamesRef)
             return;
@@ -553,21 +602,25 @@ const SdFilePicker = class {
             '--sd-system-size-field-sm-height': `${FILE_PICKER_LAYOUT.height}px`,
             '--sd-system-radius-field-sm': `${FILE_PICKER_LAYOUT.radius}px`,
         };
-        const content = (h("div", { key: 'f686c8d06b3dbecc037e21f41e7f307d08349e8b', role: "button", tabindex: this.disabled ? -1 : 0, class: "sd-file-picker__content", onClick: this.handleClick, onKeyDown: e => {
+        const showListbox = this.multiple && this.useMultipleListBox;
+        const content = (h("div", { key: '932b5549b6b27e0fec8096127dd8fb09f682fe56', role: "button", tabindex: this.disabled ? -1 : 0, class: "sd-file-picker__content", ref: el => (this.contentRef = el), onClick: this.handleClick, onKeyDown: e => {
                 if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, h("input", { key: 'a519e5a7c253d9d9bba21401b2f83092aa8a3a91', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder ?? 'Click to upload' }), h("sd-icon", { key: 'b9e7548365f1d54957b6e575d3532a833e301a98', name: "attachFile", size: Number(FILE_PICKER_LAYOUT.iconSize), color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: 'cb28d1c3abf0e9c30454f01bb8c81cb0ea4477af', ref: el => (this.fileNamesRef = el), class: {
+            } }, h("input", { key: 'd10a6a2bc0606954588cee4ad77898ad28cbbe75', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder ?? 'Click to upload' }), h("sd-icon", { key: '70102b5a6ff6606423ba36601015bccc2d48f22c', name: "attachFile", size: Number(FILE_PICKER_LAYOUT.iconSize), color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: '7a0696f4f4b3ccd56c707bf2ecee59562ceb1a7b', ref: el => (this.fileNamesRef = el), class: {
                 'sd-file-picker__text': true,
                 'sd-file-picker__text--placeholder': !hasFiles,
                 'sd-file-picker__text--active': hasFiles,
-            } }, displayText), !this.disabled && hasFiles && (h("sd-ghost-button", { key: 'c97d7c306ef2087a9874a16b6e485a94c7cc571f', icon: "close", size: "xxs", ariaLabel: "clear", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: '293a4c75766be383a4ad6f79052111c09608e0e2', class: "sd-file-picker__tooltip" }, displayText))));
-        return (h("div", { key: '4e25add1b74a232e8786efca26f87ccb5d48f19d', class: {
+            } }, displayText), showListbox && hasFiles && !this.disabled && (h("sd-ghost-button", { key: 'a68ba1cd8dabf75279eba8993befef8dd03008ae', icon: "caretDown", size: "xxs", ariaLabel: "toggle file list", disabled: this.disabled, class: {
+                'sd-file-picker__caret': true,
+                'sd-file-picker__caret--open': this.isListboxOpen,
+            }, onClick: this.handleListboxToggle })), !this.disabled && hasFiles && (h("sd-ghost-button", { key: '6abcae4722ebbe7f888ce500774f3a749061ad4e', icon: "close", size: "xxs", ariaLabel: "clear", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: 'f1e3821eee58a1b126a6375a8d830a9fc9055cbe', class: "sd-file-picker__tooltip" }, displayText))));
+        return (h("div", { key: '952fbde18439ce103d62ede9e7b7a59dda408aa1', class: {
                 'sd-file-picker__wrapper': true,
                 'sd-file-picker--inline': this.inline,
                 'sd-file-picker--inline-disabled': this.inline && this.disabled,
-            }, style: cssVars }, h("sd-field", { key: 'fda8f53237f5efb4f1dec906d87851dd10c03593', borderless: this.inline, name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content), this.renderChipList()));
+            }, style: cssVars }, h("sd-field", { key: '08ed598117f29d7c6977f75a73300c033bb6ec9d', borderless: this.inline, name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content), this.useMultipleListBox ? this.renderListbox() : this.renderChipList()));
     }
     static get watchers() { return {
         "value": [{
@@ -763,12 +816,12 @@ const SdInput = class {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (h("sd-field", { key: '972d5e17746dc16d4e20b18bd278410fe9c13878', 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, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, 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: '31e5f2aa7a2f0acaa0bfda8b9bfb94e2d6a98ebe', class: "sd-input__content" }, h("slot", { key: '8230767a7311121fca1d3a1d64be5a04fc3c38aa', name: "prefix" }), h("input", { key: '2961c50e416a08988d3d80022883eab696de2c7c', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '6862a98c1254979e0700cd8b18b61517a4c7386a', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: '9aa967f89fa448df98079ba1b16fe4ea4ef81c0e', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: '5707ad3cdfd0194d4200899f3838e6e7ff03cb34', 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, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, 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: 'a5146f59435269a419c8273c72e7704a359108f0', class: "sd-input__content" }, h("slot", { key: 'cfa0393abc20439a7746e874215864d02d41ce17', name: "prefix" }), h("input", { key: 'bf7503a5701e237868c7be863f5d2653d074fb66', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: 'bc16a709380137d6993753892e71cab33e0fc070', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: '4053ddc137f8d104a3e619f81ca2c99fd7e52a75', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
                 if (this.disabled || this.readonly)
                     return;
                 this.internalValue = '';
                 await this.formField?.sdValidate();
-            } })), this.type === 'password' && (h("sd-ghost-button", { key: '2dd03b4920f2e84932c6e8ddb8bbdea2070b070f', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
+            } })), this.type === 'password' && (h("sd-ghost-button", { key: '7062bbfecd4289185dc847bca0524405d6f4bbfe', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
                 if (this.disabled || this.readonly)
                     return;
                 this.passwordVisible = !this.passwordVisible;
@@ -1192,15 +1245,15 @@ const SdNumberInput = class {
             '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
             '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
         };
-        return (h("sd-field", { key: '391ac51b1c7844a81664907af4e7c063d6c4c5e4', 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, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, 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("div", { key: '7bdc01654f679228c9893d4438daa0a8324b1e56', class: {
+        return (h("sd-field", { key: 'abfc6fbc218ed829eabbf33476e6feb25ed0b783', 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, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, 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("div", { key: 'ab9f55eb4dcf8b345fae2e0546833f9d4216df1d', class: {
                 'sd-number-input__content': true,
                 'sd-number-input__content--no-stepper': !this.useButton,
-            } }, this.useButton && (h("button", { key: '57819a2fbc917ebf6fdf640e4226443cf6d138b1', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '05c900ee4b9ccb0f2b8bf5a555f5586fe91c3c53', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+            } }, this.useButton && (h("button", { key: '3a12f0c1c1963790b3337f34452d9bc200e072c1', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'cae2acccfb818a25a1d2c6abe8a0accdff293931', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && h("span", { key: 'e406fa40696f58e4a8ad4f2be2a33ecfc2f4ff3a', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: '3df235c03deac87a615d295d65473a487155f07c', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
+                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && h("span", { key: '37a2724e2973205cd9f0083d796c556aed8c50c6', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: '5d9bfccaa121f0bc3ecaac4d8db3023d1d03dd68', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
                 textAlign: this.useButton ? 'center' : 'right',
                 ...this.inputStyle,
-            } }), this.inputSuffix && h("span", { key: 'b23bd9594ca53147d628d97b8a99512d0ecc6c82', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: 'c4757ac52cccab448a91458ca66e7de29b5d4b5d', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '45eadd745300df1f9bec18d7a9d6367f25ee53b7', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && h("span", { key: 'ba990181e4b3d100087d20b177710f09b61f23cc', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: '91666af2e343d3098bc020fb7266aa1e785783c3', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '336ea010c7e9e314c98f56f4c79c86944087912e', name: "add", size: iconSize, color: this.isIncrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
                 : NUMBER_INPUT_STEPPER.icon.default }))))));
     }
@@ -1215,7 +1268,7 @@ const SdNumberInput = class {
 };
 SdNumberInput.style = sdNumberInputCss();
 
-const sdRadioGroupCss = () => `sd-radio{display:inline-flex;width:fit-content;height:var(--sd-radio-line-height);line-height:0}sd-radio .sd-radio{cursor:pointer;display:inline-flex;align-items:center;gap:var(--sd-radio-gap);height:var(--sd-radio-line-height);max-height:var(--sd-radio-line-height)}sd-radio .sd-radio>input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}sd-radio .sd-radio>input:focus-visible+.sd-radio__circle{box-shadow:0 0 0 2px white, 0 0 0 4px var(--sd-radio-checked-border);outline:none}sd-radio .sd-radio__circle{position:relative;width:var(--sd-radio-size);height:var(--sd-radio-size);border-radius:50%;border:var(--sd-radio-border-width) solid var(--sd-radio-unchecked-border);box-sizing:border-box;background:var(--sd-radio-unchecked-bg);display:inline-flex;flex-shrink:0}sd-radio .sd-radio__label{font-size:var(--sd-radio-font-size);font-weight:var(--sd-radio-font-weight);color:var(--sd-radio-label-color);line-height:var(--sd-radio-line-height);display:inline-flex;flex-direction:column}sd-radio .sd-radio__label::before{content:attr(data-label);height:0;font-weight:var(--sd-radio-selected-font-weight);visibility:hidden;overflow:hidden;user-select:none;pointer-events:none}sd-radio .sd-radio:hover:not(.sd-radio--disabled) .sd-radio__circle{background:var(--sd-radio-unchecked-bg-hover);border-color:var(--sd-radio-unchecked-border-hover)}sd-radio .sd-radio--checked .sd-radio__label{font-weight:var(--sd-radio-selected-font-weight)}sd-radio .sd-radio--checked .sd-radio__circle{border-color:var(--sd-radio-checked-border)}sd-radio .sd-radio--checked .sd-radio__circle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:var(--sd-radio-dot-size);height:var(--sd-radio-dot-size);border-radius:50%;background:var(--sd-radio-checked-dot)}sd-radio .sd-radio--disabled{cursor:not-allowed}sd-radio .sd-radio--disabled .sd-radio__label{color:var(--sd-radio-label-disabled-color)}sd-radio .sd-radio--disabled .sd-radio__circle{background:var(--sd-radio-disabled-bg);border-color:var(--sd-radio-disabled-border)}sd-radio .sd-radio--disabled.sd-radio--checked .sd-radio__circle::after{background:var(--sd-radio-disabled-dot)}sd-radio-group{display:inline-block}sd-radio-group .sd-radio-group{display:flex}sd-radio-group .sd-radio-group--vertical{flex-direction:column;gap:8px}sd-radio-group .sd-radio-group--horizontal{flex-direction:row;align-items:center;gap:20px}`;
+const sdRadioGroupCss = () => `sd-radio{display:inline-flex;width:fit-content;height:var(--sd-radio-line-height);line-height:0}sd-radio .sd-radio{cursor:pointer;display:inline-flex;align-items:center;gap:var(--sd-radio-gap);height:var(--sd-radio-line-height);max-height:var(--sd-radio-line-height)}sd-radio .sd-radio>input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}sd-radio .sd-radio>input:focus-visible+.sd-radio__circle{box-shadow:0 0 0 2px white, 0 0 0 4px var(--sd-radio-checked-border);outline:none}sd-radio .sd-radio__circle{position:relative;width:var(--sd-radio-size);height:var(--sd-radio-size);border-radius:50%;border:var(--sd-radio-border-width) solid var(--sd-radio-unchecked-border);box-sizing:border-box;background:var(--sd-radio-unchecked-bg);display:inline-flex;flex-shrink:0}sd-radio .sd-radio__label{font-size:var(--sd-radio-font-size);font-weight:var(--sd-radio-font-weight);color:var(--sd-radio-label-color);line-height:var(--sd-radio-line-height);display:inline-flex;flex-direction:column}sd-radio .sd-radio__label::before{content:attr(data-label);height:0;font-weight:var(--sd-radio-selected-font-weight);visibility:hidden;overflow:hidden;user-select:none;pointer-events:none}sd-radio .sd-radio:hover:not(.sd-radio--disabled) .sd-radio__circle{background:var(--sd-radio-unchecked-bg-hover);border-color:var(--sd-radio-unchecked-border-hover)}sd-radio .sd-radio--checked .sd-radio__label{font-weight:var(--sd-radio-selected-font-weight)}sd-radio .sd-radio--checked .sd-radio__circle{border-color:var(--sd-radio-checked-border)}sd-radio .sd-radio--checked .sd-radio__circle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:var(--sd-radio-dot-size);height:var(--sd-radio-dot-size);border-radius:50%;background:var(--sd-radio-checked-dot)}sd-radio .sd-radio--disabled{cursor:not-allowed}sd-radio .sd-radio--disabled .sd-radio__label{color:var(--sd-radio-label-disabled-color)}sd-radio .sd-radio--disabled .sd-radio__circle{background:var(--sd-radio-disabled-bg);border-color:var(--sd-radio-disabled-border)}sd-radio .sd-radio--disabled.sd-radio--checked .sd-radio__circle::after{background:var(--sd-radio-disabled-dot)}sd-radio-group{display:inline-block}sd-radio-group .sd-radio-group{display:flex}sd-radio-group .sd-radio-group--vertical{flex-direction:column;gap:var(--sd-radio-radio-group-gap-vertical)}sd-radio-group .sd-radio-group--horizontal{flex-direction:row;align-items:center;gap:var(--sd-radio-radio-group-gap-horizontal)}`;
 
 const SdRadioGroup = class {
     constructor(hostRef) {
@@ -1262,6 +1315,314 @@ const SdRadioGroup = class {
 };
 SdRadioGroup.style = sdRadioGroupCss();
 
+const sdSelectCss = () => `sd-select{display:inline-flex}sd-select sd-portal{display:none}sd-select .sd-select{position:relative;width:100%;height:100%}`;
+
+const SdSelect = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.update = createEvent(this, "sdUpdate", 7);
+        this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
+    }
+    static VIEWPORT_PADDING = 20;
+    static PORTAL_OFFSET_Y = 4;
+    static CLOSE_ANIMATION_DURATION = 150;
+    get el() { return getElement(this); }
+    /** 셀렉트 타입 (단일/다중/계층) */
+    type = 'default';
+    /** 현재 선택된 값 */
+    value = null;
+    /** 선택 옵션 목록 */
+    options = [];
+    /** 값이 없을 때 표시할 플레이스홀더 */
+    placeholder = '선택';
+    /** 드롭다운 너비 (없으면 트리거 너비로 자동 맞춤) */
+    dropdownWidth = '';
+    /** 드롭다운 최대 너비 */
+    maxDropdownWidth = '640px';
+    /** 드롭다운 최대 높이 */
+    dropdownHeight = '260px';
+    /** 비활성 상태 여부 */
+    disabled = false;
+    /** 레이블 텍스트 */
+    label = '';
+    /** 레이블 너비 */
+    labelWidth = '';
+    /** 필드 우측 어드온 레이블 */
+    addonLabel = '';
+    /** 어드온 정렬 방향 */
+    addonAlign = 'start';
+    /** 에러 상태 여부 */
+    error = false;
+    /** 필드 하단 힌트 텍스트 */
+    hint = '';
+    /** 에러 메시지 */
+    errorMessage = '';
+    /** 유효성 검사 규칙 목록 */
+    rules = [];
+    /** 레이블 영역 아이콘 */
+    icon = undefined;
+    /** 레이블 툴팁 텍스트 */
+    labelTooltip = '';
+    /** 레이블 툴팁 상세 옵션 */
+    labelTooltipProps = null;
+    /** true이면 value로 SelectOption 대신 원시값(string|number) 방출 */
+    emitValue = false;
+    /** 필드 너비 */
+    width = '';
+    /** 드롭다운 내 검색 입력 표시 여부 */
+    useSearch = false;
+    /** 전체 선택 시 표시할 레이블 */
+    allSelectedLabel = '전체';
+    /** 전체 선택 체크박스 표시 여부 */
+    useSelectAll = false;
+    isOpen = false;
+    isAnimatingOut = false;
+    triggerWidth = '200px';
+    resolvedDropdownHeight = '260px';
+    resolvedMaxDropdownWidth = '640px';
+    focused = false;
+    hovered = false;
+    /** 선택 값이 변경될 때 발생합니다. */
+    update;
+    /** 드롭다운 열림/닫힘 상태가 바뀔 때 발생합니다. */
+    dropDownShow;
+    /** 셀렉트 트리거에 포커스를 이동합니다. */
+    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;
+    }
+    triggerRef;
+    triggerComponentRef;
+    closeAnimationTimer;
+    /** 폼 연동용 name 속성 */
+    name = nanoid();
+    triggerHasFocus = false;
+    watchIsOpen(newValue) {
+        this.syncFocusedState(newValue);
+        this.dropDownShow.emit({ isOpen: newValue });
+    }
+    get isMulti() {
+        return this.type === 'multi' || this.type === 'multi_depth';
+    }
+    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);
+        return flat.find(o => o.value === this.value)?.label ?? '';
+    }
+    flattenOptions(options) {
+        return options.flatMap(o => (o.children ? this.flattenOptions(o.children) : [o]));
+    }
+    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 == null || !Array.isArray(val))
+            return [];
+        if (this.emitValue) {
+            return val
+                .map(v => this.findOriginalOption(v, this.options))
+                .filter((o) => !!o);
+        }
+        return val;
+    }
+    toMultiValue(options) {
+        return this.emitValue ? options.map(o => o.value) : options;
+    }
+    parsePixelValue(value, fallback) {
+        const parsed = Number.parseFloat(value);
+        return Number.isFinite(parsed) ? parsed : fallback;
+    }
+    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`;
+    }
+    handleViewportResize = () => {
+        if (!this.isOpen)
+            return;
+        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;
+            }
+        }
+        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);
+    }
+    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();
+    };
+    handleTriggerClick = () => {
+        if (this.isOpen) {
+            this.closeDropdown();
+            return;
+        }
+        this.prepareDropdownGeometry();
+        if (this.closeAnimationTimer)
+            clearTimeout(this.closeAnimationTimer);
+        this.isAnimatingOut = false;
+        this.isOpen = true;
+    };
+    emitUpdate(value) {
+        this.update.emit(value);
+    }
+    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);
+    }
+    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: '13ca7b4ddb0e124e90dd2b843df9a11b7cc98487', 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: '3892e98679d28ed6199578f1033571fec2137143', class: "sd-select", ref: el => {
+                this.triggerRef = el;
+            } }, h("sd-select-trigger", { key: '150dda9f50762bedc538181d8c1e5623e8d3fbac', 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: '554e158719e791600a6215223a5c0c7ac289b00a', ...portalProps }, h("sd-select-listbox", { key: 'c309fdfc53ff0c970ff33eb9eeec58636a869408', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.dropdownWidth || this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+    }
+    static get watchers() { return {
+        "isOpen": [{
+                "watchIsOpen": 0
+            }]
+    }; }
+};
+SdSelect.style = sdSelectCss();
+
 const TEXTAREA_TOKENS = {
     paddingX: inputTokens.textinput.sm.paddingX,
     paddingY: inputTokens.textinput.sm.paddingY,
@@ -1422,7 +1783,7 @@ const SdTextarea = class {
             '--sd-system-size-field-sm-height': 'auto',
             '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
         };
-        return (h("sd-field", { key: '7adbc4a04c59f162182c87dfcccca82ec0dd4484', 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, readonly: this.readonly, 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("div", { key: 'd4d6c7b39595b40ab6f584aab2b46f4aca184477', class: "sd-textarea__content" }, h("textarea", { key: 'ea2b0526aecd0dd095a9fef6dd0225d6bddc4926', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
+        return (h("sd-field", { key: '2f967ed7e9d9e419376162f9569847b931f126d5', 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, readonly: this.readonly, 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("div", { key: 'aa4f554c200a1b0aeadf4cac635facfabb158b90', class: "sd-textarea__content" }, h("textarea", { key: 'fe0026af57e40e6d4fb8e16c87985352de401fa5', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
     }
     static get watchers() { return {
         "value": [{
@@ -1435,4 +1796,4 @@ const SdTextarea = class {
 };
 SdTextarea.style = sdTextareaCss();
 
-export { SdDatePicker as sd_date_picker, SdDateRangePicker as sd_date_range_picker, SdFilePicker as sd_file_picker, SdInput as sd_input, SdNumberInput as sd_number_input, SdRadioGroup as sd_radio_group, SdTextarea as sd_textarea };
+export { SdDatePicker as sd_date_picker, SdDateRangePicker as sd_date_range_picker, SdFilePicker as sd_file_picker, SdInput as sd_input, SdNumberInput as sd_number_input, SdRadioGroup as sd_radio_group, SdSelect as sd_select, SdTextarea as sd_textarea };

package/dist/esm/sd-date-range-picker-calendar.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-BZg-6aSz.js';
-import { u as useDatePicker, t as today, W as WEEK_LABELS, C as CALENDAR_LAYOUT } from './useDatePicker-DoUg--aq.js';
-import { d as datepickerTokens } from './component.datepicker-laVsm9VM.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-Dz490Ukt.js';
+import { u as useDatePicker, t as today, W as WEEK_LABELS, C as CALENDAR_LAYOUT } from './useDatePicker-BG0lUGJG.js';
+import { d as datepickerTokens } from './component.datepicker-BOxGhKKP.js';
 
 const RANGE_LAYOUT = {
     bg: datepickerTokens.datepicker.calendar.range.bg,
@@ -270,7 +270,7 @@ const SdDateRangePickerCalendar = class {
             '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
             '--range-divider': RANGE_LAYOUT.divider,
         };
-        return (h(Fragment, { key: '4502cc08eb9df7c24cdc9f22564fb2a4a0b2736e' }, h("div", { key: '9da4356920cbce83c548a4c5f40cb2af9e36a257', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: 'a8117206cd3d9368a86f4cc307037461c1314aad', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: '0f6cbaf53781429b3de08aa992a45f2c26444625', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
+        return (h(Fragment, { key: '21999354836fc4068eecc9d115fb4c5e28a8f411' }, h("div", { key: '1bc993c9e5cb6f02152591c3f70b68fb580a392b', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: '09564bf7c14a55c7be56726fefbb6cec793df783', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: '5d8910e7c463c33ad8719a293a616b7f50095532', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
     }
     static get watchers() { return {
         "value": [{

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host } from './index-BZg-6aSz.js';
-import { s as systemTokens } from './system-BJfiMC9H.js';
+import { r as registerInstance, h, H as Host } from './index-Dz490Ukt.js';
+import { s as systemTokens } from './system-Bth2l1cy.js';
 
 const DIVIDER_COLORS = {
     default: systemTokens.color.divider.default,
@@ -17,7 +17,7 @@ const SdDivider = class {
         const hostStyle = {
             '--sd-divider-color': DIVIDER_COLORS.default,
         };
-        return (h(Host, { key: '73be9d4cc38b230e4cff7f8ebcdc81bd2d56e0e7', style: hostStyle }, h("hr", { key: 'a4da09faca453df8cb6ea3ed00609d4e0c238a7a', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
+        return (h(Host, { key: 'b19941ad314f31fccf77ea0dd3373f9e3362ecd2', style: hostStyle }, h("hr", { key: 'bbc765fc901298fbacb8323fecd8fd1ca4683d19', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
     }
 };
 SdDivider.style = sdDividerCss();

package/dist/esm/sd-dropdown-button.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BZg-6aSz.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Dz490Ukt.js';
 import { s as sanitizeInlineHtml } from './sanitize-inline-html-BE4tnQ2Z.js';
 import { B as BUTTON_CONFIG, g as getPresetName, f as buttonTokens, d as PRESET_BORDER_COLORS$1, P as PRESET_ICON_COLORS$1, c as PRESET_TEXT_COLORS$1, e as PRESET_HOVER_BACKGROUNDS$1, b as BUTTON_FOCUS_RING_COLOR } from './sd-button.config-ClMlDGkX.js';
-import { s as systemTokens } from './system-BJfiMC9H.js';
+import { s as systemTokens } from './system-Bth2l1cy.js';
 
 class DropdownManager {
     static instance;