@sellmate/design-system 1.0.61 → 1.0.63

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

@@ -91,9 +91,9 @@ export class SdDatePicker {
             '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
         };
-        return (h("sd-field", { key: '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 is() { return "sd-date-picker"; }
     static get originalStyleUrls() {
@@ -151,7 +151,7 @@ export class SdDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "size",
                 "defaultValue": "'sm'"
             },
@@ -171,7 +171,7 @@ export class SdDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "placeholder",
                 "defaultValue": "'YYYY-MM-DD'"
             },
@@ -208,7 +208,7 @@ export class SdDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "disabled",
                 "defaultValue": "false"
             },

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

@@ -239,7 +239,7 @@ export class SdDateRangePickerCalendar {
             '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
             '--range-divider': RANGE_LAYOUT.divider,
         };
-        return (h(Fragment, { key: '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 is() { return "sd-date-range-picker-calendar"; }
     static get originalStyleUrls() {

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

@@ -97,9 +97,9 @@ export class SdDateRangePicker {
             '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
         };
-        return (h("sd-field", { key: '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 is() { return "sd-date-range-picker"; }
     static get originalStyleUrls() {
@@ -161,7 +161,7 @@ export class SdDateRangePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "size",
                 "defaultValue": "'sm'"
             },
@@ -181,7 +181,7 @@ export class SdDateRangePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "placeholder",
                 "defaultValue": "'YYYY-MM-DD ~ YYYY-MM-DD'"
             },
@@ -237,7 +237,7 @@ export class SdDateRangePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "disabled",
                 "defaultValue": "false"
             },

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

@@ -41,6 +41,11 @@ export const PRESET_MENU_ITEM_ACTIVE_COLORS = {
     danger: MENU_ITEM_ACTIVE_COLOR,
     danger_outline: MENU_ITEM_ACTIVE_COLOR,
 };
+export const DROPDOWN_CHEVRON_ICON_SIZE = {
+    xs: 12,
+    sm: 12,
+    md: 16,
+};
 export const DROPDOWN_DISABLED_BACKGROUND = buttonTokens.button.bg.disabled;
 export const DROPDOWN_DISABLED_TEXT = buttonTokens.button.text.disabled;
 export const DROPDOWN_DISABLED_ICON = buttonTokens.button.icon.disabled;

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

@@ -10,30 +10,30 @@ sd-dropdown-button {
 }
 
 .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-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-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);
+  --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-border-width-default, 1px) solid var(--sd-dropdown-button-border);
-  border-radius: var(--sd-button-radius-sm, 4px);
+  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;
@@ -54,31 +54,41 @@ sd-dropdown-button {
   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-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-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-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-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-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);

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

@@ -1,7 +1,7 @@
 import { h, } from "@stencil/core";
 import { BaseDropdownEvent } from "../../utils/base-dropdown-event";
 import { BUTTON_FOCUS_RING_COLOR } from "../sd-button-v2/sd-button-v2.config";
-import { DROPDOWN_BUTTON_CONFIG, DROPDOWN_DISABLED_BACKGROUND, DROPDOWN_DISABLED_BORDER, DROPDOWN_DISABLED_TEXT, PRESET_BORDER_COLORS, PRESET_CONTENT_COLORS, PRESET_DIVIDER_COLORS, PRESET_HOVER_BACKGROUNDS, PRESET_MENU_ITEM_ACTIVE_BACKGROUNDS, PRESET_MENU_ITEM_ACTIVE_COLORS, PRESET_MENU_ITEM_COLORS, getDropdownButtonPreset, isDropdownButtonName, } from "./sd-dropdown-button.config";
+import { DROPDOWN_BUTTON_CONFIG, DROPDOWN_CHEVRON_ICON_SIZE, DROPDOWN_DISABLED_BACKGROUND, DROPDOWN_DISABLED_BORDER, DROPDOWN_DISABLED_TEXT, PRESET_BORDER_COLORS, PRESET_CONTENT_COLORS, PRESET_DIVIDER_COLORS, PRESET_HOVER_BACKGROUNDS, PRESET_MENU_ITEM_ACTIVE_BACKGROUNDS, PRESET_MENU_ITEM_ACTIVE_COLORS, PRESET_MENU_ITEM_COLORS, getDropdownButtonPreset, isDropdownButtonName, } from "./sd-dropdown-button.config";
 export class SdDropdownButton extends BaseDropdownEvent {
     constructor() {
         super();
@@ -186,7 +186,7 @@ export class SdDropdownButton 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],
@@ -196,10 +196,10 @@ export class SdDropdownButton extends BaseDropdownEvent {
                 '--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
                 '--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_TEXT,
                 '--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
-            } }, h("span", { key: '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 is() { return "sd-dropdown-button"; }
     static get originalStyleUrls() {

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

@@ -0,0 +1,21 @@
+import fieldTokens from "../../tokens/generated/component.field.json";
+const sm = fieldTokens.field.label.sm;
+const md = fieldTokens.field.label.md;
+export const FIELD_LABEL_SIZE_MAP = {
+    sm: {
+        height: sm.height,
+        gap: sm.gap,
+        icon: sm.icon,
+        fontSize: sm.typography.fontSize,
+        lineHeight: sm.typography.lineHeight,
+        fontWeight: sm.typography.fontWeight,
+    },
+    md: {
+        height: md.height,
+        gap: md.gap,
+        icon: md.icon,
+        fontSize: md.typography.fontSize,
+        lineHeight: md.typography.lineHeight,
+        fontWeight: md.typography.fontWeight,
+    },
+};

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

@@ -9,10 +9,6 @@ sd-field .sd-field *:focus-visible,
 sd-field .sd-field *:focus-within {
   outline: none !important;
 }
-sd-field .sd-field:not(.sd-field--disabled):hover .sd-field__control {
-  border: 1px solid var(--sd-system-color-field-border-hover) !important;
-  box-shadow: 0px 0px 4px 0px rgba(0, 113, 255, 0.4);
-}
 sd-field .sd-field.sd-field--disabled {
   cursor: not-allowed;
 }
@@ -34,7 +30,7 @@ sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label {
   display: flex;
   align-items: center;
   height: var(--sd-field-label-height);
-  margin-right: var(--sd-system-space-field-sm-gap);
+  margin-right: var(--sd-field-label-margin-right);
 }
 sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon {
   margin-right: var(--sd-field-label-gap);
@@ -60,39 +56,46 @@ sd-field .sd-field--has-addon .sd-field__control .sd-field__addon {
   font-weight: var(--sd-field-addon-font-weight);
   background: var(--sd-field-addon-bg);
   border-right: var(--sd-field-addon-border-width) solid var(--sd-field-addon-border-color);
-  border-radius: calc(var(--sd-system-radius-field-sm) - 1px) 0 0 calc(var(--sd-system-radius-field-sm) - 1px);
+  border-radius: calc(var(--sd-field-control-radius) - 1px) 0 0 calc(var(--sd-field-control-radius) - 1px);
 }
 sd-field .sd-field__wrapper {
   width: 100%;
-  height: var(--sd-system-size-field-sm-height);
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   flex-flow: row nowrap;
   position: relative;
   color: var(--sd-system-color-field-text-default);
-  cursor: pointer;
   -webkit-user-select: none;
   user-select: none;
 }
+sd-field .sd-field__wrapper .sd-field__main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
 sd-field .sd-field__wrapper .sd-field__control {
   position: relative;
-  height: 100%;
+  height: var(--sd-field-wrapper-height);
   display: flex;
-  flex: 1;
   min-width: 0;
   border: 1px solid var(--sd-system-color-field-border-default);
-  border-radius: var(--sd-system-radius-field-sm);
+  border-radius: var(--sd-field-control-radius);
   background: var(--sd-system-color-field-bg-default);
 }
-sd-field .sd-field--error:not(:hover) .sd-field__wrapper .sd-field__control {
+sd-field .sd-field--error .sd-field__wrapper .sd-field__control:not(:hover) {
   border: 1px solid var(--sd-system-color-field-border-danger) !important;
 }
-sd-field .sd-field.sd-field--focus .sd-field__wrapper .sd-field__control, sd-field .sd-field.sd-field--hover .sd-field__wrapper .sd-field__control {
+sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control {
+  border: 1px solid var(--sd-system-color-field-border-success) !important;
+}
+sd-field .sd-field:not(.sd-field--disabled) .sd-field__wrapper .sd-field__control:hover {
   border: 1px solid var(--sd-system-color-field-border-focus) !important;
   box-shadow: 0px 0px 4px 0px rgba(0, 113, 255, 0.4);
 }
-sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control {
-  border: 1px solid var(--sd-system-color-field-border-success) !important;
+sd-field .sd-field.sd-field--focus .sd-field__wrapper .sd-field__control {
+  border: 1px solid var(--sd-system-color-field-border-focus) !important;
+  box-shadow: 0px 0px 4px 0px rgba(0, 113, 255, 0.4);
 }
 sd-field .sd-field .sd-field__error-message {
   color: var(--sd-textinput-textinput-text-error-message);

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

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import fieldTokens from "../../tokens/generated/component.field.json";
+import { FIELD_LABEL_SIZE_MAP } from "./sd-field.config";
 const FORM_PARENT_TAGS = [
     'sd-select',
     'sd-select-multiple',
@@ -25,6 +26,7 @@ export class SdField {
     hint = '';
     errorMessage = '';
     width = '';
+    size = 'sm';
     // props - label
     label = '';
     addonLabel = '';
@@ -125,14 +127,20 @@ export class SdField {
     render() {
         const addon = this.addonLabel;
         const addonTokens = fieldTokens.field.addonLabel;
-        const labelTokens = fieldTokens.field.label.sm;
+        const size = this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm';
+        const labelTokens = FIELD_LABEL_SIZE_MAP[size];
+        const sizeCssVars = {
+            '--sd-field-wrapper-height': `var(--sd-system-size-field-${size}-height)`,
+            '--sd-field-control-radius': `var(--sd-system-radius-field-${size})`,
+            '--sd-field-label-margin-right': `var(--sd-system-space-field-${size}-gap)`,
+        };
         const labelCssVars = this.label
             ? {
                 '--sd-field-label-height': `${labelTokens.height}px`,
                 '--sd-field-label-gap': `${labelTokens.gap}px`,
-                '--sd-field-label-font-size': `${labelTokens.typography.fontSize}px`,
-                '--sd-field-label-line-height': `${labelTokens.typography.lineHeight}px`,
-                '--sd-field-label-font-weight': labelTokens.typography.fontWeight,
+                '--sd-field-label-font-size': `${labelTokens.fontSize}px`,
+                '--sd-field-label-line-height': `${labelTokens.lineHeight}px`,
+                '--sd-field-label-font-weight': labelTokens.fontWeight,
             }
             : {};
         const addonCssVars = addon
@@ -149,25 +157,25 @@ export class SdField {
                 '--sd-field-addon-border-width': `${addonTokens.border.width}px`,
             }
             : {};
-        return (h("div", { key: '3e4be9c9f1744faa0f763f0adc86c70bdceb8bbd', class: {
+        return (h("div", { key: '72ffdb42c88b90eb60637b10c1330dc509ece812', class: {
                 'sd-field': true,
                 'sd-field--has-label': !!this.label,
                 'sd-field--has-addon': !!addon,
                 [this.fieldStatus]: !!this.fieldStatus,
-            }, style: { ...labelCssVars, ...addonCssVars } }, h("div", { key: '240f8ffc487da6aa694aae2e2568a5c178233069', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '8d8273dfcf65dd7fe0dd6e565313470b491970a0', class: {
-                'sd-field__control': true,
-                'sd-field__control--has-addon': !!addon,
-            }, style: this.width
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, h("div", { key: 'fb5d90aea5a4988ec58984b4a85ed609f032549e', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'c0372be3a39ca1d6cebfe5e765d120751e39d03e', class: "sd-field__main", style: this.width
                 ? {
                     width: typeof this.width === 'number' ? `${this.width}px` : this.width,
                     flex: 'none',
                 }
-                : {} }, addon && h("div", { key: 'b08657bb5fe753defdd273464a5faeabc1a7e57e', class: "sd-field__addon" }, addon), h("slot", { key: '77c653b18f1cf4b3280e8deeff483ca22fbc0330' }))), this.errorMsg || this.errorMessage ? (h("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)) : (this.hint && h("div", { class: "sd-field__hint" }, this.hint))));
+                : {} }, h("div", { key: 'd203154db0eef4e73908d78ba3667710c51b6595', class: {
+                'sd-field__control': true,
+                'sd-field__control--has-addon': !!addon,
+            } }, addon && h("div", { key: '851b996010c4f0402df8b6bfe9ced0c8444bc591', class: "sd-field__addon" }, addon), h("slot", { key: '081b95a99090c3c1d2d28170500ac7be15452876' })), this.errorMsg || this.errorMessage ? (h("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)) : (this.hint && h("div", { class: "sd-field__hint" }, this.hint))))));
     }
     renderLabel(label) {
         if (!label)
             return null;
-        return (h("label", { class: "sd-field__label" }, this.icon && (h("sd-icon", { name: this.icon.name, size: this.icon.size ?? Number(fieldTokens.field.label.sm.icon), color: this.icon.color, rotate: this.icon.rotate, class: "sd-field__label__icon" })), h("div", { class: "sd-field__label__text" }, label), this.labelTooltip && (h("sd-tooltip", { class: "sd-field__label__tooltip", ...this.labelTooltipProps }, this.labelTooltip))));
+        return (h("label", { class: "sd-field__label" }, this.icon && (h("sd-icon", { name: this.icon.name, size: this.icon.size ?? Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate, class: "sd-field__label__icon" })), h("div", { class: "sd-field__label__text" }, label), this.labelTooltip && (h("sd-tooltip", { class: "sd-field__label__tooltip", ...this.labelTooltipProps }, this.labelTooltip))));
     }
     static get is() { return "sd-field"; }
     static get originalStyleUrls() {
@@ -386,6 +394,33 @@ export class SdField {
                 "attribute": "width",
                 "defaultValue": "''"
             },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FieldSize",
+                    "resolved": "\"md\" | \"sm\"",
+                    "references": {
+                        "FieldSize": {
+                            "location": "import",
+                            "path": "./sd-field.config",
+                            "id": "src/components/sd-field/sd-field.config.ts::FieldSize",
+                            "referenceLocation": "FieldSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'sm'"
+            },
             "label": {
                 "type": "string",
                 "mutable": false,

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

@@ -230,7 +230,7 @@ export class SdFilePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "placeholder",
                 "defaultValue": "'Click to upload'"
             },
@@ -250,7 +250,7 @@ export class SdFilePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "disabled",
                 "defaultValue": "false"
             },
@@ -270,7 +270,7 @@ export class SdFilePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "inline",
                 "defaultValue": "false"
             },
@@ -290,7 +290,7 @@ export class SdFilePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "multiple",
                 "defaultValue": "false"
             },
@@ -701,7 +701,7 @@ export class SdFilePicker {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{ files: File[]; reason: 'max-file-size' | 'max-total-size' | 'max-files' }",
+                    "original": "{\n    files: File[];\n    reason: 'max-file-size' | 'max-total-size' | 'max-files';\n  }",
                     "resolved": "{ files: File[]; reason: \"max-file-size\" | \"max-total-size\" | \"max-files\"; }",
                     "references": {
                         "File": {

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

@@ -22,7 +22,13 @@ export const GHOST_BUTTON_SIZES = {
         icon: Number(ghostButtonTokens.ghostButton.lg.icon),
     },
 };
-export const GHOST_BUTTON_RADIUS = Number(ghostButtonTokens.ghostButton.radius);
+export 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),
+};
 export const GHOST_BUTTON_HOVER_OPACITY = ghostButtonTokens.ghostButton.hover.opacity;
 export const GHOST_BUTTON_CONTENT_COLORS = {
     default: ghostButtonTokens.ghostButton.default.content,

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

@@ -35,16 +35,16 @@ export class SdGhostButton {
             ? 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 })));
     }
     static get is() { return "sd-ghost-button"; }
     static get originalStyleUrls() {