@synergy-design-system/metadata 3.7.0 → 3.9.0

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",

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

@@ -17,7 +17,7 @@
           "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-optgroup--docs",
           "events": [],
           "packageName": "@synergy-design-system/react",
-          "since": "1.3.0",
+          "since": "1.5.0",
           "sourcePath": "packages/react/src/types/syn-jsx-elements.ts",
           "status": "stable",
           "subpathExport": "./types/latest",
@@ -38,12 +38,52 @@
       }
     },
     "override": {
-      "figmaComponentId": "41325-324372",
+      "figmaComponentId": "30344-112405",
+      "figmaDocsId": "41325-324372",
       "storySourcePath": "components.optgroup",
       "storyTags": [
         "Form"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "Ensure that the group label is short and concise as it may be read out when users enter the group."
+      ],
+      "component": "syn-optgroup",
+      "related": {
+        "components": [
+          "syn-select",
+          "syn-combobox",
+          "syn-option"
+        ],
+        "templates": [
+          "Forms"
+        ]
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Provide a reason or alternative if some choice is disabled."
+          ],
+          "id": "behavior",
+          "name": "Behavior"
+        },
+        {
+          "content": [
+            "Make sure all items in the list are mutually exclusive and unambiguous to help users understand what they are selecting.",
+            "Provide a default choice where applicable to guide users.",
+            "Use the optional grouping label and/or divider attributes to visually identify the groups."
+          ],
+          "id": "content",
+          "name": "Content"
+        }
+      ],
+      "useCases": [
+        "Provide options in selects or comboboxes.",
+        "Allow users to select from a list of predefined choices in forms or settings, where they might choose one or more options.",
+        "Present filter options in searches or data tables."
+      ]
+    },
     "sourceModulePath": "components/optgroup/optgroup.js",
     "summary": "The <syn-optgroup> element creates a grouping for <syn-option>s within a <syn-select>."
   },
@@ -95,6 +135,12 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-optgroup.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-optgroup.md"
+      }
     ]
   },
   "name": "syn-optgroup",
@@ -105,7 +151,7 @@
       "type": "dependsOn"
     }
   ],
-  "since": "1.3.0",
+  "since": "1.5.0",
   "sources": [
     "packages/angular/components/optgroup/optgroup.component.ts",
     "packages/components/src/components/optgroup/optgroup.component.ts",

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

@@ -17,7 +17,7 @@
           "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-option--docs",
           "events": [],
           "packageName": "@synergy-design-system/react",
-          "since": "2.0",
+          "since": "1.5.0",
           "sourcePath": "packages/react/src/types/syn-jsx-elements.ts",
           "status": "stable",
           "subpathExport": "./types/latest",
@@ -38,7 +38,8 @@
       }
     },
     "override": {
-      "figmaComponentId": "41325-312743",
+      "figmaComponentId": "30345-113913",
+      "figmaDocsId": "41325-312743",
       "stories": [
         {
           "description": {
@@ -90,6 +91,39 @@
         "Form"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "Long option names can be difficult to understand and perceive, so it's best to keep them concise.",
+        "Ensure that the beginning of each option is unique to avoid confusion, especially for screen reader users.",
+        "Don't include headings or interactive elements like links, buttons, or checkboxes within dropdown options."
+      ],
+      "component": "syn-option",
+      "related": {
+        "components": [
+          "syn-select",
+          "syn-combobox",
+          "syn-optgroup"
+        ],
+        "templates": [
+          "Forms"
+        ]
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Make sure all items in the list are mutually exclusive and unambiguous to help users understand what they are selecting.",
+            "Provide a default choice where applicable to guide users."
+          ],
+          "id": "content",
+          "name": "Content"
+        }
+      ],
+      "useCases": [
+        "Provide options in selects or comboboxes.",
+        "Allow users to select from a list of predefined choices in forms or settings, where they might choose one or more options.",
+        "Present filter options in searches or data tables."
+      ]
+    },
     "sourceModulePath": "components/option/option.js",
     "summary": "Options define the selectable items within various form controls such as [select](/components/select)."
   },
@@ -149,6 +183,12 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-option.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-option.md"
+      }
     ]
   },
   "name": "syn-option",
@@ -159,7 +199,7 @@
       "type": "dependsOn"
     }
   ],
-  "since": "2.0",
+  "since": "1.5.0",
   "sources": [
     "packages/angular/components/option/option.component.ts",
     "packages/components/src/components/option/option-size.styles.ts",

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

@@ -43,6 +43,54 @@
         "sourcePath": "packages/vue/src/components/SynVuePagination.vue"
       }
     },
