@synergy-design-system/mcp 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -1 +1,15 @@
 # Changelog
+
+# [@synergy-design-system/mcp-v1.1.0](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.0.0...mcp/1.1.0) (2025-08-08)
+
+
+### Features
+
+* ✨ syn-icon: Provide a function to switch the icon set to brand2025 ([#974](https://github.com/synergy-design-system/synergy-design-system/issues/974)) ([1482e34](https://github.com/synergy-design-system/synergy-design-system/commit/1482e34f21ce80b9ad6f25e760f87de13d5f70db))
+
+# @synergy-design-system/mcp-v1.0.0 (2025-08-07)
+
+
+### Features
+
+* ✨ MCP: Initial release ([#931](https://github.com/synergy-design-system/synergy-design-system/pull/931)) ([5f511ca](https://github.com/synergy-design-system/synergy-design-system/commit/5f511ca4305981f90e589a5f634e58d0e4e834ee))

package/dist/build/static.js

@@ -22,6 +22,11 @@ const staticFilesToCopy = [
         getAbsolutePath('../../../../packages/components/BREAKING_CHANGES.md'),
         componentMigrationPath,
     ],
+    // Copy the v3 migration guide
+    [
+        getAbsolutePath('../../../../packages/docs/src/static/migration-synergy-v3.md'),
+        componentMigrationPath,
+    ],
 ];
 /**
  * Sets up all data from the components and framework packages and adds them to the static metadata.

package/dist/tools/asset-info.js

@@ -3,7 +3,7 @@ import { z } from 'zod';
 import * as availableIconsets from '@synergy-design-system/assets';
 import { getAssetsMetaData, getStructuredMetaData, } from '../utilities/index.js';
 const iconsetListAliases = {
-    brand2018Icons: [
+    sick2018Icons: [
         'current',
         'default',
         'legacy',
@@ -12,7 +12,7 @@ const iconsetListAliases = {
         'brand2018',
         'sick2018',
     ],
-    brand2025Icons: [
+    sick2025Icons: [
         'synergy2025',
         'new',
         'next',
@@ -21,6 +21,7 @@ const iconsetListAliases = {
         'v3',
     ],
 };
+const DEFAULT_LIMIT = 5;
 /**
  * Simple tool to list all available assets in the Synergy Design System.
  * This tool fetches the asset data from the Synergy package and formats it for display.
@@ -34,7 +35,7 @@ export const assetInfoTool = (server) => {
             filter: z
                 .string()
                 .optional()
-                .describe('A filter to apply to the icon names. If provided, only icons matching this filter will be returned.'),
+                .describe('A filter to apply to the icon names. If provided, only icons matching this filter will be returned. Supports multiple filters separated by "|" (e.g., "home|search|menu" to find icons containing any of these terms).'),
             iconset: z
                 .enum([
                 'current', // Special key, maps to 2018 currently, should map to 2025 in the next major version
@@ -56,9 +57,9 @@ export const assetInfoTool = (server) => {
                 .describe('The name of the icon set to retrieve icons from.'),
             limit: z
                 .number()
-                .default(5)
+                .default(DEFAULT_LIMIT)
                 .optional()
-                .describe('The maximum number of icons to return. Defaults to 5.'),
+                .describe(`The maximum number of icons to return. Defaults to ${DEFAULT_LIMIT}. When using multiple filters (pipe-separated), this limit applies per filter term.`),
         },
         title: 'Available Icons',
     }, async ({ filter, iconset, limit, }) => {
@@ -66,18 +67,44 @@ export const assetInfoTool = (server) => {
         const setToUse = iconset
             ? Object
                 .entries(iconsetListAliases)
-                .find(([, aliases]) => aliases.includes(iconset))?.[0] || 'brand2018Icons'
-            : 'brand2018Icons';
+                .find(([, aliases]) => aliases.includes(iconset))?.[0] || 'sick2018Icons'
+            : 'sick2018Icons';
         const foundIconSet = typeof availableIconsets[setToUse] !== undefined
             ? availableIconsets[setToUse]
-            : availableIconsets.brand2018Icons;
+            : availableIconsets.sick2018Icons;
         // Filter the icons if a filter is provided
-        const availableIcons = Object
-            .keys(foundIconSet)
-            .filter(iconName => iconName.toLowerCase().includes(filter?.toLowerCase() || ''));
-        // Limit the number of icons returned
-        const limitedIcons = (limit ?? 5) > 0
-            ? availableIcons.slice(0, limit ?? 5)
+        // Support pipe-separated filters (e.g., "icon1|icon2|icon3") for multiple icon matching
+        let availableIcons;
+        if (!filter) {
+            availableIcons = Object.keys(foundIconSet);
+        }
+        else {
+            const lowerFilter = filter.toLowerCase();
+            // Check if filter contains pipe separator for multiple filters
+            if (lowerFilter.includes('|')) {
+                const filterTerms = lowerFilter.split('|').map(term => term.trim());
+                const iconsPerTerm = [];
+                // For each filter term, find matching icons and apply limit per term
+                filterTerms.forEach(term => {
+                    const matchingIcons = Object
+                        .keys(foundIconSet)
+                        .filter(iconName => iconName.toLowerCase().includes(term))
+                        .slice(0, limit ?? DEFAULT_LIMIT); // Apply limit per filter term
+                    iconsPerTerm.push(...matchingIcons);
+                });
+                // Remove duplicates while preserving order
+                availableIcons = [...new Set(iconsPerTerm)];
+            }
+            else {
+                // Original single filter behavior
+                availableIcons = Object
+                    .keys(foundIconSet)
+                    .filter(iconName => iconName.toLowerCase().includes(lowerFilter));
+            }
+        }
+        // For single filters or no filter, apply the limit normally
+        const limitedIcons = (!filter || !filter.includes('|')) && (limit ?? DEFAULT_LIMIT) > 0
+            ? availableIcons.slice(0, limit ?? DEFAULT_LIMIT)
             : availableIcons;
         const icons = limitedIcons.map(icon => `- ${icon}`).join('\n');
         const content = [
@@ -85,12 +112,17 @@ export const assetInfoTool = (server) => {
                 text: `Available icons in iconset "${setToUse}":`,
                 type: 'text',
             },
+            {
+                text: `Showing ${limitedIcons.length} of ${availableIcons.length} icons`,
+                type: 'text',
+            },
             {
                 text: icons,
                 type: 'text',
             },
         ];
         const aiRules = await getStructuredMetaData('../../metadata/static/assets');
+        const assetData = await getAssetsMetaData((fileName) => !fileName.toLowerCase().startsWith('changelog'));
         return {
             content: [
                 {
@@ -98,7 +130,7 @@ export const assetInfoTool = (server) => {
                     type: 'text',
                 },
                 {
-                    text: JSON.stringify(await getAssetsMetaData(), null, 2),
+                    text: JSON.stringify(assetData, null, 2),
                     type: 'text',
                 },
                 ...content,

package/dist/tools/asset-list.js

@@ -23,12 +23,12 @@ export const assetListTool = (server) => {
                         },
                         {
                             description: 'The original set of icons from the Synergy Design System. Use this for projects using Synergy Major Version 2.0.',
-                            iconset: 'brand2018Icons',
+                            iconset: 'sick2018Icons',
                             title: 'Synergy 2018 Icons',
                         },
                         {
                             description: 'New icon set for the brand 2025 refresh. Use this for projects using Synergy Major Version 3.0.',
-                            iconset: 'brand2025Icons',
+                            iconset: 'sick2025Icons',
                             title: 'Synergy 2025 Icons',
                         },
                     ], null, 2),

package/dist/utilities/assets.d.ts

@@ -1 +1,2 @@
-export declare const getAssetsMetaData: () => Promise<(import("./metadata.js").MetadataFile | null)[]>;
+import { type Filter } from './metadata.js';
+export declare const getAssetsMetaData: (filter?: Filter) => Promise<(import("./metadata.js").MetadataFile | null)[]>;

package/dist/utilities/assets.js

@@ -1,3 +1,3 @@
 import { assetsPath, } from './config.js';
 import { getStructuredMetaData, } from './metadata.js';
-export const getAssetsMetaData = async () => getStructuredMetaData(assetsPath);
+export const getAssetsMetaData = async (filter) => getStructuredMetaData(assetsPath, filter);

package/metadata/checksum.txt

@@ -1 +1 @@
-48e9a3c531b7ab3b5986ea7e542258f4
+8100ce028a0fb7f45f1ca769f98c0007

package/metadata/packages/assets/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [@synergy-design-system/assets-v1.18.0](https://github.com/synergy-design-system/synergy-design-system/compare/assets/1.17.0...assets/1.18.0) (2025-08-08)
+
+
+### Features
+
+* ✨ syn-icon: Provide a function to switch the icon set to brand2025 ([#974](https://github.com/synergy-design-system/synergy-design-system/issues/974)) ([1482e34](https://github.com/synergy-design-system/synergy-design-system/commit/1482e34f21ce80b9ad6f25e760f87de13d5f70db))
+
 # [@synergy-design-system/assets-v1.17.0](https://github.com/synergy-design-system/synergy-design-system/compare/assets/1.16.1...assets/1.17.0) (2025-07-14)
 
 

package/metadata/packages/assets/README.md

@@ -40,9 +40,10 @@ This package is taking care about getting assets (like logos, system icons and d
 The folder structure of the assets corresponds to the structure of the Figma page.
 
 - **src/component-thumbnails** contains thumbnails from figma components used in Storybook
-- **src/icons:** contains the standard icons based on [Material Icons](https://fonts.google.com/icons)
+- **src/icons:** contains the standard icons based on [Material Icons](https://fonts.google.com/icons) for SICK 2018 brand revision. Use those icons when using Synergy V2
 - **src/logos:** contains the variants of the SICK brand logo
-- **src/system-icons:** contains a small subset of icons, that are internally used by the Synergy components
+- **src/system-icons:** contains a small subset of icons, that are internally used by the Synergy components. Default for Synergy V2.
+- **src/system-icons-sick2025:** contains a small subset of icons, that are internally used by the Synergy components. Used from Synergy V3 onward.
 
 > **Note:** All assets from figma, which should not appear in this package (e.g. documentation), will start with an underscore (e.g. \_my-doc-for-an-asset). This assets are getting filtered and ignored by this package.
 

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

@@ -43,6 +43,15 @@ export default css`
     top: -2px;
   }
 
+  /**
+   * #920: The new icons are instances in figma.
+   * The width of the system icon is 12px x 12px, so there is no inner padding.
+   * To accommodate for this, we need to set the width and height of the icon to 50% to get the same result as before.
+   */
+  .radio__checked-icon {
+    scale: 0.5;
+  }
+
   /* /Fix#456 */
 
   /* Size modifiers */

package/metadata/packages/components/migration/migration-synergy-v3.md

@@ -0,0 +1,50 @@
+# Migration to Synergy 3.0
+
+This document outlines the changes and migration steps required to upgrade from Synergy 2.x to the new Synergy 3.0.
+
+> Please note that this migration is still in progress, and some features may not be fully implemented yet. We recommend reviewing the [GitHub repository](https://github.com/orgs/synergy-design-system/projects/2/views/37) for the latest updates.
+
+## Roadmap
+
+We are currently working on the migration to Synergy 3.0, which includes significant updates to the brand appearance, fonts and icon library.
+This migration will ensure that your application remains up-to-date with the latest design standards and functionality improvements.
+
+It is currently not adviced to use the new version in production, as we are still finalizing the migration process.
+However, you can start preparing your codebase for the upcoming changes.
+
+A roadmap and current status of the migration can be found in our [GitHub repository](https://github.com/orgs/synergy-design-system/projects/2/views/37).
+
+## Breaking Changes
+
+### Icons
+
+#### System Icon Library
+
+Some Synergy components depend on a set of icons that must always be available. To make sure those components display correctly, even if the `@synergy-design-system/assets` package is not installed or configured properly, these icons are baked into Synergies core directly.
+
+Components that use those icons include:
+
+- `<syn-header>`: Uses the SICK logo if not told otherwise
+- `<syn-select>`: Shows a caret sign to indicate the possibility to open the select box.
+- `<syn-alert>`: Shows an "x" icon to be able to close the alert dialog.
+
+As Synergy transitions to the new SICK brand, the icon library has been updated to include a new iconset.
+For backwards compatibility, Synergy will ship two system icon libraries during the 2.0 support cycle.
+For applications that plan to continue using Synergy 2.0, there **are no changes needed** to the icon library.
+For applications that want to use the new icon library, we have added a new utility function `setSystemIconLibrary`.
+After calling this function, the system icon library will be set to the new iconset.
+
+> Make sure to call this function before rendering any components that use the system icon library!
+
+```javascript
+import { setSystemIconLibrary } from "@synergy-design-system/icons";
+setSystemIconLibrary("sick2025");
+```
+
+## Migration Steps
+
+These steps are only needed when switching to the new Synergy 3.0 layout.
+
+1. Always make sure to use the latest versions of the Synergy packages. You can check for updates using your package manager.
+2. Call `setSystemIconLibrary` with `sick2025` to enable the new system icons.
+3. Adjust your bundler to copy the new icons to your build output. This is necessary to ensure that the new icons are available in your application.

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

@@ -1,3 +1,10 @@
+# [@synergy-design-system/components-v2.40.0](https://github.com/synergy-design-system/synergy-design-system/compare/components/2.39.2...components/2.40.0) (2025-08-08)
+
+
+### Features
+
+* ✨ syn-icon: Provide a function to switch the icon set to brand2025 ([#974](https://github.com/synergy-design-system/synergy-design-system/issues/974)) ([1482e34](https://github.com/synergy-design-system/synergy-design-system/commit/1482e34f21ce80b9ad6f25e760f87de13d5f70db))
+
 # [@synergy-design-system/components-v2.39.2](https://github.com/synergy-design-system/synergy-design-system/compare/components/2.39.1...components/2.39.2) (2025-08-05)
 
 

package/metadata/static/migration/index.md

@@ -4,7 +4,13 @@ As an llm, I want you to obey to the following rules:
 
 - The migration is available as a markdown document
 
-The following formatting rules are used for the migration guides:
+The following formatting rules are used for the list of breaking changes:
 
 - Each headline 2 (`##`) defines a major version of the new major release
 - Each headline 3 (`###`) describes a component or feature that was changed
+
+Migration from Synergy 2.0 to Synergy 3.0 (a.k.a. Brand Update):
+
+- There are handwritten lists of changes that highlight the differences between Synergy V2 and Synergy V3.
+- The document is structured as a list of breaking changes.
+- The list of breaking changes is structured into blocks that define the change and a list of migration steps.

package/metadata/static/setup/icon-usage.md

@@ -28,6 +28,29 @@ The default base path of the icon library is set to **assets/icons/**.
 To make the <syn-icon> work out of the box, without configuring anything, the used icons can be copied to this path in you application.
 This can either be done manually or with the help of the bundler.
 
+### Differences in icon usage between Synergy 2.0 and Synergy 3.0
+
+With the upgrade to Synergy 3.0, new icons will be used.
+Those icons are already available as assets in the \`@synergy-design-system/assets\` package.
+When using the new icons, you have to make sure that the icons are available in the \`assets/icons/\` directory of your project as outlined below.
+
+System icons come bundled with the \`@synergy-design-system/components\` package. You may switch to the new icons with the new \`setSystemIconLibrary\` utility provided.
+Please have a look at the following example to see how to switch the icon library.
+Note that if you do not call this function, it will default to the 2018 icon library, which is used in Synergy 2.0 until Synergy 3.0 is released.
+
+```javascript
+import { setSystemIconLibrary } from "@synergy-design-system/components";
+
+// Switch to the 2025 icon library
+setDefaultIconLibrary("sick2025");
+
+// Switch back to the 2018 icon library
+setDefaultIconLibrary("sick2018");
+
+// Switch to the default icon library (2018 for Synergy 2.0, 2025 for Synergy 3.0)
+setDefaultIconLibrary();
+```
+
 #### Angular + Webpack
 
 Including assets from another library can be achieved in angular via configuring the assets configuration in the angular.json file.
@@ -130,6 +153,7 @@ This can be done in multiple ways:
 
 The `createSpriteSheet` function is provided by the `@synergy-design-system/assets` package.
 It takes an array of icon keys and returns a string representation of the SVG sprite sheet, intended to be saved into the file system.
+You may also provide an optional second argument to specify the icon set to use, either `sick2018` or `sick2025`. If not provided, it will default to `sick2018` for Synergy V2 and `sick2025` for Synergy V3.
 As we do not know how exactly you want to use the spritesheet, we will just print it to the console in the following example.
 
 ```typescript
@@ -141,6 +165,14 @@ const icons = [
   "battery_charging_full",
   "notifications",
 ];
+
+// V2 iconsheet
+const sheet = createSpriteSheet(icons, "sick2018");
+
+// V3 iconsheet
+const sheet = createSpriteSheet(icons, "sick2025");
+
+// Automatically chooses the default, depending on the version of Synergy you are using
 const sheet = createSpriteSheet(icons);
 
 console.log(sheet);
@@ -154,7 +186,12 @@ cd my-project
 
 # Create the spritesheet on the command line.
 # You will need to provide a list of icons to include in the spritesheet.
+# Provide the wanted iconset with the --iconset flag.
 # The following command will make sure to save the spritesheet to the file icons.svg
+
+# Generates the icons from the 2025 iconset
+npx syn-create-spritesheet --icons=warning,inventory,battery_charging_full,notifications --iconset=sick2025 > public/icons.svg
+
 npx syn-create-spritesheet --icons=warning,inventory,battery_charging_full,notifications > public/icons.svg
 ```
 

package/package.json

@@ -11,7 +11,7 @@
     "globby": "^14.1.0",
     "serve-handler": "^6.1.6",
     "zod": "^3.25.67",
-    "@synergy-design-system/assets": "1.17.0"
+    "@synergy-design-system/assets": "1.18.0"
   },
   "description": "MCP Server for the Synergy Design System",
   "devDependencies": {
@@ -30,11 +30,11 @@
     "semantic-release-monorepo": "7.0.5",
     "ts-jest": "^29.4.0",
     "typescript": "^5.8.3",
-    "@synergy-design-system/docs": "0.1.0",
-    "@synergy-design-system/styles": "1.7.2",
+    "@synergy-design-system/components": "2.40.0",
     "@synergy-design-system/eslint-config-syn": "^0.1.0",
-    "@synergy-design-system/components": "2.39.2",
-    "@synergy-design-system/tokens": "^2.22.0"
+    "@synergy-design-system/docs": "0.1.0",
+    "@synergy-design-system/tokens": "^2.22.0",
+    "@synergy-design-system/styles": "1.7.2"
   },
   "exports": {
     ".": {
@@ -119,7 +119,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "scripts": {
     "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
     "build:all": "pnpm run build && pnpm run build:storybook",