@synergy-design-system/metadata 3.7.0 → 3.9.0

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

@@ -34,7 +34,7 @@
             }
           ],
           "packageName": "@synergy-design-system/react",
-          "since": "2.0",
+          "since": "2.3.0",
           "sourcePath": "packages/react/src/types/syn-jsx-elements.ts",
           "status": "stable",
           "subpathExport": "./types/latest",
@@ -55,7 +55,8 @@
       }
     },
     "override": {
-      "figmaComponentId": "41227-232486",
+      "figmaComponentId": "20877-88398",
+      "figmaDocsId": "41227-232486",
       "stories": [
         {
           "description": {
@@ -140,6 +141,49 @@
         "Structure"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "Use only for non-critical information. Hiding content can become a potential barrier, making content more challenging to discover.",
+        "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-details",
+      "related": {
+        "components": [
+          "syn-accordion"
+        ]
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Use the \"summary\" slot to add text to the header.",
+            "Use the \"default\" slot to add content."
+          ],
+          "id": "slots",
+          "name": "Slots"
+        },
+        {
+          "content": [
+            "Make sure the header summary clearly describes the content inside.",
+            "Keep header summaries concise to prevent them from wrapping onto multiple lines."
+          ],
+          "id": "header_summary",
+          "name": "Header Summary"
+        },
+        {
+          "content": [
+            "Ensure the content is focused and necessary. If the information can be splitted into different meaningful units, consider using syn-accordion.",
+            "Avoid using collapsible sections for information that must always be visible."
+          ],
+          "id": "content",
+          "name": "Content"
+        }
+      ],
+      "useCases": [
+        "Revealing additional content, such as a detailed description, specifications, or additional options without overwhelming the user with too much content at once.",
+        "Interactive elements like a single FAQ item, where the user can expand to see the answer.",
+        "Useful in forms to hide optional sections that the user can expand if needed, keeping the form clean and concise."
+      ]
+    },
     "sourceModulePath": "components/details/details.js",
     "summary": "Details show a brief summary and expand to show additional content."
   },
@@ -191,6 +235,12 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-details.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-details.md"
+      }
     ]
   },
   "name": "syn-details",
@@ -201,7 +251,7 @@
       "type": "dependsOn"
     }
   ],
-  "since": "2.0",
+  "since": "2.3.0",
   "sources": [
     "packages/angular/components/details/details.component.ts",
     "packages/components/src/components/details/details.component.ts",

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

@@ -42,7 +42,7 @@
             }
           ],
           "packageName": "@synergy-design-system/react",
-          "since": "2.0",
+          "since": "1.23.0",
           "sourcePath": "packages/react/src/types/syn-jsx-elements.ts",
           "status": "stable",
           "subpathExport": "./types/latest",
@@ -63,7 +63,8 @@
       }
     },
     "override": {
-      "figmaComponentId": "42207-348565",
+      "figmaComponentId": "17938-28299",
+      "figmaDocsId": "42207-348565",
       "stories": [
         {
           "description": {
@@ -137,6 +138,66 @@
         "Structure"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "Always provide a headline for the dialog.",
+        "Always include a visible and easily accessible close button within the modal."
+      ],
+      "component": "syn-dialog",
+      "knownIssues": [
+        {
+          "browser": "Firefox / Chrome",
+          "description": "When the headline is set by slot instead of attribute, the dialog name is not being announced by VoiceOver in Chrome and Firefox."
+        }
+      ],
+      "related": {
+        "templates": []
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Ensure a clear user journey by using a single primary button for the main action and secondary buttons for less important actions.",
+            "Provide an action to close the interaction if a close button is not present in the top-right corner.",
+            "Avoid having multiple primary action buttons within the same dialog."
+          ],
+          "id": "actions",
+          "name": "Actions"
+        },
+        {
+          "content": [
+            "Use clear and concise headlines that describe the purpose.",
+            "Avoid displaying content unrelated to the current workflow.",
+            "Refrain from using dialogs for complex forms or large amounts of information."
+          ],
+          "id": "headline_and_content",
+          "name": "Headline and Content"
+        },
+        {
+          "content": [
+            "Use the \"label\" slot to add a headline.",
+            "Add main content on the \"default\" slot. The \"default\" slot is always scrollable.",
+            "Use the \"footer\" slot to add action elements. The \"footer\" slot is always fixed."
+          ],
+          "id": "slots",
+          "name": "Slots"
+        },
+        {
+          "content": [
+            "Require users to take an action before they can continue interacting with the rest of the interface.",
+            "Provide multiple ways to close the dialog, such as an \"X\" button, a cancel button, or clicking outside the dialog.",
+            "Avoid excessive use of dialogs, as they can be disruptive to the user experience."
+          ],
+          "id": "user_interaction",
+          "name": "User Interaction"
+        }
+      ],
+      "useCases": [
+        "Confirm an action which can have significant consequences and explicit user approval or input is needed (e.g. deleting a file).",
+        "Present important information that must be seen and acknowledged before proceeding (e.g., session expired and renewed login required).",
+        "Require users to enter information or select from multiple options before continuing.",
+        "For non-critical content or information that doesn't require immediate user input, please use syn-alert to avoid workflow disruption."
+      ]
+    },
     "sourceModulePath": "components/dialog/dialog.js",
     "summary": "Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention."
   },
