@synergy-design-system/metadata 3.7.0 → 3.9.0

package/data/core/component/component:syn-button-group.json

@@ -1,5 +1,8 @@
 {
   "custom": {
+    "clusters": [
+      "components-by-tag/form"
+    ],
     "frameworks": {
       "angular": {
         "componentName": "SynButtonGroupComponent",
@@ -14,7 +17,7 @@
           "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-button-group--docs",
           "events": [],
           "packageName": "@synergy-design-system/react",
-          "since": "2.0",
+          "since": "3.1.0",
           "sourcePath": "packages/react/src/types/syn-jsx-elements.ts",
           "status": "stable",
           "subpathExport": "./types/latest",
@@ -35,7 +38,7 @@
       }
     },
     "override": {
-      "figmaComponentId": "45597-333063",
+      "figmaDocsId": "45597-333063",
       "stories": [
         {
           "description": {
@@ -118,6 +121,70 @@
       "storySourcePath": "components.button-group",
       "storyTags": []
     },
+    "rules": {
+      "accessibility": [
+        "Always provide a label property for accessibility and screen readers.",
+        "Label should describe the purpose of the button group (e.g., \"Text formatting\", \"Page navigation\").",
+        "Use clear, descriptive labels that help users understand the grouped buttons' relationship.",
+        "Labels are not displayed visually but are announced by assistive technologies."
+      ],
+      "component": "syn-button-group",
+      "related": {
+        "components": [
+          "syn-button"
+        ]
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Use outline variant (default) for secondary or neutral button groups.",
+            "Use filled variant for primary actions or emphasized button groups.",
+            "Keep variant consistent within a single button group for visual cohesion.",
+            "Choose variant based on the importance and prominence needed in the layout."
+          ],
+          "id": "variants",
+          "name": "Variants"
+        },
+        {
+          "content": [
+            "Combine with syn-icon for icon-only toolbar-style button groups.",
+            "Wrap buttons in syn-tooltip for additional context without cluttering the UI.",
+            "Use with syn-dropdown for split-button or menu patterns within groups.",
+            "Place all related interactive elements inside the button group slot."
+          ],
+          "id": "composition",
+          "name": "Composition & Related Elements"
+        },
+        {
+          "content": [
+            "Ensure adequate spacing between button groups and other UI elements.",
+            "Keep the number of buttons in a group manageable (typically 2-5 buttons)."
+          ],
+          "id": "consistency",
+          "name": "Visual Consistency"
+        },
+        {
+          "content": [
+            "Each button in the group retains its individual click handlers and states.",
+            "Button states (focus, hover, active) are automatically managed by the component.",
+            "The component handles size and variant propagation to all child buttons."
+          ],
+          "id": "behavior",
+          "name": "Component Behavior"
+        }
+      ],
+      "useCases": [
+        "Group related buttons that serve a common purpose or function together.",
+        "Use for actions that are logically connected (e.g., text formatting: bold, italic, underline).",
+        "Group buttons that control related settings or options within the same UI context.",
+        "Avoid grouping buttons that are unrelated or have conflicting purposes.",
+        "Use for toolbars with icon buttons and tooltip hints.",
+        "Use for segmented controls with radio buttons in a group.",
+        "Use for text formatting controls (bold, italic, underline, etc.).",
+        "Use for pagination or navigation controls with multiple related actions.",
+        "Use for filter or view controls with related options."
+      ]
+    },
     "sourceModulePath": "components/button-group/button-group.js",
     "summary": "Button groups can be used to group related buttons into sections."
   },
@@ -173,12 +240,18 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-button-group.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-button-group.md"
+      }
     ]
   },
   "name": "syn-button-group",
   "package": "components",
   "relations": [],
-  "since": "2.0",
+  "since": "3.1.0",
   "sources": [
     "packages/angular/components/button-group/button-group.component.ts",
     "packages/components/src/components/button-group/button-group.component.ts",

package/data/core/component/component:syn-button.json

@@ -31,7 +31,7 @@
             }
           ],
           "packageName": "@synergy-design-system/react",
-          "since": "2.0",
+          "since": "1.0.0",
           "sourcePath": "packages/react/src/types/syn-jsx-elements.ts",
           "status": "stable",
           "subpathExport": "./types/latest",
