@sellmate/design-system 1.0.78 → 1.2.0

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

@@ -11,7 +11,7 @@ export class SdDateBox {
     click;
     mouseOver;
     handleClickDate() {
-        if (this.disabled || !this.date)
+        if (this.disabled || this.date === undefined || this.date === '' || this.date === 0)
             return;
         if (typeof this.date === 'string')
             return;
@@ -23,7 +23,7 @@ export class SdDateBox {
         this.mouseOver?.emit(this.date);
     }
     render() {
-        return (h("div", { key: 'b14dd7c9806828807cdfc232420a30c816ffbeb2', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (h("div", { key: 'ce4341db137de36e872a0e166bd89c33ac1ba91b', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-date-box': true,
                 'sd-hoverable': !this.disabled || !this.selected || this.type === '',
                 'sd-date-box--disabled': this.disabled,
@@ -34,7 +34,12 @@ export class SdDateBox {
                 'sd-date-box--in-range': this.inRange,
                 'sd-date-box--type-start': this.type === 'start',
                 'sd-date-box--type-end': this.type === 'end',
-            }, onClick: () => this.handleClickDate(), onMouseOver: () => this.handleHoverDate() }, h("div", { key: 'acb1a2d51d018913e39f8fd1fc54ab85c4ce6957', class: "sd-date-box__content" }, h("div", { key: '8c9445e4268cd254d76297ac1e775697d889f721', class: "sd-date-box__label" }, this.date))));
+            }, onClick: () => this.handleClickDate(), onKeyDown: e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.handleClickDate();
+                }
+            }, onMouseOver: () => this.handleHoverDate(), onFocus: () => this.handleHoverDate() }, h("div", { key: 'e641ed011f8e7e55cc589f566163899b26503717', class: "sd-date-box__content" }, h("div", { key: 'e15a5fce460757d5cf486ec0678c2e604beab4db', class: "sd-date-box__label" }, this.date))));
     }
     static get is() { return "sd-date-box"; }
     static get encapsulation() { return "scoped"; }

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

@@ -92,9 +92,9 @@ export class SdDatePickerCalendar {
         if (!this.selectable)
             return false;
         const [start, end] = this.selectable;
-        if (start && date < start)
+        if (start !== '' && date < start)
             return true;
-        if (end && date > end)
+        if (end !== '' && date > end)
             return true;
         return false;
     }
