@synergy-design-system/mcp 1.27.0 → 1.28.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 1.28.0
+
+### Minor Changes
+
+- [#1082](https://github.com/synergy-design-system/synergy-design-system/pull/1082) [`e27f95b`](https://github.com/synergy-design-system/synergy-design-system/commit/e27f95ba3e5bd1f494db80ad51d0c1957b8d2204) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-11-27
+
+  feat: ✨ Brand updates for `<syn-tab-group>`, `<syn-tab-panel>` and `<syn-tab>` (#969)
+
+### Patch Changes
+
+- Updated dependencies [[`e27f95b`](https://github.com/synergy-design-system/synergy-design-system/commit/e27f95ba3e5bd1f494db80ad51d0c1957b8d2204)]:
+  - @synergy-design-system/assets@1.24.0
+
 ## 1.27.0
 
 ### Minor Changes

package/metadata/checksum.txt

@@ -1 +1 @@
-7627d0700e4b892ec979b2c83231aa03
+14e8579fc883b677b3b4e22496687484

package/metadata/packages/assets/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 1.24.0
+
+### Minor Changes
+
+- [#1082](https://github.com/synergy-design-system/synergy-design-system/pull/1082) [`e27f95b`](https://github.com/synergy-design-system/synergy-design-system/commit/e27f95ba3e5bd1f494db80ad51d0c1957b8d2204) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-11-27
+
+  feat: ✨ Brand updates for `<syn-tab-group>`, `<syn-tab-panel>` and `<syn-tab>` (#969)
+
 ## 1.23.0
 
 ### Minor Changes

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

@@ -1,8 +1,6 @@
 import { css } from 'lit';
 
 export default css`
-  /* Write custom CSS here */
-
   :host {
     --background-color: none;
     --border-width: var(--syn-border-width-none);
@@ -48,14 +46,13 @@ export default css`
   }
 
   .tab:hover:not(.tab--disabled) {
-    color: var(--syn-color-primary-700);
+    color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-700));
   }
 
-  .tab.tab--active:not(.tab--disabled) {
+  .tab.tab--active:not(:hover):not(.tab--disabled) {
     color: var(--syn-typography-color-text);
   }
 
-
   /**
    * Closable
    */
@@ -64,7 +61,7 @@ export default css`
   }
 
   .tab__close-button {
-    color: var(--syn-color-neutral-500);
+    color: var(--syn-input-icon-icon-clearable-color, var(--syn-color-neutral-500));
     font-size: var(--syn-font-size-x-large);
     margin-inline-start: var(--syn-spacing-2x-small);
   }
@@ -74,7 +71,7 @@ export default css`
   }
 
   .tab__close-button::part(base):hover {
-    color: var(--syn-color-primary-700);
+    color: var(--syn-input-icon-icon-clearable-color-hover, var(--syn-color-primary-700));
   }
 
   .tab--active {
@@ -89,4 +86,9 @@ export default css`
     font-size: var(--syn-font-size-x-large);
     margin-inline-end: var(--syn-spacing-x-small);
   }
+
+  /* #969: Prevent interactive color when close button is hovered */
+  .tab.tab--closable:hover:has(.tab__close-button:hover) {
+    color: var(--syn-typography-color-text);
+  }
 `;

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

@@ -5,8 +5,9 @@ export default css`
   /* Write custom CSS here */
   :host {
     --track-width: var(--syn-border-width-small);
-    --track-color: var(--syn-color-neutral-300);
+    --track-color: var(--syn-panel-border-color);
     --indicator-width: var(--syn-border-width-x-large);
+    --indicator-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
   }
 
   /* we need to augment the size of the height of the tab-group__nav to make the focus outline and the hiding white border visible of the tab because of overflow-x value  */
@@ -24,25 +25,14 @@ export default css`
    */
   .tab-group--top .tab-group__indicator {
     border-bottom: solid var(--indicator-width) var(--indicator-color);
-    bottom: 0;
   }
 
   .tab-group--start .tab-group__indicator {
     border-right: solid var(--indicator-width) var(--indicator-color);
-    right: 0;
-  }
-
-  .tab-group--start.tab-group--rtl .tab-group__indicator {
-    left: 0;
   }
 
   .tab-group--end .tab-group__indicator {
     border-inline-start: solid var(--indicator-width) var(--indicator-color);
-    left: 0;
-  }
-
-  .tab-group--end.tab-group--rtl .tab-group__indicator {
-    right: 0;
   }
 
   /**
@@ -195,7 +185,7 @@ export default css`
   .tab-group__scroll-button {
     /* we need to move the scroll buttons to the top, to align the borders with the border of the tab-group--nav  */
     bottom: var(--syn-panel-border-width);
-    color: var(--syn-color-neutral-950);
+    color: var(--syn-interactive-quiet-color, var(--syn-color-neutral-950));
     font-size: var(--syn-font-size-medium);
     width: calc(var(--syn-spacing-x-large) + var( --syn-spacing-2x-small));
   }
@@ -204,28 +194,8 @@ export default css`
     padding: calc(var(--syn-spacing-small) - var(--syn-spacing-3x-small));
   }
 
-  /* Make sure the direction of the chevrons match the scrolling directions. */
-  .tab-group--has-scroll-controls:not(.tab-group--rtl) .tab-group__scroll-button--start,
-  .tab-group--rtl .tab-group__scroll-button--end {
-    rotate: 180deg;
-  }
-
-  .tab-group--has-scroll-controls:not(.tab-group--contained) .tab-group__scroll-button--start {
-    border-top: solid var(--track-width) var(--track-color);
-  }
-
-  .tab-group--has-scroll-controls:not(.tab-group--contained) .tab-group__scroll-button--end {
-    border-bottom: solid var(--track-width) var(--track-color);
-  }
-
-  .tab-group--rtl:not(.tab-group--contained) .tab-group__scroll-button--start {
+  .tab-group--has-scroll-controls:not(.tab-group--contained) .tab-group__scroll-button {
     border-bottom: solid var(--track-width) var(--track-color);
-    border-top: none;
-  }
-
-  .tab-group--rtl:not(.tab-group--contained) .tab-group__scroll-button--end {
-    border-bottom: none;
-    border-top: solid var(--track-width) var(--track-color);
   }
 
   /**

package/metadata/packages/components/components/syn-tab-group/component.ts

@@ -474,6 +474,7 @@ export default class SynTabGroup extends SynergyElement {
   }
       
   render() {
+    const isRtl = this.localize.dir() === 'rtl';
 
     return html`
       <div
@@ -502,7 +503,7 @@ export default class SynTabGroup extends SynergyElement {
                     'tab-group__scroll-button--start': true,
                     'tab-group__scroll-button--start--hidden': this.shouldHideScrollStartButton
                   })}
-                  name="chevron-right"
+                  name=${isRtl ? 'tabs-right' : 'tabs-left'}
                   library="system"
                   tabindex="-1"
                   aria-hidden="true"
@@ -532,7 +533,7 @@ export default class SynTabGroup extends SynergyElement {
                     'tab-group__scroll-button--end': true,
                     'tab-group__scroll-button--end--hidden': this.shouldHideScrollEndButton
                   })}
