@synergy-design-system/mcp 2.4.1 → 2.6.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog
 
+## 2.6.0
+
+### Minor Changes
+
+- [#1188](https://github.com/synergy-design-system/synergy-design-system/pull/1188) [`c60deb9`](https://github.com/synergy-design-system/synergy-design-system/commit/c60deb9da1175404ddaa25b2c19ce9e182205cd2) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-02-19
+
+  feat: ✨ `<syn-header>` sticky behavior (#529)
+
+  `<syn-header>` now has a new `sticky` boolean property that can be used when a sticky header is needed, e.g. `<syn-header sticky></syn-header>`.
+  This adds `position: sticky`, as well as a small shadow that indicates that the header is stuck.
+  You can configure the `top` position via the new `--sticky-position` css property (defaults to `0` to make it stick to the top).
+
+## 2.5.0
+
+### Minor Changes
+
+- [#1191](https://github.com/synergy-design-system/synergy-design-system/pull/1191) [`30f3b74`](https://github.com/synergy-design-system/synergy-design-system/commit/30f3b74891cf693735a792a901c5b23b016c71b8) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-02-19
+
+  feat: ✨ Add new size `small` to `<syn-details>` and `<syn-accordion>` (#1154)
+
+  The `<syn-details>` element was the only element with a `size` property that had no `small` variant.
+  This was now added for consistency with other elements that have a `size` property.
+
+  This can be used via `<syn-details size="small"></syn-details>` or `<syn-accordion size="small"></syn-accordion>`.
+
 ## 2.4.1
 
 ### Patch Changes

package/metadata/checksum.txt

@@ -1 +1 @@
-c8bcf282abcae6742354cf271ba13252
+b0413e89368486e50f5f493fa46fe72b

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

@@ -38,7 +38,7 @@ export default class SynAccordion extends SynergyElement {
   @property({ reflect: true, type: Boolean }) contained = false;
 
   /** The size that should be applied to all slotted `<syn-details>` elements */
-  @property({ reflect: true }) size: 'medium' | 'large' = 'medium';
+  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
 
   private adjustDetailsSize() {
     this.detailsInDefaultSlot.forEach(detail => {

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

@@ -2,30 +2,43 @@
 import { css } from 'lit';
 
 export default css`
-	/* stylelint-disable */
   :host {
+    /* Size-dependent custom properties (default to medium values) */
+    --details-header-padding: var(--syn-spacing-medium-large) 0;
+    --details-content-padding: var(--syn-spacing-medium) 0 var(--syn-spacing-large);
+    --details-summary-font: var(--syn-body-medium-bold);
+    --details-content-font-size: var(--syn-font-size-small);
+    --details-icon-size: var(--syn-spacing-large);
+    --details-slotted-icon-size: var(--syn-spacing-large);
+    
+    /* Contained variant custom properties */
+    --details-header-padding-contained: var(--syn-spacing-medium-large) var(--syn-spacing-large);
+    --details-content-padding-contained: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-large);
+
     display: block;
   }
 
   .details {
-    border: solid 1px var(--syn-color-neutral-200);
-    border-radius: var(--syn-border-radius-medium);
-    background-color: var(--syn-color-neutral-0);
+    background-color: transparent;
+    border: 1px solid var(--syn-panel-border-color);
+    border-radius: var(--syn-border-radius-none);
+    border-width: 0 0 var(--syn-border-width-small);
     overflow-anchor: none;
   }
 
+  /** #429: Use token for opacity */
   .details--disabled {
-    opacity: 0.5;
+    opacity: var(--syn-opacity-50);
   }
 
   .details__header {
-    display: flex;
     align-items: center;
     border-radius: inherit;
-    padding: var(--syn-spacing-medium);
-    user-select: none;
-    -webkit-user-select: none;
     cursor: pointer;
+    display: flex;
+    gap: var(--syn-spacing-medium);
+    padding: var(--details-header-padding);
+    user-select: none;
   }
 
   .details__header::-webkit-details-marker {
@@ -46,25 +59,41 @@ export default css`
   }
 
   .details--disabled .details__header:focus-visible {
-    outline: none;
     box-shadow: none;
+    outline: none;
   }
 
   .details__summary {
-    flex: 1 1 auto;
-    display: flex;
     align-items: center;
+    color: var(--syn-typography-color-text);
+    display: flex;
+    flex: 1 1 auto;
+    font: var(--details-summary-font);
   }
 
   .details__summary-icon {
-    flex: 0 0 auto;
-    display: flex;
     align-items: center;
+    align-self: flex-start;
+    color: var(--syn-color-neutral-950);
+    display: flex;
+    flex: 0 0 auto;
+    font-size: var(--details-icon-size);
+    position: relative;
+
+    /**
+     * As we are using an alignment of "start"  instead of "center" make sure
+     * the arrow starts on the same visual line as the first line of headline text
+     */
+    top: 2px;
     transition: var(--syn-transition-medium) rotate ease;
   }
 
+  /**
+   * As we are using top/down arrows for the details element,
+   * we have to adjust the rotation of the icon when the details is open.
+   */
   .details--open .details__summary-icon {
-    rotate: 90deg;
+    rotate: var(--syn-details-open-rotation);
   }
 
   .details--open slot[name='expand-icon'],
@@ -78,6 +107,75 @@ export default css`
 
   .details__content {
     display: block;
-    padding: var(--syn-spacing-medium);
+    font-size: var(--details-content-font-size);
+    line-height: var(--syn-line-height-normal);
+    padding: var(--details-content-padding);
+  }
+
+  /**
+   * Size variants
+   */
+  .details--size-small {
+    --details-header-padding: var(--syn-spacing-small) 0;
+    --details-content-padding: var(--syn-spacing-small) 0 var(--syn-spacing-medium-large);
+    --details-summary-font: var(--syn-body-small-bold);
+    --details-content-font-size: var(--syn-font-size-x-small);
+    --details-icon-size: var(--syn-spacing-medium-large);
+    --details-slotted-icon-size: var(--syn-spacing-medium-large);
+    --details-header-padding-contained: var(--syn-spacing-small) var(--syn-spacing-large);
+    --details-content-padding-contained: var(--syn-spacing-small) var(--syn-spacing-large) var(--syn-spacing-medium-large);
+  }
+
+  /* stylelint-disable-next-line no-descending-specificity */
+  .details--size-small .details__header {
+    min-height: var(--syn-spacing-large);
+  }
+
+  .details--size-large {
+    --details-header-padding: var(--syn-spacing-large) 0;
+    --details-content-padding: var(--syn-spacing-medium-large) 0 var(--syn-spacing-large);
+    --details-summary-font: var(--syn-body-large-bold);
+    --details-content-font-size: var(--syn-font-size-medium);
+    --details-icon-size: var(--syn-spacing-x-large);
+    --details-slotted-icon-size: var(--syn-spacing-x-large);
+    --details-header-padding-contained: var(--syn-spacing-large);
+    --details-content-padding-contained: var(--syn-spacing-medium-large) var(--syn-spacing-large) var(--syn-spacing-large);
+  }
+
+  .details__summary::slotted(syn-icon) {
+    /* Avoid shrinking of the icon, if the text content of the summary is very long and multi line */
+    flex-shrink: 0;
+    font-size: var(--details-slotted-icon-size);
+    margin-right: var(--syn-spacing-small);
+  }
+
+  /**
+   * Add a visually visible hover effect to the summary element
+   */
+  .details:not(.details--disabled) .details__header:hover .details__summary,
+  .details:not(.details--disabled) .details__header:hover .details__summary-icon {
+    color: var(--syn-interactive-quiet-color-hover);
+  }
+
+  /**
+   *  Contained style
+   */
+  .details--contained {
+    background-color: var(--syn-panel-background-color);
+    border-radius: var(--syn-border-radius-medium);
+    border-width: var(--syn-panel-border-width);
+  }
+
+  /* stylelint-disable-next-line no-descending-specificity */
+  .details--contained .details__header {
+    padding: var(--details-header-padding-contained);
+  }
+
+  .details--contained .details__content {
+    padding: var(--details-content-padding-contained);
+  }
+
+  .details--contained .details__header:focus-visible {
+    border-radius: var(--syn-border-radius-medium);
   }
 `;

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

@@ -11,7 +11,6 @@ import componentStyles from '../../styles/component.styles.js';
 import SynergyElement from '../../internal/synergy-element.js';
 import SynIcon from '../icon/icon.component.js';
 import styles from './details.styles.js';
-import customStyles from './details.custom.styles.js';
 import type { CSSResultGroup } from 'lit';
 import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
 
@@ -47,7 +46,7 @@ import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator
  */
 @enableDefaultSettings('SynDetails')
 export default class SynDetails extends SynergyElement {
-  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
+  static styles: CSSResultGroup = [componentStyles, styles];
 
   static dependencies = {
     'syn-icon': SynIcon
@@ -78,7 +77,7 @@ export default class SynDetails extends SynergyElement {
   @property({ type: Boolean, reflect: true }) contained = false;
 
   /** The details's size. */
-  @property({ reflect: true }) size: 'medium' | 'large' = 'medium';
+  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
 
   firstUpdated() {
     this.body.style.height = this.open ? 'auto' : '0';
@@ -205,6 +204,7 @@ export default class SynDetails extends SynergyElement {
         part="base"
         class=${classMap({
           details: true,
+          'details--size-small': this.size === 'small',
           'details--size-medium': this.size === 'medium',
           'details--size-large': this.size === 'large',
           'details--open': this.open,

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

@@ -47,6 +47,8 @@ import '@synergy-design-system/components/components/header/header.js';
  * @csspart meta-navigation - The Item wrapping the optional application menu
  * @csspart navigation - The wrapper that is holding the optional top navigation section
  * @csspart burger-menu-toggle-button - The button that toggles the burger menu
+ *
+ * @cssproperty --sticky-position - The position of the sticky header from the top of the viewport. Defaults to the top of the screen.
  */
 @Component({
   selector: 'syn-header',
@@ -109,6 +111,20 @@ The following values can be used:
     return this.nativeElement.burgerMenu;
   }
 
+  /**
+* Makes the header stick to the top of the viewport when scrolling.
+Also applies a shadow to the header when scrolling.
+ */
+  @Input()
+  set sticky(v: '' | SynHeader['sticky']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.sticky = v === '' || v),
+    );
+  }
+  get sticky(): SynHeader['sticky'] {
+    return this.nativeElement.sticky;
+  }
+
   /**
    * Emitted when the burger menu is toggled to closed
    */

package/metadata/packages/components/components/syn-header/component.react.ts

@@ -44,6 +44,8 @@ Component.define('syn-header');
  * @csspart meta-navigation - The Item wrapping the optional application menu
  * @csspart navigation - The wrapper that is holding the optional top navigation section
  * @csspart burger-menu-toggle-button - The button that toggles the burger menu
+ *
+ * @cssproperty --sticky-position - The position of the sticky header from the top of the viewport. Defaults to the top of the screen.
  */
 export const SynHeader = createComponent({
   displayName: 'SynHeader',

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

@@ -2,6 +2,8 @@ import { css } from 'lit';
 
 export default css`
   :host {
+    --sticky-position: 0;
+
     display: block;
   }
 
@@ -125,4 +127,16 @@ export default css`
   .header--has-burger-menu .header__content {
     padding-left: var(--syn-spacing-medium);
   }
+
+  /**
+   * #529: Sticky header styles
+   */
+  :host([sticky]) {
+    box-shadow: var(--syn-shadow-sticky-down);
+    position: sticky;
+    top: var(--sticky-position);
+
+    /* Make sure the header is above all other content, but below any potential modals or overlays */
+    z-index: calc(infinity - 1);
+  }
 `;

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

@@ -41,6 +41,8 @@ import { watch } from '../../internal/watch.js';
  * @csspart meta-navigation - The Item wrapping the optional application menu
  * @csspart navigation - The wrapper that is holding the optional top navigation section
  * @csspart burger-menu-toggle-button - The button that toggles the burger menu
+ *
+ * @cssproperty --sticky-position - The position of the sticky header from the top of the viewport. Defaults to the top of the screen.
  */
 export default class SynHeader extends SynergyElement {
   static styles: CSSResultGroup = [
@@ -82,6 +84,12 @@ export default class SynHeader extends SynergyElement {
    */
   @property({ attribute: 'burger-menu', reflect: true }) burgerMenu: 'hidden' | 'open' | 'closed' = 'hidden';
 
+  /**
+   * Makes the header stick to the top of the viewport when scrolling.
+   * Also applies a shadow to the header when scrolling.
+   */
+  @property({ reflect: true, type: Boolean }) sticky = false;
+
   /**
    * The side nav
    */

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

@@ -34,6 +34,8 @@
  * @csspart meta-navigation - The Item wrapping the optional application menu
  * @csspart navigation - The wrapper that is holding the optional top navigation section
  * @csspart burger-menu-toggle-button - The button that toggles the burger menu
+ *
+ * @cssproperty --sticky-position - The position of the sticky header from the top of the viewport. Defaults to the top of the screen.
  */
 import { computed, ref } from 'vue';
 import '@synergy-design-system/components/components/header/header.js';
@@ -68,6 +70,12 @@ The following values can be used:
 - closed: The burger menu is visible and shows the open icon
  */
   burgerMenu?: SynHeader['burgerMenu'];
+
+  /**
+* Makes the header stick to the top of the viewport when scrolling.
+Also applies a shadow to the header when scrolling.
+ */
+  sticky?: SynHeader['sticky'];
 }>();
 
 // Make sure prop binding only forwards the props that are actually there.

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

@@ -1,5 +1,40 @@
 # Changelog
 
+## 3.4.0
+
+### Minor Changes
+
+- [#1188](https://github.com/synergy-design-system/synergy-design-system/pull/1188) [`c60deb9`](https://github.com/synergy-design-system/synergy-design-system/commit/c60deb9da1175404ddaa25b2c19ce9e182205cd2) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-02-19
+
+  feat: ✨ `<syn-header>` sticky behavior (#529)
+
+  `<syn-header>` now has a new `sticky` boolean property that can be used when a sticky header is needed, e.g. `<syn-header sticky></syn-header>`.
+  This adds `position: sticky`, as well as a small shadow that indicates that the header is stuck.
+  You can configure the `top` position via the new `--sticky-position` css property (defaults to `0` to make it stick to the top).
+
+### Patch Changes
+
+- Updated dependencies [[`c60deb9`](https://github.com/synergy-design-system/synergy-design-system/commit/c60deb9da1175404ddaa25b2c19ce9e182205cd2)]:
+  - @synergy-design-system/tokens@3.4.0
+
+## 3.3.0
+
+### Minor Changes
+
+- [#1191](https://github.com/synergy-design-system/synergy-design-system/pull/1191) [`30f3b74`](https://github.com/synergy-design-system/synergy-design-system/commit/30f3b74891cf693735a792a901c5b23b016c71b8) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-02-19
+
+  feat: ✨ Add new size `small` to `<syn-details>` and `<syn-accordion>` (#1154)
+
+  The `<syn-details>` element was the only element with a `size` property that had no `small` variant.
+  This was now added for consistency with other elements that have a `size` property.
+
+  This can be used via `<syn-details size="small"></syn-details>` or `<syn-accordion size="small"></syn-accordion>`.
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @synergy-design-system/tokens@3.3.0
+
 ## 3.2.1
 
 ### Patch Changes

package/metadata/packages/styles/index.css

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

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

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

package/metadata/packages/styles/link.css

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

package/metadata/packages/styles/tables.css

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

package/metadata/packages/styles/typography.css

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

package/metadata/packages/tokens/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 3.4.0
+
+### Minor Changes
+
+- [#1188](https://github.com/synergy-design-system/synergy-design-system/pull/1188) [`c60deb9`](https://github.com/synergy-design-system/synergy-design-system/commit/c60deb9da1175404ddaa25b2c19ce9e182205cd2) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-02-19
+
+  feat: ✨ `<syn-header>` sticky behavior (#529)
+
+  `<syn-header>` now has a new `sticky` boolean property that can be used when a sticky header is needed, e.g. `<syn-header sticky></syn-header>`.
+  This adds `position: sticky`, as well as a small shadow that indicates that the header is stuck.
+  You can configure the `top` position via the new `--sticky-position` css property (defaults to `0` to make it stick to the top).
+
+## 3.3.0
+
 ## 3.2.1
 
 ### Patch Changes

package/metadata/packages/tokens/dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.2.0
+ * @synergy-design-system/tokens version 3.3.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -307,8 +307,9 @@
   --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); /** Will be DEPRECATED */
+  --syn-page-background: var(--syn-page-background-color); /** Will be DEPRECATED */
   --syn-page-background-color: var(--syn-color-neutral-0);
+  --syn-page-background-color-muted: 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);
@@ -320,6 +321,16 @@
   --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-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-shadow-sticky-down: 0px 3px 8px 0px rgba(13, 13, 13, 0.16);
   --syn-spacing-1-5x-large: 40px;
   --syn-spacing-2x-large: 48px;
   --syn-spacing-2x-small: 4px;
@@ -373,15 +384,6 @@
   --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(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/index.js

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.2.0
+ * @synergy-design-system/tokens version 3.3.0
  * SICK Global UX Foundation
  */
 
@@ -1513,6 +1513,11 @@ export const SynPageBackground = 'var(--syn-page-background)';
  */
 export const SynPageBackgroundColor = 'var(--syn-page-background-color)';
 
+/**
+ * @type {string}
+ */
+export const SynPageBackgroundColorMuted = 'var(--syn-page-background-color-muted)';
+
 /**
  * @type {string}
  */
@@ -1568,6 +1573,56 @@ export const SynRangeTrackColorActive = 'var(--syn-range-track-color-active)';
  */
 export const SynReadonlyBackgroundColor = 'var(--syn-readonly-background-color)';
 
+/**
+ * @type {string}
+ */
+export const SynShadowMedium = 'var(--syn-shadow-medium)';
+
+/**
+ * @type {string}
+ */
+export const SynShadowLarge = 'var(--syn-shadow-large)';
+
+/**
+ * @type {string}
+ */
+export const SynShadowXLarge = 'var(--syn-shadow-x-large)';
+
+/**
+ * @type {string}
+ */
+export const SynShadowOverflowDown = 'var(--syn-shadow-overflow-down)';
+
+/**
+ * @type {string}
+ */
+export const SynShadowOverflowUp = 'var(--syn-shadow-overflow-up)';
+
+/**
+ * @type {string}
+ */
+export const SynShadowOverflowLeft = 'var(--syn-shadow-overflow-left)';
+
+/**
+ * @type {string}
+ */
+export const SynShadowOverflowRight = 'var(--syn-shadow-overflow-right)';
+
+/**
+ * @type {string}
+ */
+export const SynShadowXSmall = 'var(--syn-shadow-x-small)';
+
+/**
+ * @type {string}
+ */
+export const SynShadowSmall = 'var(--syn-shadow-small)';
+
+/**
+ * @type {string}
+ */
+export const SynShadowStickyDown = 'var(--syn-shadow-sticky-down)';
+
 /**
  * @type {string}
  */
@@ -1833,51 +1888,6 @@ export const SynZIndexToast = 'var(--syn-z-index-toast)';
  */
 export const SynZIndexTooltip = 'var(--syn-z-index-tooltip)';
 
-/**
- * @type {string}
- */
-export const SynShadowMedium = 'var(--syn-shadow-medium)';
-
-/**
- * @type {string}
- */
-export const SynShadowLarge = 'var(--syn-shadow-large)';
-
-/**
- * @type {string}
- */
-export const SynShadowXLarge = 'var(--syn-shadow-x-large)';
-
-/**
- * @type {string}
- */
-export const SynShadowOverflowDown = 'var(--syn-shadow-overflow-down)';
-
-/**
- * @type {string}
- */
-export const SynShadowOverflowUp = 'var(--syn-shadow-overflow-up)';
-
-/**
- * @type {string}
- */
-export const SynShadowOverflowLeft = 'var(--syn-shadow-overflow-left)';
-
-/**
- * @type {string}
- */
-export const SynShadowOverflowRight = 'var(--syn-shadow-overflow-right)';
-
-/**
- * @type {string}
- */
-export const SynShadowXSmall = 'var(--syn-shadow-x-small)';
-
-/**
- * @type {string}
- */
-export const SynShadowSmall = 'var(--syn-shadow-small)';
-
 /**
  * @type {string}
  */