@sellmate/design-system 1.28.0 → 1.29.0

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

@@ -1,10 +1,10 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-DDNBPrZh.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%}`;
 
@@ -128,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": [{
@@ -603,24 +603,24 @@ const SdFilePicker = class {
             '--sd-system-radius-field-sm': `${FILE_PICKER_LAYOUT.radius}px`,
         };
         const showListbox = this.multiple && this.useMultipleListBox;
-        const content = (h("div", { key: '692bb28ba1adaa90317e18c6b824ab7d2287eb96', role: "button", tabindex: this.disabled ? -1 : 0, class: "sd-file-picker__content", ref: el => (this.contentRef = el), onClick: this.handleClick, onKeyDown: e => {
+        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: '7a1cddff8097952c0c9eda9ae8d1b46b4a18967e', 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: '2f7dffb5bfc39efb0eace252a45aaaa23091d337', name: "attachFile", size: Number(FILE_PICKER_LAYOUT.iconSize), color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: '1a6ae3daa59c7befebcfcfdcbbb2c46a32c6c40c', 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), showListbox && hasFiles && !this.disabled && (h("sd-ghost-button", { key: '895eafa47b1e1d851794fd471b304f8458bcac0f', icon: "caretDown", size: "xxs", ariaLabel: "toggle file list", disabled: this.disabled, 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: '38d3fe31be05ae66a170671ffb4855bce4984630', 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: 'bb94815d7149ce9f1117828f893224c8bc1dbc50', class: "sd-file-picker__tooltip" }, displayText))));
-        return (h("div", { key: '3ada174508214a9fafd4f7f228ff52eb60aa76e4', class: {
+            }, 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: '29314b3ba5fc7c6b7d2f1a93a14381d9fb91bcfc', 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()));
+            }, 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": [{
@@ -816,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: '7ec67f4433bff2a7d2f1b44935f761d79f0e8681', 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: '6c0118c2610f06d13d4a38a857bf37c7ad9508d0', class: "sd-input__content" }, h("slot", { key: '31cd8fe72ab21cb7a562accff98545fdf59efa80', name: "prefix" }), h("input", { key: '47579f31e9255bda6d5623eca8071ffdafd0ca55', 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: 'f2d6e313c8c542d88c252e26cbb2618977fda5fa', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: 'b24cb32d5963b244aef76e31f1c0f350d316be5c', 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: '9592350fd3820fa8c8af637cb84f2d4517d6decd', 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;
@@ -1245,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: '9e82f7ec1e40c7f435233d1d8e05fdd2de0c2712', 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: 'b5f2e1c32bbba8147a72edf2dfe42f591d81d6f7', 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: '07e053c769556282da7595ba7d185db7c9af19a2', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '95b48b8a0fa45ff60b3097d24405b48e4776b928', 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: '2381fade9767b593d5f6848bc411c3244a6f9da2', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: '00b886990e9c1155c20ee404eda26777e56d31c2', 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: '5254313e957f3ded4139f047b588e38222c33975', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: 'f7389a1c5869460791249f579b3195b3583255fe', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: 'b272b62e2ce27a1e5ecb86738af6eacb89b0d6c6', 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 }))))));
     }
@@ -1315,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,
@@ -1475,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: '2ad9f1d11282bcbf4da1d365e8084b3e6dd1a434', 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: '8e70c87579b4d2ec7908b749867ba090cd4ca743', class: "sd-textarea__content" }, h("textarea", { key: 'fe72f7208a22c8f36786cb53b8bbf18e5d7cf939', 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": [{
@@ -1488,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-DDNBPrZh.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-DDNBPrZh.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-DDNBPrZh.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;

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, a as getElement, h, c as createEvent, F as Fragment } from './index-DDNBPrZh.js';
+import { r as registerInstance, a as getElement, h, c as createEvent, F as Fragment } from './index-Dz490Ukt.js';
 import { f as fieldTokens } from './component.field-DjKOoQuF.js';
-import { T as TooltipArrow } from './tooltipArrow-blL0aWPE.js';
+import { T as TooltipArrow } from './tooltipArrow-CEHVt90h.js';
 
 const FIELD_ADDON_ALIGN_MAP = {
     start: 'flex-start',
@@ -242,19 +242,19 @@ const SdField = class {
                     : {}),
             }
             : {};
-        return (h("div", { key: 'bce0bc8ccc19e41c2a61980bd12f07d7f8838569', class: {
+        return (h("div", { key: '7474477aa89e459e5f31cc085e855db6d1851822', class: {
                 'sd-field': true,
                 'sd-field--has-label': this.label !== '',
                 'sd-field--has-addon': addon !== '',
                 'sd-field--borderless': this.borderless,
                 [this.fieldStatus]: this.fieldStatus !== '',
-            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, h("div", { key: 'c6c4e3ec6e018ebd0dc6fbbae5fbaef4ea6503e5', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'bd778a24325412924e0a331db592535e4b4e542b', class: "sd-field__main" }, h("div", { key: '485cfbdbfa7299cb27d84e61306d6e2cf196d071', class: {
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, h("div", { key: '9bea489357731d9630753e552a73e98ff85a47d8', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '582b762cea494f2987381eebfcdd9cab9c6dd3e0', class: "sd-field__main" }, h("div", { key: '24f1b2ffa75077573178de296be26c48d5f36958', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': addon !== '',
             }, style: this.width !== '' && this.width !== 0
                 ? { width: typeof this.width === 'number' ? `${this.width}px` : this.width }
-                : {} }, addon && (h("div", { key: '510238ac22b7e923724cc20abf2541adbddcb594', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: '2cca5b62cbe56050acd536764c33cbc3009f740b', name: this.icon.name, size: this.icon.size ??
-                Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), h("slot", { key: '470c0d559409a11f1c5650e88a50555a4656d3f9' })), this.errorMsg !== '' || this.errorMessage !== '' ? (h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && h("div", { class: "sd-field__hint" }, this.hint))))));
+                : {} }, addon && (h("div", { key: 'ace4b56d75bbaff3335694b6549b383a023d9125', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: 'aba7a6c3834f73be2c1be1e82f4673aad317c383', name: this.icon.name, size: this.icon.size ??
+                Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), h("slot", { key: '4a3776fc53bc003cc5b54696a8353668ce306a0c' })), this.errorMsg !== '' || this.errorMessage !== '' ? (h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && h("div", { class: "sd-field__hint" }, this.hint))))));
     }
     renderLabel(label) {
         if (label == null || label === '')
@@ -445,7 +445,7 @@ const SdFloatingPopover = class {
         }
     }
     render() {
-        return h("slot", { key: '7bdfc66c7baa0a195d1c0438e6bdd0705a7e5ffd' });
+        return h("slot", { key: '3a3234d89652728a077681775de4f8c14141ab2d' });
     }
 };
 SdFloatingPopover.style = sdFloatingPortalCss();
@@ -621,7 +621,7 @@ const SdTooltip = class {
         const bodyHTML = this.message && this.message.length > 0
             ? this.message.map(line => `<div>${line}</div>`).join('')
             : this.slotContentHTML;
-        return (h(Fragment, { key: '107b6b1440f67af45a464b40087332516629307e' }, h("div", { key: 'fc25ef3729300faabb5ce8b2c6b68ecded179231', ref: el => (this.triggerEl = el), class: triggerClasses, ...divTrigger }, anchorMode ? (h("slot", { name: "anchor" })) : hasLabel ? (h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (h("sd-floating-portal", { key: '05260374115f355f0fda28e02cf4a3a04e0dff42', parentRef: anchorMode ? this.triggerEl : this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, h("div", { key: '49a4403383ff133755e0347a27c5552e7b2ed73a', ref: el => (this.menuEl = el), class: {
+        return (h(Fragment, { key: '9c6adbf151f6c36536406809cf8714db7ced8d5e' }, h("div", { key: '38abb48e4f209a6ef8d587c3b0d9c9158e76f7c3', ref: el => (this.triggerEl = el), class: triggerClasses, ...divTrigger }, anchorMode ? (h("slot", { name: "anchor" })) : hasLabel ? (h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (h("sd-floating-portal", { key: '178f37ef8d28dcdbc527f9d3f8b2bdc45774afd4', parentRef: anchorMode ? this.triggerEl : this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, h("div", { key: '4d2990d20f35694c95b6627d6ddee106d9b707c2', ref: el => (this.menuEl = el), class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${tooltipType}`]: true,
                 [`sd-floating-menu--${placement}`]: true,
