@synergy-design-system/metadata 3.7.0 → 3.9.0

package/data/layers/interface/component/component:syn-accordion.md

@@ -7,7 +7,8 @@ Accordions provide the ability to group a list of `<syn-details>`.
 ## Documentation
 
 - [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-accordion--docs)
-- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41094-279501)
+- [Figma Examples](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41094-279501)
+- [Figma Component](https://www.figma.com/design/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?node-id=20877-88547)
 
 ## Class Information
 
@@ -17,7 +18,7 @@ Accordions provide the ability to group a list of `<syn-details>`.
 ## Usage Information
 
 - **Status:** stable
-- **Since:** 1.23.0
+- **Since:** 2.3.0
 
 ## Available Slots
 

package/data/layers/interface/component/component:syn-alert.json

@@ -88,7 +88,8 @@
       "type": "SynShowEvent"
     }
   ],
-  "figmaComponentId": "41137-630160",
+  "figmaComponentId": "45147-41625",
+  "figmaDocsId": "41137-630160",
   "methods": [
     {
       "description": "",
@@ -164,7 +165,7 @@
       "type": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
     }
   ],
-  "since": "2.0",
+  "since": "1.20.0",
   "slots": [
     {
       "description": "The alert's main content.",

package/data/layers/interface/component/component:syn-alert.md

@@ -7,7 +7,8 @@ Alerts are used to display important messages inline or as toast notifications.
 ## Documentation
 
 - [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-alert--docs)
-- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41137-630160)
+- [Figma Examples](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41137-630160)
+- [Figma Component](https://www.figma.com/design/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?node-id=45147-41625)
 
 ## Class Information
 
@@ -17,7 +18,7 @@ Alerts are used to display important messages inline or as toast notifications.
 ## Usage Information
 
 - **Status:** stable
-- **Since:** 2.0
+- **Since:** 1.20.0
 
 ## Available Slots
 

package/data/layers/interface/component/component:syn-badge.json

@@ -18,7 +18,8 @@
   "dependencies": [],
   "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs",
   "events": [],
-  "figmaComponentId": "41137-656313",
+  "figmaComponentId": "14127-697924",
+  "figmaDocsId": "41137-656313",
   "methods": [],
   "properties": [
     {
@@ -29,7 +30,7 @@
       "type": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
     }
   ],
-  "since": "2.0",
+  "since": "1.14.0",
   "slots": [
     {
       "description": "The badge's content.",

package/data/layers/interface/component/component:syn-badge.md

@@ -7,7 +7,8 @@ Badges are used to draw attention and display statuses or counts.
 ## Documentation
 
 - [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs)
-- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41137-656313)
+- [Figma Examples](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41137-656313)
+- [Figma Component](https://www.figma.com/design/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?node-id=14127-697924)
 
 ## Class Information
 
@@ -17,7 +18,7 @@ Badges are used to draw attention and display statuses or counts.
 ## Usage Information
 
 - **Status:** stable
-- **Since:** 2.0
+- **Since:** 1.14.0
 
 ## Available Slots
 

package/data/layers/interface/component/component:syn-breadcrumb-item.json

@@ -48,7 +48,8 @@
   "dependencies": [],
   "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb-item--docs",
   "events": [],
-  "figmaComponentId": "41127-679600",
+  "figmaComponentId": "18458-27218",
+  "figmaDocsId": "41127-679600",
   "methods": [
     {
       "description": "",
@@ -88,7 +89,7 @@
       "type": "'_blank' | '_parent' | '_self' | '_top' | undefined"
     }
   ],
-  "since": "2.0",
+  "since": "1.26.0",
   "slots": [
     {
       "description": "The breadcrumb item's label.",

package/data/layers/interface/component/component:syn-breadcrumb-item.md

@@ -7,7 +7,8 @@ Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to repres
 ## Documentation
 
 - [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb-item--docs)
-- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41127-679600)
+- [Figma Examples](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41127-679600)
+- [Figma Component](https://www.figma.com/design/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?node-id=18458-27218)
 
 ## Class Information
 
@@ -17,7 +18,7 @@ Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to repres
 ## Usage Information
 
 - **Status:** stable
-- **Since:** 2.0
+- **Since:** 1.26.0
 
 ## Available Slots
 

package/data/layers/interface/component/component:syn-breadcrumb.json

@@ -20,7 +20,8 @@
   ],
   "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb--docs",
   "events": [],
-  "figmaComponentId": "41137-748938",
+  "figmaComponentId": "18458-27241",
+  "figmaDocsId": "41137-748938",
   "methods": [],
   "properties": [
     {
@@ -43,7 +44,7 @@
       "type": "HTMLSlotElement"
     }
   ],
-  "since": "2.0",
+  "since": "1.26.0",
   "slots": [
     {
       "description": "One or more breadcrumb items to display.",

package/data/layers/interface/component/component:syn-breadcrumb.md

@@ -7,7 +7,8 @@ Breadcrumbs provide a group of links so users can easily navigate a website's hi
 ## Documentation
 
 - [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb--docs)
-- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41137-748938)
+- [Figma Examples](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41137-748938)
+- [Figma Component](https://www.figma.com/design/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?node-id=18458-27241)
 
 ## Class Information
 
@@ -17,7 +18,7 @@ Breadcrumbs provide a group of links so users can easily navigate a website's hi
 ## Usage Information
 
 - **Status:** stable
-- **Since:** 2.0
+- **Since:** 1.26.0
 
 ## Available Slots
 

package/data/layers/interface/component/component:syn-button-group.json

@@ -34,7 +34,7 @@
   "dependencies": [],
   "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-button-group--docs",
   "events": [],
-  "figmaComponentId": "45597-333063",
+  "figmaDocsId": "45597-333063",
   "methods": [],
   "properties": [
     {
@@ -72,7 +72,7 @@
       "type": "'filled' | 'outline'"
     }
   ],
-  "since": "2.0",
+  "since": "3.1.0",
   "slots": [
     {
       "description": "One or more `<syn-button>` elements to display in the button group.",

package/data/layers/interface/component/component:syn-button-group.md

@@ -7,7 +7,7 @@ Button groups can be used to group related buttons into sections.
 ## Documentation
 
 - [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-button-group--docs)
-- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=45597-333063)
+- [Figma Examples](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=45597-333063)
 
 ## Class Information
 
@@ -17,7 +17,7 @@ Button groups can be used to group related buttons into sections.
 ## Usage Information
 
 - **Status:** stable
-- **Since:** 2.0
+- **Since:** 3.1.0
 
 ## Available Slots
 

package/data/layers/interface/component/component:syn-button.json

@@ -193,7 +193,8 @@
       "type": "SynInvalidEvent"
     }
   ],
-  "figmaComponentId": "42076-167749",
+  "figmaComponentId": "1080-6566",
+  "figmaDocsId": "42076-167749",
   "methods": [
     {
       "description": "Removes focus from the button.",
@@ -402,7 +403,7 @@
       "type": "'filled' | 'outline' | 'text'"
     }
   ],
-  "since": "2.0",
+  "since": "1.0.0",
   "slots": [
     {
       "description": "The button's label.",

package/data/layers/interface/component/component:syn-button.md

@@ -7,7 +7,8 @@ Buttons represent actions that are available to the user.
 ## Documentation
 
 - [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-button--docs)
-- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=42076-167749)
+- [Figma Examples](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=42076-167749)
+- [Figma Component](https://www.figma.com/design/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?node-id=1080-6566)
 
 ## Class Information
 
@@ -17,7 +18,7 @@ Buttons represent actions that are available to the user.
 ## Usage Information
 
 - **Status:** stable
-- **Since:** 2.0
+- **Since:** 1.0.0
 
 ## Available Slots
 

package/data/layers/interface/component/component:syn-card.json

@@ -42,7 +42,8 @@
   "dependencies": [],
   "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-card--docs",
   "events": [],
-  "figmaComponentId": "42207-351610",
+  "figmaComponentId": "44847-125816",
+  "figmaDocsId": "42207-351610",
   "methods": [],
   "properties": [
     {
@@ -60,7 +61,7 @@
       "type": "boolean"
     }
   ],
-  "since": "2.0",
+  "since": "1.25.0",
   "slots": [
     {
       "description": "The card's main content.",

package/data/layers/interface/component/component:syn-card.md

@@ -7,7 +7,8 @@ Cards can be used to group related subjects in a container.
 ## Documentation
 
 - [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-card--docs)
-- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=42207-351610)
+- [Figma Examples](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=42207-351610)
+- [Figma Component](https://www.figma.com/design/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?node-id=44847-125816)
 
 ## Class Information
 
@@ -17,7 +18,7 @@ Cards can be used to group related subjects in a container.
 ## Usage Information
 
 - **Status:** stable
-- **Since:** 2.0
+- **Since:** 1.25.0
 
 ## Available Slots
 

package/data/layers/interface/component/component:syn-chart.json

@@ -0,0 +1,51 @@
+{
+  "attributes": [
+    {
+      "default": "'categorical'",
+      "description": "The color palette to apply to chart series.\n\n- `categorical` (default) — 12 distinct colors for comparing unrelated data series\n- `sequential-01` … `sequential-07` — 10-step single-hue ramps:\n  `01`=primary, `02`=accent, `03`=muted, `04`=purple, `05`=teal, `06`=magenta, `07`=neutral\n- `sequential-status-critical`, `sequential-status-error`, `sequential-status-info`,\n  `sequential-status-success`, `sequential-status-warning` — 10-step status ramps\n\nThe palette sets the ECharts `color` array. If `config.color` is explicitly provided,\nit takes precedence over the palette.",
+      "fieldName": "palette",
+      "name": "palette",
+      "reflects": true,
+      "type": "SynChartPalette"
+    }
+  ],
+  "cssParts": [
+    {
+      "description": "The component's base wrapper.",
+      "name": "base"
+    }
+  ],
+  "dependencies": [],
+  "documentation": "https://synergy-design-system.github.io/?path=/docs/charting-syn-chart--docs",
+  "events": [],
+  "figmaDocsId": "https://www.figma.com/design/9IpXnDH4GFziUH9sOpnK8V/Chart-Library?node-id=0-1&p=f&t=PkQKC2p7WIr2k0og-0",
+  "methods": [
+    {
+      "description": "Returns the underlying ECharts instance, giving direct access to the full\n[ECharts API](https://echarts.apache.org/en/api.html#echartsInstance).\n\nUse this when the `config` property alone is not sufficient — for example to\nimperatively call `setOption()` with custom merge flags, listen to ECharts events,\ntrigger actions, or retrieve chart data.\n\nReturns `undefined` if called before the component has been connected to the DOM\n(i.e. before `firstUpdated` has run).",
+      "name": "getInstance",
+      "parameters": []
+    }
+  ],
+  "properties": [
+    {
+      "access": "public",
+      "default": "{}",
+      "description": "The ECharts configuration option object.\n\nThis property maps 1:1 to the ECharts `option` parameter passed to `setOption()`.\nConsult the [ECharts option documentation](https://echarts.apache.org/en/option.html)\nand assign the object directly to this property.\n\n> **Note:** Currently only **line charts** (`series[].type: 'line'`) are supported.\n> Support for additional chart types (bar, pie, etc.) will be added in future releases or can be requested.\n\nAssigning a new object completely replaces the previous chart configuration (`notMerge: true`).\nTo update only parts of the chart, access the underlying ECharts instance directly and\ncall `setOption()` with custom merge options.",
+      "name": "config",
+      "type": "ECConfig"
+    },
+    {
+      "access": "public",
+      "default": "'categorical'",
+      "description": "The color palette to apply to chart series.\n\n- `categorical` (default) — 12 distinct colors for comparing unrelated data series\n- `sequential-01` … `sequential-07` — 10-step single-hue ramps:\n  `01`=primary, `02`=accent, `03`=muted, `04`=purple, `05`=teal, `06`=magenta, `07`=neutral\n- `sequential-status-critical`, `sequential-status-error`, `sequential-status-info`,\n  `sequential-status-success`, `sequential-status-warning` — 10-step status ramps\n\nThe palette sets the ECharts `color` array. If `config.color` is explicitly provided,\nit takes precedence over the palette.",
+      "name": "palette",
+      "type": "SynChartPalette"
+    }
+  ],
+  "since": "0.0.0",
+  "slots": [],
+  "sourceModulePath": "components/chart/chart.js",
+  "status": "experimental",
+  "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)",
+  "tagName": "syn-chart"
+}

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

@@ -0,0 +1,61 @@
+# 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
+
+- [Component Documentation](https://synergy-design-system.github.io/?path=/docs/charting-syn-chart--docs)
+- [Figma Examples](https://www.figma.com/design/9IpXnDH4GFziUH9sOpnK8V/Chart-Library?node-id=0-1&p=f&t=PkQKC2p7WIr2k0og-0)
+
+## Class Information
+
+- **Tag Name:** `syn-chart`
+- **Import Example:** `import SynChart from '@synergy-design-system/components/components/chart/chart.js';`
+
+## Usage Information
+
+- **Status:** experimental
+- **Since:** 0.0.0
+
+## Available Properties
+
+### config
+
+attribute: -
+reflects: -
+type: `ECConfig`
+default: `{}`
+
+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.
+
+### palette
+
+attribute: `palette`
+reflects: yes
+type: `SynChartPalette`
+default: `'categorical'`
+
+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.
+
+## Available Methods
+
+### getInstance()
+
+parameters: -
+returns: `void`
+
+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).
+
+## Available CSS Parts
+
+- `base`: The component's base wrapper.

package/data/layers/interface/component/component:syn-checkbox.json

@@ -153,7 +153,8 @@
       "type": "SynInvalidEvent"
     }
   ],
-  "figmaComponentId": "41310-257927",
+  "figmaComponentId": "1847-5746",
+  "figmaDocsId": "41310-257927",
   "methods": [
     {
       "description": "Removes focus from the checkbox.",
@@ -312,7 +313,7 @@
       "type": "string"
     }
   ],
-  "since": "2.0",
+  "since": "1.0.0",
   "slots": [
     {
       "description": "The checkbox's label.",

package/data/layers/interface/component/component:syn-checkbox.md

@@ -7,7 +7,8 @@ Checkboxes allow the user to toggle an option on or off.
 ## Documentation
 
 - [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-checkbox--docs)
-- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41310-257927)
+- [Figma Examples](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41310-257927)
+- [Figma Component](https://www.figma.com/design/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?node-id=1847-5746)
 
 ## Class Information
 
@@ -17,7 +18,7 @@ Checkboxes allow the user to toggle an option on or off.
 ## Usage Information
 
 - **Status:** stable
-- **Since:** 2.0
+- **Since:** 1.0.0
 
 ## Available Slots
 

package/data/layers/interface/component/component:syn-combobox.json

@@ -311,7 +311,8 @@
       "type": "SynShowEvent"
     }
   ],
-  "figmaComponentId": "42207-352063",
+  "figmaComponentId": "26894-38120",
+  "figmaDocsId": "42207-352063",
   "methods": [
     {
       "description": "Removes focus from the control.",
@@ -629,7 +630,7 @@
       "type": "HTMLInputElement"
     }
   ],
-  "since": "unknown",
+  "since": "2.8.0",
   "slots": [
     {
       "description": "The listbox options. Must be `<syn-option>` elements. You can use `<syn-optgroup>`'s to group items visually.",

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

@@ -8,7 +8,8 @@ allowing users to either select from predefined options or enter custom values (
 ## Documentation
 
 - [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-combobox--docs)
-- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=42207-352063)
+- [Figma Examples](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=42207-352063)
+- [Figma Component](https://www.figma.com/design/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?node-id=26894-38120)
 
 ## Class Information
 
@@ -18,7 +19,7 @@ allowing users to either select from predefined options or enter custom values (
 ## Usage Information
 
 - **Status:** stable
-- **Since:** unknown
+- **Since:** 2.8.0
 
 ## Available Slots
 

package/data/layers/interface/component/component:syn-details.json

@@ -92,7 +92,8 @@
       "type": "SynShowEvent"
     }
   ],
-  "figmaComponentId": "41227-232486",
+  "figmaComponentId": "20877-88398",
+  "figmaDocsId": "41227-232486",
   "methods": [
     {
       "description": "",
@@ -176,7 +177,7 @@
       "type": "string"
     }
   ],
-  "since": "2.0",
+  "since": "2.3.0",
   "slots": [
     {
       "description": "The details' main content.",

package/data/layers/interface/component/component:syn-details.md

@@ -7,7 +7,8 @@ Details show a brief summary and expand to show additional content.
 ## Documentation
 
 - [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-details--docs)
-- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41227-232486)
+- [Figma Examples](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41227-232486)
+- [Figma Component](https://www.figma.com/design/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?node-id=20877-88398)
 
 ## Class Information
 
@@ -17,7 +18,7 @@ Details show a brief summary and expand to show additional content.
 ## Usage Information
 
 - **Status:** stable
-- **Since:** 2.0
+- **Since:** 2.3.0
 
 ## Available Slots
 

package/data/layers/interface/component/component:syn-dialog.json

@@ -103,7 +103,8 @@
       "type": "SynShowEvent"
     }
   ],
-  "figmaComponentId": "42207-348565",
+  "figmaComponentId": "17938-28299",
+  "figmaDocsId": "42207-348565",
   "methods": [
     {
       "description": "",
@@ -168,7 +169,7 @@
       "type": "HTMLElement"
     }
   ],
-  "since": "2.0",
+  "since": "1.23.0",
   "slots": [
     {
       "description": "The dialog's main content.",

package/data/layers/interface/component/component:syn-dialog.md

@@ -7,7 +7,8 @@ Dialogs, sometimes called "modals", appear above the page and require the user's
 ## Documentation
 
 - [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-dialog--docs)
-- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=42207-348565)
+- [Figma Examples](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=42207-348565)
+- [Figma Component](https://www.figma.com/design/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?node-id=17938-28299)
 
 ## Class Information
 
@@ -17,7 +18,7 @@ Dialogs, sometimes called "modals", appear above the page and require the user's
 ## Usage Information
 
 - **Status:** stable
-- **Since:** 2.0
+- **Since:** 1.23.0
 
 ## Available Slots
 

package/data/layers/interface/component/component:syn-divider.json

@@ -13,7 +13,8 @@
   "dependencies": [],
   "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-divider--docs",
   "events": [],
-  "figmaComponentId": "41227-216341",
+  "figmaComponentId": "4933-9570",
+  "figmaDocsId": "41227-216341",
   "methods": [
     {
       "description": "",
@@ -30,7 +31,7 @@
       "type": "boolean"
     }
   ],
-  "since": "2.0",
+  "since": "1.4.0",
   "slots": [],
   "sourceModulePath": "components/divider/divider.js",
   "status": "stable",

package/data/layers/interface/component/component:syn-divider.md

@@ -7,7 +7,8 @@ Dividers are used to visually separate or group elements.
 ## Documentation
 
 - [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-divider--docs)
-- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41227-216341)
+- [Figma Examples](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41227-216341)
+- [Figma Component](https://www.figma.com/design/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?node-id=4933-9570)
 
 ## Class Information
 
@@ -17,7 +18,7 @@ Dividers are used to visually separate or group elements.
 ## Usage Information
 
 - **Status:** stable
-- **Since:** 2.0
+- **Since:** 1.4.0
 
 ## Available Properties
 

package/data/layers/interface/component/component:syn-drawer.json

@@ -119,7 +119,8 @@
       "type": "SynShowEvent"
     }
   ],
-  "figmaComponentId": "41163-282330",
+  "figmaComponentId": "9983-7953",
+  "figmaDocsId": "41163-282330",
   "methods": [
     {
       "description": "",
@@ -213,7 +214,7 @@
       "type": "'top' | 'end' | 'bottom' | 'start'"
     }
   ],
-  "since": "2.0",
+  "since": "1.8.0",
   "slots": [
     {
       "description": "The drawer's main content.",

package/data/layers/interface/component/component:syn-drawer.md

@@ -7,7 +7,8 @@ Drawers slide in from a container to expose additional options and information.
 ## Documentation
 
 - [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-drawer--docs)
-- [Figma Design](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41163-282330)
+- [Figma Examples](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41163-282330)
+- [Figma Component](https://www.figma.com/design/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?node-id=9983-7953)
 
 ## Class Information
 
@@ -17,7 +18,7 @@ Drawers slide in from a container to expose additional options and information.
 ## Usage Information
 
 - **Status:** stable
-- **Since:** 2.0
+- **Since:** 1.8.0
 
 ## Available Slots