@synergy-design-system/mcp 1.21.1 → 1.23.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 1.23.0
+
+### Minor Changes
+
+- [#1076](https://github.com/synergy-design-system/synergy-design-system/pull/1076) [`1392ed2`](https://github.com/synergy-design-system/synergy-design-system/commit/1392ed23aba2b628344356adba0a78e1e8beff84) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-11-18
+
+  feat: ✨ Brand updates for `<syn-side-nav>`, `<syn-prio-nav>` and `<syn-nav-item>` (#967, #960)
+
+## 1.22.0
+
+### Minor Changes
+
+- [#1063](https://github.com/synergy-design-system/synergy-design-system/pull/1063) [`6e616f5`](https://github.com/synergy-design-system/synergy-design-system/commit/6e616f51007ebde567eeb33190518159becc7c32) Thanks [@kirchsuSICKAG](https://github.com/kirchsuSICKAG)! - Released on: 2025-11-17
+
+  feat: ✨ Brand update for syn-range and syn-range-tick (#966)
+
 ## 1.21.1
 
 ### Patch Changes

package/metadata/checksum.txt

@@ -1 +1 @@
-dd20adbd42b1195face89f971b318975
+9c17fca60aa5184e64a48343595cda82

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

@@ -41,7 +41,7 @@ export default css`
     border: none;
     box-shadow: inset 0 -1px 0 0 transparent;
     box-sizing: border-box;
-    color: var(--syn-color-neutral-950);
+    color: var(--syn-typography-color-text);
     cursor: pointer;
     display: inline-flex;
     font: var(--syn-font-sans);
@@ -103,7 +103,7 @@ export default css`
    * Basic set up for the nav item prefix.
    */
   .nav-item:not(.nav-item--disabled)::before {
-    background: var(--syn-color-neutral-600);
+    background: var(--syn-interactive-background-color-hover, var(--syn-color-neutral-50));
     content: '';
     display: block;
     height: 100%;
@@ -120,7 +120,7 @@ export default css`
    * We use opacity to make sure the border-bottom is visible if used in the prio-nav in header
    */
   .nav-item:not(.nav-item--disabled):hover::before {
-    opacity: 0.11;
+    opacity: 1;
   }
 
   /**
@@ -164,6 +164,7 @@ export default css`
    * The chevron indicates the use as a <details /> element OR a link
    */
   .nav-item__chevron {
+    color: var(--syn-interactive-quiet-color);
     font-size: var(--syn-font-size-x-large);
     margin-inline-start: var(--syn-spacing-x-small);
     rotate: 0deg;
@@ -193,7 +194,7 @@ export default css`
   /**
    * Horizontal navigation items should not break words
    */
-    .nav-item--horizontal .nav-item__content-container {
+  .nav-item--horizontal .nav-item__content-container {
     font-weight: var(--syn-font-weight-bold);
     white-space: nowrap;
   }
@@ -257,12 +258,8 @@ export default css`
     z-index: 1;
   }
 
-  .current-indicator--visible.current-indicator--disabled {
-    background: var(--syn-color-neutral-500);
-  }
-
   .current-indicator--visible {
-    background: var(--syn-color-primary-600);
+    background: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
   }
 
   .nav-item--horizontal .current-indicator {
@@ -295,28 +292,19 @@ export default css`
    * Dividers are optionally displayed in horizontal nav items
    */
   .divider {
-    --color: var(--syn-color-neutral-200);
-
     left: var(--syn-spacing-medium);
     margin: 0;
     position: absolute;
     right: var(--syn-spacing-medium);
     top: 0;
-    transition: border var(--syn-transition-fast) ease-in-out;
-  }
-
-  /**
-   * Hide the divider for active elements
-   */
-  .nav-item:focus-visible .divider {
-    --color: transparent;
   }
 
   /**
-   * Make sure the divider is not visible anymore when hovering
+   * Make sure the divider blends into the background on hover
+   * for items that are NOT disabled.
    */
-  .nav-item:not(.nav-item--disabled):hover .divider {
-    --color: transparent;
+  .nav-item--vertical:not(.nav-item--disabled):hover .divider {
+    --color: var(--syn-interactive-background-color-hover);
   }
 
   /**

package/metadata/packages/components/components/syn-nav-item/component.ts

@@ -449,7 +449,6 @@ export default class SynNavItem extends SynergyElement {
                 'nav-item__chevron': true,
                 'nav-item__chevron-open': this.open,
               })}
-              color="currentColor"
               library="system"
               name="chevron-down"
               part="chevron"

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

@@ -10,8 +10,8 @@ export default css`
     --thumb-hit-area-size: 1.4;
     --track-hit-area-size: var(--syn-spacing-medium);
     --track-active-offset: 0px;
-    --track-color-active: var(--syn-color-primary-600);
-    --track-color-inactive: var(--syn-color-neutral-200);
+    --track-color-active: var(--syn-range-track-color-active,var(--syn-color-primary-600));
+    --track-color-inactive: var(--syn-range-color-inactive, var(--syn-color-neutral-200));
     --track-height: var(--syn-spacing-2x-small);
 
     /* This is needed to get the full with of the element, including the border */
@@ -139,14 +139,14 @@ export default css`
 
   .track {
     background-color: var(--track-color-inactive);
-    border-radius: var(--syn-border-radius-small);
+    border-radius: var(--syn-border-radius-pill);
     height: var(--track-height);
     margin: calc((var(--full-thumb-size) - var(--track-height)) / 2) calc(var(--half-thumb-size) * -1);
   }
 
   .active-track {
     background-color: var(--track-color-active);
-    border-radius: var(--syn-border-radius-small);
+    border-radius: var(--syn-border-radius-pill);
     height: var(--track-height);
     margin: 0 calc(var(--half-thumb-size) * -1);
     position: absolute;
@@ -155,8 +155,8 @@ export default css`
   }
 
   .thumb {
-    background-color: var(--syn-color-primary-600);
-    border: var(--syn-focus-ring-width) solid var(--syn-color-neutral-0);
+    background-color: var(--syn-interactive-emphasis-color,var(--syn-color-primary-600));
+    border: var(--syn-focus-ring-width) solid var(--syn-input-border-color-offset, var(--syn-color-neutral-0));
     border-radius: var(--syn-border-radius-circle);
     cursor: pointer;
     display: block;
@@ -192,7 +192,7 @@ export default css`
   }
 
   .thumb.grabbed {
-    background: var(--syn-color-primary-950);
+    background: var(--syn-interactive-emphasis-color-active, var(--syn-color-primary-950));
     /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
     cursor: grabbing;
   }
@@ -202,7 +202,7 @@ export default css`
   }
 
   .thumb:not(.grabbed):focus-visible {
-    background: var(--syn-color-primary-600);
+    background: var(--syn-interactive-emphasis-color-hover,var(--syn-color-primary-900));
     outline: var(--syn-focus-ring);
     outline-offset: 0;
   }
@@ -223,7 +223,7 @@ export default css`
     }
 
     :host(:not([disabled])) .thumb:not(.grabbed):hover  {
-      background: var(--syn-color-primary-900);
+      background: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
     }
     
     :host(:not([disabled])) .thumb:hover::after  {
@@ -275,10 +275,10 @@ export default css`
   
 
   :host([data-user-invalid]) .active-track {
-    --track-color-active: var(--syn-input-border-color-focus-error);
+    --track-color-active: var(--syn-range-error-color ,var(--syn-input-border-color-focus-error));
   }
 
   :host([data-user-invalid]) .thumb {
-    background-color: var(--syn-input-border-color-focus-error);
+    background-color: var(--syn-range-error-color ,var(--syn-input-border-color-focus-error));
   }
 `;

package/metadata/packages/components/components/syn-range-tick/component.styles.ts

@@ -15,7 +15,7 @@ export default css`
   }
 
   .tick-line {
-    background: var(--syn-color-neutral-400);
+    background: var(--syn-range-tick-color, var(--syn-color-neutral-400));
     height: var(--tick-height);
   }
 

package/metadata/packages/components/components/syn-side-nav/component.styles.ts

@@ -32,9 +32,6 @@ export default css`
     position: absolute;
   }
 
-
-
-
   /****
    *
    * variant="default"
@@ -51,9 +48,6 @@ export default css`
     display: block;
   }
 
-
-
-
   /****
    *
    * variant="rail"
@@ -88,9 +82,6 @@ export default css`
     overflow: hidden;
   }
 
-
-
-
   /****
    *
    * variant="sticky"
@@ -114,7 +105,6 @@ export default css`
     --size: var(--side-nav-rail-width);
   }
 
-
   /*
    * For touch devices the content should not shrink in a flex container
    */ 
@@ -144,7 +134,6 @@ export default css`
    ****/
   .side-nav__footer-divider{
     --spacing: 0;
-    --color: var(--syn-color-neutral-300);
   }
 
   :not(.side-nav--open).side-nav--rail ::slotted(syn-nav-item){

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

@@ -1,5 +1,31 @@
 # Changelog
 
+## 2.61.0
+
+### Minor Changes
+
+- [#1076](https://github.com/synergy-design-system/synergy-design-system/pull/1076) [`1392ed2`](https://github.com/synergy-design-system/synergy-design-system/commit/1392ed23aba2b628344356adba0a78e1e8beff84) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-11-18
+
+  feat: ✨ Brand updates for `<syn-side-nav>`, `<syn-prio-nav>` and `<syn-nav-item>` (#967, #960)
+
+### Patch Changes
+
+- Updated dependencies [[`1392ed2`](https://github.com/synergy-design-system/synergy-design-system/commit/1392ed23aba2b628344356adba0a78e1e8beff84)]:
+  - @synergy-design-system/tokens@2.42.0
+
+## 2.60.0
+
+### Minor Changes
+
+- [#1063](https://github.com/synergy-design-system/synergy-design-system/pull/1063) [`6e616f5`](https://github.com/synergy-design-system/synergy-design-system/commit/6e616f51007ebde567eeb33190518159becc7c32) Thanks [@kirchsuSICKAG](https://github.com/kirchsuSICKAG)! - Released on: 2025-11-17
+
+  feat: ✨ Brand update for syn-range and syn-range-tick (#966)
+
+### Patch Changes
+
+- Updated dependencies [[`6e616f5`](https://github.com/synergy-design-system/synergy-design-system/commit/6e616f51007ebde567eeb33190518159becc7c32)]:
+  - @synergy-design-system/tokens@2.41.0
+
 ## 2.59.0
 
 ### Minor Changes

package/metadata/packages/tokens/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 2.42.0
+
+### Minor Changes
+
+- [#1076](https://github.com/synergy-design-system/synergy-design-system/pull/1076) [`1392ed2`](https://github.com/synergy-design-system/synergy-design-system/commit/1392ed23aba2b628344356adba0a78e1e8beff84) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-11-18
+
+  feat: ✨ Brand updates for `<syn-side-nav>`, `<syn-prio-nav>` and `<syn-nav-item>` (#967, #960)
+
+## 2.41.0
+
+### Minor Changes
+
+- [#1063](https://github.com/synergy-design-system/synergy-design-system/pull/1063) [`6e616f5`](https://github.com/synergy-design-system/synergy-design-system/commit/6e616f51007ebde567eeb33190518159becc7c32) Thanks [@kirchsuSICKAG](https://github.com/kirchsuSICKAG)! - Released on: 2025-11-17
+
+  feat: ✨ Brand update for syn-range and syn-range-tick (#966)
+
 ## 2.40.0
 
 ### Minor Changes

package/metadata/packages/tokens/dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.40.0
+ * @synergy-design-system/tokens version 2.41.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -173,6 +173,7 @@
   --syn-input-border-color-focus: var(--syn-color-neutral-950);
   --syn-input-border-color-focus-error: var(--syn-color-error-700);
   --syn-input-border-color-hover: var(--syn-color-neutral-950);
+  --syn-input-border-color-offset: var(--syn-panel-background-color);
   --syn-input-border-radius-large: var(--syn-border-radius-none);
   --syn-input-border-radius-medium: var(--syn-border-radius-none);
   --syn-input-border-radius-small: var(--syn-border-radius-none);
@@ -210,10 +211,10 @@
   --syn-input-placeholder-color: var(--syn-color-neutral-500);
   --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
   --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
-  --syn-input-readonly-background-color: var(--syn-color-neutral-300);
-  --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-300);
-  --syn-input-readonly-background-color-focus: var(--syn-color-neutral-300);
-  --syn-input-readonly-background-color-hover: var(--syn-color-neutral-300);
+  --syn-input-readonly-background-color: var(--syn-readonly-background-color);
+  --syn-input-readonly-background-color-disabled: var(--syn-readonly-background-color);
+  --syn-input-readonly-background-color-focus: var(--syn-readonly-background-color);
+  --syn-input-readonly-background-color-hover: var(--syn-readonly-background-color);
   --syn-input-required-content: "*";
   --syn-input-required-content-color: var(--syn-input-label-color);
   --syn-input-required-content-offset: -2px;
@@ -256,6 +257,11 @@
   --syn-panel-border-width: var(--syn-border-width-small);
   --syn-progress-indicator-color: var(--syn-color-primary-600);
   --syn-progress-track-color: var(--syn-color-neutral-200);
+  --syn-range-color-inactive: var(--syn-color-neutral-200);
+  --syn-range-error-color: var(--syn-color-error-700);
+  --syn-range-tick-color: var(--syn-color-neutral-400);
+  --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
+  --syn-readonly-background-color: var(--syn-color-neutral-300);
   --syn-spacing-2x-large: 48px;
   --syn-spacing-2x-small: 4px;
   --syn-spacing-3x-large: 64px;

package/metadata/packages/tokens/index.js

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.40.0
+ * @synergy-design-system/tokens version 2.41.0
  * SICK Global UX Foundation
  */
 
@@ -833,6 +833,11 @@ export const SynInputBorderColorFocusError = 'var(--syn-input-border-color-focus
  */
 export const SynInputBorderColorHover = 'var(--syn-input-border-color-hover)';
 
+/**
+ * @type {string}
+ */
+export const SynInputBorderColorOffset = 'var(--syn-input-border-color-offset)';
+
 /**
  * @type {string}
  */
@@ -1248,6 +1253,31 @@ export const SynProgressIndicatorColor = 'var(--syn-progress-indicator-color)';
  */
 export const SynProgressTrackColor = 'var(--syn-progress-track-color)';
 
+/**
+ * @type {string}
+ */
+export const SynRangeColorInactive = 'var(--syn-range-color-inactive)';
+
+/**
+ * @type {string}
+ */
+export const SynRangeErrorColor = 'var(--syn-range-error-color)';
+
+/**
+ * @type {string}
+ */
+export const SynRangeTickColor = 'var(--syn-range-tick-color)';
+
+/**
+ * @type {string}
+ */
+export const SynRangeTrackColorActive = 'var(--syn-range-track-color-active)';
+
+/**
+ * @type {string}
+ */
+export const SynReadonlyBackgroundColor = 'var(--syn-readonly-background-color)';
+
 /**
  * @type {string}
  */

package/metadata/packages/tokens/light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.40.0
+ * @synergy-design-system/tokens version 2.41.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -173,6 +173,7 @@
   --syn-input-border-color-focus: var(--syn-color-neutral-950);
   --syn-input-border-color-focus-error: var(--syn-color-error-700);
   --syn-input-border-color-hover: var(--syn-color-neutral-950);
+  --syn-input-border-color-offset: var(--syn-panel-background-color);
   --syn-input-border-radius-large: var(--syn-border-radius-none);
   --syn-input-border-radius-medium: var(--syn-border-radius-none);
   --syn-input-border-radius-small: var(--syn-border-radius-none);
@@ -210,10 +211,10 @@
   --syn-input-placeholder-color: var(--syn-color-neutral-500);
   --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
   --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
-  --syn-input-readonly-background-color: var(--syn-color-neutral-300);
-  --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-300);
-  --syn-input-readonly-background-color-focus: var(--syn-color-neutral-300);
-  --syn-input-readonly-background-color-hover: var(--syn-color-neutral-300);
+  --syn-input-readonly-background-color: var(--syn-readonly-background-color);
+  --syn-input-readonly-background-color-disabled: var(--syn-readonly-background-color);
+  --syn-input-readonly-background-color-focus: var(--syn-readonly-background-color);
+  --syn-input-readonly-background-color-hover: var(--syn-readonly-background-color);
   --syn-input-required-content: "*";
   --syn-input-required-content-color: var(--syn-input-label-color);
   --syn-input-required-content-offset: -2px;
@@ -256,6 +257,11 @@
   --syn-panel-border-width: var(--syn-border-width-small);
   --syn-progress-indicator-color: var(--syn-color-primary-600);
   --syn-progress-track-color: var(--syn-color-neutral-200);
+  --syn-range-color-inactive: var(--syn-color-neutral-200);
+  --syn-range-error-color: var(--syn-color-error-700);
+  --syn-range-tick-color: var(--syn-color-neutral-400);
+  --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
+  --syn-readonly-background-color: var(--syn-color-neutral-300);
   --syn-spacing-2x-large: 48px;
   --syn-spacing-2x-small: 4px;
   --syn-spacing-3x-large: 64px;

package/metadata/packages/tokens/sick2018_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.40.0
+ * @synergy-design-system/tokens version 2.41.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -173,6 +173,7 @@
   --syn-input-border-color-focus: var(--syn-color-neutral-950);
   --syn-input-border-color-focus-error: var(--syn-color-error-700);
   --syn-input-border-color-hover: var(--syn-color-neutral-950);
+  --syn-input-border-color-offset: var(--syn-panel-background-color);
   --syn-input-border-radius-large: var(--syn-border-radius-none);
   --syn-input-border-radius-medium: var(--syn-border-radius-none);
   --syn-input-border-radius-small: var(--syn-border-radius-none);
@@ -210,10 +211,10 @@
   --syn-input-placeholder-color: var(--syn-color-neutral-500);
   --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
   --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
-  --syn-input-readonly-background-color: var(--syn-color-neutral-300);
-  --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-300);
-  --syn-input-readonly-background-color-focus: var(--syn-color-neutral-300);
-  --syn-input-readonly-background-color-hover: var(--syn-color-neutral-300);
+  --syn-input-readonly-background-color: var(--syn-readonly-background-color);
+  --syn-input-readonly-background-color-disabled: var(--syn-readonly-background-color);
+  --syn-input-readonly-background-color-focus: var(--syn-readonly-background-color);
+  --syn-input-readonly-background-color-hover: var(--syn-readonly-background-color);
   --syn-input-required-content: "*";
   --syn-input-required-content-color: var(--syn-input-label-color);
   --syn-input-required-content-offset: -2px;
@@ -256,6 +257,11 @@
   --syn-panel-border-width: var(--syn-border-width-small);
   --syn-progress-indicator-color: var(--syn-color-primary-600);
   --syn-progress-track-color: var(--syn-color-neutral-200);
+  --syn-range-color-inactive: var(--syn-color-neutral-200);
+  --syn-range-error-color: var(--syn-color-error-700);
+  --syn-range-tick-color: var(--syn-color-neutral-400);
+  --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
+  --syn-readonly-background-color: var(--syn-color-neutral-300);
   --syn-spacing-2x-large: 48px;
   --syn-spacing-2x-small: 4px;
   --syn-spacing-3x-large: 64px;

package/metadata/packages/tokens/sick2018_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.40.0
+ * @synergy-design-system/tokens version 2.41.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -173,6 +173,7 @@
   --syn-input-border-color-focus: var(--syn-color-neutral-950);
   --syn-input-border-color-focus-error: var(--syn-color-error-700);
   --syn-input-border-color-hover: var(--syn-color-neutral-950);
+  --syn-input-border-color-offset: var(--syn-panel-background-color);
   --syn-input-border-radius-large: var(--syn-border-radius-none);
   --syn-input-border-radius-medium: var(--syn-border-radius-none);
   --syn-input-border-radius-small: var(--syn-border-radius-none);
@@ -210,10 +211,10 @@
   --syn-input-placeholder-color: var(--syn-color-neutral-500);
   --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
   --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
-  --syn-input-readonly-background-color: var(--syn-color-neutral-300);
-  --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-300);
-  --syn-input-readonly-background-color-focus: var(--syn-color-neutral-300);
-  --syn-input-readonly-background-color-hover: var(--syn-color-neutral-300);
+  --syn-input-readonly-background-color: var(--syn-readonly-background-color);
+  --syn-input-readonly-background-color-disabled: var(--syn-readonly-background-color);
+  --syn-input-readonly-background-color-focus: var(--syn-readonly-background-color);
+  --syn-input-readonly-background-color-hover: var(--syn-readonly-background-color);
   --syn-input-required-content: "*";
   --syn-input-required-content-color: var(--syn-input-label-color);
   --syn-input-required-content-offset: -2px;
@@ -256,6 +257,11 @@
   --syn-panel-border-width: var(--syn-border-width-small);
   --syn-progress-indicator-color: var(--syn-color-primary-600);
   --syn-progress-track-color: var(--syn-color-neutral-200);
+  --syn-range-color-inactive: var(--syn-color-neutral-200);
+  --syn-range-error-color: var(--syn-color-error-700);
+  --syn-range-tick-color: var(--syn-color-neutral-400);
+  --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
+  --syn-readonly-background-color: var(--syn-color-neutral-300);
   --syn-spacing-2x-large: 48px;
   --syn-spacing-2x-small: 4px;
   --syn-spacing-3x-large: 64px;

package/metadata/packages/tokens/sick2025_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.40.0
+ * @synergy-design-system/tokens version 2.41.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -173,6 +173,7 @@
   --syn-input-border-color-focus: var(--syn-color-primary-400);
   --syn-input-border-color-focus-error: var(--syn-color-error-600);
   --syn-input-border-color-hover: var(--syn-color-primary-400);
+  --syn-input-border-color-offset: var(--syn-panel-background-color);
   --syn-input-border-radius-large: var(--syn-border-radius-medium);
   --syn-input-border-radius-medium: var(--syn-border-radius-medium);
   --syn-input-border-radius-small: var(--syn-border-radius-medium);
@@ -210,10 +211,10 @@
   --syn-input-placeholder-color: var(--syn-color-neutral-800);
   --syn-input-placeholder-color-disabled: var(--syn-color-neutral-800);
   --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
-  --syn-input-readonly-background-color: var(--syn-color-neutral-300);
-  --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-300);
-  --syn-input-readonly-background-color-focus: var(--syn-color-neutral-300);
-  --syn-input-readonly-background-color-hover: var(--syn-color-neutral-300);
+  --syn-input-readonly-background-color: var(--syn-readonly-background-color);
+  --syn-input-readonly-background-color-disabled: var(--syn-readonly-background-color);
+  --syn-input-readonly-background-color-focus: var(--syn-readonly-background-color);
+  --syn-input-readonly-background-color-hover: var(--syn-readonly-background-color);
   --syn-input-required-content: "*";
   --syn-input-required-content-color: var(--syn-input-label-color);
   --syn-input-required-content-offset: -2px;
@@ -256,6 +257,11 @@
   --syn-panel-border-width: var(--syn-border-width-small);
   --syn-progress-indicator-color: var(--syn-color-primary-500);
   --syn-progress-track-color: var(--syn-color-neutral-300);
+  --syn-range-color-inactive: var(--syn-color-neutral-300);
+  --syn-range-error-color: var(--syn-color-error-600);
+  --syn-range-tick-color: var(--syn-color-neutral-600);
+  --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
+  --syn-readonly-background-color: var(--syn-color-neutral-300);
   --syn-spacing-2x-large: 48px;
   --syn-spacing-2x-small: 4px;
   --syn-spacing-3x-large: 64px;
@@ -274,8 +280,8 @@
   --syn-table-background-color-alternating: var(--syn-color-neutral-200);
   --syn-table-background-color-header: var(--syn-color-neutral-300);
   --syn-table-border-color: var(--syn-color-neutral-300);
-  --syn-table-shadow-end: rgba(0, 0, 0, 0);
-  --syn-table-shadow-start: rgba(0, 0, 0, 0.8);
+  --syn-table-shadow-end: rgba(13, 13, 13, 0);
+  --syn-table-shadow-start: rgba(13, 13, 13, 0.8);
   --syn-text-decoration-default: none;
   --syn-text-decoration-underline: underline;
   --syn-toggle-size-large: var(--syn-spacing-large);
@@ -302,15 +308,15 @@
   --syn-z-index-dropdown: 900; /** Shoelace compatibility DO NOT USE */
   --syn-z-index-toast: 950; /** Shoelace compatibility DO NOT USE */
   --syn-z-index-tooltip: 1000; /** Shoelace compatibility DO NOT USE */
-  --syn-shadow-medium: 0px 1px 2px 0px rgba(0, 0, 0, 0.08), 0px 1px 4px 0px rgba(0, 0, 0, 0.08), 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
-  --syn-shadow-large: 0px 0px 3px 0px rgba(0, 0, 0, 0.12), 0px 2px 6px 0px rgba(0, 0, 0, 0.12), 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
-  --syn-shadow-x-large: 0px 1px 4px 0px rgba(0, 0, 0, 0.12), 0px 8px 24px 0px rgba(0, 0, 0, 0.12), 0px 16px 48px 0px rgba(0, 0, 0, 0.16);
-  --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(0, 0, 0, 0.12), 0px 3px 8px 0px rgba(0, 0, 0, 0.12), 0px 4px 12px 0px rgba(0, 0, 0, 0.16);
-  --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(0, 0, 0, 0.12), 0px -3px 8px 0px rgba(0, 0, 0, 0.12), 0px -4px 12px 0px rgba(0, 0, 0, 0.16);
-  --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(0, 0, 0, 0.12), -3px 0px 8px 0px rgba(0, 0, 0, 0.12), -4px 0px 12px 0px rgba(0, 0, 0, 0.16);
-  --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(0, 0, 0, 0.12), 3px 0px 8px 0px rgba(0, 0, 0, 0.12), 4px 0px 12px 0px rgba(0, 0, 0, 0.16);
-  --syn-shadow-x-small: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 4px 0px rgba(0, 0, 0, 0.04), 0px 2px 8px 0px rgba(0, 0, 0, 0.04);
-  --syn-shadow-small: 0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 8px 0px rgba(0, 0, 0, 0.06);
+  --syn-shadow-medium: 0px 1px 2px 0px rgba(13, 13, 13, 0.08), 0px 1px 4px 0px rgba(13, 13, 13, 0.08), 0px 2px 8px 0px rgba(13, 13, 13, 0.08);
+  --syn-shadow-large: 0px 0px 3px 0px rgba(13, 13, 13, 0.12), 0px 2px 6px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.16);
+  --syn-shadow-x-large: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 8px 24px 0px rgba(13, 13, 13, 0.12), 0px 16px 48px 0px rgba(13, 13, 13, 0.16);
+  --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.12), 0px 4px 12px 0px rgba(13, 13, 13, 0.16);
+  --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(13, 13, 13, 0.12), 0px -3px 8px 0px rgba(13, 13, 13, 0.12), 0px -4px 12px 0px rgba(13, 13, 13, 0.16);
+  --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(13, 13, 13, 0.12), -3px 0px 8px 0px rgba(13, 13, 13, 0.12), -4px 0px 12px 0px rgba(13, 13, 13, 0.16);
+  --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(13, 13, 13, 0.12), 3px 0px 8px 0px rgba(13, 13, 13, 0.12), 4px 0px 12px 0px rgba(13, 13, 13, 0.16);
+  --syn-shadow-x-small: 0px 1px 2px 0px rgba(13, 13, 13, 0.04), 0px 1px 4px 0px rgba(13, 13, 13, 0.04), 0px 2px 8px 0px rgba(13, 13, 13, 0.04);
+  --syn-shadow-small: 0px 1px 2px 0px rgba(13, 13, 13, 0.06), 0px 1px 4px 0px rgba(13, 13, 13, 0.06), 0px 2px 8px 0px rgba(13, 13, 13, 0.06);
   --syn-body-x-small-regular: 400 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-body-x-small-semibold: 600 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-body-x-small-bold: 600 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

package/metadata/packages/tokens/sick2025_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.40.0
+ * @synergy-design-system/tokens version 2.41.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -173,6 +173,7 @@
   --syn-input-border-color-focus: var(--syn-color-primary-700);
   --syn-input-border-color-focus-error: var(--syn-color-error-600);
   --syn-input-border-color-hover: var(--syn-color-primary-700);
+  --syn-input-border-color-offset: var(--syn-panel-background-color);
   --syn-input-border-radius-large: var(--syn-border-radius-medium);
   --syn-input-border-radius-medium: var(--syn-border-radius-medium);
   --syn-input-border-radius-small: var(--syn-border-radius-medium);
@@ -210,10 +211,10 @@
   --syn-input-placeholder-color: var(--syn-color-neutral-700);
   --syn-input-placeholder-color-disabled: var(--syn-color-neutral-700);
   --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
-  --syn-input-readonly-background-color: #e6e1dc;
-  --syn-input-readonly-background-color-disabled: #e6e1dc;
-  --syn-input-readonly-background-color-focus: #e6e1dc;
-  --syn-input-readonly-background-color-hover: #e6e1dc;
+  --syn-input-readonly-background-color: var(--syn-readonly-background-color);
+  --syn-input-readonly-background-color-disabled: var(--syn-readonly-background-color);
+  --syn-input-readonly-background-color-focus: var(--syn-readonly-background-color);
+  --syn-input-readonly-background-color-hover: var(--syn-readonly-background-color);
   --syn-input-required-content: "*";
   --syn-input-required-content-color: var(--syn-input-label-color);
   --syn-input-required-content-offset: -2px;
@@ -256,6 +257,11 @@
   --syn-panel-border-width: var(--syn-border-width-small);
   --syn-progress-indicator-color: var(--syn-color-primary-700);
   --syn-progress-track-color: var(--syn-color-neutral-100);
+  --syn-range-color-inactive: var(--syn-color-neutral-100);
+  --syn-range-error-color: var(--syn-color-error-600);
+  --syn-range-tick-color: var(--syn-color-neutral-500);
+  --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
+  --syn-readonly-background-color: #e6e1dc;
   --syn-spacing-2x-large: 48px;
   --syn-spacing-2x-small: 4px;
   --syn-spacing-3x-large: 64px;

package/metadata/static/components/syn-nav-item/docs.md

@@ -33,7 +33,12 @@ The current attribute provides the user feedback about which of the navigation e
 Use the horizontal attribute to indicate that an element is used in a horizontal navigation. (The example shows it in combination with the current attribute, to indicate the difference.)
 
 ```html
-<syn-nav-item current="" horizontal="">Horizontal navigation item</syn-nav-item>
+<div style="display: flex; gap: var(--syn-spacing-large)">
+  <syn-nav-item current="" horizontal=""
+    >Horizontal navigation item</syn-nav-item
+  >
+  <syn-nav-item horizontal="">Horizontal navigation item</syn-nav-item>
+</div>
 ```
 
 ---

package/package.json

@@ -28,11 +28,11 @@
     "serve-handler": "^6.1.6",
     "ts-jest": "^29.4.0",
     "typescript": "^5.9.3",
+    "@synergy-design-system/components": "2.61.0",
     "@synergy-design-system/docs": "0.1.0",
-    "@synergy-design-system/eslint-config-syn": "^0.1.0",
-    "@synergy-design-system/components": "2.59.0",
+    "@synergy-design-system/tokens": "^2.42.0",
     "@synergy-design-system/styles": "1.9.0",
-    "@synergy-design-system/tokens": "^2.40.0"
+    "@synergy-design-system/eslint-config-syn": "^0.1.0"
   },
   "exports": {
     ".": {
@@ -66,7 +66,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "1.21.1",
+  "version": "1.23.0",
   "scripts": {
     "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
     "build:all": "pnpm run build && pnpm run build:storybook",