@synergy-design-system/metadata 3.7.0 → 3.8.0

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

@@ -26,7 +26,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",
@@ -47,13 +47,73 @@
       }
     },
     "override": {
-      "figmaComponentId": "1616-1512",
-      "stories": [],
+      "figmaDocsId": "1616-1512",
+      "stories": [
+        {
+          "description": {
+            "type": "text",
+            "value": "Icons are symbols that can be used to represent various options within an application."
+          },
+          "name": "default",
+          "title": {
+            "type": "text",
+            "value": "Icon"
+          }
+        }
+      ],
       "storySourcePath": "components.icon",
       "storyTags": [
         "Icons"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "Provide a label when the icon conveys meaning or triggers an action.",
+        "Use decorative icons without labels so assistive tech can ignore them.",
+        "Do not rely on icon color alone to communicate state."
+      ],
+      "component": "syn-icon",
+      "related": {
+        "components": [
+          "syn-icon-button",
+          "syn-button"
+        ]
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Use icons to support text, not replace it, unless the icon is universally understood.",
+            "For icon only interactions, pair with syn-icon-button and an accessible label.",
+            "Choose icons that match the user intent and context."
+          ],
+          "id": "semantics",
+          "name": "Semantics"
+        },
+        {
+          "content": [
+            "Use consistent icon sizes within the same interface area.",
+            "Use design tokens for color and avoid ad hoc hex colors.",
+            "Keep visual weight balanced when combining icons with text."
+          ],
+          "id": "styling",
+          "name": "Styling"
+        },
+        {
+          "content": [
+            "Use bundled libraries for common icons whenever possible.",
+            "Use custom libraries only when required by brand or domain specific assets.",
+            "Validate fallback behavior when loading icons from CDN or sprite sheets."
+          ],
+          "id": "sources",
+          "name": "Icon Sources"
+        }
+      ],
+      "useCases": [
+        "Add visual cues to buttons, alerts, and status messages.",
+        "Represent actions in compact toolbars.",
+        "Support navigation and quick scanning in dense layouts."
+      ]
+    },
     "sourceModulePath": "components/icon/icon.js",
     "summary": "Icons are symbols that can be used to represent various options within an application."
   },
@@ -133,12 +193,18 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-icon.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-icon.md"
+      }
     ]
   },
   "name": "syn-icon",
   "package": "components",
   "relations": [],
-  "since": "2.0",
+  "since": "1.0.0",
   "sources": [
     "packages/angular/components/icon/icon.component.ts",
     "packages/components/src/components/icon/icon.component.ts",

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

@@ -46,7 +46,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",
@@ -67,7 +67,8 @@
       }
     },
     "override": {
-      "figmaComponentId": "41337-165221",
+      "figmaComponentId": "661-61526",
+      "figmaDocsId": "41337-165221",
       "stories": [
         {
           "description": {
@@ -251,6 +252,65 @@
         "Form"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "Ensure that focus moves in sequential order between input fields and other form elements. When an input field is focused, it should be clearly indicated.",
+        "Avoid disabled input fields. If needed, ensure that they remain in the regular tab order but cannot be activated, allowing screen readers to announce their state and purpose. Use the native disabled attribute or appropriate ARIA attributes (e.g., aria-disabled=\"true\").",
+        "Ensure input fields are usable on all screen sizes. On smaller screens, consider using larger touch targets for input fields.",
+        "Placeholder text should offer a hint of what the user should write and must always go together with a label.",
+        "Prefer keeping the input enabled by default by relying on default values or by validating on submit.",
+        "Use \"autocomplete\" attribute to enable automated browser assistance when filling out forms."
+      ],
+      "component": "syn-input",
+      "related": {
+        "templates": [
+          "Forms"
+        ]
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Use appropriate field types for the given purpose (e.g., \"email\", \"password\", \"number\"). For custom autocomplete functionalities (e.g., search fields) use syn-combobox.",
+            "Use for brief text input only. For longer inputs, such as comments or user feedback, use syn-textarea instead."
+          ],
+          "id": "input_types",
+          "name": "Input Types"
+        },
+        {
+          "content": [
+            "Use descriptive and concise labels.",
+            "Avoid using placeholder text as a substitute for labels."
+          ],
+          "id": "labels_and_placeholders",
+          "name": "Labels and Placeholders"
+        },
+        {
+          "content": [
+            "Provide instructions within helper text for completing the field, such as password or character count (e.g., \"maxlength\" and \"minlength\"...).",
+            "Offer additional guidance with tooltips or help text to guide users on the expected input format and prevent unclear or ambiguous interpretation."
+          ],
+          "id": "user_guidance",
+          "name": "User Guidance"
+        },
+        {
+          "content": [
+            "Use dynamic formatting to automatically format user input as they type.",
+            "Validate user entries in real-time to provide immediate feedback whenever possible.",
+            "Avoid using fields for actions that require immediate feedback; use buttons instead."
+          ],
+          "id": "validation_and_formatting",
+          "name": "Validation and Formatting"
+        }
+      ],
+      "useCases": [
+        "Collect user data in forms, including names, emails, dates, and passwords.",
+        "Allow users to enter numerical values like quantities or prices.",
+        "Long or descriptive labels, helper text, or units are needed.",
+        "Forms with many fields that users must scan quickly.",
+        "Complex fields with adornments, counters, or tooltips.",
+        "Compact layouts and simple fields."
+      ]
+    },
     "sourceModulePath": "components/input/input.js",
     "summary": "Inputs collect data from the user."
   },