@@ -52,7 +52,8 @@
       }
     },
     "override": {
-      "figmaComponentId": "42076-167749",
+      "figmaComponentId": "1080-6566",
+      "figmaDocsId": "42076-167749",
       "stories": [
         {
           "description": {
@@ -182,6 +183,72 @@
         "Navigation"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "Ensure that button text is unique and contextual. Screen readers will read it aloud, helping users understand the action associated with the button.",
+        "Keep button text short. Longer copy is harder to scan and increases cognitive load. Remember that translations may double the length of the text.",
+        "Be aware that button's height may change based on the user's preferred font size set system-wide.",
+        "For icon-only: Include an ARIA label describing its function (e.g., \"Expand section\") to ensure the button is accessible to screen readers.",
+        "Prefer keeping the button enabled by default by relying on default values or by validating on submit."
+      ],
+      "component": "syn-button",
+      "related": {
+        "templates": [
+          "Forms"
+        ]
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Write simple, self-explanatory labels that include both a verb (action) and a noun.",
+            "Use text-only labels whenever possible.",
+            "Avoid generic labels like \"OK\" or \"Download\". Use \"Confirm selection\" or \"Download Report\" instead.",
+            "Limit action labels to 1 to 3 words or 15 to 20 characters."
+          ],
+          "id": "action_labels",
+          "name": "Action Labels"
+        },
+        {
+          "content": [
+            "Select the appropriate variant for each action based on context and importance.",
+            "Avoid displaying more than one Call To Action (CTA) at a time on the screen, especially in the same context (e.g., teaser)."
+          ],
+          "id": "action_priority",
+          "name": "Action Priority"
+        },
+        {
+          "content": [
+            "Use to trigger an action or place a link inside it to navigate to other content."
+          ],
+          "id": "function",
+          "name": "Function"
+        },
+        {
+          "content": [
+            "Add icons to labels only when they clearly support the associated action (e.g., print, email, share), and reserve icon-only buttons for exceptions.",
+            "Avoid displaying both left and right icons simultaneously.",
+            "To prevent overcrowding, do not use icons on buttons with extensive copy that spans multiple lines."
+          ],
+          "id": "icons",
+          "name": "Icons"
+        },
+        {
+          "content": [
+            "Maintain consistent placement of interactive elements throughout the user interface.",
+            "Position the primary action at the top (in vertical layout) or on the right (in horizontal layout) when paired with a secondary option.",
+            "Avoid placing two primary actions next to each other; opt for a secondary action instead.",
+            "Expand to full width on small devices if applicable."
+          ],
+          "id": "placement_and_responsiveness",
+          "name": "Placement and Responsiveness"
+        }
+      ],
+      "useCases": [
+        "Highlight key actions, like \"Request information\" or \"Next step\".",
+        "Provide supporting actions, like \"Learn more\", \"Explore topic\", or \"Cancel\".",
+        "Use for functional actions after user input, such as submitting a form or searching for content."
+      ]
+    },
     "sourceModulePath": "components/button/button.js",
     "summary": "Buttons represent actions that are available to the user."
   },
@@ -237,6 +304,12 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-button.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-button.md"
+      }
     ]
   },
   "name": "syn-button",
@@ -251,7 +324,7 @@
       "type": "dependsOn"
     }
   ],
-  "since": "2.0",
+  "since": "1.0.0",
   "sources": [
     "packages/angular/components/button/button.component.ts",
     "packages/components/src/components/button/button.component.ts",

package/data/core/component/component:syn-card.json

@@ -17,7 +17,7 @@
           "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-card--docs",
           "events": [],
           "packageName": "@synergy-design-system/react",
-          "since": "2.0",
+          "since": "1.25.0",
           "sourcePath": "packages/react/src/types/syn-jsx-elements.ts",
           "status": "stable",
           "subpathExport": "./types/latest",
@@ -38,7 +38,8 @@
       }
     },
     "override": {
-      "figmaComponentId": "42207-351610",
+      "figmaComponentId": "44847-125816",
+      "figmaDocsId": "42207-351610",
       "stories": [
         {
           "description": {
@@ -123,6 +124,52 @@
         "Structure"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "Ensure card content has a logical heading and text order so screen readers can parse it correctly.",
+        "Do not use cards as the only way to access critical information or actions.",
+        "Keep interactive elements inside cards keyboard reachable with clear focus indicators."
+      ],
+      "component": "syn-card",
+      "related": {
+        "components": [],
+        "templates": []
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Group related information into one card and keep each card focused on a single topic.",
+            "Use clear headings and concise body text to improve scanability.",
+            "Avoid overloading a card with too many actions or dense information."
+          ],
+          "id": "content",
+          "name": "Content"
+        },
+        {
+          "content": [
+            "Use spacing and visual hierarchy to separate header, body, and footer regions.",
+            "Align card width and density with surrounding content so cards feel consistent.",
+            "Use shadows or sharp style consistently across a view."
+          ],
+          "id": "layout",
+          "name": "Layout and Hierarchy"
+        },
+        {
+          "content": [
+            "Place primary actions in a predictable location such as the card footer.",
+            "Use action labels that clearly describe the result.",
+            "Limit actions to the most relevant options for the card context."
+          ],
+          "id": "actions",
+          "name": "Actions"
+        }
+      ],
+      "useCases": [
+        "Display grouped information such as KPIs, summaries, or previews.",
+        "Provide a reusable container for dashboard elements.",
+        "Present actionable items with a compact overview and clear next steps."
+      ]
+    },
     "sourceModulePath": "components/card/card.js",
     "summary": "Cards can be used to group related subjects in a container."
   },