+    "rules": {
+      "accessibility": [
+        "Provide clear labels for pagination controls and page size selectors.",
+        "Ensure keyboard users can reach and operate next, previous, and direct page input.",
+        "Announce page changes and invalid page input clearly."
+      ],
+      "component": "syn-pagination",
+      "related": {
+        "components": [
+          "syn-select",
+          "syn-input"
+        ]
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Use pagination for large datasets where loading all records at once is not practical.",
+            "Keep page size options meaningful for the context, such as 10, 25, and 50.",
+            "Show current page and total pages so users understand position."
+          ],
+          "id": "navigation",
+          "name": "Navigation"
+        },
+        {
+          "content": [
+            "Use compact mode when horizontal space is limited.",
+            "Use size variants consistently with nearby form controls.",
+            "Avoid changing pagination density between sibling views without reason."
+          ],
+          "id": "density",
+          "name": "Compact and Size Variants"
+        },
+        {
+          "content": [
+            "Preserve current page when filters and sorting stay compatible with the dataset.",
+            "Reset to page one when filter changes invalidate the current page.",
+            "Disable controls only when navigation is not possible, such as first or last page boundaries."
+          ],
+          "id": "behavior",
+          "name": "Behavior"
+        }
+      ],
+      "useCases": [
+        "Navigate through table records across pages.",
+        "Paginate long result lists in search and catalog pages.",
+        "Control page size in data heavy admin views."
+      ]
+    },
     "sourceModulePath": "components/pagination/pagination.js",
     "summary": "<syn-pagination /> provides page navigation, direct page input, and page-size selection for large data sets."
   },
@@ -98,6 +146,12 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-pagination.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-pagination.md"
+      }
     ]
   },
   "name": "syn-pagination",

package/data/core/component/component:syn-popup.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",
@@ -61,6 +61,54 @@
         "Structure"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "Ensure popup content remains reachable by keyboard when interactive elements are present.",
+        "Do not hide critical information in popups that are hard to trigger on touch devices.",
+        "Use clear trigger affordances so users understand where popup content comes from."
+      ],
+      "component": "syn-popup",
+      "related": {
+        "components": [
+          "syn-dropdown",
+          "syn-tooltip"
+        ]
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Choose placements that keep popup content near the trigger and inside the viewport.",
+            "Use distance and skidding to fine tune alignment in complex layouts.",
+            "Use arrows when they help users relate popup content to its anchor."
+          ],
+          "id": "placement",
+          "name": "Placement"
+        },
+        {
+          "content": [
+            "Use explicit activation logic for interactive popups and dismiss on outside interaction.",
+            "Handle flip and shift options to avoid clipping in constrained containers.",
+            "Prefer stable anchor elements and verify behavior when anchors resize."
+          ],
+          "id": "behavior",
+          "name": "Activation and Lifecycle"
+        },
+        {
+          "content": [
+            "Keep popup content focused and short for quick understanding.",
+            "Avoid placing long workflows inside simple popup containers.",
+            "Use dialog or drawer for complex multi-step interactions."
+          ],
+          "id": "content",
+          "name": "Content and Scope"
+        }
+      ],
+      "useCases": [
+        "Anchor floating menus to trigger controls.",
+        "Display contextual information near data points.",
+        "Implement custom positioned overlays in advanced layouts."
+      ]
+    },
     "sourceModulePath": "components/popup/popup.js",
     "summary": "Popup is a utility that lets you declaratively anchor \"popup\" containers to another element."
   },
@@ -112,12 +160,18 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-popup.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-popup.md"
+      }
     ]
   },
   "name": "syn-popup",
   "package": "components",
   "relations": [],
