@sellmate/design-system 1.0.68 → 1.0.70

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

@@ -142,7 +142,7 @@ const SdDatePickerCalendar = class {
             '--calendar-day-font-weight': sdDatePicker_config.CALENDAR_LAYOUT.day.fontWeight,
             '--calendar-day-bold-font-weight': sdDatePicker_config.CALENDAR_LAYOUT.day.boldFontWeight,
         };
-        return (index.h("div", { key: 'd23c08b38605dad1e5b3266a7e1ad72e0aeb7eb9', class: "sd-date-picker-calendar", style: cssVars }, index.h("div", { key: '1c25bd19272e1e7f4e81601a0ffa13d7b882e4e4', class: "sd-date-picker-calendar__header" }, index.h("div", { key: 'aed9a7ff3282d363c61b49dde6b6e9d6131a456c', class: "sd-date-picker-calendar__nav-group" }, index.h("sd-ghost-button", { key: '68ae361b1cc4bfd9351b093aee6d4193f2ac5549', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), index.h("span", { key: 'e17d9a962faf96e8b70b0890e59e4c2e5ca515b0', class: "sd-date-picker-calendar__label" }, this.currentYear), index.h("sd-ghost-button", { key: 'ab65ce4f9f64fcc9f4084c073a0a0625ceeb9f2d', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), index.h("span", { key: 'a01cb1691e9f112efdd6fd632c7594aa082d7f9f', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), index.h("div", { key: '577085a6007e5e2c6b291bbe0a27c0ff4ec4ca78', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, index.h("sd-ghost-button", { key: 'c6b51b60d1bcc06e537800c10946ac49639fcb2c', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), index.h("span", { key: '836008030a0d66533ffba9392fee0234a9b0b425', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), index.h("sd-ghost-button", { key: 'a602cb65934157c171201f01699aacf1eeee8a57', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), index.h("div", { key: '0c1a368d4e878b2942f2b37ddff47ac13262c580', class: "sd-date-picker-calendar__week" }, sdDatePicker_config.WEEK_LABELS.map(label => (index.h("span", { key: label, class: "sd-date-picker-calendar__week-cell" }, label)))), index.h("div", { key: '31cfa57cd8890a7cd70209c771598d6350009cc6', class: "sd-date-picker-calendar__grid" }, this.cells.map(cell => {
+        return (index.h("div", { key: '8b1562e7be35eefd8b05c66931f6288edc48d4f7', class: "sd-date-picker-calendar", style: cssVars }, index.h("div", { key: '0a5b4eeeb54eed144fcb89a2030fa33783e187e3', class: "sd-date-picker-calendar__header" }, index.h("div", { key: '9d522b1a52afba7f035f2898aaec7252340f8f57', class: "sd-date-picker-calendar__nav-group" }, index.h("sd-ghost-button", { key: '944e17391090faf35e68d39b2c8c8de04ef115e5', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), index.h("span", { key: '2b708445cb919ecec6a72b9532a83d09c3324f77', class: "sd-date-picker-calendar__label" }, this.currentYear), index.h("sd-ghost-button", { key: '501f4ac1ba04fe55856f891b8738454abe358d6b', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), index.h("span", { key: 'dff5ff19a16897c79ac85c887ebe358ecefb910b', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), index.h("div", { key: 'cee819c90306c593e201aefcf278ecb6aeca2ee6', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, index.h("sd-ghost-button", { key: '73c2fddb26e26fed12218a8320dce522c5de1303', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), index.h("span", { key: 'abaa67ebd52b3e906989b84ead4a74187da7a176', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), index.h("sd-ghost-button", { key: 'e90263362f21b2521bea4e587f801fa2994a618d', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), index.h("div", { key: '6913c667bd423d5930f7c3b802b391e15c6522c9', class: "sd-date-picker-calendar__week" }, sdDatePicker_config.WEEK_LABELS.map(label => (index.h("span", { key: label, class: "sd-date-picker-calendar__week-cell" }, label)))), index.h("div", { key: '7c85954ecc18216ebab15f9249882f88965e6490', class: "sd-date-picker-calendar__grid" }, this.cells.map(cell => {
             const isSelected = cell.inCurrentMonth && !!this.value && this.value === cell.date;
             const isToday = cell.inCurrentMonth && useDatePicker.today === cell.date;
             const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);

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

@@ -40,10 +40,10 @@ const SdDatePickerTrigger = class {
                 ? sdDatePicker_config.DATEPICKER_COLORS.icon.disabled
                 : sdDatePicker_config.DATEPICKER_COLORS.icon.default,
         };
-        return (index.h("div", { key: 'ebe886b3df3b50c53d31081f6ad7e251721b5cb1', class: {
+        return (index.h("div", { key: 'b68ee54fcd6dc1fe5aa4e1f157ebd2f7603240c6', class: {
                 'sd-date-picker-trigger': true,
                 'sd-date-picker-trigger--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, index.h("sd-icon", { key: '563d3bb0221d5ba17788e1fa1e970fd2d702a4fd', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), index.h("span", { key: '3bfc4c6671e70571a4b71a62cf0fd78f0297027f', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
+            }, style: cssVars, onClick: this.handleClick }, index.h("sd-icon", { key: '8cf46b98ab2f4839e631af68451185fd849ed45f', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), index.h("span", { key: '971afb2a5c045800ebdd96df579df362ccc950c6', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
     }
 };
 SdDatePickerTrigger.style = sdDatePickerTriggerCss();

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

@@ -24,6 +24,7 @@ const SdDatePicker = class {
     label = '';
     labelWidth = '';
     addonLabel = '';
+    addonAlign = 'start';
     hint = '';
     errorMessage = '';
     fieldName = '';
@@ -102,9 +103,9 @@ const SdDatePicker = class {
             '--sd-system-color-field-border-focus': sdDatePicker_config.DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': sdDatePicker_config.DATEPICKER_COLORS.bg.default,
         };
-        return (index.h("sd-field", { key: '1a84754cdc67bd6603e1fb48479f9d3ac6424d6a', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, 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 }, index.h("div", { key: 'e4d8e05b04ac7bd4f2f96809b33d67125fe7c6d8', class: "sd-date-picker", ref: el => {
+        return (index.h("sd-field", { key: 'b8a0f70ce797b4d28997c1870641077d9c067347', name: this.fieldName || this.internalName, 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 }, index.h("div", { key: 'fe9117f48031e5524e2c751586f4b584a015000c', class: "sd-date-picker", ref: el => {
                 this.triggerRef = el;
-            } }, index.h("sd-date-picker-trigger", { key: '244924af2c3ea207b2a90c5aef5064755da3ae52', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: 'f3d882d3450f629b6ed501b984d89ffd9633531f', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, index.h("sd-date-picker-calendar", { key: 'a0f47851a27dd777f77da40f3258638a0fbc37a5', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, index.h("sd-date-picker-trigger", { key: 'd1bbcccf9de8b9aadb56291fdd2fa335af8c82dd', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '37a5c22f48e077e943a3701d4d686a52c102459e', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, index.h("sd-date-picker-calendar", { key: 'dcc2248ad0963fb924f85aad59a6b24d7f3c23d8', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get watchers() { return {
         "isOpen": [{

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

@@ -267,7 +267,7 @@ const SdDateRangePickerCalendar = class {
             '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
             '--range-divider': RANGE_LAYOUT.divider,
         };
-        return (index.h(index.Fragment, { key: '595c17bc338f96117d87c5ac3c2b26895b9e5283' }, index.h("div", { key: '39ce76545cc612422ab5024a2838fbc9faabb9a8', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), index.h("div", { key: '21764e31a3fbcfa8de22d1f243f5739fc02c38fd', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), index.h("span", { key: '402ea75f3bf8b58d30c34238285eef7099118e28', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
+        return (index.h(index.Fragment, { key: 'e925fa935f807e22b22a2f65b4af5b2568865781' }, index.h("div", { key: 'be601b16d179d91292b58c3b70ce6a4aa4f5e59a', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), index.h("div", { key: 'e193b983a7eb75a227ea8e1d13839dcc9e875588', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), index.h("span", { key: '6f2ea95c2fd490a46ac40f6a526ca028920bc564', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
     }
     static get watchers() { return {
         "value": [{

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

@@ -25,6 +25,7 @@ const SdDateRangePicker = class {
     label = '';
     labelWidth = '';
     addonLabel = '';
+    addonAlign = 'start';
     hint = '';
     errorMessage = '';
     fieldName = '';
@@ -108,9 +109,9 @@ const SdDateRangePicker = class {
             '--sd-system-color-field-border-focus': sdDatePicker_config.DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': sdDatePicker_config.DATEPICKER_COLORS.bg.default,
         };
-        return (index.h("sd-field", { key: '95ec666c91635d6b6b749d660b4495b7ebe48e6a', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, 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 }, index.h("div", { key: '3051fda66e94d51208347ae2053173570d5f1ca9', class: "sd-date-range-picker", ref: el => {
+        return (index.h("sd-field", { key: '34c4d9ef2ba50f951fc6b6b09215e750ac61cd87', name: this.fieldName || this.internalName, 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 }, index.h("div", { key: 'c92ab61d144c893077a9c81922ac24eff93314dd', class: "sd-date-range-picker", ref: el => {
                 this.triggerRef = el;
-            } }, index.h("sd-date-picker-trigger", { key: '71693b5a4cec562169d9427a4e19aed4d8b19a45', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '75b9f1c1ebdabcd1c1a33cad51189ba132274bb1', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, index.h("sd-date-range-picker-calendar", { key: 'f158eead4f44bc452bf102b3324721df84fc3b0c', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, index.h("sd-date-picker-trigger", { key: '487b8a1af6e8dee063d70ffc030c314037741d74', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: 'f22c979943cebcc82e8d4d9f86037621e8c3983a', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, index.h("sd-date-range-picker-calendar", { key: 'c19548d0074556f90c740b6ba35338ea4d41dd18', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get watchers() { return {
         "isOpen": [{

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

@@ -246,7 +246,7 @@ const SdDropdownButton = class extends baseDropdownEvent.BaseDropdownEvent {
     }
     render() {
         const { config, preset } = this.resolvedConfig;
-        return (index.h("div", { key: '5493b94262ecdd20a5fbb7ad2993dd473b1ae9e3', class: "sd-dropdown-button" }, index.h("button", { key: 'a64187dec0d84dce3532f8b3d7112ed6d6ae8e0d', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
+        return (index.h("div", { key: 'ce06d2b7e13cb234bb6e7393939d2ccd834801a5', class: "sd-dropdown-button" }, index.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: {
                 '--sd-dropdown-button-bg': config.color,
                 '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
                 '--sd-dropdown-button-border': PRESET_BORDER_COLORS[preset],
@@ -256,10 +256,10 @@ const SdDropdownButton = class extends baseDropdownEvent.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,
-            } }, index.h("span", { key: '71ed27650dcb1beb1cfa4864a6449ab190f04829', class: "sd-dropdown-button__trigger-label" }, this.label), index.h("span", { key: '6c34575c0587fb288165cf0e15db52ed6b3f50db', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), index.h("span", { key: '0544b9d36657a80b5f51b9c1849d55ab7a7dbdc2', class: {
+            } }, index.h("span", { key: '2baea4f0777ec766625d4ae1fb14739aa61ca114', class: "sd-dropdown-button__trigger-label" }, this.label), index.h("span", { key: 'b37a94dd23d26a1444ddccc192b2a5ab2388bc64', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), index.h("span", { key: 'b903ff916c3ae1ab189cd08877a57940e45d8aeb', class: {
                 'sd-dropdown-button__trigger-icon': true,
                 'sd-dropdown-button__trigger-icon--open': this.isOpen,
-            }, "aria-hidden": "true" }, index.h("sd-icon", { key: 'cd73a4dffbe1fc31c76fea221cd080b455bb3131', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
+            }, "aria-hidden": "true" }, index.h("sd-icon", { key: '2eac1eabd2677decb0c1cfe4f518a7da9aca60ff', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
     }
     static get watchers() { return {
         "isOpen": [{

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

@@ -68,6 +68,7 @@ const SdFilePicker = class {
     label = '';
     labelWidth = '';
     addonLabel = '';
+    addonAlign = 'start';
     hint = '';
     errorMessage = '';
     width = '';
@@ -229,7 +230,7 @@ const SdFilePicker = class {
                     'sd-file-picker--inline-disabled': this.disabled,
                 }, style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content));
         }
-        return (index.h("sd-field", { name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, content));
+        return (index.h("sd-field", { name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, content));
     }
     static get watchers() { return {
         "value": [{

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

@@ -155,7 +155,7 @@ const SdGhostButton = class {
             ? GHOST_BUTTON_DISABLED_COLORS[this.intent ?? 'default']
             : GHOST_BUTTON_CONTENT_COLORS[this.intent ?? 'default'];
         const accessibleName = this.ariaLabel.trim() || undefined;
-        return (index.h("button", { key: '690151271d15b4a3e07b47021f368647cc9daf62', class: {
+        return (index.h("button", { key: '4d5159cb897b6c468380f18eba1eca218d24920e', class: {
                 'sd-ghost-button': true,
                 'sd-ghost-button--disabled': this.disabled,
             }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
@@ -164,7 +164,7 @@ const SdGhostButton = class {
                 '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent ?? 'default'],
                 '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
                 '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, index.h("sd-icon", { key: '9769fff9f694e7d1fa2cba94fa8e80498d0afe2e', name: this.icon, size: sizeConfig.icon, color: contentColor })));
+            }, onClick: this.handleClick }, index.h("sd-icon", { key: '0461580c901aea244a3d0e693fb94fd6354873ab', name: this.icon, size: sizeConfig.icon, color: contentColor })));
     }
 };
 SdGhostButton.style = sdGhostButtonCss();

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

@@ -45,6 +45,7 @@ const SdInput = class {
     type = 'text';
     size = 'sm';
     addonLabel = '';
+    addonAlign = 'start';
     placeholder = '입력해 주세요.';
     disabled = false;
     clearable = false;
@@ -149,12 +150,12 @@ const SdInput = class {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (index.h("sd-field", { key: 'ed32da716dabccac9c67061086a3eb821f49afd5', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, 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 }, index.h("label", { key: 'c8297e261baee31b8508e0912004edd7fe85f115', class: "sd-input__content" }, index.h("slot", { key: '615b28bb1f239a1ead1cad888edde9b59358837b', name: "prefix" }), index.h("input", { key: 'd1231386b264dbb8b38bf920c48c59474417a492', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), index.h("slot", { key: '97f7c084a17674d52c43255b334ddeb61cf743ad', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (index.h("sd-ghost-button", { key: 'f35a0872ac6f44e41716b0bf9f93f7a000445bf6', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (index.h("sd-field", { key: '6270fb99043a06aa9a4c2ead77007e6c03adafef', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, 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 }, index.h("label", { key: 'aaef18c323710235b41d76b26a21380cadcc6e0f', class: "sd-input__content" }, index.h("slot", { key: 'fd5d5845acf9d5351dec5af84e09d91246de8a68', name: "prefix" }), index.h("input", { key: '8b4dd1eab6488a29daec6e6dde5238b319001d5b', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), index.h("slot", { key: '79918e68de3045b509a27d8567e095665040689b', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (index.h("sd-ghost-button", { key: 'f5358346a20830c1fef955a2bb6783156b251178', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
                 if (this.disabled)
                     return;
                 this.internalValue = '';
                 await this.formField?.sdValidate();
-            } })), this.type === 'password' && (index.h("sd-ghost-button", { key: '0fdf74595057997c7d2f5f0f3ba6b75c340c2965', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
+            } })), this.type === 'password' && (index.h("sd-ghost-button", { key: '77108ea21a4b9afc9e9051c98d4d49bcb571cffb', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
                 if (this.disabled)
                     return;
                 this.passwordVisible = !this.passwordVisible;

package/dist/cjs/sd-loading-container.cjs.entry.js

@@ -18,10 +18,10 @@ const SdLoadingContainer = class {
         this.visible = false;
     }
     render() {
-        return (index.h("div", { key: '8236579ed01f703fb105576c2fd575b157b3aa76', class: {
+        return (index.h("div", { key: '7887102a2b03f911fad57784b3b45b12d2265ae2', class: {
                 'sd-loading-container': true,
                 'sd-loading-container--visible': this.visible,
-            }, "aria-hidden": this.visible ? 'false' : 'true' }, index.h("div", { key: '176473a839add91a86d207544e9cc5862b13d04f', class: "sd-loading-container__backdrop" }), index.h("div", { key: '2776ed326caa6870a79b94079ff6e778ee560b02', class: "sd-loading-container__content" }, index.h("sd-circle-progress", { key: '6977bfd46e06e9c13492a15b5081c98446770de5', indeterminate: true, type: "inverse" }), this.message && (index.h("p", { key: '7cea458c498a4682b1d4d5f07e059ed8e4905df0', class: "sd-loading-container__message" }, this.message)))));
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, index.h("div", { key: '0f815029574907643be52b50a6c8be8e66ced072', class: "sd-loading-container__backdrop" }), index.h("div", { key: '9ea0faf8ed4094b3fd93a6e29c55130d58b245fe', class: "sd-loading-container__content" }, index.h("sd-circle-progress", { key: '6e89faad35f282d91098c213879c0ecf8d05a5ed', indeterminate: true, type: "inverse" }), this.message && (index.h("p", { key: '05d3128ecf91a372a426a2508535c7789aff9bc1', class: "sd-loading-container__message" }, this.message)))));
     }
 };
 SdLoadingContainer.style = sdLoadingContainerCss();

package/dist/cjs/sd-number-input.cjs.entry.js

@@ -126,6 +126,7 @@ const SdNumberInput = class {
     label;
     labelWidth = '';
     addonLabel = '';
+    addonAlign = 'start';
     placeholder = '입력해 주세요.';
     disabled = false;
     width;
@@ -384,12 +385,12 @@ const SdNumberInput = class {
             '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
             '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
         };
-        return (index.h("sd-field", { key: 'edb2eaf473ba53fa340e39a350624e0a9e8b566e', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: '408b984ca5c7f3edaf0afe4c56fab2901824b2de', class: "sd-number-input__content" }, this.useButton && (index.h("button", { key: 'da29f621914cbb7cac4c83f55056f52ef918f7c7', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, index.h("sd-icon", { key: 'a60c99bd949c2791608d269bc478b490dd4335e0', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+        return (index.h("sd-field", { key: '85941d001afd73a10defb7f0728579ce0b8457b1', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: '565de4d4a79219bc8d6e9c8f4528ec93a655c376', class: "sd-number-input__content" }, this.useButton && (index.h("button", { key: 'fa27f209b09a03121eb89959164a4a349d525d9a', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, index.h("sd-icon", { key: '7f4fe23f4b0eba4a06e0153338228710365ce57f', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (index.h("span", { key: '3eae6cb2d277f3f830f7cb122b72cdcdedf57e10', class: "sd-number-input__prefix" }, this.inputPrefix)), index.h("input", { key: '19e42ab159a9df7721ca6ea5505d3a0aca2517c4', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
+                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (index.h("span", { key: '55a96b32e383cdf8d5b253336130460275373f41', class: "sd-number-input__prefix" }, this.inputPrefix)), index.h("input", { key: 'e25faa5af70d89ae0266bd9dbf35c72276885a9b', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
                 textAlign: this.useButton ? 'center' : 'right',
                 ...this.inputStyle,
-            } }), this.inputSuffix && (index.h("span", { key: '5f9dc1e294a081cede120d9466d70910a9b1d6bb', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (index.h("button", { key: '50d96dd2556071480b17210b8db307ab4082c92b', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, index.h("sd-icon", { key: '1821a77886ac9dc169c8e2697282e813a334df35', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && (index.h("span", { key: '777730846e62dd03a9193cf582908a059789b329', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (index.h("button", { key: 'ef8b471cb1d2cbd3a5b350ddbbf856e3bd104567', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, index.h("sd-icon", { key: 'e2440c5a4571b69dc0e91ab0b10dffdd8242b1d8', name: "add", size: iconSize, color: this.isIncrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
                 : NUMBER_INPUT_STEPPER.icon.default }))))));
     }

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

@@ -151,13 +151,13 @@ const SdPagination = class {
             '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
             '--sd-pagination-item-width': `${this.buttonWidth}px`,
         };
-        return (index.h("div", { key: '1f6d3909c5c7f17701c405f058bf999020d9424e', class: {
+        return (index.h("div", { key: '2b9efc3a0340799a39e7bbfe6f3a270b7cc5f0c7', class: {
                 'sd-pagination': true,
                 'sd-pagination--simple': this.simple,
-            }, style: cssVars }, index.h("div", { key: '9faaf4f1033e406ecaad7ed593a1610bb7002631', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "sd-pagination__info" }, index.h("span", { class: "sd-pagination__current" }, this.currentPage), index.h("span", { class: "sd-pagination__divider" }, "/"), index.h("span", { class: "sd-pagination__last" }, this.lastPage))) : (index.h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (index.h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+            }, style: cssVars }, index.h("div", { key: 'af585a4e9ad2fc25e47cb42fdcc66850d6210fd1', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "sd-pagination__info" }, index.h("span", { class: "sd-pagination__current" }, this.currentPage), index.h("span", { class: "sd-pagination__divider" }, "/"), index.h("span", { class: "sd-pagination__last" }, this.lastPage))) : (index.h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (index.h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'sd-pagination__item': true,
                 'sd-pagination__item--selected': this.currentPage === n,
-            }, onClick: () => this.handlePageChange(n) }, n))))), index.h("div", { key: 'c8d21679938032bee223f6dfefff3a87dc5badec', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n))))), index.h("div", { key: '3128e19dee5f2d00fcc5603f96f323afaf2750d4', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
     }
 };
 SdPagination.style = sdPaginationCss();
@@ -184,6 +184,7 @@ const SdSelectV2 = class {
     label = '';
     labelWidth = '';
     addonLabel = '';
+    addonAlign = 'start';
     error = false;
     hint = '';
     errorMessage = '';
@@ -203,11 +204,29 @@ const SdSelectV2 = class {
     hovered = false;
     update;
     dropDownShow;
+    async sdFocus() {
+        if (this.disabled)
+            return;
+        await this.triggerComponentRef?.sdFocus();
+    }
+    async sdOpen() {
+        // sdFocus 직후 호출 시 트리거 ref/레이아웃이 안정될 때까지 한 틱 대기
+        await new Promise(resolve => setTimeout(resolve, 0));
+        if (this.disabled || this.isOpen)
+            return;
+        this.prepareDropdownGeometry();
+        if (this.closeAnimationTimer)
+            clearTimeout(this.closeAnimationTimer);
+        this.isAnimatingOut = false;
+        this.isOpen = true;
+    }
     triggerRef;
+    triggerComponentRef;
     closeAnimationTimer;
     internalName = index$1.nanoid();
+    triggerHasFocus = false;
     watchIsOpen(newValue) {
-        this.focused = newValue;
+        this.syncFocusedState(newValue);
         this.dropDownShow.emit({ isOpen: newValue });
     }
     get isMulti() {
@@ -215,19 +234,19 @@ const SdSelectV2 = class {
     }
     get displayText() {
         if (this.isMulti) {
-            if (!this.value || !Array.isArray(this.value))
-                return '';
-            if (this.emitValue) {
-                const flat = this.flattenOptions(this.options);
-                return this.value
-                    .map(v => flat.find(o => o.value === v)?.label ?? '')
-                    .filter(Boolean)
-                    .join(', ');
-            }
-            const selected = this.value;
-            if (selected.length === 0)
+            if (!Array.isArray(this.value) || this.value.length === 0)
                 return '';
-            return selected.map(s => s.label).join(', ');
+            const flat = this.flattenOptions(this.options);
+            return this.value
+                .map(item => {
+                if (item != null && typeof item === 'object') {
+                    const opt = item;
+                    return opt.label ?? flat.find(o => o.value === opt.value)?.label ?? '';
+                }
+                return flat.find(o => o.value === item)?.label ?? '';
+            })
+                .filter(Boolean)
+                .join(', ');
         }
         if (this.value == null)
             return '';
@@ -302,20 +321,33 @@ const SdSelectV2 = class {
             this.isAnimatingOut = false;
         }, SdSelectV2.CLOSE_ANIMATION_DURATION);
     }
-    handleTriggerClick = () => {
+    prepareDropdownGeometry() {
         if (this.triggerRef) {
             this.triggerWidth = `${this.triggerRef.offsetWidth}px`;
         }
         this.updateDropdownViewportConstraints();
+    }
+    syncFocusedState(isOpen = this.isOpen) {
+        this.focused = isOpen || this.triggerHasFocus;
+    }
+    handleTriggerFocus = () => {
+        this.triggerHasFocus = true;
+        this.syncFocusedState();
+    };
+    handleTriggerBlur = () => {
+        this.triggerHasFocus = false;
+        this.syncFocusedState();
+    };
+    handleTriggerClick = () => {
         if (this.isOpen) {
             this.closeDropdown();
+            return;
         }
-        else {
-            if (this.closeAnimationTimer)
-                clearTimeout(this.closeAnimationTimer);
-            this.isAnimatingOut = false;
-            this.isOpen = true;
-        }
+        this.prepareDropdownGeometry();
+        if (this.closeAnimationTimer)
+            clearTimeout(this.closeAnimationTimer);
+        this.isAnimatingOut = false;
+        this.isOpen = true;
     };
     emitUpdate(value) {
         this.update.emit(value);
@@ -352,9 +384,7 @@ const SdSelectV2 = class {
         }
         else {
             const exists = selected.some(s => s.value === option.value);
-            newSelected = exists
-                ? selected.filter(s => s.value !== option.value)
-                : [...selected, option];
+            newSelected = exists ? selected.filter(s => s.value !== option.value) : [...selected, option];
         }
         this.value = this.toMultiValue(newSelected);
         this.emitUpdate(this.value);
@@ -376,13 +406,15 @@ const SdSelectV2 = class {
                 this.closeDropdown();
             },
         };
-        return (index.h("sd-field", { key: 'ffca1287cefaeedf867a6b86a752942a1c8d1703', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
+        return (index.h("sd-field", { key: '8c9b5a1414bd0bb068acd53e07a61767b6904c62', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
                 this.hovered = true;
             }, onMouseLeave: () => {
                 this.hovered = false;
-            } }, index.h("div", { key: 'f53f38543b165040eb48236e2a25e43b78444350', class: "sd-select-v2", ref: el => {
+            } }, index.h("div", { key: '47677529c530f06cb3a35a30dd4cc9f9a34d8759', class: "sd-select-v2", ref: el => {
                 this.triggerRef = el;
-            } }, index.h("sd-select-v2-trigger", { key: 'afd60ef0b492d9179318a5187565b45a58ef1ed5', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: 'e482c1fffc24e893fe1c04f136a116bac6c1b2e9', ...portalProps }, index.h("sd-select-v2-listbox", { key: 'c864fdef604eee7cea7c946de970e78b59e8b0da', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+            } }, index.h("sd-select-v2-trigger", { key: '3aae441a7ec1a6d8faa0f04f41881f515b641853', ref: el => {
+                this.triggerComponentRef = el;
+            }, displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '7c92db46231f4c46ce94668ac220dc7ec14ad118', ...portalProps }, index.h("sd-select-v2-listbox", { key: 'af3fc60a9554573e50145edeb0ea8f412116fd76', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
     static get watchers() { return {
         "isOpen": [{

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

@@ -14,6 +14,7 @@ const sdPopoverCss = () => `sd-popover{position:relative;cursor:pointer;display:
 const SdPopover = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.showChange = index.createEvent(this, "sdShowChange", 7);
     }
     get el() { return index.getElement(this); }
     show = false;
@@ -28,20 +29,17 @@ const SdPopover = class {
     messages = [];
     buttons = [];
     menuClass = '';
-    noHover = true;
     useClose = false;
-    showPopover = false;
-    slotContent = '';
-    watchShowHandler(newValue) {
-        this.showPopover = newValue;
-    }
-    componentWillLoad() {
-        this.showPopover = this.show;
-        this.slotContent = this.el.innerHTML;
-    }
+    showChange;
     buttonEl;
+    setShow = (next) => {
+        if (this.show === next)
+            return;
+        this.show = next;
+        this.showChange.emit(next);
+    };
     get popoverOffset() {
-        switch (this.placement) {
+        switch (this.placement ?? 'bottom') {
             case 'top':
                 return [0, -4];
             case 'bottom':
@@ -52,24 +50,26 @@ const SdPopover = class {
                 return [4, 0];
         }
     }
-    handleClose = () => {
-        this.showPopover = false;
-    };
+    handleClose = () => this.setShow(false);
     render() {
-        return (index.h(index.Fragment, { key: '32e3a11baabd4f4fc8c570311b99b2113e4ce3b0' }, this.label ? (index.h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onSdClick: () => (this.showPopover = !this.showPopover) })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (index.h("sd-floating-portal", { key: '8139e72f293319e4d5ed3fe67d4f47a03743b437', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement, offset: this.popoverOffset }, index.h("div", { key: 'fdb76f4a9a54be08fdf0d352ff389453840c4789', class: {
+        const placement = this.placement ?? 'bottom';
+        const color = this.color ?? '#01BB4B';
+        const icon = this.icon ?? 'helpOutline';
+        const iconSize = this.iconSize ?? 12;
+        const buttonSize = this.buttonSize ?? 'sm';
+        const buttonVariant = this.buttonVariant ?? 'primary';
+        const menuClass = this.menuClass ?? '';
+        const messages = Array.isArray(this.messages) ? this.messages : [];
+        const buttons = Array.isArray(this.buttons) ? this.buttons : [];
+        return (index.h(index.Fragment, { key: 'e576deaacba9395c5aeb76fd13baa0dc1e908d38' }, this.label ? (index.h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: icon, size: buttonSize, color: color, variant: buttonVariant, class: "sd-popover", onSdClick: () => this.setShow(!this.show) })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (index.h("sd-floating-portal", { key: '7520067b46527c22108292a659dd7e8fba85397c', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, index.h("div", { key: 'ba48632dd93359851bd87f4d55f2341653b0caab', class: {
                 'sd-floating-menu': true,
                 'sd-floating-menu--popover': true,
-                [`sd-floating-menu--${this.placement}`]: true,
-                [this.menuClass]: !!this.menuClass,
+                [`sd-floating-menu--${placement}`]: true,
+                [menuClass]: !!menuClass,
             }, style: {
                 '--sd-floating-bg': popoverTokens.popover.bg,
-            } }, index.h("i", { key: '94cb19bdf7182cd311800ac4d3fdf49c61db75fb', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '67394b2b751c485fc7198a10d54df2659c6f222b' })), index.h("div", { key: '1d6e143a931c24f28ef68afbfe7b84e73d3288db', class: "sd-floating-menu__content" }, this.menuTitle && index.h("div", { key: '33d47a87e6cab23131f360f7ea07809cec942ec0', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (index.h("div", { key: '28006b8958d1921eefa42c6282b8e735ae3e9367', class: "sd-floating-menu__messages" }, this.messages.map(message => (index.h("div", null, message))))), this.buttons.length > 0 && (index.h("div", { key: '574604775790aa49591848eb5f86ca0c6735558f', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (index.h("sd-button", { ...button })))))), this.useClose && (index.h("sd-ghost-button", { key: '027260d65fc575f480ce23e081b8b80ac8a1daea', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: () => this.handleClose() })))))));
+            } }, index.h("i", { key: 'fce80e5bc6f49f5dbc1772f910eae0fb9bc09a6b', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '32aaa3b00f7ac77d47fd2bc3c968a7a4c20102c6' })), index.h("div", { key: '29b3240126412070466acee7ee1d061d235ba51e', class: "sd-floating-menu__content" }, this.menuTitle && index.h("div", { key: '6cb5cf4531f573e93146a552b34831dc04851661', class: "sd-floating-menu__title" }, this.menuTitle), messages.length > 0 && (index.h("div", { key: 'ba15bb4efc4af37dd89b0da61539f516cc31a2f3', class: "sd-floating-menu__messages" }, messages.map((message, i) => (index.h("div", { key: `msg-${i}` }, message))))), buttons.length > 0 && (index.h("div", { key: '2656545909634d8c54e9d34155e699041b5512f5', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${buttons.length}` }, buttons.map((button, i) => (index.h("sd-button", { key: `btn-${i}`, ...button })))))), this.useClose && (index.h("sd-ghost-button", { key: '315bf10dde1b7cde5727beb101a1a1ad07966138', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose })))))));
     }
-    static get watchers() { return {
-        "show": [{
-                "watchShowHandler": 0
-            }]
-    }; }
 };
 SdPopover.style = sdPopoverCss();
 

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

@@ -227,7 +227,7 @@ const SdPortal = class {
         this.close.emit();
     }
     render() {
-        return index.h("slot", { key: '394cce939280a171c13e875eaead3fbdd0163d5b' });
+        return index.h("slot", { key: 'fa3033a01d6c8f6878c91367b9670206ab5c71d7' });
     }
     static get watchers() { return {
         "open": [{

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

@@ -170,7 +170,7 @@ const SdRadioButton = class {
             '--sd-radio-button-content-select': RADIO_BUTTON_COLORS.content.select,
             '--sd-radio-button-content-disabled': RADIO_BUTTON_COLORS.content.disabled,
         };
-        return (index.h("div", { key: 'f4ac83797b2661b0c2a612674911cbb0e41350a6', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
+        return (index.h("div", { key: '67c8e7ad03fb6ee4cabd06591e3e11e5d38914f0', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
             const isSelected = this.isOptionSelected(option);
             const isDisabled = this.isOptionDisabled(option);
             return (index.h("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, index.h("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && index.h("span", { class: "sd-radio-button__label" }, option.label)));

package/dist/cjs/sd-radio-group.cjs.entry.js

@@ -31,7 +31,7 @@ const SdRadioGroup = class {
         return classes.join(' ');
     }
     render() {
-        return (index.h("div", { key: '8b01aca15ce9452921f37ba648d2d47728b84f41', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
+        return (index.h("div", { key: '5f6559df018e48958103d0a84a0f074f81bd255a', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
             return (index.h("sd-radio", { key: `radio-${option.value}`, val: String(option.value), value: String(this.value), label: option.label, disabled: this.disabled || !!option.disabled, onSdUpdate: ({ detail }) => this.handleRadioChange(detail) }));
         })));
     }

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

@@ -118,7 +118,7 @@ const SdRadio = class {
             '--sd-radio-disabled-dot': RADIO_COLORS.disabled.dot,
             '--sd-radio-label-color': RADIO_COLORS.label,
         };
-        return (index.h("label", { key: '2b7819249e5070a22b626530011db4a8e56194f1', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("input", { key: '233699a7c3bc13708d43ca3719f61edf53836c83', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), index.h("span", { key: 'eb665c5f8c6202b66b65b6b120f144970fba0a38', class: "sd-radio__circle" }), this.label && index.h("span", { key: '3d0db13e083bacb4cb7ace9129fcfcd61f18dfc7', class: "sd-radio__label" }, this.label)));
+        return (index.h("label", { key: '2b809f1f3ce39e6dd2429cf1c48a935500287614', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("input", { key: '1f44ab44d741ef40152318ce6fd437bb091c3cfb', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), index.h("span", { key: '941fddbb939a46afbe72c642d3b6f6f252f143f1', class: "sd-radio__circle" }), this.label && index.h("span", { key: 'e30139892e82b8da251525e3c717549a2b7522d0', class: "sd-radio__label" }, this.label)));
     }
     static get watchers() { return {
         "value": [{

package/dist/cjs/sd-select-group.cjs.entry.js

@@ -30,6 +30,7 @@ const SdSelectGroup = class extends baseDropdownEvent.BaseDropdownEvent {
     label = '';
     labelWidth = '';
     addonLabel = '';
+    addonAlign = 'start';
     icon = undefined;
     labelTooltip = '';
     labelTooltipProps = null;
@@ -276,7 +277,7 @@ const SdSelectGroup = class extends baseDropdownEvent.BaseDropdownEvent {
         });
     }
     render() {
-        return (index.h("sd-field", { key: 'c3d2a4365ba2594d3e0dca138ff63a335171125c', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, index.h("div", { key: 'b527250fecc69b8f5d4c88aa3f6090c2b291efc9', class: {
+        return (index.h("sd-field", { key: '698b76ed0785f475a099fac99e3564b20c252c01', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, addonAlign: this.addonAlign, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, index.h("div", { key: 'aa449fda5e32d0519792dc2e713d3c59658c86fa', class: {
                 'sd-select-group': true,
                 'sd-select-group--open': this.isOpen,
                 'sd-select-group--disabled': this.disabled,

package/dist/cjs/sd-select-multiple-group.cjs.entry.js

@@ -398,7 +398,7 @@ const SdSelectMultipleGroup = class extends baseDropdownEvent.BaseDropdownEvent
         });
     }
     render() {
-        return (index.h("sd-field", { key: '8e0cfc89b55809d3c5b556fc5c59077c2c952ad5', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, index.h("div", { key: '852a713b4c38c4845c407cb04801d9b0c33f0515', class: {
+        return (index.h("sd-field", { key: '4140b6529565f97fa65d81ae1462108476d52bcc', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, index.h("div", { key: '2dab2697f3e375d214b66464b0f57aa32e77757b', class: {
                 'sd-select-multiple-group': true,
                 'sd-select-multiple-group--open': this.isOpen,
                 'sd-select-multiple-group--disabled': this.disabled,