@synergy-design-system/metadata 3.8.0 → 3.10.0

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

@@ -0,0 +1,181 @@
+import {
+  type EChartsType, init, use,
+} from 'echarts/core.js';
+import { CanvasRenderer } from 'echarts/renderers.js';
+import { html } from 'lit';
+import type { CSSResultGroup, PropertyValues } from 'lit';
+import { property } from 'lit/decorators.js';
+import { query } from 'lit/decorators/query.js';
+import { LineChart } from 'echarts/charts.js';
+import {
+  GridComponent, LegendComponent, TitleComponent, TooltipComponent,
+} from 'echarts/components.js';
+import { classMap } from 'lit/directives/class-map.js';
+import SynergyElement from '../../internal/synergy-element.js';
+import componentStyles from '../../styles/component.styles.js';
+import styles from './chart.styles.js';
+import { PALETTE_TOKENS, type SynChartPalette } from './chart.palettes.js';
+import type { ECConfig } from './types.js';
+
+// TODO: Check, should we let the user define the *use* so the bundle size is optimized for their specific use case?
+use([
+  CanvasRenderer,
+  LineChart,
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  GridComponent,
+]);
+
+/**
+ * @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.
+ */
+export default class SynChart extends SynergyElement {
+  static styles: CSSResultGroup = [
+    componentStyles,
+    styles,
+  ];
+
+  @query('.chart')
+  private chartContainer: HTMLDivElement;
+
+  private chartInstance: EChartsType;
+
+  private resizeObserver: ResizeObserver;
+
+  /**
+   * 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.
+   *
+   * @example
+   * ```js
+   * chart.config = {
+   *   xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
+   *   yAxis: { type: 'value' },
+   *   series: [{ type: 'line', data: [150, 230, 224] }],
+   * };
+   * ```
+   */
+  @property({ attribute: false })
+  config: ECConfig = {};
+
+  /**
+   * 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.
+   */
+  @property({ reflect: true })
+  palette: SynChartPalette = 'categorical';
+
+  /** Resolves palette CSS custom properties to computed color values and applies them to the chart. */
+  private applyPalette(): void {
+    if (!this.chartInstance) return;
+    // If the user explicitly set config.color, respect it — palette is a default only
+    if (Array.isArray(this.config.color) && this.config.color.length > 0) return;
+
+    const tokens = PALETTE_TOKENS[this.palette];
+    const computedStyles = getComputedStyle(this);
+    const colors = tokens
+      .map(token => computedStyles.getPropertyValue(token).trim())
+      .filter(Boolean);
+
+    if (colors.length > 0) {
+      this.chartInstance.setOption({ color: colors }, { notMerge: false });
+    }
+  }
+
+  protected updated(changedProperties: PropertyValues<this>): void {
+    if (changedProperties.has('config') && this.chartInstance) {
+      this.chartInstance.setOption(this.config, { notMerge: true });
+    }
+    if ((changedProperties.has('palette') || changedProperties.has('config')) && this.chartInstance) {
+      this.applyPalette();
+    }
+  }
+
+  // Initialize echarts instance and resize observer
+  protected firstUpdated(_changedProperties: PropertyValues): void {
+    if (this.chartContainer !== null && this.chartContainer !== undefined) {
+      this.chartInstance = init(this.chartContainer);
+      // Resize observer
+      this.resizeObserver = new ResizeObserver(() => {
+        this.chartInstance?.resize();
+      });
+      this.resizeObserver.observe(this.chartContainer);
+
+      // Apply config if already set before first render
+      if (Object.keys(this.config).length > 0) {
+        this.chartInstance.setOption(this.config);
+      }
+      // Apply palette after config so colors blend in without replacing the full config
+      this.applyPalette();
+    }
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.resizeObserver?.disconnect();
+    this.chartInstance?.dispose();
+  }
+
+  /**
+   * Returns the underlying ECharts instance, giving direct access to the full
+   * [ECharts API](https://echarts.apache.org/en/api.html#echartsInstance).
+   *
+   * Use this when the `config` property alone is not sufficient — for example to
+   * imperatively call `setOption()` with custom merge flags, listen to ECharts events,
+   * trigger actions, or retrieve chart data.
+   *
+   * Returns `undefined` if called before the component has been connected to the DOM
+   * (i.e. before `firstUpdated` has run).
+   *
+   * @example
+   * ```js
+   * const instance = chart.getInstance();
+   *
+   * // Listen to ECharts events
+   * instance?.on('click', params => console.log(params));
+   *
+   * // Partial update without replacing the full option
+   * instance?.setOption({ series: [{ data: [1, 2, 3] }] }, { replaceMerge: 'series' });
+   * ```
+   */
+  getInstance(): EChartsType | undefined {
+    return this.chartInstance;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+          chart: true,
+        })}>
+      </div>
+    `;
+  }
+}

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

@@ -0,0 +1,110 @@
+/**
+ * The available color palettes for `syn-chart`.
+ * Palette names correspond 1:1 to the Synergy design token groups.
+ *
+ * - `categorical` — 12 distinct colors for comparing unrelated data series
+ * - `sequential-01` … `sequential-07` — 10-step single-hue ramps, ordered from darkest to brightest
+ *   (`01`=primary, `02`=accent, `03`=muted, `04`=purple, `05`=teal, `06`=magenta, `07`=neutral)
+ * - `sequential-status-critical/error/info/success/warning` — 10-step status color ramps, ordered from darkest to brightest
+ */
+export type SynChartPalette =
+  | 'categorical'
+  | 'sequential-01'
+  | 'sequential-02'
+  | 'sequential-03'
+  | 'sequential-04'
+  | 'sequential-05'
+  | 'sequential-06'
+  | 'sequential-07'
+  | 'sequential-status-critical'
+  | 'sequential-status-error'
+  | 'sequential-status-info'
+  | 'sequential-status-success'
+  | 'sequential-status-warning';
+
+/** Maps each palette name to the ordered list of CSS custom property names to resolve. */
+export const PALETTE_TOKENS: Record<SynChartPalette, string[]> = {
+  categorical: [
+    '--syn-categorical-01', '--syn-categorical-02', '--syn-categorical-03',
+    '--syn-categorical-04', '--syn-categorical-05', '--syn-categorical-06',
+    '--syn-categorical-07', '--syn-categorical-08', '--syn-categorical-09',
+    '--syn-categorical-10', '--syn-categorical-11', '--syn-categorical-12',
+  ],
+  'sequential-01': [
+    '--syn-sequential-01-100', '--syn-sequential-01-90', '--syn-sequential-01-80',
+    '--syn-sequential-01-70', '--syn-sequential-01-60', '--syn-sequential-01-50',
+    '--syn-sequential-01-40', '--syn-sequential-01-30', '--syn-sequential-01-20',
+    '--syn-sequential-01-10',
+  ],
+  'sequential-02': [
+    '--syn-sequential-02-100', '--syn-sequential-02-90', '--syn-sequential-02-80',
+    '--syn-sequential-02-70', '--syn-sequential-02-60', '--syn-sequential-02-50',
+    '--syn-sequential-02-40', '--syn-sequential-02-30', '--syn-sequential-02-20',
+    '--syn-sequential-02-10',
+  ],
+  'sequential-03': [
+    '--syn-sequential-03-100', '--syn-sequential-03-90', '--syn-sequential-03-80',
+    '--syn-sequential-03-70', '--syn-sequential-03-60', '--syn-sequential-03-50',
+    '--syn-sequential-03-40', '--syn-sequential-03-30', '--syn-sequential-03-20',
+    '--syn-sequential-03-10',
+  ],
+  'sequential-04': [
+    '--syn-sequential-04-100', '--syn-sequential-04-90', '--syn-sequential-04-80',
+    '--syn-sequential-04-70', '--syn-sequential-04-60', '--syn-sequential-04-50',
+    '--syn-sequential-04-40', '--syn-sequential-04-30', '--syn-sequential-04-20',
+    '--syn-sequential-04-10',
+  ],
+  'sequential-05': [
+    '--syn-sequential-05-100', '--syn-sequential-05-90', '--syn-sequential-05-80',
+    '--syn-sequential-05-70', '--syn-sequential-05-60', '--syn-sequential-05-50',
+    '--syn-sequential-05-40', '--syn-sequential-05-30', '--syn-sequential-05-20',
+    '--syn-sequential-05-10',
+  ],
+  'sequential-06': [
+    '--syn-sequential-06-100', '--syn-sequential-06-90', '--syn-sequential-06-80',
+    '--syn-sequential-06-70', '--syn-sequential-06-60', '--syn-sequential-06-50',
+    '--syn-sequential-06-40', '--syn-sequential-06-30', '--syn-sequential-06-20',
+    '--syn-sequential-06-10',
+  ],
+  'sequential-07': [
+    '--syn-sequential-07-100', '--syn-sequential-07-90', '--syn-sequential-07-80',
+    '--syn-sequential-07-70', '--syn-sequential-07-60', '--syn-sequential-07-50',
+    '--syn-sequential-07-40', '--syn-sequential-07-30', '--syn-sequential-07-20',
+    '--syn-sequential-07-10',
+  ],
+  'sequential-status-critical': [
+    '--syn-sequential-status-critical-100', '--syn-sequential-status-critical-90',
+    '--syn-sequential-status-critical-80', '--syn-sequential-status-critical-70',
+    '--syn-sequential-status-critical-60', '--syn-sequential-status-critical-50',
+    '--syn-sequential-status-critical-40', '--syn-sequential-status-critical-30',
+    '--syn-sequential-status-critical-20', '--syn-sequential-status-critical-10',
+  ],
+  'sequential-status-error': [
+    '--syn-sequential-status-error-100', '--syn-sequential-status-error-90',
+    '--syn-sequential-status-error-80', '--syn-sequential-status-error-70',
+    '--syn-sequential-status-error-60', '--syn-sequential-status-error-50',
+    '--syn-sequential-status-error-40', '--syn-sequential-status-error-30',
+    '--syn-sequential-status-error-20', '--syn-sequential-status-error-10',
+  ],
+  'sequential-status-info': [
+    '--syn-sequential-status-info-100', '--syn-sequential-status-info-90',
+    '--syn-sequential-status-info-80', '--syn-sequential-status-info-70',
+    '--syn-sequential-status-info-60', '--syn-sequential-status-info-50',
+    '--syn-sequential-status-info-40', '--syn-sequential-status-info-30',
+    '--syn-sequential-status-info-20', '--syn-sequential-status-info-10',
+  ],
+  'sequential-status-success': [
+    '--syn-sequential-status-success-100', '--syn-sequential-status-success-90',
+    '--syn-sequential-status-success-80', '--syn-sequential-status-success-70',
+    '--syn-sequential-status-success-60', '--syn-sequential-status-success-50',
+    '--syn-sequential-status-success-40', '--syn-sequential-status-success-30',
+    '--syn-sequential-status-success-20', '--syn-sequential-status-success-10',
+  ],
+  'sequential-status-warning': [
+    '--syn-sequential-status-warning-100', '--syn-sequential-status-warning-90',
+    '--syn-sequential-status-warning-80', '--syn-sequential-status-warning-70',
+    '--syn-sequential-status-warning-60', '--syn-sequential-status-warning-50',
+    '--syn-sequential-status-warning-40', '--syn-sequential-status-warning-30',
+    '--syn-sequential-status-warning-20', '--syn-sequential-status-warning-10',
+  ],
+};

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

@@ -0,0 +1,15 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    aspect-ratio: 16 / 9;
+    display: block;
+    min-height: 180px;
+    width: 100%;
+  }
+
+  .chart {
+    height: 100%;
+    width: 100%;
+  }
+`;

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

