@sellmate/design-system 1.0.61 → 1.0.63

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h } from './index-DsU722JF.js';
-import { a as DATEPICKER_SIZE_MAP, D as DATEPICKER_COLORS } from './sd-date-picker.config-C4i826lM.js';
+import { r as registerInstance, c as createEvent, h } from './index-BqHL8W3c.js';
+import { a as DATEPICKER_SIZE_MAP, D as DATEPICKER_COLORS } from './sd-date-picker.config-bYCOh35g.js';
 
 const sdDatePickerTriggerCss = () => `sd-date-picker-trigger{display:block;width:100%;height:100%}sd-date-picker-trigger .sd-date-picker-trigger{display:flex;align-items:center;gap:var(--trigger-gap);width:100%;height:100%;padding:0 var(--trigger-padding-x);cursor:pointer;user-select:none;overflow:hidden;border-radius:var(--trigger-radius)}sd-date-picker-trigger .sd-date-picker-trigger--disabled{cursor:not-allowed}sd-date-picker-trigger .sd-date-picker-trigger__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}sd-date-picker-trigger .sd-date-picker-trigger__text{flex:1;min-width:0;font-size:var(--trigger-font-size);line-height:var(--trigger-line-height);font-weight:var(--trigger-font-weight);color:var(--trigger-text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}`;
 
@@ -38,10 +38,10 @@ const SdDatePickerTrigger = class {
                 ? DATEPICKER_COLORS.icon.disabled
                 : DATEPICKER_COLORS.icon.default,
         };
