@sellmate/design-system 1.0.25 → 1.0.27

package/dist/cjs/sd-button_21.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
 var index = require('./index-Qvv0fGgj.js');
-var component_button = require('./component.button-C6xBMwHf.js');
-var resolveColor = require('./resolveColor-4RlaGD62.js');
+var component_button = require('./component.button-ASC_hRm6.js');
+var resolveColor = require('./resolveColor-Di1RNekE.js');
 var useDatePicker = require('./useDatePicker-cK_XK_P6.js');
 var selectKeyboardNavigation = require('./select-keyboard-navigation-s2wP37xZ.js');
 var baseDropdownEvent = require('./base-dropdown-event-BTPlZ1KF.js');
@@ -373,10 +373,10 @@ const SdDateRangePicker = class {
         this.setHoverDate(hoverDate);
     }
     render() {
-        return (index.h("div", { key: '1862958ea2e972700ea83ed61f0285f09cf52c02', class: {
+        return (index.h("div", { key: '80ba555e36642dabe58a34a344ec751684307eb6', class: {
                 'sd-date-range-picker': true,
                 'sd-date-range-picker--disabled': this.disabled,
-            } }, index.h("sd-input", { key: '808670f22b59401c0125dd1191a6180cc6f72799', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, index.h("sd-icon", { key: '123e8beb77c3fceaaa3a8d994f8a8539fe35d317', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: '448c174030598565f910df316002d78bdfec3f89', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, index.h("div", { key: 'b5cf493587c7831e59a6156df87cb56be6bd585b', class: "sd-date-range-picker__menu" }, index.h("div", { key: 'c044d5377d0d88affecaa61eec2a2239b87158d8', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, index.h("button", { key: 'c497891fe1d06b8f6c1a79000edc0e4f4fd79735', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, index.h("sd-icon", { key: 'ad899e9daec0752b744bc73e9cbd99c6a731b7db', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("div", { key: '595ac699adc90e8b15775ce47a2cda8bbc2f5c25', class: "header-label" }, this.prevYear), index.h("button", { key: '684ce75f14b08cd57ce6f019a1dfb3ab384b0c11', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, index.h("sd-icon", { key: '31dde7526d0ee3e7abf965eea6f825d557e7c745', name: "arrowRight", size: "12", color: "#CCCCCC" }))), index.h("div", { key: '3e70334c95d29f302f2dc6d1cb7fbb3603c74a48', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index$1) => (index.h(index.Fragment, null, index$1 === 1 && index.h("div", { class: "separator" }), index.h("div", { key: index$1, class: "calendar-container" }, index.h("div", { class: "calendar-header" }, index.h("button", { type: "button", name: "month", title: "Month", class: index$1 === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index$1 === 0 ? 'prev' : 'next') }, index.h("sd-icon", { name: index$1 === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index$1 === 0
+            } }, index.h("sd-input", { key: '12c5dca1cfad0dafee1531c62be818d4cd8f12c2', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, index.h("sd-icon", { key: 'a62fa8ce117ff983062d5d39b927692c8088781d', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: 'e79962823af4c29121c18236d886199268a03eb3', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, index.h("div", { key: '7c5fe668dabda4cf5219bcfd062997a8f5337cfa', class: "sd-date-range-picker__menu" }, index.h("div", { key: '33b5d471d9db5f703b6f846442e27dd5425775bb', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, index.h("button", { key: 'd54d8f953be79447ee708404329178d9e1ad3a23', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, index.h("sd-icon", { key: '64444f120884efa30f9b58944cd9bc8918648aaf', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("div", { key: '0ae2129755ba9a30bb41522893bd1d27905e6666', class: "header-label" }, this.prevYear), index.h("button", { key: '7d8f3627e72869fd35e964e0c555680d47744f5c', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, index.h("sd-icon", { key: 'caeb87d6cac5b5c89bc65c97d60f5b45b55becb1', name: "arrowRight", size: "12", color: "#CCCCCC" }))), index.h("div", { key: '958cd5ed27b2f1a72214c4e2426dc60349e65c50', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index$1) => (index.h(index.Fragment, null, index$1 === 1 && index.h("div", { class: "separator" }), index.h("div", { key: index$1, class: "calendar-container" }, index.h("div", { class: "calendar-header" }, index.h("button", { type: "button", name: "month", title: "Month", class: index$1 === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index$1 === 0 ? 'prev' : 'next') }, index.h("sd-icon", { name: index$1 === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index$1 === 0
             ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
             : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), index.h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (index.h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), index.h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (index.h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date === this.formatDate(index$1, Number(day))), type: this.getDateBoxType(this.formatDate(index$1, Number(day))), isToday: useDatePicker.today === this.formatDate(index$1, Number(day)), disabled: !day ? true : this.isDisabledDate(this.formatDate(index$1, Number(day))), inRange: this.isDateInRange(this.formatDate(index$1, Number(day))), isStartDate: this.dateRange[0] === this.formatDate(index$1, Number(day)), isEndDate: this.dateRange[1] === this.formatDate(index$1, Number(day)), onSdClick: () => this.handleDateClick(index$1, Number(day)), onSdMouseOver: () => this.handleDateHover(index$1, Number(day)) }))))))))))))));
     }
@@ -508,15 +508,15 @@ const SdField = class {
         }
     }
     render() {
-        return (index.h("div", { key: '9ed0e615761d5c76dff1e95318b131bde22cd376', class: {
+        return (index.h("div", { key: 'd92c9080fdf4c060dcded1c17af36bec35d3b6ce', class: {
                 'sd-field': true,
                 'sd-field--has-label': !!this.label,
                 'sd-field--has-label-inside': !!this.label && this.insideLabel,
                 [this.fieldStatus]: !!this.fieldStatus,
-            } }, index.h("div", { key: '6d051479c9874f3c765d50096db80c73c4fc461b', class: "sd-field__wrapper" }, this.renderLabel(this.label), index.h("div", { key: '64ea18d481f0ad689ed984cd40837717fb37a751', class: {
+            } }, index.h("div", { key: '2c07af0bdc9490177d030b670e67a128563af488', class: "sd-field__wrapper" }, this.renderLabel(this.label), index.h("div", { key: '5fa2079b2123688c0eab63780b55e70fe9f4a77b', class: {
                 'sd-field__control': true,
                 'sd-field__control--label-inside ': !!this.label && this.insideLabel,
-            } }, index.h("slot", { key: '8e043b3e476e0d574612c892f6c8c0bca28c117f' }))), this.errorMsg && index.h("div", { key: '22d42bacdbdfe85dbe08395d21e59a06946986f5', class: "sd-field__error-message" }, this.errorMsg)));
+            } }, index.h("slot", { key: '2b0b3240afe20e1759853928fcd2846d1321262b' }))), this.errorMsg && index.h("div", { key: 'f932da0af97a7d1e2253bdc5a64a8269fa55625d', class: "sd-field__error-message" }, this.errorMsg)));
     }
     renderLabel(label) {
         if (!label)
@@ -526,7 +526,7 @@ const SdField = class {
 };
 SdField.style = sdFieldCss();
 
-const sdFloatingPortalCss = () => `.sd-floating-menu{width:fit-content;padding:12px 20px;border-radius:4px;font-size:12px;position:relative;box-sizing:border-box;background:#07284A;color:#FFFFFF}.sd-floating-menu .sd-floating-menu__arrow{color:#07284A}.sd-floating-menu--default{background:#07284A;color:#FFFFFF}.sd-floating-menu--default .sd-floating-menu__arrow{color:#07284A}.sd-floating-menu--caution{background:#FCE6E6;color:#FB4444}.sd-floating-menu--caution .sd-floating-menu__arrow{color:#FCE6E6}.sd-floating-menu--notice{background:#FEF1EA;color:#FF6B00}.sd-floating-menu--notice .sd-floating-menu__arrow{color:#FEF1EA}.sd-floating-menu--accent{background:#E6F1FF;color:#0075FF}.sd-floating-menu--accent .sd-floating-menu__arrow{color:#E6F1FF}.sd-floating-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-floating-menu__arrow svg{width:100%;height:100%}.sd-floating-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-floating-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-floating-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-floating-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-floating-menu__content{font-size:12px;line-height:20px}.sd-floating-menu__content .sd-floating-menu__title{font-weight:700;margin-bottom:4px}.sd-floating-menu__content .sd-floating-menu__messages{font-weight:500}.sd-floating-menu__content .sd-floating-menu__buttons{margin-top:12px;display:flex;gap:8px;align-items:center}.sd-floating-menu__content .sd-floating-menu__buttons--1{justify-content:flex-end}.sd-floating-menu__content .sd-floating-menu__buttons--2{justify-content:space-between}.sd-floating-menu__close-button{position:absolute;top:16px;right:12px;padding:0;background:none;border:none;cursor:pointer}`;
+const sdFloatingPortalCss = () => `.sd-floating-menu{width:fit-content;padding:12px 16px;border-radius:6px;font-size:12px;font-weight:500;line-height:20px;position:relative;box-sizing:border-box;background:var(--sd-floating-bg, #07284A);color:var(--sd-floating-content, #FFFFFF)}.sd-floating-menu .sd-floating-menu__arrow{color:var(--sd-floating-bg, #07284A)}.sd-floating-menu--default{background:var(--sd-floating-bg, #07284A);color:var(--sd-floating-content, #FFFFFF);font-weight:500}.sd-floating-menu--default .sd-floating-menu__arrow{color:var(--sd-floating-bg, #07284A)}.sd-floating-menu--danger{background:var(--sd-floating-bg, #FCE6E6);color:var(--sd-floating-content, #FB4444);font-weight:700}.sd-floating-menu--danger .sd-floating-menu__arrow{color:var(--sd-floating-bg, #FCE6E6)}.sd-floating-menu--warning{background:var(--sd-floating-bg, #FEF1EA);color:var(--sd-floating-content, #FF6B00);font-weight:700}.sd-floating-menu--warning .sd-floating-menu__arrow{color:var(--sd-floating-bg, #FEF1EA)}.sd-floating-menu--accent{background:var(--sd-floating-bg, #E6F1FF);color:var(--sd-floating-content, #0075FF);font-weight:700}.sd-floating-menu--accent .sd-floating-menu__arrow{color:var(--sd-floating-bg, #E6F1FF)}.sd-floating-menu__arrow{position:absolute;display:flex;width:16px;height:12px}.sd-floating-menu__arrow svg{width:100%;height:100%}.sd-floating-menu__arrow--top{bottom:-12px;left:50%;transform:translateX(-50%)}.sd-floating-menu__arrow--bottom{top:-12px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-floating-menu__arrow--left{right:-12px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-floating-menu__arrow--right{left:-12px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-floating-menu__content{font-size:12px;line-height:20px}.sd-floating-menu__content .sd-floating-menu__title{font-size:14px;font-weight:700;line-height:24px;margin-bottom:4px}.sd-floating-menu__content .sd-floating-menu__messages{font-weight:500}.sd-floating-menu__content .sd-floating-menu__buttons{margin-top:12px;display:flex;gap:8px;align-items:center}.sd-floating-menu__content .sd-floating-menu__buttons--1{justify-content:flex-end}.sd-floating-menu__content .sd-floating-menu__buttons--2{justify-content:space-between}.sd-floating-menu--popover{padding:16px 20px}.sd-floating-menu--popover .sd-floating-menu__content{gap:4px}.sd-floating-menu--popover .sd-floating-menu__title{font-size:14px;font-weight:700;line-height:24px}.sd-floating-menu--popover .sd-floating-menu__messages{font-size:12px;font-weight:500;line-height:20px}.sd-floating-menu__close-button{position:absolute;top:12px;right:12px;padding:0;background:none;border:none;cursor:pointer}`;
 
 const SdFloatingPopover = class {
     constructor(hostRef) {
@@ -677,7 +677,7 @@ const SdFloatingPopover = class {
         this.close.emit();
     }
     render() {
-        return index.h("slot", { key: 'fe02da5ce55072c8fa313e467967f2a1c18f86bb' });
+        return index.h("slot", { key: '770ec3be9d1e2b830eaebfde37a664feafc3da3b' });
     }
 };
 SdFloatingPopover.style = sdFloatingPortalCss();
@@ -2691,7 +2691,7 @@ const SdIcon = class {
     }
     render() {
         const IconComponent = Icons[this.name]?.[this.size];
-        return (index.h("i", { key: '69b8654e2fd745282c1878306a5c464ba0995468', class: this.getIconClasses(), style: this.iconStyle }, index.h(IconComponent, { key: '64b00309d5ad7787c4fbf2c200719fd74062ccbd', color: this.resolvedColor })));
+        return (index.h("i", { key: '1c418bee61e2b1e7286c15cb489953cd6969639c', class: this.getIconClasses(), style: this.iconStyle }, index.h(IconComponent, { key: 'cf93af4d1a911a6da2bef0cdfea104cb74627ec8', color: this.resolvedColor })));
     }
 };
 SdIcon.style = sdIconCss();
@@ -2789,7 +2789,7 @@ const SdInput = class {
         }
     };
     render() {
-        return (index.h("sd-field", { key: '7f32214220ee8dc3e830597b84f846096b48b305', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, index.h("label", { key: '71b1f7ce70d475e28f1d9f29c9a49b3f2f548f53', class: "sd-input__content", style: { width: '100%' } }, index.h("slot", { key: 'c0c92d686b4cee0930716a47a701459c3afc41ff', name: "prefix" }), index.h("input", { key: '1cdacf0a76d118c0711bae5b1263650c195db838', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), index.h("slot", { key: '7786756fca59c02dfb159f10e2925f73b64f0366', name: "suffix" }), this.clearable && this.internalValue && (index.h("sd-icon", { key: '82b24cae340687d7412ec5210548ad92e33be744', name: "close", color: "grey_65", size: "16", class: "sd-input__clear-icon", onClick: async () => {
+        return (index.h("sd-field", { key: '3db7e60bfcf01accd87d3cab199bdc4f9cd6314b', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, index.h("label", { key: 'ed629d14db71ca2e5e129dbbe6c960d1c4bafc31', class: "sd-input__content", style: { width: '100%' } }, index.h("slot", { key: '7504feda5598a7d784a83fb8cf5d0991bd3999bc', name: "prefix" }), index.h("input", { key: '06aef31e033ddf688f03c4752302f83b4ca54f77', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), index.h("slot", { key: '3f933f1f844596b78bd5946833aa334840b65a01', name: "suffix" }), this.clearable && this.internalValue && (index.h("sd-icon", { key: '972e64c5369057cf4a409e5456a0f1e92b578477', name: "close", color: "grey_65", size: "16", class: "sd-input__clear-icon", onClick: async () => {
                 this.internalValue = '';
                 await this.formField?.sdValidate();
             } })))));
@@ -2816,7 +2816,7 @@ const SdLoadingSpinner = class {
         return resolveColor.resolveColor(this.color);
     }
     render() {
-        return (index.h(index.Fragment, { key: '2b60d18fe2f1dc23d90c5552202cdea60a91b2c0' }, index.h("svg", { key: 'd8e8716433c206019384899897b052d28d486f92', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, index.h("circle", { key: 'c9aaffe398dd40ccea3a2d8a89cb880e3eeb5a6d', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+        return (index.h(index.Fragment, { key: '5783716d94ef4a1dea295a4190660d98248c2ec4' }, index.h("svg", { key: '574752fdf4c55f4a77dcefac163e1e6651864963', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, index.h("circle", { key: '2591fabc88f588079a9ea98f91126f20737827df', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
     }
 };
 SdLoadingSpinner.style = sdLoadingSpinnerCss();
@@ -2858,7 +2858,7 @@ const SdModalCard = class {
         return modalClass;
     }
     render() {
-        return (index.h("div", { key: '0390932a29db512f09a47fbb030b1140410b6a73', class: this.getModalClass, style: { '--point-color': this.pointColor } }, this.useCloseButton && (index.h("sd-icon", { key: '338844b48a075507352a72a6f8784d912e1f51a0', class: "sd-modal-card__close-button", name: "close", size: "20", color: "grey_65", onClick: () => this.close.emit() })), this.type !== 'normal' && (index.h("sd-icon", { key: '5209a86ad65c6f255a37691897940d50b15d59e8', class: "sd-modal-card__icon", name: this.type === 'info' ? 'notificationOutline' : 'warningOutline', size: "32", color: this.type === 'info' ? 'brilliantblue_75' : 'red_75' })), index.h("h2", { key: '5586e88dd9882f89ccd3aff047435c7dc821cebc', class: "sd-modal-card__title" }, this.modalTitle), index.h("slot", { key: '0f12630ca6434885e4efc0810ae552dc0f0433b5' }, index.h("div", { key: '04af07e88d2b65274a3ca28b3975d496917f1139', class: `sd-modal-card__message-container` }, this.message.map(msg => (index.h("p", { class: "sd-modal-card__message" }, msg))))), index.h("div", { key: 'b81e9fae8781fe8e57c54c0b51adc141c13c7ba8', class: `sd-modal-card__button-container flex-${this.buttonFlexDirection}` }, this.buttonProps?.map(button => (index.h("sd-button", { sdClass: `sd-modal-card__button ${button.class || ''}`, variant: button.variant ? button.variant : 'outline', label: button.label, color: button.color, size: button.size, onSdClick: () => !button.type || button.type === 'confirm' ? this.confirm.emit() : this.close.emit() }))))));
+        return (index.h("div", { key: 'f0adc3cc3df163622ebfb4ecf24f871c89f4b676', class: this.getModalClass, style: { '--point-color': this.pointColor } }, this.useCloseButton && (index.h("sd-icon", { key: 'e281e73d5a31e3f3c688f7fa67cc6dab49e9105b', class: "sd-modal-card__close-button", name: "close", size: "20", color: "grey_65", onClick: () => this.close.emit() })), this.type !== 'normal' && (index.h("sd-icon", { key: 'a8d93fa991ad43d4f602662de048f2677e6f15f6', class: "sd-modal-card__icon", name: this.type === 'info' ? 'notificationOutline' : 'warningOutline', size: "32", color: this.type === 'info' ? 'brilliantblue_75' : 'red_75' })), index.h("h2", { key: '1462056d43620a2f7db1f3e6b26a9a10576cceb8', class: "sd-modal-card__title" }, this.modalTitle), index.h("slot", { key: '9c3b4860e7c4940356aa17353c437e711163434b' }, index.h("div", { key: 'db17a4b60ddaab999b0ed8fca546c336b6f4b597', class: `sd-modal-card__message-container` }, this.message.map(msg => (index.h("p", { class: "sd-modal-card__message" }, msg))))), index.h("div", { key: 'ada9c87b3cec0de87e795ed5de34d9b37acddd59', class: `sd-modal-card__button-container flex-${this.buttonFlexDirection}` }, this.buttonProps?.map(button => (index.h("sd-button", { sdClass: `sd-modal-card__button ${button.class || ''}`, variant: button.variant ? button.variant : 'outline', label: button.label, color: button.color, size: button.size, onSdClick: () => !button.type || button.type === 'confirm' ? this.confirm.emit() : this.close.emit() }))))));
     }
 };
 SdModalCard.style = sdModalCardCss();
@@ -3111,17 +3111,17 @@ const SdNumberInput = class {
         const inputStyles = {
             textAlign: this.useButton ? 'center' : 'right',
         };
-        return (index.h("sd-field", { key: 'e72a01e264aa4d680aa740f5098e3be9bb7ac8ac', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), style: inputWidth }, index.h("label", { key: '3006df4eaf22ecf7e9ad330270623ba7cbbf9c9a', class: {
+        return (index.h("sd-field", { key: '0e9e4da15a63aa6a3375b43757d607fcd087d55b', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), style: inputWidth }, index.h("label", { key: 'ed02f94f0d5f14161dbe951f72b66e7dc1603c47', class: {
                 'sd-number-input': true,
                 [this.getInputStatus()]: true,
                 'sd-number-input--with-buttons': this.useButton,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, index.h("input", { key: 'e52177d9c7266a1630d9287fdc155f12a5dc7cca', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__input ${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, style: inputStyles, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.useButton && (index.h("div", { key: '18f45963c22ee6a1cdd52e45b41191c3726328ce', class: "sd-number-input__buttons" }, index.h("button", { key: '73658fecb2300094b1880cae4595975b777b802a', type: "button", class: {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, index.h("input", { key: '5e80258cf2146431deecf23919de347eb5c29fb2', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__input ${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, style: inputStyles, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.useButton && (index.h("div", { key: 'd8293f93d5bb0f9bc88e9702df590526238820ac', class: "sd-number-input__buttons" }, index.h("button", { key: '8c945155ccc8faaf3737fd8fc1bdeb7e3e5694ec', type: "button", class: {
                 'sd-number-input__button': true,
                 'sd-number-input__button--decrement': true,
-            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, index.h("sd-icon", { key: 'd2b4d8eb6b7f5dd30ba704c7d7b35051a5b0df7b', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), index.h("button", { key: 'ddcd2255b7870657afbb6549cdc185a804aa3dbf', type: "button", class: {
+            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, index.h("sd-icon", { key: '91d31a14ff787c6dbe35f40ff5eb9eff3d7b4e02', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), index.h("button", { key: '0d54618d34e3fd06b7b89496e8f825137f9dd7a2', type: "button", class: {
                 'sd-number-input__button': true,
                 'sd-number-input__button--increment': true,
-            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, index.h("sd-icon", { key: '971098976698154e8e644a93265dc746177c2ce0', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
+            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, index.h("sd-icon", { key: '44c1021a4f5588ff473f9dc7cc696ec4526d4abd', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
     }
     static get watchers() { return {
         "value": [{
@@ -3209,12 +3209,12 @@ const SdPagination = class {
         }
     }
     render() {
-        return (index.h("div", { key: '8ab0a0f2dfb17154eaba138aa0688606500be296', class: this.paginationClasses }, index.h("div", { key: '04b985f2d3e06ef35b18d6d375021499f36952f1', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "pagination-info" }, index.h("span", { class: "current-page" }, this.currentPage), index.h("span", null, "/"), index.h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (index.h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (index.h("div", { key: '3113faf5d75fa4a13e267653cae820035270e652', class: this.paginationClasses }, index.h("div", { key: 'a770afe37da389511bbfda99324e7794ffa299f5', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "pagination-info" }, index.h("span", { class: "current-page" }, this.currentPage), index.h("span", null, "/"), index.h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (index.h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'pagination-btn': true,
                 'pagination-btn--selected': this.currentPage === n,
             }, disabled: this.currentPage === n, style: {
                 '--pagination-btn-width': `${this.buttonWidth}px`,
-            }, onClick: () => this.handlePageChange(n) }, n)))), index.h("div", { key: 'c2ef87605487622bed06cac8d13d180f4af23e76', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), index.h("div", { key: '7e3842b531373d6485ae8912addea1aa531ca891', class: "append-btns" }, this.renderNextButtons())));
     }
 };
 SdPagination.style = sdPaginationCss();
@@ -3269,7 +3269,7 @@ const SdPortal = class {
         this.wrapper = document.createElement('div');
         Object.assign(this.wrapper.style, {
             position: 'absolute',
-            zIndex: this.zIndex.toString(),
+            zIndex: (this.zIndex ?? 9999).toString(),
             transition: 'opacity 0.4s',
         });
         this.container.appendChild(this.wrapper);
@@ -3313,21 +3313,22 @@ const SdPortal = class {
                 width: window.innerWidth,
                 height: window.innerHeight,
             };
-            let top = parentRect.bottom + window.scrollY + this.offset[1];
-            let left = parentRect.left + window.scrollX + this.offset[0];
+            const offset = this.offset ?? [0, 4];
+            let top = parentRect.bottom + window.scrollY + offset[1];
+            let left = parentRect.left + window.scrollX + offset[0];
             // 화면 상하단 넘어갈 시 반전
-            if (parentRect.bottom + wrapperRect.height + this.offset[1] > viewport.height) {
-                top = parentRect.top + window.scrollY - wrapperRect.height - this.offset[1];
+            if (parentRect.bottom + wrapperRect.height + offset[1] > viewport.height) {
+                top = parentRect.top + window.scrollY - wrapperRect.height - offset[1];
             }
             if (top < window.scrollY) {
-                top = parentRect.bottom + window.scrollY + this.offset[1];
+                top = parentRect.bottom + window.scrollY + offset[1];
             }
             // 화면 좌우측 넘어갈 시 반전
-            if (parentRect.left + wrapperRect.width + this.offset[0] > viewport.width) {
-                left = parentRect.right + window.scrollX - wrapperRect.width - this.offset[0];
+            if (parentRect.left + wrapperRect.width + offset[0] > viewport.width) {
+                left = parentRect.right + window.scrollX - wrapperRect.width - offset[0];
             }
             if (left < 0) {
-                left = this.offset[0];
+                left = offset[0];
             }
             this.wrapper.style.top = `${top}px`;
             this.wrapper.style.left = `${left}px`;
@@ -3401,7 +3402,7 @@ const SdPortal = class {
         this.close.emit();
     }
     render() {
-        return index.h("slot", { key: 'ceaa6bed28e3b1bd1a539091434fd7acee6a0e4b' });
+        return index.h("slot", { key: '5fe94d224d2a647a1e7cb3fed1a42073b45a2525' });
     }
     static get watchers() { return {
         "open": [{
@@ -3440,7 +3441,7 @@ const SdRadio = class {
         this.update.emit(this.value);
     }
     render() {
-        return (index.h("div", { key: 'e741533dcd0e3b51ed3ee5db0524f7a53fcb38fb', "aria-label": this.val || 'radio option', "aria-checked": String(this.val) === String(this.value) ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: this.getRadioClasses() }, index.h("label", { key: `radio-${this.val}` }, index.h("input", { key: '52156b763ae108d34dea926987aae73c5996f980', type: "radio", name: this.val, value: String(this.val), checked: String(this.val) === String(this.value), disabled: this.disabled, onInput: ({ detail }) => this.handleRadioChange(detail) }), this.val && index.h("span", { key: '148a63e8861da5639f5655afd6cbf63637348fc5', class: "sd-radio-group__label" }, this.label || this.val))));
+        return (index.h("div", { key: '4044958bc2fd4812508ffc65b3cc42bc1091470a', "aria-label": this.val || 'radio option', "aria-checked": String(this.val) === String(this.value) ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: this.getRadioClasses() }, index.h("label", { key: `radio-${this.val}` }, index.h("input", { key: 'f7ee60381c34f4e9fe22c90c1a982a14d1b87880', type: "radio", name: this.val, value: String(this.val), checked: String(this.val) === String(this.value), disabled: this.disabled, onInput: ({ detail }) => this.handleRadioChange(detail) }), this.val && index.h("span", { key: '276b647bdc90f33443f0aa98a0a056be5b7eaa5d', class: "sd-radio-group__label" }, this.label || this.val))));
     }
 };
 SdRadio.style = sdRadioCss();
@@ -3584,7 +3585,7 @@ const SdSelect = class extends baseDropdownEvent.BaseDropdownEvent {
         }
     };
     render() {
-        return (index.h("sd-field", { key: 'ad737ef5facfd4f2c8dfdbfc2c97010aa82ba39e', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, insideLabel: this.insideLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, index.h("div", { key: 'ecff910f0d0d6b02f29c2f21a4264b1a573a9170', class: {
+        return (index.h("sd-field", { key: '331489106e60e2304ef08ab8bb9e0b92f883c14f', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, insideLabel: this.insideLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, index.h("div", { key: '790254f507e924fcb7a32620a2c0ea264f49a9ae', class: {
                 'sd-select': true,
                 'sd-select--disabled': this.disabled,
                 'sd-select--error': !!this.error,
@@ -3767,10 +3768,10 @@ const SdSelectDropdown = class {
         this.isScrolled = scrollTop > 0;
     };
     render() {
-        return (index.h("div", { key: '5e56cf091a3c3d510bf932933c33a8c3d85e23ef', class: {
+        return (index.h("div", { key: 'ff55e2e133114accc2641a0025bdcf551eda3511', class: {
                 'sd-select-dropdown': true,
                 'sd-select-dropdown--ready': this.isDropdownReady,
-            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (index.h("sd-select-search-input", { key: 'd965a2a5f31507fb6dca30968edf6334d42b4160', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index$1) => (index.h("slot", { name: `option-${option.value}` }, index.h("sd-select-option", { option: option, index: index$1, isSelected: this.isOptionSelected(option.value), isFocused: index$1 === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (index.h("slot", { name: "option-placeholder" }, index.h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
+            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (index.h("sd-select-search-input", { key: 'bfcee14aa06a9a259dd8e67013ed1074c1f9c318', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index$1) => (index.h("slot", { name: `option-${option.value}` }, index.h("sd-select-option", { option: option, index: index$1, isSelected: this.isOptionSelected(option.value), isFocused: index$1 === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (index.h("slot", { name: "option-placeholder" }, index.h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
     }
     static get watchers() { return {
         "filteredOptions": [{
@@ -3817,7 +3818,7 @@ const SdSelectOption = class {
         }
     };
     render() {
-        return (index.h("div", { key: '2f88e7ffe5bce12bc3f352d47d0ebed51a1c69ac', class: {
+        return (index.h("div", { key: 'a4fcca24b0bdde4f4665585c6cede84bd3b64d59', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,
@@ -3863,17 +3864,17 @@ const SdSelectSearchInput = class {
         input?.focus({ preventScroll: true });
     }
     render() {
-        return (index.h("div", { key: 'da5faa18fac3c974dcfef4050efe580edcb1bb42', class: {
+        return (index.h("div", { key: 'b19a029ef82d876c984c1f827d7a0f29bb823f5d', class: {
                 'sd-select-search-input': true,
                 'sd-select-search-input--scrolled': !!this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, index.h("sd-input", { key: 'c469ef89d7600626b19ecd94416849825736ff9f', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
+            }, onClick: event => event.stopPropagation() }, index.h("sd-input", { key: '8e27f40e1b507f0c5cb2d4bde48750cd0089a9da', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
                 this.searchInput.emit(String(event?.detail));
             }, onSdFocus: () => {
                 this.searchFocus.emit();
             }, onKeyDown: event => {
                 if (event.code === 'Enter')
                     event.stopPropagation();
-            } }, index.h("sd-icon", { key: '478a6adda3b53aabf614028bd57a8f987f93cdb6', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
+            } }, index.h("sd-icon", { key: '2b38a07cbc0bb0d7dd020ece45f18bdff4c262e5', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
     }
 };
 SdSelectSearchInput.style = sdSelectSearchInputCss();
@@ -4646,16 +4647,16 @@ const SdTable = class {
         return (index.h("td", { key: `virtual-${position}-spacer-${rowIdx}`, class: "sd-table__virtual-spacer", style: this.getSpacerCellStyle(spacerWidth), "aria-hidden": "true" }, index.h("div", { class: "sd-table__skeleton-cell" })));
     }
     render() {
-        return (index.h(index.Fragment, { key: 'd5568bc96a6ec0e973eda494deacceef6ec4bce9' }, index.h("div", { key: '8ec11dd8a4e0cd9f32a9dccd345711e64d10043a', class: "sd-table__wrapper", style: {
+        return (index.h(index.Fragment, { key: '882ded3f26849b023ade24914d2d88b7278a9d4a' }, index.h("div", { key: 'cdaaaed9dbda39eae701e2cbfa9f22fbcdc86cf1', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, index.h("div", { key: 'f96bbc29c77f6aaa46467d375a8a457938a27e13', class: "sd-table__container", style: {
+            } }, index.h("div", { key: '818b1f6f742861fe8515b2fd8bb826bbe357100f', class: "sd-table__container", style: {
                 '--table-container-height': `calc(${this.height} - ${this.pagination && this.innerRows.length > 0 ? 48 : 0}px)`,
-            } }, index.h("div", { key: 'fe66db102a053e90ffe02d26a28ac225e90f1ea3', class: {
+            } }, index.h("div", { key: 'b9fd1c56e1ab374ee7da80a82e1b96a2f1584eea', class: {
                 'sd-table__middle': true,
                 'sd-table__middle--scrollable': this.paginatedRows.length > 0,
                 'sd-table__middle--loading': this.isLoading,
-            } }, this.isLoading && (index.h("div", { key: '0851750dd88030f05e413bbdb6a7911bbc259d00', class: "sd-table__middle--loading__spinner" }, index.h("sd-loading-spinner", { key: '557674426413df32198427509c8f50921b268212' }))), index.h("table", { key: 'f04e1c387e34523c3a77137b82457ace6aeeb74b', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), !this.paginatedRows.length && (index.h("div", { key: 'aca217244defe434eb44cea583e1b2d7b17431ef', class: "sd-table__bottom" }, index.h("div", { key: '19a1049a467f9aec618324b0268803ddfa52e0d5', class: "sd-table__no-data" }, index.h("slot", { key: 'a2170c15879dc9124eb41985e902c0119b5e45c1', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (index.h("div", { key: '6a12ce1409f35ff6ec9dd737829b4678b2ce2920', class: "sd-table__pagination" }, index.h("sd-pagination", { key: 'cec76c2c6f7dc276565e17f25ed42ea2f1578b02', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (index.h("sd-select", { key: 'f868e4f6fc8f67e00d25914b189a82d342cc767a', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdUpdate: (e) => this.changeRowsPerPage(e.detail.value) })))))));
+            } }, this.isLoading && (index.h("div", { key: '30521e8896081a62ea96391bf7bc7f20103fc3ed', class: "sd-table__middle--loading__spinner" }, index.h("sd-loading-spinner", { key: 'db184565e08194d4f6a35da66aa011f0b7641d8a' }))), index.h("table", { key: 'c8585073a95c0391c14db74d54242998a648437d', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), !this.paginatedRows.length && (index.h("div", { key: '27d8471253fe0a1e6ee8637ed8aecaf1ce9071c2', class: "sd-table__bottom" }, index.h("div", { key: 'c35591b39ff87a55d38f9b0cb2b91fbd54081f0b', class: "sd-table__no-data" }, index.h("slot", { key: '0af141458219896bd93dbc7a195389d4a40cf654', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (index.h("div", { key: '981becdef62a000bd6d338428fa1e20b5205c77e', class: "sd-table__pagination" }, index.h("sd-pagination", { key: '47f042431c47d7dcdb3acfb2e4687d8c8e66ba6c', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (index.h("sd-select", { key: '0f9edc63cf7e119c9dc1e343ec043c28b36ee83d', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdUpdate: (e) => this.changeRowsPerPage(e.detail.value) })))))));
     }
     static get watchers() { return {
         "columns": [{
@@ -4773,10 +4774,10 @@ const SdTextarea = class {
     }
     render() {
         const maxLengthCounter = this.getMaxLengthCounter();
-        return (index.h("div", { key: '5f087de7fd28e3f5fa3315c37b8974e7f5878149', class: {
+        return (index.h("div", { key: 'b8d0496866829b85f6678f648ccc944d57b45378', class: {
                 'sd-textarea': true,
                 [this.getTextareaStatus()]: true,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, index.h("div", { key: 'fb9e5c4e98cadbf1a694bce4f9fed498bdc8e7cd', class: "sd-textarea__content" }, index.h("textarea", { key: 'b0414813c34a127becd94ec6fc2e516c375d8eea', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (index.h("div", { key: 'fe3f278f3a7d438f8fce8ca4043e00ec0220efd6', class: "sd-textarea__footer" }, this.helpText !== undefined && index.h("span", { key: '16d15de3ff1e49de16b67088d52f7f2848f2e283', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && index.h("span", { key: '84b4adbd09b7af30dbc68b5f3e6473e97fe4c76e', class: "sd-textarea__counter" }, maxLengthCounter)))));
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, index.h("div", { key: 'b43d91b1c7381a2b6c7a0ab1437e43e32396419c', class: "sd-textarea__content" }, index.h("textarea", { key: '9b77710a8344db09172f57212c55db6a70ec96f2', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (index.h("div", { key: '67056ceb0778d11a607cfc1de9de9440c98bd165', class: "sd-textarea__footer" }, this.helpText !== undefined && index.h("span", { key: 'bcdb6b7991cae0e68a21f04a53299952602e5039', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && index.h("span", { key: '526ff7bcd19688f086ef1f129008b4849a8d3491', class: "sd-textarea__counter" }, maxLengthCounter)))));
     }
     static get watchers() { return {
         "value": [{
@@ -4789,6 +4790,31 @@ const SdTextarea = class {
 };
 SdTextarea.style = sdTextareaCss();
 
+const tooltip = {
+	"default": {
+		bg: "#07284A",
+		content: "#FFFFFF"},
+	danger: {
+		bg: "#FCEFEF",
+		content: "#FB4444"},
+	warning: {
+		bg: "#FEF1EA",
+		content: "#FF6B00"},
+	accent: {
+		bg: "#E6F1FF",
+		content: "#0075FF"}
+};
+var tooltipTokens = {
+	tooltip: tooltip
+};
+
+const TOOLTIP_TYPE_CONFIG = {
+    default: { bg: tooltipTokens.tooltip.default.bg, content: tooltipTokens.tooltip.default.content },
+    danger: { bg: tooltipTokens.tooltip.danger.bg, content: tooltipTokens.tooltip.danger.content },
+    warning: { bg: tooltipTokens.tooltip.warning.bg, content: tooltipTokens.tooltip.warning.content },
+    accent: { bg: tooltipTokens.tooltip.accent.bg, content: tooltipTokens.tooltip.accent.content },
+};
+
 const sdTooltipCss = () => `sd-tooltip{visibility:hidden !important;display:inline-flex}sd-tooltip.visible{visibility:visible !important}sd-tooltip .sd-tooltip{position:relative;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}`;
 
 const SdTooltip = class {
@@ -4799,14 +4825,13 @@ const SdTooltip = class {
     trigger = 'hover';
     placement = 'top';
     color = '#01BB4B';
-    type = 'default';
+    tooltipType = 'default';
     icon = 'helpOutline';
     iconSize = 12;
     label = '';
     buttonSize = 'sm';
     buttonVariant = 'primary';
     noHover = true;
-    useClose = false;
     showTooltip = false;
     slotContentHTML = '';
     buttonEl;
@@ -4816,10 +4841,10 @@ const SdTooltip = class {
     componentWillLoad() {
         this.slotContentHTML = this.el.innerHTML;
         this.el.replaceChildren();
-        // 깜빡이는 현상을 막기 위해 기본으로 <sd-tooltip></sd-tooltip> hidden이 된 elment를 visible로 만들어줌
         this.el.classList.toggle('visible', true);
     }
     render() {
+        const typeConfig = TOOLTIP_TYPE_CONFIG[this.tooltipType] ?? TOOLTIP_TYPE_CONFIG.default;
         const handleTrigger = this.trigger === 'hover'
             ? {
                 onMouseEnter: () => (this.showTooltip = true),
@@ -4836,12 +4861,14 @@ const SdTooltip = class {
             : {
                 onSdClick: () => (this.showTooltip = !this.showTooltip),
             };
-        return (index.h(index.Fragment, { key: '1aefeca1e8e1e5da1ad3394dbc2cd5529c0ce854' }, this.label ? (index.h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...buttonTrigger })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (index.h("sd-floating-portal", { key: '65c83f4f0d03d17345e9c19b462dadb78f7ea83b', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: this.placement }, index.h("div", { key: 'ca2f15d29a5999842f39ef3bb5eefc6f8675e386', class: {
+        return (index.h(index.Fragment, { key: '59034499ad4215be8135ec8da7a86d09b2d6b295' }, this.label ? (index.h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...buttonTrigger })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (index.h("sd-floating-portal", { key: '53bae57a86e523feeba3d96246375dd62fa13b80', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: this.placement }, index.h("div", { key: '6d084515f879936e04f7210ae59e008bbe7e8dd6', class: {
                 'sd-floating-menu': true,
-                [`sd-floating-menu--${this.type}`]: true,
+                [`sd-floating-menu--${this.tooltipType}`]: true,
                 [`sd-floating-menu--${this.placement}`]: true,
-                'sd-floating-menu--with-close': this.useClose,
-            } }, index.h("i", { key: 'd118d136589ef1e421e03bae59b0a9d5bfbbb2ba', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '2a2e0599bcf1cd2261335d0c46297a7650ac30a2' })), index.h("div", { key: 'fced40f561dae6a81a9e5c9c4be44555db358745', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }), this.useClose && (index.h("div", { key: 'dec97887df051d3253f05f03190e145d0515b522', class: "sd-floating-menu__close-button" }, index.h("button", { key: '66cd01a3228a27abdc9e4d9e974fe90c91c6ad97', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: this.handleClose.bind(this) }, index.h("sd-icon", { key: 'bc179a3452f83d96a7a36ca12821c093f7f53527', name: "close", size: "12", color: "#AAAAAA" })))))))));
+            }, style: {
+                '--sd-floating-bg': typeConfig.bg,
+                '--sd-floating-content': typeConfig.content,
+            } }, index.h("i", { key: '38a80cb95be6bbd79dca41c36a9e48764bc8d3e7', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: 'e501bc5eab4cbe38a7f6c37202e2f10dc7f480c1' })), index.h("div", { key: '99346441a1cffa893312c98132dd819047500b69', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
     }
 };
 SdTooltip.style = sdTooltipCss();

package/dist/cjs/sd-card.cjs.entry.js

@@ -11,7 +11,7 @@ const SdCard = class {
     bordered = false;
     sdClass = '';
     render() {
-        return (index.h(index.Fragment, { key: '3999f64f54054b3a1662fac4aacf9f6898acb957' }, index.h("div", { key: '666b8e849b92a5e75d259ff079237911fd591cdd', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, index.h("slot", { key: 'dc8f4ae80e9aca7a0aecaed81f45d40e7df2c067' }))));
+        return (index.h(index.Fragment, { key: '01df653d1718aab046ee74275f13c926fbf05573' }, index.h("div", { key: '82dcf247f0f718328fa4f1c3548becff1c1d6fd3', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, index.h("slot", { key: '33b518500426f3abd40ee4a5719c8f784bfeb65a' }))));
     }
 };
 SdCard.style = sdCardCss();

package/dist/cjs/sd-date-picker.cjs.entry.js

@@ -84,7 +84,7 @@ const SdDatePicker = class {
         this.isOpen = false;
     };
     render() {
-        return (index.h("div", { key: 'cd2f9c240e1e67806d1d9334937a905330d29a1f', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, index.h("sd-input", { key: '1d77404494bd1fadf15d82dfabecbf61b73e5da8', ref: el => (this.inputEl = el), value: this.value, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, index.h("sd-icon", { key: '627b76b7d276cff34224a130bb2596ca6f2ff49e', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: '9dd006a9051c22dd8084ae9cb72e82c9c0b9be2b', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, index.h("div", { key: '5090eb945c7241f3224b3d2c7a5a96221cc46c04', class: "sd-date-picker__menu" }, index.h("div", { key: 'fa127745062937dfe4f04773b7d6afa74d13bd7a', class: "sd-date-picker__header" }, index.h("div", { key: '7c59917872614d1351a3dfe3783017bd6bc6b75c', class: "year-nav" }, index.h("button", { key: '9e27d2d76ca72820d57c2d9ebc40fa842129da22', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, index.h("sd-icon", { key: '17c8f872b7cfb2825d4c9528b5838487b97529f0', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("span", { key: '41999c78367c90bc4d1d9bfdeb6e3d29d44df2c2', class: "year-nav__current" }, this.currentYear), index.h("button", { key: '52953ec66118afd480e7ce6207a551f18b61ac6d', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, index.h("sd-icon", { key: 'e740bcc2a23f4df850b4e2579ce0cae14419313c', name: "arrowRight", size: "12", color: "#CCCCCC" }))), index.h("div", { key: '7fac86c6405a3936a1f0bdb51e5ca61463ef463a', class: "month-nav" }, index.h("button", { key: '62e22a2063c7ea972bf74ea08af0d519a5250b3f', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, index.h("sd-icon", { key: 'fa53cbb5f2e61a3b1f0807639ce2c81516a1ca57', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("span", { key: '57eb7eaf1e3a11ba69cf4ef4af9852541abd7902', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), index.h("button", { key: '08a783b73efd7a5df2638df7c8bcac5411b2e642', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, index.h("sd-icon", { key: '4a5bb4f4e6f3105fc9fda008eb51a47efe606b81', name: "arrowRight", size: "12", color: "#CCCCCC" })))), index.h("div", { key: '8dd540a7188716446b2e9bcda707d7458a2ea817', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (index.h("div", { key: day, class: "day" }, day)))), index.h("div", { key: 'f2da8d2325cb2fb9cb89d9c93d850cefc62235bf', class: "sd-date-picker__body" }, [
+        return (index.h("div", { key: '3cef7a7c9eeb6008003a70c863817330f1f9327d', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, index.h("sd-input", { key: '410d7911e51728fa60553f3fc3c50c144b55714c', ref: el => (this.inputEl = el), value: this.value, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, index.h("sd-icon", { key: '8f8911ccb8ce048d14550db0d693248d697dbd21', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: '41cbcd7a67305abf795e49f2faad0cfb01dd0e92', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, index.h("div", { key: 'b307cd035a8c99eeb2c0a5353f5131c218d800f9', class: "sd-date-picker__menu" }, index.h("div", { key: '7448c069921dad201e0b6701a260eb1fd4bfb217', class: "sd-date-picker__header" }, index.h("div", { key: 'ed1f0a9f59d528dd743f71c72106b8d7c0be07a4', class: "year-nav" }, index.h("button", { key: '364346026bfd1650b9ccb38fd9d996eea7486989', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, index.h("sd-icon", { key: 'a256a1adc87cdb5f7876cb76183825d82d87de19', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("span", { key: '60110caede0ed656cfa58ae1200b08de7631abca', class: "year-nav__current" }, this.currentYear), index.h("button", { key: '07f8040d822605f4461fd80dd3910ebd973060b7', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, index.h("sd-icon", { key: '820cd76287e851cb2a25db93183a0d90e71dfd9d', name: "arrowRight", size: "12", color: "#CCCCCC" }))), index.h("div", { key: '979262f63bb16e954a661b80e6cef155f329b651', class: "month-nav" }, index.h("button", { key: 'f9e93031b0b8e07067d1ff562bbb2f3d41a2a761', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, index.h("sd-icon", { key: '1202cfb15fb886fc31c495c1f6fd37eb990ba3a3', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("span", { key: 'b29c00421943e45fed684e63dfebf895686f6d45', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), index.h("button", { key: '13eda140f8dbe92cb75ae288942f1e2fda3b2891', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, index.h("sd-icon", { key: '4ee850a4c9ae4a92e42df78d214ae5380c572dc4', name: "arrowRight", size: "12", color: "#CCCCCC" })))), index.h("div", { key: '13887a76bdea27522798fde506ad04851bb701aa', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (index.h("div", { key: day, class: "day" }, day)))), index.h("div", { key: 'a887e352065fe18797104b2271920f98a8392775', class: "sd-date-picker__body" }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,

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

@@ -2,8 +2,8 @@
 
 var index = require('./index-Qvv0fGgj.js');
 var baseDropdownEvent = require('./base-dropdown-event-BTPlZ1KF.js');
-var sdButtonV2_config = require('./sd-button-v2.config-BK45EPK_.js');
-var component_button = require('./component.button-C6xBMwHf.js');
+var sdButtonV2_config = require('./sd-button-v2.config-DGJDtL6W.js');
+var component_button = require('./component.button-ASC_hRm6.js');
 
 const color = {
 	bg: {
@@ -17,12 +17,7 @@ var systemTokens = {
 	color: color
 };
 
-const UNSUPPORTED_DROPDOWN_BUTTON_NAMES = new Set([
-    'neutral_xs',
-    'neutral_sm',
-    'neutral_md',
-]);
-const DROPDOWN_BUTTON_NAMES = Object.keys(sdButtonV2_config.BUTTON_CONFIG).filter((name) => !name.endsWith('_lg') && !UNSUPPORTED_DROPDOWN_BUTTON_NAMES.has(name));
+const DROPDOWN_BUTTON_NAMES = Object.keys(sdButtonV2_config.BUTTON_CONFIG).filter((name) => !name.endsWith('_lg'));
 const DROPDOWN_BUTTON_CONFIG = Object.fromEntries(DROPDOWN_BUTTON_NAMES.map(name => [name, sdButtonV2_config.BUTTON_CONFIG[name]]));
 const DROPDOWN_BUTTON_MIN_WIDTHS = {
     xs: component_button.buttonTokens.dropdown.xs.minWidth,
@@ -36,7 +31,6 @@ const PRESET_DIVIDER_COLORS = {
     primary: component_button.buttonTokens.brand.strong.dropdown.divider,
     secondary: component_button.buttonTokens.brand.subtle.dropdown.divider,
     primary_outline: PRESET_BORDER_COLORS.primary_outline,
-    neutral: component_button.buttonTokens.neutral.outline.border,
     neutral_outline: PRESET_BORDER_COLORS.neutral_outline,
     danger: component_button.buttonTokens.danger.strong.dropdown.divider,
     danger_outline: PRESET_BORDER_COLORS.danger_outline,
@@ -48,7 +42,6 @@ const PRESET_MENU_ITEM_COLORS = {
     primary: MENU_ITEM_COLOR,
     secondary: MENU_ITEM_COLOR,
     primary_outline: MENU_ITEM_COLOR,
-    neutral: MENU_ITEM_COLOR,
     neutral_outline: MENU_ITEM_COLOR,
     danger: MENU_ITEM_COLOR,
     danger_outline: MENU_ITEM_COLOR,
@@ -57,7 +50,6 @@ const PRESET_MENU_ITEM_ACTIVE_BACKGROUNDS = {
     primary: MENU_ITEM_ACTIVE_BACKGROUND,
     secondary: MENU_ITEM_ACTIVE_BACKGROUND,
     primary_outline: MENU_ITEM_ACTIVE_BACKGROUND,
-    neutral: MENU_ITEM_ACTIVE_BACKGROUND,
     neutral_outline: MENU_ITEM_ACTIVE_BACKGROUND,
     danger: MENU_ITEM_ACTIVE_BACKGROUND,
     danger_outline: MENU_ITEM_ACTIVE_BACKGROUND,
@@ -66,7 +58,6 @@ const PRESET_MENU_ITEM_ACTIVE_COLORS = {
     primary: MENU_ITEM_ACTIVE_COLOR,
     secondary: MENU_ITEM_ACTIVE_COLOR,
     primary_outline: MENU_ITEM_ACTIVE_COLOR,
-    neutral: MENU_ITEM_ACTIVE_COLOR,
     neutral_outline: MENU_ITEM_ACTIVE_COLOR,
     danger: MENU_ITEM_ACTIVE_COLOR,
     danger_outline: MENU_ITEM_ACTIVE_COLOR,
@@ -77,7 +68,7 @@ const DROPDOWN_DISABLED_BORDER = component_button.buttonTokens.border.disabled;
 const isDropdownButtonName = (value) => value in DROPDOWN_BUTTON_CONFIG;
 const getDropdownButtonPreset = (value) => sdButtonV2_config.getPresetName(value);
 
-const sdDropdownButtonCss = () => `sd-dropdown-button{display:inline-flex;width:fit-content;height:fit-content}.sd-dropdown-button{display:inline-flex;position:relative}.sd-dropdown-button__trigger{--sd-dropdown-button-height:var(--sd-button-md-height, 34px);--sd-dropdown-button-padding-x:var(--sd-button-md-padding-x, 20px);--sd-dropdown-button-gap:var(--sd-button-md-gap, 8px);--sd-dropdown-button-font-family:var(--sd-button-md-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-md-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-md-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-md-typography-text-decoration, none);--sd-dropdown-button-bg:#025497;--sd-dropdown-button-bg-hover:#004177;--sd-dropdown-button-border:transparent;--sd-dropdown-button-content:#ffffff;--sd-dropdown-button-divider:#006ac1;--sd-dropdown-button-accent:#006ac1;--sd-dropdown-button-min-width:106px;--sd-dropdown-button-disabled-bg:var(--sd-button-bg-disabled, $grey_30);--sd-dropdown-button-disabled-content:var(--sd-button-content-disabled, $grey_65);--sd-dropdown-button-disabled-border:var(--sd-button-border-disabled, $grey_45);display:inline-flex;align-items:stretch;justify-content:space-between;min-width:var(--sd-dropdown-button-min-width);min-height:var(--sd-dropdown-button-height);padding:0;border:var(--sd-button-border-width-default, 1px) solid var(--sd-dropdown-button-border);border-radius:var(--sd-button-radius-default, 4px);background:var(--sd-dropdown-button-bg);color:var(--sd-dropdown-button-content);cursor:pointer;box-sizing:border-box;font-family:var(--sd-dropdown-button-font-family);font-size:var(--sd-dropdown-button-font-size);font-weight:var(--sd-dropdown-button-font-weight);line-height:1;text-decoration:var(--sd-dropdown-button-text-decoration);transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;white-space:nowrap}.sd-dropdown-button__trigger:hover:not(.sd-dropdown-button__trigger--disabled){background:var(--sd-dropdown-button-bg-hover)}.sd-dropdown-button__trigger:focus-visible{outline:0;box-shadow:0 0 0 2px var(--sd-dropdown-button-accent)}.sd-dropdown-button__trigger--xs{--sd-dropdown-button-height:var(--sd-button-xs-height, 24px);--sd-dropdown-button-padding-x:var(--sd-button-xs-padding-x, 8px);--sd-dropdown-button-gap:var(--sd-button-xs-gap, 4px);--sd-dropdown-button-font-family:var(--sd-button-xs-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-xs-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-xs-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-xs-typography-text-decoration, none)}.sd-dropdown-button__trigger--sm{--sd-dropdown-button-height:var(--sd-button-sm-height, 28px);--sd-dropdown-button-padding-x:var(--sd-button-sm-padding-x, 12px);--sd-dropdown-button-gap:var(--sd-button-sm-gap, 6px);--sd-dropdown-button-font-family:var(--sd-button-sm-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-sm-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-sm-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-sm-typography-text-decoration, none)}.sd-dropdown-button__trigger--md{--sd-dropdown-button-height:var(--sd-button-md-height, 34px);--sd-dropdown-button-padding-x:var(--sd-button-md-padding-x, 20px);--sd-dropdown-button-gap:var(--sd-button-md-gap, 8px);--sd-dropdown-button-font-family:var(--sd-button-md-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-md-typography-font-size, 16px);--sd-dropdown-button-font-weight:var(--sd-button-md-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-md-typography-text-decoration, none)}.sd-dropdown-button__trigger--disabled{border-color:var(--sd-dropdown-button-disabled-border);background:var(--sd-dropdown-button-disabled-bg);color:var(--sd-dropdown-button-disabled-content);cursor:not-allowed}.sd-dropdown-button__trigger--disabled .sd-dropdown-button__trigger-divider{background:var(--sd-dropdown-button-disabled-border)}.sd-dropdown-button__trigger-label,.sd-dropdown-button__trigger-icon{display:inline-flex;align-items:center;justify-content:center}.sd-dropdown-button__trigger-label{flex:1 1 auto;min-width:0;padding:0 var(--sd-dropdown-button-padding-x)}.sd-dropdown-button__trigger-divider{align-self:stretch;width:1px;height:auto;background:var(--sd-dropdown-button-divider);opacity:0.9}.sd-dropdown-button__trigger-icon{flex:0 0 auto;min-width:calc(var(--sd-dropdown-button-height) - 2px);padding:0 calc(var(--sd-dropdown-button-gap) + 2px)}.sd-dropdown-button__menu{position:relative;display:grid;width:max-content;min-width:var(--sd-dropdown-button-menu-min-width, max-content);max-width:calc(100vw - 24px);padding:4px 0;border:0;border-radius:4px;background:#FFFFFF;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1019607843);box-sizing:border-box;overflow:hidden}.sd-dropdown-button__menu-item{display:inline-flex;align-items:center;gap:8px;min-height:28px;width:100%;padding:0 12px;border:0;border-radius:0;background:transparent;color:var(--sd-dropdown-button-menu-item-color);cursor:pointer;box-sizing:border-box;font:inherit;text-align:left;transition:background-color 0.15s ease, color 0.15s ease}.sd-dropdown-button__menu-item--active{background:var(--sd-dropdown-button-menu-item-active-bg);color:var(--sd-dropdown-button-menu-item-active-color)}.sd-dropdown-button__menu-item--disabled{color:var(--sd-dropdown-button-disabled-content);cursor:not-allowed}.sd-dropdown-button__menu-item-icon{flex:0 0 auto}.sd-dropdown-button__menu-item-label{display:inline-flex;align-items:center;min-width:0;white-space:nowrap;font-size:12px}`;
+const sdDropdownButtonCss = () => `sd-dropdown-button{display:inline-flex;width:fit-content;height:fit-content}.sd-dropdown-button{display:inline-flex;position:relative}.sd-dropdown-button__trigger{--sd-dropdown-button-height:var(--sd-button-md-height, 34px);--sd-dropdown-button-padding-x:var(--sd-button-md-padding-x, 20px);--sd-dropdown-button-gap:var(--sd-button-md-gap, 8px);--sd-dropdown-button-font-family:var(--sd-button-md-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-md-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-md-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-md-typography-text-decoration, none);--sd-dropdown-button-bg:#025497;--sd-dropdown-button-bg-hover:#004177;--sd-dropdown-button-border:transparent;--sd-dropdown-button-content:#ffffff;--sd-dropdown-button-current-content:var(--sd-dropdown-button-content);--sd-dropdown-button-divider:#006ac1;--sd-dropdown-button-accent:#006ac1;--sd-dropdown-button-min-width:106px;--sd-dropdown-button-disabled-bg:var(--sd-button-bg-disabled, $grey_30);--sd-dropdown-button-disabled-content:var(--sd-button-content-disabled, $grey_65);--sd-dropdown-button-disabled-border:var(--sd-button-border-disabled, $grey_45);display:inline-flex;align-items:stretch;justify-content:space-between;min-width:var(--sd-dropdown-button-min-width);min-height:var(--sd-dropdown-button-height);padding:0;border:var(--sd-button-border-width-default, 1px) solid var(--sd-dropdown-button-border);border-radius:var(--sd-button-radius-default, 4px);background:var(--sd-dropdown-button-bg);color:var(--sd-dropdown-button-current-content);cursor:pointer;box-sizing:border-box;font-family:var(--sd-dropdown-button-font-family);font-size:var(--sd-dropdown-button-font-size);font-weight:var(--sd-dropdown-button-font-weight);line-height:1;text-decoration:var(--sd-dropdown-button-text-decoration);transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;white-space:nowrap}.sd-dropdown-button__trigger:hover:not(.sd-dropdown-button__trigger--disabled){background:var(--sd-dropdown-button-bg-hover)}.sd-dropdown-button__trigger:focus-visible{outline:0;box-shadow:0 0 0 2px var(--sd-dropdown-button-accent)}.sd-dropdown-button__trigger--xs{--sd-dropdown-button-height:var(--sd-button-xs-height, 24px);--sd-dropdown-button-padding-x:var(--sd-button-xs-padding-x, 8px);--sd-dropdown-button-gap:var(--sd-button-xs-gap, 4px);--sd-dropdown-button-font-family:var(--sd-button-xs-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-xs-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-xs-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-xs-typography-text-decoration, none)}.sd-dropdown-button__trigger--sm{--sd-dropdown-button-height:var(--sd-button-sm-height, 28px);--sd-dropdown-button-padding-x:var(--sd-button-sm-padding-x, 12px);--sd-dropdown-button-gap:var(--sd-button-sm-gap, 6px);--sd-dropdown-button-font-family:var(--sd-button-sm-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-sm-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-sm-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-sm-typography-text-decoration, none)}.sd-dropdown-button__trigger--md{--sd-dropdown-button-height:var(--sd-button-md-height, 34px);--sd-dropdown-button-padding-x:var(--sd-button-md-padding-x, 20px);--sd-dropdown-button-gap:var(--sd-button-md-gap, 8px);--sd-dropdown-button-font-family:var(--sd-button-md-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-md-typography-font-size, 16px);--sd-dropdown-button-font-weight:var(--sd-button-md-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-md-typography-text-decoration, none)}.sd-dropdown-button__trigger--disabled{border-color:var(--sd-dropdown-button-disabled-border);background:var(--sd-dropdown-button-disabled-bg);--sd-dropdown-button-current-content:var(--sd-dropdown-button-disabled-content);cursor:not-allowed}.sd-dropdown-button__trigger--disabled .sd-dropdown-button__trigger-divider{background:var(--sd-dropdown-button-disabled-border)}.sd-dropdown-button__trigger-label,.sd-dropdown-button__trigger-icon{display:inline-flex;align-items:center;justify-content:center}.sd-dropdown-button__trigger-label{flex:1 1 auto;min-width:0;padding:0 var(--sd-dropdown-button-padding-x)}.sd-dropdown-button__trigger-divider{align-self:stretch;width:1px;height:auto;background:var(--sd-dropdown-button-divider);opacity:0.9}.sd-dropdown-button__trigger-icon{flex:0 0 auto;min-width:calc(var(--sd-dropdown-button-height) - 2px);padding:0 calc(var(--sd-dropdown-button-gap) + 2px)}.sd-dropdown-button__menu{position:relative;display:grid;width:max-content;min-width:var(--sd-dropdown-button-menu-min-width, max-content);max-width:calc(100vw - 24px);padding:4px 0;border:0;border-radius:4px;background:#FFFFFF;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1019607843);box-sizing:border-box;overflow:hidden}.sd-dropdown-button__menu-item{--sd-dropdown-button-menu-item-current-color:var(--sd-dropdown-button-menu-item-color);display:inline-flex;align-items:center;gap:8px;min-height:28px;width:100%;padding:0 12px;border:0;border-radius:0;background:transparent;color:var(--sd-dropdown-button-menu-item-current-color);cursor:pointer;box-sizing:border-box;font:inherit;text-align:left;transition:background-color 0.15s ease, color 0.15s ease}.sd-dropdown-button__menu-item--active{background:var(--sd-dropdown-button-menu-item-active-bg);--sd-dropdown-button-menu-item-current-color:var(    --sd-dropdown-button-menu-item-active-color   )}.sd-dropdown-button__menu-item--disabled{--sd-dropdown-button-menu-item-current-color:var(--sd-dropdown-button-disabled-content);cursor:not-allowed}.sd-dropdown-button__menu-item-icon{flex:0 0 auto}.sd-dropdown-button__menu-item-label{display:inline-flex;align-items:center;min-width:0;white-space:nowrap;font-size:12px}`;
 
 const SdDropdownButton = class extends baseDropdownEvent.BaseDropdownEvent {
     constructor(hostRef) {
@@ -236,22 +227,16 @@ const SdDropdownButton = class extends baseDropdownEvent.BaseDropdownEvent {
                     : PRESET_BORDER_COLORS[preset],
             } }, this.items.map((item, index$1) => {
             const isActive = this.itemIndex === index$1 && !item.disabled;
-            const iconColor = item.disabled
-                ? DROPDOWN_DISABLED_CONTENT
-                : isActive
-                    ? PRESET_MENU_ITEM_ACTIVE_COLORS[preset]
-                    : PRESET_MENU_ITEM_COLORS[preset];
             return (index.h("button", { type: "button", role: "menuitem", class: this.getMenuItemClasses(isActive, Boolean(item.disabled)), disabled: item.disabled, onClick: event => this.selectItem(item, event), onMouseEnter: () => {
                     if (!item.disabled) {
                         this.itemIndex = index$1;
                     }
-                } }, item.icon && (index.h("sd-icon", { class: "sd-dropdown-button__menu-item-icon", name: item.icon, size: 12, color: iconColor })), index.h("span", { class: "sd-dropdown-button__menu-item-label", innerHTML: item.label })));
+                } }, item.icon && (index.h("sd-icon", { class: "sd-dropdown-button__menu-item-icon", name: item.icon, size: 12, color: "var(--sd-dropdown-button-menu-item-current-color)" })), index.h("span", { class: "sd-dropdown-button__menu-item-label", innerHTML: item.label })));
         })))));
     }
     render() {
         const { config, preset } = this.resolvedConfig;
-        const chevronColor = this.disabled ? DROPDOWN_DISABLED_CONTENT : PRESET_CONTENT_COLORS[preset];
-        return (index.h("div", { key: '23f01551d932b3840efc4554d9bf2520a4bd8f81', class: "sd-dropdown-button" }, index.h("button", { key: 'd8d736e5b6abe0e8870c01e05c55b03beb333be5', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
+        return (index.h("div", { key: '091dab31c2e64a5f8e715da99fca713b6a7efa5e', class: "sd-dropdown-button" }, index.h("button", { key: '1dd24c6691144a71937a5a3cfbed5705debbebb1', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
                 '--sd-dropdown-button-min-width': `${DROPDOWN_BUTTON_MIN_WIDTHS[config.size]}px`,
                 '--sd-dropdown-button-bg': config.color,
                 '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
@@ -262,7 +247,7 @@ const SdDropdownButton = class extends baseDropdownEvent.BaseDropdownEvent {
                 '--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
                 '--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_CONTENT,
                 '--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
-            } }, index.h("span", { key: '7c453f8d427a35553c60372dcef10b7b8561bad5', class: "sd-dropdown-button__trigger-label" }, this.label), index.h("span", { key: '689127d4360e17cecdd8b6233d09113ac22a5e7d', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), index.h("span", { key: '9a61c4e2d8622462d065fd61002a503965eaec6b', class: "sd-dropdown-button__trigger-icon", "aria-hidden": "true" }, index.h("sd-icon", { key: 'df084b6ed0b0824fb62e9cfe5e8cf07e74509205', name: this.isOpen ? 'arrowUp' : 'arrowDown', size: 12, color: chevronColor }))), this.renderDropdown(preset)));
+            } }, index.h("span", { key: '6d9354f962f0960bb6cbb25e73daf8d40db3d66f', class: "sd-dropdown-button__trigger-label" }, this.label), index.h("span", { key: '9499523b4316d6be8b33c69cf4a4087cd3bb0744', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), index.h("span", { key: '40bb145b42616178c79f1749b45e8d2d707db856', class: "sd-dropdown-button__trigger-icon", "aria-hidden": "true" }, index.h("sd-icon", { key: '2d6a4663aadcae9d051125207fb42914ae3cc362', name: this.isOpen ? 'arrowUp' : 'arrowDown', size: 12, color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
     }
     static get watchers() { return {
         "isOpen": [{

package/dist/cjs/sd-file-picker.cjs.entry.js

@@ -100,15 +100,15 @@ const SdFilePicker = class {
     render() {
         const hasFiles = this.hasFiles();
         const displayText = this.getDisplayText();
-        return (index.h("div", { key: '8d0b3002090064a062df3bc21e54fb8011a520ed', class: {
+        return (index.h("div", { key: 'a41d17071dc1c54af38a25c143f7df3a2f8d8f83', class: {
                 'sd-file-picker': true,
                 [this.getStatusClass()]: true,
                 'sd-file-picker--inline': this.inline,
-            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, index.h("input", { key: 'e58b89fa203a86286d088a7ec7b1be0f740b948a', 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 }), index.h("sd-icon", { key: '42440a854a85aeed63f887b25fa13d9609202974', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), index.h("div", { key: '25bd48b058fcff917aa1ee13c9cd991c49ef4aa1', ref: el => (this.fileNamesRef = el), class: {
+            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, index.h("input", { key: '31bd3ccd4fc132037b67d189478af6dcb5bf9c4a', 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 }), index.h("sd-icon", { key: 'a422d6902ec05313365d2832f1f77e7100dcf9c7', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), index.h("div", { key: 'c0ef65e1d2f5e2eea86d4047b990932d711e68bb', 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 && (index.h("sd-icon", { key: '9d82107ff69909519d1a3051054c42370e6b181c', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (index.h("div", { key: '8c8dfeb9a82c4ca69e6ae88aa8f129c72d884b14', class: "sd-file-picker__tooltip" }, displayText))));
+            } }, displayText), !this.disabled && hasFiles && (index.h("sd-icon", { key: 'b57318271a1282655a6c7f90247f6e6a1813bceb', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (index.h("div", { key: 'cc913b203d72fb0240ea22d7d266953c5ef31476', class: "sd-file-picker__tooltip" }, displayText))));
     }
     static get watchers() { return {
         "value": [{