@@ -314,6 +374,12 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-input.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-input.md"
+      }
     ]
   },
   "name": "syn-input",
@@ -328,7 +394,7 @@
       "type": "dependsOn"
     }
   ],
-  "since": "2.0",
+  "since": "1.0.0",
   "sources": [
     "packages/angular/components/input/input.component.ts",
     "packages/components/src/components/input/formatter.ts",

package/data/core/component/component:syn-menu-item.json

@@ -17,7 +17,7 @@
           "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-menu-item--docs",
           "events": [],
           "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",
@@ -38,7 +38,8 @@
       }
     },
     "override": {
-      "figmaComponentId": "41203-369012",
+      "figmaComponentId": "10514-9627",
+      "figmaDocsId": "41203-369012",
       "stories": [
         {
           "description": {
@@ -123,6 +124,58 @@
         "Navigation"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "Use menu items inside syn-menu so keyboard navigation and selection events remain consistent.",
+        "Ensure each item has a clear text label; icons in prefix or suffix slots must not be the only way to convey meaning.",
+        "For type=\"checkbox\" items, ensure checked states communicate meaningful toggles and can be understood without visual cues alone.",
+        "Use disabled state only when necessary and provide context when an action is unavailable."
+      ],
+      "component": "syn-menu-item",
+      "related": {
+        "components": [
+          "syn-menu"
+        ],
+        "templates": [
+          "AppShell"
+        ]
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Use menu items for action lists or option lists that are secondary to the main page flow.",
+            "Order items by user priority and group related actions together, separated by dividers when needed.",
+            "Keep labels short and action-oriented (for example, \"Rename\", \"Export\", \"Delete\")."
+          ],
+          "id": "structure_and_order",
+          "name": "Structure and Order"
+        },
+        {
+          "content": [
+            "Use normal items for immediate actions and checkbox items for persistent on/off preferences.",
+            "Avoid mixing destructive actions among neutral actions without clear visual separation.",
+            "Use loading state only for actions with pending async work and keep feedback short-lived."
+          ],
+          "id": "item_types_and_states",
+          "name": "Item Types and States"
+        },
+        {
+          "content": [
+            "Use prefix icons to improve scanability, but ensure labels are still self-explanatory without icons.",
+            "Use suffix content for supplementary context such as status or additional hints.",
+            "Avoid overly dense menus with long labels, deep nesting, or too many checkable items in one list."
+          ],
+          "id": "content_and_density",
+          "name": "Content and Density"
+        }
+      ],
+      "useCases": [
+        "Offer contextual actions in dropdown and overflow menus.",
+        "Expose compact command lists in app headers and toolbars.",
+        "Provide preference toggles with checkbox-style menu items.",
+        "Present grouped navigation shortcuts in compact surfaces."
+      ]
+    },
     "sourceModulePath": "components/menu-item/menu-item.js",
     "summary": "Menu items provide options for the user to pick from in a menu."
   },
@@ -178,6 +231,12 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-menu-item.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-menu-item.md"
+      }
     ]
   },
   "name": "syn-menu-item",
@@ -196,7 +255,7 @@
       "type": "dependsOn"
     }
   ],