@@ -188,6 +249,12 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-dialog.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-dialog.md"
+      }
     ]
   },
   "name": "syn-dialog",
@@ -198,7 +265,7 @@
       "type": "dependsOn"
     }
   ],
-  "since": "2.0",
+  "since": "1.23.0",
   "sources": [
     "packages/angular/components/dialog/dialog.component.ts",
     "packages/components/src/components/dialog/dialog.component.ts",

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

@@ -17,7 +17,7 @@
           "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-divider--docs",
           "events": [],
           "packageName": "@synergy-design-system/react",
-          "since": "2.0",
+          "since": "1.4.0",
           "sourcePath": "packages/react/src/types/syn-jsx-elements.ts",
           "status": "stable",
           "subpathExport": "./types/latest",
@@ -38,7 +38,8 @@
       }
     },
     "override": {
-      "figmaComponentId": "41227-216341",
+      "figmaComponentId": "4933-9570",
+      "figmaDocsId": "41227-216341",
       "stories": [
         {
           "description": {
@@ -101,6 +102,34 @@
         "Structure"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "Verify that dividers are visible and distinct in high contrast mode settings, which are often used by users with visual impairments.",
+        "Use to provide clear separation between sections, helping users understand content flow. Screen readers announce dividers, offering context about transitions between sections."
+      ],
+      "component": "syn-divider",
+      "usageGuidelines": [
+        {
+          "content": [
+            "Maintain consistent spacing around separators to prevent them from appearing cramped or too distant from the content they divide.",
+            "Ensure consistent use to prevent confusion, especially for users relying on assistive technologies."
+          ],
+          "id": "spacing_and_consistency",
+          "name": "Spacing and Consistency"
+        },
+        {
+          "content": [
+            "Leverage whitespace effectively as a natural divider, which can offer a clean, easy to read and organised design without additional visual elements."
+          ],
+          "id": "whitespace_vs_visual_separators",
+          "name": "Whitespace vs Visual Separators"
+        }
+      ],
+      "useCases": [
+        "Separate distinct item groups to help users clearly see and understand how different pieces of content relate to one another.",
+        "Provide visual breaks in long pages or forms to improve readability."
+      ]
+    },
     "sourceModulePath": "components/divider/divider.js",
     "summary": "Dividers are used to visually separate or group elements."
   },
@@ -152,12 +181,18 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-divider.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-divider.md"
+      }
     ]
   },
   "name": "syn-divider",
   "package": "components",
   "relations": [],
-  "since": "2.0",
+  "since": "1.4.0",
   "sources": [
     "packages/angular/components/divider/divider.component.ts",
     "packages/components/src/components/divider/divider.component.ts",

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

@@ -42,7 +42,7 @@
             }
           ],
           "packageName": "@synergy-design-system/react",
-          "since": "2.0",
+          "since": "1.8.0",
           "sourcePath": "packages/react/src/types/syn-jsx-elements.ts",
           "status": "stable",
           "subpathExport": "./types/latest",