-                  name="chevron-right"
+                  name=${isRtl ? 'tabs-left' : 'tabs-right'}
                   library="system"
                   tabindex="-1"
                   aria-hidden="true"

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

@@ -1,5 +1,23 @@
 # Changelog
 
+## 2.65.0
+
+### Minor Changes
+
+- [#1082](https://github.com/synergy-design-system/synergy-design-system/pull/1082) [`e27f95b`](https://github.com/synergy-design-system/synergy-design-system/commit/e27f95ba3e5bd1f494db80ad51d0c1957b8d2204) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-11-27
+
+  feat: ✨ Brand updates for `<syn-tab-group>`, `<syn-tab-panel>` and `<syn-tab>` (#969)
+
+## 2.64.1
+
+### Patch Changes
+
+- [#1098](https://github.com/synergy-design-system/synergy-design-system/pull/1098) [`92973ed`](https://github.com/synergy-design-system/synergy-design-system/commit/92973ed0242ceb836dfe662cbe8e81b7a5364c2e) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-11-27
+
+  fix: 🐛 angular validator api fix (#1097)
+
+  Validators do not use the internal `_enabled` property anymore.
+
 ## 2.64.0
 
 ### Minor Changes

package/metadata/packages/tokens/sick2025_light.css

@@ -225,8 +225,8 @@
   --syn-input-width: var(--syn-border-width-small);
   --syn-interactive-background-color-hover: #f2f0ed;
   --syn-interactive-emphasis-color: var(--syn-color-primary-700);
-  --syn-interactive-emphasis-color-active: var(--syn-color-primary-950);
-  --syn-interactive-emphasis-color-hover: var(--syn-color-primary-900);
+  --syn-interactive-emphasis-color-active: var(--syn-color-primary-1000);
+  --syn-interactive-emphasis-color-hover: var(--syn-color-primary-1000);
   --syn-interactive-quiet-color: var(--syn-color-neutral-950);
   --syn-interactive-quiet-color-active: var(--syn-color-primary-800);
   --syn-interactive-quiet-color-hover: var(--syn-color-primary-700);

package/package.json

@@ -10,7 +10,7 @@
     "@modelcontextprotocol/sdk": "^1.19.1",
     "globby": "^15.0.0",
     "zod": "^3.25.76",
-    "@synergy-design-system/assets": "1.23.0"
+    "@synergy-design-system/assets": "1.24.0"
   },
   "description": "MCP Server for the Synergy Design System",
   "devDependencies": {
@@ -28,11 +28,11 @@
     "serve-handler": "^6.1.6",
     "ts-jest": "^29.4.0",
     "typescript": "^5.9.3",
-    "@synergy-design-system/components": "2.64.0",
+    "@synergy-design-system/components": "2.65.0",
     "@synergy-design-system/docs": "0.1.0",
-    "@synergy-design-system/eslint-config-syn": "^0.1.0",
     "@synergy-design-system/styles": "1.9.0",
-    "@synergy-design-system/tokens": "^2.44.0"
+    "@synergy-design-system/tokens": "^2.44.0",
+    "@synergy-design-system/eslint-config-syn": "^0.1.0"
   },
   "exports": {
     ".": {
@@ -66,7 +66,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "1.27.0",
+  "version": "1.28.0",
   "scripts": {
     "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
     "build:all": "pnpm run build && pnpm run build:storybook",