@synergy-design-system/mcp 1.32.0 → 1.33.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 1.33.0
+
+### Minor Changes
+
+- [#1095](https://github.com/synergy-design-system/synergy-design-system/pull/1095) [`f9f544f`](https://github.com/synergy-design-system/synergy-design-system/commit/f9f544feb2adb3edef95bd1b50a303440e0c8385) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-12-04
+
+  feat: ✨ Brand updates for `<syn-select>`, `<syn-option>` and `<syn-optgroup>` (#988)
+  feat: ✨ Brand updates for `<syn-combobox>` (#944)
+
 ## 1.32.0
 
 ### Minor Changes

package/metadata/checksum.txt

@@ -1 +1 @@
-b0cfd690fcc6a6634862f98820c5fb8c
+bcccb716196fa09334ce6f5caa139721

package/metadata/packages/components/components/syn-combobox/component.styles.ts

@@ -306,7 +306,7 @@ export default css`
 
   /* Change combobox border on hover */
   .combobox:not(.combobox--disabled):hover .combobox__inputs {
-    border-color: var(--syn-input-color-hover);
+    border-color: var(--syn-input-border-color-hover);
   }
 
   /* Prefix and Suffix */
@@ -353,18 +353,16 @@ export default css`
     font-size: var(--syn-font-size-2x-large);
   }
 
-
   .combobox__prefix,
   .combobox__suffix {
-    color: var(--syn-input-help-text-color);
+    color: var(--syn-input-icon-color);
   }
 
 
 
   /* Listbox */
   .combobox__listbox {
-    /* @todo: Should be --syn-border-radius-medium, which should be set to 0 */
-    border-radius: var(--syn-border-radius-none);
+    border-radius: var(--syn-input-border-radius-medium);
     box-shadow: var(--syn-shadow-medium);
   }
 

package/metadata/packages/components/components/syn-optgroup/component.styles.ts

@@ -14,7 +14,7 @@ export default css`
   .optgroup__label-container {
     align-items: center;
     box-sizing: border-box;
-    color: var(--syn-color-neutral-950);
+    color: var(--syn-input-color);
     display: flex;
     gap: var(--syn-spacing-small);
     min-height: var(--option-min-height, var(--syn-input-height-medium));
@@ -49,7 +49,7 @@ export default css`
 
   .optgroup__prefix,
   .optgroup__suffix {
-    color: var(--syn-color-neutral-800);
+    color: var(--syn-option-icon-color, var(--syn-color-neutral-800));
     font-size: var(--syn-spacing-large);
   }
 

package/metadata/packages/components/components/syn-option/component.custom.styles.ts

@@ -13,28 +13,54 @@ export default css`
    * See below for usage of these variables
    */
   .option {
+    /*
+     * #988: Brand2025 defines a small gap between options
+     * and rounded corners. We achieve that using an outline
+     * that simulates the gap using the menu background color.
+     */
+    --outline: calc(var(--syn-focus-ring-border-radius) * 1.5);
+
+    border-radius: calc(var(--outline) * 1.5);
     font-size: var(--option-font-size, var(--syn-font-size-medium));
-    
+
     /* Height is dependent on line-height of .option__label, which does not fit completely to layout */
     min-height: var(--option-min-height, var(--syn-input-height-medium));
-    padding: var(--option-padding, var(--syn-spacing-small) var(--syn-spacing-medium));
+    outline: var(--outline) solid var(--syn-panel-background-color);
+    outline-offset: calc(var(--outline) * -1 + 1px);
+    padding: var(--option-padding, var(--syn-spacing-small) var(--syn-spacing-medium));    
   }
 
   .option:not(.option--current) {
-    color: var(--syn-color-neutral-950);
+    color: var(--syn-option-color, var(--syn-typography-color-text));
+  }
+
+  .option--current,
+  .option--current.option--hover:not(.option--disabled) {
+    background-color: var(--syn-option-background-color-active, var(--syn-color-neutral-1000));
+    color: var(--syn-option-color-active, var(--syn-typography-color-text-inverted));
+  }
+
+  .option--hover:not(.option--current):not(.option--disabled) {
+    background-color: var(--syn-option-background-color-hover, var(--syn-color-neutral-1000));
+    color: var(--syn-option-color-hover, var(--syn-typography-color-text-inverted));
   }
 
   /** #429: Use token for opacity */
-  .option--disabled { 
+  .option--disabled {
     opacity: var(--syn-input-disabled-opacity);
   }
 
+  .option--current.option--disabled {
+    background-color: var(--syn-option-background-color-hover, var(--syn-color-neutral-1000));
+    color: var(--syn-option-color-hover, var(--syn-typography-color-text-inverted));
+  }
+
   .option__label {
     line-height: var(--syn-line-height-normal);
   }
 
   .option__check {
-    color: var(--syn-color-primary-600);
+    color: var(--syn-option-check-color, var(--syn-color-primary-600));
     font-size: var(--option-icon-size, var(--syn-spacing-large));
   }
 
@@ -44,7 +70,11 @@ export default css`
 
   /* Invert the check mark when keyboard navigation is used */
   .option--current .option__check {
-    color: var(--syn-color-neutral-0);
+    color: var(--syn-option-check-color-active, var(--syn-color-neutral-0));
+  }
+
+  .option--hover:not(.option--current) .option__check {
+    color: var(--syn-option-check-color-hover, var(--syn-color-neutral-0));
   }
 
   /* Use larger spacing between icons and content */
@@ -59,23 +89,24 @@ export default css`
   /* Set correct icon size when someone uses syn-icon in the slots */
   .option__prefix::slotted(syn-icon),
   .option__suffix::slotted(syn-icon) {
-    color: var(--syn-color-neutral-800);
+    color: var(--syn-option-icon-color, var(--syn-typography-color-text));
     font-size: var(--option-icon-size, var(--syn-spacing-large));
   }
 
+  .option--hover .option__prefix::slotted(syn-icon),
+  .option--hover .option__suffix::slotted(syn-icon) {
+    color: var(--syn-option-icon-color-hover, var(--syn-color-neutral-800));
+  }
+
   .option--current .option__prefix::slotted(syn-icon),
   .option--current .option__suffix::slotted(syn-icon) {
-    color: var(--syn-color-neutral-0);
+    color: var(--syn-option-icon-color-active, var(--syn-color-neutral-800));
   }
 
   /* This is needed for the highlight styling of the options in syn-combobox */
   .option__label::slotted(.syn-highlight-style) {
     background-color: transparent;
-    color: var(--syn-color-neutral-950);
+    color: unset;
     font: var(--syn-body-medium-bold);
   }
-
-  :host([aria-selected='true']) .option__label::slotted(.syn-highlight-style) {
-    color: var(--syn-color-neutral-0);
-  }
 `;

package/metadata/packages/components/components/syn-select/component.custom.styles.ts

@@ -59,7 +59,7 @@ export default css`
   /* Change select border on hover */
   /* stylelint-disable-next-line no-descending-specificity */
   .select:not(.select--disabled):hover .select__combobox {
-    border-color: var(--syn-input-color-hover);
+    border-color: var(--syn-input-border-color-hover);
   }
 
   /* Prefix and Suffix */
@@ -106,10 +106,9 @@ export default css`
     font-size: var(--syn-font-size-2x-large);
   }
 
-
   .select__prefix,
   .select__suffix {
-    color: var(--syn-input-help-text-color);
+    color: var(--syn-input-icon-color);
   }
 
   /* Multi Select */
@@ -131,8 +130,7 @@ export default css`
 
   /* Listbox */
   .select__listbox {
-    /* @todo: Should be --syn-border-radius-medium, which should be set to 0 */
-    border-radius: var(--syn-border-radius-none);
+    border-radius: var(--syn-input-border-radius-medium);
     box-shadow: var(--syn-shadow-medium);
   }
 

package/metadata/packages/components/static/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 2.69.0
+
+### Minor Changes
+
+- [#1095](https://github.com/synergy-design-system/synergy-design-system/pull/1095) [`f9f544f`](https://github.com/synergy-design-system/synergy-design-system/commit/f9f544feb2adb3edef95bd1b50a303440e0c8385) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-12-04
+
+  feat: ✨ Brand updates for `<syn-select>`, `<syn-option>` and `<syn-optgroup>` (#988)
+  feat: ✨ Brand updates for `<syn-combobox>` (#944)
+
 ## 2.68.0
 
 ### Minor Changes

package/package.json

@@ -28,12 +28,12 @@
     "serve-handler": "^6.1.6",
     "ts-jest": "^29.4.0",
     "typescript": "^5.9.3",
-    "@synergy-design-system/components": "2.68.0",
     "@synergy-design-system/docs": "0.1.0",
+    "@synergy-design-system/components": "2.69.0",
     "@synergy-design-system/eslint-config-syn": "^0.1.0",
-    "@synergy-design-system/fonts": "1.0.0",
     "@synergy-design-system/styles": "1.9.0",
-    "@synergy-design-system/tokens": "^2.45.0"
+    "@synergy-design-system/tokens": "^2.45.0",
+    "@synergy-design-system/fonts": "1.0.0"
   },
   "exports": {
     ".": {
@@ -67,7 +67,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "1.32.0",
+  "version": "1.33.0",
   "scripts": {
     "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
     "build:all": "pnpm run build && pnpm run build:storybook",