@synergy-design-system/metadata 3.7.0 → 3.8.0

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

@@ -23,7 +23,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",
@@ -43,6 +43,63 @@
         "sourcePath": "packages/vue/src/components/SynVueRadioButton.vue"
       }
     },
+    "rules": {
+      "accessibility": [
+        "Provide meaningful alternative text for icon-only radio buttons.",
+        "Communicate the group's function-such as filtering or view switching-through clear context or labels."
+      ],
+      "component": "syn-radio-button",
+      "related": {
+        "components": [
+          "syn-radio",
+          "syn-radio-group"
+        ],
+        "templates": [
+          "Forms"
+        ]
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Use with light background options such as white, neutral-100, or primary-100."
+          ],
+          "id": "background",
+          "name": "Background"
+        },
+        {
+          "content": [
+            "Don't use as input method in forms, for they are not form elements. Use syn-radio instead.",
+            "Slot inside of an syn-radio-group.",
+            "Use only in groups, as they are designed to allow the user to activate one of several options. To work with a single option, use syn-checkbox instead.",
+            "Pre-select always a \"default\" value; there is no invalid state.",
+            "Limit the number of options in the group. Users should be able to retain all options available and not be overwhelmed by them."
+          ],
+          "id": "behavior",
+          "name": "Behavior"
+        },
+        {
+          "content": [
+            "Include icons to support each option visually if possible.",
+            "Label each choice clearly."
+          ],
+          "id": "content",
+          "name": "Content"
+        },
+        {
+          "content": [
+            "All radio buttons in the group must be styled similarly, e.g., each one is labelled with both text and icon.",
+            "Avoid styling options only with icons if they are not common symbols, to prevent ambiguous interpretations."
+          ],
+          "id": "styling",
+          "name": "Styling"
+        }
+      ],
+      "useCases": [
+        "Select one option from a group where one is already preselected.",
+        "Switch between groups of settings.",
+        "Filter views by a parent category."
+      ]
+    },
     "sourceModulePath": "components/radio-button/radio-button.js",
     "summary": "Radios buttons allow the user to select a single option from a group using a button-like control."
   },
@@ -88,12 +145,18 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-radio-button.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-radio-button.md"
+      }
     ]
   },
   "name": "syn-radio-button",
   "package": "components",
   "relations": [],
-  "since": "2.0",
+  "since": "1.0.0",
   "sources": [
     "packages/angular/components/radio-button/radio-button.component.ts",
     "packages/components/src/components/radio-button/radio-button.component.ts",

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

@@ -30,7 +30,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",
@@ -51,7 +51,7 @@
       }
     },
     "override": {
-      "figmaComponentId": "41310-253349",
+      "figmaDocsId": "41310-253349",
       "stories": [
         {
           "description": {
@@ -180,6 +180,54 @@
         "Form"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "Ensure that the group label is short and concise as it may be read out when users enter the group.",
+        "Ensure radios are easily tappable on touch devices."
+      ],
+      "component": "syn-radio-group",
+      "related": {
+        "components": [
+          "syn-radio",
+          "syn-radio-button"
+        ],
+        "templates": [
+          "Forms"
+        ]
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Use with light background options such as white, neutral-100, or primary-100."
+          ],
+          "id": "background",
+          "name": "Background"
+        },
+        {
+          "content": [
+            "Group related options together using fieldsets and legends for better context and accessibility.",
+            "Provide a group label that states the category or describes the actions to take."
+          ],
+          "id": "grouping_and_labels",
+          "name": "Grouping and Labels"
+        },
+        {
+          "content": [
+            "Provide a default selected option; never display options without a default selection.",
+            "Do not disable all choices in a group; if a selection is not applicable, consider hiding the group instead.",
+            "Use only when users need to select one option; for multiple selections, use checkboxes instead."
+          ],
+          "id": "selection_behavior",
+          "name": "Selection Behavior"
+        }
+      ],
+      "useCases": [
+        "Present options in forms where only one selection is allowed (e.g., gender selection, payment methods).",
+        "Provide clear and concise choices in settings or configuration panels.",
+        "Enable users to make a selection in surveys or questionnaires.",
+        "Offer options in filter panels where only one filter can be applied at a time."
+      ]
+    },
     "sourceModulePath": "components/radio-group/radio-group.js",
     "summary": "Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control."
   },
