@synergy-design-system/metadata 3.8.0 → 3.10.0

package/data/layers/full/component/component:syn-validate/angular/validate.component.ts

@@ -12,7 +12,7 @@ import {
   EventEmitter,
   AfterContentInit,
 } from '@angular/core';
-import type { SynValidate } from '@synergy-design-system/components';
+import type SynValidate from '@synergy-design-system/components/components/validate/validate.component.js';
 
 import '@synergy-design-system/components/components/validate/validate.js';
 

package/data/layers/full/component/component:syn-validate/vue/SynVueValidate.vue

@@ -36,7 +36,7 @@
 import { computed, ref } from 'vue';
 import '@synergy-design-system/components/components/validate/validate.js';
 
-import type { SynValidate } from '@synergy-design-system/components';
+import type SynValidate from '@synergy-design-system/components/components/validate/validate.component.js';
 
 // DOM Reference to the element
 const nativeElement = ref<SynValidate>();

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

@@ -1,5 +1,24 @@
 # @synergy-design-system/angular
 
+## 3.15.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.
+
+### Patch Changes
+
+- Updated dependencies [[`74917ea`](https://github.com/synergy-design-system/synergy-design-system/commit/74917ea30e2d26780202c382c7f157c63e3833ef), [`74917ea`](https://github.com/synergy-design-system/synergy-design-system/commit/74917ea30e2d26780202c382c7f157c63e3833ef)]:
+  - @synergy-design-system/tokens@3.15.0
+  - @synergy-design-system/components@3.15.0
+
 ## 3.14.0
 
 ### Minor Changes

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

@@ -378,6 +378,10 @@ export class Home {
 }
 ```
 
+### 11. Using the chart component
+
+For details on chart components, see the [chart overview](https://synergy-design-system.github.io/?path=/docs/charts-overview--docs) and the [Angular-specific chart documentation](https://synergy-design-system.github.io/?path=/docs/charts-overview--docs#angular).
+
 ---
 
 ## Development

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.14.0",
+  "version": "3.15.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,23 @@
 # Changelog
 
+## 3.15.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.
+
+### Patch Changes
+
+- Updated dependencies [[`74917ea`](https://github.com/synergy-design-system/synergy-design-system/commit/74917ea30e2d26780202c382c7f157c63e3833ef)]:
+  - @synergy-design-system/tokens@3.15.0
+
 ## 3.14.0
 
 ### Minor Changes

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

@@ -209,7 +209,89 @@ document.addEventListener("load", () => {
 
 ---
 
-### 6. Add html autocompletion to VSCode (optional)
+### 6. Using the `syn-chart` component (optional)
+
+For more detailed information about the `syn-chart` component see the [Charting Overview page](https://synergy-design-system.github.io/?path=/docs/charting-overview--docs)
+
+The `<syn-chart>` component allows you to display charts powered by [Apache ECharts](https://echarts.apache.org). Because not every project needs charting functionality, `echarts` is an **optional peer dependency** that must be installed separately.
+
+> **Note:** `syn-chart` is currently **experimental**. Only **line charts** (`series[].type: 'line'`) are supported. Support for additional chart types will be added in future releases.
+
+#### Step 1: Install the `echarts` dependency
+
+```bash
+npm install --save echarts
+```
+
+> **Note:** Only **Apache ECharts version 6** (`echarts@^6.1.0`) is officially supported. Other versions may work but are not tested or guaranteed to be compatible.
+
+#### Step 2: Load the component tokens (required)
+
+The chart component requires two sets of design tokens to render correctly:
+
+1. **The standard Synergy component tokens** – loaded as part of the regular theme setup (light or dark). If you have already done this as part of step 3 above, you can skip this.
+2. **The chart-specific tokens** – must be loaded **in addition** to the standard tokens.
+
+```typescript
+// main.ts
+
+// 1. Load the standard Synergy theme tokens (light or dark)
+import "@synergy-design-system/tokens/themes/light.css";
+
+// 2. Load the chart-specific tokens matching your theme (light or dark)
+import "@synergy-design-system/tokens/charts/themes/light.css";
+```
+
+#### Step 3: Import the chart component explicitly
+
+`syn-chart` is **not** included in the default Synergy bundle (i.e. it is not exported by the main `synergy.js` entry point). You must import it explicitly:
+
+```typescript
+// main.ts
+
+// Import the chart component explicitly (not part of the default bundle)
+import "@synergy-design-system/components/components/chart/chart.js";
+```
+
+#### Step 4: Use the component in your HTML
+
+```html
+<syn-chart id="my-chart"></syn-chart>
+
+<script type="module">
+  const chart = document.getElementById("my-chart");
+
+  chart.config = {
+    xAxis: { type: "category", data: ["Mon", "Tue", "Wed", "Thu", "Fri"] },
+    yAxis: { type: "value" },
+    series: [{ type: "line", data: [820, 932, 901, 934, 1290] }],
+  };
+</script>
+```
+
+#### Complete setup example (using a build tool like Vite)
+
+```typescript
+// main.ts
+
+// 1. Load the standard Synergy theme (required for all components)
+import "@synergy-design-system/tokens/themes/light.css";
+
+// 2. Load the chart-specific tokens (required for syn-chart)
+import "@synergy-design-system/tokens/charts/themes/light.css";
+
+// 3. Load the Synergy CSS utility functions
+import "@synergy-design-system/components/index.css";
+
+// 4. Import the chart component explicitly
+import "@synergy-design-system/components/components/chart/chart.js";
+```
+
+For the full API documentation, available properties, and live examples, visit the [syn-chart component documentation](https://synergy-design-system.github.io/?path=/docs/charting-syn-chart--docs).
+
+---
+
+### 7. Add html autocompletion to VSCode (optional)
 
 This package ships with a [custom-elements-manifest](https://github.com/webcomponents/custom-elements-manifest) that may be used to provide typings for tags. To enable code completion, please proceed the following way:
 
@@ -224,7 +306,7 @@ This package ships with a [custom-elements-manifest](https://github.com/webcompo
 
 ---
 
-### 7. Breaking changes between major versions
+### 8. Breaking changes between major versions
 
 Please have a look at the official [breaking changes list](https://synergy-design-system.github.io/?path=/docs/packages-components-breaking-changes--docs) for information how to update to new major versions of Synergy.
 

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.14.0",
+  "version": "3.15.0",
   "description": "",
   "repository": {
     "type": "git",
@@ -84,12 +84,10 @@
     "@web/test-runner": "^0.20.2",
     "@web/test-runner-commands": "^0.9.0",
     "@web/test-runner-playwright": "^0.11.1",
-    "chalk": "^5.6.2",
     "change-case": "^5.4.4",
     "command-line-args": "^6.0.2",
     "comment-parser": "^1.4.6",
     "custom-element-vs-code-integration": "^1.5.0",
-    "del": "^8.0.1",
     "esbuild": "^0.28.0",
     "esbuild-plugin-replace": "^1.4.0",
     "eslint": "^9.39.4",
@@ -101,7 +99,6 @@
     "eslint-plugin-lit-a11y": "^5.1.1",
     "eslint-plugin-playwright": "^2.10.2",
     "eslint-plugin-wc": "^3.1.0",
-    "globby": "^16.2.0",
     "html-validate": "^10.13.1",
     "ora": "^9.4.0",
     "postcss": "^8.5.10",
@@ -119,7 +116,13 @@
     "lit": "^3.3.2"
   },
   "peerDependencies": {
-    "@synergy-design-system/tokens": "workspace:*"
+    "@synergy-design-system/tokens": "workspace:*",
+    "echarts": "^6.1.0"
+  },
+  "peerDependenciesMeta": {
+    "echarts": {
+      "optional": true
+    }
   },
   "customElements": "dist/custom-elements.json"
 }

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

@@ -1,5 +1,24 @@
 # @synergy-design-system/react
 
+## 3.15.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.
+
+### Patch Changes
+
+- Updated dependencies [[`74917ea`](https://github.com/synergy-design-system/synergy-design-system/commit/74917ea30e2d26780202c382c7f157c63e3833ef), [`74917ea`](https://github.com/synergy-design-system/synergy-design-system/commit/74917ea30e2d26780202c382c7f157c63e3833ef)]:
+  - @synergy-design-system/tokens@3.15.0
+  - @synergy-design-system/components@3.15.0
+
 ## 3.14.0
 
 ### Minor Changes

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

@@ -247,6 +247,10 @@ export const Home: FC = () => {
 };
 ```
 
+### 10. Using the chart component
+
+For details on chart components, see the [chart overview](https://synergy-design-system.github.io/?path=/docs/charts-overview--docs) and the [React-specific chart documentation](https://synergy-design-system.github.io/?path=/docs/charts-overview--docs#react).
+
 ---
 
 ## Development

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

@@ -43,7 +43,7 @@
     "directory": "packages/react"
   },
   "type": "module",
-  "version": "3.14.0",
+  "version": "3.15.0",
   "devDependencies": {
     "@types/react": "^19.2.14",
     "react": "^19.2.5"

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

@@ -83,6 +83,7 @@ import type {
   SynTooltip,
   SynValidate,
 } from '@synergy-design-system/components';
+import type SynChart from '@synergy-design-system/components/components/chart/chart.component.js';
 
 /**
  * Used core types
@@ -263,6 +264,15 @@ export type SynCustomElement<
  * @cssproperty --border-width - The width of the card's borders.
  * @cssproperty --padding - The padding to use for the card's sections.
  */ export type SynCardJSXElement = SynCustomElement<SynCard, []>;
+/**
+ * @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)
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/charting-syn-chart--docs
+ * @status experimental
+ * @since 0.0.0
+ *
+ * @csspart base - The component's base wrapper.
+ */ export type SynChartJSXElement = SynCustomElement<SynChart, []>;
 /**
  * @summary Checkboxes allow the user to toggle an option on or off.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-checkbox--docs
@@ -1722,6 +1732,15 @@ declare module 'react' {
        * @cssproperty --border-width - The width of the card's borders.
        * @cssproperty --padding - The padding to use for the card's sections.
        */ 'syn-card': SynCardJSXElement;
+      /**
+       * @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)
+       *
+       * @documentation https://synergy-design-system.github.io/?path=/docs/charting-syn-chart--docs
+       * @status experimental
+       * @since 0.0.0
+       *
+       * @csspart base - The component's base wrapper.
+       */ 'syn-chart': SynChartJSXElement;
       /**
        * @summary Checkboxes allow the user to toggle an option on or off.
        * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-checkbox--docs

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

@@ -1,5 +1,21 @@
 # Changelog
 
+## 3.15.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: ✨ New chart color tokens ([#1205](https://github.com/synergy-design-system/synergy-design-system/issues/1205))
+
+  **What's new?**
+  - New chart tokens available as CSS, SCSS, and JavaScript exports under `dist/charts/`
+  - **Categorical palette** – 12 distinct colors to visually distinguish discrete data categories
+  - **Sequential palettes** (`sequential-01`–`sequential-07`) – 10-step single-hue ramps progressing from light to dark, ideal for visualizing ordered data by intensity or magnitude
+  - **Status palettes** – 10-step ramps for `critical`, `error`, `info`, `success`, and `warning`, progressing from light (low impact) to dark (high urgency) to convey severity within a single status color
+
+  ⚠️ The chart tokens are only available for the sick2025 theme and **NOT** for the sick2018 theme.
+
 ## 3.14.0
 
 ## 3.13.4

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

@@ -5,6 +5,9 @@ It provides exports for colors, spacings, shadows, sizings, typography and more
 
 The source of the tokens can be found at [Figma](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=104-235&mode=design&t=GPu4VVd9yffLLAaS-0)
 
+In addition, it ships dedicated color palettes that can be used for charts components.
+The source of the chart tokens can be found at [Figma](https://www.figma.com/design/9IpXnDH4GFziUH9sOpnK8V/Chart-Library?node-id=15-221&p=f&t=rVC9uEQgFFNLGUcL-0)
+
 ---
 
 ## Installation
@@ -188,6 +191,61 @@ Currently the raw .json tokens files are exported under `/src/figma-tokens/*/`.
 
 ---
 
+### Using chart tokens
+
+The tokens package also ships a dedicated set of **chart tokens** for data-visualization use cases (e.g. for the `syn-chart` component). They follow the same theme/mode structure as the component tokens.
+
+Chart tokens are served from a separate output path: `dist/charts/themes/`. Like the component tokens, they provide theme-specific files as well as generic `light.css` and `dark.css` aliases pointing to the current default theme (`sick2025`).
+
+#### Available chart token files
+
+| Theme    | Mode  | Stylesheet to use                              | Corresponding classNames                |
+| :------- | :---- | :--------------------------------------------- | :-------------------------------------- |
+| sick2025 | light | `tokens/dist/charts/themes/sick2025_light.css` | `syn-theme-light`, `syn-sick2025-light` |
+| sick2025 | dark  | `tokens/dist/charts/themes/sick2025_dark.css`  | `syn-theme-dark`, `syn-sick2025-dark`   |
+
+The generic aliases always point to the current default theme:
+
+| Alias       | Points to                               |
+| :---------- | :-------------------------------------- |
+| `light.css` | `dist/charts/themes/sick2025_light.css` |
+| `dark.css`  | `dist/charts/themes/sick2025_dark.css`  |
+
+#### Loading chart tokens
+
+Chart tokens **must be loaded in addition to the regular component tokens**, as they reference CSS variables defined there.
+
+```html
+<!DOCTYPE html>
+  <head>
+    <!-- 1. Load component tokens first (required base) -->
+    <link rel="stylesheet" href="/node_modules/@synergy-design-system/tokens/dist/themes/light.css" />
+
+    <!-- 2. Load chart tokens on top -->
+    <link rel="stylesheet" href="/node_modules/@synergy-design-system/tokens/dist/charts/themes/light.css" />
+  </head>
+</html>
+```
+
+```javascript
+// When using a bundler
+import "@synergy-design-system/tokens/themes/light.css";
+import "@synergy-design-system/tokens/charts/themes/light.css";
+```
+
+Chart tokens expose CSS custom properties with the `--syn-` prefix, for example:
+
+```css
+/* Categorical color series (01–12) */
+--syn-categorical-01: var(--syn-color-primary-400);
+--syn-categorical-02: var(--syn-color-accent-700);
+/* … */
+
+/* Sequential and diverging palette tokens are also provided */
+```
+
+---
+
 ## Optional: Configuring tokens in VSCode
 
 Using VSCode?
@@ -206,8 +264,10 @@ Just make sure to add a valid path to the light theme in the `.vscode/settings.j
 
 ### Architecture and Data Flow
 
+#### Component tokens
+
 ```
-Figma
+Figma (main file: bZFqk9urD3NlghGUKrkKCR)
     ↓
 Figma REST API
     ↓
@@ -215,11 +275,29 @@ Raw JSON Files (src/figma-variables/variableTokens.json + styleTokens.json)
     ↓
 Transform Scripts (scripts/figma/)
     ↓
-Style Dictionary compliant JSON Files (src/figma-variables/output/)
+Style Dictionary-compatible JSON Files (src/figma-variables/output/)
+    ↓
+Style Dictionary Processing (scripts/build-components.js)
+    ↓
+Build Output (dist/themes/, dist/js/, dist/scss/)
+```
+
+#### Chart tokens
+
+```
+Figma (chart file: 9IpXnDH4GFziUH9sOpnK8V)
+    ↓
+Figma REST API
+    ↓
+Raw JSON File (src/figma-charts/chartTokens.json)
+    ↓
+Transform Script (scripts/figma/transformer-variables-generic.js)
     ↓
-Style Dictionary Processing (scripts/build.js)
+Style Dictionary-compatible JSON Files (src/figma-charts/output/)
     ↓
-Build Output (dist/)
+Style Dictionary Processing (scripts/build-charts.js)
+    ↓
+Build Output (dist/charts/themes/, dist/charts/js/, dist/charts/scss/)
 ```
 
 ### Building the tokens
@@ -233,31 +311,34 @@ This scripts needs the figma access token and optionally the figma file id, so i
 # Required: Figma Personal Access Token
 export FIGMA_TOKEN="your_figma_token_here"
 
-# Optional: Specific Figma File/Branch ID (Default: Main Branch)
+# Optional: Specific Figma File/Branch ID for component tokens (Default: Main Branch)
 export FIGMA_FILE_ID="your_figma_file_id"
+
+# Optional: Specific Figma File/Branch ID for chart tokens (Default: Chart file)
+export FIGMA_CHARTING_FILE_ID="your_figma_charting_file_id"
 ```
 
 ```bash
-# Fetch all Figma data (Variables + Styles)
+# Fetch all Figma data (component variables, chart variables + styles)
 pnpm fetch:figma
 
-# Only fetch variables and transform into Style Dictionary format
+# Only fetch component + chart variables and transform into Style Dictionary format
 pnpm fetch:variables
 
 # Only fetch styles and transform into Style Dictionary format
 pnpm fetch:styles
 
-# Transform already fetched variables into Style Dictionary format
+# Transform already fetched component variables into Style Dictionary format
 pnpm build:variables
 
 # Transform already fetched styles into Style Dictionary format
 pnpm build:styles
 
-# Process transformed tokens with Style Dictionary (build final output)
+# Build component and chart tokens (final CSS/JS/SCSS output in dist/)
 pnpm build
 
 # Or do it all at once
-FIGMA_FILE_ID="FILE_ID" FIGMA_TOKEN="FIGMA_TOKEN" pnpm build:all
+FIGMA_FILE_ID="FILE_ID" FIGMA_CHARTING_FILE_ID="CHART_FILE_ID" FIGMA_TOKEN="FIGMA_TOKEN" pnpm build:all
 ```
 
 #### Figma variables
@@ -295,14 +376,29 @@ You can trigger a build using `pnpm build` in the `tokens` package root. This wi
   - `sick2025-light.json`: Light Theme Tokens for SICK 2025
   - `sick2025-dark.json`: Dark Theme Tokens for SICK 2025
 
+#### `/src/figma-charts/`
+
+- **`chartTokens.json`**: Raw data of Figma Chart Variables, directly fetched from the charting Figma file
+- **`output/`**: Transformed chart token files in Style Dictionary-compatible formats
+  - `sick2025-light.json`: Light Chart Tokens for SICK 2025
+  - `sick2025-dark.json`: Dark Chart Tokens for SICK 2025
+
 #### `/scripts/figma/`
 
-- **`fetch-variables.js`**: Downloads Figma Variables via the REST API
+- **`fetch-variables.js`**: Downloads Figma Variables (component **and** chart tokens) via the REST API
 - **`style-dict-outputter.js`**: Custom outputter for Figma Styles export
-- **`transform-tokens.js`**: Transforms Figma Variables into Style Dictionary format
+- **`transformer-variables-generic.js`**: Transforms Figma Variables into Style Dictionary format (shared by component and chart pipelines)
 - **`transform-styles.js`**: Transforms Figma Styles into Style Dictionary format
 - **`helpers.js`**: Utility functions
 
+#### `/scripts/build-components.js`
+
+Runs the Style Dictionary pipeline for component tokens and writes output to `dist/themes/`, `dist/js/`, and `dist/scss/`.
+
+#### `/scripts/build-charts.js`
+
+Runs the Style Dictionary pipeline for chart tokens and writes output to `dist/charts/themes/`, `dist/charts/js/`, and `dist/charts/scss/`. Chart tokens reference component token variables for resolution but only emit chart-specific CSS custom properties in the final output.
+
 #### `/scripts/add-missing-tokens.js`
 
 **Purpose**:  
@@ -314,9 +410,9 @@ This script is designed to inspect and append missing CSS variables based on a g
 
 **Key Functions**:
 
-- `extractVariables(data, prefix)`: Extracts variables from the provided data based on the prefix.
-- `compareAndAppendVariables(sourceFilePath, targetFilePath, prefix)`: Compares source and target files for missing variables and appends them.
-- `addMissingTokens(prefix)`: Main function that loops through target files and checks for missing variables.
+- `extractVariables(data)`: Extracts CSS variable declarations from the provided CSS string.
+- `appendVariables(targetFilePath, variables)`: Appends missing variables to the target CSS file, skipping any that already exist.
+- `addMissingTokens(targetDir)`: Main function that iterates over all CSS files in the target directory and appends any missing variables.
 
 ### Github Action
 
@@ -377,9 +473,10 @@ When adding new tokens or changing existing token values, the test reference fil
 
 The token package includes a test system that validates the consistency between the built token files and reference files:
 
-- **`test/light.css`**: Reference file containing expected CSS variables for the light theme
-- **`test/dark.css`**: Reference file containing expected CSS variables for the dark theme
-- **`test/test-css-variables.js`**: Test script that compares built files against reference files
+- **`test/sick2018_light.css`** / **`test/sick2018_dark.css`**: Reference files for the SICK 2018 component themes
+- **`test/sick2025_light.css`** / **`test/sick2025_dark.css`**: Reference files for the SICK 2025 component themes
+- **`test/sick2025_light_charts.css`** / **`test/sick2025_dark_charts.css`**: Reference files for the SICK 2025 chart themes
+- **`test/test-css-variables.js`**: Test script that compares built files against all reference files
 
 #### When to Update Test Files
 
@@ -409,8 +506,11 @@ After the new / updated tokens are fetched and build:
 3. **Update reference files**: If the changes are intentional, copy the built files to the test directory or update the files manually with the changes
 
    ```bash
-   # Copy the newly built files to serve as new reference files
+   # Copy the newly built component theme files to serve as new reference files
    cp dist/themes/sick*.css test
+
+   # Copy the newly built chart theme files to serve as new reference files
+   cp dist/charts/themes/sick*.css test
    ```
 
 4. **Verify the update**: Run the test again to ensure everything matches

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

@@ -14,11 +14,9 @@
     "@tamtamchik/json-deep-sort": "^1.5.0",
     "@tokens-studio/sd-transforms": "^2.0.3",
     "@types/node": "^24.12.2",
-    "chalk": "^5.6.2",
     "change-case": "^5.4.4",
     "eslint": "^9.39.4",
     "eslint-import-resolver-typescript": "^4.4.4",
-    "rimraf": "^6.1.3",
     "style-dictionary": "^5.4.0",
     "stylelint": "^17.9.0",
     "typescript": "^5.9.3"
@@ -33,7 +31,14 @@
       "default": "./package.json"
     },
     "./themes/*": "./dist/themes/*",
-    "./scss/*": "./dist/scss/*"
+    "./scss/*": "./dist/scss/*",
+    "./charts/themes/*": "./dist/charts/themes/*",
+    "./charts/scss/*": "./dist/charts/scss/*",
+    "./charts": {
+      "types": "./dist/charts/js/index.d.ts",
+      "import": "./dist/charts/js/index.js",
+      "default": "./dist/charts/js/index.js"
+    }
   },
   "files": [
     "dist",
@@ -60,12 +65,12 @@
     "build:all": "dotenvx -q run pnpm build:_all",
     "build:_all": "pnpm clean && pnpm fetch:figma && pnpm build:figma && pnpm build",
     "build:figma": "pnpm run build:variables && pnpm run build:styles",
-    "build:variables": "node scripts/figma/transform-tokens.js",
+    "build:variables": "node scripts/figma/transform-variables.js",
     "build:styles": "node scripts/figma/transform-styles.js",
     "fetch:figma": "pnpm run fetch:variables && pnpm run fetch:styles",
     "fetch:styles": "figma-export use-config",
     "fetch:variables": "node scripts/figma/fetch-variables.js",
-    "clean": "rimraf dist",
+    "clean": "node scripts/clean.js",
     "lint:css": "stylelint \"dist/**/*.css\"",
     "lint:js": "eslint scripts dist/js",
     "lint:types": "tsc --noEmit",
@@ -77,5 +82,5 @@
   },
   "type": "module",
   "types": "./dist/js/index.d.ts",
-  "version": "3.14.0"
+  "version": "3.15.0"
 }

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

@@ -1,5 +1,24 @@
 # @synergy-design-system/vue
 
+## 3.15.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.
+
+### Patch Changes
+
+- Updated dependencies [[`74917ea`](https://github.com/synergy-design-system/synergy-design-system/commit/74917ea30e2d26780202c382c7f157c63e3833ef), [`74917ea`](https://github.com/synergy-design-system/synergy-design-system/commit/74917ea30e2d26780202c382c7f157c63e3833ef)]:
+  - @synergy-design-system/tokens@3.15.0
+  - @synergy-design-system/components@3.15.0
+
 ## 3.14.0
 
 ### Minor Changes