@@ -63,7 +63,8 @@
       }
     },
     "override": {
-      "figmaComponentId": "41163-282330",
+      "figmaComponentId": "9983-7953",
+      "figmaDocsId": "41163-282330",
       "stories": [
         {
           "description": {
@@ -181,6 +182,60 @@
         "Structure"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "Always provide a label for the drawer so that screenreaders correctly announce the component.",
+        "Make sure that the close button is always visible to ensure users are able to close the drawer."
+      ],
+      "component": "syn-drawer",
+      "related": {
+        "templates": [
+          "AppShell"
+        ]
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Ensure the content is supplementary and does not include critical information that users must see immediately such as notifications or alerts; instead, use syn-alert or syn-dialog for those purposes.",
+            "Check that the drawer content is fully visible and readable, even at larger font sizes."
+          ],
+          "id": "content",
+          "name": "Content"
+        },
+        {
+          "content": [
+            "Maintain the state of the content when it is reopened.",
+            "Avoid opening automatically without user interaction.",
+            "Provide multiple ways to close the interface for easy dismissal, such as a close button or clicking outside of it."
+          ],
+          "id": "interaction_and_behavior",
+          "name": "Interaction and Behavior"
+        },
+        {
+          "content": [
+            "Ensure it does not cover critical content or actions on the main screen.",
+            "If using a tertiary action in the header, adjust the left padding to 0px for proper alignment."
+          ],
+          "id": "layout",
+          "name": "Layout"
+        },
+        {
+          "content": [
+            "Use the \"header-actions\" slot to add navigation and/or action elements if desired.",
+            "Use the \"default\" slot to add main content. The \"default\" slot is always scrollable.",
+            "Use the \"footer\" slot to add action elements if desired. The \"footer\" slot is always fixed."
+          ],
+          "id": "slots",
+          "name": "Slots"
+        }
+      ],
+      "useCases": [
+        "Display supplementary information or options without navigating away from the main screen.",
+        "Provide contextual help or guidance related to the current screen.",
+        "House navigation menus on smaller devices.",
+        "Present filter options, forms or settings that users can interact with without losing their place."
+      ]
+    },
     "sourceModulePath": "components/drawer/drawer.js",
     "summary": "Drawers slide in from a container to expose additional options and information."
   },
@@ -236,6 +291,12 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-drawer.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-drawer.md"
+      }
     ]
   },
   "name": "syn-drawer",
@@ -246,7 +307,7 @@
       "type": "dependsOn"
     }
   ],
-  "since": "2.0",
+  "since": "1.8.0",
   "sources": [
     "packages/angular/components/drawer/drawer.component.ts",
     "packages/components/src/components/drawer/drawer.component.ts",

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

@@ -34,7 +34,7 @@
             }
           ],
           "packageName": "@synergy-design-system/react",
-          "since": "2.0",
+          "since": "1.12.0",
           "sourcePath": "packages/react/src/types/syn-jsx-elements.ts",
           "status": "stable",
           "subpathExport": "./types/latest",
@@ -55,7 +55,8 @@
       }
     },
     "override": {
-      "figmaComponentId": "41203-538934",
+      "figmaComponentId": "11573-375949",
+      "figmaDocsId": "41203-538934",
       "stories": [
         {
           "description": {
@@ -129,6 +130,48 @@
         "Form"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "Ensure that when the menu is triggered via keyboard, the first item receives focus."
+      ],
+      "component": "syn-dropdown",
+      "related": {
+        "templates": [
+          "AppShell"
+        ]
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Avoid hiding sets of less than 4 items in dropdowns.",
+            "Refrain from nesting dropdowns within each other. If nesting is strictly necessary, limit the menu to two layers to prevent complex operation and cognitive load.",
+            "Keep the panel near its trigger so users understand its context."
+          ],
+          "id": "behavior",
+          "name": "Behavior"
+        },
+        {
+          "content": [
+            "Group related panel items to make them easier to find, especially if there are many. Use a group label and syn-divider to separate them visually."
+          ],
+          "id": "panel_items",
+          "name": "Panel Items"
+        },
+        {
+          "content": [
+            "Maintain consistent styling for dropdown triggers placed at the same level or in the same group; i.e., if a trigger has both text and icon, other triggers on the same level or group should also display text and icon.",
+            "Avoid truncating trigger labels if possible."
+          ],
+          "id": "triggers",
+          "name": "Triggers"
+        }
+      ],
+      "useCases": [
+        "Provide a list of items in a compact space.",
+        "Display additional options or settings related to a specific item.",
+        "Enable navigation through different sections or categories."
+      ]
+    },
     "sourceModulePath": "components/dropdown/dropdown.js",
     "summary": "Dropdowns expose additional content that \"drops down\" in a panel."
   },
@@ -180,6 +223,12 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-dropdown.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-dropdown.md"
+      }
     ]
   },
   "name": "syn-dropdown",
@@ -190,7 +239,7 @@
       "type": "dependsOn"
     }
   ],
-  "since": "2.0",
+  "since": "1.12.0",
   "sources": [
     "packages/angular/components/dropdown/dropdown.component.ts",
     "packages/components/src/components/dropdown/dropdown.component.ts",

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

@@ -38,6 +38,7 @@
             }
           ],
           "packageName": "@synergy-design-system/react",
+          "since": "2.5.0",
           "sourcePath": "packages/react/src/types/syn-jsx-elements.ts",
           "status": "stable",
           "subpathExport": "./types/latest",
