@synergy-design-system/mcp 1.41.2 → 2.1.0

package/metadata/packages/tokens/sick2025_dark.css

@@ -1,10 +1,10 @@
 /**
- * @synergy-design-system/tokens version 2.48.1
+ * @synergy-design-system/tokens version 3.0.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
 
-:root, .syn-sick2025-dark {
+:root, .syn-sick2025-dark, .syn-theme-dark {
   color-scheme: dark;
 
   --syn-alert-error-color-background: var(--syn-namur-error-color-background);
@@ -307,7 +307,8 @@
   --syn-option-icon-color-hover: var(--syn-color-neutral-0);
   --syn-overlay-background-blur: 8px;
   --syn-overlay-background-color: rgba(0, 5, 26, 0.6);
-  --syn-page-background: var(--syn-color-neutral-0);
+  --syn-page-background: var(--syn-color-neutral-0); /** Will be DEPRECATED */
+  --syn-page-background-color: var(--syn-color-neutral-0);
   --syn-panel-background-color: var(--syn-color-neutral-50);
   --syn-panel-border-color: var(--syn-color-neutral-300);
   --syn-panel-border-radius: var(--syn-border-radius-medium);

package/metadata/packages/tokens/sick2025_light.css

@@ -1,10 +1,10 @@
 /**
- * @synergy-design-system/tokens version 2.48.1
+ * @synergy-design-system/tokens version 3.0.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
 
-:root, .syn-sick2025-light {
+:root, .syn-sick2025-light, .syn-theme-light {
   color-scheme: light;
 
   --syn-alert-error-color-background: var(--syn-namur-error-color-background);
@@ -307,7 +307,8 @@
   --syn-option-icon-color-hover: var(--syn-color-neutral-0);
   --syn-overlay-background-blur: 8px;
   --syn-overlay-background-color: rgba(0, 5, 26, 0.3);
-  --syn-page-background: #f8f7f6;
+  --syn-page-background: #f8f7f6; /** Will be DEPRECATED */
+  --syn-page-background-color: #f8f7f6;
   --syn-panel-background-color: var(--syn-color-neutral-0);
   --syn-panel-border-color: #e6e1dc;
   --syn-panel-border-radius: var(--syn-border-radius-medium);

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

@@ -81,13 +81,7 @@ Badges can be used without content to just show an status indicator.
 <div
   style="display: flex; position: relative; gap: var(--syn-spacing-3x-large)"
 >
-  <syn-popup
-    active=""
-    distance="-8"
-    placement="right-start"
-    skidding="-10"
-    strategy="absolute"
-  >
+  <syn-popup active="" distance="-8" placement="right-start" skidding="-10">
     <syn-icon
       name="wallpaper"
       style="font-size: var(--syn-font-size-x-large)"
@@ -98,13 +92,7 @@ Badges can be used without content to just show an status indicator.
     <syn-badge variant="primary"></syn-badge>
   </syn-popup>
 
-  <syn-popup
-    active=""
-    distance="-8"
-    placement="right-start"
-    skidding="-10"
-    strategy="absolute"
-  >
+  <syn-popup active="" distance="-8" placement="right-start" skidding="-10">
     <syn-icon
       name="wallpaper"
       style="font-size: var(--syn-font-size-x-large)"

package/metadata/static/components/syn-button-group/docs.md

