@synergy-design-system/metadata 3.7.0 → 3.9.0

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';
 
@@ -21,7 +21,7 @@ import '@synergy-design-system/components/components/accordion/accordion.js';
  *
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-accordion--docs
  * @status stable
- * @since 1.23.0
+ * @since 2.3.0
  *
  * @slot - The accordion's main content. Must be `<syn-details />` elements.
  *

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

@@ -14,7 +14,7 @@ import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator
  *
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-accordion--docs
  * @status stable
- * @since 1.23.0
+ * @since 2.3.0
  *
  * @slot - The accordion's main content. Must be `<syn-details />` elements.
  *

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

@@ -15,7 +15,7 @@ Component.define('syn-accordion');
  *
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-accordion--docs
  * @status stable
- * @since 1.23.0
+ * @since 2.3.0
  *
  * @slot - The accordion's main content. Must be `<syn-details />` elements.
  *

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

@@ -10,7 +10,7 @@
  *
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-accordion--docs
  * @status stable
- * @since 1.23.0
+ * @since 2.3.0
  *
  * @slot - The accordion's main content. Must be `<syn-details />` elements.
  *
@@ -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';
@@ -23,7 +23,7 @@ import '@synergy-design-system/components/components/alert/alert.js';
  * @summary Alerts are used to display important messages inline or as toast notifications.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-alert--docs
  * @status stable
- * @since 2.0
+ * @since 1.20.0
  *
  * @dependency syn-icon-button
  *

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

@@ -20,7 +20,7 @@ import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator
  * @summary Alerts are used to display important messages inline or as toast notifications.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-alert--docs
  * @status stable
- * @since 2.0
+ * @since 1.20.0
  *
  * @dependency syn-icon-button
  *

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

@@ -20,7 +20,7 @@ Component.define('syn-alert');
  * @summary Alerts are used to display important messages inline or as toast notifications.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-alert--docs
  * @status stable
- * @since 2.0
+ * @since 1.20.0
  *
  * @dependency syn-icon-button
  *

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

@@ -9,7 +9,7 @@
  * @summary Alerts are used to display important messages inline or as toast notifications.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-alert--docs
  * @status stable
- * @since 2.0
+ * @since 1.20.0
  *
  * @dependency syn-icon-button
  *
@@ -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';
 
@@ -20,7 +20,7 @@ import '@synergy-design-system/components/components/badge/badge.js';
  * @summary Badges are used to draw attention and display statuses or counts.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs
  * @status stable
- * @since 2.0
+ * @since 1.14.0
  *
  * @slot - The badge's content.
  *

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

@@ -14,7 +14,7 @@ import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator
  * @summary Badges are used to draw attention and display statuses or counts.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs
  * @status stable
- * @since 2.0
+ * @since 1.14.0
  *
  * @slot - The badge's content.
  *

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

@@ -14,7 +14,7 @@ Component.define('syn-badge');
  * @summary Badges are used to draw attention and display statuses or counts.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs
  * @status stable
- * @since 2.0
+ * @since 1.14.0
  *
  * @slot - The badge's content.
  *

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

@@ -9,7 +9,7 @@
  * @summary Badges are used to draw attention and display statuses or counts.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs
  * @status stable
- * @since 2.0
+ * @since 1.14.0
  *
  * @slot - The badge's content.
  *
@@ -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';
 
@@ -20,7 +20,7 @@ import '@synergy-design-system/components/components/breadcrumb/breadcrumb.js';
  * @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb--docs
  * @status stable
- * @since 2.0
+ * @since 1.26.0
  *
  * @slot - One or more breadcrumb items to display.
  * @slot separator - The separator to use between breadcrumb items. Works best with `<syn-icon>`.

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

@@ -14,7 +14,7 @@ import type SynBreadcrumbItem from '../breadcrumb-item/breadcrumb-item.js';
  * @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb--docs
  * @status stable
- * @since 2.0
+ * @since 1.26.0
  *
  * @slot - One or more breadcrumb items to display.
  * @slot separator - The separator to use between breadcrumb items. Works best with `<syn-icon>`.

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

@@ -14,7 +14,7 @@ Component.define('syn-breadcrumb');
  * @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb--docs
  * @status stable
- * @since 2.0
+ * @since 1.26.0
  *
  * @slot - One or more breadcrumb items to display.
  * @slot separator - The separator to use between breadcrumb items. Works best with `<syn-icon>`.

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

@@ -9,7 +9,7 @@
  * @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb--docs
  * @status stable
- * @since 2.0
+ * @since 1.26.0
  *
  * @slot - One or more breadcrumb items to display.
  * @slot separator - The separator to use between breadcrumb items. Works best with `<syn-icon>`.