-  "since": "2.0",
+  "since": "1.12.0",
   "sources": [
     "packages/angular/components/menu-item/menu-item.component.ts",
     "packages/components/src/components/menu-item/menu-item.component.ts",

package/data/core/component/component:syn-menu-label.json

@@ -17,7 +17,7 @@
           "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-menu-label--docs",
           "events": [],
           "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",
@@ -38,7 +38,8 @@
       }
     },
     "override": {
-      "figmaComponentId": "41203-427127",
+      "figmaComponentId": "10666-9080",
+      "figmaDocsId": "41203-427127",
       "stories": [
         {
           "description": {
@@ -57,6 +58,55 @@
         "Navigation"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "Use menu labels to improve orientation in long menus and grouped options.",
+        "Keep label text short so assistive technologies announce groups efficiently.",
+        "Do not use menu labels as interactive menu items."
+      ],
+      "component": "syn-menu-label",
+      "related": {
+        "components": [
+          "syn-menu",
+          "syn-menu-item",
+          "syn-divider"
+        ]
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Use menu labels to separate related item groups in large menus.",
+            "Use consistent grouping logic such as task type, frequency, or section.",
+            "Avoid too many groups that make scanning harder."
+          ],
+          "id": "grouping",
+          "name": "Grouping"
+        },
+        {
+          "content": [
+            "Use concise titles such as \"File\" or \"Account\".",
+            "Use sentence case or title case consistently across the menu.",
+            "Avoid verbose labels that duplicate menu item wording."
+          ],
+          "id": "content",
+          "name": "Content"
+        },
+        {
+          "content": [
+            "Pair menu labels with separators when visual grouping needs reinforcement.",
+            "Keep group sizes balanced to avoid very long unbroken sections.",
+            "Ensure grouped items remain logically ordered within each section."
+          ],
+          "id": "structure",
+          "name": "Menu Structure"
+        }
+      ],
+      "useCases": [
+        "Organize command menus with multiple categories.",
+        "Separate account actions from content actions.",
+        "Improve scannability in dropdown and context menus."
+      ]
+    },
     "sourceModulePath": "components/menu-label/menu-label.js",
     "summary": "Menu labels are used to describe a group of menu items."
   },
@@ -108,6 +158,12 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-menu-label.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-menu-label.md"
+      }
     ]
   },
   "name": "syn-menu-label",
@@ -118,7 +174,7 @@
       "type": "dependsOn"
     }
   ],
-  "since": "2.0",
+  "since": "1.12.0",
   "sources": [
     "packages/angular/components/menu-label/menu-label.component.ts",
     "packages/components/src/components/menu-label/menu-label.component.ts",

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

@@ -22,7 +22,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",
@@ -43,7 +43,8 @@
       }
     },
     "override": {
-      "figmaComponentId": "41203-442314",
+      "figmaComponentId": "11516-365094",
+      "figmaDocsId": "41203-442314",
       "stories": [
         {
           "description": {
@@ -84,6 +85,62 @@
         "Navigation"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "Keyboard Navigation: Ensure the menu can be opened, navigated, and closed using keyboard shortcuts (e.g., arrow keys to move between items, Enter to select, Esc to close).",
+        "Screen Reader Compatibility: Use appropriate ARIA roles, such as role=\"menu\" for the menu container, role=\"menuitem\" for each item, and aria-haspopup=\"true\" for any submenu trigger. Provide descriptive, concise labels for each menu item.",
+        "Focus Management: Ensure that focus is automatically directed to the first menu item when the menu is opened. When the menu is closed, focus should return to the element that triggered the menu (e.g., button or link).",
+        "Visible Focus Indicators: Ensure all interactive menu items have visible focus states for keyboard and screen reader users. This could be through a color change, outline, or other visual indicators.",
+        "Limit Nested Menus: Avoid deep nesting of menus. Restrict the depth of nested menus to improve usability for screen readers and keyboard navigation.",
+        "Accessible Shortcuts: If the menu includes keyboard shortcuts or accelerators, ensure these are clearly communicated in the UI (e.g., with tooltips or labels like \"Ctrl + S\" for save) and accessible to screen readers.",
+        "Descriptive State Announcements: For dynamic menu behaviors (e.g., opening/closing or item selection), ensure that screen readers announce changes in state, such as \"Menu opened\" or \"Option selected.\" Use ARIA live regions or alerts as needed."
+      ],
+      "component": "syn-menu",
+      "related": {
+        "components": [
+          "syn-menu-item",
+          "syn-dropdown"
+        ],
+        "templates": [
+          "AppShell"
+        ]
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Ensure the menu is easy to access and appears consistently across the platform.",
+            "Provide visual feedback (e.g., hover, active state) to indicate interactivity.",
+            "Ensure the menu is responsive and adapts well to different screen sizes and devices."
+          ],
+          "id": "behavior",
+          "name": "Behavior"
+        },
+        {
+          "content": [
+            "Use clear, descriptive labels to ensure users know what to expect.",
+            "Use icons alongside text for better visual identification of actions.",
+            "Avoid overwhelming users with too many menu items. Keep it concise and focused."
+          ],
+          "id": "labels_and_value_display",
+          "name": "Labels and Value Display"
+        },
+        {
+          "content": [
+            "Organize menu items in a logical, hierarchical order to enhance navigation.",
+            "Prioritize frequently used functions at the top of the menu for quicker access.",
+            "Don't use multiple menus with similar content on the same screen. Keep the navigation consistent and clear."
+          ],
+          "id": "structure_and_organization",
+          "name": "Structure and Organization"
+        }
+      ],
+      "useCases": [
+        "Navigate between different sections or pages.",
+        "Access various functions or features quickly.",
+        "Switch between user account settings or preferences.",
+        "Provide shortcuts for frequently used tasks."
+      ]
+    },
     "sourceModulePath": "components/menu/menu.js",
     "summary": "Menus provide a list of options for the user to choose from."
   },
