@synergy-design-system/mcp 1.37.0 → 1.38.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## 1.38.1
+
+### Patch Changes
+
+- [#1133](https://github.com/synergy-design-system/synergy-design-system/pull/1133) [`82ea066`](https://github.com/synergy-design-system/synergy-design-system/commit/82ea066fa18e35831d94f22c7ac620135bc8c334) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-12-15
+
+  fix: 🐛 syn menu submenu rounding (#1131)
+
+  Fixes an issue with `<syn-menu-item>` when rendering submenus.
+  Submenus did not take the changed `border-radius` of `<syn-menu>` into account, leading to squared borders in the `SICK 2025` themes.
+
+## 1.38.0
+
+### Minor Changes
+
+- [#1129](https://github.com/synergy-design-system/synergy-design-system/pull/1129) [`102e650`](https://github.com/synergy-design-system/synergy-design-system/commit/102e6503af3a72d0d2529ed216ce6053a07b9607) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-12-12
+
+  feat: ✨ syn alert add sizes (#1119)
+
+  We have added a new property `size` to `<syn-alert>` that can be set to `small`, `medium` (the default) and `large`.
+  The property can also be used with Synergy `defaultSettings`.
+
+  We also adjusted `<syn-validate>` to draw the `size` attribute of its `slotted` `HTMLInputElement`. If a `size` property is found on the rendered input, it will be forwarded to the rendered `<syn-alert>` if you use `variant="inline"`.
+
 ## 1.37.0
 
 ### Minor Changes

package/metadata/checksum.txt

@@ -1 +1 @@
-c3be5df393f0cfe6983d43863f357b7e
+ad66baabe30abdbbfb394f24e54b654b

package/metadata/packages/components/components/syn-alert/component.angular.ts

@@ -131,6 +131,17 @@ the alert will not close on its own.
     return this.nativeElement.duration;
   }
 
+  /**
+   * The alert's size.
+   */
+  @Input()
+  set size(v: SynAlert['size']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.size = v));
+  }
+  get size(): SynAlert['size'] {
+    return this.nativeElement.size;
+  }
+
   /**
    * Emitted when the alert opens.
    */

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

@@ -8,14 +8,23 @@ export default css`
     --variant-color-icon: var(--syn-alert-informative-color-icon, var(--syn-color-primary-600));
     --variant-color-indicator: var(--syn-alert-informative-color-indicator, var(--syn-color-primary-600));
 
+    /* Defines special settings for sizes */
+    --size-font-size: var(--syn-font-size-medium);
+    --size-icon-size: var(--syn-font-size-x-large);
+    --size-min-height: 54px;
+    --size-message-padding: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-medium) var(--syn-spacing-medium);
+    --size-icon-padding-block: var(--syn-spacing-medium);
+    --size-icon-padding-inline: var(--syn-spacing-medium);
+
     background-color: var(--variant-color-background);
     border: var(--syn-panel-border-width) solid var(--variant-color-border);
     border-left: 0;
     border-radius: var(--syn-border-radius-none);
+    box-sizing: content-box;
     color: var(--syn-typography-color-text);
-    font-size: var(--syn-font-size-medium);
+    font-size: var(--size-font-size);
     line-height: var(--syn-line-height-normal);
-    min-height: 56px;
+    min-height: var(--size-min-height);
   }
 
   /**
@@ -43,11 +52,12 @@ export default css`
   .alert__icon,
   .alert__close-button {
     align-items: flex-start;
-    font-size: var(--syn-font-size-x-large);
+    font-size: var(--size-icon-size);
   }
 
   .alert__message {
-    padding: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-medium) var(--syn-spacing-medium);
+    align-self: center;
+    padding: var(--size-message-padding);
   }
 
   /**
@@ -55,15 +65,14 @@ export default css`
    */
   .alert__icon {
     color: var(--variant-color-icon);
-    padding-block: var(--syn-spacing-medium);
-    padding-inline-start: var(--syn-spacing-medium);
+    padding-block-start: var(--size-icon-padding-block);
+    padding-inline-start: var(--size-icon-padding-inline);
   }
 
   /**
    * Close Icon
    */
   .alert__close-button {
-    align-self: start;
     color: var(--syn-typography-color-text);
     margin-block: calc(var(--syn-spacing-x-small) - var(--syn-panel-border-width));
     margin-inline-end: var(--syn-spacing-x-small);
@@ -99,4 +108,28 @@ export default css`
     --variant-color-icon: var(--syn-alert-error-color-icon, var(--syn-color-error-600));
     --variant-color-indicator: var(--syn-alert-error-color-indicator, var(--syn-color-error-600));
   }
+
+  /* #1119: Alert Sizes */
+  .alert--small {
+    --size-font-size: var(--syn-font-size-small);
+    --size-icon-size: var(--syn-font-size-large);
+    --size-min-height: 44px;
+    --size-message-padding: var(--syn-spacing-small) var(--syn-spacing-large) var(--syn-spacing-small) var(--syn-spacing-small);
+    --size-icon-padding-block: var(--syn-spacing-small);
+    --size-icon-padding-inline: var(--syn-spacing-small);
+  }
+
+  /* Adjust close button size for small alerts */
+  .alert--small .alert__close-button {
+    font-size: var(--syn-font-size-medium);
+  }
+
+  .alert--large {
+    --size-font-size: var(--syn-font-size-large);
+    --size-icon-size: var(--syn-font-size-2x-large);
+    --size-min-height: 68px;
+    --size-message-padding: var(--syn-spacing-medium-large) var(--syn-spacing-large) var(--syn-spacing-medium-large) var(--syn-spacing-medium-large);
+    --size-icon-padding-block: var(--syn-spacing-medium-large);
+    --size-icon-padding-inline: var(--syn-spacing-medium-large);
+  }
 `;

package/metadata/packages/components/components/syn-alert/component.ts

@@ -94,6 +94,9 @@ export default class SynAlert extends SynergyElement {
    */
   @property({ type: Number }) duration = Infinity;
 
+  /** The alert's size. */
+  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
+
   /**
    * Enables a countdown that indicates the remaining time the alert will be displayed.
    * Typically used to indicate the remaining time before a whole app refresh.
@@ -253,6 +256,9 @@ export default class SynAlert extends SynergyElement {
         class=${classMap({
           alert: true,
           'alert--open': this.open,
+          'alert--small': this.size === 'small',
+          'alert--medium': this.size === 'medium',
+          'alert--large': this.size === 'large',
           'alert--closable': this.closable,
           'alert--has-icon': this.hasSlotController.test('icon'),
           'alert--primary': this.variant === 'primary',

package/metadata/packages/components/components/syn-alert/component.vue

@@ -74,6 +74,11 @@ the alert before it closes (e.g.
 the alert will not close on its own.
  */
   duration?: SynAlert['duration'];
+
+  /**
+   * The alert's size.
+   */
+  size?: SynAlert['size'];
 }>();
 
 // Make sure prop binding only forwards the props that are actually there.

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

@@ -160,4 +160,9 @@ export default css`
   :host(:not([type="checkmark"]):not([loading])) .menu-item__label {
     min-height: var(--syn-font-size-x-large);
   }
+
+  /* #1131: Make sure that slotted menus do show the correct border radius */
+  syn-popup::part(popup) {
+    border-radius: var(--syn-input-border-radius-medium);
+  }
 `;

package/metadata/packages/components/components/syn-validate/component.ts

@@ -1,14 +1,18 @@
 import type { CSSResultGroup, PropertyValues } from 'lit';
 import { html } from 'lit';
 import { property, queryAssignedElements, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import componentStyles from '../../styles/component.styles.js';
 import SynergyElement from '../../internal/synergy-element.js';
+import type SynInput from '../input/input.component.js';
 import { watch } from '../../internal/watch.js';
 import SynAlert from '../alert/alert.component.js';
 import {
+  alertSizeForInput,
   getEventNameForElement,
   isBlurEvent,
   isInvalidEvent,
+  isSynergyElement,
   normalizeEventAttribute,
 } from './utility.js';
 import styles from './validate.styles.js';
@@ -43,6 +47,8 @@ export default class SynValidate extends SynergyElement {
 
   observer: MutationObserver;
 
+  sizeObserver: MutationObserver;
+
   @queryAssignedElements() private slottedChildren: HTMLElement[];
 
   @state() validationMessage = '';
@@ -53,6 +59,8 @@ export default class SynValidate extends SynergyElement {
 
   @state() isValid = true;
 
+  @state() alertSize?: SynInput['size'];
+
   /**
    * The variant that should be used to show validation alerts.
    *
@@ -150,6 +158,10 @@ export default class SynValidate extends SynergyElement {
     return input ? input as HTMLInputElement : undefined;
   }
 
+  private setAlertSize() {
+    this.alertSize = alertSizeForInput(this.getInput());
+  }
+
   /**
    * Get the event names to listen for.
    * If the input is a synergy element, will use syn- prefixes.
@@ -289,7 +301,7 @@ export default class SynValidate extends SynergyElement {
     }
 
     const input = e.currentTarget as HTMLInputElement;
-    if (input instanceof SynergyElement) {
+    if (isSynergyElement(input)) {
       // When using a synergy element, we need to wait for it to be ready!
       // This is needed as the validity state of the element may not be set yet.
       await input.updateComplete;
@@ -331,7 +343,7 @@ export default class SynValidate extends SynergyElement {
     const input = this.getInput();
 
     if (this.customValidationMessage) {
-      if (input instanceof SynergyElement) {
+      if (isSynergyElement(input)) {
         await input.updateComplete;
       }
       input?.setCustomValidity(this.customValidationMessage);
@@ -348,6 +360,34 @@ export default class SynValidate extends SynergyElement {
   connectedCallback() {
     super.connectedCallback();
 
+    // #1119: Update alert size when the input size changes
+    // Note that we need to create our own observer here,
+    // as the size attribute may be changed on the input element directly,
+    // which would not be captured by the synergy-element observer.
+    this.sizeObserver = new MutationObserver(entries => {
+      const input = this.getInput();
+
+      if (!input) {
+        return;
+      }
+
+      const hasSizeChanged = entries
+        .filter(({ target }) => target === input)
+        .every(
+          entry => entry.attributeName === 'size',
+        );
+
+      if (hasSizeChanged) {
+        this.setAlertSize();
+      }
+    });
+
+    this.sizeObserver.observe(this, {
+      attributeFilter: ['size'],
+      attributes: true,
+      subtree: true,
+    });
+
     // #717: Make sure to remove to rerun validation when
     // disabled or readonly properties change on the input
     this.observer = new MutationObserver(entries => {
@@ -357,10 +397,9 @@ export default class SynValidate extends SynergyElement {
         return;
       }
 
+      // Check if the input is disabled or readonly
       const hasDisabledOrReadonly = entries
-        // Only check for changes on the input element
         .filter(({ target }) => target === input)
-        // Check if the input is disabled or readonly
         .every(entry => {
           const target = entry.target as HTMLInputElement;
           return target.hasAttribute('disabled') || target.hasAttribute('readonly');
@@ -373,7 +412,7 @@ export default class SynValidate extends SynergyElement {
         // When using a synergy element, we need to check the validity after the element is updated,
         // as we cannot rely on the validity state of the element itself.
         // Unfortunately, this depends on used browser :(.
-        const waitForPromise = input instanceof SynergyElement
+        const waitForPromise = isSynergyElement(input)
           ? input.updateComplete
           : Promise.resolve();
 
@@ -396,6 +435,7 @@ export default class SynValidate extends SynergyElement {
     super.disconnectedCallback();
     this.controller.abort();
     this?.observer?.disconnect();
+    this?.sizeObserver?.disconnect();
   }
 
   private renderInlineValidation() {
@@ -408,6 +448,7 @@ export default class SynValidate extends SynergyElement {
         open
         exportparts="base:alert__base,message:alert__message,icon:alert__icon"
         part="alert"
+        size=${ifDefined(this.alertSize)}
         variant="danger"
       >
         ${!this.hideIcon

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

@@ -1,15 +1,22 @@
-# Synergy 3.0 Migration Guide
+# Migration to SICK 2025
 
-> ⚠️ **Migration in progress:** Some features may not be fully implemented yet. See the [GitHub migration board](https://github.com/orgs/synergy-design-system/projects/2/views/37) for updates.
-
-> It is currently not advised to use the new version in production, as we are still finalizing the migration process.
+> ⚠️ **Update in progress:** Some features may not be fully implemented yet. See the [GitHub SICK 2025 theme update board](https://github.com/orgs/synergy-design-system/projects/2/views/37) for updates.
+>
+> It is currently not advised to use the new version in production, as we are still finalizing the update process.
 > However, you can start preparing your codebase for the upcoming changes.
 
+This guide details all steps that are needed to migrate from the SICK 2018 to the new SICK 2025 theme.
+This guide assumes you are using Synergy version 2.
+Synergy version 3 will apply most manual steps outlined in this guide automatically.
+
 ---
 
 ## Migration Checklist: Quick Overview
 
-- [ ] Update Synergy packages to the latest version
+- [ ] Update `@synergy-design-system/components` to the latest stable 2.x version (e.g. `"^2.0.0"`)
+- [ ] Update `@synergy-design-system/tokens` to the latest stable 2.x version (e.g. `"^2.0.0"`)
+- [ ] Update `@synergy-design-system/assets` to the latest stable 1.x version (e.g. `"^1.0.0"`)
+- [ ] Update `@synergy-design-system/styles` to the latest stable 1.x version (e.g. `"^1.0.0"`)
 - [ ] Call `setSystemIconLibrary('sick2025')` before rendering components
 - [ ] Copy new icons to `/assets/icons/`
 - [ ] Import new CSS themes (`sick2025_light.css`, `sick2025_dark.css`)
@@ -18,7 +25,7 @@
 
 ---
 
-## Release Highlights: Synergy 3.0
+## Release Highlights: SICK 2025
 
 - **Brand appearance:** Updated colors, roundings, and overall look
 - **Fonts:** New SICK Intl font replaces Open Sans
@@ -306,7 +313,7 @@ setSystemIconLibrary("sick2025");
 
 ### Reference: Tokens & Themes
 
-Synergy 3.0 introduces new CSS theme files that implement the updated SICK brand appearance:
+The Synergy tokens package introduces new CSS theme files that implement the updated SICK brand appearance:
 
 - **`sick2025_light.css`**: The new light theme featuring the SICK 2025 brand identity
 - **`sick2025_dark.css`**: The new dark theme featuring the SICK 2025 brand identity
@@ -325,7 +332,7 @@ To use the new themes in your application:
 1. **Replace theme imports** in your HTML or CSS:
 
    ```javascript
-   // New Synergy 3.0 themes
+   // New Synergy SICK 2025 themes
    import "@synergy-design-system/tokens/themes/sick2025_light.css";
    import "@synergy-design-system/tokens/themes/sick2025_dark.css";
    ```
@@ -354,7 +361,7 @@ To use the new themes in your application:
 
 ### Reference: SICK Intl 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.
+The SICK 2025 theme introduces a new typeface called **SICK Intl** that replaces the previously used Open Sans font. When migrating to the SICK 2025 theme, you'll need to ensure this font is properly loaded in your application.
 
 > **Important**: The SICK Intl font is now provided via the dedicated `@synergy-design-system/fonts` package for easy integration.
 
@@ -469,7 +476,7 @@ For better performance, you can also preload the font:
 
 ## Migration Steps
 
-These steps are only needed when switching to the new Synergy 3.0 layout.
+These steps are only needed when switching to the new SICK 2025 theme.
 
 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.

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

@@ -1,5 +1,29 @@
 # Changelog
 
+## 2.74.1
+
+### Patch Changes
+
+- [#1133](https://github.com/synergy-design-system/synergy-design-system/pull/1133) [`82ea066`](https://github.com/synergy-design-system/synergy-design-system/commit/82ea066fa18e35831d94f22c7ac620135bc8c334) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-12-15
+
+  fix: 🐛 syn menu submenu rounding (#1131)
+
+  Fixes an issue with `<syn-menu-item>` when rendering submenus.
+  Submenus did not take the changed `border-radius` of `<syn-menu>` into account, leading to squared borders in the `SICK 2025` themes.
+
+## 2.74.0
+
+### Minor Changes
+
+- [#1129](https://github.com/synergy-design-system/synergy-design-system/pull/1129) [`102e650`](https://github.com/synergy-design-system/synergy-design-system/commit/102e6503af3a72d0d2529ed216ce6053a07b9607) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-12-12
+
+  feat: ✨ syn alert add sizes (#1119)
+
+  We have added a new property `size` to `<syn-alert>` that can be set to `small`, `medium` (the default) and `large`.
+  The property can also be used with Synergy `defaultSettings`.
+
+  We also adjusted `<syn-validate>` to draw the `size` attribute of its `slotted` `HTMLInputElement`. If a `size` property is found on the rendered input, it will be forwarded to the rendered `<syn-alert>` if you use `variant="inline"`.
+
 ## 2.73.0
 
 ### Minor Changes

package/metadata/packages/tokens/dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.45.0
+ * @synergy-design-system/tokens version 2.46.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/metadata/packages/tokens/index.js

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.45.0
+ * @synergy-design-system/tokens version 2.46.0
  * SICK Global UX Foundation
  */
 

package/metadata/packages/tokens/light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.45.0
+ * @synergy-design-system/tokens version 2.46.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/metadata/packages/tokens/sick2018_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.45.0
+ * @synergy-design-system/tokens version 2.46.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/metadata/packages/tokens/sick2018_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.45.0
+ * @synergy-design-system/tokens version 2.46.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/metadata/packages/tokens/sick2025_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.45.0
+ * @synergy-design-system/tokens version 2.46.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/metadata/packages/tokens/sick2025_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.45.0
+ * @synergy-design-system/tokens version 2.46.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

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

@@ -3,7 +3,7 @@
 Alerts are used to display important messages inline or as toast notifications.
 
 ```html
-<syn-alert open="" variant="primary">
+<syn-alert open="" variant="primary" size="medium">
   This is a standard alert. You can customize its content and even the icon.
   <syn-icon
     slot="icon"
@@ -24,7 +24,7 @@ Set the variant attribute to change the alert’s variant.
 <div
   style="display: flex; flex-direction: column; gap: var(--syn-spacing-medium)"
 >
-  <syn-alert variant="primary" open="" id="something">
+  <syn-alert variant="primary" open="" id="something" size="medium">
     <syn-icon
       slot="icon"
       name="info"
@@ -35,7 +35,7 @@ Set the variant attribute to change the alert’s variant.
     You can tell by how pretty the alert is.
   </syn-alert>
 
-  <syn-alert variant="success" open="">
+  <syn-alert variant="success" open="" size="medium">
     <syn-icon
       slot="icon"
       name="check_circle"
@@ -46,7 +46,7 @@ Set the variant attribute to change the alert’s variant.
     You can safely exit the app now.
   </syn-alert>
 
-  <syn-alert variant="neutral" open="">
+  <syn-alert variant="neutral" open="" size="medium">
     <syn-icon
       slot="icon"
       name="settings"
@@ -57,7 +57,7 @@ Set the variant attribute to change the alert’s variant.
     Settings will take effect on next login.
   </syn-alert>
 
-  <syn-alert variant="warning" open="">
+  <syn-alert variant="warning" open="" size="medium">
     <syn-icon
       slot="icon"
       name="warning"
@@ -68,7 +68,7 @@ Set the variant attribute to change the alert’s variant.
     Please login again to continue.
   </syn-alert>
 
-  <syn-alert variant="danger" open="">
+  <syn-alert variant="danger" open="" size="medium">
     <syn-icon
       slot="icon"
       name="status-error"
@@ -93,7 +93,13 @@ Set the variant attribute to change the alert’s variant.
 Add the closable attribute to show a close button that will hide the alert.
 
 ```html
-<syn-alert variant="primary" open="" closable="" class="alert-closable">
+<syn-alert
+  variant="primary"
+  open=""
+  closable=""
+  class="alert-closable"
+  size="medium"
+>
   <syn-icon
     slot="icon"
     name="info"
@@ -111,13 +117,58 @@ Add the closable attribute to show a close button that will hide the alert.
 Icons are optional. Simply omit the icon slot if you don’t want them.
 
 ```html
-<syn-alert variant="primary" open="">
+<syn-alert variant="primary" open="" size="medium">
   Nothing fancy here, just a simple alert.
 </syn-alert>
 ```
 
 ---
 
+## Sizes
+
+Use the size attribute to change an alert’s size.
+
+```html
+<div
+  style="display: flex; flex-direction: column; gap: var(--syn-spacing-large)"
+>
+  <syn-alert variant="primary" open="" size="small">
+    <syn-icon
+      slot="icon"
+      name="info"
+      aria-hidden="true"
+      library="default"
+    ></syn-icon>
+    <strong>This is size small</strong><br />
+    Nothing fancy here, just a simple alert.
+  </syn-alert>
+
+  <syn-alert variant="primary" open="" size="medium">
+    <syn-icon
+      slot="icon"
+      name="info"
+      aria-hidden="true"
+      library="default"
+    ></syn-icon>
+    <strong>This is size medium</strong><br />
+    Nothing fancy here, just a simple alert.
+  </syn-alert>
+
+  <syn-alert variant="primary" open="" size="large">
+    <syn-icon
+      slot="icon"
+      name="info"
+      aria-hidden="true"
+      library="default"
+    ></syn-icon>
+    <strong>This is size large</strong><br />
+    Nothing fancy here, just a simple alert.
+  </syn-alert>
+</div>
+```
+
+---
+
 ## Duration
 
 Set the duration attribute to automatically hide an alert after a period of time. This is useful for alerts that don’t require acknowledgement.
@@ -126,7 +177,7 @@ Set the duration attribute to automatically hide an alert after a period of time
 <div class="alert-duration">
   <syn-button variant="outline" title="" size="medium">Show Alert</syn-button>
 
-  <syn-alert variant="primary" duration="3000" closable="">
+  <syn-alert variant="primary" duration="3000" closable="" size="medium">
     <syn-icon
       slot="icon"
       name="info"
@@ -161,7 +212,7 @@ To display an alert as a toast notification, or “toast”, create the alert an
     <syn-button title="" variant="outline" size="medium">Danger</syn-button>
   </div>
 
-  <syn-alert variant="primary" duration="3000" closable="">
+  <syn-alert variant="primary" duration="3000" closable="" size="medium">
     <syn-icon
       slot="icon"
       name="info"
@@ -172,7 +223,7 @@ To display an alert as a toast notification, or “toast”, create the alert an
     You can tell by how pretty the alert is.
   </syn-alert>
 
-  <syn-alert variant="success" duration="3000" closable="">
+  <syn-alert variant="success" duration="3000" closable="" size="medium">
     <syn-icon
       slot="icon"
       name="check_circle"
@@ -183,7 +234,7 @@ To display an alert as a toast notification, or “toast”, create the alert an
     You can safely exit the app now.
   </syn-alert>
 
-  <syn-alert variant="neutral" duration="3000" closable="">
+  <syn-alert variant="neutral" duration="3000" closable="" size="medium">
     <syn-icon
       slot="icon"
       name="settings"
@@ -194,7 +245,7 @@ To display an alert as a toast notification, or “toast”, create the alert an
     Settings will take effect on next login.
   </syn-alert>
 
-  <syn-alert variant="warning" duration="3000" closable="">
+  <syn-alert variant="warning" duration="3000" closable="" size="medium">
     <syn-icon
       slot="icon"
       name="warning"
@@ -205,7 +256,7 @@ To display an alert as a toast notification, or “toast”, create the alert an
     Please login again to continue.
   </syn-alert>
 
-  <syn-alert variant="danger" duration="3000" closable="">
+  <syn-alert variant="danger" duration="3000" closable="" size="medium">
     <syn-icon
       slot="icon"
       name="status-error"

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

@@ -84,6 +84,59 @@ Use hide-icon to hide the icon in inline style. This is especially useful when s
 
 ---
 
+## Sizes
+
+In development use the size attribute of the form element e.g. syn-input to set the size of the inline syn-validate automatically.
+
+```html
+<form id="components-syn-validate--sizes-validate-demo-form">
+  <div
+    style="display: flex; flex-direction: column; gap: var(--syn-spacing-large)"
+  >
+    <syn-validate eager="" variant="inline" on="">
+      <syn-input
+        label="Inline Validation"
+        type="email"
+        value="team(at)synergy.com"
+        size="small"
+        title=""
+        form=""
+      ></syn-input>
+    </syn-validate>
+
+    <syn-validate eager="" variant="inline" on="">
+      <syn-input
+        label="Inline Validation"
+        type="email"
+        value="team(at)synergy.com"
+        size="medium"
+        title=""
+        form=""
+      ></syn-input>
+    </syn-validate>
+
+    <syn-validate eager="" variant="inline" on="">
+      <syn-input
+        label="Inline Validation"
+        type="email"
+        value="team(at)synergy.com"
+        size="large"
+        title=""
+        form=""
+      ></syn-input>
+    </syn-validate>
+  </div>
+
+  <p>
+    <syn-button type="submit" title="" variant="outline" size="medium"
+      >Submit</syn-button
+    >
+  </p>
+</form>
+```
+
+---
+
 ## Live
 
 Use the live value for the on attribute to validate on every input change (e. g. typing a character or checking a checkbox.) instead of form submit. This will automatically bind to the input and blur events.👨‍💻 Additional developer Information:Please ensure, that you really need live validation for your use case as this can have implications on accessibility.

package/package.json

@@ -28,10 +28,10 @@
     "serve-handler": "^6.1.6",
     "ts-jest": "^29.4.0",
     "typescript": "^5.9.3",
-    "@synergy-design-system/docs": "0.1.0",
-    "@synergy-design-system/components": "2.73.0",
+    "@synergy-design-system/components": "2.74.1",
     "@synergy-design-system/eslint-config-syn": "^0.1.0",
     "@synergy-design-system/styles": "1.9.0",
+    "@synergy-design-system/docs": "0.1.0",
     "@synergy-design-system/fonts": "1.0.0",
     "@synergy-design-system/tokens": "^2.46.0"
   },
@@ -67,7 +67,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "1.37.0",
+  "version": "1.38.1",
   "scripts": {
     "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
     "build:all": "pnpm run build && pnpm run build:storybook",