@@ -178,12 +225,18 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-card.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-card.md"
+      }
     ]
   },
   "name": "syn-card",
   "package": "components",
   "relations": [],
-  "since": "2.0",
+  "since": "1.25.0",
   "sources": [
     "packages/angular/components/card/card.component.ts",
     "packages/components/src/components/card/card.component.ts",

package/data/core/component/component:syn-chart.json

@@ -0,0 +1,181 @@
+{
+  "custom": {
+    "clusters": [
+      "components-by-tag/data-visualization"
+    ],
+    "frameworks": {
+      "angular": {
+        "componentName": "SynChartComponent",
+        "exportPath": "packages/angular/index.ts",
+        "packageName": "@synergy-design-system/angular",
+        "selector": "syn-chart",
+        "sourcePath": "packages/angular/components/chart/chart.component.ts"
+      },
+      "react": {
+        "jsx": {
+          "componentName": "SynChart",
+          "documentation": "https://synergy-design-system.github.io/?path=/docs/charting-syn-chart--docs",
+          "events": [],
+          "packageName": "@synergy-design-system/react",
+          "since": "0.0.0",
+          "sourcePath": "packages/react/src/types/syn-jsx-elements.ts",
+          "status": "experimental",
+          "subpathExport": "./types/latest",
+          "typeName": "SynChartJSXElement"
+        },
+        "wrapper": {
+          "componentName": "SynChart",
+          "exportPath": "packages/react/src/index.ts",
+          "packageName": "@synergy-design-system/react",
+          "sourcePath": "packages/react/src/components/chart.ts"
+        }
+      },
+      "vue": {
+        "componentName": "SynVueChart",
+        "exportPath": "packages/vue/src/index.ts",
+        "packageName": "@synergy-design-system/vue",
+        "sourcePath": "packages/vue/src/components/SynVueChart.vue"
+      }
+    },
+    "override": {
+      "figmaDocsId": "https://www.figma.com/design/9IpXnDH4GFziUH9sOpnK8V/Chart-Library?node-id=0-1&p=f&t=PkQKC2p7WIr2k0og-0",
+      "storySourcePath": "components.chart",
+      "storyTags": [
+        "Data Visualization"
+      ]
+    },
+    "rules": {
+      "accessibility": [
+        "Do not rely on color alone to distinguish data series; use labels, markers, or patterns where helpful.",
+        "Provide a text alternative or data table for users who cannot interpret visualizations reliably.",
+        "Ensure chart context is available in surrounding text, including what is shown and why it matters."
+      ],
+      "component": "syn-chart",
+      "usageGuidelines": [
+        {
+          "content": [
+            "Use charts when visual pattern recognition (trends, peaks, outliers) is more helpful than raw tables.",
+            "Keep the chart goal specific and clear (for example trend over time, comparison, distribution).",
+            "Avoid using charts when exact value lookup is the primary task; provide a table or value list as a complement."
+          ],
+          "id": "data-and-purpose",
+          "name": "Data and Purpose"
+        },
+        {
+          "content": [
+            "Use clear axis labels, units, and legends so users can understand the data context immediately.",
+            "Limit the number of simultaneously visible series to reduce visual noise.",
+            "Choose palettes that maintain sufficient contrast between series and background.",
+            "Avoid excessive decoration and effects that do not add analytical value."
+          ],
+          "id": "visual-clarity",
+          "name": "Visual Clarity"
+        },
+        {
+          "content": [
+            "Ensure labels, tooltips, and legends remain readable at small viewport sizes.",
+            "Prevent overlapping labels and crowded markers by simplifying or reducing displayed data where needed.",
+            "Keep chart dimensions appropriate for the amount and complexity of the data shown."
+          ],
+          "id": "responsiveness-and-density",
+          "name": "Responsiveness and Density"
+        }
+      ],
+      "useCases": [
+        "Display time-based trends such as sensor values, throughput, or production metrics.",
+        "Compare multiple data series in dashboards to identify differences and anomalies.",
+        "Present historical data to support analysis, reporting, and decision-making.",
+        "Visualize key performance indicators where users need a fast visual overview."
+      ]
+    },
+    "sourceModulePath": "components/chart/chart.js",
+    "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)"
+  },
+  "id": "component:syn-chart",
+  "kind": "component",
+  "layers": {
+    "examples": [
+      {
+        "layer": "examples",
+        "path": "layers/examples/component/component:syn-chart.md"
+      }
+    ],
+    "full": [
+      {
+        "layer": "full",
+        "path": "layers/full/component/component:syn-chart/angular/chart.component.ts"
+      },
+      {
+        "layer": "full",
+        "path": "layers/full/component/component:syn-chart/components/chart.component.ts"
+      },
+      {
+        "layer": "full",
+        "path": "layers/full/component/component:syn-chart/components/chart.palettes.ts"
+      },
+      {
+        "layer": "full",
+        "path": "layers/full/component/component:syn-chart/components/chart.styles.ts"
+      },
+      {
+        "layer": "full",
+        "path": "layers/full/component/component:syn-chart/components/chart.ts"
+      },
+      {
+        "layer": "full",
+        "path": "layers/full/component/component:syn-chart/components/types.ts"
+      },
+      {
+        "layer": "full",
+        "path": "layers/full/component/component:syn-chart/react/chart.ts"
+      },
+      {
+        "layer": "full",
+        "path": "layers/full/component/component:syn-chart/vue/SynVueChart.vue"
+      },
+      {
+        "layer": "full",
+        "path": "layers/full/component/component:syn-chart/react/SynChartJSXElement.ts"
+      }
+    ],
+    "interface": [
+      {
+        "layer": "interface",
+        "path": "layers/interface/component/component:syn-chart.json"
+      },
+      {
+        "layer": "interface",
+        "path": "layers/interface/component/component:syn-chart.md"
+      }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-chart.md"
+      }
+    ]
+  },
+  "name": "syn-chart",
+  "package": "components",
+  "relations": [],
+  "since": "0.0.0",
+  "sources": [
+    "packages/angular/components/chart/chart.component.ts",
+    "packages/components/src/components/chart/chart.component.ts",
+    "packages/components/src/components/chart/chart.palettes.ts",
+    "packages/components/src/components/chart/chart.styles.ts",
+    "packages/components/src/components/chart/chart.ts",
+    "packages/components/src/components/chart/types.ts",
+    "packages/react/src/components/chart.ts",
+    "packages/vue/src/components/SynVueChart.vue"
+  ],
+  "status": "experimental",
+  "tags": [
+    "angular",
+    "chart",
+    "component",
+    "react",
+    "syn-chart",
+    "vue"
+  ]
+}

