@synergy-design-system/metadata 3.7.0 → 3.9.0

package/data/core/component/component:syn-side-nav.json

@@ -34,7 +34,7 @@
             }
           ],
           "packageName": "@synergy-design-system/react",
-          "since": "1.14.0",
+          "since": "1.15.0",
           "sourcePath": "packages/react/src/types/syn-jsx-elements.ts",
           "status": "stable",
           "subpathExport": "./types/latest",
@@ -55,7 +55,8 @@
       }
     },
     "override": {
-      "figmaComponentId": "41227-327748",
+      "figmaComponentId": "12362-15033",
+      "figmaDocsId": "41227-327748",
       "stories": [
         {
           "description": {
@@ -140,6 +141,57 @@
         "Application Shell"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "Provide clear navigation labels and preserve logical focus order.",
+        "Ensure current location is communicated for active items and sections.",
+        "Keep rail and collapsed states keyboard operable and understandable."
+      ],
+      "component": "syn-side-nav",
+      "related": {
+        "components": [
+          "syn-nav-item",
+          "syn-header"
+        ],
+        "templates": [
+          "AppShell"
+        ]
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Use side navigation for secondary or section level navigation.",
+            "Organize items into clear groups with consistent naming patterns.",
+            "Avoid deeply nested structures that are hard to scan and maintain."
+          ],
+          "id": "structure",
+          "name": "Navigation Structure"
+        },
+        {
+          "content": [
+            "Use sticky mode when navigation should remain visible during page scroll.",
+            "Use fixed mode only when it does not block core page content.",
+            "Use rail mode for compact icon first navigation with strong icon semantics."
+          ],
+          "id": "layout",
+          "name": "Layout Variants"
+        },
+        {
+          "content": [
+            "Use indentation consistently to reflect hierarchy.",
+            "Provide footer actions only for secondary utilities and account controls.",
+            "Ensure collapse and expand behavior is predictable across breakpoints."
+          ],
+          "id": "behavior",
+          "name": "Interaction"
+        }
+      ],
+      "useCases": [
+        "Secondary navigation beneath a primary header.",
+        "Section navigation in management and admin applications.",
+        "Persistent workspace navigation for desktop oriented layouts."
+      ]
+    },
     "sourceModulePath": "components/side-nav/side-nav.js",
     "summary": "The <syn-side-nav /> element contains secondary navigation and fits below the header.\nIt can be used to group multiple navigation items (<syn-nav-item />s) together."
   },
@@ -191,6 +243,12 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-side-nav.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-side-nav.md"
+      }
     ]
   },
   "name": "syn-side-nav",
@@ -213,7 +271,7 @@
       "type": "dependsOn"
     }
   ],
