@synergy-design-system/metadata 3.16.1 → 3.18.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## 3.18.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.17.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.
+
 ## 3.16.1
 
 ### Patch Changes

package/data/core/component/component:syn-button-group.json

@@ -206,10 +206,6 @@
         "layer": "full",
         "path": "layers/full/component/component:syn-button-group/components/button-group.component.ts"
       },
-      {
-        "layer": "full",
-        "path": "layers/full/component/component:syn-button-group/components/button-group.custom.styles.ts"
-      },
       {
         "layer": "full",
         "path": "layers/full/component/component:syn-button-group/components/button-group.styles.ts"
@@ -255,7 +251,6 @@
   "sources": [
     "packages/angular/components/button-group/button-group.component.ts",
     "packages/components/src/components/button-group/button-group.component.ts",
-    "packages/components/src/components/button-group/button-group.custom.styles.ts",
     "packages/components/src/components/button-group/button-group.styles.ts",
     "packages/components/src/components/button-group/button-group.ts",
     "packages/react/src/components/button-group.ts",

package/data/core/component/component:syn-button.json

@@ -268,11 +268,11 @@
       },
       {
         "layer": "full",
-        "path": "layers/full/component/component:syn-button/components/button.component.ts"
+        "path": "layers/full/component/component:syn-button/components/button-group.styles.ts"
       },
       {
         "layer": "full",
-        "path": "layers/full/component/component:syn-button/components/button.custom.styles.ts"
+        "path": "layers/full/component/component:syn-button/components/button.component.ts"
       },
       {
         "layer": "full",
@@ -327,8 +327,8 @@
   "since": "1.0.0",
   "sources": [
     "packages/angular/components/button/button.component.ts",
+    "packages/components/src/components/button/button-group.styles.ts",
     "packages/components/src/components/button/button.component.ts",
-    "packages/components/src/components/button/button.custom.styles.ts",
     "packages/components/src/components/button/button.styles.ts",
     "packages/components/src/components/button/button.ts",
     "packages/react/src/components/button.ts",

package/data/core/component/component:syn-chart.json

@@ -17,7 +17,7 @@
           "documentation": "https://synergy-design-system.github.io/?path=/docs/charting-syn-chart--docs",
           "events": [],
           "packageName": "@synergy-design-system/react",
-          "since": "0.0.0",
+          "since": "3.15.0",
           "sourcePath": "packages/react/src/types/syn-jsx-elements.ts",
           "status": "experimental",
           "subpathExport": "./types/latest",
@@ -39,6 +39,151 @@
     },
     "override": {
       "figmaDocsId": "https://www.figma.com/design/9IpXnDH4GFziUH9sOpnK8V/Chart-Library?node-id=0-1&p=f&t=PkQKC2p7WIr2k0og-0",
+      "stories": [
+        {
+          "description": {
+            "type": "text",
+            "value": "The chart’s axes define the visual structure of the data and can be customized to match different visualization needs. Both the horizontal and vertical axes support flexible configuration options, allowing you to control how reference lines and labels are displayed.\n\nYou can choose to show only horizontal grid lines, only vertical grid lines, or both, depending on the level of visual guidance you want to provide. "
+          },
+          "name": "axes-default",
+          "title": {
+            "type": "text",
+            "value": "Axes"
+          }
+        },
+        {
+          "description": {
+            "type": "text",
+            "value": "The default is, that both axes lines as well as the split lines are hidden."
+          },
+          "name": "axes-split-lines-hidden",
+          "title": {
+            "type": "text",
+            "value": "Hidden Axes Split Lines"
+          }
+        },
+        {
+          "description": {
+            "type": "text",
+            "value": "If you want to display both axes lines and split lines, use the handle method `axesShowSplitLines()`."
+          },
+          "name": "axes-split-lines-visible",
+          "title": {
+            "type": "text",
+            "value": "Visible Axes Split Lines"
+          }
+        },
+        {
+          "description": {
+            "type": "text",
+            "value": "To show only horizontal split lines, use the handle method `axesShowYSplitLines()`."
+          },
+          "name": "axes-horizontal-split-lines",
+          "title": {
+            "type": "text",
+            "value": "Horizontal Split Lines Only"
+          }
+        },
+        {
+          "description": {
+            "type": "text",
+            "value": "To show only vertical split lines, use the handle method `axesShowXSplitLines()`."
+          },
+          "name": "axes-vertical-split-lines",
+          "title": {
+            "type": "text",
+            "value": "Vertical Split Lines Only"
+          }
+        },
+        {
+          "description": {
+            "type": "text",
+            "value": "If you want to hide the axis labels, use the handle method `axesHideLabels()`."
+          },
+          "name": "axes-labels-hidden",
+          "title": {
+            "type": "text",
+            "value": "Hidden Axis Labels"
+          }
+        },
+        {
+          "description": {
+            "type": "text",
+            "value": "To show axes split lines but hide axis labels, combine `axesShowSplitLines()` and `axesHideLabels()`."
+          },
+          "name": "axes-lines-visible-labels-hidden",
+          "title": {
+            "type": "text",
+            "value": "Visible Axes Lines with Hidden Values"
+          }
+        },
+        {
+          "description": {
+            "type": "text",
+            "value": "To add icons to axis labels, use the handle methods `axesAddXLabelIcons()` and `axesAddYLabelIcons()`."
+          },
+          "name": "axes-labels-with-icons",
+          "title": {
+            "type": "text",
+            "value": "Axes Labels with Icons"
+          }
+        },
+        {
+          "description": {
+            "type": "text",
+            "value": "The default story demonstrates a basic line chart configuration. The chart is configured via the `config` property, which accepts an object that maps directly to the ECharts option configuration."
+          },
+          "name": "default",
+          "title": {
+            "type": "text",
+            "value": "Chart"
+          }
+        },
+        {
+          "description": {
+            "type": "text",
+            "value": "The `config` property is the main way to configure the chart. It accepts an object that maps 1:1 to the ECharts option configuration. Assigning a new object to this property will update the chart with the new configuration."
+          },
+          "name": "config",
+          "title": {
+            "type": "text",
+            "value": "Config"
+          }
+        },
+        {
+          "description": {
+            "type": "text",
+            "value": "Use the `palette` attribute to apply a Synergy design token color palette to chart series. `categorical` (12 distinct colors for comparing unrelated data series), `sequential-01`–`sequential-07` (10-step single-hue ramps), and `sequential-status-critical/error/info/success/warning` (10-step status ramps). If `option.color` is explicitly set, it takes precedence over the `palette` attribute."
+          },
+          "name": "palette",
+          "title": {
+            "type": "text",
+            "value": "Palette"
+          }
+        },
+        {
+          "description": {
+            "type": "text",
+            "value": "Use `getInstance()` to access the underlying ECharts instance directly and work with its full native API. This is useful when the `config` property alone is not sufficient — for example to listen to ECharts events, trigger actions, or call `setOption()` with custom merge behavior. This example attaches a click listener via the native ECharts API. Click any data point to see the event payload logged to the browser console."
+          },
+          "name": "get-instance",
+          "title": {
+            "type": "text",
+            "value": "Get Instance"
+          }
+        },
+        {
+          "description": {
+            "type": "text",
+            "value": "You can use multiple charts in one `<syn-chart>` instance, each with its own configuration. The palette colors or the default colors can be overridden per series item using the `color` property directly on the series object — allowing fine-grained control over individual chart series colors.\n\n**Important:** The `color` property does **not** support CSS variables (e.g. `var(--syn-sequential-05-80)`). This is a limitation of ECharts itself: ECharts renders via the Canvas API, which does not resolve CSS custom properties. To use Synergy design tokens as colors, read the computed hex value first using `getComputedStyle(document.documentElement).getPropertyValue('--your-token').trim()` and pass the resolved value instead."
+          },
+          "name": "multiple-charts",
+          "title": {
+            "type": "text",
+            "value": "Multiple Charts"
+          }
+        }
+      ],
       "storySourcePath": "components.chart",
       "storyTags": [
         "Data Visualization"
@@ -158,7 +303,7 @@
   "name": "syn-chart",
   "package": "components",
   "relations": [],
-  "since": "0.0.0",
+  "since": "3.15.0",
   "sources": [
     "packages/angular/components/chart/chart.component.ts",
     "packages/components/src/components/chart/chart.component.ts",

package/data/core/component/component:syn-radio-button.json

@@ -23,7 +23,7 @@
             }
           ],
           "packageName": "@synergy-design-system/react",
-          "since": "1.0.0",
+          "since": "3.17.0",
           "sourcePath": "packages/react/src/types/syn-jsx-elements.ts",
           "status": "stable",
           "subpathExport": "./types/latest",
@@ -43,10 +43,109 @@
         "sourcePath": "packages/vue/src/components/SynVueRadioButton.vue"
       }
     },
+    "override": {
+      "figmaComponentId": "47863-30109",
+      "figmaDocsId": "49697-83768",
+      "stories": [
+        {
+          "description": {
+            "type": "text",
+            "value": "Radio buttons allow the user to select a single option from a group using a button-like control.\n\nRadio buttons are designed to be used with radio groups. When a radio button has focus, the arrow keys can be used to change the selected option just like standard radio controls."
+          },
+          "name": "default",
+          "title": {
+            "type": "text",
+            "value": "Radio Button"
+          }
+        },
+        {
+          "description": {
+            "type": "text",
+            "value": "To set the initial value and checked state, use the value attribute on the containing radio group."
+          },
+          "name": "checked",
+          "title": {
+            "type": "text",
+            "value": "Checked"
+          }
+        },
+        {
+          "description": {
+            "type": "text",
+            "value": "Use the disabled attribute to disable a radio button."
+          },
+          "name": "disabled",
+          "title": {
+            "type": "text",
+            "value": "Disabled"
+          }
+        },
+        {
+          "description": {
+            "type": "text",
+            "value": "Add the read-only attribute to render a readonly radio button. Please note that you need to enable the readonly state for each individual radio button."
+          },
+          "name": "readonly",
+          "title": {
+            "type": "text",
+            "value": "Readonly"
+          }
+        },
+        {
+          "description": {
+            "type": "text",
+            "value": "The invalid status is used to warn the user that the Radio Group is invalid. For example, if the radio-button is mandatory and nothing has been checked."
+          },
+          "name": "invalid",
+          "title": {
+            "type": "text",
+            "value": "Invalid"
+          }
+        },
+        {
+          "description": {
+            "type": "text",
+            "value": "Use the size attribute to change a radio button’s size."
+          },
+          "name": "sizes",
+          "title": {
+            "type": "text",
+            "value": "Sizes"
+          }
+        },
+        {
+          "description": {
+            "type": "text",
+            "value": "Use the prefix and suffix slots to add icons."
+          },
+          "name": "prefix-suffix",
+          "title": {
+            "type": "text",
+            "value": "Prefix and Suffix Icons"
+          }
+        },
+        {
+          "description": {
+            "type": "text",
+            "value": "You can omit button labels and use icons instead. Make sure to set a label attribute on each icon so screen readers will announce each option correctly."
+          },
+          "name": "buttons-with-icons",
+          "title": {
+            "type": "text",
+            "value": "Buttons with Icons"
+          }
+        }
+      ],
+      "storySourcePath": "components.radio-button",
+      "storyTags": [
+        "Form"
+      ]
+    },
     "rules": {
       "accessibility": [
-        "Provide meaningful alternative text for icon-only radio buttons.",
-        "Communicate the group's function-such as filtering or view switching-through clear context or labels."
+        "Provide meaningful alternative text for icon-only radio buttons using the label attribute.",
+        "Communicate the group's function—such as filtering or view switching—through clear context or labels.",
+        "Ensure each button option has a unique, non-ambiguous label to help assistive technology users understand their choices."
       ],
       "component": "syn-radio-button",
       "related": {
@@ -61,17 +160,19 @@
       "usageGuidelines": [
         {
           "content": [
-            "Use with light background options such as white, neutral-100, or primary-100."
+            "Use syn-radio-button when you need button-style appearance for single option selection.",
+            "Use syn-radio for traditional radio button appearance.",
+            "Both work as form inputs when slotted inside syn-radio-group; the difference is visual presentation.",
+            "Choose syn-radio-button for use cases like filtering, view switching, or category selection where button styling enhances UX.",
+            "Slot inside syn-radio-group to participate in form submission and group state management.",
+            "Use only in groups, as they are designed to allow the user to activate one of several options. For single options, use syn-checkbox instead."
           ],
-          "id": "background",
-          "name": "Background"
+          "id": "when_to_use",
+          "name": "When to Use"
         },
         {
           "content": [
-            "Don't use as input method in forms, for they are not form elements. Use syn-radio instead.",
-            "Slot inside of an syn-radio-group.",
-            "Use only in groups, as they are designed to allow the user to activate one of several options. To work with a single option, use syn-checkbox instead.",
-            "Pre-select always a \"default\" value; there is no invalid state.",
+            "Always pre-select a \"default\" value. There is no invalid state; one option must always be selected.",
             "Limit the number of options in the group. Users should be able to retain all options available and not be overwhelmed by them."
           ],
           "id": "behavior",
@@ -95,9 +196,11 @@
         }
       ],
       "useCases": [
-        "Select one option from a group where one is already preselected.",
-        "Switch between groups of settings.",
-        "Filter views by a parent category."
+        "Filter or switch between views with button-style appearance and icon support.",
+        "Select one option from a group where one is already preselected and no invalid state exists.",
+        "Switch between groups of settings with visual button presentation.",
+        "Display categorization choices with prominent, icon-enhanced options.",
+        "Preference or mode selection in UI controls where traditional form input is not needed."
       ]
     },
     "sourceModulePath": "components/radio-button/radio-button.js",
@@ -106,6 +209,12 @@
   "id": "component:syn-radio-button",
   "kind": "component",
   "layers": {
+    "examples": [
+      {
+        "layer": "examples",
+        "path": "layers/examples/component/component:syn-radio-button.md"
+      }
+    ],
     "full": [
       {
         "layer": "full",
@@ -156,7 +265,7 @@
   "name": "syn-radio-button",
   "package": "components",
   "relations": [],
-  "since": "1.0.0",
+  "since": "3.17.0",
   "sources": [
     "packages/angular/components/radio-button/radio-button.component.ts",
     "packages/components/src/components/radio-button/radio-button.component.ts",

package/data/core/component/component:syn-radio-group.json

@@ -173,6 +173,17 @@
             "type": "text",
             "value": "Checked"
           }
+        },
+        {
+          "description": {
+            "type": "text",
+            "value": "Radio buttons offer an alternate way to display radio controls. In this case, an internal button group is used to group the buttons into a single, cohesive control."
+          },
+          "name": "radio-buttons",
+          "title": {
+            "type": "text",
+            "value": "Radio Buttons"
+          }
         }
       ],
       "storySourcePath": "components.radio-group",

package/data/core/setup/setup:angular-components-module.json

@@ -21,7 +21,7 @@
   "name": "Angular Components Module",
   "package": "angular",
   "relations": [],
-  "since": "3.15.7",
+  "since": "3.17.0",
   "sources": [
     "packages/angular/modules/synergy/synergy.module.ts",
     "packages/angular/components/index.ts"

package/data/core/setup/setup:angular-forms-module.json

@@ -22,7 +22,7 @@
   "name": "Angular Forms Module",
   "package": "angular",
   "relations": [],
-  "since": "3.15.7",
+  "since": "3.17.0",
   "sources": [
     "packages/angular/modules/forms/forms.module.ts"
   ],

package/data/core/setup/setup:angular-package.json

@@ -2,7 +2,7 @@
   "custom": {
     "framework": "angular",
     "packageName": "@synergy-design-system/angular",
-    "packageVersion": "3.15.7",
+    "packageVersion": "3.17.0",
     "subpathExports": [
       ".",
       "./components/*",
@@ -39,7 +39,7 @@
   "name": "Angular Framework Package",
   "package": "angular",
   "relations": [],
-  "since": "3.15.7",
+  "since": "3.17.0",
   "sources": [
     "packages/angular/README.md",
     "packages/angular/CHANGELOG.md",

package/data/core/setup/setup:angular-validators-module.json

@@ -22,7 +22,7 @@
   "name": "Angular Validators Module",
   "package": "angular",
   "relations": [],
-  "since": "3.15.7",
+  "since": "3.17.0",
   "sources": [
     "packages/angular/directives/validators/validators.ts"
   ],

package/data/core/setup/setup:components-package.json

@@ -1,7 +1,7 @@
 {
   "custom": {
     "packageName": "@synergy-design-system/components",
-    "packageVersion": "3.15.7"
+    "packageVersion": "3.17.0"
   },
   "id": "setup:components-package",
   "kind": "setup",
@@ -40,7 +40,7 @@
   "name": "Components Package",
   "package": "components",
   "relations": [],
-  "since": "3.15.7",
+  "since": "3.17.0",
   "sources": [
     "packages/components/README.md",
     "packages/components/CHANGELOG.md",

package/data/core/setup/setup:react-package.json

@@ -2,7 +2,7 @@
   "custom": {
     "framework": "react",
     "packageName": "@synergy-design-system/react",
-    "packageVersion": "3.15.7",
+    "packageVersion": "3.17.0",
     "subpathExports": [
       ".",
       "./components/*",
@@ -42,7 +42,7 @@
   "name": "React Framework Package",
   "package": "react",
   "relations": [],
-  "since": "3.15.7",
+  "since": "3.17.0",
   "sources": [
     "packages/react/README.md",
     "packages/react/CHANGELOG.md",

package/data/core/setup/setup:tokens-package.json

@@ -32,7 +32,7 @@
       "./themes/*"
     ],
     "packageName": "@synergy-design-system/tokens",
-    "packageVersion": "3.15.7"
+    "packageVersion": "3.17.0"
   },
   "id": "setup:tokens-package",
   "kind": "setup",
@@ -59,7 +59,7 @@
   "name": "Tokens Package",
   "package": "tokens",
   "relations": [],
-  "since": "3.15.7",
+  "since": "3.17.0",
   "sources": [
     "packages/tokens/BREAKING_CHANGES.md",
     "packages/tokens/CHANGELOG.md",

package/data/core/setup/setup:vue-package.json

@@ -2,7 +2,7 @@
   "custom": {
     "framework": "vue",
     "packageName": "@synergy-design-system/vue",
-    "packageVersion": "3.15.7"
+    "packageVersion": "3.17.0"
   },
   "id": "setup:vue-package",
   "kind": "setup",
@@ -33,7 +33,7 @@
   "name": "Vue Framework Package",
   "package": "vue",
   "relations": [],
-  "since": "3.15.7",
+  "since": "3.17.0",
   "sources": [
     "packages/vue/README.md",
     "packages/vue/CHANGELOG.md",

package/data/core/token/token:tokens-charts-js-index-d-ts.json

@@ -17,7 +17,7 @@
   "name": "index.d.ts",
   "package": "tokens",
   "relations": [],
-  "since": "3.15.7",
+  "since": "3.17.0",
   "sources": [
     "packages/tokens/dist/charts/js/index.d.ts"
   ],

package/data/core/token/token:tokens-charts-js-index-js.json

@@ -17,7 +17,7 @@
   "name": "index.js",
   "package": "tokens",
   "relations": [],
-  "since": "3.15.7",
+  "since": "3.17.0",
   "sources": [
     "packages/tokens/dist/charts/js/index.js"
   ],

package/data/core/token/token:tokens-charts-scss-tokens-scss.json

@@ -17,7 +17,7 @@
   "name": "_tokens.scss",
   "package": "tokens",
   "relations": [],
-  "since": "3.15.7",
+  "since": "3.17.0",
   "sources": [
     "packages/tokens/dist/charts/scss/_tokens.scss"
   ],

package/data/core/token/token:tokens-charts-themes-sick2025-dark-css.json

@@ -18,7 +18,7 @@
   "name": "sick2025_dark.css",
   "package": "tokens",
   "relations": [],
-  "since": "3.15.7",
+  "since": "3.17.0",
   "sources": [
     "packages/tokens/dist/charts/themes/sick2025_dark.css"
   ],

package/data/core/token/token:tokens-charts-themes-sick2025-light-css.json

@@ -18,7 +18,7 @@
   "name": "sick2025_light.css",
   "package": "tokens",
   "relations": [],
-  "since": "3.15.7",
+  "since": "3.17.0",
   "sources": [
     "packages/tokens/dist/charts/themes/sick2025_light.css"
   ],

package/data/core/token/token:tokens-figma-variables-sick2018-dark-json.json

@@ -18,7 +18,7 @@
   "name": "sick2018-dark.json",
   "package": "tokens",
   "relations": [],
-  "since": "3.15.7",
+  "since": "3.17.0",
   "sources": [
     "packages/tokens/src/figma-variables/output/sick2018-dark.json"
   ],

package/data/core/token/token:tokens-figma-variables-sick2018-light-json.json

@@ -18,7 +18,7 @@
   "name": "sick2018-light.json",
   "package": "tokens",
   "relations": [],
-  "since": "3.15.7",
+  "since": "3.17.0",
   "sources": [
     "packages/tokens/src/figma-variables/output/sick2018-light.json"
   ],

package/data/core/token/token:tokens-figma-variables-sick2025-dark-json.json

@@ -18,7 +18,7 @@
   "name": "sick2025-dark.json",
   "package": "tokens",
   "relations": [],
-  "since": "3.15.7",
+  "since": "3.17.0",
   "sources": [
     "packages/tokens/src/figma-variables/output/sick2025-dark.json"
   ],