@synergy-design-system/mcp 2.13.4 → 2.14.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## 2.14.1
+
+### Patch Changes
+
+- [#1252](https://github.com/synergy-design-system/synergy-design-system/pull/1252) [`9d36167`](https://github.com/synergy-design-system/synergy-design-system/commit/9d36167d35ebbdd43820d520140d6823e1331ea1) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-04-20
+
+  fix: 🐛 syn-dialog has broken scrolling when slotting scrollable children (#1249)
+
+## 2.14.0
+
+### Minor Changes
+
+- [#1247](https://github.com/synergy-design-system/synergy-design-system/pull/1247) [`b3ab501`](https://github.com/synergy-design-system/synergy-design-system/commit/b3ab50132ec4ab770b79fa32b1334a1054c60746) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-04-15
+
+  feat: ✨ Updates to the Synergy translation System (#452, #1242, #1248)
+
+  This release adds translations for all officially supported languages, as well as documentation about how to use Synergies translation system.
+  It also removes unneeded dependencies from the components package:
+  - `@shoelace-style/translate` has reached end of live. We forked the original code to make sure it receives updates in Synergy if needed.
+  - `@shoelace-style/animation` was never used internally.
+
 ## 2.13.4
 
 ### Patch Changes

package/metadata/checksum.txt

@@ -1 +1 @@
-d1dbcb89316700587875bfb327172531
+b270e08896f2966f7f6efa8f2dbde907

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

@@ -1,39 +1,35 @@
-/* eslint-disable */
 import { css } from 'lit';
 
 export default css`
-	/* stylelint-disable */
   :host {
     --width: 31rem;
-    --header-spacing: var(--syn-spacing-large);
-    --body-spacing: var(--syn-spacing-large);
-    --footer-spacing: var(--syn-spacing-large);
+    --header-spacing: var(--syn-spacing-large) var(--syn-spacing-x-small) var(--syn-spacing-large) var(--syn-spacing-large);
+    --body-spacing: var(--syn-spacing-medium) var(--syn-spacing-large);
+    --footer-spacing: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-large) var(--syn-spacing-medium);
 
     display: contents;
   }
 
   .dialog {
-    display: flex;
     align-items: center;
+    display: flex;
+    inset: 0;
     justify-content: center;
     position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
     z-index: var(--syn-z-index-dialog);
   }
 
   .dialog__panel {
+    background-color: var(--syn-panel-background-color);
+    border: var(--syn-spacing-4x-small) solid var(--syn-panel-border-color);
+    border-radius: var(--syn-border-radius-none);
+    box-shadow: var(--syn-shadow-large);
     display: flex;
     flex-direction: column;
-    z-index: 2;
-    width: var(--width);
-    max-width: calc(100% - var(--syn-spacing-2x-large));
     max-height: calc(100% - var(--syn-spacing-2x-large));
-    background-color: var(--syn-panel-background-color);
-    border-radius: var(--syn-border-radius-medium);
-    box-shadow: var(--syn-shadow-x-large);
+    max-width: calc(100% - var(--syn-spacing-2x-large));
+    width: var(--width);
+    z-index: 2;
   }
 
   .dialog__panel:focus {
@@ -41,7 +37,7 @@ export default css`
   }
 
   /* Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone) */
-  @media screen and (max-width: 420px) {
+  @media screen and (width <= 420px) {
     .dialog__panel {
       max-height: 80vh;
     }
@@ -53,48 +49,62 @@ export default css`
   }
 
   .dialog__header {
-    flex: 0 0 auto;
     display: flex;
+    flex: 0 0 auto;
   }
 
   .dialog__title {
     flex: 1 1 auto;
     font: inherit;
-    font-size: var(--syn-font-size-large);
-    line-height: var(--syn-line-height-dense);
-    padding: var(--header-spacing);
+    font-family: var(--syn-font-sans);
+    font-size: var(--syn-font-size-x-large);
+    font-weight: var(--syn-font-weight-bold);
+    line-height: var(--syn-line-height-normal);
     margin: 0;
+    padding: var(--header-spacing);
   }
 
   .dialog__header-actions {
-    flex-shrink: 0;
+    align-items: flex-start;
     display: flex;
+    flex-shrink: 0;
     flex-wrap: wrap;
+    gap: var(--syn-spacing-x-small);
     justify-content: end;
-    gap: var(--syn-spacing-2x-small);
-    padding: 0 var(--header-spacing);
+    padding: var(--syn-spacing-large) var(--syn-spacing-small) var(--syn-spacing-large) 0;
+  }
+
+  /**
+   * We need this to make sure we are big enough as defined in the layout
+   * When omitting this statement, we will get rounding problems via line-height
+   */
+  .dialog__title,
+  .dialog__header-actions {
+    min-height: 88px;
   }
 
   .dialog__header-actions syn-icon-button,
   .dialog__header-actions ::slotted(syn-icon-button) {
-    flex: 0 0 auto;
-    display: flex;
     align-items: center;
-    font-size: var(--syn-font-size-medium);
+    color: var(--syn-color-neutral-950);
+    display: flex;
+    flex: 0 0 auto;
+    font-size: var(--syn-font-size-x-large);
   }
 
   .dialog__body {
-    flex: 1 1 auto;
     display: block;
-    padding: var(--body-spacing);
+    flex: 1 1 auto;
     overflow: auto;
     -webkit-overflow-scrolling: touch;
+    padding: var(--body-spacing);
+    will-change: transform; /* #1249: Fixes Chrome scroll issues when using multiple scrollable items as content */
   }
 
   .dialog__footer {
     flex: 0 0 auto;
-    text-align: right;
     padding: var(--footer-spacing);
+    text-align: right;
   }
 
   .dialog__footer ::slotted(syn-button:not(:first-of-type)) {
@@ -106,12 +116,10 @@ export default css`
   }
 
   .dialog__overlay {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    backdrop-filter: blur(var(--syn-overlay-background-blur)); /* #946: Add background blur for sick 2025 */
     background-color: var(--syn-overlay-background-color);
+    inset: 0;
+    position: fixed;
   }
 
   @media (forced-colors: active) {

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

@@ -1,14 +1,15 @@
-/* eslint-disable */
+/* eslint-disable @typescript-eslint/no-floating-promises */
+import { classMap } from 'lit/directives/class-map.js';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { property, query } from 'lit/decorators.js';
+import type { CSSResultGroup } from 'lit';
 import { animateTo, stopAnimations } from '../../internal/animate.js';
 import { blurActiveElement } from '../../internal/closeActiveElement.js';
-import { classMap } from 'lit/directives/class-map.js';
 import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';
 import { HasSlotController } from '../../internal/slot.js';
-import { html } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeController } from '../../utilities/localize.js';
 import { lockBodyScrolling, unlockBodyScrolling } from '../../internal/scroll.js';
-import { property, query } from 'lit/decorators.js';
 import { waitForEvent } from '../../internal/event.js';
 import { watch } from '../../internal/watch.js';
 import componentStyles from '../../styles/component.styles.js';
@@ -16,8 +17,6 @@ import Modal from '../../internal/modal.js';
 import SynergyElement from '../../internal/synergy-element.js';
 import SynIconButton from '../icon-button/icon-button.component.js';
 import styles from './dialog.styles.js';
-import customStyles from './dialog.custom.styles.js';
-import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
@@ -70,26 +69,33 @@ import type { CSSResultGroup } from 'lit';
  *   the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Synergy's focus trapping.
  */
 export default class SynDialog extends SynergyElement {
-  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
+  static styles: CSSResultGroup = [componentStyles, styles];
+
   static dependencies = {
-    'syn-icon-button': SynIconButton
+    'syn-icon-button': SynIconButton,
   };
 
   private readonly hasSlotController = new HasSlotController(this, 'footer');
+
   private readonly localize = new LocalizeController(this);
+
   private originalTrigger: HTMLElement | null;
+
   public modal = new Modal(this);
+
   private closeWatcher: CloseWatcher | null;
 
   @query('.dialog') dialog: HTMLElement;
+
   @query('.dialog__panel') panel: HTMLElement;
+
   @query('.dialog__overlay') overlay: HTMLElement;
 
   /**
    * Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can
    * use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.
    */
-  @property({ type: Boolean, reflect: true }) open = false;
+  @property({ reflect: true, type: Boolean }) open = false;
 
   /**
    * The dialog's label as displayed in the header. You should always include a relevant label even when using
@@ -101,7 +107,7 @@ export default class SynDialog extends SynergyElement {
    * Disables the header. This will also remove the default close button, so please ensure you provide an easy,
    * accessible way for users to dismiss the dialog.
    */
-  @property({ attribute: 'no-header', type: Boolean, reflect: true }) noHeader = false;
+  @property({ attribute: 'no-header', reflect: true, type: Boolean }) noHeader = false;
 
   firstUpdated() {
     this.dialog.hidden = !this.open;
@@ -123,7 +129,7 @@ export default class SynDialog extends SynergyElement {
   private requestClose(source: 'close-button' | 'keyboard' | 'overlay') {
     const slRequestClose = this.emit('syn-request-close', {
       cancelable: true,
-      detail: { source }
+      detail: { source },
     });
 
     if (slRequestClose.defaultPrevented) {
@@ -205,7 +211,7 @@ export default class SynDialog extends SynergyElement {
       const overlayAnimation = getAnimation(this, 'dialog.overlay.show', { dir: this.localize.dir() });
       await Promise.all([
         animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),
-        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)
+        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options),
       ]);
 
       this.emit('syn-after-show');
@@ -229,7 +235,7 @@ export default class SynDialog extends SynergyElement {
         }),
         animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {
           this.panel.hidden = true;
-        })
+        }),
       ]);
 
       this.dialog.hidden = true;
@@ -271,13 +277,14 @@ export default class SynDialog extends SynergyElement {
   }
 
   render() {
+    /* eslint-disable lit-a11y/click-events-have-key-events */
     return html`
       <div
         part="base"
         class=${classMap({
           dialog: true,
+          'dialog--has-footer': this.hasSlotController.test('footer'),
           'dialog--open': this.open,
-          'dialog--has-footer': this.hasSlotController.test('footer')
         })}
       >
         <div part="overlay" class="dialog__overlay" @click=${() => this.requestClose('overlay')} tabindex="-1"></div>
@@ -324,36 +331,37 @@ export default class SynDialog extends SynergyElement {
         </div>
       </div>
     `;
+    /* eslint-enable lit-a11y/click-events-have-key-events */
   }
 }
 
 setDefaultAnimation('dialog.show', {
   keyframes: [
     { opacity: 0, scale: 0.8 },
-    { opacity: 1, scale: 1 }
+    { opacity: 1, scale: 1 },
   ],
-  options: { duration: 250, easing: 'ease' }
+  options: { duration: 250, easing: 'ease' },
 });
 
 setDefaultAnimation('dialog.hide', {
   keyframes: [
     { opacity: 1, scale: 1 },
-    { opacity: 0, scale: 0.8 }
+    { opacity: 0, scale: 0.8 },
   ],
-  options: { duration: 250, easing: 'ease' }
+  options: { duration: 250, easing: 'ease' },
 });
 
 setDefaultAnimation('dialog.denyClose', {
   keyframes: [{ scale: 1 }, { scale: 1.02 }, { scale: 1 }],
-  options: { duration: 250 }
+  options: { duration: 250 },
 });
 
 setDefaultAnimation('dialog.overlay.show', {
   keyframes: [{ opacity: 0 }, { opacity: 1 }],
-  options: { duration: 250 }
+  options: { duration: 250 },
 });
 
 setDefaultAnimation('dialog.overlay.hide', {
   keyframes: [{ opacity: 1 }, { opacity: 0 }],
-  options: { duration: 250 }
+  options: { duration: 250 },
 });

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

