@synergy-design-system/metadata 3.8.0 → 3.10.0

package/data/index.json

@@ -1,5 +1,5 @@
 {
-  "builtAt": "2026-05-21T10:37:34.453Z",
+  "builtAt": "2026-06-02T08:27:54.928Z",
   "entities": [
     {
       "corePath": "data/core/asset/asset:sick2018-icons.json",
@@ -283,6 +283,28 @@
         "vue"
       ]
     },
+    {
+      "corePath": "data/core/component/component:syn-chart.json",
+      "id": "component:syn-chart",
+      "kind": "component",
+      "layers": {
+        "examples": 1,
+        "full": 9,
+        "interface": 2,
+        "rules": 1
+      },
+      "name": "syn-chart",
+      "search": [
+        "component:syn-chart",
+        "syn-chart",
+        "angular",
+        "chart",
+        "component",
+        "react",
+        "syn-chart",
+        "vue"
+      ]
+    },
     {
       "corePath": "data/core/component/component:syn-checkbox.json",
       "id": "component:syn-checkbox",
@@ -1621,6 +1643,91 @@
         "template"
       ]
     },
+    {
+      "corePath": "data/core/token/token:tokens-charts-js-index-d-ts.json",
+      "id": "token:tokens-charts-js-index-d-ts",
+      "kind": "token",
+      "layers": {
+        "full": 1
+      },
+      "name": "index.d.ts",
+      "search": [
+        "token:tokens-charts-js-index-d-ts",
+        "index.d.ts",
+        "artifact",
+        "token",
+        "tokens",
+        "dist"
+      ]
+    },
+    {
+      "corePath": "data/core/token/token:tokens-charts-js-index-js.json",
+      "id": "token:tokens-charts-js-index-js",
+      "kind": "token",
+      "layers": {
+        "full": 1
+      },
+      "name": "index.js",
+      "search": [
+        "token:tokens-charts-js-index-js",
+        "index.js",
+        "artifact",
+        "token",
+        "tokens",
+        "dist"
+      ]
+    },
+    {
+      "corePath": "data/core/token/token:tokens-charts-scss-tokens-scss.json",
+      "id": "token:tokens-charts-scss-tokens-scss",
+      "kind": "token",
+      "layers": {
+        "full": 1
+      },
+      "name": "_tokens.scss",
+      "search": [
+        "token:tokens-charts-scss-tokens-scss",
+        "_tokens.scss",
+        "artifact",
+        "token",
+        "tokens",
+        "dist"
+      ]
+    },
+    {
+      "corePath": "data/core/token/token:tokens-charts-themes-sick2025-dark-css.json",
+      "id": "token:tokens-charts-themes-sick2025-dark-css",
+      "kind": "token",
+      "layers": {
+        "full": 1
+      },
+      "name": "sick2025_dark.css",
+      "search": [
+        "token:tokens-charts-themes-sick2025-dark-css",
+        "sick2025_dark.css",
+        "artifact",
+        "token",
+        "tokens",
+        "dist"
+      ]
+    },
+    {
+      "corePath": "data/core/token/token:tokens-charts-themes-sick2025-light-css.json",
+      "id": "token:tokens-charts-themes-sick2025-light-css",
+      "kind": "token",
+      "layers": {
+        "full": 1
+      },
+      "name": "sick2025_light.css",
+      "search": [
+        "token:tokens-charts-themes-sick2025-light-css",
+        "sick2025_light.css",
+        "artifact",
+        "token",
+        "tokens",
+        "dist"
+      ]
+    },
     {
       "corePath": "data/core/token/token:tokens-figma-variables-sick2018-dark-json.json",
       "id": "token:tokens-figma-variables-sick2018-dark-json",

package/data/layers/examples/component/component:syn-chart.md

@@ -0,0 +1,191 @@
+## Default
+
+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.
+
+```html
+<syn-chart id="chart-default"></syn-chart>
+
+<script type="module">
+  const charts = document.querySelectorAll("#chart-default");
+  charts.forEach((chart) => {
+    chart.config = {
+      series: [{ data: [150, 230, 224, 218, 135, 147, 260], type: "line" }],
+      xAxis: {
+        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+        type: "category",
+      },
+      yAxis: { type: "value" },
+    };
+  });
+</script>
+```
+
+---
+
+## Config
+
+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.
+
+```html
+<syn-chart id="chart-config"></syn-chart>
+<script type="module">
+  const chart = document.querySelector("#chart-config");
+  chart.config = {
+    series: [{ data: [150, 230, 224], type: "line" }],
+    xAxis: { data: ["Mon", "Tue", "Wed"], type: "category" },
+    yAxis: { type: "value" },
+  };
+</script>
+```
+
+---
+
+## Palette
+
+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.
+
+```html
+<syn-chart id="chart-palette" palette="sequential-01"></syn-chart>
+<script type="module">
+  const chart = document.querySelector("#chart-palette");
+  chart.config = {
+    series: [
+      {
+        data: [150, 230, 224, 218, 135, 147, 260],
+        name: "Series A",
+        type: "line",
+      },
+      {
+        data: [80, 130, 180, 100, 90, 120, 200],
+        name: "Series B",
+        type: "line",
+      },
+      {
+        data: [200, 160, 140, 170, 210, 180, 150],
+        name: "Series C",
+        type: "line",
+      },
+      {
+        data: [100, 120, 150, 80, 70, 110, 130],
+        name: "Series D",
+        type: "line",
+      },
+      {
+        data: [180, 200, 170, 190, 220, 210, 240],
+        name: "Series E",
+        type: "line",
+      },
+      {
+        data: [90, 110, 130, 70, 60, 100, 120],
+        name: "Series F",
+        type: "line",
+      },
+      {
+        data: [160, 190, 150, 200, 230, 220, 250],
+        name: "Series G",
+        type: "line",
+      },
+    ],
+    xAxis: {
+      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+      type: "category",
+    },
+    yAxis: { type: "value" },
+  };
+</script>
+```
+
+---
+
+## Get Instance
+
+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.
+
+```html
+<syn-chart id="chart-get-instance"></syn-chart>
+<p
+  style="
+    color: var(--syn-color-neutral-600);
+    font-size: 0.875rem;
+    margin-top: 1rem;
+  "
+>
+  Open the browser console and click a data point to see the native ECharts
+  event payload.
+</p>
+<script type="module">
+  const chart = document.querySelector("#chart-get-instance");
+  chart.config = {
+    series: [{ data: [150, 230, 224, 218, 135, 147, 260], type: "line" }],
+    tooltip: { trigger: "item" },
+    xAxis: {
+      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+      type: "category",
+    },
+    yAxis: { type: "value" },
+  };
+  const chartInstance = chart.getInstance();
+  chartInstance.on("click", (params) =>
+    console.log("ECharts click event:", params),
+  );
+</script>
+```
+
+---
+
+## Multiple Charts With Different Palettes
+
+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.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.
+
+```html
+<syn-chart id="chart-multiple-charts" palette="categorical"></syn-chart>
+<script type="module">
+  const chart = document.querySelector("#chart-multiple-charts");
+
+  const getHexValueFromVariable = (val) =>
+    getComputedStyle(document.documentElement).getPropertyValue(val).trim();
+
+  chart.config = {
+    series: [
+      {
+        data: [160, 185, 180, 175, 150, 160, 190],
+        name: "Series A",
+        type: "line",
+      },
+      {
+        data: [170, 165, 155, 168, 180, 170, 158],
+        name: "Series B",
+        type: "line",
+      },
+      {
+        data: [165, 175, 158, 172, 182, 175, 185],
+        name: "Series C",
+        type: "line",
+      },
+      {
+        color: [getHexValueFromVariable("--syn-sequential-05-80")],
+        data: [80, 60, 90, 50, 70, 55, 85],
+        name: "Series D",
+        type: "line",
+      },
+      {
+        color: [getHexValueFromVariable("--syn-sequential-05-60")],
+        data: [65, 75, 55, 80, 45, 70, 60],
+        name: "Series E",
+        type: "line",
+      },
+      {
+        color: [getHexValueFromVariable("--syn-sequential-05-40")],
+        data: [50, 70, 60, 45, 55, 65, 75],
+        name: "Series F",
+        type: "line",
+      },
+    ],
+    xAxis: {
+      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+      type: "category",
+    },
+    yAxis: { type: "value" },
+  };
+</script>
+```

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

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

package/data/layers/full/component/component:syn-accordion/vue/SynVueAccordion.vue

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

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

@@ -12,7 +12,7 @@ import {
   EventEmitter,
   AfterContentInit,
 } from '@angular/core';
-import type { SynAlert } from '@synergy-design-system/components';
+import type SynAlert from '@synergy-design-system/components/components/alert/alert.component.js';
 import type { SynShowEvent } from '@synergy-design-system/components';
 import type { SynAfterShowEvent } from '@synergy-design-system/components';
 import type { SynHideEvent } from '@synergy-design-system/components';

package/data/layers/full/component/component:syn-alert/vue/SynVueAlert.vue

@@ -37,7 +37,7 @@ import type { SynShowEvent } from '@synergy-design-system/components';
 import type { SynAfterShowEvent } from '@synergy-design-system/components';
 import type { SynHideEvent } from '@synergy-design-system/components';
 import type { SynAfterHideEvent } from '@synergy-design-system/components';
-import type { SynAlert } from '@synergy-design-system/components';
+import type SynAlert from '@synergy-design-system/components/components/alert/alert.component.js';
 
 // DOM Reference to the element
 const nativeElement = ref<SynAlert>();

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

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

package/data/layers/full/component/component:syn-badge/vue/SynVueBadge.vue

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

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

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

package/data/layers/full/component/component:syn-breadcrumb/vue/SynVueBreadcrumb.vue

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

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

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

package/data/layers/full/component/component:syn-breadcrumb-item/vue/SynVueBreadcrumbItem.vue

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

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

@@ -12,7 +12,7 @@ import {
   EventEmitter,
   AfterContentInit,
 } from '@angular/core';
-import type { SynButton } from '@synergy-design-system/components';
+import type SynButton from '@synergy-design-system/components/components/button/button.component.js';
 import type { SynBlurEvent } from '@synergy-design-system/components';
 import type { SynFocusEvent } from '@synergy-design-system/components';
 import type { SynInvalidEvent } from '@synergy-design-system/components';

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

@@ -35,7 +35,7 @@ import '@synergy-design-system/components/components/button/button.js';
 import type { SynBlurEvent } from '@synergy-design-system/components';
 import type { SynFocusEvent } from '@synergy-design-system/components';
 import type { SynInvalidEvent } from '@synergy-design-system/components';
-import type { SynButton } from '@synergy-design-system/components';
+import type SynButton from '@synergy-design-system/components/components/button/button.component.js';
 
 // DOM Reference to the element
 const nativeElement = ref<SynButton>();

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

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

package/data/layers/full/component/component:syn-button-group/vue/SynVueButtonGroup.vue

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

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

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

package/data/layers/full/component/component:syn-card/vue/SynVueCard.vue

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

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

@@ -0,0 +1,84 @@
+// ---------------------------------------------------------------------
+// 🔒 AUTOGENERATED @synergy-design-system/angular wrappers for @synergy-design-system/components
+// Please do not edit this file directly!
+// It will get recreated when running pnpm build.
+// ---------------------------------------------------------------------
+import {
+  Component,
+  ElementRef,
+  NgZone,
+  Input,
+  Output,
+  EventEmitter,
+  AfterContentInit,
+} from '@angular/core';
+import type SynChart from '@synergy-design-system/components/components/chart/chart.component.js';
+
+import '@synergy-design-system/components/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)
+ *
+ * @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.
+ */
+@Component({
+  selector: 'syn-chart',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class SynChartComponent {
+  public nativeElement: SynChart;
+  private _ngZone: NgZone;
+
+  constructor(e: ElementRef, ngZone: NgZone) {
+    this.nativeElement = e.nativeElement;
+    this._ngZone = ngZone;
+  }
+
+  /**
+* The color palette to apply to chart series.
+
+- `categorical` (default) — 12 distinct colors for comparing unrelated data series
+- `sequential-01` … `sequential-07` — 10-step single-hue ramps:
+  `01`=primary, `02`=accent, `03`=muted, `04`=purple, `05`=teal, `06`=magenta, `07`=neutral
+- `sequential-status-critical`, `sequential-status-error`, `sequential-status-info`,
+  `sequential-status-success`, `sequential-status-warning` — 10-step status ramps
+
+The palette sets the ECharts `color` array.
+* If `config.color` is explicitly provided,
+it takes precedence over the palette.
+ */
+  @Input()
+  set palette(v: SynChart['palette']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.palette = v));
+  }
+  get palette(): SynChart['palette'] {
+    return this.nativeElement.palette;
+  }
+
+  /**
+* The ECharts configuration option object.
+
+This property maps 1:1 to the ECharts `option` parameter passed to `setOption()`.
+Consult the [ECharts option documentation](https://echarts.apache.org/en/option.html)
+and assign the object directly to this property.
+
+> **Note:** Currently only **line charts** (`series[].type: 'line'`) are supported.
+> Support for additional chart types (bar, pie, etc.) will be added in future releases or can be requested.
+
+Assigning a new object completely replaces the previous chart configuration (`notMerge: true`).
+To update only parts of the chart, access the underlying ECharts instance directly and
+call `setOption()` with custom merge options.
+ */
+  @Input()
+  set config(v: SynChart['config']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.config = v));
+  }
+  get config(): SynChart['config'] {
+    return this.nativeElement.config;
+  }
+}