@@ -135,12 +192,18 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-menu.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-menu.md"
+      }
     ]
   },
   "name": "syn-menu",
   "package": "components",
   "relations": [],
-  "since": "2.0",
+  "since": "1.12.0",
   "sources": [
     "packages/angular/components/menu/menu.component.ts",
     "packages/components/src/components/menu/menu.component.ts",

package/data/core/component/component:syn-nav-item.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": "41163-402744",
+      "figmaComponentId": "12362-10922",
+      "figmaDocsId": "41163-402744",
       "stories": [
         {
           "description": {
@@ -173,6 +174,58 @@
         "Navigation"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "Provide a logical tab order that follows the visual sequence of navigation items and their different levels.",
+        "Use aria-current=\"page\" or aria-current=\"location\" on the active navigation item to communicate the user's current location."
+      ],
+      "component": "syn-nav-item",
+      "related": {
+        "components": [
+          "syn-side-nav",
+          "syn-prio-nav"
+        ],
+        "templates": [
+          "AppShell"
+        ]
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Use with background options of white, neutral-100, and primary-100."
+          ],
+          "id": "background_options",
+          "name": "Background Options"
+        },
+        {
+          "content": [
+            "Use clear, concise labels for navigation items.",
+            "Don't use icons alone unless they are universally understood.",
+            "Use icons and labels together to enhance comprehension."
+          ],
+          "id": "labels_and_icons",
+          "name": "Labels and Icons"
+        },
+        {
+          "content": [
+            "Use indented for nested navigation items in vertical desktop or mobile viewports and in horizontal mobile menus."
+          ],
+          "id": "spacing",
+          "name": "Spacing"
+        },
+        {
+          "content": [
+            "Be consistent in the use of descriptions: Include them for all items at the same level and keep them similar in length."
+          ],
+          "id": "text_styles_and_descriptions",
+          "name": "Text Styles and Descriptions"
+        }
+      ],
+      "useCases": [
+        "Populate an `<syn-prio-nav>` within a `<syn-header>` navigation bar at the top of a page, helping users easily access different sections.",
+        "Implement navigation items in a `<syn-side-nav>` for a more detailed and hierarchical navigation structure."
+      ]
+    },
     "sourceModulePath": "components/nav-item/nav-item.js",
     "summary": "Flexible button / link component that can be used to quickly build navigations."
   },
@@ -224,6 +277,12 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-nav-item.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-nav-item.md"
+      }
     ]
   },
   "name": "syn-nav-item",
@@ -238,7 +297,7 @@
       "type": "dependsOn"
     }
   ],
-  "since": "1.14.0",
+  "since": "1.15.0",
   "sources": [
     "packages/angular/components/nav-item/nav-item.component.ts",
     "packages/components/src/components/nav-item/nav-item.component.ts",