@@ -0,0 +1,14 @@
+import SynChart from './chart.component.js';
+
+export * from './chart.component.js';
+export default SynChart;
+
+SynChart.define('syn-chart');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore – false positive: conflict between source and dist declaration
+    'syn-chart': SynChart;
+  }
+}

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

@@ -0,0 +1,5 @@
+import type { LineSeriesOption } from 'echarts/charts.js';
+import type { ComposeOption } from 'echarts/core.js';
+
+// Scoped option type — only includes the components and chart types registered via use()
+export type ECConfig = ComposeOption<LineSeriesOption>;

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

@@ -0,0 +1 @@
+export type SynChartJSXElement = SynCustomElement<SynChart, []>;

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

@@ -0,0 +1,28 @@
+// ---------------------------------------------------------------------
+// 🔒 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components
+// Please do not edit this file directly!
+// It will get recreated when running pnpm build.
+// ---------------------------------------------------------------------
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '@synergy-design-system/components/components/chart/chart.component.js';
+
+const tagName = 'syn-chart';
+Component.define('syn-chart');
+
+/**
+ * @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.
+ */
+export const SynChart = createComponent({
+  displayName: 'SynChart',
+  elementClass: Component,
+  events: {},
+  react: React,
+  tagName,
+});

package/data/layers/full/component/component:syn-chart/vue/SynVueChart.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+// ---------------------------------------------------------------------
+// 🔒 AUTOGENERATED @synergy-design-system/vue wrappers for @synergy-design-system/components
+// Please do not edit this file directly!
+// It will get recreated when running pnpm build.
+// ---------------------------------------------------------------------
+
+/**
+ * @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.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/chart/chart.js';
+
+import type SynChart from '@synergy-design-system/components/components/chart/chart.component.js';
+
+// DOM Reference to the element
+const nativeElement = ref<SynChart>();
+
+defineExpose({
+  nativeElement,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+* 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.
+ */
+  palette?: SynChart['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.
+ */
+  config?: SynChart['config'];
+}>();
+
+// Make sure prop binding only forwards the props that are actually there.
+// This is needed because :param="param" also adds an empty attribute
+// when using web-components, which breaks optional arguments like size in SynInput
+// @see https://github.com/vuejs/core/issues/5190#issuecomment-1003112498
+const visibleProps = computed(() =>
+  Object.fromEntries(
+    Object.entries(props).filter(([, value]) => typeof value !== 'undefined'),
+  ),
+);
+</script>
+
+<template>
+  <syn-chart v-bind="visibleProps" ref="nativeElement"> </syn-chart>
+</template>

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