-  "since": "1.14.0",
+  "since": "1.15.0",
   "sources": [
     "packages/angular/components/side-nav/side-nav.component.ts",
     "packages/components/src/components/side-nav/side-nav.component.ts",

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

@@ -17,7 +17,7 @@
           "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-spinner--docs",
           "events": [],
           "packageName": "@synergy-design-system/react",
-          "since": "2.0",
+          "since": "1.22.0",
           "sourcePath": "packages/react/src/types/syn-jsx-elements.ts",
           "status": "stable",
           "subpathExport": "./types/latest",
@@ -38,7 +38,8 @@
       }
     },
     "override": {
-      "figmaComponentId": "41227-223775",
+      "figmaComponentId": "17016-71772",
+      "figmaDocsId": "41227-223775",
       "stories": [
         {
           "description": {
@@ -90,6 +91,51 @@
         "Feedback"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "Assign role=\"status\" or use a live region (e.g., aria-live=\"polite\") to inform screen reader users of ongoing loading.",
+        "A spinner shouldn't itself be focusable or interactive, nor prevent from navigating to other parts of the page while loading continues."
+      ],
+      "component": "syn-spinner",
+      "knownIssues": [
+        {
+          "browser": "Safari",
+          "description": "The spinner component may experience animation issues in Safari, causing it to appear wobbly."
+        }
+      ],
+      "usageGuidelines": [
+        {
+          "content": [
+            "Use for processes that take a short amount of time (typically under 4 seconds).",
+            "Apply within specific sections rather than blocking the entire page, unless absolutely necessary.",
+            "Place in a consistent location relative to the content it is loading."
+          ],
+          "id": "behavior_and_placement",
+          "name": "Behavior and Placement"
+        },
+        {
+          "content": [
+            "Include a label or message to provide context about what is being loaded, especially if the loading time is long."
+          ],
+          "id": "content",
+          "name": "Content"
+        },
+        {
+          "content": [
+            "Maintain consistency in size and style; avoid using spinners of varying sizes on the same page."
+          ],
+          "id": "styling",
+          "name": "Styling"
+        }
+      ],
+      "useCases": [
+        "Indicate that content is being loaded, such as when fetching data from a server or loading a new page.",
+        "Show ongoing background processes, like file uploads or data processing tasks.",
+        "Used within buttons or interactive elements to indicate that an action is being processed.",
+        "Apply to sections of a page that are loading independently, such as widgets or panels.",
+        "Display when a form is being submitted to show that the submission is in progress."
+      ]
+    },
     "sourceModulePath": "components/spinner/spinner.js",
     "summary": "Spinners are used to show the progress of an indeterminate operation."
   },
@@ -145,12 +191,18 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-spinner.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-spinner.md"
+      }
     ]
   },
   "name": "syn-spinner",
   "package": "components",
   "relations": [],
-  "since": "2.0",
+  "since": "1.22.0",
   "sources": [
     "packages/angular/components/spinner/spinner.component.ts",
     "packages/components/src/components/spinner/spinner.component.ts",

package/data/core/component/component:syn-switch.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-259132",
+      "figmaComponentId": "2190-4038",
+      "figmaDocsId": "41310-259132",
       "stories": [
         {
           "description": {
@@ -155,6 +156,47 @@
         "Form"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "Consider alternatives to switches, as many users may find them confusing.",
+        "If the switch triggers dynamic changes (e.g., loading new content), provide a corresponding announcement."
+      ],
+      "component": "syn-switch",
+      "related": {
+        "components": [
+          "syn-checkbox"
+        ],
+        "templates": [
+          "Forms"
+        ]
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Use for actions that take effect immediately without requiring additional confirmation.",
+            "Ensure the visual state accurately reflects its functional state.",
+            "If it's unclear whether the component is showing a state or an action, use syn-checkbox instead."
+          ],
+          "id": "behavior",
+          "name": "Behavior"
+        },
+        {
+          "content": [
+            "Make sure both the label and action are clear by using appropriate text.",
+            "Place label text on top of the control, such as in a header, while action text should be placed to the right, next to the control.",
+            "Use adjectives to describe actions, as they are less ambiguous than verbs.",
+            "Limit use to binary choices, such as \"on/off\" or \"yes/no\"."
+          ],
+          "id": "content",
+          "name": "Content"
+        }
+      ],
+      "useCases": [
+        "Allow users to switch between two states.",
+        "Use to enable or disable settings, such as turning notifications on or off.",
+        "Toggle features or functionalities within an application, applying changes immediately."
+      ]
+    },
     "sourceModulePath": "components/switch/switch.js",
     "summary": "Switches allow the user to toggle an option on or off."
   },
@@ -206,12 +248,18 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-switch.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-switch.md"
+      }
     ]
   },
   "name": "syn-switch",
   "package": "components",
   "relations": [],
-  "since": "2.0",
+  "since": "1.0.0",
   "sources": [
     "packages/angular/components/switch/switch.component.ts",
     "packages/components/src/components/switch/switch.component.ts",

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

@@ -26,7 +26,7 @@
             }
           ],
           "packageName": "@synergy-design-system/react",
