@synergy-design-system/metadata 3.7.0 → 3.9.0

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

@@ -12,7 +12,7 @@ import {
   EventEmitter,
   AfterContentInit,
 } from '@angular/core';
-import type { SynTagGroup } from '@synergy-design-system/components';
+import type SynTagGroup from '@synergy-design-system/components/components/tag-group/tag-group.component.js';
 
 import '@synergy-design-system/components/components/tag-group/tag-group.js';
 
@@ -23,6 +23,7 @@ import '@synergy-design-system/components/components/tag-group/tag-group.js';
  *
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tag-group--docs
  * @status stable
+ * @since 3.7.0
  *
  * @slot - The tag group's main content. Must be `<syn-tag />` elements.
  * @slot label - The tag group's label. Alternatively, you can use the `label` attribute.

package/data/layers/full/component/component:syn-tag-group/components/tag-group.component.ts

@@ -17,6 +17,7 @@ import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator
  *
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tag-group--docs
  * @status stable
+ * @since 3.7.0
  *
  * @slot - The tag group's main content. Must be `<syn-tag />` elements.
  * @slot label - The tag group's label. Alternatively, you can use the `label` attribute.

package/data/layers/full/component/component:syn-tag-group/react/tag-group.ts

@@ -17,6 +17,7 @@ Component.define('syn-tag-group');
  *
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tag-group--docs
  * @status stable
+ * @since 3.7.0
  *
  * @slot - The tag group's main content. Must be `<syn-tag />` elements.
  * @slot label - The tag group's label. Alternatively, you can use the `label` attribute.

package/data/layers/full/component/component:syn-tag-group/vue/SynVueTagGroup.vue

@@ -12,6 +12,7 @@
  *
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tag-group--docs
  * @status stable
+ * @since 3.7.0
  *
  * @slot - The tag group's main content. Must be `<syn-tag />` elements.
  * @slot label - The tag group's label. Alternatively, you can use the `label` attribute.
@@ -22,7 +23,7 @@
 import { computed, ref } from 'vue';
 import '@synergy-design-system/components/components/tag-group/tag-group.js';
 
-import type { SynTagGroup } from '@synergy-design-system/components';
+import type SynTagGroup from '@synergy-design-system/components/components/tag-group/tag-group.component.js';
 
 // DOM Reference to the element
 const nativeElement = ref<SynTagGroup>();

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

@@ -12,7 +12,7 @@ import {
   EventEmitter,
   AfterContentInit,
 } from '@angular/core';
-import type { SynTextarea } from '@synergy-design-system/components';
+import type SynTextarea from '@synergy-design-system/components/components/textarea/textarea.component.js';
 import type { SynBlurEvent } from '@synergy-design-system/components';
 import type { SynChangeEvent } from '@synergy-design-system/components';
 import type { SynFocusEvent } from '@synergy-design-system/components';
@@ -24,7 +24,7 @@ import '@synergy-design-system/components/components/textarea/textarea.js';
  * @summary Textareas collect data from the user and allow multiple lines of text.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-textarea--docs
  * @status stable
- * @since 2.0
+ * @since 1.0.0
  *
  * @slot label - The textarea's label. Alternatively, you can use the `label` attribute.
  * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.

package/data/layers/full/component/component:syn-textarea/components/textarea.component.ts

@@ -20,7 +20,7 @@ import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator
  * @summary Textareas collect data from the user and allow multiple lines of text.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-textarea--docs
  * @status stable
- * @since 2.0
+ * @since 1.0.0
  *
  * @slot label - The textarea's label. Alternatively, you can use the `label` attribute.
  * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.

package/data/layers/full/component/component:syn-textarea/react/textarea.ts

@@ -21,7 +21,7 @@ Component.define('syn-textarea');
  * @summary Textareas collect data from the user and allow multiple lines of text.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-textarea--docs
  * @status stable
