@synergy-design-system/mcp 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -1,12 +1,34 @@
-# [@synergy-design-system/mcp-v1.2.0](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.1.0...mcp/1.2.0) (2025-08-19)
+# [@synergy-design-system/mcp-v1.3.0](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.2.1...mcp/1.3.0) (2025-08-28)
 
 
 ### Features
 
-* ✨ export new sick2025 themes ([#985](https://github.com/synergy-design-system/synergy-design-system/issues/985)) ([148730d](https://github.com/synergy-design-system/synergy-design-system/commit/148730d68037ea74dc241ca6627aa6a32af876ab))
+* ✨CD update for syn-input ([#1001](https://github.com/synergy-design-system/synergy-design-system/issues/1001)) ([52f42f8](https://github.com/synergy-design-system/synergy-design-system/commit/52f42f8d1f494c54492e54b6ddafc6693dcdb0bb))
+
+# [@synergy-design-system/mcp-v1.2.1](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.2.0...mcp/1.2.1) (2025-08-21)
+
+
+### Bug Fixes
+
+* 🐛  Placeholder is clipped for syn-select multiple ([#992](https://github.com/synergy-design-system/synergy-design-system/issues/992)) ([973933e](https://github.com/synergy-design-system/synergy-design-system/commit/973933e477a2cba1611c2f73f77e4e79d755c8a1))
 
 # Changelog
 
+# [@synergy-design-system/mcp-v1.2.1](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.2.0...mcp/1.2.1) (2025-08-21)
+
+
+### Bug Fixes
+
+* 🐛  Placeholder is clipped for syn-select multiple ([#992](https://github.com/synergy-design-system/synergy-design-system/issues/992)) ([973933e](https://github.com/synergy-design-system/synergy-design-system/commit/973933e477a2cba1611c2f73f77e4e79d755c8a1))
+
+
+# [@synergy-design-system/mcp-v1.2.0](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.1.0...mcp/1.2.0) (2025-08-19)
+
+### Features
+
+* ✨ export new sick2025 themes ([#985](https://github.com/synergy-design-system/synergy-design-system/issues/985)) ([148730d](https://github.com/synergy-design-system/synergy-design-system/commit/148730d68037ea74dc241ca6627aa6a32af876ab))
+
+
 # [@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)
 
 

package/metadata/checksum.txt

@@ -1 +1 @@
-0eb8e8ab1e1e86521a59e32b35d7e39e
+25650d66bb4477440556cdbe37c6229c

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

@@ -381,8 +381,9 @@ export default css`
    * #850: Allow to measure the size of the combobox.
    * This is needed so we can automatically size and truncate the tags in the <syn-combobox multiple> component.
    * Scoped to multiple to not break the single combobox per accident.
+   * Scoped to when placeholder is not visible to not break the placeholder visualization
    */
-  :host([multiple]) .combobox__tags {
+  :host([multiple]) :not(.combobox--placeholder-visible) > .combobox__inputs > .combobox__tags {
     min-width: 100px;
     overflow: hidden;
   }

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

@@ -225,7 +225,7 @@ export default css`
     align-items: center;
     background: none;
     border: none;
-    color: var(--syn-color-primary-600);
+    color: var(--syn-interactive-primary-color);
     cursor: pointer;
     display: flex;
     padding: var(--syn-spacing-x-small);
@@ -245,11 +245,11 @@ export default css`
   }
 
   .input__number-stepper-button:hover:not([disabled]) {
-    color: var(--syn-color-primary-900)
+    color: var(--syn-interactive-primary-color-hover)
   }
 
   .input__number-stepper-button:active:not([disabled]) {
-    color: var(--syn-color-primary-950)
+    color: var(--syn-interactive-primary-color-active)
   }
 
   .input__number-stepper-button[disabled] {

package/metadata/packages/components/components/syn-menu-label/component.angular.ts

@@ -22,14 +22,14 @@ import '@synergy-design-system/components/components/menu-label/menu-label.js';
  * @status stable
  * @since 2.0
  *
- * @dependency syn-divider
- *
  * @slot - The menu label's content.
  *
  * @csspart base - The component's base wrapper.
  * @csspart divider - The divider that is displayed above the content
  * @csspart label - The label that is displayed below the divider
  *
+ * @dependency syn-divider
+ *
  * @cssproperty --display-divider - Display property of the divider. Defaults to "block"
  */
 @Component({

package/metadata/packages/components/components/syn-menu-label/component.react.ts

@@ -16,14 +16,14 @@ Component.define('syn-menu-label');
  * @status stable
  * @since 2.0
  *
- * @dependency syn-divider
- *
  * @slot - The menu label's content.
  *
  * @csspart base - The component's base wrapper.
  * @csspart divider - The divider that is displayed above the content
  * @csspart label - The label that is displayed below the divider
  *
+ * @dependency syn-divider
+ *
  * @cssproperty --display-divider - Display property of the divider. Defaults to "block"
  */
 export const SynMenuLabel = createComponent({

package/metadata/packages/components/components/syn-menu-label/component.ts

@@ -20,14 +20,14 @@ import type { CSSResultGroup } from 'lit';
  * @status stable
  * @since 2.0
  *
- * @dependency syn-divider
- *
  * @slot - The menu label's content.
  *
  * @csspart base - The component's base wrapper.
  * @csspart divider - The divider that is displayed above the content
  * @csspart label - The label that is displayed below the divider
  *
+ * @dependency syn-divider
+ *
  * @cssproperty --display-divider - Display property of the divider. Defaults to "block"
  */
 export default class SynMenuLabel extends SynergyElement {

package/metadata/packages/components/components/syn-menu-label/component.vue

@@ -11,14 +11,14 @@
  * @status stable
  * @since 2.0
  *
- * @dependency syn-divider
- *
  * @slot - The menu label's content.
  *
  * @csspart base - The component's base wrapper.
  * @csspart divider - The divider that is displayed above the content
  * @csspart label - The label that is displayed below the divider
  *
+ * @dependency syn-divider
+ *
  * @cssproperty --display-divider - Display property of the divider. Defaults to "block"
  */
 import { computed, ref } from 'vue';

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

@@ -149,8 +149,9 @@ export default css`
    * #850: Allow to measure the size of the combobox.
    * This is needed so we can automatically size and truncate the tags in the <syn-select multiple> component.
    * Scoped to multiple to not break the single select per accident.
+   * Scoped to when placeholder is not visible to not break the placeholder visualization
    */
-  :host([multiple]) .select__tags {
+  :host([multiple]) :not(.select--placeholder-visible) > .select__combobox > .select__tags {
     min-width: 100px;
     overflow: hidden;
   }

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

@@ -42,9 +42,9 @@ import '@synergy-design-system/components/components/tab-group/tab-group.js';
  * @csspart scroll-button__base - The scroll button's exported `base` part.
  *
  * @cssproperty --indicator-color - The color of the active tab indicator.
- * @cssproperty --indicator-width - The width of the active tab indicator.
  * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).
  * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
+ * @cssproperty --indicator-width - The width of the active tab indicator.
  */
 @Component({
   selector: 'syn-tab-group',

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

@@ -39,9 +39,9 @@ Component.define('syn-tab-group');
  * @csspart scroll-button__base - The scroll button's exported `base` part.
  *
  * @cssproperty --indicator-color - The color of the active tab indicator.
- * @cssproperty --indicator-width - The width of the active tab indicator.
  * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).
  * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
+ * @cssproperty --indicator-width - The width of the active tab indicator.
  */
 export const SynTabGroup = createComponent({
   displayName: 'SynTabGroup',

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

@@ -48,9 +48,9 @@ import type SynTabPanel from '../tab-panel/tab-panel.js';
  * @csspart scroll-button__base - The scroll button's exported `base` part.
  *
  * @cssproperty --indicator-color - The color of the active tab indicator.
- * @cssproperty --indicator-width - The width of the active tab indicator.
  * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).
  * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
+ * @cssproperty --indicator-width - The width of the active tab indicator.
  */
 export default class SynTabGroup extends SynergyElement {
   static styles: CSSResultGroup = [componentStyles, styles, customStyles];

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

@@ -30,9 +30,9 @@
  * @csspart scroll-button__base - The scroll button's exported `base` part.
  *
  * @cssproperty --indicator-color - The color of the active tab indicator.
- * @cssproperty --indicator-width - The width of the active tab indicator.
  * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).
  * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
+ * @cssproperty --indicator-width - The width of the active tab indicator.
  */
 import { computed, ref } from 'vue';
 import '@synergy-design-system/components/components/tab-group/tab-group.js';

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

@@ -133,6 +133,93 @@ To use the new themes in your application:
    };
    ```
 
+### Fonts
+
+The SICK 2025 theme introduces a new typeface called **SICK Intl** that replaces the previously used Open Sans font. When migrating to Synergy 3.0 with the SICK 2025 theme, you'll need to ensure this font is properly loaded in your application.
+
+> **Important**: Synergy does **not provide** the SICK Intl font directly. You need to include it in your own project.
+
+#### Font Requirements
+
+The SICK 2025 theme requires the following font weights:
+
+- **Regular (400)**: Used for standard text content
+- **Semi Bold (600)**: Used for emphasized text and headings
+
+For detailed information about when and how to use the different font styles, refer to the [SICK Brand Portal](https://brand.sick.com/document/145#/basiselemente/typografie/sick-intl).
+
+#### Usage
+
+You have several options to include the SICK Intl font in your project:
+
+##### Option 1: Local Installation
+
+1. Download the `SICK Intl` font from the [SICK Brand Portal](https://brand.sick.com/document/145#/basiselemente/typografie/sick-intl)
+2. Extract the ZIP file to a location accessible by your project (e.g., a `public` folder)
+3. Add the following CSS to your project (replace `PUBLIC_PATH` with your actual path):
+
+```css
+@font-face {
+  font-display: swap;
+  font-family: "SICK Intl";
+  font-style: normal;
+  font-weight: 400;
+  src: url("/PUBLIC_PATH/SICKIntl/SICKIntl-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "SICK Intl";
+  font-style: normal;
+  font-weight: 600;
+  src: url("/PUBLIC_PATH/SICKIntl/SICKIntl-Semibold.ttf") format("truetype");
+}
+```
+
+##### Option 2: Using the SICK CDN
+
+For the quickest setup, load the fonts directly from the SICK CDN:
+
+```css
+/* Regular */
+@font-face {
+  font-display: swap;
+  font-family: "SICK Intl";
+  font-style: normal;
+  font-weight: 400;
+  src:
+    url("https://www.sick.com/media/fonts/sickintl-v1/regular/SICKIntl-Regular.woff2")
+      format("woff2"),
+    url("https://www.sick.com/media/fonts/sickintl-v1/regular/SICKIntl-Regular.ttf")
+      format("truetype");
+}
+
+/* Semi Bold */
+@font-face {
+  font-display: swap;
+  font-family: "SICK Intl";
+  font-style: normal;
+  font-weight: 600;
+  src:
+    url("https://www.sick.com/media/fonts/sickintl-v1/semibold/SICKIntl-Semibold.woff2")
+      format("woff2"),
+    url("https://www.sick.com/media/fonts/sickintl-v1/semibold/SICKIntl-Semibold.ttf")
+      format("truetype");
+}
+```
+
+For better performance, you can also preload the font:
+
+```html
+<link
+  rel="preload"
+  href="https://www.sick.com/media/fonts/sickintl-v1/regular/SICKIntl-Regular.woff2"
+  as="font"
+  type="font/woff2"
+  crossorigin
+/>
+```
+
 ## Migration Steps
 
 These steps are only needed when switching to the new Synergy 3.0 layout.
@@ -142,3 +229,4 @@ These steps are only needed when switching to the new Synergy 3.0 layout.
 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.
 4. **Update CSS theme imports** to use the new `sick2025_light.css` and `sick2025_dark.css` files instead of the legacy theme files.
 5. **Update theme class names** in your JavaScript theme switching logic to use `syn-sick2025-light` and `syn-sick2025-dark`.
+6. **Add the SICK Intl font** by either downloading it locally or using the SICK CDN. Add the required `@font-face` declarations for Regular (400) and Semi Bold (600) weights to ensure proper typography rendering.

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

@@ -1,3 +1,17 @@
+# [@synergy-design-system/components-v2.41.0](https://github.com/synergy-design-system/synergy-design-system/compare/components/2.40.1...components/2.41.0) (2025-08-28)
+
+
+### Features
+
+* ✨CD update for syn-input ([#1001](https://github.com/synergy-design-system/synergy-design-system/issues/1001)) ([52f42f8](https://github.com/synergy-design-system/synergy-design-system/commit/52f42f8d1f494c54492e54b6ddafc6693dcdb0bb))
+
+# [@synergy-design-system/components-v2.40.1](https://github.com/synergy-design-system/synergy-design-system/compare/components/2.40.0...components/2.40.1) (2025-08-21)
+
+
+### Bug Fixes
+
+* 🐛  Placeholder is clipped for syn-select multiple ([#992](https://github.com/synergy-design-system/synergy-design-system/issues/992)) ([973933e](https://github.com/synergy-design-system/synergy-design-system/commit/973933e477a2cba1611c2f73f77e4e79d755c8a1))
+
 # [@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)
 
 

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

@@ -246,3 +246,47 @@ All shoelace files are per default readonly and are disabled from being changed.
 ### Adding events to the output
 
 To add events to the component output, make sure to add them to `src/scripts/vendorism.js` into the `events` array that is defined there. After a new build run `via pnpm build`, you will see the new event files and the `events/events.ts` file will be regenerated.
+
+### Adding metadata to components
+
+Components can be enriched with metadata that automatically generates JSDoc annotations during the build process. The `add-metadata-to-components.js` script processes `*.component.ts` files and looks for corresponding `metadata.json` files to inject JSDoc tags.
+
+#### Supported metadata types
+
+- `@animation` - Component animations
+- `@event` - Custom events
+- `@slot` - Content slots
+- `@dependency` - Dependencies
+- `@csspart` - CSS parts for styling
+- `@cssproperty` - CSS custom properties
+
+#### Usage
+
+Create a `metadata.json` file in your component directory:
+
+```json
+{
+  "@event": [
+    { "name": "syn-change", "description": "Emitted when value changes" }
+  ],
+  "@slot": [{ "name": "default", "description": "Main content" }],
+  "@csspart": [{ "name": "base", "description": "Base wrapper" }]
+}
+```
+
+This will generate the following JSDoc annotations in your component:
+
+```typescript
+/**
+ * @summary Your component description
+ *
+ * @event syn-change - Emitted when value changes
+ * @slot default - Main content
+ * @csspart base - Base wrapper
+ */
+export default class YourComponent extends SynergyElement {
+  // Component implementation...
+}
+```
+
+Each metadata object requires a `name` property and optionally accepts a `description`. Run `pnpm vendor.set` to process the metadata and automatically add JSDoc annotations to your component's class comment.

package/metadata/packages/tokens/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [@synergy-design-system/tokens-v2.24.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.23.0...tokens/2.24.0) (2025-08-28)
+
+
+### Features
+
+* ✨CD update for syn-input ([#1001](https://github.com/synergy-design-system/synergy-design-system/issues/1001)) ([52f42f8](https://github.com/synergy-design-system/synergy-design-system/commit/52f42f8d1f494c54492e54b6ddafc6693dcdb0bb))
+
 # [@synergy-design-system/tokens-v2.23.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.22.0...tokens/2.23.0) (2025-08-19)
 
 

package/metadata/packages/tokens/dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.22.0
+ * @synergy-design-system/tokens version 2.23.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -179,6 +179,12 @@
   --syn-input-spacing-medium: var(--syn-spacing-medium);
   --syn-input-spacing-small: var(--syn-spacing-small);
   --syn-input-width: var(--syn-border-width-small);
+  --syn-interactive-primary-color: var(--syn-color-primary-600);
+  --syn-interactive-primary-color-active: var(--syn-color-neutral-950);
+  --syn-interactive-primary-color-hover: var(--syn-color-primary-900);
+  --syn-interactive-secondary-color: var(--syn-color-neutral-950);
+  --syn-interactive-secondary-color-active: var(--syn-color-primary-600);
+  --syn-interactive-secondary-color-hover: var(--syn-color-primary-600);
   --syn-letter-spacing-dense: -0.24px; /** Shoelace compatibility DO NOT USE */
   --syn-letter-spacing-denser: -0.48px; /** Shoelace compatibility DO NOT USE */
   --syn-letter-spacing-loose: 1.2px; /** Shoelace compatibility DO NOT USE */

package/metadata/packages/tokens/index.js

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.22.0
+ * @synergy-design-system/tokens version 2.23.0
  * SICK Global UX Foundation
  */
 
@@ -863,6 +863,36 @@ export const SynInputSpacingSmall = 'var(--syn-input-spacing-small)';
  */
 export const SynInputWidth = 'var(--syn-input-width)';
 
+/**
+ * @type {string}
+ */
+export const SynInteractivePrimaryColor = 'var(--syn-interactive-primary-color)';
+
+/**
+ * @type {string}
+ */
+export const SynInteractivePrimaryColorActive = 'var(--syn-interactive-primary-color-active)';
+
+/**
+ * @type {string}
+ */
+export const SynInteractivePrimaryColorHover = 'var(--syn-interactive-primary-color-hover)';
+
+/**
+ * @type {string}
+ */
+export const SynInteractiveSecondaryColor = 'var(--syn-interactive-secondary-color)';
+
+/**
+ * @type {string}
+ */
+export const SynInteractiveSecondaryColorActive = 'var(--syn-interactive-secondary-color-active)';
+
+/**
+ * @type {string}
+ */
+export const SynInteractiveSecondaryColorHover = 'var(--syn-interactive-secondary-color-hover)';
+
 /**
  * @type {string}
  */

package/metadata/packages/tokens/light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.22.0
+ * @synergy-design-system/tokens version 2.23.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -179,6 +179,12 @@
   --syn-input-spacing-medium: var(--syn-spacing-medium);
   --syn-input-spacing-small: var(--syn-spacing-small);
   --syn-input-width: var(--syn-border-width-small);
+  --syn-interactive-primary-color: var(--syn-color-primary-600);
+  --syn-interactive-primary-color-active: var(--syn-color-neutral-950);
+  --syn-interactive-primary-color-hover: var(--syn-color-primary-900);
+  --syn-interactive-secondary-color: var(--syn-color-neutral-950);
+  --syn-interactive-secondary-color-active: var(--syn-color-primary-600);
+  --syn-interactive-secondary-color-hover: var(--syn-color-primary-600);
   --syn-letter-spacing-dense: -0.24px; /** Shoelace compatibility DO NOT USE */
   --syn-letter-spacing-denser: -0.48px; /** Shoelace compatibility DO NOT USE */
   --syn-letter-spacing-loose: 1.2px; /** Shoelace compatibility DO NOT USE */

package/metadata/packages/tokens/sick2018_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.22.0
+ * @synergy-design-system/tokens version 2.23.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -179,6 +179,12 @@
   --syn-input-spacing-medium: var(--syn-spacing-medium);
   --syn-input-spacing-small: var(--syn-spacing-small);
   --syn-input-width: var(--syn-border-width-small);
+  --syn-interactive-primary-color: var(--syn-color-primary-600);
+  --syn-interactive-primary-color-active: var(--syn-color-neutral-950);
+  --syn-interactive-primary-color-hover: var(--syn-color-primary-900);
+  --syn-interactive-secondary-color: var(--syn-color-neutral-950);
+  --syn-interactive-secondary-color-active: var(--syn-color-primary-600);
+  --syn-interactive-secondary-color-hover: var(--syn-color-primary-600);
   --syn-letter-spacing-dense: -0.24px; /** Shoelace compatibility DO NOT USE */
   --syn-letter-spacing-denser: -0.48px; /** Shoelace compatibility DO NOT USE */
   --syn-letter-spacing-loose: 1.2px; /** Shoelace compatibility DO NOT USE */

package/metadata/packages/tokens/sick2018_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.22.0
+ * @synergy-design-system/tokens version 2.23.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -179,6 +179,12 @@
   --syn-input-spacing-medium: var(--syn-spacing-medium);
   --syn-input-spacing-small: var(--syn-spacing-small);
   --syn-input-width: var(--syn-border-width-small);
+  --syn-interactive-primary-color: var(--syn-color-primary-600);
+  --syn-interactive-primary-color-active: var(--syn-color-neutral-950);
+  --syn-interactive-primary-color-hover: var(--syn-color-primary-900);
+  --syn-interactive-secondary-color: var(--syn-color-neutral-950);
+  --syn-interactive-secondary-color-active: var(--syn-color-primary-600);
+  --syn-interactive-secondary-color-hover: var(--syn-color-primary-600);
   --syn-letter-spacing-dense: -0.24px; /** Shoelace compatibility DO NOT USE */
   --syn-letter-spacing-denser: -0.48px; /** Shoelace compatibility DO NOT USE */
   --syn-letter-spacing-loose: 1.2px; /** Shoelace compatibility DO NOT USE */

package/metadata/packages/tokens/sick2025_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.22.0
+ * @synergy-design-system/tokens version 2.23.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -117,25 +117,25 @@
   --syn-font-weight-light: 400; /** Shoelace compatibility DO NOT USE */
   --syn-font-weight-normal: 400;
   --syn-font-weight-semibold: 600;
-  --syn-input-background-color: var(--syn-color-neutral-0);
+  --syn-input-background-color: var(--syn-color-neutral-50);
   --syn-input-background-color-disabled: var(--syn-input-background-color);
   --syn-input-background-color-focus: var(--syn-input-background-color);
   --syn-input-background-color-hover: var(--syn-input-background-color);
-  --syn-input-border-color: var(--syn-color-neutral-700);
-  --syn-input-border-color-disabled: var(--syn-color-neutral-700);
-  --syn-input-border-color-focus: var(--syn-color-neutral-950);
-  --syn-input-border-color-focus-error: var(--syn-color-error-700);
-  --syn-input-border-color-hover: var(--syn-color-neutral-950);
-  --syn-input-border-radius-large: var(--syn-border-radius-none);
-  --syn-input-border-radius-medium: var(--syn-border-radius-none);
-  --syn-input-border-radius-small: var(--syn-border-radius-none);
+  --syn-input-border-color: var(--syn-color-neutral-1000);
+  --syn-input-border-color-disabled: var(--syn-color-neutral-1000);
+  --syn-input-border-color-focus: var(--syn-color-primary-500);
+  --syn-input-border-color-focus-error: var(--syn-color-error-600);
+  --syn-input-border-color-hover: var(--syn-color-primary-500);
+  --syn-input-border-radius-large: var(--syn-border-radius-medium);
+  --syn-input-border-radius-medium: var(--syn-border-radius-medium);
+  --syn-input-border-radius-small: var(--syn-border-radius-medium);
   --syn-input-border-width: 1px;
-  --syn-input-color: var(--syn-color-neutral-950);
-  --syn-input-color-disabled: var(--syn-color-neutral-950);
-  --syn-input-color-focus: var(--syn-color-neutral-950);
-  --syn-input-color-hover: var(--syn-color-neutral-950);
+  --syn-input-color: var(--syn-color-neutral-1000);
+  --syn-input-color-disabled: var(--syn-color-neutral-1000);
+  --syn-input-color-focus: var(--syn-color-neutral-1000);
+  --syn-input-color-hover: var(--syn-color-neutral-1000);
   --syn-input-disabled-opacity: 0.5;
-  --syn-input-focus-ring-color: var(--syn-color-primary-400);
+  --syn-input-focus-ring-color: var(--syn-color-primary-700);
   --syn-input-focus-ring-error: var(--syn-color-error-400);
   --syn-input-focus-ring-offset: 0px;
   --syn-input-font-family: var(--syn-font-sans);
@@ -147,31 +147,31 @@
   --syn-input-height-medium: var(--syn-spacing-2x-large);
   --syn-input-height-small: 36px;
   --syn-input-help-text-color: var(--syn-color-neutral-800);
-  --syn-input-help-text-color-error: var(--syn-color-error-700);
+  --syn-input-help-text-color-error: var(--syn-color-error-600);
   --syn-input-help-text-font-size-large: var(--syn-font-size-medium);
   --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
   --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
-  --syn-input-icon-color: var(--syn-color-neutral-800);
-  --syn-input-icon-color-focus: var(--syn-color-neutral-800);
-  --syn-input-icon-color-hover: var(--syn-color-neutral-800);
-  --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-500);
-  --syn-input-icon-icon-clearable-color-focus: var(--syn-color-neutral-500);
-  --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-500);
-  --syn-input-label-color: var(--syn-color-neutral-950);
+  --syn-input-icon-color: var(--syn-color-neutral-1000);
+  --syn-input-icon-color-focus: var(--syn-color-neutral-1000);
+  --syn-input-icon-color-hover: var(--syn-color-neutral-1000);
+  --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-600);
+  --syn-input-icon-icon-clearable-color-focus: var(--syn-color-neutral-600);
+  --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-600);
+  --syn-input-label-color: var(--syn-color-neutral-1000);
   --syn-input-label-font-size-large: var(--syn-font-size-large);
   --syn-input-label-font-size-medium: var(--syn-font-size-medium);
   --syn-input-label-font-size-small: var(--syn-font-size-small);
   --syn-input-letter-spacing: normal;
-  --syn-input-placeholder-color: var(--syn-color-neutral-500);
-  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
+  --syn-input-placeholder-color: var(--syn-color-neutral-800);
+  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-800);
   --syn-input-readonly-color: var(--syn-color-neutral-800);
   --syn-input-readonly-color-disabled: var(--syn-color-neutral-800);
   --syn-input-readonly-color-focus: var(--syn-color-neutral-950);
   --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
-  --syn-input-readonly-background-color: var(--syn-color-neutral-50);
-  --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-50);
-  --syn-input-readonly-background-color-focus: var(--syn-color-neutral-50);
-  --syn-input-readonly-background-color-hover: var(--syn-color-neutral-50);
+  --syn-input-readonly-background-color: var(--syn-color-neutral-100);
+  --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-100);
+  --syn-input-readonly-background-color-focus: var(--syn-color-neutral-100);
+  --syn-input-readonly-background-color-hover: var(--syn-color-neutral-100);
   --syn-input-required-content: "*";
   --syn-input-required-content-color: var(--syn-input-label-color);
   --syn-input-required-content-offset: -2px;
@@ -179,6 +179,12 @@
   --syn-input-spacing-medium: var(--syn-spacing-medium);
   --syn-input-spacing-small: var(--syn-spacing-small);
   --syn-input-width: var(--syn-border-width-small);
+  --syn-interactive-primary-color: var(--syn-color-primary-500);
+  --syn-interactive-primary-color-active: var(--syn-color-neutral-1000);
+  --syn-interactive-primary-color-hover: var(--syn-color-primary-900);
+  --syn-interactive-secondary-color: var(--syn-color-neutral-1000);
+  --syn-interactive-secondary-color-active: var(--syn-color-primary-500);
+  --syn-interactive-secondary-color-hover: var(--syn-color-primary-500);
   --syn-letter-spacing-dense: normal; /** Shoelace compatibility DO NOT USE */
   --syn-letter-spacing-denser: normal; /** Shoelace compatibility DO NOT USE */
   --syn-letter-spacing-loose: normal; /** Shoelace compatibility DO NOT USE */

package/metadata/packages/tokens/sick2025_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.22.0
+ * @synergy-design-system/tokens version 2.23.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -121,22 +121,22 @@
   --syn-input-background-color-disabled: var(--syn-input-background-color);
   --syn-input-background-color-focus: var(--syn-input-background-color);
   --syn-input-background-color-hover: var(--syn-input-background-color);
-  --syn-input-border-color: var(--syn-color-neutral-700);
-  --syn-input-border-color-disabled: var(--syn-color-neutral-700);
-  --syn-input-border-color-focus: var(--syn-color-neutral-950);
-  --syn-input-border-color-focus-error: var(--syn-color-error-700);
-  --syn-input-border-color-hover: var(--syn-color-neutral-950);
-  --syn-input-border-radius-large: var(--syn-border-radius-none);
-  --syn-input-border-radius-medium: var(--syn-border-radius-none);
-  --syn-input-border-radius-small: var(--syn-border-radius-none);
+  --syn-input-border-color: var(--syn-color-neutral-950);
+  --syn-input-border-color-disabled: var(--syn-color-neutral-950);
+  --syn-input-border-color-focus: var(--syn-color-primary-700);
+  --syn-input-border-color-focus-error: var(--syn-color-error-600);
+  --syn-input-border-color-hover: var(--syn-color-primary-700);
+  --syn-input-border-radius-large: var(--syn-border-radius-medium);
+  --syn-input-border-radius-medium: var(--syn-border-radius-medium);
+  --syn-input-border-radius-small: var(--syn-border-radius-medium);
   --syn-input-border-width: 1px;
   --syn-input-color: var(--syn-color-neutral-950);
   --syn-input-color-disabled: var(--syn-color-neutral-950);
   --syn-input-color-focus: var(--syn-color-neutral-950);
   --syn-input-color-hover: var(--syn-color-neutral-950);
   --syn-input-disabled-opacity: 0.5;
-  --syn-input-focus-ring-color: var(--syn-color-primary-400);
-  --syn-input-focus-ring-error: var(--syn-color-error-400);
+  --syn-input-focus-ring-color: var(--syn-color-primary-500);
+  --syn-input-focus-ring-error: var(--syn-color-error-500);
   --syn-input-focus-ring-offset: 0px;
   --syn-input-font-family: var(--syn-font-sans);
   --syn-input-font-size-large: var(--syn-font-size-large);
@@ -146,14 +146,14 @@
   --syn-input-height-large: var(--syn-spacing-3x-large);
   --syn-input-height-medium: var(--syn-spacing-2x-large);
   --syn-input-height-small: 36px;
-  --syn-input-help-text-color: var(--syn-color-neutral-800);
-  --syn-input-help-text-color-error: var(--syn-color-error-700);
+  --syn-input-help-text-color: var(--syn-color-neutral-700);
+  --syn-input-help-text-color-error: var(--syn-color-error-600);
   --syn-input-help-text-font-size-large: var(--syn-font-size-medium);
   --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
   --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
-  --syn-input-icon-color: var(--syn-color-neutral-800);
-  --syn-input-icon-color-focus: var(--syn-color-neutral-800);
-  --syn-input-icon-color-hover: var(--syn-color-neutral-800);
+  --syn-input-icon-color: var(--syn-color-neutral-950);
+  --syn-input-icon-color-focus: var(--syn-color-neutral-950);
+  --syn-input-icon-color-hover: var(--syn-color-neutral-950);
   --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-500);
   --syn-input-icon-icon-clearable-color-focus: var(--syn-color-neutral-500);
   --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-500);
@@ -162,16 +162,16 @@
   --syn-input-label-font-size-medium: var(--syn-font-size-medium);
   --syn-input-label-font-size-small: var(--syn-font-size-small);
   --syn-input-letter-spacing: normal;
-  --syn-input-placeholder-color: var(--syn-color-neutral-500);
-  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
+  --syn-input-placeholder-color: var(--syn-color-neutral-700);
+  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-700);
   --syn-input-readonly-color: var(--syn-color-neutral-800);
   --syn-input-readonly-color-disabled: var(--syn-color-neutral-800);
   --syn-input-readonly-color-focus: var(--syn-color-neutral-950);
   --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
-  --syn-input-readonly-background-color: var(--syn-color-neutral-50);
-  --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-50);
-  --syn-input-readonly-background-color-focus: var(--syn-color-neutral-50);
-  --syn-input-readonly-background-color-hover: var(--syn-color-neutral-50);
+  --syn-input-readonly-background-color: #f8f7f6;
+  --syn-input-readonly-background-color-disabled: #f8f7f6;
+  --syn-input-readonly-background-color-focus: #f8f7f6;
+  --syn-input-readonly-background-color-hover: #f8f7f6;
   --syn-input-required-content: "*";
   --syn-input-required-content-color: var(--syn-input-label-color);
   --syn-input-required-content-offset: -2px;
@@ -179,6 +179,12 @@
   --syn-input-spacing-medium: var(--syn-spacing-medium);
   --syn-input-spacing-small: var(--syn-spacing-small);
   --syn-input-width: var(--syn-border-width-small);
+  --syn-interactive-primary-color: var(--syn-color-primary-700);
+  --syn-interactive-primary-color-active: var(--syn-color-neutral-950);
+  --syn-interactive-primary-color-hover: var(--syn-color-primary-900);
+  --syn-interactive-secondary-color: var(--syn-color-neutral-950);
+  --syn-interactive-secondary-color-active: var(--syn-color-primary-700);
+  --syn-interactive-secondary-color-hover: var(--syn-color-primary-700);
   --syn-letter-spacing-dense: normal; /** Shoelace compatibility DO NOT USE */
   --syn-letter-spacing-denser: normal; /** Shoelace compatibility DO NOT USE */
   --syn-letter-spacing-loose: normal; /** Shoelace compatibility DO NOT USE */

package/metadata/static/components/syn-combobox/docs.md

@@ -2277,7 +2277,15 @@ It is possible to add options dynamically to the combobox e.g. if the option val
     id="syn-combobox-option-2"
     >Option 3</syn-option
   >
-</syn-combobox>
+  <syn-option
+    role="option"
+    aria-selected="false"
+    id="syn-combobox-option-3"
+    aria-disabled="false"
+    value=""
+    >Option 4</syn-option
+  ></syn-combobox
+>
 ```
 
 ---

package/metadata/static/components/syn-input/docs.md

@@ -147,7 +147,7 @@ Use the disabled attribute to disable an input.
   form=""
 >
   <syn-icon
-    name="house"
+    name="home"
     slot="prefix"
     aria-hidden="true"
     library="default"
@@ -380,6 +380,7 @@ Use to customize the way form controls are drawn. This example uses CSS grid to
 
   .label-on-left::part(form-control-label) {
     text-align: right;
+    margin-bottom: 0;
   }
 
   .label-on-left::part(form-control-help-text) {
@@ -445,6 +446,7 @@ The numeric-strategy property defines how numeric input is handled during user i
   size="medium"
   form=""
 ></syn-input>
+<br />
 <syn-input
   label="Modern (min and max)"
   max="10"

package/metadata/static/setup/prerequisites.md

@@ -2,14 +2,24 @@
 
 ## Fonts
 
-The Synergy Design System makes use of the `Open Sans` typeface.
+Depending on the used theme (either SICK 2018 or SICK 2025) the Synergy Design System makes use of a specific typeface:
+
+| Theme     | Typeface    |
+| --------- | ----------- |
+| SICK 2018 | `Open Sans` |
+| SICK 2025 | `SICK Intl` |
+
+For the SICK 2025 theme there are some rules, how and when to use the different styles (like regular, semi-bold, bold, ...). For more information about this, have a look at the [SICK Brand Portal](https://brand.sick.com/document/145#/basiselemente/typografie/sick-intl).
+
 Because there are various ways of loading fonts, depending on used bundler, pre- and postprocessors and usage of a CDN, Synergy does **not provide** this font.
 You need to include it into your own project.
 
-The following information may be helpful to get you started including your own copy of `Open Sans` in your project for quicker bootstrapping:
+The following information may be helpful to get you started including your own copy of `Open Sans` or `SICK Intl` in your project for quicker bootstrapping:
 
 ### Local Installation
 
+#### SICK 2018
+
 1. Download the `Open Sans` font from the [SICK Brand Portal](https://brand.sick.com/document/49#/-/resources-1).
 2. Extract the ZIP file to a destination reachable by your project (e.g. a `public` folder).
 3. Include the font in your project by adding the following CSS to your project (where `PUBLIC_PATH` is the path to the folder containing the font files).
@@ -65,8 +75,34 @@ The following information may be helpful to get you started including your own c
 }
 ```
 
+#### SICK 2025
+
+1. Download the `SICK Intl` font from the [SICK Brand Portal](https://brand.sick.com/document/145#/basiselemente/typografie/sick-intl).
+2. Extract the ZIP file to a destination reachable by your project (e.g. a `public` folder).
+3. Include the font in your project by adding the following CSS to your project (where `PUBLIC_PATH` is the path to the folder containing the font files).
+
+```css
+@font-face {
+  font-display: swap;
+  font-family: "SICK Intl";
+  font-style: normal;
+  font-weight: 400;
+  src: url("/PUBLIC_PATH/SICKIntl/SICKIntl-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "SICK Intl";
+  font-style: normal;
+  font-weight: 600;
+  src: url("/PUBLIC_PATH/SICKIntl/SICKIntl-Semibold.ttf") format("truetype");
+}
+```
+
 ### Installing via local npm package (e.g. for vite or webpack based setups)
 
+#### SICK 2018
+
 1. Install the `@fontsource/open-sans` package into your project.
 2. Include the font in your project by adding the following import statements to your project:
 
@@ -79,8 +115,14 @@ import "@fontsource/open-sans/700.css";
 import "@fontsource/open-sans/700-italic.css";
 ```
 
+#### SICK 2025
+
+There is no way to install the `SICK Intl` typeface via a npm package as it is not available.
+
 ### Installing via local npm package (angular)
 
+#### SICK 2018
+
 1. Install the `@fontsource/open-sans` package into your project.
 2. Adjust your `angular.json` file to include the needed stylesheets (where project_name is the name of your project):
 
@@ -107,9 +149,15 @@ import "@fontsource/open-sans/700-italic.css";
 }
 ```
 
+#### SICK 2025
+
+There is no way to install the `SICK Intl` typeface via a npm package as it is not available.
+
 ### Using the SICK CDN
 
-This is the simplest default font behavior. The `Open Sans` font is loaded from the SICK CDN.
+This is the simplest default font behavior. The typefaces are loaded from the SICK CDN.
+
+#### SICK 2018
 
 ```css
 /* Regular */
@@ -119,11 +167,11 @@ This is the simplest default font behavior. The `Open Sans` font is loaded from
   font-style: normal;
   font-weight: 400;
   src:
-    url("https://cdn.sick.com/media/fonts/opensans-v1/Regular/OpenSans-Regular.woff2")
+    url("https://www.sick.com/media/fonts/opensans-v1/Regular/OpenSans-Regular.woff2")
       format("woff2"),
-    url("https://cdn.sick.com/media/fonts/opensans-v1/Regular/OpenSans-Regular.woff")
+    url("https://www.sick.com/media/fonts/opensans-v1/Regular/OpenSans-Regular.woff")
       format("woff"),
-    url("https://cdn.sick.com/media/fonts/opensans-v1/Regular/OpenSans-Regular.ttf")
+    url("https://www.sick.com/media/fonts/opensans-v1/Regular/OpenSans-Regular.ttf")
       format("truetype");
 }
 
@@ -134,11 +182,11 @@ This is the simplest default font behavior. The `Open Sans` font is loaded from
   font-style: normal;
   font-weight: 600;
   src:
-    url("https://cdn.sick.com/media/fonts/opensans-v1/SemiBold/OpenSans-SemiBold.woff2")
+    url("https://www.sick.com/media/fonts/opensans-v1/SemiBold/OpenSans-SemiBold.woff2")
       format("woff2"),
-    url("https://cdn.sick.com/media/fonts/opensans-v1/SemiBold/OpenSans-SemiBold.woff")
+    url("https://www.sick.com/media/fonts/opensans-v1/SemiBold/OpenSans-SemiBold.woff")
       format("woff"),
-    url("https://cdn.sick.com/media/fonts/opensans-v1/SemiBold/OpenSans-SemiBold.ttf")
+    url("https://www.sick.com/media/fonts/opensans-v1/SemiBold/OpenSans-SemiBold.ttf")
       format("truetype");
 }
 
@@ -149,11 +197,54 @@ This is the simplest default font behavior. The `Open Sans` font is loaded from
   font-style: normal;
   font-weight: 700;
   src:
-    url("https://cdn.sick.com/media/fonts/opensans-v1/Bold/OpenSans-Bold.woff2")
+    url("https://www.sick.com/media/fonts/opensans-v1/Bold/OpenSans-Bold.woff2")
       format("woff2"),
-    url("https://cdn.sick.com/media/fonts/opensans-v1/Bold/OpenSans-Bold.woff")
+    url("https://www.sick.com/media/fonts/opensans-v1/Bold/OpenSans-Bold.woff")
       format("woff"),
-    url("https://cdn.sick.com/media/fonts/opensans-v1/Bold/OpenSans-Bold.ttf")
+    url("https://www.sick.com/media/fonts/opensans-v1/Bold/OpenSans-Bold.ttf")
+      format("truetype");
+}
+```
+
+For better performance, you may also add the following statement to your HTML:
+
+```html
+<link
+  rel="preload"
+  href="https://www.sick.com/media/fonts/opensans-v1/Regular/OpenSans-Regular.woff2"
+  as="font"
+  type="font/woff2"
+  crossorigin
+/>
+```
+
+#### SICK 2025
+
+```css
+/* Regular */
+@font-face {
+  font-display: swap;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  src:
+    url("https://www.sick.com/media/fonts/sickintl-v1/regular/SICKIntl-Regular.woff2")
+      format("woff2"),
+    url("https://www.sick.com/media/fonts/sickintl-v1/regular/SICKIntl-Regular.ttf")
+      format("truetype");
+}
+
+/* Semi Bold */
+@font-face {
+  font-display: swap;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  src:
+    url("https://www.sick.com/media/fonts/sickintl-v1/semibold/SICKIntl-Semibold.woff2")
+      format("woff2"),
+    format("woff"),
+    url("https://www.sick.com/media/fonts/sickintl-v1/semibold/SICKIntl-Semibold.ttf")
       format("truetype");
 }
 ```
@@ -163,7 +254,7 @@ For better performance, you may also add the following statement to your HTML:
 ```html
 <link
   rel="preload"
-  href="https://cdn.sick.com/media/fonts/opensans-v1/Regular/OpenSans-Regular.woff2"
+  href="https://www.sick.com/media/fonts/sickintl-v1/regular/SICKIntl-Regular.woff2"
   as="font"
   type="font/woff2"
   crossorigin

package/package.json

@@ -15,6 +15,9 @@
   },
   "description": "MCP Server for the Synergy Design System",
   "devDependencies": {
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/exec": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
     "@types/jest": "^30.0.0",
     "@types/node": "^22.15.32",
     "@types/serve-handler": "^6.1.4",
@@ -31,10 +34,10 @@
     "ts-jest": "^29.4.0",
     "typescript": "^5.8.3",
     "@synergy-design-system/docs": "0.1.0",
-    "@synergy-design-system/components": "2.40.0",
-    "@synergy-design-system/styles": "1.7.2",
+    "@synergy-design-system/components": "2.41.0",
     "@synergy-design-system/eslint-config-syn": "^0.1.0",
-    "@synergy-design-system/tokens": "^2.23.0"
+    "@synergy-design-system/styles": "1.7.2",
+    "@synergy-design-system/tokens": "^2.24.0"
   },
   "exports": {
     ".": {
@@ -92,7 +95,7 @@
       [
         "@semantic-release/exec",
         {
-          "prepareCmd": "pnpm build && git add . && git commit -m 'chore(release/mcp) Automatic data update [skip actions]'"
+          "prepareCmd": "pnpm build && git add ./metadata && git diff --cached --quiet ./metadata || git commit -m 'chore(release/mcp) Automatic data update [skip actions]'"
         }
       ],
       [
@@ -119,7 +122,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "scripts": {
     "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
     "build:all": "pnpm run build && pnpm run build:storybook",