@@ -0,0 +1,259 @@
+## Default
+
+Button groups can be used to group related buttons into sections.
+
+```html
+<syn-button-group size="medium" variant="outline">
+  <syn-button title="" variant="outline" size="medium">Left</syn-button>
+  <syn-button title="" variant="outline" size="medium">Center</syn-button>
+  <syn-button title="" variant="outline" size="medium">Right</syn-button>
+</syn-button-group>
+```
+
+---
+
+## Variants
+
+Use the variant attribute to set the button’s variant. Variants can be Filled, Outline. There is no Text variant.
+
+```html
+<div
+  style="display: flex; gap: var(--syn-spacing-large); flex-direction: column"
+>
+  <syn-button-group variant="outline" label="Variant (outline)" size="medium">
+    <syn-button title="" variant="outline" size="medium">Left</syn-button>
+    <syn-button title="" variant="outline" size="medium">Center</syn-button>
+    <syn-button title="" variant="outline" size="medium">Right</syn-button>
+  </syn-button-group>
+
+  <syn-button-group variant="filled" label="Variant (filled)" size="medium">
+    <syn-button title="" variant="filled" size="medium">Left</syn-button>
+    <syn-button title="" variant="filled" size="medium">Center</syn-button>
+    <syn-button title="" variant="filled" size="medium">Right</syn-button>
+  </syn-button-group>
+</div>
+```
+
+---
+
+## Button Sizes
+
+All button sizes are supported. The size of the button-group will be used to determine the size of the buttons.
+
+```html
+<div
+  style="display: flex; gap: var(--syn-spacing-large); flex-direction: column"
+>
+  <syn-button-group size="small" label="Alignment (small)" variant="outline">
+    <syn-button title="" variant="outline" size="small">Left</syn-button>
+    <syn-button title="" variant="outline" size="small">Center</syn-button>
+    <syn-button title="" variant="outline" size="small">Right</syn-button>
+  </syn-button-group>
+
+  <syn-button-group size="medium" label="Alignment (medium)" variant="outline">
+    <syn-button title="" variant="outline" size="medium">Left</syn-button>
+    <syn-button title="" variant="outline" size="medium">Center</syn-button>
+    <syn-button title="" variant="outline" size="medium">Right</syn-button>
+  </syn-button-group>
+
+  <syn-button-group size="large" label="Alignment (large)" variant="outline">
+    <syn-button title="" variant="outline" size="large">Left</syn-button>
+    <syn-button title="" variant="outline" size="large">Center</syn-button>
+    <syn-button title="" variant="outline" size="large">Right</syn-button>
+  </syn-button-group>
+</div>
+```
+
+---
+
+## Dropdowns In Button Groups
+
+ Dropdowns can be placed inside button groups as long as the trigger is an <syn-button> element. 
+
+```html
+<syn-button-group label="Example Button Group" size="medium" variant="outline">
+  <syn-button title="" variant="outline" size="medium">Button</syn-button>
+  <syn-button title="" variant="outline" size="medium">Button</syn-button>
+  <syn-dropdown placement="bottom-end">
+    <syn-button slot="trigger" caret="" title="" variant="outline" size="medium"
+      >Dropdown</syn-button
+    >
+    <syn-menu role="menu">
+      <syn-menu-item role="menuitem" aria-disabled="false" tabindex="0"
+        >Save</syn-menu-item
+      >
+      <syn-menu-item role="menuitem" aria-disabled="false" tabindex="-1"
+        >Save as…</syn-menu-item
+      >
+      <syn-menu-item role="menuitem" aria-disabled="false" tabindex="-1"
+        >Save all</syn-menu-item
+      >
+    </syn-menu>
+  </syn-dropdown>
+</syn-button-group>
+```
+
+---
+
+## Split Buttons
+
+Create a split button using a button and a dropdown. Use a visually hidden label to ensure the dropdown is accessible to users with assistive devices.
+
+```html
+<syn-button-group label="Example Button Group" size="medium" variant="outline">
+  <syn-button title="" variant="outline" size="medium">Save</syn-button>
+  <syn-dropdown placement="bottom-end">
+    <syn-button
+      slot="trigger"
+      variant="outline"
+      caret=""
+      title=""
+      size="medium"
+    ></syn-button>
+    <syn-menu role="menu">
+      <syn-menu-item role="menuitem" aria-disabled="false" tabindex="0"
+        >Save</syn-menu-item
+      >
+      <syn-menu-item role="menuitem" aria-disabled="false" tabindex="-1"
+        >Save as…</syn-menu-item
+      >
+      <syn-menu-item role="menuitem" aria-disabled="false" tabindex="-1"
+        >Save all</syn-menu-item
+      >
+    </syn-menu>
+  </syn-dropdown>
+</syn-button-group>
+```
+
+---
+
+## Tooltips In Button Groups
+
+Buttons can be wrapped in tooltips to provide more detail when the user interacts with them.
+
+```html
+<syn-button-group label="Example Button Group" size="medium" variant="outline">
+  <syn-tooltip content="I am on the left">
+    <syn-button title="" variant="outline" size="medium">Left</syn-button>
+  </syn-tooltip>
+  <syn-tooltip content="I am in the center">
+    <syn-button title="" variant="outline" size="medium">Center</syn-button>
+  </syn-tooltip>
+  <syn-tooltip content="I am on the right">
+    <syn-button title="" variant="outline" size="medium">Right</syn-button>
+  </syn-tooltip>
+</syn-button-group>
+```
+
+---
+
+## Toolbar Example
+
+Create interactive toolbars with button groups.
+
+```html
+<div class="button-group-toolbar">
+  <syn-button-group label="Download and save" size="medium" variant="outline">
+    <syn-tooltip content="Save">
+      <syn-button title="" variant="outline" size="medium"
+        ><syn-icon
+          name="save"
+          label="Save"
+          role="img"
+          aria-label="Save"
+          library="default"
+        ></syn-icon
+      ></syn-button>
+    </syn-tooltip>
+    <syn-tooltip content="Download">
+      <syn-button title="" variant="outline" size="medium"
+        ><syn-icon
+          name="save_alt"
+          label="Download"
+          role="img"
+          aria-label="Download"
+          library="default"
+        ></syn-icon
+      ></syn-button>
+    </syn-tooltip>
+  </syn-button-group>
+
+  <syn-button-group label="Misc" size="medium" variant="outline">
+    <syn-tooltip content="Edit">
+      <syn-button title="" variant="outline" size="medium"
+        ><syn-icon
+          name="edit"
+          label="Edit"
+          role="img"
+          aria-label="Edit"
+          library="default"
+        ></syn-icon
+      ></syn-button>
+    </syn-tooltip>
+    <syn-tooltip content="Settings">
+      <syn-button title="" variant="outline" size="medium"
+        ><syn-icon
+          name="settings"
+          label="Settings"
+          role="img"
+          aria-label="Settings"
+          library="default"
+        ></syn-icon
+      ></syn-button>
+    </syn-tooltip>
+    <syn-tooltip content="Preview">
+      <syn-button title="" variant="outline" size="medium"
+        ><syn-icon
+          name="wallpaper"
+          label="Preview"
+          role="img"
+          aria-label="Preview"
+          library="default"
+        ></syn-icon
+      ></syn-button>
+    </syn-tooltip>
+  </syn-button-group>
+
+  <syn-button-group size="medium" variant="outline">
+    <syn-tooltip content="Add">
+      <syn-button title="" variant="outline" size="medium"
+        ><syn-icon
+          name="add"
+          label="Add"
+          role="img"
+          aria-label="Add"
+          library="default"
+        ></syn-icon
+      ></syn-button>
+    </syn-tooltip>
+    <syn-tooltip content="Info">
+      <syn-button title="" variant="outline" size="medium"
+        ><syn-icon
+          name="info"
+          label="Info"
+          role="img"
+          aria-label="Info"
+          library="default"
+        ></syn-icon
+      ></syn-button>
+    </syn-tooltip>
+    <syn-tooltip content="Upload File">
+      <syn-button title="" variant="outline" size="medium"
+        ><syn-icon
+          name="upload_file"
+          label="Upload File"
+          role="img"
+          aria-label="Upload File"
+          library="default"
+        ></syn-icon
+      ></syn-button>
+    </syn-tooltip>
+  </syn-button-group>
+</div>
+
+<style>
+  .button-group-toolbar syn-button-group:not(:last-of-type) {
+    margin-right: var(--syn-spacing-large);
+  }
+</style>
+```

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