@@ -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';
 
@@ -20,7 +20,7 @@ import '@synergy-design-system/components/components/breadcrumb-item/breadcrumb-
  * @summary Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb-item--docs
  * @status stable
- * @since 2.0
+ * @since 1.26.0
  *
  * @slot - The breadcrumb item's label.
  * @slot prefix - An optional prefix, usually an icon or icon button.

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

@@ -15,7 +15,7 @@ import type { CSSResultGroup } from 'lit';
  * @summary Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb-item--docs
  * @status stable
- * @since 2.0
+ * @since 1.26.0
  *
  * @slot - The breadcrumb item's label.
  * @slot prefix - An optional prefix, usually an icon or icon button.

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

@@ -14,7 +14,7 @@ Component.define('syn-breadcrumb-item');
  * @summary Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb-item--docs
  * @status stable
- * @since 2.0
+ * @since 1.26.0
  *
  * @slot - The breadcrumb item's label.
  * @slot prefix - An optional prefix, usually an icon or icon button.

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

@@ -9,7 +9,7 @@
  * @summary Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb-item--docs
  * @status stable
- * @since 2.0
+ * @since 1.26.0
  *
  * @slot - The breadcrumb item's label.
  * @slot prefix - An optional prefix, usually an icon or icon button.
@@ -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';
@@ -22,7 +22,7 @@ import '@synergy-design-system/components/components/button/button.js';
  * @summary Buttons represent actions that are available to the user.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button--docs
  * @status stable
- * @since 2.0
+ * @since 1.0.0
  *
  * @dependency syn-icon
  * @dependency syn-spinner

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

@@ -21,7 +21,7 @@ import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator
  * @summary Buttons represent actions that are available to the user.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button--docs
  * @status stable
- * @since 2.0
+ * @since 1.0.0
  *
  * @dependency syn-icon
  * @dependency syn-spinner

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

@@ -19,7 +19,7 @@ Component.define('syn-button');
  * @summary Buttons represent actions that are available to the user.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button--docs
  * @status stable
- * @since 2.0
+ * @since 1.0.0
  *
  * @dependency syn-icon
  * @dependency syn-spinner

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

@@ -9,7 +9,7 @@
  * @summary Buttons represent actions that are available to the user.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button--docs
  * @status stable
- * @since 2.0
+ * @since 1.0.0
  *
  * @dependency syn-icon
  * @dependency syn-spinner
@@ -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';
 
@@ -20,7 +20,7 @@ import '@synergy-design-system/components/components/button-group/button-group.j
  * @summary Button groups can be used to group related buttons into sections.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button-group--docs
  * @status stable
- * @since 2.0
+ * @since 3.1.0
  *
  * @slot - One or more `<syn-button>` elements to display in the button group.
  *

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

@@ -14,7 +14,7 @@ import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator
  * @summary Button groups can be used to group related buttons into sections.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button-group--docs
  * @status stable
- * @since 2.0
+ * @since 3.1.0
  *
  * @slot - One or more `<syn-button>` elements to display in the button group.
  *

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

@@ -14,7 +14,7 @@ Component.define('syn-button-group');
  * @summary Button groups can be used to group related buttons into sections.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button-group--docs
  * @status stable
- * @since 2.0
+ * @since 3.1.0
  *
  * @slot - One or more `<syn-button>` elements to display in the button group.
  *

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

@@ -9,7 +9,7 @@
  * @summary Button groups can be used to group related buttons into sections.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button-group--docs
  * @status stable
- * @since 2.0
+ * @since 3.1.0
  *
  * @slot - One or more `<syn-button>` elements to display in the button group.
  *
@@ -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';
 
@@ -20,7 +20,7 @@ import '@synergy-design-system/components/components/card/card.js';
  * @summary Cards can be used to group related subjects in a container.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-card--docs
  * @status stable
- * @since 2.0
+ * @since 1.25.0
  *
  * @slot - The card's main content.
  * @slot header - An optional header for the card.

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

@@ -13,7 +13,7 @@ import type { CSSResultGroup } from 'lit';
  * @summary Cards can be used to group related subjects in a container.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-card--docs
  * @status stable
- * @since 2.0
+ * @since 1.25.0
  *
  * @slot - The card's main content.
  * @slot header - An optional header for the card.

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

@@ -14,7 +14,7 @@ Component.define('syn-card');
  * @summary Cards can be used to group related subjects in a container.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-card--docs
  * @status stable
- * @since 2.0
+ * @since 1.25.0
  *
  * @slot - The card's main content.
  * @slot header - An optional header for the card.