@@ -231,6 +279,12 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-radio-group.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-radio-group.md"
+      }
     ]
   },
   "name": "syn-radio-group",
@@ -241,7 +295,7 @@
       "type": "dependsOn"
     }
   ],
-  "since": "2.0",
+  "since": "1.0.0",
   "sources": [
     "packages/angular/components/radio-group/radio-group.component.ts",
     "packages/components/src/components/radio-group/radio-group.component.ts",

package/data/core/component/component:syn-radio.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,7 +47,8 @@
       }
     },
     "override": {
-      "figmaComponentId": "41310-252390",
+      "figmaComponentId": "1345-21578",
+      "figmaDocsId": "41310-252390",
       "stories": [
         {
           "description": {
@@ -132,6 +133,57 @@
         "Form"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "Use syn-radio inside syn-radio-group so assistive technologies can interpret options as one exclusive choice set.",
+        "Ensure each radio has a clear, unique visible label; avoid ambiguous labels such as \"Option 1\" without context.",
+        "Use disabled or readonly states only when users can still understand why an option is unavailable."
+      ],
+      "component": "syn-radio",
+      "related": {
+        "components": [
+          "syn-radio-group"
+        ],
+        "templates": [
+          "Forms"
+        ]
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Use radios when users must select exactly one option from a small, predefined list.",
+            "Keep options mutually exclusive and avoid overlapping meanings between choices.",
+            "Present options in a stable order and keep wording parallel to make comparison easier."
+          ],
+          "id": "option_structure",
+          "name": "Option Structure"
+        },
+        {
+          "content": [
+            "Always provide a meaningful group label on the parent syn-radio-group.",
+            "Use concise option labels and add help text when options need extra explanation.",
+            "Prefer sentence case and domain terms users already know."
+          ],
+          "id": "labels_and_guidance",
+          "name": "Labels and Guidance"
+        },
+        {
+          "content": [
+            "Set a sensible default when one option is expected in most cases, but avoid preselecting high-risk choices.",
+            "If no safe default exists, require explicit user selection before submit.",
+            "Do not mix radios and checkboxes for the same decision set."
+          ],
+          "id": "selection_behavior",
+          "name": "Selection Behavior"
+        }
+      ],
+      "useCases": [
+        "Choose one delivery method from a short list.",
+        "Select one billing frequency such as monthly or yearly.",
+        "Pick one preference in settings where only a single active mode is allowed.",
+        "Answer single-choice questions in forms and surveys."
+      ]
+    },
     "sourceModulePath": "components/radio/radio.js",
     "summary": "Radios allow the user to select a single option from a group."
   },
@@ -183,6 +235,12 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-radio.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-radio.md"
+      }
     ]
   },
   "name": "syn-radio",
@@ -193,7 +251,7 @@
       "type": "dependsOn"
     }
   ],