@@ -4,7 +4,7 @@ Popup is a utility that lets you declaratively anchor “popup” containers to
 
 ```html
 <div class="popup-default">
-  <syn-popup active="" arrow-padding="10" placement="top" strategy="absolute">
+  <syn-popup active="" arrow-padding="10" placement="top">
     <div class="box"></div>
     <span slot="anchor"></span>
   </syn-popup>
@@ -37,7 +37,7 @@ meaning you can have many idle popups on the page without affecting performance.
 
 ```html
 <div class="popup-active">
-  <syn-popup placement="top" active="" strategy="absolute">
+  <syn-popup placement="top" active="">
     <span slot="anchor"></span>
     <div class="box"></div>
   </syn-popup>
@@ -77,12 +77,7 @@ to the anchor property to achieve the same effect without using an id.
 ```html
 <span id="external-anchor"></span>
 
-<syn-popup
-  anchor="external-anchor"
-  placement="top"
-  active=""
-  strategy="absolute"
->
+<syn-popup anchor="external-anchor" placement="top" active="">
   <div class="box"></div>
 </syn-popup>
 
@@ -118,7 +113,7 @@ available space and it will be removed when the popup is deactivated.
 
 ```html
 <div class="popup-placement">
-  <syn-popup placement="top" active="" strategy="absolute">
+  <syn-popup placement="top" active="">
     <span slot="anchor"></span>
     <div class="box"></div>
   </syn-popup>
