@synergy-design-system/metadata 3.8.0 → 3.10.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## 3.10.0
+
+### Minor Changes
+
+- Released on: 2026-06-02
+
+  chore: ✨ Update Metadata and MCP with latest metadata
+
+## 3.9.0
+
+### Minor Changes
+
+- [#1271](https://github.com/synergy-design-system/synergy-design-system/pull/1271) [`74917ea`](https://github.com/synergy-design-system/synergy-design-system/commit/74917ea30e2d26780202c382c7f157c63e3833ef) Thanks [@kirchsuSICKAG](https://github.com/kirchsuSICKAG)! - Released on: 2026-05-28
+
+  feat: ✨ `<syn-chart>` ([#1205](https://github.com/synergy-design-system/synergy-design-system/issues/1205))
+
+  This release adds an experimental MVP for the new `<syn-chart>` component for data visualization based on [Apache ECharts](https://echarts.apache.org).
+  It is available for Web Component, React, Angular and Vue
+
+  > ⚠️ **Experimental:** The API or behavior may change in future releases without a major version bump.
+
 ## 3.8.0
 
 ### Minor Changes

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

@@ -0,0 +1,181 @@
+{
+  "custom": {
+    "clusters": [
+      "components-by-tag/data-visualization"
+    ],
+    "frameworks": {
+      "angular": {
+        "componentName": "SynChartComponent",
+        "exportPath": "packages/angular/index.ts",
+        "packageName": "@synergy-design-system/angular",
+        "selector": "syn-chart",
+        "sourcePath": "packages/angular/components/chart/chart.component.ts"
+      },
+      "react": {
+        "jsx": {
+          "componentName": "SynChart",
+          "documentation": "https://synergy-design-system.github.io/?path=/docs/charting-syn-chart--docs",
+          "events": [],
+          "packageName": "@synergy-design-system/react",
+          "since": "0.0.0",
+          "sourcePath": "packages/react/src/types/syn-jsx-elements.ts",
+          "status": "experimental",
+          "subpathExport": "./types/latest",
+          "typeName": "SynChartJSXElement"
+        },
+        "wrapper": {
+          "componentName": "SynChart",
+          "exportPath": "packages/react/src/index.ts",
+          "packageName": "@synergy-design-system/react",
+          "sourcePath": "packages/react/src/components/chart.ts"
+        }
+      },
+      "vue": {
+        "componentName": "SynVueChart",
+        "exportPath": "packages/vue/src/index.ts",
+        "packageName": "@synergy-design-system/vue",
+        "sourcePath": "packages/vue/src/components/SynVueChart.vue"
+      }
+    },
+    "override": {
+      "figmaDocsId": "https://www.figma.com/design/9IpXnDH4GFziUH9sOpnK8V/Chart-Library?node-id=0-1&p=f&t=PkQKC2p7WIr2k0og-0",
+      "storySourcePath": "components.chart",
+      "storyTags": [
+        "Data Visualization"
+      ]
+    },
+    "rules": {
+      "accessibility": [
+        "Do not rely on color alone to distinguish data series; use labels, markers, or patterns where helpful.",
+        "Provide a text alternative or data table for users who cannot interpret visualizations reliably.",
+        "Ensure chart context is available in surrounding text, including what is shown and why it matters."
+      ],
+      "component": "syn-chart",
+      "usageGuidelines": [
+        {
+          "content": [
+            "Use charts when visual pattern recognition (trends, peaks, outliers) is more helpful than raw tables.",
+            "Keep the chart goal specific and clear (for example trend over time, comparison, distribution).",
+            "Avoid using charts when exact value lookup is the primary task; provide a table or value list as a complement."
+          ],
+          "id": "data-and-purpose",
+          "name": "Data and Purpose"
+        },
+        {
+          "content": [
+            "Use clear axis labels, units, and legends so users can understand the data context immediately.",
+            "Limit the number of simultaneously visible series to reduce visual noise.",
+            "Choose palettes that maintain sufficient contrast between series and background.",
+            "Avoid excessive decoration and effects that do not add analytical value."
+          ],
+          "id": "visual-clarity",
+          "name": "Visual Clarity"
+        },
+        {
+          "content": [
+            "Ensure labels, tooltips, and legends remain readable at small viewport sizes.",
+            "Prevent overlapping labels and crowded markers by simplifying or reducing displayed data where needed.",
+            "Keep chart dimensions appropriate for the amount and complexity of the data shown."
+          ],
+          "id": "responsiveness-and-density",
+          "name": "Responsiveness and Density"
+        }
+      ],
+      "useCases": [
+        "Display time-based trends such as sensor values, throughput, or production metrics.",
+        "Compare multiple data series in dashboards to identify differences and anomalies.",
+        "Present historical data to support analysis, reporting, and decision-making.",
+        "Visualize key performance indicators where users need a fast visual overview."
+      ]
+    },
+    "sourceModulePath": "components/chart/chart.js",
+    "summary": "The `<syn-chart>` component is a container for displaying charts. It provides a structured layout and styling for chart elements, allowing for consistent presentation across different types of charts. The chart component is based on [Apache ECharts](https://echarts.apache.org)"
+  },
+  "id": "component:syn-chart",
+  "kind": "component",
+  "layers": {
+    "examples": [
+      {
+        "layer": "examples",
+        "path": "layers/examples/component/component:syn-chart.md"
+      }
+    ],
+    "full": [
+      {
+        "layer": "full",
+        "path": "layers/full/component/component:syn-chart/angular/chart.component.ts"
+      },
+      {
+        "layer": "full",
+        "path": "layers/full/component/component:syn-chart/components/chart.component.ts"
+      },
+      {
+        "layer": "full",
+        "path": "layers/full/component/component:syn-chart/components/chart.palettes.ts"
+      },
+      {
+        "layer": "full",
+        "path": "layers/full/component/component:syn-chart/components/chart.styles.ts"
+      },
+      {
+        "layer": "full",
+        "path": "layers/full/component/component:syn-chart/components/chart.ts"
+      },
+      {
+        "layer": "full",
+        "path": "layers/full/component/component:syn-chart/components/types.ts"
+      },
+      {
+        "layer": "full",
+        "path": "layers/full/component/component:syn-chart/react/chart.ts"
+      },
+      {
+        "layer": "full",
+        "path": "layers/full/component/component:syn-chart/vue/SynVueChart.vue"
+      },
+      {
+        "layer": "full",
+        "path": "layers/full/component/component:syn-chart/react/SynChartJSXElement.ts"
+      }
+    ],
+    "interface": [
+      {
+        "layer": "interface",
+        "path": "layers/interface/component/component:syn-chart.json"
+      },
+      {
+        "layer": "interface",
+        "path": "layers/interface/component/component:syn-chart.md"
+      }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-chart.md"
+      }
+    ]
+  },
+  "name": "syn-chart",
+  "package": "components",
+  "relations": [],
+  "since": "0.0.0",
+  "sources": [
+    "packages/angular/components/chart/chart.component.ts",
+    "packages/components/src/components/chart/chart.component.ts",
+    "packages/components/src/components/chart/chart.palettes.ts",
+    "packages/components/src/components/chart/chart.styles.ts",
+    "packages/components/src/components/chart/chart.ts",
+    "packages/components/src/components/chart/types.ts",
+    "packages/react/src/components/chart.ts",
+    "packages/vue/src/components/SynVueChart.vue"
+  ],
+  "status": "experimental",
+  "tags": [
+    "angular",
+    "chart",
+    "component",
+    "react",
+    "syn-chart",
+    "vue"
+  ]
+}

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

@@ -21,7 +21,7 @@
   "name": "Angular Components Module",
   "package": "angular",
   "relations": [],
-  "since": "3.14.0",
+  "since": "3.15.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.14.0",
+  "since": "3.15.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.14.0",
+    "packageVersion": "3.15.0",
     "subpathExports": [
       ".",
       "./components/*",
@@ -39,7 +39,7 @@
   "name": "Angular Framework Package",
   "package": "angular",
   "relations": [],
-  "since": "3.14.0",
+  "since": "3.15.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.14.0",
+  "since": "3.15.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.14.0"
+    "packageVersion": "3.15.0"
   },
   "id": "setup:components-package",
   "kind": "setup",
@@ -40,7 +40,7 @@
   "name": "Components Package",
   "package": "components",
   "relations": [],
-  "since": "3.14.0",
+  "since": "3.15.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.14.0",
+    "packageVersion": "3.15.0",
     "subpathExports": [
       ".",
       "./components/*",
@@ -42,7 +42,7 @@
   "name": "React Framework Package",
   "package": "react",
   "relations": [],
-  "since": "3.14.0",
+  "since": "3.15.0",
   "sources": [
     "packages/react/README.md",
     "packages/react/CHANGELOG.md",

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

@@ -2,6 +2,11 @@
   "custom": {
     "artifactGroups": {
       "dist": [
+        "packages/tokens/dist/charts/js/index.d.ts",
+        "packages/tokens/dist/charts/js/index.js",
+        "packages/tokens/dist/charts/scss/_tokens.scss",
+        "packages/tokens/dist/charts/themes/sick2025_dark.css",
+        "packages/tokens/dist/charts/themes/sick2025_light.css",
         "packages/tokens/dist/js/index.d.ts",
         "packages/tokens/dist/js/index.js",
         "packages/tokens/dist/scss/_tokens.scss",
@@ -19,12 +24,15 @@
     },
     "exports": [
       ".",
+      "./charts",
+      "./charts/scss/*",
+      "./charts/themes/*",
       "./package.json",
       "./scss/*",
       "./themes/*"
     ],
     "packageName": "@synergy-design-system/tokens",
-    "packageVersion": "3.14.0"
+    "packageVersion": "3.15.0"
   },
   "id": "setup:tokens-package",
   "kind": "setup",
@@ -51,7 +59,7 @@
   "name": "Tokens Package",
   "package": "tokens",
   "relations": [],
-  "since": "3.14.0",
+  "since": "3.15.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.14.0"
+    "packageVersion": "3.15.0"
   },
   "id": "setup:vue-package",
   "kind": "setup",
@@ -33,7 +33,7 @@
   "name": "Vue Framework Package",
   "package": "vue",
   "relations": [],
-  "since": "3.14.0",
+  "since": "3.15.0",
   "sources": [
     "packages/vue/README.md",
     "packages/vue/CHANGELOG.md",

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

@@ -0,0 +1,31 @@
+{
+  "custom": {
+    "artifactPath": "charts/js/index.d.ts",
+    "format": "javascript",
+    "sourceType": "dist"
+  },
+  "id": "token:tokens-charts-js-index-d-ts",
+  "kind": "token",
+  "layers": {
+    "full": [
+      {
+        "layer": "full",
+        "path": "layers/full/tokens/charts/js/index.d.ts"
+      }
+    ]
+  },
+  "name": "index.d.ts",
+  "package": "tokens",
+  "relations": [],
+  "since": "3.15.0",
+  "sources": [
+    "packages/tokens/dist/charts/js/index.d.ts"
+  ],
+  "status": "stable",
+  "tags": [
+    "artifact",
+    "token",
+    "tokens",
+    "dist"
+  ]
+}

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

@@ -0,0 +1,31 @@
+{
+  "custom": {
+    "artifactPath": "charts/js/index.js",
+    "format": "javascript",
+    "sourceType": "dist"
+  },
+  "id": "token:tokens-charts-js-index-js",
+  "kind": "token",
+  "layers": {
+    "full": [
+      {
+        "layer": "full",
+        "path": "layers/full/tokens/charts/js/index.js"
+      }
+    ]
+  },
+  "name": "index.js",
+  "package": "tokens",
+  "relations": [],
+  "since": "3.15.0",
+  "sources": [
+    "packages/tokens/dist/charts/js/index.js"
+  ],
+  "status": "stable",
+  "tags": [
+    "artifact",
+    "token",
+    "tokens",
+    "dist"
+  ]
+}

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

@@ -0,0 +1,31 @@
+{
+  "custom": {
+    "artifactPath": "charts/scss/_tokens.scss",
+    "format": "sass",
+    "sourceType": "dist"
+  },
+  "id": "token:tokens-charts-scss-tokens-scss",
+  "kind": "token",
+  "layers": {
+    "full": [
+      {
+        "layer": "full",
+        "path": "layers/full/tokens/charts/scss/_tokens.scss"
+      }
+    ]
+  },
+  "name": "_tokens.scss",
+  "package": "tokens",
+  "relations": [],
+  "since": "3.15.0",
+  "sources": [
+    "packages/tokens/dist/charts/scss/_tokens.scss"
+  ],
+  "status": "stable",
+  "tags": [
+    "artifact",
+    "token",
+    "tokens",
+    "dist"
+  ]
+}

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

@@ -0,0 +1,32 @@
+{
+  "custom": {
+    "artifactPath": "charts/themes/sick2025_dark.css",
+    "format": "css",
+    "sourceType": "dist",
+    "theme": "sick2025-dark"
+  },
+  "id": "token:tokens-charts-themes-sick2025-dark-css",
+  "kind": "token",
+  "layers": {
+    "full": [
+      {
+        "layer": "full",
+        "path": "layers/full/tokens/charts/themes/sick2025_dark.css"
+      }
+    ]
+  },
+  "name": "sick2025_dark.css",
+  "package": "tokens",
+  "relations": [],
+  "since": "3.15.0",
+  "sources": [
+    "packages/tokens/dist/charts/themes/sick2025_dark.css"
+  ],
+  "status": "stable",
+  "tags": [
+    "artifact",
+    "token",
+    "tokens",
+    "dist"
+  ]
+}

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

@@ -0,0 +1,32 @@
+{
+  "custom": {
+    "artifactPath": "charts/themes/sick2025_light.css",
+    "format": "css",
+    "sourceType": "dist",
+    "theme": "sick2025-light"
+  },
+  "id": "token:tokens-charts-themes-sick2025-light-css",
+  "kind": "token",
+  "layers": {
+    "full": [
+      {
+        "layer": "full",
+        "path": "layers/full/tokens/charts/themes/sick2025_light.css"
+      }
+    ]
+  },
+  "name": "sick2025_light.css",
+  "package": "tokens",
+  "relations": [],
+  "since": "3.15.0",
+  "sources": [
+    "packages/tokens/dist/charts/themes/sick2025_light.css"
+  ],
+  "status": "stable",
+  "tags": [
+    "artifact",
+    "token",
+    "tokens",
+    "dist"
+  ]
+}

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.14.0",
+  "since": "3.15.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.14.0",
+  "since": "3.15.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.14.0",
+  "since": "3.15.0",
   "sources": [
     "packages/tokens/src/figma-variables/output/sick2025-dark.json"
   ],

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

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

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

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

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

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

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

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

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

@@ -18,7 +18,7 @@
   "name": "sick2018_dark.css",
   "package": "tokens",
   "relations": [],
-  "since": "3.14.0",
+  "since": "3.15.0",
   "sources": [
     "packages/tokens/dist/themes/sick2018_dark.css"
   ],

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

@@ -18,7 +18,7 @@
   "name": "sick2018_light.css",
   "package": "tokens",
   "relations": [],
-  "since": "3.14.0",
+  "since": "3.15.0",
   "sources": [
     "packages/tokens/dist/themes/sick2018_light.css"
   ],

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

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

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

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