-  "since": "2.0",
+  "since": "1.0.0",
   "sources": [
     "packages/angular/components/radio/radio.component.ts",
     "packages/components/src/components/radio/radio.component.ts",

package/data/core/component/component:syn-range-tick.json

@@ -17,6 +17,7 @@
           "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-range-tick--docs",
           "events": [],
           "packageName": "@synergy-design-system/react",
+          "since": "2.6.0",
           "sourcePath": "packages/react/src/types/syn-jsx-elements.ts",
           "status": "stable",
           "subpathExport": "./types/latest",
@@ -37,7 +38,8 @@
       }
     },
     "override": {
-      "figmaComponentId": "41310-326049",
+      "figmaComponentId": "25215-38412",
+      "figmaDocsId": "41310-326049",
       "stories": [
         {
           "description": {
@@ -89,6 +91,59 @@
         "Form"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "Treat range ticks as supportive visual markers; do not rely on ticks alone to communicate critical values or state.",
+        "Provide meaningful text labels for major ticks so users can understand the scale together with the range label and value output.",
+        "Ensure tick labels have sufficient contrast and remain readable at all supported sizes and viewport widths.",
+        "When subdivision ticks are unlabeled, ensure major labeled ticks still provide enough context for orientation.",
+        "For precise input scenarios, provide an additional text or numeric input method because ticks are not interactive controls."
+      ],
+      "component": "syn-range-tick",
+      "related": {
+        "components": [
+          "syn-range"
+        ],
+        "templates": [
+          "Forms"
+        ]
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Use syn-range-tick inside the ticks slot of syn-range to visualize value intervals along the slider track.",
+            "Align tick labels with actual slider values so visual markers and range behavior stay consistent.",
+            "Use short, scannable labels for major points such as min, mid, and max values."
+          ],
+          "id": "scale_mapping",
+          "name": "Scale Mapping"
+        },
+        {
+          "content": [
+            "Use subdivision ticks to improve orientation between major labeled ticks.",
+            "Avoid labeling every subdivision when it creates visual clutter; prioritize key waypoints.",
+            "Keep spacing patterns predictable to avoid implying incorrect value intervals."
+          ],
+          "id": "subdivisions",
+          "name": "Subdivisions"
+        },
+        {
+          "content": [
+            "Keep tick density proportional to available width so labels do not overlap on smaller screens.",
+            "Test responsive behavior when using uneven spacing or custom groupings to ensure labels remain readable.",
+            "Do not use ticks as standalone indicators outside a range context where values cannot be interpreted reliably."
+          ],
+          "id": "layout_and_density",
+          "name": "Layout and Density"
+        }
+      ],
+      "useCases": [
+        "Mark key values such as minimum, midpoint, and maximum on a range slider.",
+        "Show meaningful breakpoints for pricing, durations, or configurable thresholds.",
+        "Improve readability of uneven or grouped value scales in advanced range scenarios.",
+        "Provide subdivision markers between primary ticks for better visual orientation."
+      ]
+    },
     "sourceModulePath": "components/range-tick/range-tick.js",
     "summary": "Ticks visually improve positioning on range sliders."
   },
@@ -140,12 +195,18 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-range-tick.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-range-tick.md"
+      }
     ]
   },
   "name": "syn-range-tick",
   "package": "components",
   "relations": [],
-  "since": "unknown",
+  "since": "2.6.0",
   "sources": [
     "packages/angular/components/range-tick/range-tick.component.ts",
     "packages/components/src/components/range-tick/range-tick.component.ts",

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

@@ -42,6 +42,7 @@
             }
           ],
           "packageName": "@synergy-design-system/react",
+          "since": "2.6.0",
           "sourcePath": "packages/react/src/types/syn-jsx-elements.ts",
           "status": "stable",
           "subpathExport": "./types/latest",