@@ -12,7 +12,7 @@ import {
   EventEmitter,
   AfterContentInit,
 } from '@angular/core';
-import type { SynCheckbox } from '@synergy-design-system/components';
+import type SynCheckbox from '@synergy-design-system/components/components/checkbox/checkbox.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';

package/data/layers/full/component/component:syn-checkbox/vue/SynVueCheckbox.vue

@@ -39,7 +39,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 { SynCheckbox } from '@synergy-design-system/components';
+import type SynCheckbox from '@synergy-design-system/components/components/checkbox/checkbox.component.js';
 
 // DOM Reference to the element
 const nativeElement = ref<SynCheckbox>();

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

@@ -12,7 +12,7 @@ import {
   EventEmitter,
   AfterContentInit,
 } from '@angular/core';
-import type { SynCombobox } from '@synergy-design-system/components';
+import type SynCombobox from '@synergy-design-system/components/components/combobox/combobox.component.js';
 import type { SynChangeEvent } from '@synergy-design-system/components';
 import type { SynClearEvent } from '@synergy-design-system/components';
 import type { SynInputEvent } from '@synergy-design-system/components';

package/data/layers/full/component/component:syn-combobox/vue/SynVueCombobox.vue

@@ -82,7 +82,7 @@ import type { SynHideEvent } from '@synergy-design-system/components';
 import type { SynAfterHideEvent } from '@synergy-design-system/components';
 import type { SynInvalidEvent } from '@synergy-design-system/components';
 import type { SynErrorEvent } from '@synergy-design-system/components';