-        return (h("div", { key: 'e39df39c0b865be9f08e60787ea122dccaa7bff4', class: {
+        return (h("div", { key: '5d8508069232bba144bfb9480b0befe420a3392b', class: {
                 'sd-date-picker-trigger': true,
                 'sd-date-picker-trigger--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, h("sd-icon", { key: 'a04c576196fb9695a044485f30d459fd6e945b33', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: '94b4da3bc41f31519afbb49324548209582be850', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
+            }, style: cssVars, onClick: this.handleClick }, h("sd-icon", { key: '71131e34dd1225e9633395041f7a768c020343bd', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: '192520646e181add5f87f6ce1d3a5caf8556b163', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
     }
 };
 SdDatePickerTrigger.style = sdDatePickerTriggerCss();

package/dist/esm/{sd-date-picker.config-C4i826lM.js → sd-date-picker.config-bYCOh35g.js}

@@ -58,7 +58,7 @@ const datepicker = {
 			rowGap: "4"
 		},
 		day: {
-			size: "40",
+			width: "40",
 			circle: {
 				size: "32",
 				radius: "9999"
@@ -75,7 +75,7 @@ const datepicker = {
 				text: "#FFFFFF"
 			},
 			disabled: {
-				text: "#888888"
+				text: "#BBBBBB"
 			},
 			typography: {
 				"default": {
@@ -149,7 +149,7 @@ const CALENDAR_LAYOUT = {
         rowGap: datepickerTokens.datepicker.calendar.grid.rowGap,
     },
     day: {
-        size: datepickerTokens.datepicker.calendar.day.size,
+        size: datepickerTokens.datepicker.calendar.day.width,
         circleSize: datepickerTokens.datepicker.calendar.day.circle.size,
         circleRadius: datepickerTokens.datepicker.calendar.day.circle.radius,
         defaultText: datepickerTokens.datepicker.calendar.day.default.text,

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, g as getElement, h } from './index-DsU722JF.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BqHL8W3c.js';
 import { n as nanoid } from './index-CCwNgVmC.js';
-import { D as DATEPICKER_COLORS, a as DATEPICKER_SIZE_MAP } from './sd-date-picker.config-C4i826lM.js';
+import { D as DATEPICKER_COLORS, a as DATEPICKER_SIZE_MAP } from './sd-date-picker.config-bYCOh35g.js';
 
 const sdDatePickerCss = () => `sd-date-picker{display:inline-flex}sd-date-picker sd-portal{display:none}sd-date-picker .sd-date-picker{position:relative;width:100%;height:100%}`;
 
@@ -99,9 +99,9 @@ const SdDatePicker = class {
             '--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: '713640ad88e27954a12e75f8672032374f9effef', name: this.fieldName || this.internalName, label: this.label, 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, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '6f4d6a4dabd3909c647ba9e8d672f1c97a4f50ff', class: "sd-date-picker", ref: el => {
+        return (h("sd-field", { key: 'cfbaa89a7e07ff2d8994f3e8faa16bc55decce0f', name: this.fieldName || this.internalName, label: this.label, 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 }, h("div", { key: '674cc78bc3a3cda15a1cff07c36d0d5adbcfa2ef', class: "sd-date-picker", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-date-picker-trigger", { key: '06703672547b5a96b791eaacfbce4f7d23467e9c', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '74b099498b8cdf75038c5d3e4d81bd2f5ead9068', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-picker-calendar", { key: '6385470ab1578662f38c6bc4409b0010e55975a5', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, h("sd-date-picker-trigger", { key: '1491cea4ff657631b3dc197fa39981c2c4df96c7', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '9a759a3470bc077a52efbd4718cf11f3b67ef477', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-picker-calendar", { key: 'a14a447fbf28d95173eca5fae3baa73319c0bc37', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get watchers() { return {
         "isOpen": [{

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-DsU722JF.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-BqHL8W3c.js';
 import { u as useDatePicker, t as today } from './useDatePicker-DTrMR0rx.js';
-import { d as datepickerTokens, W as WEEK_LABELS, C as CALENDAR_LAYOUT } from './sd-date-picker.config-C4i826lM.js';
+import { d as datepickerTokens, W as WEEK_LABELS, C as CALENDAR_LAYOUT } from './sd-date-picker.config-bYCOh35g.js';
 
 const addDays = (inputDate, days) => {
     const [year, month, day] = inputDate.split('-').map(Number);
@@ -265,7 +265,7 @@ const SdDateRangePickerCalendar = class {
             '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
             '--range-divider': RANGE_LAYOUT.divider,
         };
-        return (h(Fragment, { key: '5c9510be171a638870c8b86ef2c13c81d4920209' }, h("div", { key: 'b9af5cf84625eb19039b6ab2b41622364cbbea82', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: '83578cd21d5984e3ffbda26c90a96df82d78deb5', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: '8c31d30b60f252adaafa1b830099743f6501e368', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
+        return (h(Fragment, { key: '99b9de5fce7e4d039b40ed95b3451c28e7799dc8' }, h("div", { key: 'b55374e977f79e6dd7cd5d4af9df30bf41e40fba', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: '6bd94cde83d82efc270148434dfb6410dc5f9634', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: '9e179166ebad4cf295e831ef2e63fc9677f65b82', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
     }
     static get watchers() { return {
         "value": [{

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, g as getElement, h } from './index-DsU722JF.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BqHL8W3c.js';
 import { n as nanoid } from './index-CCwNgVmC.js';
-import { D as DATEPICKER_COLORS, a as DATEPICKER_SIZE_MAP } from './sd-date-picker.config-C4i826lM.js';
+import { D as DATEPICKER_COLORS, a as DATEPICKER_SIZE_MAP } from './sd-date-picker.config-bYCOh35g.js';
 
 const sdDateRangePickerCss = () => `sd-date-range-picker{display:inline-flex}sd-date-range-picker sd-portal{display:none}sd-date-range-picker .sd-date-range-picker{position:relative;width:100%;height:100%}`;
 
@@ -105,9 +105,9 @@ const SdDateRangePicker = class {
             '--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: '5c381ba40914b02d248b77852e8297ba367faed7', name: this.fieldName || this.internalName, label: this.label, 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, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: 'dee79baa195056a45b0af1c106b4f8890fc370a7', class: "sd-date-range-picker", ref: el => {
+        return (h("sd-field", { key: 'c3ce7e19d317939c193b6d1481b78ce599b0ffb1', name: this.fieldName || this.internalName, label: this.label, 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 }, h("div", { key: 'a3b48e2f79359620aabe01cfb32ac6a066acf567', class: "sd-date-range-picker", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-date-picker-trigger", { key: 'e5b46762012b35c8be2c56cbfbec22682ba7a3ed', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '47d0315e5a7baf3583286a730126ba0c4fdc1945', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-range-picker-calendar", { key: '58b8765eacd17d7f7362ed67b8919eee8e89c68f', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, h("sd-date-picker-trigger", { key: '3b2a963d29e93fe2ef82d1cd466ebd079c31ee30', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '5e51463ffdaf21c67a796b8a4418a287b48f7528', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-range-picker-calendar", { key: '820176f7e03e9aab97e8b1f7752a535385918e46', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get watchers() { return {
         "isOpen": [{

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, g as getElement, h } from './index-DsU722JF.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BqHL8W3c.js';
 import { B as BaseDropdownEvent } from './base-dropdown-event-CRdYeSBK.js';
 import { B as BUTTON_CONFIG, g as getPresetName, c as PRESET_BORDER_COLORS$1, P as PRESET_CONTENT_COLORS$1, d as PRESET_HOVER_BACKGROUNDS$1, b as BUTTON_FOCUS_RING_COLOR } from './sd-button-v2.config-CV4xelxV.js';
 import { b as buttonTokens } from './component.button-B1XBwjCW.js';
@@ -55,13 +55,18 @@ const PRESET_MENU_ITEM_ACTIVE_COLORS = {
     danger: MENU_ITEM_ACTIVE_COLOR,
     danger_outline: MENU_ITEM_ACTIVE_COLOR,
 };
+const DROPDOWN_CHEVRON_ICON_SIZE = {
+    xs: 12,
+    sm: 12,
+    md: 16,
+};
 const DROPDOWN_DISABLED_BACKGROUND = buttonTokens.button.bg.disabled;
 const DROPDOWN_DISABLED_TEXT = buttonTokens.button.text.disabled;
 const DROPDOWN_DISABLED_BORDER = buttonTokens.button.border.disabled;
 const isDropdownButtonName = (value) => value in DROPDOWN_BUTTON_CONFIG;
 const getDropdownButtonPreset = (value) => getPresetName(value);
 
-const sdDropdownButtonCss = () => `sd-dropdown-button{display:inline-flex;width:fit-content;height:fit-content}.sd-dropdown-button{display:inline-flex;position:relative}.sd-dropdown-button__trigger{--sd-dropdown-button-height:var(--sd-button-md-height, 34px);--sd-dropdown-button-padding-x:var(--sd-button-md-padding-x, 20px);--sd-dropdown-button-gap:var(--sd-button-md-gap, 8px);--sd-dropdown-button-font-family:var(--sd-button-md-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-md-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-md-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-md-typography-text-decoration, none);--sd-dropdown-button-bg:#025497;--sd-dropdown-button-bg-hover:#004177;--sd-dropdown-button-border:transparent;--sd-dropdown-button-content:#ffffff;--sd-dropdown-button-current-content:var(--sd-dropdown-button-content);--sd-dropdown-button-divider:#006ac1;--sd-dropdown-button-accent:#006ac1;--sd-dropdown-button-disabled-bg:var(--sd-button-bg-disabled, $grey_30);--sd-dropdown-button-disabled-content:var(--sd-button-text-disabled, $grey_65);--sd-dropdown-button-disabled-border:var(--sd-button-border-disabled, $grey_45);display:inline-flex;align-items:stretch;justify-content:space-between;min-height:var(--sd-dropdown-button-height);padding:0;border:var(--sd-button-border-width-default, 1px) solid var(--sd-dropdown-button-border);border-radius:var(--sd-button-radius-sm, 4px);background:var(--sd-dropdown-button-bg);color:var(--sd-dropdown-button-current-content);cursor:pointer;box-sizing:border-box;font-family:var(--sd-dropdown-button-font-family);font-size:var(--sd-dropdown-button-font-size);font-weight:var(--sd-dropdown-button-font-weight);line-height:1;text-decoration:var(--sd-dropdown-button-text-decoration);transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;white-space:nowrap}.sd-dropdown-button__trigger:hover:not(.sd-dropdown-button__trigger--disabled){background:var(--sd-dropdown-button-bg-hover)}.sd-dropdown-button__trigger:focus-visible{outline:0;box-shadow:0 0 0 2px var(--sd-dropdown-button-accent)}.sd-dropdown-button__trigger--xs{--sd-dropdown-button-height:var(--sd-button-xs-height, 24px);--sd-dropdown-button-padding-x:var(--sd-button-xs-padding-x, 8px);--sd-dropdown-button-gap:var(--sd-button-xs-gap, 4px);--sd-dropdown-button-font-family:var(--sd-button-xs-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-xs-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-xs-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-xs-typography-text-decoration, none)}.sd-dropdown-button__trigger--sm{--sd-dropdown-button-height:var(--sd-button-sm-height, 28px);--sd-dropdown-button-padding-x:var(--sd-button-sm-padding-x, 12px);--sd-dropdown-button-gap:var(--sd-button-sm-gap, 6px);--sd-dropdown-button-font-family:var(--sd-button-sm-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-sm-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-sm-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-sm-typography-text-decoration, none)}.sd-dropdown-button__trigger--md{--sd-dropdown-button-height:var(--sd-button-md-height, 34px);--sd-dropdown-button-padding-x:var(--sd-button-md-padding-x, 20px);--sd-dropdown-button-gap:var(--sd-button-md-gap, 8px);--sd-dropdown-button-font-family:var(--sd-button-md-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-md-typography-font-size, 16px);--sd-dropdown-button-font-weight:var(--sd-button-md-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-md-typography-text-decoration, none)}.sd-dropdown-button__trigger--disabled{border-color:var(--sd-dropdown-button-disabled-border);background:var(--sd-dropdown-button-disabled-bg);--sd-dropdown-button-current-content:var(--sd-dropdown-button-disabled-content);cursor:not-allowed}.sd-dropdown-button__trigger--disabled .sd-dropdown-button__trigger-divider{background:var(--sd-dropdown-button-disabled-border)}.sd-dropdown-button__trigger-label,.sd-dropdown-button__trigger-icon{display:inline-flex;align-items:center;justify-content:center}.sd-dropdown-button__trigger-label{flex:1 1 auto;min-width:0;padding:0 var(--sd-dropdown-button-padding-x)}.sd-dropdown-button__trigger-divider{align-self:stretch;width:1px;height:auto;background:var(--sd-dropdown-button-divider);opacity:0.9}.sd-dropdown-button__trigger-icon{flex:0 0 auto;min-width:calc(var(--sd-dropdown-button-height) - 2px);padding:0 calc(var(--sd-dropdown-button-gap) + 2px);transition:transform 0.2s ease}.sd-dropdown-button__trigger-icon--open{transform:rotate(180deg)}.sd-dropdown-button__menu{position:relative;display:grid;width:max-content;min-width:var(--sd-dropdown-button-menu-min-width, max-content);max-width:calc(100vw - 24px);padding:4px 0;border:0;border-radius:4px;background:#FFFFFF;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1019607843);box-sizing:border-box;overflow:hidden}.sd-dropdown-button__menu-item{--sd-dropdown-button-menu-item-current-color:var(--sd-dropdown-button-menu-item-color);display:inline-flex;align-items:center;gap:8px;min-height:28px;width:100%;padding:0 12px;border:0;border-radius:0;background:transparent;color:var(--sd-dropdown-button-menu-item-current-color);cursor:pointer;box-sizing:border-box;font:inherit;text-align:left;transition:background-color 0.15s ease, color 0.15s ease}.sd-dropdown-button__menu-item--active{background:var(--sd-dropdown-button-menu-item-active-bg);--sd-dropdown-button-menu-item-current-color:var(--sd-dropdown-button-menu-item-active-color)}.sd-dropdown-button__menu-item--disabled{--sd-dropdown-button-menu-item-current-color:var(--sd-dropdown-button-disabled-content);cursor:not-allowed}.sd-dropdown-button__menu-item-icon{flex:0 0 auto}.sd-dropdown-button__menu-item-label{display:inline-flex;align-items:center;min-width:0;white-space:nowrap;font-size:12px}`;
+const sdDropdownButtonCss = () => `sd-dropdown-button{display:inline-flex;width:fit-content;height:fit-content}.sd-dropdown-button{display:inline-flex;position:relative}.sd-dropdown-button__trigger{--sd-dropdown-button-height:var(--sd-button-button-md-height, 36px);--sd-dropdown-button-padding-x:var(--sd-button-button-md-padding-x, 20px);--sd-dropdown-button-gap:var(--sd-button-button-md-gap, 8px);--sd-dropdown-button-font-family:var(--sd-button-button-md-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-button-md-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-button-md-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-button-md-typography-text-decoration, none);--sd-dropdown-button-bg:#025497;--sd-dropdown-button-bg-hover:#004177;--sd-dropdown-button-border:transparent;--sd-dropdown-button-content:#FFFFFF;--sd-dropdown-button-current-content:var(--sd-dropdown-button-content);--sd-dropdown-button-divider:#006AC1;--sd-dropdown-button-accent:#0075FF;--sd-dropdown-button-disabled-bg:var(--sd-button-button-bg-disabled, #E1E1E1);--sd-dropdown-button-disabled-content:var(--sd-button-button-text-disabled, #888888);--sd-dropdown-button-disabled-border:var(--sd-button-button-border-disabled, #CCCCCC);display:inline-flex;align-items:stretch;justify-content:space-between;min-height:var(--sd-dropdown-button-height);padding:0;border:var(--sd-button-button-border-width-default, 1px) solid var(--sd-dropdown-button-border);border-radius:var(--sd-button-button-radius-sm, 4px);background:var(--sd-dropdown-button-bg);color:var(--sd-dropdown-button-current-content);cursor:pointer;box-sizing:border-box;font-family:var(--sd-dropdown-button-font-family);font-size:var(--sd-dropdown-button-font-size);font-weight:var(--sd-dropdown-button-font-weight);line-height:1;text-decoration:var(--sd-dropdown-button-text-decoration);transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;white-space:nowrap}.sd-dropdown-button__trigger:hover:not(.sd-dropdown-button__trigger--disabled){background:var(--sd-dropdown-button-bg-hover)}.sd-dropdown-button__trigger:focus-visible{outline:0;box-shadow:0 0 0 2px var(--sd-dropdown-button-accent)}.sd-dropdown-button__trigger--xs{--sd-dropdown-button-height:var(--sd-button-button-xs-height, 24px);--sd-dropdown-button-padding-x:var(--sd-button-button-xs-padding-x, 8px);--sd-dropdown-button-gap:var(--sd-button-button-xs-gap, 4px);--sd-dropdown-button-font-family:var(--sd-button-button-xs-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-button-xs-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-button-xs-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(     --sd-button-button-xs-typography-text-decoration,     none   )}.sd-dropdown-button__trigger--sm{--sd-dropdown-button-height:var(--sd-button-button-sm-height, 28px);--sd-dropdown-button-padding-x:var(--sd-button-button-sm-padding-x, 12px);--sd-dropdown-button-gap:var(--sd-button-button-sm-gap, 6px);--sd-dropdown-button-font-family:var(--sd-button-button-sm-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-button-sm-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-button-sm-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(     --sd-button-button-sm-typography-text-decoration,     none   )}.sd-dropdown-button__trigger--md{--sd-dropdown-button-height:var(--sd-button-button-md-height, 36px);--sd-dropdown-button-padding-x:var(--sd-button-button-md-padding-x, 20px);--sd-dropdown-button-gap:var(--sd-button-button-md-gap, 8px);--sd-dropdown-button-font-family:var(--sd-button-button-md-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-button-md-typography-font-size, 16px);--sd-dropdown-button-font-weight:var(--sd-button-button-md-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(     --sd-button-button-md-typography-text-decoration,     none   );border-radius:var(--sd-button-button-radius-md, 6px)}.sd-dropdown-button__trigger--disabled{border-color:var(--sd-dropdown-button-disabled-border);background:var(--sd-dropdown-button-disabled-bg);--sd-dropdown-button-current-content:var(--sd-dropdown-button-disabled-content);cursor:not-allowed}.sd-dropdown-button__trigger--disabled .sd-dropdown-button__trigger-divider{background:var(--sd-dropdown-button-disabled-border)}.sd-dropdown-button__trigger-label,.sd-dropdown-button__trigger-icon{display:inline-flex;align-items:center;justify-content:center}.sd-dropdown-button__trigger-label{flex:1 1 auto;min-width:0;padding:0 var(--sd-dropdown-button-padding-x)}.sd-dropdown-button__trigger-divider{align-self:stretch;width:1px;height:auto;background:var(--sd-dropdown-button-divider);opacity:0.9}.sd-dropdown-button__trigger-icon{flex:0 0 auto;min-width:calc(var(--sd-dropdown-button-height) - 2px);padding:0 calc(var(--sd-dropdown-button-gap) + 2px);transition:transform 0.2s ease}.sd-dropdown-button__trigger-icon--open{transform:rotate(180deg)}.sd-dropdown-button__menu{position:relative;display:grid;width:max-content;min-width:var(--sd-dropdown-button-menu-min-width, max-content);max-width:calc(100vw - 24px);padding:4px 0;border:0;border-radius:4px;background:#FFFFFF;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1019607843);box-sizing:border-box;overflow:hidden}.sd-dropdown-button__menu-item{--sd-dropdown-button-menu-item-current-color:var(--sd-dropdown-button-menu-item-color);display:inline-flex;align-items:center;gap:8px;min-height:28px;width:100%;padding:0 12px;border:0;border-radius:0;background:transparent;color:var(--sd-dropdown-button-menu-item-current-color);cursor:pointer;box-sizing:border-box;font:inherit;text-align:left;transition:background-color 0.15s ease, color 0.15s ease}.sd-dropdown-button__menu-item--active{background:var(--sd-dropdown-button-menu-item-active-bg);--sd-dropdown-button-menu-item-current-color:var(--sd-dropdown-button-menu-item-active-color)}.sd-dropdown-button__menu-item--disabled{--sd-dropdown-button-menu-item-current-color:var(--sd-dropdown-button-disabled-content);cursor:not-allowed}.sd-dropdown-button__menu-item-icon{flex:0 0 auto}.sd-dropdown-button__menu-item-label{display:inline-flex;align-items:center;min-width:0;white-space:nowrap;font-size:12px}`;
 
 const SdDropdownButton = class extends BaseDropdownEvent {
     constructor(hostRef) {
@@ -250,7 +255,7 @@ const SdDropdownButton = class extends BaseDropdownEvent {
     }
     render() {
         const { config, preset } = this.resolvedConfig;
-        return (h("div", { key: 'eaaa15c76c5c05dd8a7e103368ae5a884fd999b1', class: "sd-dropdown-button" }, h("button", { key: '6e9dd2f7e7791ad7a4a17de1189bfc783cf61d69', 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: '1a6fa00329392de05526a50de55dcd620a43a2db', class: "sd-dropdown-button" }, h("button", { key: 'd73139863c8decca29079a8111e26ea5a2d21614', 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],
@@ -260,10 +265,10 @@ const SdDropdownButton = class 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: '921f7f8c98537dd01645a95bef0468768dd8571c', class: "sd-dropdown-button__trigger-label" }, this.label), h("span", { key: 'b871623ea1ba07cf797fd98e3057b01e7263234f', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), h("span", { key: '6c42e134ca5ed5291277c0316bceaf5bd6859363', class: {
+            } }, h("span", { key: '52e30c7d5f55b2ed974944b23880a42fdf941e31', class: "sd-dropdown-button__trigger-label" }, this.label), h("span", { key: '8d693a472783e552613b0c0503b85dc9b5ce0343', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), h("span", { key: 'e9f0fc3980400150c8808e569904bee6c4629dc7', class: {
                 'sd-dropdown-button__trigger-icon': true,
                 'sd-dropdown-button__trigger-icon--open': this.isOpen,
-            }, "aria-hidden": "true" }, h("sd-icon", { key: 'ae1df86b93b174cfc488f3fa079c62ff55ae2e67', name: "chevronDown", size: 12, color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
+            }, "aria-hidden": "true" }, h("sd-icon", { key: '13fda88989885a9096ed6ecf211b3aadad3f128a', 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/esm/sd-file-picker.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, g as getElement, h } from './index-DsU722JF.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BqHL8W3c.js';
 
 const filepicker = {
 	height: "28",

package/dist/esm/sd-form.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-DsU722JF.js';
+import { r as registerInstance, c as createEvent, h } from './index-BqHL8W3c.js';
 
 const SdForm = class {
     constructor(hostRef) {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-DsU722JF.js';
+import { r as registerInstance, c as createEvent, h } from './index-BqHL8W3c.js';
 
 const ghostButton = {
 	xxs: {
@@ -21,7 +21,10 @@ const ghostButton = {
 		size: "62",
 		icon: "32"
 	},
-	radius: "4",
+	radius: {
+		sm: "4",
+		md: "6"
+	},
 	hover: {
 		opacity: "5%"
 	},
@@ -81,7 +84,13 @@ const GHOST_BUTTON_SIZES = {
         icon: Number(ghostButtonTokens.ghostButton.lg.icon),
     },
 };
-const GHOST_BUTTON_RADIUS = Number(ghostButtonTokens.ghostButton.radius);
+const GHOST_BUTTON_RADIUS = {
+    xxs: Number(ghostButtonTokens.ghostButton.radius.sm),
+    xs: Number(ghostButtonTokens.ghostButton.radius.sm),
+    sm: Number(ghostButtonTokens.ghostButton.radius.sm),
+    md: Number(ghostButtonTokens.ghostButton.radius.md),
+    lg: Number(ghostButtonTokens.ghostButton.radius.md),
+};
 const GHOST_BUTTON_HOVER_OPACITY = ghostButtonTokens.ghostButton.hover.opacity;
 const GHOST_BUTTON_CONTENT_COLORS = {
     default: ghostButtonTokens.ghostButton.default.content,
@@ -144,16 +153,16 @@ const SdGhostButton = class {
             ? GHOST_BUTTON_DISABLED_COLORS[this.intent]
             : GHOST_BUTTON_CONTENT_COLORS[this.intent];
         const accessibleName = this.ariaLabel.trim() || undefined;
-        return (h("button", { key: '783888ed2c124bf8e08698de0bc2e904b86722e9', class: {
+        return (h("button", { key: 'eccb34969779d75bcd77dd6ae12cb99a419af121', class: {
                 'sd-ghost-button': true,
                 'sd-ghost-button--disabled': this.disabled,
             }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
                 '--sd-ghost-button-size': `${sizeConfig.size}px`,
-                '--sd-ghost-button-radius': `${GHOST_BUTTON_RADIUS}px`,
+                '--sd-ghost-button-radius': `${GHOST_BUTTON_RADIUS[this.size]}px`,
                 '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent],
                 '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
                 '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, h("sd-icon", { key: '4ae4347b169267e6964c461126b6c9a4281578bb', name: this.icon, size: sizeConfig.icon, color: contentColor })));
+            }, onClick: this.handleClick }, h("sd-icon", { key: '4ae160e73b72b0b4aa40947c126419b1016c81d3', name: this.icon, size: sizeConfig.icon, color: contentColor })));
     }
 };
 SdGhostButton.style = sdGhostButtonCss();

package/dist/esm/sd-guide.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, g as getElement, h } from './index-DsU722JF.js';
+import { r as registerInstance, a as getElement, h } from './index-BqHL8W3c.js';
 
-const sdGuideCss = () => `@charset "UTF-8";sd-button{display:inline-flex;width:fit-content;height:fit-content}.sd-button{--sd-button-height:34px;--sd-button-padding-x:20px;--sd-button-gap:8px;--sd-button-font-family:inherit;--sd-button-font-size:16px;--sd-button-font-weight:500;--sd-button-text-decoration:none;--sd-button-label-min-width:auto;--sd-button-icon-only-size:var(--sd-button-height);text-decoration:none;cursor:pointer;border-radius:var(--sd-button-radius-sm, 4px);transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border:none;padding:0 var(--sd-button-padding-x);min-width:var(--sd-button-min-width, auto);min-height:var(--sd-button-height);font-family:var(--sd-button-font-family);font-size:var(--sd-button-font-size);font-weight:var(--sd-button-font-weight);text-decoration:var(--sd-button-text-decoration)}.sd-button--xs{--sd-button-height:var(--sd-button-xs-height, 24px);--sd-button-padding-x:var(--sd-button-xs-padding-x, 8px);--sd-button-gap:var(--sd-button-xs-gap, 4px);--sd-button-font-family:var(--sd-button-xs-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-xs-typography-font-size, 12px);--sd-button-font-weight:var(--sd-button-xs-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-xs-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-xs-min-width, auto);--sd-button-icon-only-size:var(--sd-button-icon-only-xs-width, var(--sd-button-height));line-height:20px}.sd-button--sm{--sd-button-height:var(--sd-button-sm-height, 28px);--sd-button-padding-x:var(--sd-button-sm-padding-x, 12px);--sd-button-gap:var(--sd-button-sm-gap, 6px);--sd-button-font-family:var(--sd-button-sm-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-sm-typography-font-size, 12px);--sd-button-font-weight:var(--sd-button-sm-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-sm-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-sm-min-width, auto);--sd-button-icon-only-size:var(--sd-button-icon-only-sm-width, var(--sd-button-height));line-height:20px}.sd-button--md{--sd-button-height:var(--sd-button-md-height, 34px);--sd-button-padding-x:var(--sd-button-md-padding-x, 20px);--sd-button-gap:var(--sd-button-md-gap, 8px);--sd-button-font-family:var(--sd-button-md-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-md-typography-font-size, 16px);--sd-button-font-weight:var(--sd-button-md-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-md-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-md-min-width, auto);--sd-button-icon-only-size:var(--sd-button-icon-only-md-width, var(--sd-button-height));line-height:26px}.sd-button--lg{--sd-button-height:var(--sd-button-lg-height, 62px);--sd-button-padding-x:var(--sd-button-lg-padding-x, 28px);--sd-button-gap:var(--sd-button-lg-gap, 12px);--sd-button-font-family:var(--sd-button-lg-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-lg-typography-font-size, 18px);--sd-button-font-weight:var(--sd-button-lg-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-lg-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-lg-min-width, auto);--sd-button-icon-only-size:var(--sd-button-icon-only-lg-width, var(--sd-button-height));line-height:30px}.sd-button--has-label{--sd-button-min-width:var(--sd-button-label-min-width, auto)}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:"";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:var(--sd-button-border-width-default, 1px) solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:var(--sd-button-border-width-default, 1px) solid var(--sd-button-border-disabled, #CCCCCC);background:var(--sd-button-bg-disabled, #E1E1E1);color:var(--sd-button-content-disabled, #888888);cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:var(--sd-button-icon-only-size, var(--sd-button-height));min-width:var(--sd-button-icon-only-size, var(--sd-button-height));height:var(--sd-button-icon-only-size, var(--sd-button-height))}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-button-gap);z-index:1;font-weight:inherit}sd-guide{display:inline-flex;align-items:center;height:fit-content;width:fit-content}sd-guide .sd-guide{display:inline-flex;align-items:center;height:fit-content;width:fit-content}sd-guide .sd-guide .sd-button{padding:0 16px 0 12px;border-radius:16px;color:#333333 !important;display:flex;align-items:center;transition:none}sd-guide .sd-guide .sd-button .sd-button__content{color:#333333 !important}sd-guide .sd-guide .sd-button .sd-button__content .sd-button__label{color:#333333 !important;margin-left:4px}sd-guide .sd-guide--active .sd-button{border:1px solid #00973C}sd-guide .sd-guide--active .sd-button .sd-button__content .sd-button__label{color:white !important}.sd-guide__popup{position:relative;padding:20px 32px;border-radius:8px;box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.1);background:white}.sd-guide__popup>.sd-guide__popup__close{position:absolute;top:12px;right:12px}.sd-guide__popup__header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.sd-guide__popup__header .sd-guide__popup__title{margin-top:0;font-size:16px;font-weight:700;line-height:26px;color:#333333}.sd-guide__popup__list{width:100%;padding:0;margin:0}.sd-guide__popup__list__item{display:flex;width:100%;align-items:start;list-style:none;color:#333333;font-size:12px;font-weight:400}.sd-guide__popup__list__item p{width:100%;padding:0;margin:0;word-wrap:break-word;word-break:break-word;white-space:normal;overflow-wrap:break-word;min-width:0}.sd-guide__popup__list__item::before{display:block;content:"-";width:6px;color:#333333;font-size:12px;font-weight:400;margin-left:10px;margin-right:12px;flex-shrink:0}.sd-guide__popup__list__item--depth-2::before{content:"•"}.sd-guide__popup__list__item--depth-2{padding-left:26px}`;
+const sdGuideCss = () => `@charset "UTF-8";sd-button{display:inline-flex;width:fit-content;height:fit-content}.sd-button{--sd-button-height:34px;--sd-button-padding-x:20px;--sd-button-gap:8px;--sd-button-font-family:inherit;--sd-button-font-size:16px;--sd-button-font-weight:500;--sd-button-text-decoration:none;--sd-button-label-min-width:auto;--sd-button-icon-only-size:var(--sd-button-height);text-decoration:none;cursor:pointer;border-radius:var(--sd-button-button-radius-sm, 4px);transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border:none;padding:0 var(--sd-button-padding-x);min-width:var(--sd-button-min-width, auto);min-height:var(--sd-button-height);font-family:var(--sd-button-font-family);font-size:var(--sd-button-font-size);font-weight:var(--sd-button-font-weight);text-decoration:var(--sd-button-text-decoration)}.sd-button--xs{--sd-button-height:var(--sd-button-button-xs-height, 24px);--sd-button-padding-x:var(--sd-button-button-xs-padding-x, 8px);--sd-button-gap:var(--sd-button-button-xs-gap, 4px);--sd-button-font-family:var(--sd-button-button-xs-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-button-xs-typography-font-size, 12px);--sd-button-font-weight:var(--sd-button-button-xs-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-button-xs-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-xs-min-width, auto);--sd-button-icon-only-size:var(--sd-button-button-icon-only-xs-width, var(--sd-button-height));line-height:20px}.sd-button--sm{--sd-button-height:var(--sd-button-button-sm-height, 28px);--sd-button-padding-x:var(--sd-button-button-sm-padding-x, 12px);--sd-button-gap:var(--sd-button-button-sm-gap, 6px);--sd-button-font-family:var(--sd-button-button-sm-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-button-sm-typography-font-size, 12px);--sd-button-font-weight:var(--sd-button-button-sm-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-button-sm-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-sm-min-width, auto);--sd-button-icon-only-size:var(--sd-button-button-icon-only-sm-width, var(--sd-button-height));line-height:20px}.sd-button--md{--sd-button-height:var(--sd-button-button-md-height, 34px);--sd-button-padding-x:var(--sd-button-button-md-padding-x, 20px);--sd-button-gap:var(--sd-button-button-md-gap, 8px);--sd-button-font-family:var(--sd-button-button-md-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-button-md-typography-font-size, 16px);--sd-button-font-weight:var(--sd-button-button-md-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-button-md-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-md-min-width, auto);--sd-button-icon-only-size:var(--sd-button-button-icon-only-md-width, var(--sd-button-height));line-height:26px}.sd-button--lg{--sd-button-height:var(--sd-button-button-lg-height, 62px);--sd-button-padding-x:var(--sd-button-button-lg-padding-x, 28px);--sd-button-gap:var(--sd-button-button-lg-gap, 12px);--sd-button-font-family:var(--sd-button-button-lg-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-button-lg-typography-font-size, 18px);--sd-button-font-weight:var(--sd-button-button-lg-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-button-lg-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-lg-min-width, auto);--sd-button-icon-only-size:var(--sd-button-button-icon-only-lg-width, var(--sd-button-height));line-height:30px}.sd-button--has-label{--sd-button-min-width:var(--sd-button-label-min-width, auto)}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:"";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:var(--sd-button-button-border-width-default, 1px) solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:var(--sd-button-button-border-width-default, 1px) solid var(--sd-button-button-border-disabled, #CCCCCC);background:var(--sd-button-button-bg-disabled, #E1E1E1);color:var(--sd-button-button-text-disabled, #888888);cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:var(--sd-button-icon-only-size, var(--sd-button-height));min-width:var(--sd-button-icon-only-size, var(--sd-button-height));height:var(--sd-button-icon-only-size, var(--sd-button-height))}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-button-gap);z-index:1;font-weight:inherit}sd-guide{display:inline-flex;align-items:center;height:fit-content;width:fit-content}sd-guide .sd-guide{display:inline-flex;align-items:center;height:fit-content;width:fit-content}sd-guide .sd-guide .sd-button{padding:0 16px 0 12px;border-radius:16px;color:#333333 !important;display:flex;align-items:center;transition:none}sd-guide .sd-guide .sd-button .sd-button__content{color:#333333 !important}sd-guide .sd-guide .sd-button .sd-button__content .sd-button__label{color:#333333 !important;margin-left:4px}sd-guide .sd-guide--active .sd-button{border:1px solid #00973C}sd-guide .sd-guide--active .sd-button .sd-button__content .sd-button__label{color:white !important}.sd-guide__popup{position:relative;padding:20px 32px;border-radius:8px;box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.1);background:white}.sd-guide__popup>.sd-guide__popup__close{position:absolute;top:12px;right:12px}.sd-guide__popup__header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.sd-guide__popup__header .sd-guide__popup__title{margin-top:0;font-size:16px;font-weight:700;line-height:26px;color:#333333}.sd-guide__popup__list{width:100%;padding:0;margin:0}.sd-guide__popup__list__item{display:flex;width:100%;align-items:start;list-style:none;color:#333333;font-size:12px;font-weight:400}.sd-guide__popup__list__item p{width:100%;padding:0;margin:0;word-wrap:break-word;word-break:break-word;white-space:normal;overflow-wrap:break-word;min-width:0}.sd-guide__popup__list__item::before{display:block;content:"-";width:6px;color:#333333;font-size:12px;font-weight:400;margin-left:10px;margin-right:12px;flex-shrink:0}.sd-guide__popup__list__item--depth-2::before{content:"•"}.sd-guide__popup__list__item--depth-2{padding-left:26px}`;
 
 const GUIDE_LABEL = {
     help: '활용 TIP',

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, g as getElement, h } from './index-DsU722JF.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BqHL8W3c.js';
 import { n as nanoid } from './index-CCwNgVmC.js';
 import { i as inputTokens } from './component.textinput-CJwbBrt5.js';
 
@@ -29,7 +29,7 @@ const INPUT_COLORS = {
     icon: inputTokens.textinput.icon,
 };
 
-const sdInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}sd-input{display:inline-flex}sd-input .sd-input__content{width:100%;height:100%;display:flex;flex-flow:row nowrap;align-items:center;color:var(--sd-input-text-color);font-size:var(--sd-input-font-size);line-height:var(--sd-input-line-height);font-weight:var(--sd-input-font-weight);padding:0 var(--sd-input-padding-x);gap:var(--sd-input-gap)}sd-input .sd-input__content .sd-input__native{width:100%;height:100%;border:none;outline:none;background:transparent;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit}sd-input .sd-input__content .sd-input__native[disabled]{cursor:not-allowed;color:var(--sd-input-disabled-color)}sd-input .sd-input__content .sd-input__native::placeholder{color:var(--sd-input-placeholder-color)}sd-input .sd-input__content .sd-input__clear-icon,sd-input .sd-input__content .sd-input__password-icon{flex-shrink:0}sd-input .sd-input__content .sd-input__native[disabled]~.sd-input__clear-icon,sd-input .sd-input__content .sd-input__native[disabled]~.sd-input__password-icon{cursor:not-allowed;pointer-events:none}`;
+const sdInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}sd-input{display:inline-flex}sd-input .sd-input__content{width:100%;height:100%;display:flex;flex-flow:row nowrap;align-items:center;color:var(--sd-input-text-color);font-size:var(--sd-input-font-size);line-height:var(--sd-input-line-height);font-weight:var(--sd-input-font-weight);padding:0 var(--sd-input-padding-x);gap:var(--sd-input-gap)}sd-input .sd-input__content .sd-input__native{width:100%;height:100%;border:none;outline:none;background:transparent;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit}sd-input .sd-input__content .sd-input__native[disabled]{cursor:not-allowed;color:var(--sd-input-disabled-color)}sd-input .sd-input__content .sd-input__native[readonly]{color:var(--sd-input-disabled-color)}sd-input .sd-input__content .sd-input__native::placeholder{color:var(--sd-input-placeholder-color)}sd-input .sd-input__content .sd-input__clear-icon,sd-input .sd-input__content .sd-input__password-icon{flex-shrink:0}sd-input .sd-input__content .sd-input__native[disabled]~.sd-input__clear-icon,sd-input .sd-input__content .sd-input__native[disabled]~.sd-input__password-icon{cursor:not-allowed;pointer-events:none}`;
 
 const SdInput = class {
     constructor(hostRef) {
@@ -146,12 +146,12 @@ const SdInput = class {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (h("sd-field", { key: '16881490eb9d8d08aa0788be2dbb845b12f50269', name: this.name, label: this.label, 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 }, h("label", { key: '04e71967c3b3f7bf4589a3aaf4505c5d67d615da', class: "sd-input__content" }, h("slot", { key: '18476a19c8825734e475116586bab2711c1d84e3', name: "prefix" }), h("input", { key: '7600e0ade86d1bca8ba6197d49bd72ef4d0778dd', 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 }), h("slot", { key: '5c98ef1acdb26a1c0f89fc04101c0315b017c08a', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (h("sd-ghost-button", { key: 'f188270be3635c68d99a453eaba61f53d6bb2bc7', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: 'a96aaa54fe54c9d9ee5ab31537e1b6fb7b612c8f', name: this.name, label: this.label, 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 }, h("label", { key: 'd806549d41156ab414d04664e6887075ef97f307', class: "sd-input__content" }, h("slot", { key: '29f447128f6211792742a252d1ea087b5a5b413e', name: "prefix" }), h("input", { key: 'e1870c7573268e97eac820d7508e134c13c32b40', 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 }), h("slot", { key: 'f12b87b5d30878a55e1224abf789b924c1fd3a0c', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (h("sd-ghost-button", { key: 'dad4be5dc6e8239dedc094fe0eb02a2587dd9f9c', icon: "close", ariaLabel: "close", 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' && (h("sd-ghost-button", { key: 'cedaceae0b81e007e4672a57c950bd6b23d045cd', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
+            } })), this.type === 'password' && (h("sd-ghost-button", { key: '71c5cf7565ad13f08173fc10e828ddf5f8f546b8', 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;
@@ -192,17 +192,17 @@ const SdSelectSearchInput = class {
         input?.focus({ preventScroll: true });
     }
     render() {
-        return (h("div", { key: '356f1b606a50d6a247793aebd1609f509a08784e', class: {
+        return (h("div", { key: '36003b7e0e7d8a3df224b18257d4d6b1712d47da', class: {
                 'sd-select-search-input': true,
                 'sd-select-search-input--scrolled': !!this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, h("sd-input", { key: '99162b5eeb831b771666246ecbd223c0a1b93d9c', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
+            }, onClick: event => event.stopPropagation() }, h("sd-input", { key: '3b6f80d033a7903cb8e3692a2eebe0ab991e8d68', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
                 this.searchInput.emit(String(event?.detail));
             }, onSdFocus: () => {
                 this.searchFocus.emit();
             }, onKeyDown: event => {
                 if (event.code === 'Enter')
                     event.stopPropagation();
-            } }, h("sd-icon", { key: 'e8929cfab6ab5a483531c939de1b4c0c11f1b145', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
+            } }, h("sd-icon", { key: '7c453e87ba6b384c5be7bb142697ba43c0d1a20b', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
     }
 };
 SdSelectSearchInput.style = sdSelectSearchInputCss();

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

@@ -0,0 +1,27 @@
+import { r as registerInstance, h } from './index-BqHL8W3c.js';
+
+const sdLoadingContainerCss = () => `sd-loading-container .sd-loading-container{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--sd-loading-container-z-index, 10000);opacity:0;visibility:hidden;transition:opacity 0.2s ease, visibility 0s linear 0.2s;pointer-events:none}sd-loading-container .sd-loading-container--visible{opacity:1;visibility:visible;transition:opacity 0.2s ease, visibility 0s linear 0s;pointer-events:auto}sd-loading-container .sd-loading-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4)}sd-loading-container .sd-loading-container__content{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px}sd-loading-container .sd-loading-container__message{margin:0;color:#ffffff;font-size:14px;font-weight:500;line-height:22px;text-align:center;max-width:400px;word-break:keep-all}`;
+
+const SdLoadingContainer = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    visible = false;
+    message = '';
+    async show(options = {}) {
+        this.message = options.message ?? '';
+        this.visible = true;
+    }
+    async hide() {
+        this.visible = false;
+    }
+    render() {
+        return (h("div", { key: 'e4578e196ebd4ee69d424fe85c9bf651bc3382f7', class: {
+                'sd-loading-container': true,
+                'sd-loading-container--visible': this.visible,
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: 'ae9fae9408f9b69591554ca105abb2ece362db00', class: "sd-loading-container__backdrop" }), h("div", { key: '27d0c6518dacbb664cebb2fc76c9ceb14b2b3aac', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: 'ace74d2550a2ddb579c61e6f8daaaf64915e8666', indeterminate: true, type: "inverse" }), this.message && (h("p", { key: 'af059ecdadf7b3b3c0a0437cbc4264ff550fa3c6', class: "sd-loading-container__message" }, this.message)))));
+    }
+};
+SdLoadingContainer.style = sdLoadingContainerCss();
+
+export { SdLoadingContainer as sd_loading_container };

package/dist/esm/sd-modal-container.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, g as getElement, h } from './index-DsU722JF.js';
+import { r as registerInstance, a as getElement, h } from './index-BqHL8W3c.js';
 
 const sdModalContainerCss = () => `sd-modal-container{display:block}sd-modal-container .sd-modal-container{position:fixed;inset:0;z-index:var(--sd-modal-container-z-index, 9999);display:flex;align-items:center;justify-content:center}sd-modal-container .sd-modal-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4);opacity:0;transition:opacity 0.3s ease-out}sd-modal-container .sd-modal-container__backdrop--visible{opacity:1}sd-modal-container .sd-modal-container__content{position:relative;z-index:1;display:grid;place-items:center}sd-modal-container .sd-modal-container__content>*{grid-row:1;grid-column:1}sd-modal-container .sd-modal-container__modal{opacity:0;transform:scale(0);transition:opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}sd-modal-container .sd-modal-container__modal--visible{opacity:1;transform:scale(1)}sd-modal-container .sd-modal-container__modal--shake{animation:modal-shake 0.3s ease-out}@keyframes modal-shake{0%,100%{transform:scale(1)}25%{transform:scale(1.03)}50%{transform:scale(0.97)}75%{transform:scale(1.01)}}`;
 
@@ -37,6 +37,15 @@ const SdModalContainer = class {
         });
         return id;
     }
+    async openLoading(options, modalRef) {
+        const id = `modal-${++modalIdCounter}`;
+        const modalEl = this.createLoadingModal(id, options);
+        this.attachLoadingModalEventListeners(id, modalEl);
+        this.registerEntry(id, modalEl, modalRef, {
+            persistent: !!options.persistent,
+        });
+        return id;
+    }
     async createCustom(element, options, modalRef) {
         const id = `modal-${++modalIdCounter}`;
         element.setAttribute('data-modal-id', id);
@@ -52,6 +61,12 @@ const SdModalContainer = class {
         modalEl.addEventListener('sdCancel', () => this.requestDismiss(id, 'cancel'));
         modalEl.addEventListener('sdClose', () => this.requestDismiss(id, 'close'));
     }
+    attachLoadingModalEventListeners(id, modalEl) {
+        modalEl.addEventListener('sdClick', () => {
+            const entry = (this.entries ?? []).find(item => item.id === id);
+            entry?.modalRef._triggerClick?.();
+        });
+    }
     dispatchClose(modalEl) {
         modalEl.dispatchEvent(new CustomEvent('sdClose'));
     }
@@ -94,7 +109,13 @@ const SdModalContainer = class {
         const entry = (this.entries ?? []).find(e => e.id === id);
         if (!entry || entry.closing)
             return;
-        this.applyProps(entry.modalEl, props);
+        const tag = entry.modalEl.tagName.toLowerCase();
+        if (tag === 'sd-loading-modal') {
+            this.applyLoadingProps(entry.modalEl, props);
+        }
+        else {
+            this.applyProps(entry.modalEl, props);
+        }
     }
     createConfirmModal(id, options) {
         const el = document.createElement('sd-confirm-modal');
@@ -103,6 +124,28 @@ const SdModalContainer = class {
         this.applyProps(el, options);
         return el;
     }
+    createLoadingModal(id, options) {
+        const el = document.createElement('sd-loading-modal');
+        el.setAttribute('data-modal-id', id);
+        el.classList.add('sd-modal-container__modal');
+        this.applyLoadingProps(el, options);
+        return el;
+    }
+    applyLoadingProps(el, options) {
+        if (this.hasOwnProp(options, 'state'))
+            this.setAttr(el, 'state', options.state);
+        if (this.hasOwnProp(options, 'message'))
+            this.setAttr(el, 'message', options.message);
+        if (this.hasOwnProp(options, 'buttonLabel')) {
+            this.setAttr(el, 'button-label', options.buttonLabel);
+        }
+        if (this.hasOwnProp(options, 'width')) {
+            this.setAttr(el, 'width', options.width != null ? String(options.width) : undefined);
+        }
+        if (this.hasOwnProp(options, 'height')) {
+            this.setAttr(el, 'height', options.height != null ? String(options.height) : undefined);
+        }
+    }
     applyProps(el, options) {
         if (this.hasOwnProp(options, 'type'))
             this.setAttr(el, 'type', options.type);

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

@@ -1,11 +1,10 @@
-import { r as registerInstance, c as createEvent, g as getElement, h } from './index-DsU722JF.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BqHL8W3c.js';
 import { n as nanoid } from './index-CCwNgVmC.js';
 
 const numberInput = {
 	sm: {
 		height: "28",
 		paddingX: "6",
-		gap: "8",
 		radius: "4",
 		typography: {
 			fontWeight: "400",
@@ -15,7 +14,6 @@ const numberInput = {
 	md: {
 		height: "36",
 		paddingX: "8",
-		gap: "12",
 		radius: "6",
 		typography: {
 			fontWeight: "400",
@@ -76,7 +74,6 @@ const NUMBER_INPUT_SIZE_MAP = {
     sm: {
         height: sm.height,
         paddingX: sm.paddingX,
-        gap: sm.gap,
         radius: sm.radius,
         fontSize: sm.typography.fontSize,
         lineHeight: sm.typography.lineHeight,
@@ -85,7 +82,6 @@ const NUMBER_INPUT_SIZE_MAP = {
     md: {
         height: md.height,
         paddingX: md.paddingX,
-        gap: md.gap,
         radius: md.radius,
         fontSize: md.typography.fontSize,
         lineHeight: md.typography.lineHeight,
@@ -108,7 +104,7 @@ const NUMBER_INPUT_HINT = numberInputTokens.numberInput.hint;
 const NUMBER_INPUT_ERROR_MESSAGE = numberInputTokens.numberInput.errorMessage;
 const NUMBER_INPUT_CONTENTS_GAP = numberInputTokens.numberInput.contents.gap;
 
-const sdNumberInputCss = () => `sd-number-input{display:inline-flex}sd-number-input .sd-number-input__content{width:100%;height:100%;display:flex;flex-flow:row nowrap;align-items:center;color:var(--sd-number-input-text-color);font-size:var(--sd-number-input-font-size);line-height:var(--sd-number-input-line-height);font-weight:var(--sd-number-input-font-weight);padding:0 var(--sd-number-input-padding-x);gap:var(--sd-number-input-gap)}sd-number-input .sd-number-input__content .sd-number-input__native{width:100%;height:100%;min-width:0;border:none;outline:none;background:transparent;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;padding-block:0;padding-inline:0}sd-number-input .sd-number-input__content .sd-number-input__native[disabled]{cursor:not-allowed;color:var(--sd-number-input-disabled-color)}sd-number-input .sd-number-input__content .sd-number-input__native::placeholder{color:var(--sd-number-input-placeholder-color)}sd-number-input .sd-number-input__content .sd-number-input__prefix,sd-number-input .sd-number-input__content .sd-number-input__suffix{flex-shrink:0;white-space:nowrap;color:var(--sd-number-input-placeholder-color);font-size:inherit;line-height:inherit}sd-number-input .sd-number-input__content .sd-number-input__stepper{flex-shrink:0;width:var(--sd-number-input-stepper-size);height:var(--sd-number-input-stepper-size);border:none;border-radius:var(--sd-number-input-stepper-radius);background-color:var(--sd-number-input-stepper-bg);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;margin:0;transition:background-color 0.15s ease}sd-number-input .sd-number-input__content .sd-number-input__stepper:hover:not(:disabled){filter:brightness(0.95)}sd-number-input .sd-number-input__content .sd-number-input__stepper:disabled{background-color:var(--sd-number-input-stepper-bg-disabled);cursor:not-allowed}`;
+const sdNumberInputCss = () => `sd-number-input{display:inline-flex}sd-number-input .sd-number-input__content{width:100%;height:100%;display:flex;flex-flow:row nowrap;align-items:center;color:var(--sd-number-input-text-color);font-size:var(--sd-number-input-font-size);line-height:var(--sd-number-input-line-height);font-weight:var(--sd-number-input-font-weight);padding:0 var(--sd-number-input-padding-x)}sd-number-input .sd-number-input__content .sd-number-input__native{width:100%;height:100%;min-width:0;border:none;outline:none;background:transparent;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;padding-block:0;padding-inline:0}sd-number-input .sd-number-input__content .sd-number-input__native[disabled]{cursor:not-allowed;color:var(--sd-number-input-disabled-color)}sd-number-input .sd-number-input__content .sd-number-input__native::placeholder{color:var(--sd-number-input-placeholder-color)}sd-number-input .sd-number-input__content .sd-number-input__prefix,sd-number-input .sd-number-input__content .sd-number-input__suffix{flex-shrink:0;white-space:nowrap;color:var(--sd-number-input-placeholder-color);font-size:inherit;line-height:inherit}sd-number-input .sd-number-input__content .sd-number-input__stepper{flex-shrink:0;width:var(--sd-number-input-stepper-size);height:var(--sd-number-input-stepper-size);border:none;border-radius:var(--sd-number-input-stepper-radius);background-color:var(--sd-number-input-stepper-bg);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;margin:0;transition:background-color 0.15s ease}sd-number-input .sd-number-input__content .sd-number-input__stepper:hover:not(:disabled){filter:brightness(0.95)}sd-number-input .sd-number-input__content .sd-number-input__stepper:disabled{background-color:var(--sd-number-input-stepper-bg-disabled);cursor:not-allowed}`;
 
 const SdNumberInput = class {
     constructor(hostRef) {
@@ -359,7 +355,6 @@ const SdNumberInput = class {
             '--sd-number-input-line-height': `${sizeTokens.lineHeight}px`,
             '--sd-number-input-font-weight': sizeTokens.fontWeight,
             '--sd-number-input-padding-x': `${sizeTokens.paddingX}px`,
-            '--sd-number-input-gap': `${sizeTokens.gap}px`,
             '--sd-number-input-text-color': NUMBER_INPUT_COLORS.text.default,
             '--sd-number-input-placeholder-color': NUMBER_INPUT_COLORS.text.placeholder,
             '--sd-number-input-disabled-color': NUMBER_INPUT_COLORS.text.disabled,
@@ -386,12 +381,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 (h("sd-field", { key: 'd12c62be0352fcaa356450f7a534f3f1c684cf8e', name: this.name, label: this.label, 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, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: 'be7463579f63800d84531ed72fe84c47de7a005c', class: "sd-number-input__content" }, this.useButton && (h("button", { key: '23f1e57fc26545bef557b1fc6d1827783ffe7144', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '9b918e18437423e3aec20e5cb66d0d84b3e59649', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+        return (h("sd-field", { key: 'e05cc16f4dde4fd82d11a811b578723af2f5b092', name: this.name, label: this.label, 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 }, h("div", { key: 'db4f02b5f882acfe481698745ca374874643efbd', class: "sd-number-input__content" }, this.useButton && (h("button", { key: 'c83df0e915849792427b2f3609937bb0b62aae15', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'b7ea0704c9d114b5e1b8eca29a408efb5e532b7e', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (h("span", { key: '0793d70a0040400cc4e1f3bfe8cafaa02f42a8c2', class: "sd-number-input__prefix" }, this.inputPrefix)), h("input", { key: '31d91862988aa0ee3aabcd78a66844c37b9efac0', 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 && (h("span", { key: '57ed4229c30d52b6925ebaccd816cd8496ab60c0', class: "sd-number-input__prefix" }, this.inputPrefix)), h("input", { key: 'b018a810ca085218beb7acbba0187543c8369236', 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 && (h("span", { key: 'fab71e56d4876d0899b9744632d21fb41c344bb6', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (h("button", { key: '1b1c80f63d7bd8503a9d3c2cbbd5170a44d511bf', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: 'a0073de5e46fc8463f818ac2521725fb8eb7211f', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && (h("span", { key: '5db549a3cc81b98123cdec69b866b25d961f210f', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (h("button", { key: '8b0b8c4ba46cf1cc5fba21f7fa8c113ca215b265', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '77012f79ba5a3a5550af844149bb35fa1e165533', name: "add", size: iconSize, color: this.isIncrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
                 : NUMBER_INPUT_STEPPER.icon.default }))))));
     }