package/data/core/component/component:syn-checkbox.json

@@ -38,7 +38,7 @@
             }
           ],
           "packageName": "@synergy-design-system/react",
-          "since": "2.0",
+          "since": "1.0.0",
           "sourcePath": "packages/react/src/types/syn-jsx-elements.ts",
           "status": "stable",
           "subpathExport": "./types/latest",
@@ -59,7 +59,8 @@
       }
     },
     "override": {
-      "figmaComponentId": "41310-257927",
+      "figmaComponentId": "1847-5746",
+      "figmaDocsId": "41310-257927",
       "stories": [
         {
           "description": {
@@ -177,6 +178,44 @@
         "Form"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "Checkboxes should always look like checkboxes to meet user's expectations.",
+        "Nesting other interactive elements like links inside labels should be avoided.",
+        "An error-text with a warning icon should be placed underneath an invalid checkbox. Error messages should always provide hints for solutions."
+      ],
+      "component": "syn-checkbox",
+      "related": {
+        "components": [],
+        "templates": [
+          "Forms"
+        ]
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Provide a clear, descriptive label for each selection to avoid confusion.",
+            "Frame labels positively, such as \"Enable notifications\" instead of \"Disable notifications.\""
+          ],
+          "id": "content",
+          "name": "Content"
+        },
+        {
+          "content": [
+            "Ensure each selection operates independently unless used for bulk actions.",
+            "List selections in a logical order, such as alphabetical or numerical.",
+            "Refrain from using a single checkbox when the action should take effect immediately - use syn-switch instead."
+          ],
+          "id": "interaction_and_usage",
+          "name": "Interaction and Usage"
+        }
+      ],
+      "useCases": [
+        "Used for selections that don't immediately trigger an action.",
+        "Selecting an option like \"Agree to Terms and Conditions\" before submitting a registration form.",
+        "Opt-in/Opt-out of notifications or subscriptions."
+      ]
+    },
     "sourceModulePath": "components/checkbox/checkbox.js",
     "summary": "Checkboxes allow the user to toggle an option on or off."
   },