-          "since": "2.0",
+          "since": "2.1.0",
           "sourcePath": "packages/react/src/types/syn-jsx-elements.ts",
           "status": "stable",
           "subpathExport": "./types/latest",
@@ -47,7 +47,8 @@
       }
     },
     "override": {
-      "figmaComponentId": "42207-338578",
+      "figmaComponentId": "20730-44793",
+      "figmaDocsId": "42207-338578",
       "stories": [
         {
           "description": {
@@ -143,6 +144,46 @@
         "Navigation"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "Provide a clear label for the tab group (e.g., via aria-label or aria-labelledby).",
+        "The tab group takes a single tabstop, then focus moves to the first interactive element in the tab panel, or the tab panel if there is none. Arrow keys should be used to move between tabs.",
+        "Use only for non-critical information. Hiding content can become a potential barrier, making it more challenging for users to access information.",
+        "For purely decorative images, ALT-tags should be left empty so that screen readers can bypass them and concentrate on conveying meaningful content."
+      ],
+      "component": "syn-tab-group",
+      "related": {
+        "templates": []
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Maintain a consistent tab order across different pages or sections to reduce confusion and enhance user familiarity.",
+            "Limit the number of tabs (typically no more than six) to avoid overwhelming users; for more options, consider using side navigation.",
+            "Do not nest tabs within other tab containers."
+          ],
+          "id": "behavior",
+          "name": "Behavior"
+        },
+        {
+          "content": [
+            "Choose labels that are concise and use no more than two words.",
+            "Ensure the first tab is the most relevant for the user.",
+            "Place related tabs next to each other for logical grouping.",
+            "Avoid overloading each tabs content with too much information; keep it manageable and focused."
+          ],
+          "id": "content",
+          "name": "Content"
+        }
+      ],
+      "useCases": [
+        "Organize content into different sections, allowing users to switch between them without leaving the page.",
+        "Implement in dashboards where users need to access different data views or widgets.",
+        "Group settings or configuration options into categories for easier navigation.",
+        "Display different aspects of a product, such as description, reviews, and specifications.",
+        "Arrange user profile information into sections like personal details, activity, and settings."
+      ]
+    },
     "sourceModulePath": "components/tab-group/tab-group.js",
     "summary": "Tab groups organize content into a container that shows one section at a time."
   },
@@ -198,6 +239,12 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-tab-group.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-tab-group.md"
+      }
     ]
   },
   "name": "syn-tab-group",
@@ -208,7 +255,7 @@
       "type": "dependsOn"
     }
   ],