@@ -58,7 +59,8 @@
       }
     },
     "override": {
-      "figmaComponentId": "41310-271865",
+      "figmaComponentId": "21709-47500",
+      "figmaDocsId": "41310-271865",
       "stories": [
         {
           "description": {
@@ -198,6 +200,56 @@
         "Form"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "Always provide a visible label and use help text to explain accepted files and limits.",
+        "Ensure drag and drop interactions are complemented by a clickable file picker.",
+        "Expose validation errors in text and not by color alone."
+      ],
+      "component": "syn-file",
+      "related": {
+        "components": [
+          "syn-validate"
+        ],
+        "templates": [
+          "Forms"
+        ]
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Use single file mode for one required document and multiple mode only when truly needed.",
+            "Use directory selection only for workflows where folder upload is expected.",
+            "Use hide-value only when file names are presented elsewhere in the UI."
+          ],
+          "id": "selection",
+          "name": "File Selection"
+        },
+        {
+          "content": [
+            "Describe allowed file types and size limits near the control.",
+            "Provide examples for naming or formatting if uploads must follow a convention.",
+            "Keep helper text short and task specific."
+          ],
+          "id": "guidance",
+          "name": "Labels and Guidance"
+        },
+        {
+          "content": [
+            "Use invalid state and clear error copy when upload constraints are not met.",
+            "Use readonly when users can inspect but not change the selected files.",
+            "Avoid disabling file input unless there is a clear blocking condition."
+          ],
+          "id": "states",
+          "name": "Validation and States"
+        }
+      ],
+      "useCases": [
+        "Upload one or more documents in forms.",
+        "Attach files to support tickets or feedback forms.",
+        "Collect folders or batches of assets for import workflows."
+      ]
+    },
     "sourceModulePath": "components/file/file.js",
     "summary": "File controls allow selecting an arbitrary number of files for uploading."
   },
@@ -249,6 +301,12 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-file.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-file.md"
+      }
     ]
   },
   "name": "syn-file",
@@ -263,7 +321,7 @@
       "type": "dependsOn"
     }
   ],
-  "since": "unknown",
+  "since": "2.5.0",
   "sources": [
     "packages/angular/components/file/file.component.ts",
     "packages/components/src/components/file/file.component.ts",

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

@@ -51,7 +51,8 @@
       }
     },
     "override": {
-      "figmaComponentId": "41163-318668",
+      "figmaComponentId": "42864-478896",
+      "figmaDocsId": "41163-318668",
       "stories": [
         {
           "description": {
@@ -158,6 +159,58 @@
         "Application Shell"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "Refrain from injecting non-navigation or unrelated content (like dynamic elements) into the header container to avoid distracting or confusing assistive technology.",
+        "Provide a unique ID on the header container for skip links, ensuring keyboard users can quickly bypass navigation if desired.",
+        "When placing a logo in the header, the alt text should describe its target (e.g., 'Start Page') rather than the image itself (e.g., 'SICK Logo'), and it should either match the visual label or at least start with the same words."
+      ],
+      "component": "syn-header",
+      "related": {
+        "components": [
+          "syn-prio-nav",
+          "syn-nav-item"
+        ],
+        "templates": [
+          "AppShell"
+        ]
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Place navigation items in the navigation slot, the logo at the left, and meta navigation on the right in wider viewports to keep consistency across products.",
+            "In smaller viewports, place an expandable menu on the left to host navigation items while keeping the logo consistently on the left across all viewport sizes.",
+            "Keep the navigation fixed at the top of the website when scrolling back to the top."
+          ],
+          "id": "layout",
+          "name": "Layout"
+        },
+        {
+          "content": [
+            "Include the logo, main navigation, and, if applicable, meta navigation.",
+            "Use the number of navigation items that best suits the content, always ensuring categories are clearly labeled and mutually exclusive.",
+            "Regularly update the navigation links to reflect current content and structure."
+          ],
+          "id": "navigation_structure_and_content",
+          "name": "Navigation Structure and Content"
+        },
+        {
+          "content": [
+            "Provide clear visual indicators for active or selected navigation items.",
+            "Refrain from customizing elements in ways that deviate from the brand identity.",
+            "Include the company logo prominently; do not use a header without the corresponding logo."
+          ],
+          "id": "visual_style_and_branding",
+          "name": "Visual Style and Branding"
+        }
+      ],
+      "useCases": [
+        "Display primary navigation links for easy access to different sections of the website.",
+        "Showcase the company logo prominently to reinforce brand identity.",
+        "Include links for user account access.",
+        "Provide a prominent search function to help users quickly find content."
+      ]
+    },
     "sourceModulePath": "components/header/header.js",
     "summary": "The <syn-header /> element provides a generic application header\nthat can be used to add applications name, toolbar and primary navigation."
   },
@@ -209,6 +262,12 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-header.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-header.md"
+      }
     ]
   },
   "name": "syn-header",