@synergy-design-system/metadata 3.16.1 → 3.18.0

package/data/layers/full/component/component:syn-radio-button/components/radio-button.styles.ts

@@ -1,30 +1,92 @@
-/* eslint-disable */
 import { css } from 'lit';
-import buttonStyles from '../button/button.styles.js';
 
 export default css`
-	/* stylelint-disable */
-  ${buttonStyles}
-
-  .button__prefix,
-  .button__suffix,
-  .button__label {
-    display: inline-flex;
-    position: relative;
-    align-items: center;
-  }
-
-  /* We use a hidden input so constraint validation errors work, since they don't appear to show when used with buttons.
-    We can't actually hide it, though, otherwise the messages will be suppressed by the browser. */
-  .hidden-input {
-    all: unset;
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    outline: dotted 1px red;
-    opacity: 0;
-    z-index: -1;
+  :host([readonly]) {
+    cursor: default;
+  }
+
+  .button {
+    /* Medium size is the default */
+    --syn-radio-button-height: 32px;
+    --syn-radio-button-radius: var(--syn-radio-button-border-radius-medium);
+
+    border-radius: var(--syn-radio-button-radius);
+    font-weight: normal;
+    line-height: calc(var(--syn-radio-button-height) - var(--syn-input-border-width) * 2);
+    min-height: var(--syn-radio-button-height);
+  }
+
+  .button--small {
+    --syn-radio-button-height: 24px;
+    --syn-radio-button-radius: var(--syn-radio-button-border-radius-small);
+  }
+
+  .button--large {
+    --syn-radio-button-height: 48px;
+    --syn-radio-button-radius: var(--syn-radio-button-border-radius-large);
+  }
+
+  /**
+   * Icon only buttons
+   */
+  .button--icon-only .button__label {
+    border-radius: var(--syn-border-radius-medium);
+    padding-inline: var(--syn-spacing-2x-small);
+  }
+
+  /**
+   * Override the default unchecked button
+   */
+  .button--text {
+    color: var(--syn-interactive-quiet-color);
+  }
+
+  .button--text:hover:not(.button--disabled):not(.button--readonly) {
+    background: var(--syn-interactive-background-color-hover);
+    color: var(--syn-interactive-quiet-color-hover);
+  }
+
+  /**
+   * Disabled active buttons should look like their default state, but with opacity applied.
+   * This overrides the defaults from the button component.
+   * Note we cannot use syn-button-color because it will be the wrong color in dark mode.
+   */
+  .button--filled.button--primary,
+  .button--filled.button--primary.button--disabled {
+    background: var(--syn-interactive-emphasis-color);
+    border-color: var(--syn-interactive-emphasis-color);
+    color: var(--syn-color-neutral-0);
+  }
+
+  /**
+   * Make sure the active state is applied to the button in its selected and none selected state.
+   */
+  .button--filled.button--primary:active:not(.button--disabled),
+  .button--text.button--primary:active:not(.button--disabled) {
+    background: var(--syn-button-color-active);
+    border-color: var(--syn-button-color-active);
+    color: var(--syn-button-filled-color-text-active);
+  }
+
+  /**
+   * Readonly state styles
+   */
+  .button.button--readonly {
+    background: var(--syn-readonly-background-color);
+    color: var(--syn-readonly-color-text);
+    cursor: text;
+    pointer-events: none;
+    user-select: text;
+  }
+
+  .button.button--readonly:focus-visible {
+    background: var(--syn-input-readonly-background-color-focus);
+    color: var(--syn-readonly-color-text);
+  }
+
+  .button.button--readonly.button--checked {
+    background: var(--syn-readonly-indicator-color);
+    border-color: var(--syn-readonly-border-color);
+    color: var(--syn-color-neutral-0);
   }
 `;

package/data/layers/full/component/component:syn-radio-button/react/radio-button.ts

@@ -18,7 +18,7 @@ Component.define('syn-radio-button');
  * @summary Radios buttons allow the user to select a single option from a group using a button-like control.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio-button--docs
  * @status stable
- * @since 1.0.0
+ * @since 3.17.0
  *
  * @slot - The radio button's label.
  * @slot prefix - A presentational prefix icon or similar element.

package/data/layers/full/component/component:syn-radio-button/vue/SynVueRadioButton.vue

@@ -9,7 +9,7 @@
  * @summary Radios buttons allow the user to select a single option from a group using a button-like control.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio-button--docs
  * @status stable
