@synergy-design-system/metadata 3.16.1 → 3.18.0

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.17.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.17.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.17.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.17.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.17.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.17.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.17.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.17.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-30T12:09:05.533Z",
   "entities": [
     {
       "corePath": "data/core/asset/asset:sick2018-icons.json",
@@ -245,7 +245,7 @@
       "kind": "component",
       "layers": {
         "examples": 1,
-        "full": 8,
+        "full": 7,
         "interface": 2,
         "rules": 1
       },
@@ -838,6 +838,7 @@
       "id": "component:syn-radio-button",
       "kind": "component",
       "layers": {
+        "examples": 1,
         "full": 7,
         "interface": 2,
         "rules": 1

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-checkbox.md

@@ -101,16 +101,30 @@ Use the size attribute to change a checkbox’s size.
 The invalid status is used to warn the user that the Checkbox is invalid. For example, if the check is mandatory and nothing has been checked.
 
 ```html
-<form class="custom-validity">
+<form
+  onsubmit="
+    event.preventDefault();
+    event.stopPropagation();
+  "
+  id="components-syn-checkbox--invalid"
+>
   <div class="custom-validity">
     <syn-checkbox required="">Invalid</syn-checkbox>
     <syn-checkbox required="" indeterminate="">Invalid</syn-checkbox>
     <syn-checkbox required="" checked="">Invalid</syn-checkbox>
   </div>
+  <style>
+    .custom-validity {
+      display: flex;
+      flex-direction: column;
+      gap: var(--syn-spacing-large);
+    }
+  </style>
+
   <syn-button type="submit" variant="filled">Submit</syn-button>
 </form>
 <style>
-  .custom-validity {
+  #components-syn-checkbox--invalid {
     display: flex;
     flex-direction: column;
     gap: var(--syn-spacing-large);

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

@@ -289,7 +289,13 @@ Use the size attribute to change a combobox size.
 The invalid status is used to warn the user that the combobox is invalid. For example, if the entry is mandatory.
 
 ```html
-<form class="custom-validity">
+<form
+  onsubmit="
+    event.preventDefault();
+    event.stopPropagation();
+  "
+  id="components-syn-combobox--invalid"
+>
   <syn-combobox
     required=""
     placeholder="Type something"
@@ -309,13 +315,14 @@ The invalid status is used to warn the user that the combobox is invalid. For ex
     <syn-option value="White">White</syn-option>
     <syn-option value="Yellow">Yellow</syn-option>
   </syn-combobox>
+
   <syn-button type="submit" variant="filled">Submit</syn-button>
 </form>
 <style>
-  .custom-validity {
+  #components-syn-combobox--invalid {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: var(--syn-spacing-large);
   }
   syn-button {
     align-self: flex-start;
@@ -491,24 +498,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;

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

@@ -111,28 +111,34 @@ Use the size attribute to change the component's size.
 The invalid status is used to warn the user that the syn-file is invalid. For example, if the entry of text is mandatory and nothing has been entered or if a text has been entered that does not have the correct format.
 
 ```html
-<form class="custom-validity">
+<form
+  onsubmit="
+    event.preventDefault();
+    event.stopPropagation();
+  "
+  id="components-syn-file--invalid"
+>
   <syn-file
     class="syn-file-invalid"
     droparea=""
     help-text="This is an error text."
     label="This is a label"
   ></syn-file>
+  <script type="module">
+    const files = document.querySelectorAll(".syn-file-invalid");
+    files.forEach((file) => {
+      file.setCustomValidity("This is an error text");
+    });
+  </script>
+
   <syn-button type="submit" variant="filled">Submit</syn-button>
 </form>
-<script type="module">
-  const files = document.querySelectorAll(".syn-file-invalid");
-  files.forEach((file) => {
-    file.setCustomValidity("This is an error text");
-  });
-</script>
 <style>
-  .custom-validity {
+  #components-syn-file--invalid {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: var(--syn-spacing-large);
   }
-
   syn-button {
     align-self: flex-start;
   }

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

@@ -128,20 +128,27 @@ Use the size attribute to change an input's size.
 The invalid status is used to warn the user that the input is invalid. For example, if the entry of text is mandatory and nothing has been entered or if a text has been entered that does not have the correct format.
 
 ```html
-<form class="custom-validity">
+<form
+  onsubmit="
+    event.preventDefault();
+    event.stopPropagation();
+  "
+  id="components-syn-input--invalid"
+>
   <syn-input
     help-text="This input is required."
     label="Label"
     placeholder="Insert text here..."
     required=""
   ></syn-input>
+
   <syn-button type="submit" variant="filled">Submit</syn-button>
 </form>
 <style>
-  .custom-validity {
+  #components-syn-input--invalid {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: var(--syn-spacing-large);
   }
   syn-button {
     align-self: flex-start;