@@ -248,7 +243,7 @@ A positive value will move the popup further away and a negative value will move
 
 ```html
 <div class="popup-distance">
-  <syn-popup placement="top" distance="0" active="" strategy="absolute">
+  <syn-popup placement="top" distance="0" active="">
     <span slot="anchor"></span>
     <div class="box"></div>
   </syn-popup>
@@ -296,7 +291,7 @@ Both positive and negative values are allowed.
 
 ```html
 <div class="popup-skidding">
-  <syn-popup placement="top" skidding="0" active="" strategy="absolute">
+  <syn-popup placement="top" skidding="0" active="">
     <span slot="anchor"></span>
     <div class="box"></div>
   </syn-popup>
@@ -356,7 +351,6 @@ the arrow to align to the start, end, or center of the instead.
     arrow-placement="anchor"
     distance="8"
     active=""
-    strategy="absolute"
   >
     <span slot="anchor"></span>
     <div class="box"></div>
@@ -550,7 +544,7 @@ This is useful for controls that need the popup to stay the same width or height
 
 ```html
 <div class="popup-sync">
-  <syn-popup placement="top" sync="width" active="" strategy="absolute">
+  <syn-popup placement="top" sync="width" active="">
     <span slot="anchor"></span>
     <div class="box"></div>
   </syn-popup>
@@ -631,13 +625,7 @@ Additional options are available to control the flip behavior's boundary and pad
 ```html
 <div class="popup-flip">
   <div class="overflow">
-    <syn-popup
-      placement="top"
-      flip=""
-      active=""
-      id="popup-flip"
-      strategy="absolute"
-    >
+    <syn-popup placement="top" flip="" active="" id="popup-flip">
       <span slot="anchor"></span>
       <div class="box"></div>
     </syn-popup>
@@ -698,7 +686,6 @@ Scroll the container to see how the popup changes it's fallback placement to pre
       flip-fallback-placements="right bottom"
       flip-fallback-strategy="initial"
       active=""
-      strategy="absolute"
     >
       <span slot="anchor"></span>
       <div class="box"></div>
@@ -743,13 +730,7 @@ Toggle the switch to see the difference.
 ```html
 <div class="popup-shift">
   <div class="overflow">
-    <syn-popup
-      placement="top"
-      shift=""
-      shift-padding="10"
-      active=""
-      strategy="absolute"
-    >
+    <syn-popup placement="top" shift="" shift-padding="10" active="">
       <span slot="anchor"></span>
       <div class="box"></div>
     </syn-popup>
@@ -796,7 +777,7 @@ As such, a mouse is required to properly view it.
 
 ```html
 <div class="popup-virtual-element">
-  <syn-popup placement="right-start" strategy="absolute">
+  <syn-popup placement="right-start">
     <div class="circle"></div>
   </syn-popup>
 

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

@@ -207,7 +207,7 @@ Add any element to the start and end of range items using the prefix and suffix
     gap: var(--syn-spacing-medium);
 
     syn-input {
-      min-width: 0;
+      max-width: 6.5rem;
     }
   }
 </style>

package/metadata/static/migration/index.md

@@ -1,17 +1,57 @@
-# Rules for chatbots and llms
+# Synergy Migration Overview
 
-As an llm, I want you to obey to the following rules:
+This overview describes the main migration paths from Synergy version 2 to Synergy version 3 and the SICK 2025 theme.
 
