@synergy-design-system/mcp 1.41.2 → 2.0.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 2.48.2
  * 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 2.48.2
  * 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-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.

package/metadata/static/migration/v2-2018-to-v3-2018.md

@@ -0,0 +1,147 @@
+# Migrating from Synergy 2.x (SICK 2018) → Synergy 3.x (SICK 2018)
+
+This guide describes how to migrate an application from **Synergy 2.x with the SICK 2018 theme** to **Synergy 3.x while staying on the SICK 2018 theme**.
+
+Use this path if you want to benefit from Synergy 3 (APIs, fixes, and features) but **must keep the legacy SICK 2018 theme** for the time being.
+
+> The SICK 2018 theme is planned for future deprecation.
+> Use this path when you need more time before switching to SICK 2025.
+
+---
+
+## Migration Checklist: Quick Overview
+
+- [ ] Confirm that your application is using the SICK 2018 theme on Synergy 2.
+- [ ] Update all `@synergy-design-system/*` packages to their compatible Synergy 3 versions.
+- [ ] Keep using the SICK 2018 theme files and classes where necessary.
+- [ ] Apply all relevant breaking changes for:
+  - [ ] `@synergy-design-system/components` ([BREAKING_CHANGES](?path=/docs/packages-components-breaking-changes--docs))
+  - [ ] `@synergy-design-system/tokens` ([BREAKING_CHANGES](?path=/docs/packages-tokens-breaking-changes--docs))
+  - [ ] `@synergy-design-system/assets` ([BREAKING_CHANGES](?path=/docs/packages-assets-breaking-changes--docs))
+  - [ ] `@synergy-design-system/styles` ([BREAKING_CHANGES](?path=/docs/packages-styles-breaking-changes--docs))
+- [ ] Explicitly configure SICK 2018 theme imports to avoid accidentally switching to SICK 2025.
+- [ ] Document that you plan to migrate to SICK 2025 later (Path B or C).
+
+---
+
+## Important Notes About SICK 2018 in Synergy 3
+
+- The default theme behavior in Synergy 3 is oriented around SICK 2025.
+- SICK 2018 remains available but is considered **legacy** and may be removed in a future major release.
+- When using SICK 2018 on Synergy 3, you must:
+  - Import the explicit SICK 2018 theme files.
+  - Use the SICK 2018 theme classes in your theme switching logic.
+
+See the tokens breaking change guide for details:
+
+- Tokens: [BREAKING_CHANGES](?path=/docs/packages-tokens-breaking-changes--docs)
+
+---
+
+## Migration Steps: Detailed Guide
+
+### 1. Prepare and review current setup
+
+- Confirm your current Synergy 2 versions for all `@synergy-design-system/*` packages.
+- Confirm that your application uses SICK 2018:
+  - SICK 2018 theme files are imported.
+  - Theme switching uses `.syn-sick2018-light` and `.syn-sick2018-dark`.
+- Skim the package-level breaking changes for Synergy 3.
+
+---
+
+### 2. Update Synergy packages to version 3
+
+Update your dependencies to the compatible Synergy 3 versions:
+
+- `@synergy-design-system/components` → latest **3.x**
+- `@synergy-design-system/tokens` → latest **3.x**
+- `@synergy-design-system/assets` → latest **2.x** (or the version recommended in the release notes)
+- `@synergy-design-system/styles` → latest **2.x** (or the version recommended in the release notes)
+
+Update all packages together to avoid version mismatches.
+
+---
+
+### 3. Keep using SICK 2018 theme files
+
+On Synergy 3, some generic theme entry points may now point to SICK 2025.
+To **stay on SICK 2018**, make sure you:
+
+- Import the explicit SICK 2018 theme files instead of any generic or default theme files.
+- Continue to use the SICK 2018 theme classes for your theme switching logic.
+
+For example (conceptually):
+
+- Light theme: use a SICK 2018-specific light theme file and `.syn-sick2018-light`.
+- Dark theme: use a SICK 2018-specific dark theme file and `.syn-sick2018-dark`.
+
+See the tokens breaking change guide for the exact file names and recommendations:
+
+- Tokens: [BREAKING_CHANGES](?path=/docs/packages-tokens-breaking-changes--docs)
+
+---
+
+### 4. Apply package-level breaking changes
+
+Even though you keep SICK 2018, you still need to migrate to the Synergy 3 APIs and behaviors:
+
+-- **Components** ([BREAKING_CHANGES](?path=/docs/packages-components-breaking-changes--docs))
+
+- Remove attributes that have been removed in Synergy 3.
+- Adjust to changed defaults (e.g. numeric input strategies, popup behavior).
+- Review any changes to default settings or configuration utilities.
+
+-- **Tokens** ([BREAKING_CHANGES](?path=/docs/packages-tokens-breaking-changes--docs))
+
+- Confirm that your SICK 2018 theme imports are valid in Synergy 3.
+- Check for deprecated or renamed tokens that may still be used in your CSS.
+
+-- **Assets & Styles** ([BREAKING_CHANGES](?path=/docs/packages-assets-breaking-changes--docs), [BREAKING_CHANGES](?path=/docs/packages-styles-breaking-changes--docs))
+
+- Align asset paths and CSS utilities with Synergy 3.
+
+Apply these changes systematically, running tests as you go.
+
+---
+
+### 5. Test and verify SICK 2018 on Synergy 3
+
+- Test your application in both light and dark mode using SICK 2018.
+- Pay attention to:
+  - Any unintended switch to SICK 2025 assets or themes.
+  - Components whose behavior changed between Synergy 2 and 3.
+  - Layout changes that may result from new spacing or typography defaults.
+- Run your automated tests and, if available, visual regression tests.
+
+---
+
+## Planning the Future Migration to SICK 2025
+
+Staying on SICK 2018 on Synergy 3 is intended as a **temporary** solution.
+To complete the brand migration later:
+
+- Plan a follow-up migration from SICK 2018 to SICK 2025 on Synergy 3.
+- When you are ready, you can:
+  - Follow the same conceptual steps as in the SICK 2025 guide, but applied to your Synergy 3 setup.
+  - Or, if you skipped the SICK 2025 migration on Synergy 2, follow the recommended **Path B** directly in a Synergy 3-compatible way.
+
+---
+
+## Migration: Breaking Changes & Details
+
+This path focuses on **staying on the legacy SICK 2018 theme** while upgrading to Synergy 3.
+For full details, use the technical 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)
+
+---
+
+## References & Further Reading
+
+- Overall migration paths overview: [Synergy Migration Overview](?path=/docs/migration--docs)
+- SICK 2025 theme migration for Synergy 2: [Migration to SICK 2025 on Synergy 2](?path=/docs/migration-v2-sick-2018-to-v2-sick-2025--docs)
+- Additional Synergy documentation: [Synergy Docs](?path=/docs/welcome--docs)