-import type { SynCombobox } from '@synergy-design-system/components';
+import type SynCombobox from '@synergy-design-system/components/components/combobox/combobox.component.js';
 
 // DOM Reference to the element
 const nativeElement = ref<SynCombobox>();

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

@@ -12,7 +12,7 @@ import {
   EventEmitter,
   AfterContentInit,
 } from '@angular/core';
-import type { SynDetails } from '@synergy-design-system/components';
+import type SynDetails from '@synergy-design-system/components/components/details/details.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-details/vue/SynVueDetails.vue

@@ -42,7 +42,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 { SynDetails } from '@synergy-design-system/components';
+import type SynDetails from '@synergy-design-system/components/components/details/details.component.js';
 
 // DOM Reference to the element
 const nativeElement = ref<SynDetails>();

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

@@ -12,7 +12,7 @@ import {
   EventEmitter,
   AfterContentInit,
 } from '@angular/core';
-import type { SynDialog } from '@synergy-design-system/components';
+import type SynDialog from '@synergy-design-system/components/components/dialog/dialog.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-dialog/vue/SynVueDialog.vue

@@ -64,7 +64,7 @@ import type { SynHideEvent } from '@synergy-design-system/components';
 import type { SynAfterHideEvent } from '@synergy-design-system/components';
 import type { SynInitialFocusEvent } from '@synergy-design-system/components';
 import type { SynRequestCloseEvent } from '@synergy-design-system/components';
-import type { SynDialog } from '@synergy-design-system/components';
+import type SynDialog from '@synergy-design-system/components/components/dialog/dialog.component.js';
 
 // DOM Reference to the element
 const nativeElement = ref<SynDialog>();

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

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

