@sellmate/design-system 1.0.78 → 1.1.0

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

@@ -133,7 +133,7 @@ export class SdDatePickerCalendar {
             '--calendar-day-font-weight': CALENDAR_LAYOUT.day.fontWeight,
             '--calendar-day-bold-font-weight': CALENDAR_LAYOUT.day.boldFontWeight,
         };
-        return (h("div", { key: 'baeaf5925dd87084b4f22445cc2fa6fe879d8faf', class: "sd-date-picker-calendar", style: cssVars }, h("div", { key: '784e0bb6698dc097d8fa9b136ec8bc1d82cfe798', class: "sd-date-picker-calendar__header" }, h("div", { key: 'e42d77c2a1c5d7c23e058b111ed87d3d27c9b465', class: "sd-date-picker-calendar__nav-group" }, h("sd-ghost-button", { key: 'fd5573590ca5c7aaf5b07a594d65f4f168d526d7', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), h("span", { key: 'd8d2f3fcb2dca348c99f5a461260278ddf1ab16b', class: "sd-date-picker-calendar__label" }, this.currentYear), h("sd-ghost-button", { key: 'f134fdd299bcead5d9ce594355f1c58be057fbbe', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), h("span", { key: '14ab983354ded802bb715516872b0148acc3cd66', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), h("div", { key: 'f8b0754ff487c944cf95fcb2fd05c2ca596b3107', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, h("sd-ghost-button", { key: '47d95d368b04f1ff81c416d93ba3bb9a5481f3cb', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), h("span", { key: 'baf40a29a0aacd3c868c0ca63035c09080f412af', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), h("sd-ghost-button", { key: '4b8f189022d7c61072f07b23c5576410183bc801', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), h("div", { key: 'c6b4251396b957905e0462a62ca5b8475c375dd6', class: "sd-date-picker-calendar__week" }, WEEK_LABELS.map(label => (h("span", { key: label, class: "sd-date-picker-calendar__week-cell" }, label)))), h("div", { key: '76a1fe94ca8943f8cf0e7be30b8a9838a9cd22ef', class: "sd-date-picker-calendar__grid" }, this.cells.map(cell => {
+        return (h("div", { key: '164ebac9053c7d170e8c9fe5b312f89f555b880b', class: "sd-date-picker-calendar", style: cssVars }, h("div", { key: '4b4ce2b19c633f42d20a4815efc8ab893ab199d3', class: "sd-date-picker-calendar__header" }, h("div", { key: '731609bd38d9678662932b8269f239364da2b2af', class: "sd-date-picker-calendar__nav-group" }, h("sd-ghost-button", { key: '946627e4ac37737231a6392fdb1648f38b2985fa', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), h("span", { key: 'e140d80eed2c814feb68eab6cfe1fa71fd3d8f81', class: "sd-date-picker-calendar__label" }, this.currentYear), h("sd-ghost-button", { key: '3890011556b23216f24c76774127a0028e809597', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), h("span", { key: '64c817732b5d1bb85a74d1ea8f3f4e558758ef57', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), h("div", { key: '2659907e152e99bb82f7d4d4fa73f7eb1c108960', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, h("sd-ghost-button", { key: '6d3a7c08a61d983ff1e4bc09e41e036dfcd24b70', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), h("span", { key: '7a3fddc6eb0420b963524daac26ef6d95e5d8126', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), h("sd-ghost-button", { key: '0c265077f27039214d70d1cc31baa4fc24da0132', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), h("div", { key: '0d9ae82e475e0380b760e134e534871a492a51a0', class: "sd-date-picker-calendar__week" }, WEEK_LABELS.map(label => (h("span", { key: label, class: "sd-date-picker-calendar__week-cell" }, label)))), h("div", { key: '7d42127cd66f6646d49013cebe49cee709f401e9', class: "sd-date-picker-calendar__grid" }, this.cells.map(cell => {
             const isSelected = cell.inCurrentMonth && !!this.value && this.value === cell.date;
             const isToday = cell.inCurrentMonth && today === cell.date;
             const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);

package/dist/collection/components/sd-date-picker/sd-date-picker-trigger/sd-date-picker-trigger.css

@@ -26,7 +26,7 @@ sd-date-picker-trigger .sd-date-picker-trigger__icon {
 }
 sd-date-picker-trigger .sd-date-picker-trigger__text {
   flex: 1;
-  min-width: 0;
+  min-width: var(--trigger-text-min-width, 80px);
   font-size: var(--trigger-font-size);
   line-height: var(--trigger-line-height);
   font-weight: var(--trigger-font-weight);

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

@@ -4,7 +4,7 @@ export class SdDatePickerTrigger {
     displayText = '';
     placeholder = 'YYYY-MM-DD';
     disabled = false;
-    size = 'md';
+    size = 'sm';
     triggerClick;
     handleClick = () => {
         if (this.disabled)
@@ -12,8 +12,9 @@ export class SdDatePickerTrigger {
         this.triggerClick.emit();
     };
     render() {
-        const sizeTokens = DATEPICKER_SIZE_MAP[this.size] ?? DATEPICKER_SIZE_MAP.md;
+        const sizeTokens = DATEPICKER_SIZE_MAP[this.size] ?? DATEPICKER_SIZE_MAP.sm;
         const hasValue = !!this.displayText;
+        const textMinWidth = this.size === 'md' ? 104 : 80;
         const cssVars = {
             '--trigger-padding-x': `${sizeTokens.paddingX}px`,
             '--trigger-gap': `${sizeTokens.gap}px`,
@@ -22,6 +23,7 @@ export class SdDatePickerTrigger {
             '--trigger-line-height': `${sizeTokens.lineHeight}px`,
             '--trigger-font-weight': sizeTokens.fontWeight,
             '--trigger-radius': `${sizeTokens.radius}px`,
+            '--trigger-text-min-width': `${textMinWidth}px`,
             '--trigger-text-color': this.disabled
                 ? DATEPICKER_COLORS.text.disabled
                 : hasValue
@@ -31,10 +33,10 @@ export class SdDatePickerTrigger {
                 ? DATEPICKER_COLORS.icon.disabled
                 : DATEPICKER_COLORS.icon.default,
         };
-        return (h("div", { key: 'f541c11d4e7385993628e10f0eeb7a339f80e1f6', class: {
+        return (h("div", { key: '449ce38199b5a3d29d88353b9375bc45eceeae89', class: {
                 'sd-date-picker-trigger': true,
                 'sd-date-picker-trigger--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, h("sd-icon", { key: '19c51b2ae2dc354010f6727048fd7a64c17ed36e', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: '73a6dd7cd398202edabecd348a4856315e077088', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
+            }, style: cssVars, onClick: this.handleClick }, h("sd-icon", { key: 'cc88f44660297a2fb72dfc9e4bc2387a84d55f58', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: '515419e015bf396b0ddba48615238e028ccc4a6d', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
     }
     static get is() { return "sd-date-picker-trigger"; }
     static get originalStyleUrls() {
@@ -134,7 +136,7 @@ export class SdDatePickerTrigger {
                 "setter": false,
                 "reflect": false,
                 "attribute": "size",
-                "defaultValue": "'md'"
+                "defaultValue": "'sm'"
             }
         };
     }

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

@@ -84,7 +84,7 @@ export class SdDatePicker {
             clearTimeout(this.closeAnimationTimer);
     }
     render() {
-        const sizeTokens = DATEPICKER_SIZE_MAP[this.size] ?? DATEPICKER_SIZE_MAP.md;
+        const sizeTokens = DATEPICKER_SIZE_MAP[this.size] ?? DATEPICKER_SIZE_MAP.sm;
         const cssVars = {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
@@ -92,9 +92,9 @@ export class SdDatePicker {
             '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
         };
-        return (h("sd-field", { key: 'd55b2123cc862d5f12fdd429b02b622946b58cc4', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '79e47e4e02e8b30dc2651a9c4aab3950a8662f52', class: "sd-date-picker", ref: el => {
+        return (h("sd-field", { key: '7678d58f741276e9848e05759f5c41f576e7fe66', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '8b3d615b241860ec1fb314fa0eeef5f51ea32f43', class: "sd-date-picker", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-date-picker-trigger", { key: '7b09873b1e58aed36d4fb0dadb02d21ea6c2b309', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: 'fd60a9df30dfc459798a8e537acdf16ed9f94844', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-picker-calendar", { key: '0478f726cb51fe533b829f3eb0ce46d2fbf0ba94', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, h("sd-date-picker-trigger", { key: '43185c67462cf0cb559c918e5f709723bf4d5aee', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '2cf151b52b3117de9c4d55bbc3c045b0a7b614e9', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-picker-calendar", { key: '9f77742d034dcb462eb1c4546b2c2a367544f97e', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get is() { return "sd-date-picker"; }
     static get originalStyleUrls() {
@@ -453,7 +453,7 @@ export class SdDatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "SdTooltipProps | null",
-                    "resolved": "SdTooltipProps | null",
+                    "resolved": "SdTooltip | null",
                     "references": {
                         "SdTooltipProps": {
                             "location": "import",

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

@@ -239,7 +239,7 @@ export class SdDateRangePickerCalendar {
             '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
             '--range-divider': RANGE_LAYOUT.divider,
         };
-        return (h(Fragment, { key: 'acc32d9c349c4cee32bb923ce66d17122527b524' }, h("div", { key: 'bd579429ae609c3ff21a542bf69c1dc9a907846a', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: '8a46d922fcaa09bd7f778d00e77324d1710b92c7', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: '8234838995f1e5d945f85169e702cb0b32018f36', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
+        return (h(Fragment, { key: '1c32908b35f51dd5a9fa2817ffb81cf60e721b40' }, h("div", { key: 'd5dea22d401dbcde38a7677a46a3003543499aaf', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: '678611077abc979433250e7d5013f14aa15e5090', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: '1c8a77eceedfdb52d7bab44fb9b9018bfe5ccd91', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
     }
     static get is() { return "sd-date-range-picker-calendar"; }
     static get originalStyleUrls() {

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

@@ -90,7 +90,7 @@ export class SdDateRangePicker {
             clearTimeout(this.closeAnimationTimer);
     }
     render() {
-        const sizeTokens = DATEPICKER_SIZE_MAP[this.size] ?? DATEPICKER_SIZE_MAP.md;
+        const sizeTokens = DATEPICKER_SIZE_MAP[this.size] ?? DATEPICKER_SIZE_MAP.sm;
         const cssVars = {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
@@ -98,9 +98,9 @@ export class SdDateRangePicker {
             '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
         };
-        return (h("sd-field", { key: '221d930a7243334d00b281724d3c204159e721a4', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '6bc1723f00169bb31cc1a153824fc8bbea6caf98', class: "sd-date-range-picker", ref: el => {
+        return (h("sd-field", { key: 'e44e9a2cf5c610c20c419215bd3b14494cea2980', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '29951ae2a98d2a44c2b01a735291dd2ec6d7e5a2', class: "sd-date-range-picker", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-date-picker-trigger", { key: 'd1805fe995410ecfce8ca7854cfac5055474d44a', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '22f42d9941e315d598233939a010034138e5bcbb', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-range-picker-calendar", { key: '192a66291e9f318c4bba267b98a427fd0819b1be', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, h("sd-date-picker-trigger", { key: '37d379cf054838e5005b00812401a8d7c6d4daa9', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '1fbc3c2a16c845486e942b0a71ff799a9d1a98c6', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-range-picker-calendar", { key: '6e53bfaa550c93e6b2c08a2311bc415f359bc2da', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get is() { return "sd-date-range-picker"; }
     static get originalStyleUrls() {
@@ -482,7 +482,7 @@ export class SdDateRangePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "SdTooltipProps | null",
-                    "resolved": "SdTooltipProps | null",
+                    "resolved": "SdTooltip | null",
                     "references": {
                         "SdTooltipProps": {
                             "location": "import",

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

@@ -1,6 +1,6 @@
 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";
+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/sd-button.config";
 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 PRESET_HOVER_BACKGROUNDS = BUTTON_PRESET_HOVER_BACKGROUNDS;

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

@@ -1,7 +1,7 @@
 import { h, } from "@stencil/core";
 import { BaseDropdownEvent } from "../../utils/base-dropdown-event";
-import { BUTTON_FOCUS_RING_COLOR } from "../sd-button-v2/sd-button-v2.config";
-import { DROPDOWN_BUTTON_CONFIG, DROPDOWN_CHEVRON_ICON_SIZE, DROPDOWN_DISABLED_BACKGROUND, DROPDOWN_DISABLED_BORDER, DROPDOWN_DISABLED_TEXT, PRESET_BORDER_COLORS, PRESET_CONTENT_COLORS, PRESET_DIVIDER_COLORS, PRESET_HOVER_BACKGROUNDS, PRESET_MENU_ITEM_ACTIVE_BACKGROUNDS, PRESET_MENU_ITEM_ACTIVE_COLORS, PRESET_MENU_ITEM_COLORS, getDropdownButtonPreset, isDropdownButtonName, } from "./sd-dropdown-button.config";
+import { BUTTON_FOCUS_RING_COLOR } from "../sd-button/sd-button.config";
+import { DROPDOWN_BUTTON_CONFIG, DROPDOWN_CHEVRON_ICON_SIZE, DROPDOWN_DISABLED_BACKGROUND, DROPDOWN_DISABLED_BORDER, DROPDOWN_DISABLED_TEXT, getDropdownButtonPreset, isDropdownButtonName, PRESET_BORDER_COLORS, PRESET_CONTENT_COLORS, PRESET_DIVIDER_COLORS, PRESET_HOVER_BACKGROUNDS, PRESET_MENU_ITEM_ACTIVE_BACKGROUNDS, PRESET_MENU_ITEM_ACTIVE_COLORS, PRESET_MENU_ITEM_COLORS, } from "./sd-dropdown-button.config";
 export class SdDropdownButton extends BaseDropdownEvent {
     constructor() {
         super();
@@ -89,15 +89,17 @@ export class SdDropdownButton extends BaseDropdownEvent {
                 break;
         }
     }
-    get resolvedConfig() {
+    get resolvedName() {
         if (!isDropdownButtonName(this.name)) {
-            throw new Error(`Invalid sd-dropdown-button name: ${this.name}`);
+            throw new Error(`Invalid sd-dropdown-button name: "${this.name}"`);
         }
-        const config = DROPDOWN_BUTTON_CONFIG[this.name];
-        const preset = getDropdownButtonPreset(this.name);
+        return this.name;
+    }
+    get resolvedConfig() {
+        const name = this.resolvedName;
         return {
-            config,
-            preset,
+            config: DROPDOWN_BUTTON_CONFIG[name],
+            preset: getDropdownButtonPreset(name),
         };
     }
     getNextEnabledIndex(direction) {
@@ -186,7 +188,7 @@ export class SdDropdownButton extends BaseDropdownEvent {
     }
     render() {
         const { config, preset } = this.resolvedConfig;
-        return (h("div", { key: 'ce06d2b7e13cb234bb6e7393939d2ccd834801a5', class: "sd-dropdown-button" }, h("button", { key: '4bd3e86eec90698188a834eb35ff922dee7d1855', 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: 'bef9cb5da07e02dd2a2a69f17bb71114045adace', class: "sd-dropdown-button" }, h("button", { key: 'bfc671cd3d3cf8221886d7453674a2c07699440e', 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-bg': config.color,
                 '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
                 '--sd-dropdown-button-border': PRESET_BORDER_COLORS[preset],
@@ -196,10 +198,10 @@ export class SdDropdownButton extends BaseDropdownEvent {
                 '--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
                 '--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_TEXT,
                 '--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
-            } }, h("span", { key: '2baea4f0777ec766625d4ae1fb14739aa61ca114', class: "sd-dropdown-button__trigger-label" }, this.label), h("span", { key: 'b37a94dd23d26a1444ddccc192b2a5ab2388bc64', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), h("span", { key: 'b903ff916c3ae1ab189cd08877a57940e45d8aeb', class: {
+            } }, h("span", { key: '17bf00861dd721cbd41de9c92db9e58e2eb7399e', class: "sd-dropdown-button__trigger-label" }, this.label), h("span", { key: '218fe7ed965155abbf13e39c907b0c4e1a40004a', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), h("span", { key: '17014bf0654e35a1665e36a9a65fa3f067b9f1b8', class: {
                 'sd-dropdown-button__trigger-icon': true,
                 'sd-dropdown-button__trigger-icon--open': this.isOpen,
-            }, "aria-hidden": "true" }, h("sd-icon", { key: '2eac1eabd2677decb0c1cfe4f518a7da9aca60ff', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
+            }, "aria-hidden": "true" }, h("sd-icon", { key: '89a4c971bbb929a1ed39048f390dbf63c92a4408', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], 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.css

@@ -26,6 +26,10 @@ sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control {
   color: #888888;
   cursor: not-allowed !important;
 }
+sd-field .sd-field.sd-field--readonly .sd-field__wrapper .sd-field__control {
+  background-color: var(--sd-system-color-field-bg-read-only);
+  color: var(--sd-system-color-field-text-read-only);
+}
 sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label {
   display: flex;
   align-items: center;
@@ -100,11 +104,11 @@ sd-field .sd-field--error .sd-field__wrapper .sd-field__control:not(:hover) {
 sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control {
   border: 1px solid var(--sd-system-color-field-border-success) !important;
 }
-sd-field .sd-field:not(.sd-field--disabled) .sd-field__wrapper .sd-field__control:hover {
+sd-field .sd-field:not(.sd-field--disabled):not(.sd-field--readonly) .sd-field__wrapper .sd-field__control:hover {
   border: 1px solid var(--sd-system-color-field-border-focus) !important;
   box-shadow: 0px 0px 4px 0px rgba(0, 113, 255, 0.4);
 }
-sd-field .sd-field.sd-field--focus .sd-field__wrapper .sd-field__control {
+sd-field .sd-field.sd-field--focus:not(.sd-field--readonly) .sd-field__wrapper .sd-field__control {
   border: 1px solid var(--sd-system-color-field-border-focus) !important;
   box-shadow: 0px 0px 4px 0px rgba(0, 113, 255, 0.4);
 }

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

@@ -17,6 +17,7 @@ export class SdField {
     rules = [];
     error = false;
     disabled = false;
+    readonly = false;
     hovered = false;
     focused = false;
     status;
@@ -43,6 +44,10 @@ export class SdField {
             status = 'disabled';
             return `sd-field--${status}`;
         }
+        if (!!this.readonly) {
+            status = 'readonly';
+            return `sd-field--${status}`;
+        }
         if (!!this.focused) {
             status = 'focus';
             return `sd-field--${status}`;
@@ -167,20 +172,20 @@ export class SdField {
                     : {}),
             }
             : {};
-        return (h("div", { key: 'f7cec98818159adf5fd398bd15547ed1ec555092', class: {
+        return (h("div", { key: '9004022e1e81f58b0399d2066e4286d082d805fa', class: {
                 'sd-field': true,
                 'sd-field--has-label': !!this.label,
                 'sd-field--has-addon': !!addon,
                 [this.fieldStatus]: !!this.fieldStatus,
-            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, h("div", { key: '2d6ffefc9211137dc215686874060b1d5067031d', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '2163413b937af3c1874f41bc2581a0304b7d069a', class: "sd-field__main", style: this.width
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, h("div", { key: '9f34dfdb968d6d2024e10870bc393a54f2e76139', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '40a2c60d8fdba23e59685fa28312d664fed60a52', class: "sd-field__main", style: this.width
                 ? {
                     width: typeof this.width === 'number' ? `${this.width}px` : this.width,
                     flex: 'none',
                 }
-                : {} }, h("div", { key: '0dbb6cbe768bac1c64d72d37d270805e16936e24', class: {
+                : {} }, h("div", { key: '911ee729fc171e0f7eb6ab7587e2bdf57a68fc71', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': !!addon,
-            } }, addon && h("div", { key: '8b4bfbf6ad67084a0bc9c3ff6789936ad895e3c5', class: "sd-field__addon" }, addon), h("slot", { key: '40596847f9bac957a5992364997f0bcd8fd6a704' })), this.errorMsg || this.errorMessage ? (h("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)) : (this.hint && h("div", { class: "sd-field__hint" }, this.hint))))));
+            } }, addon && h("div", { key: 'b04c595ea75598724186b171d6a63292dbe1beb3', class: "sd-field__addon" }, addon), h("slot", { key: '961f60e8e0df25ba0e7340df219807fbfd4f23ae' })), this.errorMsg || this.errorMessage ? (h("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)) : (this.hint && h("div", { class: "sd-field__hint" }, this.hint))))));
     }
     renderLabel(label) {
         if (!label)
@@ -285,6 +290,26 @@ export class SdField {
                 "attribute": "disabled",
                 "defaultValue": "false"
             },
+            "readonly": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
             "hovered": {
                 "type": "boolean",
                 "mutable": true,
@@ -566,7 +591,7 @@ export class SdField {
                 "mutable": false,
                 "complexType": {
                     "original": "SdTooltipProps | null",
-                    "resolved": "SdTooltipProps | null",
+                    "resolved": "SdTooltip | null",
                     "references": {
                         "SdTooltipProps": {
                             "location": "import",

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

@@ -137,11 +137,11 @@ export class SdFilePicker {
     }
     getDisplayText() {
         if (!this.hasFiles())
-            return this.placeholder;
+            return this.placeholder ?? 'Click to upload';
         if (Array.isArray(this.internalValue)) {
             return this.internalValue.map(f => f.name).join(', ');
         }
-        return this.internalValue?.name || this.placeholder;
+        return this.internalValue?.name || (this.placeholder ?? 'Click to upload');
     }
     checkOverflow() {
         if (!this.fileNamesRef)
@@ -168,7 +168,7 @@ export class SdFilePicker {
             '--sd-system-size-field-sm-height': `${FILE_PICKER_LAYOUT.height}px`,
             '--sd-system-radius-field-sm': `${FILE_PICKER_LAYOUT.radius}px`,
         };
-        const content = (h("div", { class: "sd-file-picker__content", onClick: this.handleClick }, h("input", { 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", { name: "attachFile", size: Number(FILE_PICKER_LAYOUT.iconSize), color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { ref: el => (this.fileNamesRef = el), class: {
+        const content = (h("div", { class: "sd-file-picker__content", onClick: this.handleClick }, h("input", { ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder ?? 'Click to upload' }), h("sd-icon", { name: "attachFile", size: Number(FILE_PICKER_LAYOUT.iconSize), color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { ref: el => (this.fileNamesRef = el), class: {
                 'sd-file-picker__text': true,
                 'sd-file-picker__text--placeholder': !hasFiles,
                 'sd-file-picker__text--active': hasFiles,
@@ -651,7 +651,7 @@ export class SdFilePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "SdTooltipProps | null",
-                    "resolved": "SdTooltipProps | null",
+                    "resolved": "SdTooltip | null",
                     "references": {
                         "SdTooltipProps": {
                             "location": "import",

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

@@ -106,11 +106,9 @@
   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 {
+.sd-floating-menu__content .sd-floating-menu__buttons--with-link {
   justify-content: space-between;
 }
 .sd-floating-menu--popover {

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

@@ -85,11 +85,11 @@ export class SdFloatingPopover {
             const rect = this.parentRef.getBoundingClientRect();
             if (!rect.width && !rect.height)
                 return; // 요소가 보이지 않는 경우
-            const [offsetX, offsetY] = this.offset;
+            const [offsetX, offsetY] = this.offset ?? [0, 0];
             const ARROW_SIZE = SdFloatingPopover.ARROW_SIZE;
             let top = 0;
             let left = 0;
-            switch (this.placement) {
+            switch (this.placement ?? 'bottom') {
                 case 'top':
                     top = rect.top + window.scrollY - this.wrapper.offsetHeight + offsetY - ARROW_SIZE;
                     left =
@@ -153,7 +153,7 @@ export class SdFloatingPopover {
         }
     }
     render() {
-        return h("slot", { key: '2383aafb9b01881f06e4fc97c5903c19453b8b4c' });
+        return h("slot", { key: 'e41cc4519a12b3fc93ef57e7a00381f3a463fc62' });
     }
     static get is() { return "sd-floating-portal"; }
     static get originalStyleUrls() {

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

@@ -70,7 +70,7 @@ export class SdForm {
         this.sdSubmit.emit();
     }
     render() {
-        return (h("form", { key: 'c3fafb4169bddbd6911914ebc694a977fa11b511', onSubmit: e => this.onSubmit(e), class: this.formClass }, h("slot", { key: '5be1d23c35c052fdf5d8fb961fa931074eb59ee6' })));
+        return (h("form", { key: '0693ccf290eb691a5ac9210444a265e386f7c7c9', onSubmit: e => this.onSubmit(e), class: this.formClass }, h("slot", { key: 'c9dfff69c4000d645b7ed79a8ad771bc1cdd4e2c' })));
     }
     static get is() { return "sd-form"; }
     static get properties() {

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

@@ -24,7 +24,7 @@ export class SdGhostButton {
         this.warnIfMissingAriaLabel();
     }
     warnIfMissingAriaLabel() {
-        const missing = !this.ariaLabel.trim();
+        const missing = !(this.ariaLabel ?? '').trim();
         if (!missing) {
             this.hasWarnedMissingAriaLabel = false;
             return;
@@ -35,21 +35,23 @@ export class SdGhostButton {
         this.hasWarnedMissingAriaLabel = true;
     }
     render() {
-        const sizeConfig = GHOST_BUTTON_SIZES[this.size];
+        const size = this.size ?? 'sm';
+        const intent = this.intent ?? 'default';
+        const sizeConfig = GHOST_BUTTON_SIZES[size] ?? GHOST_BUTTON_SIZES.sm;
         const contentColor = this.disabled
-            ? GHOST_BUTTON_DISABLED_COLORS[this.intent]
-            : GHOST_BUTTON_CONTENT_COLORS[this.intent];
-        const accessibleName = this.ariaLabel.trim() || undefined;
-        return (h("button", { key: '57793e0911fc49c62ab627bd7234caf9c0a04097', class: {
+            ? GHOST_BUTTON_DISABLED_COLORS[intent]
+            : GHOST_BUTTON_CONTENT_COLORS[intent];
+        const accessibleName = (this.ariaLabel ?? '').trim() || undefined;
+        return (h("button", { key: 'cae4bb612dcbe16f71a3a7c3469c214df5a877ce', class: {
                 'sd-ghost-button': true,
                 'sd-ghost-button--disabled': this.disabled,
             }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
                 '--sd-ghost-button-size': `${sizeConfig.size}px`,
-                '--sd-ghost-button-radius': `${GHOST_BUTTON_RADIUS[this.size]}px`,
-                '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent],
+                '--sd-ghost-button-radius': `${GHOST_BUTTON_RADIUS[size]}px`,
+                '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[intent],
                 '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
                 '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, h("sd-icon", { key: 'cf81a34495eacad4052ad7bbd5cba837b905610b', name: this.icon, size: sizeConfig.icon, color: contentColor })));
+            }, onClick: this.handleClick }, h("sd-icon", { key: '58bedc712e0bec8d2cb526c42814dd201d8d04ba', name: this.icon, size: sizeConfig.icon, color: contentColor })));
     }
     static get is() { return "sd-ghost-button"; }
     static get originalStyleUrls() {
@@ -69,7 +71,7 @@ export class SdGhostButton {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\"",
+                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"checkboxCheck\" | \"checkboxIndeterminate\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\"",
                     "references": {
                         "IconName": {
                             "location": "global",