-- The migration is available as a markdown document
+If you are unsure which guide to follow, start here and choose the path that matches your current setup and your target.
 
-The following formatting rules are used for the list of breaking changes:
+---
 
-- Each headline 2 (`##`) defines a major version of the new major release
-- Each headline 3 (`###`) describes a component or feature that was changed
+## Migration Paths
 
-Migration from Synergy 2.0 to Synergy 3.0 (a.k.a. Brand Update):
+### Path A: Stay on Synergy 2, move from SICK 2018 to SICK 2025
 
-- There are handwritten lists of changes that highlight the differences between Synergy V2 and Synergy V3.
-- The document is structured as a list of breaking changes.
-- The list of breaking changes is structured into blocks that define the change and a list of migration steps.
-- You may tell the users that all components are now upgraded and it is save to move to the new sick 2025 theme.
+- **Current state:** Synergy **2.x**, theme **SICK 2018**
+- **Target state:** Synergy **2.x**, theme **SICK 2025**
+- **Use when:** You want the new SICK 2025 brand look but are not ready to upgrade to Synergy 3 yet.
+- **Guide:** See [Path A: Upgrade from Synergy 2 (SICK 2018) to Synergy 2 (SICK 2025)](?path=/docs/migration-v2-sick-2018-to-v2-sick-2025--docs).
+
+---
+
+### Path B: Synergy 2.x + SICK 2018 → Synergy 3.x + SICK 2025 (recommended)
+
+- **Current state:** Synergy **2.x**, theme **SICK 2018**
+- **Target state:** Synergy **3.x**, theme **SICK 2025**
+- **Use when:** You want to fully adopt Synergy 3 and the new SICK 2025 brand.
+- **Guide:** See [Path B: Upgrade from Synergy 2 (SICK 2018) to Synergy 3 (SICK 2025)](?path=/docs/migration-v2-sick-2018-to-v3-sick-2025--docs).
+
+---
+
+### Path C: Synergy 2.x + SICK 2025 → Synergy 3.x + SICK 2025
+
+- **Current state:** Synergy **2.x**, theme **SICK 2025** (already migrated using the v2 guide)
+- **Target state:** Synergy **3.x**, theme **SICK 2025**
+- **Use when:** You already use SICK 2025 on Synergy 2 and now want to upgrade to Synergy 3.
+- **Guide:** See [Path C: Upgrade from Synergy 2 to Synergy 3 with SICK 2025](?path=/docs/migration-v2-sick-2025-to-v3-sick-2025--docs).
+
+---
+
+### Path D: Synergy 2.x + SICK 2018 → Synergy 3.x + SICK 2018 (stay on old theme)
+
+- **Current state:** Synergy **2.x**, theme **SICK 2018**
+- **Target state:** Synergy **3.x**, theme **SICK 2018**
+- **Use when:** You want to benefit from Synergy 3, but must keep the SICK 2018 theme for now.
+- **Guide:** See [Path D: Upgrade from Synergy 2 to Synergy 3 while staying on SICK 2018](?path=/docs/migration-v2-sick-2018-to-v3-sick-2018--docs).
+
+---
+
+## Package-Level Technical Details
+
+Each path focuses on the _user perspective_ and high-level steps.
+For package-specific breaking changes and code changes, always consult the dedicated package guides:
+
+- Components: [@synergy-design-system/components BREAKING CHANGES](?path=/docs/packages-components-breaking-changes--docs)
+- Tokens: [@synergy-design-system/tokens BREAKING CHANGES](?path=/docs/packages-tokens-breaking-changes--docs)
+- Assets: [@synergy-design-system/assets BREAKING CHANGES](?path=/docs/packages-assets-breaking-changes--docs)
+- Styles: [@synergy-design-system/styles BREAKING CHANGES](?path=/docs/packages-styles-breaking-changes--docs)
+
+Use these together with the path-specific guides to plan and execute your migration.

package/metadata/{packages/components/migration/migration-synergy-v3.md → static/migration/v2-2018-to-v2-2025.md}

@@ -1,4 +1,4 @@
-# Migration to SICK 2025
+# Migrating from Synergy 2.x (SICK 2018) → Synergy 2.x (SICK 2025)
 
 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.