@@ -62,7 +63,8 @@
       }
     },
     "override": {
-      "figmaComponentId": "41310-323916",
+      "figmaComponentId": "25215-36015",
+      "figmaDocsId": "41310-323916",
       "stories": [
         {
           "description": {
@@ -246,6 +248,57 @@
         "Form"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "Always provide a label for the range so that screenreaders correctly announce the component.",
+        "Provide alternative input methods like numeric input fields or a stepper, allowing users who struggle with dragging to manually set values."
+      ],
+      "component": "syn-range",
+      "related": {
+        "components": [
+          "syn-range-tick"
+        ],
+        "templates": [
+          "Forms"
+        ]
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Position the range component in an uncluttered area to facilitate easy interaction.",
+            "Reserve the component for relevant, contextually meaningful ranges (e.g., price filters, time spans)."
+          ],
+          "id": "context",
+          "name": "Context"
+        },
+        {
+          "content": [
+            "Provide clear labels or tooltips indicating the current value or range.",
+            "Pair the slider with text labels or numeric indicators for precise adjustments.",
+            "Avoid relying solely on color or visuals; add a text representation for clarity."
+          ],
+          "id": "labels_and_value_display",
+          "name": "Labels and Value Display"
+        },
+        {
+          "content": [
+            "Choose realistic minimum and maximum values for the intended use case.",
+            "Avoid extremely large intervals (e.g., 1 to 1,000,000) unless necessary, and label them thoroughly.",
+            "Use appropriate step sizes for fine control (e.g., increments of 5 or 10 for a price slider).",
+            "Enable two-handle sliders (min/max) if the scenario requires independent adjustments."
+          ],
+          "id": "range_definition",
+          "name": "Range Definition"
+        }
+      ],
+      "useCases": [
+        "Adjust settings within a defined range (e.g., volume, brightness).",
+        "Filter results by specifying a price range or product parameters.",
+        "Select time intervals for scheduling or reminder tasks.",
+        "Set minimum and maximum inputs (e.g., age, quantity, distance).",
+        "Visualize progress by assigning milestones within a larger goal or process."
+      ]
+    },
     "sourceModulePath": "components/range/range.js",
     "summary": "Ranges allow the user to select values within a given range using one or two thumbs."
   },
@@ -301,6 +354,12 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-range.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-range.md"
+      }
     ]
   },
   "name": "syn-range",
@@ -311,7 +370,7 @@
       "type": "dependsOn"
     }
   ],
-  "since": "unknown",
+  "since": "2.6.0",
   "sources": [
     "packages/angular/components/range/range.component.ts",
     "packages/components/src/components/range/range.component.ts",

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

@@ -58,7 +58,7 @@
             }
           ],
           "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",
@@ -79,7 +79,8 @@
       }
     },
     "override": {
-      "figmaComponentId": "41325-310740",
+      "figmaComponentId": "4825-30354",
+      "figmaDocsId": "41325-310740",
       "stories": [
         {
           "description": {
@@ -252,6 +253,50 @@
         "Form"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "If multiple options can be selected, clearly announce this capability to screenreader users and offer a way to view all chosen items.",
+        "Be aware that group labels in select components will be neglected by most assistive devices."
+      ],
+      "component": "syn-select",
+      "related": {
+        "components": [
+          "syn-option",
+          "syn-optgroup"
+        ],
+        "templates": [
+          "Forms"
+        ]
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Keep each option to a single line of text for readability.",
+            "Ensure all options have consistent line lengths for easier scanning.",
+            "Avoid using the same word or phrase at the beginning of options.",
+            "Provide a meaningful placeholder option to guide users."
+          ],
+          "id": "content_and_labels",
+          "name": "Content and Labels"
+        },
+        {
+          "content": [
+            "Use for lists with more than five options; for fewer options, consider using syn-radio for single selection or syn-checkbox for multiple selection.",
+            "Apply the \"multiple\" attribute when multiple selections are allowed.",
+            "By default, the number of selected options is displayed after the text.",
+            "Display selected options as tags within the field to help users track their selections.",
+            "Consider limiting the maximum number of displayed selectable options to avoid overwhelming users. We recommend displaying 6-8 (with scrolling for additional results)."
+          ],
+          "id": "selection_behavior",
+          "name": "Selection Behavior"
+        }
+      ],
+      "useCases": [
+        "Enable users to select one or more options from a list of predefined choices in forms.",
+        "Implement in filter panels to allow users to refine search results or data views.",
+        "Provide options in settings pages where users need to choose preferences from a list."
+      ]
+    },
     "sourceModulePath": "components/select/select.js",
     "summary": "Selects allow you to choose items from a menu of predefined options."
   },
@@ -307,6 +352,12 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-select.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-select.md"
+      }
     ]
   },
   "name": "syn-select",
@@ -325,7 +376,7 @@
       "type": "dependsOn"
     }
   ],
-  "since": "2.0",
+  "since": "1.5.0",
   "sources": [
     "packages/angular/components/select/select.component.ts",
     "packages/components/src/components/select/select.component.ts",

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