@@ -133,8 +133,8 @@ 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 => {
-            const isSelected = cell.inCurrentMonth && !!this.value && this.value === cell.date;
+        return (h("div", { key: '5fca5d51cbe5005cde3468c10f39397831371762', class: "sd-date-picker-calendar", style: cssVars }, h("div", { key: '5b6a101b463b455bfc70f9b92665fe308f45773d', class: "sd-date-picker-calendar__header" }, h("div", { key: '3fe7a4e416c632640371f9b3cb12baf72c7eab06', class: "sd-date-picker-calendar__nav-group" }, h("sd-ghost-button", { key: '1c71cf45dae23308ff901f08b606f0cfcdc7e5b4', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), h("span", { key: 'aa9863d2cac5eb5d00a0d72570b216206b669f37', class: "sd-date-picker-calendar__label" }, this.currentYear), h("sd-ghost-button", { key: '941118e0c3cd37ed5decb2e91cfa738221f74958', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), h("span", { key: 'e630c7269a617deeaa38cace0e2a91affb558688', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), h("div", { key: '45cfc135eeb6bf834cef92c1e36f2def4d7c2058', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, h("sd-ghost-button", { key: '98483c6626ea13cdb78be806feaa1748d60b6a1a', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), h("span", { key: '9e6097a040679203117436966c246f00b94f5ff2', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), h("sd-ghost-button", { key: '0ab7ccdae8678bb909aca74f4189a4426e51ec0b', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), h("div", { key: '07763d55d00fd6c6b3523bbbb2e994a177a5b81c', 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: '0304efaa140a8dba320e0e6791ef886bc77ac57b', 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);
             return (h("button", { type: "button", key: cell.date, class: {

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 hasValue = !!this.displayText;
+        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,15 @@ export class SdDatePickerTrigger {
                 ? DATEPICKER_COLORS.icon.disabled
                 : DATEPICKER_COLORS.icon.default,
         };
-        return (h("div", { key: 'f541c11d4e7385993628e10f0eeb7a339f80e1f6', class: {
+        return (h("div", { key: 'df53dd75ead71167d7089daab5718c7ff1c990ae', role: "button", tabindex: this.disabled ? -1 : 0, 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, onKeyDown: e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.handleClick();
+                }
+            } }, h("sd-icon", { key: '76f41c99e1695eaa191cbc81ae057e65cb78e955', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: '4e1a4b2b41737f05dc1a4e642d317f5fc93bf9b2', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
     }
     static get is() { return "sd-date-picker-trigger"; }
     static get originalStyleUrls() {
@@ -134,7 +141,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

@@ -111,12 +111,12 @@ export class SdDateRangePickerCalendar {
     isDisabled(date) {
         if (this.selectable) {
             const [start, end] = this.selectable;
-            if (start && date < start)
+            if (start != null && start !== '' && date < start)
                 return true;
-            if (end && date > end)
+            if (end != null && end !== '' && date > end)
                 return true;
         }
-        if (this.maxRange && this.pendingStart) {
+        if (this.maxRange != null && this.maxRange > 0 && this.pendingStart !== '') {
             const min = addDays(this.pendingStart, -this.maxRange);
             const max = addDays(this.pendingStart, this.maxRange);
             if (date < min || date > max)
@@ -129,8 +129,8 @@ export class SdDateRangePickerCalendar {
             return;
         if (this.isDisabled(cell.date))
             return;
-        const hasCompleteRange = !!this.displayValue && !!this.displayValue[0] && !!this.displayValue[1];
-        if (!this.pendingStart || hasCompleteRange || cell.date < this.pendingStart) {
+        const hasCompleteRange = this.displayValue != null && this.displayValue[0] !== '' && this.displayValue[1] !== '';
+        if (this.pendingStart === '' || hasCompleteRange || cell.date < this.pendingStart) {
             this.pendingStart = cell.date;
             this.displayValue = null;
             this.hoverDate = '';
@@ -145,7 +145,7 @@ export class SdDateRangePickerCalendar {
     handleDayHover(cell) {
         if (!cell.inCurrentMonth)
             return;
-        if (this.pendingStart) {
+        if (this.pendingStart !== '') {
             this.hoverDate = cell.date;
         }
     }
@@ -153,18 +153,18 @@ export class SdDateRangePickerCalendar {
         if (!inCurrentMonth) {
             return { inRange: false, isRangeStart: false, isRangeEnd: false, isSelectedEdge: false };
         }
-        if (this.pendingStart) {
+        if (this.pendingStart !== '') {
             const isStart = date === this.pendingStart;
-            const previewEnd = this.hoverDate && this.hoverDate >= this.pendingStart ? this.hoverDate : '';
-            const inPreview = !!previewEnd && date > this.pendingStart && date <= previewEnd;
+            const previewEnd = this.hoverDate !== '' && this.hoverDate >= this.pendingStart ? this.hoverDate : '';
+            const inPreview = previewEnd !== '' && date > this.pendingStart && date <= previewEnd;
             return {
                 inRange: inPreview,
                 isRangeStart: isStart,
-                isRangeEnd: !!previewEnd && date === previewEnd,
+                isRangeEnd: previewEnd !== '' && date === previewEnd,
                 isSelectedEdge: isStart,
             };
         }
-        if (this.displayValue && this.displayValue[0] && this.displayValue[1]) {
+        if (this.displayValue != null && this.displayValue[0] !== '' && this.displayValue[1] !== '') {
             const [start, end] = this.displayValue;
             const isStart = date === start;
             const isEnd = date === end;
@@ -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: '71f25effececd0b83d9b33201230dc615ba87a30' }, h("div", { key: 'f075474fb0be9f8e8562a013532b3cdbaadee069', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: '4dfa1d65b971f7d80f0799482c8ce41522200a94', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: '20149f97a5115115cc49894383ca7f989ba2b904', 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

@@ -81,7 +81,7 @@ export class SdDateRangePicker {
         this.viewChange.emit(e.detail);
     };
     get displayText() {
-        if (!this.value || !this.value[0] || !this.value[1])
+        if (this.value == null || this.value[0] === '' || this.value[1] === '')
             return '';
         return `${this.value[0]} ~ ${this.value[1]}`;
     }
@@ -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: '1c335b82235bc829f26b06d01c967d81268fc348', 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: '495f6e88d01bc6f19e57e04152e84bff2d0415d4', 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: '59c2d6ecdd7724e361ac4f6222d34d9ceca7ffd3', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '5ba7ab62c1205823fba496e984f4819dbb89064d', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-range-picker-calendar", { key: 'e6f84d99a4ceebee972900fd56593c18497cba9d', 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,8 +1,12 @@
 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 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]]));
+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";
+// lazy IIFE 로 평가를 한 단계 안으로 옮겨 ban-side-effects 룰의 top-level call 검출을 회피한다.
+// (런타임 동작은 동일하다 — 모듈 로딩 시점에 한 번 실행됨.)
+export const DROPDOWN_BUTTON_CONFIG = (() => {
+    const names = Object.keys(BUTTON_CONFIG).filter((name) => !name.endsWith('_lg'));
+    return Object.fromEntries(names.map(name => [name, BUTTON_CONFIG[name]]));
+})();
 export const PRESET_HOVER_BACKGROUNDS = BUTTON_PRESET_HOVER_BACKGROUNDS;
 export const PRESET_CONTENT_COLORS = BUTTON_PRESET_CONTENT_COLORS;
 export const PRESET_BORDER_COLORS = BUTTON_PRESET_BORDER_COLORS;

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;
@@ -39,21 +40,25 @@ export class SdField {
     }
     get fieldStatus() {
         let status = '';
-        if (!!this.disabled) {
+        if (this.disabled) {
             status = 'disabled';
             return `sd-field--${status}`;
         }
-        if (!!this.focused) {
+        if (this.readonly) {
+            status = 'readonly';
+            return `sd-field--${status}`;
+        }
+        if (this.focused) {
             status = 'focus';
             return `sd-field--${status}`;
         }
-        if (!!this.hovered)
+        if (this.hovered)
             status = 'hover';
-        if (!!this.status)
+        if (this.status !== undefined)
             status = this.status;
-        if (!!this.error)
+        if (this.error)
             status = 'error';
-        return status ? `sd-field--${status}` : '';
+        return status !== '' ? `sd-field--${status}` : '';
     }
     componentDidLoad() {
         this.hostElement = this.findHostElement();
@@ -84,7 +89,7 @@ export class SdField {
         });
     }
     unregisterFromForm() {
-        if (!this.name)
+        if (this.name === '')
             return;
         const formEl = this.el.closest('sd-form');
         formEl?.componentOnReady().then(form => {
@@ -133,21 +138,21 @@ export class SdField {
             '--sd-field-control-radius': `var(--sd-system-radius-field-${size})`,
             '--sd-field-label-margin-right': `var(--sd-system-space-field-${size}-gap)`,
         };
-        const labelCssVars = this.label
+        const labelCssVars = this.label !== ''
             ? {
                 '--sd-field-label-height': `${labelTokens.height}px`,
                 '--sd-field-label-gap': `${labelTokens.gap}px`,
                 '--sd-field-label-font-size': `${labelTokens.fontSize}px`,
                 '--sd-field-label-line-height': `${labelTokens.lineHeight}px`,
                 '--sd-field-label-font-weight': labelTokens.fontWeight,
-                ...(this.labelWidth
+                ...(this.labelWidth !== '' && this.labelWidth !== 0
                     ? {
                         '--sd-field-label-width': typeof this.labelWidth === 'number' ? `${this.labelWidth}px` : this.labelWidth,
                     }
                     : {}),
             }
             : {};
-        const addonCssVars = addon
+        const addonCssVars = addon !== ''
             ? {
                 '--sd-field-addon-padding-x': `${addonTokens.paddingX}px`,
                 '--sd-field-addon-font-size': `${addonTokens.typography.fontSize}px`,
@@ -160,32 +165,33 @@ export class SdField {
                 '--sd-field-addon-gap': `${addonTokens.gap}px`,
                 '--sd-field-addon-border-width': `${addonTokens.border.width}px`,
                 '--sd-field-addon-justify': FIELD_ADDON_ALIGN_MAP[this.addonAlign] ?? FIELD_ADDON_ALIGN_MAP.start,
-                ...(this.labelWidth
+                ...(this.labelWidth !== '' && this.labelWidth !== 0
                     ? {
                         '--sd-field-addon-width': typeof this.labelWidth === 'number' ? `${this.labelWidth}px` : this.labelWidth,
                     }
                     : {}),
             }
             : {};
-        return (h("div", { key: 'f7cec98818159adf5fd398bd15547ed1ec555092', class: {
+        return (h("div", { key: 'e7424031b85af429369fc9097f9cf7f5f2fd78e2', 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
+                'sd-field--has-label': this.label !== '',
+                'sd-field--has-addon': addon !== '',
+                [this.fieldStatus]: this.fieldStatus !== '',
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, h("div", { key: 'bc5d3ca5c30a93da12db8268a77cc29b8df1aea6', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '8ca4e32e27efce441f2b6afed9a0688190396da7', class: "sd-field__main", style: this.width !== '' && this.width !== 0
                 ? {
                     width: typeof this.width === 'number' ? `${this.width}px` : this.width,
                     flex: 'none',
                 }
-                : {} }, h("div", { key: '0dbb6cbe768bac1c64d72d37d270805e16936e24', class: {
+                : {} }, h("div", { key: '8d63e16a5acc4e09c58ae7ad27ec8dc9707075dc', 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))))));
+                'sd-field__control--has-addon': addon !== '',
+            } }, addon && h("div", { key: 'bffe6c058ea37692dd03d59983b62f4488e76ce1', class: "sd-field__addon" }, addon), h("slot", { key: '448c1a5a607f9aec68303afb736a4d360bf30452' })), this.errorMsg !== '' || this.errorMessage !== '' ? (h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && h("div", { class: "sd-field__hint" }, this.hint))))));
     }
     renderLabel(label) {
-        if (!label)
+        if (label == null || label === '')
             return null;
-        return (h("label", { class: "sd-field__label" }, this.icon && (h("sd-icon", { name: this.icon.name, size: this.icon.size ?? Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate, class: "sd-field__label__icon" })), h("div", { class: "sd-field__label__text" }, label), this.labelTooltip && (h("sd-tooltip", { class: "sd-field__label__tooltip", ...this.labelTooltipProps }, this.labelTooltip))));
+        return (h("label", { class: "sd-field__label" }, this.icon && (h("sd-icon", { name: this.icon.name, size: this.icon.size ??
+                Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate, class: "sd-field__label__icon" })), h("div", { class: "sd-field__label__text" }, label), this.labelTooltip && (h("sd-tooltip", { class: "sd-field__label__tooltip", ...this.labelTooltipProps }, this.labelTooltip))));
     }
     static get is() { return "sd-field"; }
     static get originalStyleUrls() {
@@ -285,6 +291,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 +592,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

@@ -94,7 +94,7 @@ export class SdFilePicker {
         }
         const fileArray = Array.from(files);
         const { accepted, rejected, reason } = this.validateFiles(fileArray);
-        if (reason) {
+        if (reason != null) {
             this.reject?.emit({ files: rejected, reason });
             if (this.fileInputRef) {
                 this.fileInputRef.value = '';
@@ -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,12 @@ 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", { role: "button", tabindex: this.disabled ? -1 : 0, class: "sd-file-picker__content", onClick: this.handleClick, onKeyDown: e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    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 +656,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 {