- * @since 1.0.0
+ * @since 3.17.0
  *
  * @slot - The radio button's label.
  * @slot prefix - A presentational prefix icon or similar element.
@@ -52,17 +52,17 @@ const props = defineProps<{
    */
   disabled?: SynRadioButton['disabled'];
 
+  /**
+   * Sets the radio button to a readonly state.
+   */
+  readonly?: SynRadioButton['readonly'];
+
   /**
 * The radio button's size.
 * When used inside a radio group, the size will be determined by the radio group's size so
 this attribute can typically be omitted.
  */
   size?: SynRadioButton['size'];
-
-  /**
-   * Draws a pill-style radio button with rounded edges.
-   */
-  pill?: SynRadioButton['pill'];
 }>();
 
 // Make sure prop binding only forwards the props that are actually there.

package/data/layers/full/component/component:syn-radio-group/components/radio-group.component.ts

@@ -144,15 +144,16 @@ export default class SynRadioGroup extends SynergyElement implements SynergyForm
   }
 
   private handleRadioClick(event: MouseEvent) {
-    const target = (event.target as HTMLElement).closest<SynRadio | SynRadioButton>('syn-radio, syn-radio-button')!;
-    const radios = this.getAllRadios();
-    const oldValue = this.value;
+    const target = (event.target as HTMLElement).closest<SynRadio | SynRadioButton>('syn-radio, syn-radio-button');
 
     // #1174: If we have a radio, also do nothing if the radio is readonly
-    if (!target || target.disabled || (target as SynRadio).readonly) {
+    if (!target || target.disabled || target.readonly) {
       return;
     }
 
+    const radios = this.getAllRadios();
+    const oldValue = this.value;
+
     this.value = target.value;
     radios.forEach(radio => {
       radio.checked = radio === target;
@@ -170,7 +171,7 @@ export default class SynRadioGroup extends SynergyElement implements SynergyForm
     }
 
     // #1174: Filter out elements that are either disabled or readonly
-    const availableRadios = this.getAllRadios().filter(radio => (!radio.disabled && !(radio as SynRadio).readonly));
+    const availableRadios = this.getAllRadios().filter(radio => (!radio.disabled && !radio.readonly));
     const checkedRadio = availableRadios.find(radio => radio.checked) ?? availableRadios[0];
 
     // eslint-disable-next-line no-nested-ternary
@@ -186,6 +187,11 @@ export default class SynRadioGroup extends SynergyElement implements SynergyForm
       index = 0;
     }
 
+    // #1175: If all radios are readonly, skip and focus the first one and do not change the value
+    if (!availableRadios[index]) {
+      return;
+    }
+
     const allRadios = this.getAllRadios();
 
     allRadios.forEach(radio => {
@@ -196,11 +202,6 @@ export default class SynRadioGroup extends SynergyElement implements SynergyForm
       }
     });
 
-    // #1175: If all radios are readonly, skip and focus the first one and do not change the value
-    if (!availableRadios[index]) {
-      return;
-    }
-
     this.value = availableRadios[index].value;
     availableRadios[index].checked = true;
 
@@ -257,6 +258,11 @@ export default class SynRadioGroup extends SynergyElement implements SynergyForm
     if (this.hasButtonGroup) {
       const buttonGroup = this.shadowRoot?.querySelector('syn-button-group');
 
+      // Check if all radios in the group are readonly. If they are, set the button group to readonly as well to prevent focus and hover styles
+      if (buttonGroup) {
+        buttonGroup.toggleAttribute('readonly', radios.every(radio => radio.readonly));
+      }
+
       if (buttonGroup) {
         buttonGroup.disableRole = true;
       }
@@ -379,6 +385,7 @@ export default class SynRadioGroup extends SynergyElement implements SynergyForm
         part="form-control"
         class=${classMap({
           'form-control': true,
+          'form-control--has-button-group': this.hasButtonGroup,
           'form-control--has-help-text': hasHelpText,
           'form-control--has-label': hasLabel,
           'form-control--large': this.size === 'large',
@@ -418,7 +425,12 @@ export default class SynRadioGroup extends SynergyElement implements SynergyForm
 
           ${this.hasButtonGroup
             ? html`
-                <syn-button-group part="button-group" exportparts="base:button-group__base" role="presentation">
+                <syn-button-group
+                  exportparts="base:button-group__base"
+                  part="button-group"
+                  role="presentation"
+                  size=${this.size}
+                >
                   ${defaultSlot}
                 </syn-button-group>
               `

package/data/layers/full/component/component:syn-radio-group/components/radio-group.styles.ts

@@ -28,6 +28,16 @@ export default css`
     padding: 0;
   }
 
+  .form-control-input {
+    display: flex;
+    flex-direction: column;
+    gap: var(--syn-spacing-x-small);
+  }
+
+  .form-control--has-help-text.form-control--radio-group .form-control__help-text {
+    margin-top: var(--syn-spacing-x-small);
+  }
+
   .radio-group--required .radio-group__label::after {
     content: var(--syn-input-required-content);
     margin-inline-start: var(--syn-input-required-content-offset);
@@ -46,13 +56,48 @@ export default css`
     width: 1px;
   }
 
-  .form-control-input {
-    display: flex;
-    flex-direction: column;
-    gap: var(--syn-spacing-x-small);
+  /**
+   * #1140:
+   * Apply custom styling when we are using syn-radio-button.
+   * This is needed because syn-radio-button is displayed with space between the items
+   * and should not adhere to the default styling needed for regular button groups.
+   */
+  .form-control--has-button-group .form-control-input {
+    max-width: 100%; /* Fallback for older browsers, do not remove */
   }
 
-  .form-control--has-help-text.form-control--radio-group .form-control__help-text {
-    margin-top: var(--syn-spacing-x-small);
+  @supports (max-width: fit-content) {
+    .form-control--has-button-group .form-control-input {
+      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+      max-width: fit-content;
+    }
+  }
+
+  .form-control--has-button-group syn-button-group::part(base) {
+    --radiogroup-padding: calc(var(--syn-spacing-x-small) - 1px);
+
+    border: 1px solid var(--syn-input-border-color);
+    border-radius: var(--syn-input-border-radius-large);
+    gap: var(--radiogroup-padding);
+    padding: var(--radiogroup-padding);
+  }
+
+  .form-control--has-button-group syn-button-group[readonly]::part(base) {
+    background: var(--syn-readonly-background-color);
+    border-color: var(--syn-readonly-background-color);
+  }
+
+  .form-control--has-button-group syn-button-group[size="small"]::part(base) {
+    --radiogroup-padding: calc(var(--syn-spacing-2x-small) + var(--syn-input-width));
+  }
+
+  /**
+   * #1140: This statement overrides the children selectors that are used for showing readonly fields
+   * We are not able to easily forward them to the radio button, so we need to override them here.
+   */
+  .form-control--has-button-group syn-button-group[readonly] ::slotted(syn-radio-button) {
+    --syn-readonly-indicator-color: var(--syn-readonly-background-color);
+    --syn-readonly-border-color: transparent;
+    --syn-color-neutral-0: var(--syn-readonly-color-text);
   }
 `;

package/data/layers/full/setup/setup:angular-package/angular/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @synergy-design-system/angular
 
+## 3.17.0
+
+### Minor Changes
+
+- [#1231](https://github.com/synergy-design-system/synergy-design-system/pull/1231) [`8a6cbf7`](https://github.com/synergy-design-system/synergy-design-system/commit/8a6cbf78fe5236b691815edfad12b34659937df9) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-06-30
+
+  feat: ✨ `<syn-radio-button>` ([#1140](https://github.com/synergy-design-system/synergy-design-system/issues/1140))
+
+  This release adds the new `<syn-radio-button>` component for single-selection controls with a more prominent, button-like appearance.
+
+  Use `<syn-radio>` for classic form input patterns, and `<syn-radio-button>` when the same behavior should feel more like an immediate mode, view, or option switch.
+
+### Patch Changes
+
+- Updated dependencies [[`8a6cbf7`](https://github.com/synergy-design-system/synergy-design-system/commit/8a6cbf78fe5236b691815edfad12b34659937df9)]:
+  - @synergy-design-system/components@3.17.0
+  - @synergy-design-system/tokens@3.17.0
+
+## 3.16.0
+
+### Minor Changes
+
+- [#1291](https://github.com/synergy-design-system/synergy-design-system/pull/1291) [`363595e`](https://github.com/synergy-design-system/synergy-design-system/commit/363595ea1fde8baad6e11d69365732aa9f547c10) Thanks [@kirchsuSICKAG](https://github.com/kirchsuSICKAG)! - Released on: 2026-06-24
+
+  feat: ✨ chart axes mvp ([#1203](https://github.com/synergy-design-system/synergy-design-system/issues/1203))
+
+  This release introduces the first chart axis MVP for syn-chart.
+
+  New features:
+  - Adds and registers a Synergy ECharts light theme as default for syn-chart.
+  - Provides a config callback API with preset methods like `axesShowSplitLines()`, `axesAddXLabelIcons()`, and `axesHideLabels()` as an alternative to raw ECharts configuration objects for the _config_ property. These methods support both method chaining and sequential calling patterns for maximum flexibility.
+
+### Patch Changes
+
+- Updated dependencies [[`363595e`](https://github.com/synergy-design-system/synergy-design-system/commit/363595ea1fde8baad6e11d69365732aa9f547c10), [`363595e`](https://github.com/synergy-design-system/synergy-design-system/commit/363595ea1fde8baad6e11d69365732aa9f547c10)]:
+  - @synergy-design-system/components@3.16.0
+  - @synergy-design-system/tokens@3.16.0
+
 ## 3.15.7
 
 ### Patch Changes

package/data/layers/full/setup/setup:angular-package/angular/package.json

@@ -22,7 +22,7 @@
     "url": "https://github.com/synergy-design-system/synergy-design-system.git",
     "directory": "packages/angular"
   },
-  "version": "3.15.7",
+  "version": "3.17.0",
   "scripts": {
     "_build": "pnpm _clean && ng-packagr -c tsconfig.lib.json && pnpm _after-build",
     "_clean": "rm -rf ../_private/angular-demo/.angular",

package/data/layers/full/setup/setup:components-package/components/CHANGELOG.md

@@ -1,5 +1,41 @@
 # Changelog
 
+## 3.17.0
+
+### Minor Changes
+
+- [#1231](https://github.com/synergy-design-system/synergy-design-system/pull/1231) [`8a6cbf7`](https://github.com/synergy-design-system/synergy-design-system/commit/8a6cbf78fe5236b691815edfad12b34659937df9) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-06-30
+
+  feat: ✨ `<syn-radio-button>` ([#1140](https://github.com/synergy-design-system/synergy-design-system/issues/1140))
+
+  This release adds the new `<syn-radio-button>` component for single-selection controls with a more prominent, button-like appearance.
+
+  Use `<syn-radio>` for classic form input patterns, and `<syn-radio-button>` when the same behavior should feel more like an immediate mode, view, or option switch.
+
+### Patch Changes
+
+- Updated dependencies [[`8a6cbf7`](https://github.com/synergy-design-system/synergy-design-system/commit/8a6cbf78fe5236b691815edfad12b34659937df9)]:
+  - @synergy-design-system/tokens@3.17.0
+
+## 3.16.0
+
+### Minor Changes
+
+- [#1291](https://github.com/synergy-design-system/synergy-design-system/pull/1291) [`363595e`](https://github.com/synergy-design-system/synergy-design-system/commit/363595ea1fde8baad6e11d69365732aa9f547c10) Thanks [@kirchsuSICKAG](https://github.com/kirchsuSICKAG)! - Released on: 2026-06-24
+
+  feat: ✨ chart axes mvp ([#1203](https://github.com/synergy-design-system/synergy-design-system/issues/1203))
+
+  This release introduces the first chart axis MVP for syn-chart.
+
+  New features:
+  - Adds and registers a Synergy ECharts light theme as default for syn-chart.
+  - Provides a config callback API with preset methods like `axesShowSplitLines()`, `axesAddXLabelIcons()`, and `axesHideLabels()` as an alternative to raw ECharts configuration objects for the _config_ property. These methods support both method chaining and sequential calling patterns for maximum flexibility.
+
+### Patch Changes
+
+- Updated dependencies [[`363595e`](https://github.com/synergy-design-system/synergy-design-system/commit/363595ea1fde8baad6e11d69365732aa9f547c10)]:
+  - @synergy-design-system/tokens@3.16.0
+
 ## 3.15.7
 
 ### Patch Changes

package/data/layers/full/setup/setup:components-package/components/package.json

@@ -4,7 +4,7 @@
     "url": "https://www.sick.com"
   },
   "name": "@synergy-design-system/components",
-  "version": "3.15.7",
+  "version": "3.17.0",
   "description": "",
   "repository": {
     "type": "git",

package/data/layers/full/setup/setup:react-package/react/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @synergy-design-system/react
 
+## 3.17.0
+
+### Patch Changes
+
+- Updated dependencies [[`8a6cbf7`](https://github.com/synergy-design-system/synergy-design-system/commit/8a6cbf78fe5236b691815edfad12b34659937df9)]:
+  - @synergy-design-system/components@3.17.0
+  - @synergy-design-system/tokens@3.17.0
+
+## 3.16.0
+
+### Minor Changes
+
+- [#1291](https://github.com/synergy-design-system/synergy-design-system/pull/1291) [`363595e`](https://github.com/synergy-design-system/synergy-design-system/commit/363595ea1fde8baad6e11d69365732aa9f547c10) Thanks [@kirchsuSICKAG](https://github.com/kirchsuSICKAG)! - Released on: 2026-06-24
+
+  feat: ✨ chart axes mvp ([#1203](https://github.com/synergy-design-system/synergy-design-system/issues/1203))
+
+  This release introduces the first chart axis MVP for syn-chart.
+
+  New features:
+  - Adds and registers a Synergy ECharts light theme as default for syn-chart.
+  - Provides a config callback API with preset methods like `axesShowSplitLines()`, `axesAddXLabelIcons()`, and `axesHideLabels()` as an alternative to raw ECharts configuration objects for the _config_ property. These methods support both method chaining and sequential calling patterns for maximum flexibility.
+
+### Patch Changes
+
+- Updated dependencies [[`363595e`](https://github.com/synergy-design-system/synergy-design-system/commit/363595ea1fde8baad6e11d69365732aa9f547c10), [`363595e`](https://github.com/synergy-design-system/synergy-design-system/commit/363595ea1fde8baad6e11d69365732aa9f547c10)]:
+  - @synergy-design-system/components@3.16.0
+  - @synergy-design-system/tokens@3.16.0
+
 ## 3.15.7
 
 ### Patch Changes

package/data/layers/full/setup/setup:react-package/react/package.json

@@ -43,7 +43,7 @@
     "directory": "packages/react"
   },
   "type": "module",
-  "version": "3.15.7",
+  "version": "3.17.0",
   "devDependencies": {
     "@types/react": "^19.2.17",
     "react": "^19.2.7"

package/data/layers/full/setup/setup:react-package/react/syn-jsx-elements.ts

@@ -269,7 +269,7 @@ export type SynCustomElement<
  *
  * @documentation https://synergy-design-system.github.io/?path=/docs/charting-syn-chart--docs
  * @status experimental
- * @since 0.0.0
+ * @since 3.15.0
  *
  * @csspart base - The component's base wrapper.
  */ export type SynChartJSXElement = SynCustomElement<SynChart, []>;
@@ -1092,7 +1092,7 @@ export type SynCustomElement<
  * @summary Radios buttons allow the user to select a single option from a group using a button-like control.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio-button--docs
  * @status stable
- * @since 1.0.0
+ * @since 3.17.0
  *
  * @slot - The radio button's label.
  * @slot prefix - A presentational prefix icon or similar element.
@@ -1737,7 +1737,7 @@ declare module 'react' {
        *
        * @documentation https://synergy-design-system.github.io/?path=/docs/charting-syn-chart--docs
        * @status experimental
-       * @since 0.0.0
+       * @since 3.15.0
        *
        * @csspart base - The component's base wrapper.
        */ 'syn-chart': SynChartJSXElement;
@@ -2441,7 +2441,7 @@ declare module 'react' {
        * @summary Radios buttons allow the user to select a single option from a group using a button-like control.
        * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio-button--docs
        * @status stable
-       * @since 1.0.0
+       * @since 3.17.0
        *
        * @slot - The radio button's label.
        * @slot prefix - A presentational prefix icon or similar element.

package/data/layers/full/setup/setup:tokens-package/tokens/CHANGELOG.md

@@ -1,5 +1,36 @@
 # Changelog
 
+## 3.17.0
+
+### Minor Changes
+
+- [#1231](https://github.com/synergy-design-system/synergy-design-system/pull/1231) [`8a6cbf7`](https://github.com/synergy-design-system/synergy-design-system/commit/8a6cbf78fe5236b691815edfad12b34659937df9) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-06-30
+
+  feat: ✨ `<syn-radio-button>` ([#1140](https://github.com/synergy-design-system/synergy-design-system/issues/1140))
+
+  This release adds the new `<syn-radio-button>` component for single-selection controls with a more prominent, button-like appearance.
+
+  Use `<syn-radio>` for classic form input patterns, and `<syn-radio-button>` when the same behavior should feel more like an immediate mode, view, or option switch.
+
+## 3.16.0
+
+### Minor Changes
+
+- [#1291](https://github.com/synergy-design-system/synergy-design-system/pull/1291) [`363595e`](https://github.com/synergy-design-system/synergy-design-system/commit/363595ea1fde8baad6e11d69365732aa9f547c10) Thanks [@kirchsuSICKAG](https://github.com/kirchsuSICKAG)! - Released on: 2026-06-24
+
+  feat: ✨ Prefix all chart tokens, add new component and chart tokens
+
+  **Prefixing chart tokens**
+  - chart-related tokens now use a dedicated `chart` prefix to ensure clear scoping and avoid naming conflicts.
+
+  **Component tokens**
+  - `--syn-typography-color-text-quiet`
+  - `--syn-typography-color-text-quiet-inverted`
+
+  **Chart tokens**:
+  - `--syn-chart-grid-lines-color`
+  - `--syn-chart-grid-lines-color-emphasize`
+
 ## 3.15.7
 
 ### Patch Changes

package/data/layers/full/setup/setup:tokens-package/tokens/package.json

@@ -82,5 +82,5 @@
   },
   "type": "module",
   "types": "./dist/js/index.d.ts",
-  "version": "3.15.7"
+  "version": "3.17.0"
 }

package/data/layers/full/setup/setup:vue-package/vue/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @synergy-design-system/vue
 
+## 3.17.0
+
+### Minor Changes
+
+- [#1231](https://github.com/synergy-design-system/synergy-design-system/pull/1231) [`8a6cbf7`](https://github.com/synergy-design-system/synergy-design-system/commit/8a6cbf78fe5236b691815edfad12b34659937df9) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-06-30
+
+  feat: ✨ `<syn-radio-button>` ([#1140](https://github.com/synergy-design-system/synergy-design-system/issues/1140))
+
+  This release adds the new `<syn-radio-button>` component for single-selection controls with a more prominent, button-like appearance.
+
+  Use `<syn-radio>` for classic form input patterns, and `<syn-radio-button>` when the same behavior should feel more like an immediate mode, view, or option switch.
+
+### Patch Changes
+
+- Updated dependencies [[`8a6cbf7`](https://github.com/synergy-design-system/synergy-design-system/commit/8a6cbf78fe5236b691815edfad12b34659937df9)]:
+  - @synergy-design-system/components@3.17.0
+  - @synergy-design-system/tokens@3.17.0
+
+## 3.16.0
+
+### Minor Changes
+
+- [#1291](https://github.com/synergy-design-system/synergy-design-system/pull/1291) [`363595e`](https://github.com/synergy-design-system/synergy-design-system/commit/363595ea1fde8baad6e11d69365732aa9f547c10) Thanks [@kirchsuSICKAG](https://github.com/kirchsuSICKAG)! - Released on: 2026-06-24
+
+  feat: ✨ chart axes mvp ([#1203](https://github.com/synergy-design-system/synergy-design-system/issues/1203))
+
+  This release introduces the first chart axis MVP for syn-chart.
+
+  New features:
+  - Adds and registers a Synergy ECharts light theme as default for syn-chart.
+  - Provides a config callback API with preset methods like `axesShowSplitLines()`, `axesAddXLabelIcons()`, and `axesHideLabels()` as an alternative to raw ECharts configuration objects for the _config_ property. These methods support both method chaining and sequential calling patterns for maximum flexibility.
+
+### Patch Changes
+
+- Updated dependencies [[`363595e`](https://github.com/synergy-design-system/synergy-design-system/commit/363595ea1fde8baad6e11d69365732aa9f547c10), [`363595e`](https://github.com/synergy-design-system/synergy-design-system/commit/363595ea1fde8baad6e11d69365732aa9f547c10)]:
+  - @synergy-design-system/components@3.16.0
+  - @synergy-design-system/tokens@3.16.0
+
 ## 3.15.7
 
 ### Patch Changes

package/data/layers/full/setup/setup:vue-package/vue/package.json

@@ -50,7 +50,7 @@
     "directory": "packages/vue"
   },
   "type": "module",
-  "version": "3.15.7",
+  "version": "3.17.0",
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.7",
     "@vue/tsconfig": "^0.9.1",