@synergy-design-system/metadata 3.16.1 → 3.17.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 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-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",
@@ -158,7 +158,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/setup/setup:angular-components-module.json

@@ -21,7 +21,7 @@
   "name": "Angular Components Module",
   "package": "angular",
   "relations": [],
-  "since": "3.15.7",
+  "since": "3.16.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.16.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.16.0",
     "subpathExports": [
       ".",
       "./components/*",
@@ -39,7 +39,7 @@
   "name": "Angular Framework Package",
   "package": "angular",
   "relations": [],
-  "since": "3.15.7",
+  "since": "3.16.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.16.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.16.0"
   },
   "id": "setup:components-package",
   "kind": "setup",
@@ -40,7 +40,7 @@
   "name": "Components Package",
   "package": "components",
   "relations": [],
-  "since": "3.15.7",
+  "since": "3.16.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.16.0",
     "subpathExports": [
       ".",
       "./components/*",
@@ -42,7 +42,7 @@
   "name": "React Framework Package",
   "package": "react",
   "relations": [],
-  "since": "3.15.7",
+  "since": "3.16.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.16.0"
   },
   "id": "setup:tokens-package",
   "kind": "setup",
@@ -59,7 +59,7 @@
   "name": "Tokens Package",
   "package": "tokens",
   "relations": [],
-  "since": "3.15.7",
+  "since": "3.16.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.16.0"
   },
   "id": "setup:vue-package",
   "kind": "setup",
@@ -33,7 +33,7 @@
   "name": "Vue Framework Package",
   "package": "vue",
   "relations": [],
-  "since": "3.15.7",
+  "since": "3.16.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.16.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.16.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.16.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.16.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.16.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.16.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.16.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.16.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.15.7",
+  "since": "3.16.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.15.7",
+  "since": "3.16.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.15.7",
+  "since": "3.16.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.15.7",
+  "since": "3.16.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.15.7",
+  "since": "3.16.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.15.7",
+  "since": "3.16.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.15.7",
+  "since": "3.16.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.15.7",
+  "since": "3.16.0",
   "sources": [
     "packages/tokens/dist/themes/sick2025_light.css"
   ],

package/data/index.json

@@ -1,5 +1,5 @@
 {
-  "builtAt": "2026-06-24T08:51:18.864Z",
+  "builtAt": "2026-06-24T10:06:47.286Z",
   "entities": [
     {
       "corePath": "data/core/asset/asset:sick2018-icons.json",

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

@@ -13,6 +13,7 @@ The default story demonstrates a basic line chart configuration. The chart is co
       xAxis: {
         data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
         type: "category",
+        name: "Days",
       },
       yAxis: { type: "value" },
     };
@@ -29,12 +30,14 @@ The config property is the main way to configure the chart. It accepts an object
 ```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" },
-  };
+  const charts = document.querySelectorAll("#chart-config");
+  charts.forEach((chart) => {
+    chart.config = {
+      series: [{ data: [150, 230, 224], type: "line" }],
+      xAxis: { data: ["Mon", "Tue", "Wed"], type: "category" },
+      yAxis: { type: "value" },
+    };
+  });
 </script>
 ```
 
@@ -47,51 +50,53 @@ Use the palette attribute to apply a Synergy design token color palette to chart
 ```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",
+  const charts = document.querySelectorAll("#chart-palette");
+  charts.forEach((chart) => {
+    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",
       },
-    ],
-    xAxis: {
-      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
-      type: "category",
-    },
-    yAxis: { type: "value" },
-  };
+      yAxis: { type: "value" },
+    };
+  });
 </script>
 ```
 
@@ -114,20 +119,22 @@ Use getInstance() to access the underlying ECharts instance directly and work wi
   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),
-  );
+  const charts = document.querySelectorAll("#chart-get-instance");
+  charts.forEach((chart) => {
+    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>
 ```
 
@@ -140,52 +147,54 @@ You can use multiple charts in one <syn-chart> instance, each with its own confi
 ```html
 <syn-chart id="chart-multiple-charts" palette="categorical"></syn-chart>
 <script type="module">
-  const chart = document.querySelector("#chart-multiple-charts");
+  const charts = document.querySelectorAll("#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",
+  charts.forEach((chart) => {
+    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",
       },
-    ],
-    xAxis: {
-      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
-      type: "category",
-    },
-    yAxis: { type: "value" },
-  };
+      yAxis: { type: "value" },
+    };
+  });
 </script>
 ```

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

@@ -491,24 +491,6 @@ The filtered options shown in the list can be customized by passing a function t
   // the highlight option renderer utility function can be imported via:
   // import { highlightOptionRenderer } from '@synergy-design-system/components';
 
-  // preview-ignore:start
-  const highlightOptionRenderer = (e, t) => {
-    if (!t) return e;
-    let n = e.cloneNode(!0),
-      r = n.getTextLabel();
-    n.selected = e.selected;
-    let i = r.toLowerCase().indexOf(t.toLowerCase()),
-      a = n.innerHTML.indexOf(r),
-      o = document.createElement(`mark`);
-    ((o.textContent = r.slice(i, i + t.length)),
-      o.classList.add(`syn-highlight-style`));
-    let s = r.replace(new RegExp(t, `i`), o.outerHTML),
-      c = n.innerHTML.slice(0, a),
-      l = n.innerHTML.slice(a + r.length);
-    return ((n.innerHTML = c.concat(s, l)), n);
-  };
-  // preview-ignore:end
-
   const comboboxes = document.querySelectorAll(".highlight-combobox");
   comboboxes.forEach((combobox) => {
     combobox.getOption = highlightOptionRenderer;