@sellmate/design-system 1.0.25 → 1.0.27

package/dist/collection/components/sd-button-v2/sd-button-v2.css

@@ -14,10 +14,11 @@ sd-button-v2 {
   --sd-button-v2-text-decoration: none;
   --sd-button-v2-label-min-width: auto;
   --sd-button-v2-icon-only-size: var(--sd-button-v2-height);
-  --sd-button-v2-bg: #025497;
-  --sd-button-v2-bg-hover: #004177;
+  --sd-button-v2-bg: $oceanblue_75;
+  --sd-button-v2-bg-hover: $oceanblue_80;
   --sd-button-v2-border: transparent;
-  --sd-button-v2-content: #ffffff;
+  --sd-button-v2-content: $white;
+  --sd-button-v2-current-content: var(--sd-button-v2-content);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -27,7 +28,7 @@ sd-button-v2 {
   border: var(--sd-button-border-width-default, 1px) solid var(--sd-button-v2-border);
   border-radius: var(--sd-button-radius-default, 4px);
   background: var(--sd-button-v2-bg);
-  color: var(--sd-button-v2-content);
+  color: var(--sd-button-v2-current-content);
   cursor: pointer;
   box-sizing: border-box;
   font-family: var(--sd-button-v2-font-family);
@@ -106,7 +107,7 @@ sd-button-v2 {
 .sd-button-v2--disabled {
   border-color: var(--sd-button-border-disabled, #CCCCCC);
   background: var(--sd-button-bg-disabled, #E1E1E1);
-  color: var(--sd-button-content-disabled, #888888);
+  --sd-button-v2-current-content: var(--sd-button-content-disabled, $grey_65);
   cursor: not-allowed;
 }
 .sd-button-v2 .sd-button-v2__content {

package/dist/collection/components/sd-button-v2/sd-button-v2.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { BUTTON_CONFIG, BUTTON_FOCUS_RING_COLOR, BUTTON_ICON_SIZES, DISABLED_CONTENT, PRESET_BORDER_COLORS, PRESET_CONTENT_COLORS, PRESET_HOVER_BACKGROUNDS, getPresetName, isButtonV2Name, } from "./sd-button-v2.config";
+import { BUTTON_CONFIG, BUTTON_FOCUS_RING_COLOR, BUTTON_ICON_SIZES, PRESET_BORDER_COLORS, PRESET_CONTENT_COLORS, PRESET_HOVER_BACKGROUNDS, getPresetName, isButtonV2Name, } from "./sd-button-v2.config";
 export class SdButtonV2 {
     name = 'primary_sm';
     label = '';
@@ -61,14 +61,13 @@ export class SdButtonV2 {
         const hasLabel = Boolean(this.label);
         const iconOnly = !this.label && Boolean(this.icon);
         const accessibleName = iconOnly && this.ariaLabel.trim() ? this.ariaLabel : undefined;
-        const iconColor = this.disabled ? DISABLED_CONTENT : PRESET_CONTENT_COLORS[preset];
-        return (h("button", { key: '9adec3868e5337822463a5a37a741ef146a081be', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
+        return (h("button", { key: '248e85751b7f7f1cdb770e4f4c1466fa8736f024', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
                 '--sd-button-v2-bg': config.variant === 'primary' ? config.color : '#FFFFFF',
                 '--sd-button-v2-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
                 '--sd-button-v2-border': PRESET_BORDER_COLORS[preset],
                 '--sd-button-v2-content': PRESET_CONTENT_COLORS[preset],
                 '--sd-button-v2-accent': BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, h("span", { key: '849c90886e77e792e4e34ef064352361a29664f0', class: "sd-button-v2__content" }, this.icon && (h("sd-icon", { key: '5c5bc61ab43aa17124337a7107a3e6ab82f566ae', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: iconColor })), this.label && h("span", { key: 'e2d1a5ce465f07310a4d03966609baaf7e968b0e', class: "sd-button-v2__label" }, this.label))));
+            }, onClick: this.handleClick }, h("span", { key: '0b68fdf9711cd26d6f143fec848d3e16e32c81e2', class: "sd-button-v2__content" }, this.icon && (h("sd-icon", { key: '26bffa7135658f790e65a8b0aa32af055ea269f2', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-content)" })), this.label && h("span", { key: '5016092b05b4f068f823ae8dbd6a47ea23763086', class: "sd-button-v2__label" }, this.label))));
     }
     static get is() { return "sd-button-v2"; }
     static get originalStyleUrls() {
@@ -88,7 +87,7 @@ export class SdButtonV2 {
                 "mutable": false,
                 "complexType": {
                     "original": "ButtonV2Name",
-                    "resolved": "\"danger_lg\" | \"danger_md\" | \"danger_outline_lg\" | \"danger_outline_md\" | \"danger_outline_sm\" | \"danger_outline_xs\" | \"danger_sm\" | \"danger_xs\" | \"neutral_lg\" | \"neutral_md\" | \"neutral_outline_lg\" | \"neutral_outline_md\" | \"neutral_outline_sm\" | \"neutral_outline_xs\" | \"neutral_sm\" | \"neutral_xs\" | \"primary_lg\" | \"primary_md\" | \"primary_outline_lg\" | \"primary_outline_md\" | \"primary_outline_sm\" | \"primary_outline_xs\" | \"primary_sm\" | \"primary_xs\" | \"secondary_lg\" | \"secondary_md\" | \"secondary_sm\" | \"secondary_xs\"",
+                    "resolved": "\"danger_lg\" | \"danger_md\" | \"danger_outline_lg\" | \"danger_outline_md\" | \"danger_outline_sm\" | \"danger_outline_xs\" | \"danger_sm\" | \"danger_xs\" | \"neutral_outline_lg\" | \"neutral_outline_md\" | \"neutral_outline_sm\" | \"neutral_outline_xs\" | \"primary_lg\" | \"primary_md\" | \"primary_outline_lg\" | \"primary_outline_md\" | \"primary_outline_sm\" | \"primary_outline_xs\" | \"primary_sm\" | \"primary_xs\" | \"secondary_lg\" | \"secondary_md\" | \"secondary_sm\" | \"secondary_xs\"",
                     "references": {
                         "ButtonV2Name": {
                             "location": "import",

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

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

package/dist/collection/components/sd-date-picker/sd-date-picker.js

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

package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js

@@ -155,10 +155,10 @@ export class SdDateRangePicker {
         this.setHoverDate(hoverDate);
     }
     render() {
-        return (h("div", { key: '1862958ea2e972700ea83ed61f0285f09cf52c02', class: {
+        return (h("div", { key: '80ba555e36642dabe58a34a344ec751684307eb6', class: {
                 'sd-date-range-picker': true,
                 'sd-date-range-picker--disabled': this.disabled,
-            } }, 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() }, 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 && (h("sd-portal", { key: '448c174030598565f910df316002d78bdfec3f89', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, h("div", { key: 'b5cf493587c7831e59a6156df87cb56be6bd585b', class: "sd-date-range-picker__menu" }, h("div", { key: 'c044d5377d0d88affecaa61eec2a2239b87158d8', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: 'c497891fe1d06b8f6c1a79000edc0e4f4fd79735', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: 'ad899e9daec0752b744bc73e9cbd99c6a731b7db', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: '595ac699adc90e8b15775ce47a2cda8bbc2f5c25', class: "header-label" }, this.prevYear), h("button", { key: '684ce75f14b08cd57ce6f019a1dfb3ab384b0c11', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: '31dde7526d0ee3e7abf965eea6f825d557e7c745', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '3e70334c95d29f302f2dc6d1cb7fbb3603c74a48', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
+            } }, 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() }, 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 && (h("sd-portal", { key: 'e79962823af4c29121c18236d886199268a03eb3', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, h("div", { key: '7c5fe668dabda4cf5219bcfd062997a8f5337cfa', class: "sd-date-range-picker__menu" }, h("div", { key: '33b5d471d9db5f703b6f846442e27dd5425775bb', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: 'd54d8f953be79447ee708404329178d9e1ad3a23', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: '64444f120884efa30f9b58944cd9bc8918648aaf', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: '0ae2129755ba9a30bb41522893bd1d27905e6666', class: "header-label" }, this.prevYear), h("button", { key: '7d8f3627e72869fd35e964e0c555680d47744f5c', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: 'caeb87d6cac5b5c89bc65c97d60f5b45b55becb1', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '958cd5ed27b2f1a72214c4e2426dc60349e65c50', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
             ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
             : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date === this.formatDate(index, Number(day))), type: this.getDateBoxType(this.formatDate(index, Number(day))), isToday: today === this.formatDate(index, Number(day)), disabled: !day ? true : this.isDisabledDate(this.formatDate(index, Number(day))), inRange: this.isDateInRange(this.formatDate(index, Number(day))), isStartDate: this.dateRange[0] === this.formatDate(index, Number(day)), isEndDate: this.dateRange[1] === this.formatDate(index, Number(day)), onSdClick: () => this.handleDateClick(index, Number(day)), onSdMouseOver: () => this.handleDateHover(index, Number(day)) }))))))))))))));
     }

package/dist/collection/components/sd-dropdown-button/sd-dropdown-button.config.js

@@ -1,12 +1,7 @@
 import buttonTokens from "../../tokens/generated/component.button.json";
 import systemTokens from "../../tokens/generated/system.json";
 import { BUTTON_CONFIG, PRESET_BORDER_COLORS as BUTTON_PRESET_BORDER_COLORS, PRESET_CONTENT_COLORS as BUTTON_PRESET_CONTENT_COLORS, PRESET_HOVER_BACKGROUNDS as BUTTON_PRESET_HOVER_BACKGROUNDS, getPresetName, } from "../sd-button-v2/sd-button-v2.config";
-const UNSUPPORTED_DROPDOWN_BUTTON_NAMES = new Set([
-    'neutral_xs',
-    'neutral_sm',
-    'neutral_md',
-]);
-const DROPDOWN_BUTTON_NAMES = Object.keys(BUTTON_CONFIG).filter((name) => !name.endsWith('_lg') && !UNSUPPORTED_DROPDOWN_BUTTON_NAMES.has(name));
+const DROPDOWN_BUTTON_NAMES = Object.keys(BUTTON_CONFIG).filter((name) => !name.endsWith('_lg'));
 export const DROPDOWN_BUTTON_CONFIG = Object.fromEntries(DROPDOWN_BUTTON_NAMES.map(name => [name, BUTTON_CONFIG[name]]));
 export const DROPDOWN_BUTTON_MIN_WIDTHS = {
     xs: buttonTokens.dropdown.xs.minWidth,
@@ -20,7 +15,6 @@ export const PRESET_DIVIDER_COLORS = {
     primary: buttonTokens.brand.strong.dropdown.divider,
     secondary: buttonTokens.brand.subtle.dropdown.divider,
     primary_outline: PRESET_BORDER_COLORS.primary_outline,
-    neutral: buttonTokens.neutral.outline.border,
     neutral_outline: PRESET_BORDER_COLORS.neutral_outline,
     danger: buttonTokens.danger.strong.dropdown.divider,
     danger_outline: PRESET_BORDER_COLORS.danger_outline,
@@ -32,7 +26,6 @@ export 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,
@@ -41,7 +34,6 @@ export 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,
@@ -50,7 +42,6 @@ export 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,

package/dist/collection/components/sd-dropdown-button/sd-dropdown-button.css

@@ -21,6 +21,7 @@ sd-dropdown-button {
   --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;
@@ -36,7 +37,7 @@ sd-dropdown-button {
   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);
+  color: var(--sd-dropdown-button-current-content);
   cursor: pointer;
   box-sizing: border-box;
   font-family: var(--sd-dropdown-button-font-family);
@@ -84,7 +85,7 @@ sd-dropdown-button {
 .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);
+  --sd-dropdown-button-current-content: var(--sd-dropdown-button-disabled-content);
   cursor: not-allowed;
 }
 .sd-dropdown-button__trigger--disabled .sd-dropdown-button__trigger-divider {
@@ -134,6 +135,7 @@ sd-dropdown-button {
 }
 
 .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;
@@ -143,7 +145,7 @@ sd-dropdown-button {
   border: 0;
   border-radius: 0;
   background: transparent;
-  color: var(--sd-dropdown-button-menu-item-color);
+  color: var(--sd-dropdown-button-menu-item-current-color);
   cursor: pointer;
   box-sizing: border-box;
   font: inherit;
@@ -152,10 +154,12 @@ sd-dropdown-button {
 }
 .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-current-color: var(
+   --sd-dropdown-button-menu-item-active-color
+  );
 }
 .sd-dropdown-button__menu-item--disabled {
-  color: var(--sd-dropdown-button-disabled-content);
+  --sd-dropdown-button-menu-item-current-color: var(--sd-dropdown-button-disabled-content);
   cursor: not-allowed;
 }
 

package/dist/collection/components/sd-dropdown-button/sd-dropdown-button.js

@@ -156,22 +156,16 @@ export class SdDropdownButton extends BaseDropdownEvent {
                     : PRESET_BORDER_COLORS[preset],
             } }, this.items.map((item, index) => {
             const isActive = this.itemIndex === index && !item.disabled;
-            const iconColor = item.disabled
-                ? DROPDOWN_DISABLED_CONTENT
-                : isActive
-                    ? PRESET_MENU_ITEM_ACTIVE_COLORS[preset]
-                    : PRESET_MENU_ITEM_COLORS[preset];
             return (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;
                     }
-                } }, item.icon && (h("sd-icon", { class: "sd-dropdown-button__menu-item-icon", name: item.icon, size: 12, color: iconColor })), h("span", { class: "sd-dropdown-button__menu-item-label", innerHTML: item.label })));
+                } }, item.icon && (h("sd-icon", { class: "sd-dropdown-button__menu-item-icon", name: item.icon, size: 12, color: "var(--sd-dropdown-button-menu-item-current-color)" })), 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 (h("div", { key: '23f01551d932b3840efc4554d9bf2520a4bd8f81', class: "sd-dropdown-button" }, 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 (h("div", { key: '091dab31c2e64a5f8e715da99fca713b6a7efa5e', class: "sd-dropdown-button" }, 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],
@@ -182,7 +176,7 @@ export class SdDropdownButton extends 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,
-            } }, h("span", { key: '7c453f8d427a35553c60372dcef10b7b8561bad5', class: "sd-dropdown-button__trigger-label" }, this.label), h("span", { key: '689127d4360e17cecdd8b6233d09113ac22a5e7d', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), h("span", { key: '9a61c4e2d8622462d065fd61002a503965eaec6b', class: "sd-dropdown-button__trigger-icon", "aria-hidden": "true" }, h("sd-icon", { key: 'df084b6ed0b0824fb62e9cfe5e8cf07e74509205', name: this.isOpen ? 'arrowUp' : 'arrowDown', size: 12, color: chevronColor }))), this.renderDropdown(preset)));
+            } }, h("span", { key: '6d9354f962f0960bb6cbb25e73daf8d40db3d66f', class: "sd-dropdown-button__trigger-label" }, this.label), h("span", { key: '9499523b4316d6be8b33c69cf4a4087cd3bb0744', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), h("span", { key: '40bb145b42616178c79f1749b45e8d2d707db856', class: "sd-dropdown-button__trigger-icon", "aria-hidden": "true" }, h("sd-icon", { key: '2d6a4663aadcae9d051125207fb42914ae3cc362', name: this.isOpen ? 'arrowUp' : 'arrowDown', size: 12, color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
     }
     static get is() { return "sd-dropdown-button"; }
     static get originalStyleUrls() {

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

@@ -114,15 +114,15 @@ export class SdField {
         }
     }
     render() {
-        return (h("div", { key: '9ed0e615761d5c76dff1e95318b131bde22cd376', class: {
+        return (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,
-            } }, h("div", { key: '6d051479c9874f3c765d50096db80c73c4fc461b', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '64ea18d481f0ad689ed984cd40837717fb37a751', class: {
+            } }, h("div", { key: '2c07af0bdc9490177d030b670e67a128563af488', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '5fa2079b2123688c0eab63780b55e70fe9f4a77b', class: {
                 'sd-field__control': true,
                 'sd-field__control--label-inside ': !!this.label && this.insideLabel,
-            } }, h("slot", { key: '8e043b3e476e0d574612c892f6c8c0bca28c117f' }))), this.errorMsg && h("div", { key: '22d42bacdbdfe85dbe08395d21e59a06946986f5', class: "sd-field__error-message" }, this.errorMsg)));
+            } }, h("slot", { key: '2b0b3240afe20e1759853928fcd2846d1321262b' }))), this.errorMsg && h("div", { key: 'f932da0af97a7d1e2253bdc5a64a8269fa55625d', class: "sd-field__error-message" }, this.errorMsg)));
     }
     renderLabel(label) {
         if (!label)
@@ -375,8 +375,8 @@ export class SdField {
                     "references": {
                         "SdTooltipProps": {
                             "location": "import",
-                            "path": "../sd-tooltip/sd-tooltip",
-                            "id": "src/components/sd-tooltip/sd-tooltip.tsx::SdTooltipProps",
+                            "path": "../sd-tooltip/sd-tooltip.config",
+                            "id": "src/components/sd-tooltip/sd-tooltip.config.ts::SdTooltipProps",
                             "referenceLocation": "SdTooltipProps"
                         }
                     }

package/dist/collection/components/sd-file-picker/sd-file-picker.js

@@ -91,15 +91,15 @@ export class SdFilePicker {
     render() {
         const hasFiles = this.hasFiles();
         const displayText = this.getDisplayText();
-        return (h("div", { key: '8d0b3002090064a062df3bc21e54fb8011a520ed', class: {
+        return (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) }, 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 }), h("sd-icon", { key: '42440a854a85aeed63f887b25fa13d9609202974', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: '25bd48b058fcff917aa1ee13c9cd991c49ef4aa1', ref: el => (this.fileNamesRef = el), class: {
+            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, 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 }), h("sd-icon", { key: 'a422d6902ec05313365d2832f1f77e7100dcf9c7', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), 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 && (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 && (h("div", { key: '8c8dfeb9a82c4ca69e6ae88aa8f129c72d884b14', class: "sd-file-picker__tooltip" }, displayText))));
+            } }, displayText), !this.disabled && hasFiles && (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 && (h("div", { key: 'cc913b203d72fb0240ea22d7d266953c5ef31476', class: "sd-file-picker__tooltip" }, displayText))));
     }
     static get is() { return "sd-file-picker"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-floating-portal/sd-floating-portal.css

@@ -1,71 +1,77 @@
 .sd-floating-menu {
   width: fit-content;
-  padding: 12px 20px;
-  border-radius: 4px;
+  padding: 12px 16px;
+  border-radius: 6px;
   font-size: 12px;
+  font-weight: 500;
+  line-height: 20px;
   position: relative;
   box-sizing: border-box;
-  background: #07284A;
-  color: #FFFFFF;
+  background: var(--sd-floating-bg, #07284A);
+  color: var(--sd-floating-content, #FFFFFF);
 }
 .sd-floating-menu .sd-floating-menu__arrow {
-  color: #07284A;
+  color: var(--sd-floating-bg, #07284A);
 }
 .sd-floating-menu--default {
-  background: #07284A;
-  color: #FFFFFF;
+  background: var(--sd-floating-bg, #07284A);
+  color: var(--sd-floating-content, #FFFFFF);
+  font-weight: 500;
 }
 .sd-floating-menu--default .sd-floating-menu__arrow {
-  color: #07284A;
+  color: var(--sd-floating-bg, #07284A);
 }
-.sd-floating-menu--caution {
-  background: #FCE6E6;
-  color: #FB4444;
+.sd-floating-menu--danger {
+  background: var(--sd-floating-bg, #FCE6E6);
+  color: var(--sd-floating-content, #FB4444);
+  font-weight: 700;
 }
-.sd-floating-menu--caution .sd-floating-menu__arrow {
-  color: #FCE6E6;
+.sd-floating-menu--danger .sd-floating-menu__arrow {
+  color: var(--sd-floating-bg, #FCE6E6);
 }
-.sd-floating-menu--notice {
-  background: #FEF1EA;
-  color: #FF6B00;
+.sd-floating-menu--warning {
+  background: var(--sd-floating-bg, #FEF1EA);
+  color: var(--sd-floating-content, #FF6B00);
+  font-weight: 700;
 }
-.sd-floating-menu--notice .sd-floating-menu__arrow {
-  color: #FEF1EA;
+.sd-floating-menu--warning .sd-floating-menu__arrow {
+  color: var(--sd-floating-bg, #FEF1EA);
 }
 .sd-floating-menu--accent {
-  background: #E6F1FF;
-  color: #0075FF;
+  background: var(--sd-floating-bg, #E6F1FF);
+  color: var(--sd-floating-content, #0075FF);
+  font-weight: 700;
 }
 .sd-floating-menu--accent .sd-floating-menu__arrow {
-  color: #E6F1FF;
+  color: var(--sd-floating-bg, #E6F1FF);
 }
 .sd-floating-menu__arrow {
   position: absolute;
   display: flex;
-  width: 9.6px;
-  height: 7.2px;
+  width: 16px;
+  height: 12px;
 }
 .sd-floating-menu__arrow svg {
   width: 100%;
   height: 100%;
 }
 .sd-floating-menu__arrow--top {
-  bottom: -7.2px;
+  bottom: -12px;
   left: 50%;
   transform: translateX(-50%);
 }
 .sd-floating-menu__arrow--bottom {
-  top: -7.2px;
+  top: -12px;
   left: 50%;
   transform: translateX(-50%) rotate(180deg);
 }
 .sd-floating-menu__arrow--left {
-  right: -7.2px;
+  right: -12px;
   top: 50%;
   transform: translateY(-50%) rotate(-90deg);
 }
 .sd-floating-menu__arrow--right {
-  left: -7.2px;
+  left: -12px;
   top: 50%;
   transform: translateY(-50%) rotate(90deg);
 }
@@ -74,7 +80,9 @@
   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 {
@@ -92,9 +100,25 @@
 .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: 16px;
+  top: 12px;
   right: 12px;
   padding: 0;
   background: none;

package/dist/collection/components/sd-floating-portal/sd-floating-portal.js

@@ -144,7 +144,7 @@ export class SdFloatingPopover {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: 'fe02da5ce55072c8fa313e467967f2a1c18f86bb' });
+        return h("slot", { key: '770ec3be9d1e2b830eaebfde37a664feafc3da3b' });
     }
     static get is() { return "sd-floating-portal"; }
     static get originalStyleUrls() {

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

@@ -59,7 +59,7 @@ export class SdForm {
         this.submitSuccess.emit();
     }
     render() {
-        return (h("form", { key: '3349166129fd2acb388221b61e1bd347a2dad6e0', onSubmit: e => this.onSubmit(e), class: this.formClass }, h("slot", { key: '5866b2d6764578dbf07a31c5d3dc6fa6a249f023' })));
+        return (h("form", { key: 'e25fc019fc77ec3cbd3968d1fbf0a8fdd3f47d68', onSubmit: e => this.onSubmit(e), class: this.formClass }, h("slot", { key: 'ffbba01d9883b0c4582ab62c6669a20fa093cb8c' })));
     }
     static get is() { return "sd-form"; }
     static get properties() {

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

@@ -47,9 +47,9 @@ export class SdGuide {
     };
     render() {
         const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (h("div", { key: '69dc81c8fe0c5843e86709e72f0cdf3ecaf8c52a', class: "sd-guide", style: {
+        return (h("div", { key: 'b62d9fc6f84c65c42b946ac0ea118e0f760f872a', class: "sd-guide", style: {
                 '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, h("sd-button", { key: '254e03a9d2e4d36ca26a23158acc960dcfb90578', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '701a049ebcabd0b29fa74fac246cecdedace2022', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: 'e8f8efcbcbe29d51a29a8ca3803ed0a754a42531', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: '5f54893503560535d6adedea41d81182c72b04e5', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: '9747683a1123307a9e4214e0f4be63fd09af1fec', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), h("div", { key: '9fb06eaeae5fc0a805855b78b8d67583183f7a8c', class: "sd-guide__popup__header" }, h("sd-icon", { key: 'ad4b7e1e5740bbd32877efc0a5614b4e657aca8a', name: "helpOutline", size: 24, color: "green_65" }), h("h3", { key: '5cdf73e175a51b13ee2c5408014de27a9650ac20', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: 'f02a8cf5ffe831d2a466e4357f7721c5622d7bee', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
+            } }, h("sd-button", { key: 'dc4b53179c77564bba799fd58d2b50a114251891', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: 'dce687813be45faa25e40c42ccef556a7b2b542b', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: 'ae4fcc94f70a90cbab678ff726b2b23462cd5581', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: '0a032605306affcc44645577a7f552c0fe9811df', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: '137a92b36771d20b3594fe164e28a2be14bf423a', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), h("div", { key: '25378aa790783504b82187328fef2cf955227d6a', class: "sd-guide__popup__header" }, h("sd-icon", { key: '5e133c603bb7ae7b041fd3196266890dafe9270f', name: "helpOutline", size: 24, color: "green_65" }), h("h3", { key: 'c6f86b1b2f848cda6fba5c9ffd4b8c87e947fbf7', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: 'b719cfbc9dfd61b7c03ed977e7ed72feb3d4e98b', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {

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

@@ -25,7 +25,7 @@ export class SdIcon {
     }
     render() {
         const IconComponent = Icons[this.name]?.[this.size];
-        return (h("i", { key: '69b8654e2fd745282c1878306a5c464ba0995468', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: '64b00309d5ad7787c4fbf2c200719fd74062ccbd', color: this.resolvedColor })));
+        return (h("i", { key: '1c418bee61e2b1e7286c15cb489953cd6969639c', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: 'cf93af4d1a911a6da2bef0cdfea104cb74627ec8', color: this.resolvedColor })));
     }
     static get is() { return "sd-icon"; }
     static get originalStyleUrls() {

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

@@ -85,7 +85,7 @@ export class SdInput {
         }
     };
     render() {
-        return (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) }, h("label", { key: '71b1f7ce70d475e28f1d9f29c9a49b3f2f548f53', class: "sd-input__content", style: { width: '100%' } }, h("slot", { key: 'c0c92d686b4cee0930716a47a701459c3afc41ff', name: "prefix" }), 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 }), h("slot", { key: '7786756fca59c02dfb159f10e2925f73b64f0366', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '82b24cae340687d7412ec5210548ad92e33be744', name: "close", color: "grey_65", size: "16", class: "sd-input__clear-icon", onClick: async () => {
+        return (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) }, h("label", { key: 'ed629d14db71ca2e5e129dbbe6c960d1c4bafc31', class: "sd-input__content", style: { width: '100%' } }, h("slot", { key: '7504feda5598a7d784a83fb8cf5d0991bd3999bc', name: "prefix" }), 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 }), h("slot", { key: '3f933f1f844596b78bd5946833aa334840b65a01', name: "suffix" }), this.clearable && this.internalValue && (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();
             } })))));
@@ -495,8 +495,8 @@ export class SdInput {
                     "references": {
                         "SdTooltipProps": {
                             "location": "import",
-                            "path": "../sd-tooltip/sd-tooltip",
-                            "id": "src/components/sd-tooltip/sd-tooltip.tsx::SdTooltipProps",
+                            "path": "../sd-tooltip/sd-tooltip.config",
+                            "id": "src/components/sd-tooltip/sd-tooltip.config.ts::SdTooltipProps",
                             "referenceLocation": "SdTooltipProps"
                         }
                     }

package/dist/collection/components/sd-loading-spinner/sd-loading-spinner.js

@@ -6,7 +6,7 @@ export class SdLoadingSpinner {
         return resolveColor(this.color);
     }
     render() {
-        return (h(Fragment, { key: '2b60d18fe2f1dc23d90c5552202cdea60a91b2c0' }, h("svg", { key: 'd8e8716433c206019384899897b052d28d486f92', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, h("circle", { key: 'c9aaffe398dd40ccea3a2d8a89cb880e3eeb5a6d', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+        return (h(Fragment, { key: '5783716d94ef4a1dea295a4190660d98248c2ec4' }, h("svg", { key: '574752fdf4c55f4a77dcefac163e1e6651864963', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, h("circle", { key: '2591fabc88f588079a9ea98f91126f20737827df', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
     }
     static get is() { return "sd-loading-spinner"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-modal-card/sd-modal-card.js

@@ -30,7 +30,7 @@ export class SdModalCard {
         return modalClass;
     }
     render() {
-        return (h("div", { key: '0390932a29db512f09a47fbb030b1140410b6a73', class: this.getModalClass, style: { '--point-color': this.pointColor } }, this.useCloseButton && (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' && (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' })), h("h2", { key: '5586e88dd9882f89ccd3aff047435c7dc821cebc', class: "sd-modal-card__title" }, this.modalTitle), h("slot", { key: '0f12630ca6434885e4efc0810ae552dc0f0433b5' }, h("div", { key: '04af07e88d2b65274a3ca28b3975d496917f1139', class: `sd-modal-card__message-container` }, this.message.map(msg => (h("p", { class: "sd-modal-card__message" }, msg))))), h("div", { key: 'b81e9fae8781fe8e57c54c0b51adc141c13c7ba8', class: `sd-modal-card__button-container flex-${this.buttonFlexDirection}` }, this.buttonProps?.map(button => (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 (h("div", { key: 'f0adc3cc3df163622ebfb4ecf24f871c89f4b676', class: this.getModalClass, style: { '--point-color': this.pointColor } }, this.useCloseButton && (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' && (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' })), h("h2", { key: '1462056d43620a2f7db1f3e6b26a9a10576cceb8', class: "sd-modal-card__title" }, this.modalTitle), h("slot", { key: '9c3b4860e7c4940356aa17353c437e711163434b' }, h("div", { key: 'db17a4b60ddaab999b0ed8fca546c336b6f4b597', class: `sd-modal-card__message-container` }, this.message.map(msg => (h("p", { class: "sd-modal-card__message" }, msg))))), h("div", { key: 'ada9c87b3cec0de87e795ed5de34d9b37acddd59', class: `sd-modal-card__button-container flex-${this.buttonFlexDirection}` }, this.buttonProps?.map(button => (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() }))))));
     }
     static get is() { return "sd-modal-card"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-number-input/sd-number-input.js

@@ -240,17 +240,17 @@ export class SdNumberInput {
         const inputStyles = {
             textAlign: this.useButton ? 'center' : 'right',
         };
-        return (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 }, h("label", { key: '3006df4eaf22ecf7e9ad330270623ba7cbbf9c9a', class: {
+        return (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 }, 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 }, 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 && (h("div", { key: '18f45963c22ee6a1cdd52e45b41191c3726328ce', class: "sd-number-input__buttons" }, h("button", { key: '73658fecb2300094b1880cae4595975b777b802a', type: "button", class: {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, 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 && (h("div", { key: 'd8293f93d5bb0f9bc88e9702df590526238820ac', class: "sd-number-input__buttons" }, 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 }, h("sd-icon", { key: 'd2b4d8eb6b7f5dd30ba704c7d7b35051a5b0df7b', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), h("button", { key: 'ddcd2255b7870657afbb6549cdc185a804aa3dbf', type: "button", class: {
+            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '91d31a14ff787c6dbe35f40ff5eb9eff3d7b4e02', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), 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 }, h("sd-icon", { key: '971098976698154e8e644a93265dc746177c2ce0', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
+            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '44c1021a4f5588ff473f9dc7cc696ec4526d4abd', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
     }
     static get is() { return "sd-number-input"; }
     static get originalStyleUrls() {