-  "since": "2.0",
+  "since": "1.12.0",
   "sources": [
     "packages/angular/components/popup/popup.component.ts",
     "packages/components/src/components/popup/popup.component.ts",

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

@@ -17,7 +17,7 @@
           "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-prio-nav--docs",
           "events": [],
           "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",
@@ -38,7 +38,8 @@
       }
     },
     "override": {
-      "figmaComponentId": "41227-206412",
+      "figmaComponentId": "12362-10982",
+      "figmaDocsId": "41227-206412",
       "stories": [
         {
           "description": {
@@ -68,6 +69,56 @@
         "Navigation"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "Ensure navigation items are keyboard reachable and ordered logically.",
+        "Use clear labels that reflect destination and not internal naming.",
+        "Communicate current location with proper active state semantics."
+      ],
+      "component": "syn-prio-nav",
+      "related": {
+        "components": [
+          "syn-nav-item",
+          "syn-menu",
+          "syn-menu-item",
+          "syn-header"
+        ]
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Place the most important destinations first so they stay visible longer.",
+            "Move lower priority items into overflow menus when space is limited.",
+            "Review priority order regularly as product usage evolves."
+          ],
+          "id": "priority",
+          "name": "Priority Handling"
+        },
+        {
+          "content": [
+            "Keep labels short and distinct to prevent truncation and ambiguity.",
+            "Avoid deep nesting in top level priority navigation.",
+            "Use predictable ordering patterns such as task or category order."
+          ],
+          "id": "labels",
+          "name": "Labels and Structure"
+        },
+        {
+          "content": [
+            "Test behavior at common breakpoints to ensure overflow remains usable.",
+            "Ensure menu fallback remains discoverable on narrow viewports.",
+            "Keep interaction patterns consistent between desktop and mobile."
+          ],
+          "id": "responsive",
+          "name": "Responsive Behavior"
+        }
+      ],
+      "useCases": [
+        "Primary horizontal navigation with overflow handling.",
+        "App headers that must adapt to changing viewport widths.",
+        "Section navigation where top destinations should stay visible."
+      ]
+    },
     "sourceModulePath": "components/prio-nav/prio-nav.js",
     "summary": "The `<syn-prio-nav />` element provides a generic navigation bar\nthat can be used to group multiple navigation items  (usually horizontal `<syn-nav-item />`s)\ntogether. It will automatically group all items not visible in the viewport into a custom\npriority menu."
   },
@@ -123,6 +174,12 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-prio-nav.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-prio-nav.md"
+      }
     ]
   },
   "name": "syn-prio-nav",
@@ -145,7 +202,7 @@
       "type": "dependsOn"
     }
   ],
-  "since": "1.14.0",
+  "since": "1.15.0",
   "sources": [
     "packages/angular/components/prio-nav/prio-nav.component.ts",
     "packages/components/src/components/prio-nav/prio-nav.component.ts",

package/data/core/component/component:syn-progress-bar.json

@@ -17,7 +17,7 @@
           "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-progress-bar--docs",
           "events": [],
           "packageName": "@synergy-design-system/react",
-          "since": "2.0",
+          "since": "1.19.0",
           "sourcePath": "packages/react/src/types/syn-jsx-elements.ts",
           "status": "stable",
           "subpathExport": "./types/latest",
@@ -38,7 +38,8 @@
       }
     },
     "override": {
-      "figmaComponentId": "41203-297162",
+      "figmaComponentId": "16209-20856",
+      "figmaDocsId": "41203-297162",
       "stories": [
         {
           "description": {
@@ -101,6 +102,54 @@
         "Feedback"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "Provide accessible labels for progress context, especially when multiple bars are visible.",
+        "Use determinate mode when actual progress is known and indeterminate only when unknown.",
+        "Do not rely on color only to communicate progress status."
+      ],
+      "component": "syn-progress-bar",
+      "related": {
+        "components": [
+          "syn-progress-ring",
+          "syn-spinner"
+        ]
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Use determinate mode for measurable tasks such as uploads or imports.",
+            "Use indeterminate mode for short operations when duration cannot be estimated.",
+            "Switch to determinate mode as soon as reliable progress information is available."
+          ],
+          "id": "mode",
+          "name": "Determinate vs Indeterminate"
+        },
+        {
+          "content": [
+            "Provide descriptive labels that state what process is progressing.",
+            "Show values when users benefit from precise completion feedback.",
+            "Keep labeling consistent across similar processes."
+          ],
+          "id": "labels",
+          "name": "Labels and Values"
+        },
+        {
+          "content": [
+            "Use custom heights carefully to preserve readability and visual balance.",
+            "Maintain sufficient contrast between track and indicator.",
+            "Avoid decorative overuse of animated progress indicators."
+          ],
+          "id": "visuals",
+          "name": "Visual Styling"
+        }
+      ],
+      "useCases": [
+        "Show progress for uploads, downloads, or data processing.",
+        "Indicate completion status in multi-step operations.",
+        "Display background task progress in dashboards and forms."
+      ]
+    },
     "sourceModulePath": "components/progress-bar/progress-bar.js",
     "summary": "Progress bars are used to show the status of an ongoing operation."
   },
@@ -156,12 +205,18 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-progress-bar.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-progress-bar.md"
+      }
     ]
   },
   "name": "syn-progress-bar",
   "package": "components",
   "relations": [],
-  "since": "2.0",
+  "since": "1.19.0",
   "sources": [
     "packages/angular/components/progress-bar/progress-bar.component.ts",
     "packages/components/src/components/progress-bar/progress-bar.component.ts",