package/metadata/static/migration/v2-2018-to-v3-2025.md

@@ -0,0 +1,150 @@
+# Migrating from Synergy 2.x (SICK 2018) → Synergy 3.x (SICK 2025)
+
+This guide describes how to migrate an application from **Synergy 2.x with the SICK 2018 theme** to **Synergy 3.x with the SICK 2025 theme**.
+
+This is the **recommended** end state for new and actively maintained applications.
+
+> This guide focuses on the _user perspective_ and high-level sequence.
+> For low-level, package-specific changes, always consult the respective `BREAKING_CHANGES.md` documents.
+
+---
+
+## Migration Checklist: Quick Overview
+
+- [ ] Review the [Migration to SICK 2025 on Synergy 2](?path=/docs/migration-v2-sick-2018-to-v2-sick-2025--docs) to understand the theme and icon changes.
+- [ ] Decide whether you want to migrate the theme **before** or **together with** the Synergy 3 upgrade.
+- [ ] Update all `@synergy-design-system/*` packages to their compatible Synergy 3 versions.
+- [ ] Apply all relevant breaking changes for:
+  - [ ] `@synergy-design-system/components` ([BREAKING_CHANGES](?path=/docs/packages-components-breaking-changes--docs))
+  - [ ] `@synergy-design-system/tokens` ([BREAKING_CHANGES](?path=/docs/packages-tokens-breaking-changes--docs))
+  - [ ] `@synergy-design-system/assets` ([BREAKING_CHANGES](?path=/docs/packages-assets-breaking-changes--docs))
+  - [ ] `@synergy-design-system/styles` ([BREAKING_CHANGES](?path=/docs/packages-styles-breaking-changes--docs))
+- [ ] Enable the SICK 2025 theme (tokens, theme classes, icons, font).
+- [ ] Test your application visually and functionally in both light and dark mode.
+
+---
+
+## Recommended Strategy
+
+There are two practical ways to perform this migration:
+
+1. **Two-step migration** (less risk, more control)
+   - Step 1: Stay on Synergy 2 but migrate to SICK 2025 using the existing theme migration guide.
+   - Step 2: Upgrade from Synergy 2 to Synergy 3 while already using SICK 2025.
+
+2. **One-step migration** (fewer intermediate states, more changes at once)
+   - Update all packages directly to Synergy 3.
+   - Apply package breaking changes and enable SICK 2025 in one go.
+
+This guide is written so it works for both strategies. When in doubt, prefer the **two-step** approach.
+
+---
+
+## Migration Steps: Detailed Guide
+
+### 1. Prepare and review current setup
+
+- Confirm your current versions of all `@synergy-design-system/*` packages.
+- Confirm that your application is currently using the **SICK 2018** theme (legacy theme files and theme classes).
+- Skim through the package-specific breaking change guides to understand the scope of changes:
+  - Components: [BREAKING_CHANGES](?path=/docs/packages-components-breaking-changes--docs)
+  - Tokens: [BREAKING_CHANGES](?path=/docs/packages-tokens-breaking-changes--docs)
+
+---
+
+### 2. (Optional but recommended) First migrate SICK 2018 → SICK 2025 on Synergy 2
+
+If you prefer a **safer**, staged migration, first migrate your theme while staying on Synergy 2:
+
+- Follow the guide [Migration to SICK 2025 on Synergy 2](?path=/docs/migration-v2-sick-2018-to-v2-sick-2025--docs).
+- Verify:
+  - New SICK 2025 icon assets are available and copied by your build.
+  - `setSystemIconLibrary('sick2025')` (or `setupIcons('sick2025')`) is called as appropriate.
+  - `sick2025_light.css` and `sick2025_dark.css` are imported.
+  - Theme switching uses `.syn-sick2025-light` and `.syn-sick2025-dark`.
+  - The **SICK Intl** font is loaded.
+
+Once this is working, you are effectively in the same state as **Path C** and can continue as in that path when upgrading to Synergy 3.
+
+---
+
+### 3. Update Synergy packages to version 3
+
+Update your dependencies to the compatible Synergy 3 versions:
+
+- `@synergy-design-system/components` → latest **3.x**
+- `@synergy-design-system/tokens` → latest **3.x**
+- `@synergy-design-system/assets` → latest **2.x** (or the version recommended in the release notes)
+- `@synergy-design-system/styles` → latest **2.x** (or the version recommended in the release notes)
+
+Make sure all `@synergy-design-system/*` packages are updated together to avoid version mismatches.
+
+---
+
+### 4. Apply package-level breaking changes
+
+Go through the breaking change guides and adjust your code accordingly.
+Focus especially on:
+
+-- **Components** ([BREAKING_CHANGES](?path=/docs/packages-components-breaking-changes--docs))
+
+- Removed or renamed attributes (e.g. deprecated attributes on dropdowns, tooltips, popups, etc.).
+- Changes in defaults (e.g. numeric input behavior).
+- Updated settings utilities.
+
+-- **Tokens** ([BREAKING_CHANGES](?path=/docs/packages-tokens-breaking-changes--docs))
+
+- New default theme behavior (SICK 2025 becoming the default for certain theme imports).
+- The planned deprecation of legacy tokens (e.g. page background tokens).
+
+-- **Assets & Styles** ([BREAKING_CHANGES](?path=/docs/packages-assets-breaking-changes--docs), [BREAKING_CHANGES](?path=/docs/packages-styles-breaking-changes--docs))
+
+- Any changes in asset paths, build configuration, or CSS utility classes.
+
+Handle these changes package by package so that your code compiles and your tests pass.
+
+---
+
+### 5. Ensure SICK 2025 is active on Synergy 3
+
+On Synergy 3, SICK 2025 becomes the **primary** theme. To ensure your application is correctly configured:
+
+- Confirm that your theme imports reference the SICK 2025 theme files.
+- Confirm that your runtime theme switching uses `.syn-sick2025-light` and `.syn-sick2025-dark`.
+- Confirm that your icon setup uses the SICK 2025 icon library.
+- Confirm that the SICK Intl font is loaded (via fonts package, CDN, or local hosting).
+
+If you used the two-step strategy and already migrated the theme on Synergy 2, this step should mostly be a verification.
+
+---
+
+### 6. Test and verify
+
+- Manually test key user flows in your application in both light and dark mode.
+- Pay special attention to:
+  - Layout changes due to new spacing, radii, and typography.
+  - Numeric inputs and other controls with changed defaults.
+  - Popovers, tooltips, dropdowns, and navigation components after API cleanups.
+- Run your automated tests and visual regression tests (if available).
+
+---
+
+## Migration: Breaking Changes & Details
+
+This path-level guide is intentionally high level.
+For exact API changes, always work with the package-specific documents:
+
+- 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)
+
+You can combine this path guide with those documents to form a project-specific migration plan.
+
+---
+
+## References & Further Reading
+
+- Overall migration paths overview: [Synergy Migration Overview](?path=/docs/migration--docs)
+- SICK 2025 theme migration for Synergy 2: [Migration to SICK 2025 on Synergy 2](?path=/docs/migration-v2-sick-2018-to-v2-sick-2025--docs)
+- Additional Synergy documentation: [Synergy Docs](?path=/docs/welcome--docs)