@@ -629,7 +629,7 @@ const SdTooltip = class {
             }, style: {
                 '--sd-floating-bg': typeConfig.bg,
                 '--sd-floating-content': typeConfig.content,
-            }, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, h("i", { key: '7944b50d1b97f97689572f672e86c80c0a4d516e', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '582508e26720f9890fec206b5d78a054797d85d1' })), h("div", { key: 'a4555d1a0fc7a6c76206626fe8e7dec897a07e74', class: "sd-floating-menu__content", innerHTML: bodyHTML }), this.useClose && (h("sd-ghost-button", { key: '2852500a51166b6b851fd7361f75e16d1bcb9d5c', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xxs", onClick: () => this.closeTooltip() })))))));
+            }, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, h("i", { key: 'ee1366c6550c30c9a9a741763bef9a3dfe8ee4e1', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '7d0ea9d040b56e4a136b448144b447154372a526' })), h("div", { key: '1e62996b156a848cf0b202740602258aa8e5c6c7', class: "sd-floating-menu__content", innerHTML: bodyHTML }), this.useClose && (h("sd-ghost-button", { key: '86e6796421c16a970cee038d72386f68972733e1', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xxs", onClick: () => this.closeTooltip() })))))));
     }
 };
 SdTooltip.style = sdTooltipCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-DDNBPrZh.js';
+import { r as registerInstance, c as createEvent, h } from './index-Dz490Ukt.js';
 
 const SdForm = class {
     constructor(hostRef) {

package/dist/esm/sd-ghost-button_3.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-DDNBPrZh.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-Dz490Ukt.js';
 
 const ghostButton = {
 	xxs: {
@@ -697,7 +697,7 @@ const SdTag = class {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
         const width = this.resolvedWidth;
-        return (h(Host, { key: '37bb1fefd51f583b0a9dde9fe46cf843a48e8e13', style: width != null ? { '--sd-tag-width': width } : undefined }, h("span", { key: 'e996471849834802eaeff02abaadee1a2addac4f', class: "sd-tag", style: {
+        return (h(Host, { key: '9eb41b65a887a524d22e0a2663292de1f12674f6', style: width != null ? { '--sd-tag-width': width } : undefined }, h("span", { key: '2c08b419141250c00e6ef1aec1c691c1a41434c0', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -707,7 +707,7 @@ const SdTag = class {
                 '--sd-tag-font-weight': config.fontWeight,
                 '--sd-tag-line-height': config.lineHeight,
                 '--sd-tag-radius': config.radius,
-            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: '2e63073d1950046747521071ba5db5f9a404acef', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode)));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: '5041322f15e5273cc3129f57958dc97fdce8c50c', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode)));
     }
 };
 SdTag.style = sdTagCss();

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, a as getElement, h } from './index-DDNBPrZh.js';
-import { s as systemTokens } from './system-BJfiMC9H.js';
+import { r as registerInstance, a as getElement, h } from './index-Dz490Ukt.js';
+import { s as systemTokens } from './system-Bth2l1cy.js';
 import { s as sanitizeInlineHtml } from './sanitize-inline-html-BE4tnQ2Z.js';
 
 const guide = {