@@ -228,6 +267,12 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-checkbox.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-checkbox.md"
+      }
     ]
   },
   "name": "syn-checkbox",
@@ -238,7 +283,7 @@
       "type": "dependsOn"
     }
   ],
-  "since": "2.0",
+  "since": "1.0.0",
   "sources": [
     "packages/angular/components/checkbox/checkbox.component.ts",
     "packages/components/src/components/checkbox/checkbox.component.ts",

package/data/core/component/component:syn-combobox.json

@@ -62,6 +62,7 @@
             }
           ],
           "packageName": "@synergy-design-system/react",
+          "since": "2.8.0",
           "sourcePath": "packages/react/src/types/syn-jsx-elements.ts",
           "status": "stable",
           "subpathExport": "./types/latest",
@@ -82,7 +83,8 @@
       }
     },
     "override": {
-      "figmaComponentId": "42207-352063",
+      "figmaComponentId": "26894-38120",
+      "figmaDocsId": "42207-352063",
       "stories": [
         {
           "description": {
@@ -321,6 +323,49 @@
         "Form"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "A visible label may be omitted for search input fields within a combobox if an associated button-complete with a clear search icon and an appropriate accessible name (e.g., aria-label=\"Search\")-is provided.",
+        "Be aware that group labels will be neglected by most assistive devices."
+      ],
+      "component": "syn-combobox",
+      "related": {
+        "components": [
+          "syn-option",
+          "syn-optgroup"
+        ],
+        "templates": [
+          "Forms"
+        ]
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Keep option labels concise so that suggestions are easy to scan and select.",
+            "Provide a clear, descriptive placeholder (e.g., \"Search or select an option...\") to help users understand they can type and choose from suggestions.",
+            "Avoid repeating the same initial word in multiple suggestions to reduce scanning difficulty."
+          ],
+          "id": "content_and_labels",
+          "name": "Content and Labels"
+        },
+        {
+          "content": [
+            "Filter available options in real time as the user types; highlight or bold matching text to indicate relevance.",
+            "Consider limiting the maximum number of displayed suggestions to avoid overwhelming users. We recommend displaying 6-8 (with scrolling for additional results)."
+          ],
+          "id": "searching_behavior",
+          "name": "Searching Behavior"
+        }
+      ],
+      "useCases": [
+        "Allow users to select one or more options from a potentially large list by typing a search string and filtering suggestions.",
+        "Provide an autocomplete feature in forms where specific or complex entries benefit from quick lookup.",
+        "Implement in search fields or filter panels when users may not recall the exact option name but can approximate it.",
+        "Long or descriptive labels, helper text, or units are needed.",
+        "Forms with many fields that users must scan quickly.",
+        "Compact layouts and simple fields."
+      ]
+    },
     "sourceModulePath": "components/combobox/combobox.js",
     "summary": "A combobox component that combines the functionality of a text input with a dropdown listbox,\nallowing users to either select from predefined options or enter custom values (when not restricted)."
   },
@@ -380,6 +425,12 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-combobox.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-combobox.md"
+      }
     ]
   },
   "name": "syn-combobox",
@@ -398,7 +449,7 @@
       "type": "dependsOn"
     }
   ],
-  "since": "unknown",
+  "since": "2.8.0",
   "sources": [
     "packages/angular/components/combobox/combobox.component.ts",
     "packages/components/src/components/combobox/combobox.component.ts",