- * @since 2.0
+ * @since 1.0.0
  *
  * @slot label - The textarea's label. Alternatively, you can use the `label` attribute.
  * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.

package/data/layers/full/component/component:syn-textarea/vue/SynVueTextarea.vue

@@ -9,7 +9,7 @@
  * @summary Textareas collect data from the user and allow multiple lines of text.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-textarea--docs
  * @status stable
- * @since 2.0
+ * @since 1.0.0
  *
  * @slot label - The textarea's label. Alternatively, you can use the `label` attribute.
  * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
@@ -35,7 +35,7 @@ import type { SynChangeEvent } from '@synergy-design-system/components';
 import type { SynFocusEvent } from '@synergy-design-system/components';
 import type { SynInputEvent } from '@synergy-design-system/components';
 import type { SynInvalidEvent } from '@synergy-design-system/components';
-import type { SynTextarea } from '@synergy-design-system/components';
+import type SynTextarea from '@synergy-design-system/components/components/textarea/textarea.component.js';
 
 // DOM Reference to the element
 const nativeElement = ref<SynTextarea>();

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

@@ -12,7 +12,7 @@ import {
   EventEmitter,
   AfterContentInit,
 } from '@angular/core';
-import type { SynTooltip } from '@synergy-design-system/components';
+import type SynTooltip from '@synergy-design-system/components/components/tooltip/tooltip.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';
@@ -23,7 +23,7 @@ import '@synergy-design-system/components/components/tooltip/tooltip.js';
  * @summary Tooltips display additional information based on a specific action.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tooltip--docs
  * @status stable
- * @since 2.0
+ * @since 1.21.0
  *
  * @dependency syn-popup
  *

package/data/layers/full/component/component:syn-tooltip/components/tooltip.component.ts

@@ -18,7 +18,7 @@ import type { VirtualElement } from '../popup/popup.component.js';
  * @summary Tooltips display additional information based on a specific action.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tooltip--docs
  * @status stable
- * @since 2.0
+ * @since 1.21.0
  *
  * @dependency syn-popup
  *

package/data/layers/full/component/component:syn-tooltip/react/tooltip.ts

@@ -20,7 +20,7 @@ Component.define('syn-tooltip');
  * @summary Tooltips display additional information based on a specific action.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tooltip--docs
  * @status stable
- * @since 2.0
+ * @since 1.21.0
  *
  * @dependency syn-popup
  *

package/data/layers/full/component/component:syn-tooltip/vue/SynVueTooltip.vue

@@ -9,7 +9,7 @@
  * @summary Tooltips display additional information based on a specific action.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tooltip--docs
  * @status stable
- * @since 2.0
+ * @since 1.21.0
  *
  * @dependency syn-popup
  *
@@ -40,7 +40,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 { SynTooltip } from '@synergy-design-system/components';
+import type SynTooltip from '@synergy-design-system/components/components/tooltip/tooltip.component.js';
 
 // DOM Reference to the element
 const nativeElement = ref<SynTooltip>();

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';
 