@@ -1,5 +1,34 @@
 # Changelog
 
+## 3.11.1
+
+### Patch Changes
+
+- [#1252](https://github.com/synergy-design-system/synergy-design-system/pull/1252) [`9d36167`](https://github.com/synergy-design-system/synergy-design-system/commit/9d36167d35ebbdd43820d520140d6823e1331ea1) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-04-20
+
+  fix: 🐛 syn-dialog has broken scrolling when slotting scrollable children (#1249)
+
+- Updated dependencies []:
+  - @synergy-design-system/tokens@3.11.1
+
+## 3.11.0
+
+### Minor Changes
+
+- [#1247](https://github.com/synergy-design-system/synergy-design-system/pull/1247) [`b3ab501`](https://github.com/synergy-design-system/synergy-design-system/commit/b3ab50132ec4ab770b79fa32b1334a1054c60746) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-04-15
+
+  feat: ✨ Updates to the Synergy translation System (#452, #1242, #1248)
+
+  This release adds translations for all officially supported languages, as well as documentation about how to use Synergies translation system.
+  It also removes unneeded dependencies from the components package:
+  - `@shoelace-style/translate` has reached end of live. We forked the original code to make sure it receives updates in Synergy if needed.
+  - `@shoelace-style/animation` was never used internally.
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @synergy-design-system/tokens@3.11.0
+
 ## 3.10.5
 
 ### Patch Changes
@@ -71,62 +100,6 @@
   This release adds the possiblity to use `<syn-divider>` as a separator between items in the `<syn-header>` metanavigation.
   It will automatically set the correct `height` on vertically aligned `<syn-dividers>`.
 
-  You may use it via:
-
-  ```html
-  <syn-header label="App Name">
-    <nav slot="meta-navigation">
-      <syn-icon-button
-        name="settings_outline"
-        label="Settings"
-      ></syn-icon-button>
-      <syn-icon-button
-        name="insert_chart_outlined"
-        label="Analytics"
-      ></syn-icon-button>
-      <syn-divider vertical></syn-divider>
-      <syn-icon-button name="dark_mode" label="Dark Mode"></syn-icon-button>
-      <syn-divider vertical></syn-divider>
-      <syn-icon-button name="language" label="Language"></syn-icon-button>
-      <syn-icon-button name="login" label="Login"></syn-icon-button>
-    </nav>
-  </syn-header>
-  ```
-
-  or via directly slotting the `<syn-divider>` via
-
-  ```html
-  <syn-header label="App Name">
-    <syn-icon-button
-      slot="meta-navigation"
-      name="settings_outline"
-      label="Settings"
-    ></syn-icon-button>
-    <syn-icon-button
-      slot="meta-navigation"
-      name="insert_chart_outlined"
-      label="Analytics"
-    ></syn-icon-button>
-    <syn-divider vertical slot="meta-navigation"></syn-divider>
-    <syn-icon-button
-      slot="meta-navigation"
-      name="dark_mode"
-      label="Dark Mode"
-    ></syn-icon-button>
-    <syn-divider vertical slot="meta-navigation"></syn-divider>
-    <syn-icon-button
-      slot="meta-navigation"
-      name="language"
-      label="Language"
-    ></syn-icon-button>
-    <syn-icon-button
-      slot="meta-navigation"
-      name="login"
-      label="Login"
-    ></syn-icon-button>
-  </syn-header>
-  ```
-
   `<syn-header>` now also exposes a new `cssproperty` `--metanavigation-item-size` that can be used to define the size of rendered `<syn-icon-buttons>`, as well as the height of `<syn-divider>`
 
 ### Patch Changes

package/metadata/packages/styles/index.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/styles version 2.0.2
+ * @synergy-design-system/styles version 2.0.3
  * SICK Global UX Foundation
  */
 /**

package/metadata/packages/styles/link-list.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/styles version 2.0.2
+ * @synergy-design-system/styles version 2.0.3
  * SICK Global UX Foundation
  */
 /**

package/metadata/packages/styles/link.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/styles version 2.0.2
+ * @synergy-design-system/styles version 2.0.3
  * SICK Global UX Foundation
  */
 /**

package/metadata/packages/styles/tables.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/styles version 2.0.2
+ * @synergy-design-system/styles version 2.0.3
  * SICK Global UX Foundation
  */
 /**

package/metadata/packages/styles/typography.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/styles version 2.0.2
+ * @synergy-design-system/styles version 2.0.3
  * SICK Global UX Foundation
  */
 /**

package/metadata/packages/tokens/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 3.11.1
+
+## 3.11.0
+
 ## 3.10.5
 
 ### Patch Changes

package/metadata/packages/tokens/dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.10.4
+ * @synergy-design-system/tokens version 3.11.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 3.10.4
+ * @synergy-design-system/tokens version 3.11.0
  * SICK Global UX Foundation
  */
 

package/metadata/packages/tokens/light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.10.4
+ * @synergy-design-system/tokens version 3.11.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 3.10.4
+ * @synergy-design-system/tokens version 3.11.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 3.10.4
+ * @synergy-design-system/tokens version 3.11.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 3.10.4
+ * @synergy-design-system/tokens version 3.11.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 3.10.4
+ * @synergy-design-system/tokens version 3.11.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/metadata/static/templates/localization.md

@@ -0,0 +1,279 @@
+## Dynamically Set Localizations
+
+This example shows how to dynamically set localizations for Synergy components. This can be useful if you want to allow users to change the language of your application on the fly.
+
+```html
+<!-- .synergy-demo-application -->
+<div id="localization-demo-story" class="synergy-demo-application">
+  <!-- header -->
+  <syn-header label="Localization Demo" sticky="" burger-menu="hidden">
+    <!-- meta-navigation -->
+    <nav slot="meta-navigation">
+      <syn-dropdown placement="bottom-start">
+        <div slot="trigger">
+          <syn-tooltip content="Change language" placement="bottom">
+            <syn-icon-button
+              color="neutral"
+              name="language"
+              label="Choose language"
+              size="inherit"
+            ></syn-icon-button>
+          </syn-tooltip>
+        </div>
+        <syn-menu role="menu">
+          <syn-menu-item
+            type="checkbox"
+            value="cs"
+            role="menuitemcheckbox"
+            aria-checked="false"
+            aria-disabled="false"
+            tabindex="0"
+            >Čeština</syn-menu-item
+          >
+
+          <syn-menu-item
+            type="checkbox"
+            value="da"
+            role="menuitemcheckbox"
+            aria-checked="false"
+            aria-disabled="false"
+            tabindex="-1"
+            >Dansk</syn-menu-item
+          >
+
+          <syn-menu-item
+            type="checkbox"
+            checked=""
+            value="de"
+            role="menuitemcheckbox"
+            aria-checked="true"
+            aria-disabled="false"
+            tabindex="-1"
+            >Deutsch</syn-menu-item
+          >
+
+          <syn-menu-item
+            type="checkbox"
+            value="en"
+            role="menuitemcheckbox"
+            aria-checked="false"
+            aria-disabled="false"
+            tabindex="-1"
+            >English</syn-menu-item
+          >
+
+          <syn-menu-item
+            type="checkbox"
+            value="es"
+            role="menuitemcheckbox"
+            aria-checked="false"
+            aria-disabled="false"
+            tabindex="-1"
+            >Español</syn-menu-item
+          >
+
+          <syn-menu-item
+            type="checkbox"
+            value="fi"
+            role="menuitemcheckbox"
+            aria-checked="false"
+            aria-disabled="false"
+            tabindex="-1"
+            >Suomi</syn-menu-item
+          >
+
+          <syn-menu-item
+            type="checkbox"
+            value="fr"
+            role="menuitemcheckbox"
+            aria-checked="false"
+            aria-disabled="false"
+            tabindex="-1"
+            >Français</syn-menu-item
+          >
+
+          <syn-menu-item
+            type="checkbox"
+            value="it"
+            role="menuitemcheckbox"
+            aria-checked="false"
+            aria-disabled="false"
+            tabindex="-1"
+            >Italian</syn-menu-item
+          >
+
+          <syn-menu-item
+            type="checkbox"
+            value="ja"
+            role="menuitemcheckbox"
+            aria-checked="false"
+            aria-disabled="false"
+            tabindex="-1"
+            >日本語</syn-menu-item
+          >
+
+          <syn-menu-item
+            type="checkbox"
+            value="ko"
+            role="menuitemcheckbox"
+            aria-checked="false"
+            aria-disabled="false"
+            tabindex="-1"
+            >한국어</syn-menu-item
+          >
+
+          <syn-menu-item
+            type="checkbox"
+            value="nl"
+            role="menuitemcheckbox"
+            aria-checked="false"
+            aria-disabled="false"
+            tabindex="-1"
+            >Nederlands</syn-menu-item
+          >
+
+          <syn-menu-item
+            type="checkbox"
+            value="pl"
+            role="menuitemcheckbox"
+            aria-checked="false"
+            aria-disabled="false"
+            tabindex="-1"
+            >Polski</syn-menu-item
+          >
+
+          <syn-menu-item
+            type="checkbox"
+            value="pt-BR"
+            role="menuitemcheckbox"
+            aria-checked="false"
+            aria-disabled="false"
+            tabindex="-1"
+            >Português (Brasil)</syn-menu-item
+          >
+
+          <syn-menu-item
+            type="checkbox"
+            value="ru"
+            role="menuitemcheckbox"
+            aria-checked="false"
+            aria-disabled="false"
+            tabindex="-1"
+            >Русский</syn-menu-item
+          >
+
+          <syn-menu-item
+            type="checkbox"
+            value="sv"
+            role="menuitemcheckbox"
+            aria-checked="false"
+            aria-disabled="false"
+            tabindex="-1"
+            >Svenska</syn-menu-item
+          >
+
+          <syn-menu-item
+            type="checkbox"
+            value="tr"
+            role="menuitemcheckbox"
+            aria-checked="false"
+            aria-disabled="false"
+            tabindex="-1"
+            >Türkçe</syn-menu-item
+          >
+
+          <syn-menu-item
+            type="checkbox"
+            value="zh-cn"
+            role="menuitemcheckbox"
+            aria-checked="false"
+            aria-disabled="false"
+            tabindex="-1"
+            >简体中文</syn-menu-item
+          >
+
+          <syn-menu-item
+            type="checkbox"
+            value="zh-tw"
+            role="menuitemcheckbox"
+            aria-checked="false"
+            aria-disabled="false"
+            tabindex="-1"
+            >正體中文</syn-menu-item
+          >
+        </syn-menu>
+      </syn-dropdown>
+    </nav>
+    <!-- /meta-navigation -->
+  </syn-header>
+  <!-- /header -->
+
+  <!-- .synergy-demo-content -->
+  <div class="synergy-demo-content">
+    <main class="synergy-demo-main">
+      <syn-card shadow="">
+        <h1 class="syn-heading--3x-large">
+          Current selected language:
+          <span>Deutsch</span>
+        </h1>
+        <p>
+          The following example demonstrates the usage of the
+          <code>&lt;syn-file&gt;</code> component with different language
+          settings. The first item will adapt to the currently selected
+          language, while the second one uses a fixed
+          <code>lang="en"</code> attribute, making it fixed to English
+          regardless of the selected language.
+        </p>
+        <p>
+          Try changing the language using the dropdown in the header to see how
+          the first file input updates its translations accordingly.
+        </p>
+        <div class="form">
+          <syn-file droparea="" size="medium" form=""></syn-file>
+          <syn-file droparea="" lang="en" size="medium" form=""></syn-file>
+        </div>
+      </syn-card>
+    </main>
+    <!-- /.synergy-demo-main -->
+  </div>
+  <!-- /.synergy-demo-content -->
+</div>
+<!-- /.synergy-demo-application -->
+
+<style>
+  body {
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+
+  .synergy-demo-application {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .synergy-demo-content {
+    background: var(--syn-page-background-color-muted);
+  }
+
+  .synergy-demo-main {
+    display: flex;
+    flex-direction: column;
+    font: var(--syn-body-medium);
+    margin: var(--syn-spacing-medium);
+
+    h1 {
+      margin: 0 0 var(--syn-spacing-medium);
+    }
+
+    .form {
+      display: flex;
+      flex-direction: row;
+      gap: var(--syn-spacing-medium);
+
+      syn-file {
+        flex-basis: calc(50% - var(--syn-spacing-medium) / 2);
+      }
+    }
+  }
+</style>
+```

package/package.json

@@ -28,12 +28,12 @@
     "serve-handler": "^6.1.7",
     "ts-jest": "^29.4.6",
     "typescript": "^5.9.3",
+    "@synergy-design-system/components": "3.11.1",
+    "@synergy-design-system/docs": "0.1.0",
     "@synergy-design-system/eslint-config-syn": "^0.1.0",
-    "@synergy-design-system/components": "3.10.5",
-    "@synergy-design-system/tokens": "^3.10.5",
     "@synergy-design-system/fonts": "1.0.5",
-    "@synergy-design-system/docs": "0.1.0",
-    "@synergy-design-system/styles": "2.0.3"
+    "@synergy-design-system/styles": "2.0.3",
+    "@synergy-design-system/tokens": "^3.11.1"
   },
   "exports": {
     ".": {
@@ -67,7 +67,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "2.13.4",
+  "version": "2.14.1",
   "scripts": {
     "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
     "build:all": "pnpm run build && pnpm run build:storybook",

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

@@ -1,60 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host {
-    /**
-     * Used as the default padding for the dialog title
-     */
-    --header-spacing: var(--syn-spacing-large) var(--syn-spacing-x-small) var(--syn-spacing-large) var(--syn-spacing-large);
-
-    /**
-     * Defines the default body spacing
-     */
-    --body-spacing: var(--syn-spacing-medium) var(--syn-spacing-large);
-
-    /**
-     * Defines the default footer spacing
-     */
-    --footer-spacing: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-large) var(--syn-spacing-medium);
-  }
-
-  .dialog__panel {
-    border: var(--syn-spacing-4x-small) solid var(--syn-panel-border-color);
-    border-radius: var(--syn-border-radius-none);
-    box-shadow: var(--syn-shadow-large);
-  }
-
-  .dialog__header-actions {
-    align-items: flex-start;
-    gap: var(--syn-spacing-x-small);
-    padding: var(--syn-spacing-large) var(--syn-spacing-small) var(--syn-spacing-large) 0;
-  }
-
-  /* Overlay Background */
-  .dialog__overlay {
-    /* #946: Add background blur for sick 2025 */
-    backdrop-filter: blur(var(--syn-overlay-background-blur));
-  }
-
-  /**
-   * We need this to make sure we are big enough as defined in the layout
-   * When omitting this statement, we will get rounding problems via line-height
-   */
-  .dialog__title,
-  .dialog__header-actions {
-    min-height: 88px;
-  }
-
-  .dialog__header-actions syn-icon-button,
-  .dialog__header-actions ::slotted(syn-icon-button) {
-    color: var(--syn-color-neutral-950);
-    font-size: var(--syn-font-size-x-large);
-  }
-
-  .dialog__title {
-    font-family: var(--syn-font-sans);
-    font-size: var(--syn-font-size-x-large);
-    font-weight: var(--syn-font-weight-bold);
-    line-height: var(--syn-line-height-normal);
-  }
-`;