@sellmate/design-system 1.0.62 → 1.0.64

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

@@ -12,6 +12,7 @@ export class SdDatePicker {
     width = '';
     // sd-field 공통 props
     label = '';
+    labelWidth = '';
     addonLabel = '';
     hint = '';
     errorMessage = '';
@@ -91,9 +92,9 @@ export class SdDatePicker {
             '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
         };
-        return (h("sd-field", { key: '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: '693c0c75e6b0a9ee8323f4be7ec101592e586372', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: 'ea7f506f0163119fac0c660ef1bef5781780a118', 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: '0109eb0326655018bc02cc373e766ffdada85ff0', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '65a628af43ae036a752f3511341fd8c9c82303a1', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-picker-calendar", { key: '21f574fc9551f9aaccfcb5d49a81952dbba72d7a', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get is() { return "sd-date-picker"; }
     static get originalStyleUrls() {
@@ -151,7 +152,7 @@ export class SdDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "size",
                 "defaultValue": "'sm'"
             },
@@ -171,7 +172,7 @@ export class SdDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "placeholder",
                 "defaultValue": "'YYYY-MM-DD'"
             },
@@ -208,7 +209,7 @@ export class SdDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "disabled",
                 "defaultValue": "false"
             },
@@ -252,6 +253,26 @@ export class SdDatePicker {
                 "attribute": "label",
                 "defaultValue": "''"
             },
+            "labelWidth": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-width",
+                "defaultValue": "''"
+            },
             "addonLabel": {
                 "type": "string",
                 "mutable": 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

@@ -13,6 +13,7 @@ export class SdDateRangePicker {
     width = '';
     // sd-field 공통 props
     label = '';
+    labelWidth = '';
     addonLabel = '';
     hint = '';
     errorMessage = '';
@@ -97,9 +98,9 @@ export class SdDateRangePicker {
             '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
         };
-        return (h("sd-field", { key: '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: '95ec666c91635d6b6b749d660b4495b7ebe48e6a', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '3051fda66e94d51208347ae2053173570d5f1ca9', 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: '71693b5a4cec562169d9427a4e19aed4d8b19a45', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '75b9f1c1ebdabcd1c1a33cad51189ba132274bb1', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-range-picker-calendar", { key: 'f158eead4f44bc452bf102b3324721df84fc3b0c', 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 +162,7 @@ export class SdDateRangePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "size",
                 "defaultValue": "'sm'"
             },
@@ -181,7 +182,7 @@ export class SdDateRangePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "placeholder",
                 "defaultValue": "'YYYY-MM-DD ~ YYYY-MM-DD'"
             },
@@ -237,7 +238,7 @@ export class SdDateRangePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "disabled",
                 "defaultValue": "false"
             },
@@ -281,6 +282,26 @@ export class SdDateRangePicker {
                 "attribute": "label",
                 "defaultValue": "''"
             },
+            "labelWidth": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-width",
+                "defaultValue": "''"
+            },
             "addonLabel": {
                 "type": "string",
                 "mutable": 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;
 }
@@ -33,11 +29,14 @@ sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control {
 sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label {
   display: flex;
   align-items: center;
+  flex-shrink: 0;
+  width: var(--sd-field-label-width, auto);
   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);
+  flex-shrink: 0;
 }
 sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text {
   font-size: var(--sd-field-label-font-size);
@@ -45,9 +44,13 @@ sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text {
   font-weight: var(--sd-field-label-font-weight);
   color: var(--sd-system-color-field-text-default);
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
 }
 sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip {
   margin-left: var(--sd-field-label-gap);
+  flex-shrink: 0;
 }
 sd-field .sd-field--has-addon .sd-field__control .sd-field__addon {
   display: flex;
@@ -60,39 +63,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,8 +26,10 @@ export class SdField {
     hint = '';
     errorMessage = '';
     width = '';
+    size = 'sm';
     // props - label
     label = '';
+    labelWidth = '';
     addonLabel = '';
     icon = undefined;
     labelTooltip = '';
@@ -125,14 +128,25 @@ 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,
+                ...(this.labelWidth
+                    ? {
+                        '--sd-field-label-width': typeof this.labelWidth === 'number' ? `${this.labelWidth}px` : this.labelWidth,
+                    }
+                    : {}),
             }
             : {};
         const addonCssVars = addon
@@ -149,25 +163,25 @@ export class SdField {
                 '--sd-field-addon-border-width': `${addonTokens.border.width}px`,
             }
             : {};
-        return (h("div", { key: '3e4be9c9f1744faa0f763f0adc86c70bdceb8bbd', class: {
+        return (h("div", { key: 'f12b2e13ac8152d1e688f903a60a8fa670e99065', 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: '79f7a40b5e1ee95bb9075b0855e22261cd8adc6a', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '54b5bbfbe18df48c40cc30ec3d6761ccd8e446cc', 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: '39542908287175ade4d6e0f1acd2cb1f03c9e2a1', class: {
+                'sd-field__control': true,
+                'sd-field__control--has-addon': !!addon,
+            } }, addon && h("div", { key: '236650de53d1d1951f26586aa0d22f0f267fc411', class: "sd-field__addon" }, addon), h("slot", { key: '41df3dca21aa68d3324617891f2555f1c488a61b' })), 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 +400,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,
@@ -406,6 +447,26 @@ export class SdField {
                 "attribute": "label",
                 "defaultValue": "''"
             },
+            "labelWidth": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-width",
+                "defaultValue": "''"
+            },
             "addonLabel": {
                 "type": "string",
                 "mutable": false,