-  "since": "2.0",
+  "since": "2.1.0",
   "sources": [
     "packages/angular/components/tab-group/tab-group.component.ts",
     "packages/components/src/components/tab-group/tab-group.component.ts",

package/data/core/component/component:syn-tab-panel.json

@@ -17,7 +17,7 @@
           "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-tab-panel--docs",
           "events": [],
           "packageName": "@synergy-design-system/react",
-          "since": "2.0",
+          "since": "2.1.0",
           "sourcePath": "packages/react/src/types/syn-jsx-elements.ts",
           "status": "stable",
           "subpathExport": "./types/latest",
@@ -38,7 +38,8 @@
       }
     },
     "override": {
-      "figmaComponentId": "42207-340626",
+      "figmaComponentId": "20730-44681",
+      "figmaDocsId": "42207-340626",
       "stories": [
         {
           "description": {
@@ -57,6 +58,57 @@
         "Navigation"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "Use syn-tab-panel only inside syn-tab-group and ensure each panel name matches exactly one syn-tab panel reference.",
+        "Ensure panel content starts with clear, descriptive structure (for example headings) so users can quickly understand context after switching tabs.",
+        "Avoid placing essential instructions only in inactive panels when users must complete tasks in sequence.",
+        "When panel content updates dynamically, preserve user context and avoid unexpected focus jumps."
+      ],
+      "component": "syn-tab-panel",
+      "related": {
+        "components": [
+          "syn-tab",
+          "syn-tab-group"
+        ],
+        "templates": []
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Use tab panels for related content sections that belong to the same workflow or information scope.",
+            "Keep one active panel visible at a time and ensure inactive panels are not presented as primary content areas.",
+            "Pair each panel with a unique name and keep naming consistent with corresponding tab panel attributes."
+          ],
+          "id": "structure_and_mapping",
+          "name": "Structure and Mapping"
+        },
+        {
+          "content": [
+            "Keep panel content focused and scannable; split dense content into subsections or supporting components.",
+            "Use consistent spacing and hierarchy across panels so context switches feel predictable.",
+            "Avoid large layout shifts between panels that can disorient users during navigation."
+          ],
+          "id": "content_design",
+          "name": "Content Design"
+        },
+        {
+          "content": [
+            "Use lazy loading or deferred rendering for heavy panel content when performance is a concern.",
+            "Show clear loading or empty states when panel data is not immediately available.",
+            "Do not remove active panel content without immediately providing a meaningful replacement."
+          ],
+          "id": "dynamic_content",
+          "name": "Dynamic Content"
+        }
+      ],
+      "useCases": [
+        "Display section content for settings tabs such as General, Security, and Notifications.",
+        "Show contextual content areas in dashboards without navigating away from the current page.",
+        "Present product details split into overview, specifications, and documentation sections.",
+        "Render user-managed views paired with closable tabs in workspace-like interfaces."
+      ]
+    },
     "sourceModulePath": "components/tab-panel/tab-panel.js",
     "summary": "Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content."
   },
@@ -112,12 +164,18 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-tab-panel.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-tab-panel.md"
+      }
     ]
   },
   "name": "syn-tab-panel",
   "package": "components",
   "relations": [],
-  "since": "2.0",
+  "since": "2.1.0",
   "sources": [
     "packages/angular/components/tab-panel/tab-panel.component.ts",
     "packages/components/src/components/tab-panel/tab-panel.component.ts",

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

@@ -22,7 +22,7 @@
             }
           ],
           "packageName": "@synergy-design-system/react",
-          "since": "2.0",
+          "since": "2.1.0",
           "sourcePath": "packages/react/src/types/syn-jsx-elements.ts",
           "status": "stable",
           "subpathExport": "./types/latest",
@@ -43,7 +43,8 @@
       }
     },
     "override": {
-      "figmaComponentId": "42207-338162",
+      "figmaComponentId": "20730-47184",
+      "figmaDocsId": "42207-338162",
       "stories": [
         {
           "description": {
@@ -62,6 +63,56 @@
         "Navigation"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "Use syn-tab only inside syn-tab-group together with matching syn-tab-panel elements to preserve correct tab and tabpanel semantics.",
+        "Ensure every tab has a concise, unique label so users can identify sections quickly with both visual and assistive technologies.",
+        "Use disabled tabs only when users are informed why content is unavailable, and avoid disabling tabs that are required to complete core tasks.",
+        "When tabs are closable, ensure closing a tab moves focus predictably to the next logical tab and keeps users oriented in the updated set."
+      ],
+      "component": "syn-tab",
+      "related": {
+        "components": [
+          "syn-tab-group",
+          "syn-tab-panel"
+        ]
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Use tabs to switch between related sections within the same context, not for unrelated destinations.",
+            "Keep one tab active at all times and align each tab panel value with a corresponding tab-panel name.",
+            "Prefer short labels (one to three words) and avoid wrapping labels to multiple lines where possible."
+          ],
+          "id": "structure_and_mapping",
+          "name": "Structure and Mapping"
+        },
+        {
+          "content": [
+            "Use default activation for faster navigation when content updates are lightweight.",
+            "Use manual activation when panel content is heavy, expensive to load, or likely to cause disorientation during arrow-key navigation.",
+            "Avoid adding too many tabs in one row; if overflow is common, verify scrolling tabs remain understandable and easy to navigate."
+          ],
+          "id": "interaction_model",
+          "name": "Interaction Model"
+        },
+        {
+          "content": [
+            "Use closable tabs only when users create temporary or user-managed views (for example document tabs).",
+            "When closing tabs, also remove or update the related panel and immediately show a logical fallback tab.",
+            "Do not use closable tabs for essential navigation where accidental removal would block user progress."
+          ],
+          "id": "closable_tabs",
+          "name": "Closable Tabs"
+        }
+      ],
+      "useCases": [
+        "Switch between related settings categories within a single page.",
+        "Organize product detail content such as overview, specifications, and resources.",
+        "Provide document-style workspaces with optional closable tabs for temporary views.",
+        "Separate dashboard subviews without full page navigation."
+      ]
+    },
     "sourceModulePath": "components/tab/tab.js",
     "summary": "Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel)."
   },