@@ -21,6 +21,9 @@ import '@synergy-design-system/components/components/validate/validate.js';
  * It does this by using [the native browser validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
  * and showing the validation message in a consistent, user defined way.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-validate--docs
+ * @status stable
+ * @since 2.12.0
+ *
  * @dependency syn-alert
  * @dependency syn-tooltip
  *

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

@@ -41,6 +41,9 @@ const renderDefaultSlot = () => html`
  * It does this by using [the native browser validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
  * and showing the validation message in a consistent, user defined way.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-validate--docs
+ * @status stable
+ * @since 2.12.0
+ *
  * @dependency syn-alert
  * @dependency syn-tooltip
  *

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

@@ -15,6 +15,9 @@ Component.define('syn-validate');
  * It does this by using [the native browser validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
  * and showing the validation message in a consistent, user defined way.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-validate--docs
+ * @status stable
+ * @since 2.12.0
+ *
  * @dependency syn-alert
  * @dependency syn-tooltip
  *

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

@@ -10,6 +10,9 @@
  * It does this by using [the native browser validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
  * and showing the validation message in a consistent, user defined way.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-validate--docs
+ * @status stable
+ * @since 2.12.0
+ *
  * @dependency syn-alert
  * @dependency syn-tooltip
  *
@@ -33,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,42 @@
 # @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
+
+- [#1276](https://github.com/synergy-design-system/synergy-design-system/pull/1276) [`a6b68f2`](https://github.com/synergy-design-system/synergy-design-system/commit/a6b68f2126ee0c63f2e9f5a91d96e97c2486e3c9) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-05-21
+
+  feat: ✨ component context guidelines ([#1187](https://github.com/synergy-design-system/synergy-design-system/issues/1187))
+  - Correct `@since` flags for all components
+  - Updated component usage rules (beta)
+  - Add missing rules files
+  - Create overviews for all components
+
+### Patch Changes
+
+- Updated dependencies [[`a6b68f2`](https://github.com/synergy-design-system/synergy-design-system/commit/a6b68f2126ee0c63f2e9f5a91d96e97c2486e3c9)]:
+  - @synergy-design-system/components@3.14.0
+  - @synergy-design-system/tokens@3.14.0
+
 ## 3.13.4
 
 ### Patch 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.13.4",
+  "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,40 @@
 # 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
+
+- [#1276](https://github.com/synergy-design-system/synergy-design-system/pull/1276) [`a6b68f2`](https://github.com/synergy-design-system/synergy-design-system/commit/a6b68f2126ee0c63f2e9f5a91d96e97c2486e3c9) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-05-21
+
+  feat: ✨ component context guidelines ([#1187](https://github.com/synergy-design-system/synergy-design-system/issues/1187))
+  - Correct `@since` flags for all components
+  - Updated component usage rules (beta)
+  - Add missing rules files
+  - Create overviews for all components
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @synergy-design-system/tokens@3.14.0
+
 ## 3.13.4
 
 ### Patch Changes
@@ -1584,7 +1619,7 @@
 
 ### Minor Changes
 
-- ✨ provide accessible solution for validation ([#599](https://github.com/synergy-design-system/synergy-design-system/issues/599)) ([f8ef81a](https://github.com/synergy-design-system/synergy-design-system/commit/f8ef81a4a61af27fcb6de2c03ce13ef502fcb732))
+- ✨ provide accessible solution for validation via `<syn-validate>` ([#599](https://github.com/synergy-design-system/synergy-design-system/issues/599)) ([f8ef81a](https://github.com/synergy-design-system/synergy-design-system/commit/f8ef81a4a61af27fcb6de2c03ce13ef502fcb732))
 
 ## 2.11.8
 

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.13.4",
+  "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,42 @@
 # @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
+
+- [#1276](https://github.com/synergy-design-system/synergy-design-system/pull/1276) [`a6b68f2`](https://github.com/synergy-design-system/synergy-design-system/commit/a6b68f2126ee0c63f2e9f5a91d96e97c2486e3c9) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-05-21
+
+  feat: ✨ component context guidelines ([#1187](https://github.com/synergy-design-system/synergy-design-system/issues/1187))
+  - Correct `@since` flags for all components
+  - Updated component usage rules (beta)
+  - Add missing rules files
+  - Create overviews for all components
+
+### Patch Changes
+
+- Updated dependencies [[`a6b68f2`](https://github.com/synergy-design-system/synergy-design-system/commit/a6b68f2126ee0c63f2e9f5a91d96e97c2486e3c9)]:
+  - @synergy-design-system/components@3.14.0
+  - @synergy-design-system/tokens@3.14.0
+
 ## 3.13.4
 
 ### Patch 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.13.4",
+  "version": "3.15.0",
   "devDependencies": {
     "@types/react": "^19.2.14",
     "react": "^19.2.5"