package/data/layers/full/component/component:syn-divider/vue/SynVueDivider.vue

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

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

@@ -12,7 +12,7 @@ import {
   EventEmitter,
   AfterContentInit,
 } from '@angular/core';
-import type { SynDrawer } from '@synergy-design-system/components';
+import type SynDrawer from '@synergy-design-system/components/components/drawer/drawer.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-drawer/vue/SynVueDrawer.vue

@@ -71,7 +71,7 @@ import type { SynHideEvent } from '@synergy-design-system/components';
 import type { SynAfterHideEvent } from '@synergy-design-system/components';
 import type { SynInitialFocusEvent } from '@synergy-design-system/components';
 import type { SynRequestCloseEvent } from '@synergy-design-system/components';
-import type { SynDrawer } from '@synergy-design-system/components';
+import type SynDrawer from '@synergy-design-system/components/components/drawer/drawer.component.js';
 
 // DOM Reference to the element
 const nativeElement = ref<SynDrawer>();

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

@@ -12,7 +12,7 @@ import {
   EventEmitter,
   AfterContentInit,
 } from '@angular/core';
-import type { SynDropdown } from '@synergy-design-system/components';
+import type SynDropdown from '@synergy-design-system/components/components/dropdown/dropdown.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-dropdown/vue/SynVueDropdown.vue

@@ -36,7 +36,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 { SynDropdown } from '@synergy-design-system/components';
+import type SynDropdown from '@synergy-design-system/components/components/dropdown/dropdown.component.js';
 
 // DOM Reference to the element
 const nativeElement = ref<SynDropdown>();

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

@@ -12,7 +12,7 @@ import {
   EventEmitter,
   AfterContentInit,
 } from '@angular/core';
-import type { SynFile } from '@synergy-design-system/components';
+import type SynFile from '@synergy-design-system/components/components/file/file.component.js';
 import type { SynBlurEvent } from '@synergy-design-system/components';
 import type { SynChangeEvent } from '@synergy-design-system/components';
 import type { SynErrorEvent } from '@synergy-design-system/components';

package/data/layers/full/component/component:syn-file/vue/SynVueFile.vue

@@ -61,7 +61,7 @@ import type { SynChangeEvent } from '@synergy-design-system/components';
 import type { SynErrorEvent } from '@synergy-design-system/components';
 import type { SynFocusEvent } from '@synergy-design-system/components';
 import type { SynInputEvent } from '@synergy-design-system/components';
-import type { SynFile } from '@synergy-design-system/components';
+import type SynFile from '@synergy-design-system/components/components/file/file.component.js';
 
 // DOM Reference to the element
 const nativeElement = ref<SynFile>();

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

@@ -12,7 +12,7 @@ import {
   EventEmitter,
   AfterContentInit,
 } from '@angular/core';
-import type { SynHeader } from '@synergy-design-system/components';
+import type SynHeader from '@synergy-design-system/components/components/header/header.component.js';
 import type { SynBurgerMenuClosedEvent } from '@synergy-design-system/components';
 import type { SynBurgerMenuHiddenEvent } from '@synergy-design-system/components';
 import type { SynBurgerMenuOpenEvent } from '@synergy-design-system/components';

package/data/layers/full/component/component:syn-header/vue/SynVueHeader.vue

@@ -44,7 +44,7 @@ import '@synergy-design-system/components/components/header/header.js';
 import type { SynBurgerMenuClosedEvent } from '@synergy-design-system/components';
 import type { SynBurgerMenuHiddenEvent } from '@synergy-design-system/components';
 import type { SynBurgerMenuOpenEvent } from '@synergy-design-system/components';
-import type { SynHeader } from '@synergy-design-system/components';
+import type SynHeader from '@synergy-design-system/components/components/header/header.component.js';
 
 // DOM Reference to the element
 const nativeElement = ref<SynHeader>();

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

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

package/data/layers/full/component/component:syn-icon/vue/SynVueIcon.vue

@@ -22,7 +22,7 @@ import '@synergy-design-system/components/components/icon/icon.js';
 
 import type { SynLoadEvent } from '@synergy-design-system/components';
 import type { SynErrorEvent } from '@synergy-design-system/components';
-import type { SynIcon } from '@synergy-design-system/components';
+import type SynIcon from '@synergy-design-system/components/components/icon/icon.component.js';
 
 // DOM Reference to the element
 const nativeElement = ref<SynIcon>();