@@ -117,6 +168,12 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-tab.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-tab.md"
+      }
     ]
   },
   "name": "syn-tab",
@@ -127,7 +184,7 @@
       "type": "dependsOn"
     }
   ],
-  "since": "2.0",
+  "since": "2.1.0",
   "sources": [
     "packages/angular/components/tab/tab.component.ts",
     "packages/components/src/components/tab/tab.component.ts",

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

@@ -17,6 +17,7 @@
           "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-tag-group--docs",
           "events": [],
           "packageName": "@synergy-design-system/react",
+          "since": "3.7.0",
           "sourcePath": "packages/react/src/types/syn-jsx-elements.ts",
           "status": "stable",
           "subpathExport": "./types/latest",
@@ -37,7 +38,7 @@
       }
     },
     "override": {
-      "figmaComponentId": "45275-186668",
+      "figmaDocsId": "45275-186668",
       "stories": [
         {
           "description": {
@@ -91,6 +92,55 @@
         "Filter"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "Ensure each tag has clear readable text and a meaningful remove action when removable.",
+        "Expose group labeling context when tags represent selected filters or categories."
+      ],
+      "component": "syn-tag-group",
+      "related": {
+        "components": [
+          "syn-tag"
+        ],
+        "templates": [
+          "Tag-Group"
+        ]
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Use tag groups for sets of related tags such as active filters or selected labels.",
+            "Keep tags short and consistent to avoid visual noise.",
+            "Use label alignment and group labels to clarify the meaning of the collection."
+          ],
+          "id": "grouping",
+          "name": "Grouping Strategy"
+        },
+        {
+          "content": [
+            "Use removable tags when users can directly edit a selection.",
+            "Provide clear feedback when a tag is removed from the group.",
+            "Avoid mixing non-removable and removable semantics without clear distinction."
+          ],
+          "id": "interaction",
+          "name": "Interaction"
+        },
+        {
+          "content": [
+            "Use group size variants consistently with nearby controls.",
+            "Wrap tags cleanly and preserve readable spacing in narrow layouts.",
+            "Avoid excessive tag counts without offering collapse or summary behavior."
+          ],
+          "id": "layout",
+          "name": "Sizing and Layout"
+        }
+      ],
+      "useCases": [
+        "Show currently active filters in search and table views.",
+        "Display selected categories or labels in forms.",
+        "Manage multi-select states with removable tag chips."
+      ]
+    },
     "sourceModulePath": "components/tag-group/tag-group.js",
     "summary": "A tag group is used to display multiple tags that belong together, often representing selected filters, categories, or user‑generated labels.\nIt arranges tags in flexible rows and supports different sizes and layouts.\nTags can be removable, icon‑based, or purely textual."
   },
@@ -142,12 +192,18 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-tag-group.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-tag-group.md"
+      }
     ]
   },
   "name": "syn-tag-group",
   "package": "components",
   "relations": [],
-  "since": "unknown",
+  "since": "3.7.0",
   "sources": [
     "packages/angular/components/tag-group/tag-group.component.ts",
     "packages/components/src/components/tag-group/tag-group.component.ts",