@synergy-design-system/metadata 3.7.0 → 3.8.0

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

@@ -38,7 +38,7 @@
             }
           ],
           "packageName": "@synergy-design-system/react",
-          "since": "2.0",
+          "since": "1.0.0",
           "sourcePath": "packages/react/src/types/syn-jsx-elements.ts",
           "status": "stable",
           "subpathExport": "./types/latest",
@@ -59,7 +59,8 @@
       }
     },
     "override": {
-      "figmaComponentId": "41337-204379",
+      "figmaComponentId": "1101-1482",
+      "figmaDocsId": "41337-204379",
       "stories": [
         {
           "description": {
@@ -199,6 +200,49 @@
         "Form"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "Ensure textarea fields are part of a logical tab order and provide a clearly visible focus state when focused.",
+        "Always provide a descriptive label. Placeholder text may support the label but must not replace it.",
+        "Ensure textarea fields remain usable across all screen sizes, including touch devices with sufficiently large touch targets.",
+        "Inform users about input constraints such as minimum or maximum character limits, and expose validation feedback clearly.",
+        "Use helper and error text that can be announced by assistive technologies (e.g., by linking descriptions and errors to the field).",
+        "Prefer keeping the field enabled by default and validate on submit or during input instead of blocking input unnecessarily."
+      ],
+      "component": "syn-textarea",
+      "related": {
+        "templates": [
+          "Forms"
+        ]
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Provide real-time validation to help users correct errors as they type.",
+            "Provide a visible scrollbar when text overflows.",
+            "Adapt the size of the field to the expected length of user input.",
+            "Avoid including a \"clear\" button to prevent unwanted loss of user input."
+          ],
+          "id": "behavior_and_interaction",
+          "name": "Behavior and Interaction"
+        },
+        {
+          "content": [
+            "Inform users whenever minimum or maximum lengths are set; use the field's help text for this.",
+            "Use placeholder text as an addition to label as it should not include essential information required to complete the field correctly.",
+            "Use help text to provide hints or examples of expected inputs."
+          ],
+          "id": "content_and_guidance",
+          "name": "Content and Guidance"
+        }
+      ],
+      "useCases": [
+        "Collect detailed user feedback or comments.",
+        "Enable users to write comprehensive reviews of products or services.",
+        "Gather extensive information about issues or requests.",
+        "Capture detailed responses in surveys or questionnaires."
+      ]
+    },
     "sourceModulePath": "components/textarea/textarea.js",
     "summary": "Textareas collect data from the user and allow multiple lines of text."
   },
@@ -250,12 +294,18 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-textarea.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-textarea.md"
+      }
     ]
   },
   "name": "syn-textarea",
   "package": "components",
   "relations": [],
-  "since": "2.0",
+  "since": "1.0.0",
   "sources": [
     "packages/angular/components/textarea/textarea.component.ts",
     "packages/components/src/components/textarea/textarea.component.ts",

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

@@ -34,7 +34,7 @@
             }
           ],
           "packageName": "@synergy-design-system/react",
-          "since": "2.0",
+          "since": "1.21.0",
           "sourcePath": "packages/react/src/types/syn-jsx-elements.ts",
           "status": "stable",
           "subpathExport": "./types/latest",
@@ -55,7 +55,8 @@
       }
     },
     "override": {
-      "figmaComponentId": "41337-203414",
+      "figmaComponentId": "16910-25970",
+      "figmaDocsId": "41337-203414",
       "stories": [
         {
           "description": {
@@ -151,6 +152,62 @@
         "Feedback"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "Avoid placing buttons, links, or other interactive controls inside a tooltip, as it's designed to be an ephemeral container for supplementary information.",
+        "On desktop, tooltips open by default on hover over the trigger element, or optionally on click. They close by clicking the trigger again or by moving the pointer away.",
+        "On touch devices, tooltips open when tapping on the trigger element and close by tapping on the trigger element again.",
+        "For keyboard navigation, tooltips should open by focusing (Tab) on the trigger element and close by pressing Escape or by moving focus away."
+      ],
+      "component": "syn-tooltip",
+      "related": {
+        "templates": [
+          "tooltip"
+        ]
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Place the tooltip where the floating element does not obscure important content related to the subject.",
+            "Ensure it disappears when the user interacts with other elements.",
+            "Avoid tooltips being cropped by other elements of the interface; use appropriate placement for this purpose."
+          ],
+          "id": "behavior_and_placement",
+          "name": "Behavior and Placement"
+        },
+        {
+          "content": [
+            "Use short, descriptive text; if a longer explanation is required, consider non-interactive means to convey this information.",
+            "Avoid jargon or highly technical language; aim to solve questions, not trigger more.",
+            "Do not use for critical or unique information.",
+            "Do not place links, buttons, or other interactive elements within the content."
+          ],
+          "id": "content",
+          "name": "Content"
+        },
+        {
+          "content": [
+            "Display a headline by bolding the text if it makes the content easier to understand.",
+            "Emphasize key information by bolding parts of the text."
+          ],
+          "id": "styling",
+          "name": "Styling"
+        },
+        {
+          "content": [
+            "Use any interactive element as a tooltip trigger by placing it in the provided slot. The tooltip will open when the user hovers over or focuses on the trigger element."
+          ],
+          "id": "trigger_element",
+          "name": "Trigger Element"
+        }
+      ],
+      "useCases": [
+        "Provide additional, useful, and non-essential information about form fields.",
+        "Expand abbreviations or acronyms that might be unfamiliar to users.",
+        "Offer detailed information about specific data points in charts or graphs.",
+        "Provide more context for error messages or warnings and anticipate any questions that users may have."
+      ]
+    },
     "sourceModulePath": "components/tooltip/tooltip.js",
     "summary": "Tooltips display additional information based on a specific action."
   },
@@ -202,6 +259,12 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-tooltip.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-tooltip.md"
+      }
     ]
   },
   "name": "syn-tooltip",
@@ -212,7 +275,7 @@
       "type": "dependsOn"
     }
   ],
-  "since": "2.0",
+  "since": "1.21.0",
   "sources": [
     "packages/angular/components/tooltip/tooltip.component.ts",
     "packages/components/src/components/tooltip/tooltip.component.ts",

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

@@ -17,7 +17,9 @@
           "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-validate--docs",
           "events": [],
           "packageName": "@synergy-design-system/react",
+          "since": "2.12.0",
           "sourcePath": "packages/react/src/types/syn-jsx-elements.ts",
+          "status": "stable",
           "subpathExport": "./types/latest",
           "typeName": "SynValidateJSXElement"
         },
@@ -36,7 +38,8 @@
       }
     },
     "override": {
-      "figmaComponentId": "41310-284767",
+      "figmaComponentId": "25638-40480",
+      "figmaDocsId": "41310-284767",
       "stories": [
         {
           "description": {
@@ -154,6 +157,59 @@
         "Form"
       ]
     },
+    "rules": {
+      "accessibility": [
+        "Validation messages must be text based and clearly associated with the target field.",
+        "Use live validation thoughtfully to avoid excessive announcement noise for screen readers.",
+        "Provide specific corrective guidance instead of generic error statements."
+      ],
+      "component": "syn-validate",
+      "related": {
+        "components": [
+          "syn-input",
+          "syn-select",
+          "syn-textarea",
+          "syn-file"
+        ],
+        "templates": [
+          "Forms"
+        ]
+      },
+      "usageGuidelines": [
+        {
+          "content": [
+            "Write actionable messages that tell users what to fix and how.",
+            "Prefer field specific messages over generic form level errors.",
+            "Use consistent wording for recurring validation rules."
+          ],
+          "id": "messaging",
+          "name": "Validation Messages"
+        },
+        {
+          "content": [
+            "Use inline variant for persistent field level feedback.",
+            "Use tooltip variant where space is constrained and interaction remains clear.",
+            "Hide icons only when another strong error cue is present."
+          ],
+          "id": "variants",
+          "name": "Display Variants"
+        },
+        {
+          "content": [
+            "Use eager validation for high risk fields that benefit from immediate feedback.",
+            "Use submit time validation to reduce interruption in long forms.",
+            "Support custom validation events when integrating non-standard controls."
+          ],
+          "id": "timing",
+          "name": "Validation Timing"
+        }
+      ],
+      "useCases": [
+        "Display field validation for forms and wizards.",
+        "Show custom validation messages for domain specific rules.",
+        "Integrate consistent error handling across native and custom form controls."
+      ]
+    },
     "sourceModulePath": "components/validate/validate.js",
     "summary": "Validate provides form field validation messages in a unified way.\nIt does this by using [the native browser validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)\nand showing the validation message in a consistent, user defined way."
   },
@@ -209,6 +265,12 @@
         "layer": "interface",
         "path": "layers/interface/component/component:syn-validate.md"
       }
+    ],
+    "rules": [
+      {
+        "layer": "rules",
+        "path": "layers/rules/component/component:syn-validate.md"
+      }
     ]
   },
   "name": "syn-validate",
@@ -223,7 +285,7 @@
       "type": "dependsOn"
     }
   ],
-  "since": "unknown",
+  "since": "2.12.0",
   "sources": [
     "packages/angular/components/validate/validate.component.ts",
     "packages/components/src/components/validate/utility.ts",

package/data/core/setup/setup:angular-components-module.json

@@ -21,7 +21,7 @@
   "name": "Angular Components Module",
   "package": "angular",
   "relations": [],
-  "since": "3.13.4",
+  "since": "3.14.0",
   "sources": [
     "packages/angular/modules/synergy/synergy.module.ts",
     "packages/angular/components/index.ts"

package/data/core/setup/setup:angular-forms-module.json

@@ -22,7 +22,7 @@
   "name": "Angular Forms Module",
   "package": "angular",
   "relations": [],
-  "since": "3.13.4",
+  "since": "3.14.0",
   "sources": [
     "packages/angular/modules/forms/forms.module.ts"
   ],

package/data/core/setup/setup:angular-package.json

@@ -2,7 +2,7 @@
   "custom": {
     "framework": "angular",
     "packageName": "@synergy-design-system/angular",
-    "packageVersion": "3.13.4",
+    "packageVersion": "3.14.0",
     "subpathExports": [
       ".",
       "./components/*",
@@ -39,7 +39,7 @@
   "name": "Angular Framework Package",
   "package": "angular",
   "relations": [],
-  "since": "3.13.4",
+  "since": "3.14.0",
   "sources": [
     "packages/angular/README.md",
     "packages/angular/CHANGELOG.md",

package/data/core/setup/setup:angular-validators-module.json

@@ -22,7 +22,7 @@
   "name": "Angular Validators Module",
   "package": "angular",
   "relations": [],
-  "since": "3.13.4",
+  "since": "3.14.0",
   "sources": [
     "packages/angular/directives/validators/validators.ts"
   ],

package/data/core/setup/setup:components-package.json

@@ -1,7 +1,7 @@
 {
   "custom": {
     "packageName": "@synergy-design-system/components",
-    "packageVersion": "3.13.4"
+    "packageVersion": "3.14.0"
   },
   "id": "setup:components-package",
   "kind": "setup",
@@ -40,7 +40,7 @@
   "name": "Components Package",
   "package": "components",
   "relations": [],
-  "since": "3.13.4",
+  "since": "3.14.0",
   "sources": [
     "packages/components/README.md",
     "packages/components/CHANGELOG.md",

package/data/core/setup/setup:react-package.json

@@ -2,7 +2,7 @@
   "custom": {
     "framework": "react",
     "packageName": "@synergy-design-system/react",
-    "packageVersion": "3.13.4",
+    "packageVersion": "3.14.0",
     "subpathExports": [
       ".",
       "./components/*",
@@ -42,7 +42,7 @@
   "name": "React Framework Package",
   "package": "react",
   "relations": [],
-  "since": "3.13.4",
+  "since": "3.14.0",
   "sources": [
     "packages/react/README.md",
     "packages/react/CHANGELOG.md",

package/data/core/setup/setup:tokens-package.json

@@ -24,7 +24,7 @@
       "./themes/*"
     ],
     "packageName": "@synergy-design-system/tokens",
-    "packageVersion": "3.13.4"
+    "packageVersion": "3.14.0"
   },
   "id": "setup:tokens-package",
   "kind": "setup",
@@ -51,7 +51,7 @@
   "name": "Tokens Package",
   "package": "tokens",
   "relations": [],
-  "since": "3.13.4",
+  "since": "3.14.0",
   "sources": [
     "packages/tokens/BREAKING_CHANGES.md",
     "packages/tokens/CHANGELOG.md",

package/data/core/setup/setup:vue-package.json

@@ -2,7 +2,7 @@
   "custom": {
     "framework": "vue",
     "packageName": "@synergy-design-system/vue",
-    "packageVersion": "3.13.4"
+    "packageVersion": "3.14.0"
   },
   "id": "setup:vue-package",
   "kind": "setup",
@@ -33,7 +33,7 @@
   "name": "Vue Framework Package",
   "package": "vue",
   "relations": [],
-  "since": "3.13.4",
+  "since": "3.14.0",
   "sources": [
     "packages/vue/README.md",
     "packages/vue/CHANGELOG.md",

package/data/core/token/token:tokens-figma-variables-sick2018-dark-json.json

@@ -18,7 +18,7 @@
   "name": "sick2018-dark.json",
   "package": "tokens",
   "relations": [],
-  "since": "3.13.4",
+  "since": "3.14.0",
   "sources": [
     "packages/tokens/src/figma-variables/output/sick2018-dark.json"
   ],

package/data/core/token/token:tokens-figma-variables-sick2018-light-json.json

@@ -18,7 +18,7 @@
   "name": "sick2018-light.json",
   "package": "tokens",
   "relations": [],
-  "since": "3.13.4",
+  "since": "3.14.0",
   "sources": [
     "packages/tokens/src/figma-variables/output/sick2018-light.json"
   ],

package/data/core/token/token:tokens-figma-variables-sick2025-dark-json.json

@@ -18,7 +18,7 @@
   "name": "sick2025-dark.json",
   "package": "tokens",
   "relations": [],
-  "since": "3.13.4",
+  "since": "3.14.0",
   "sources": [
     "packages/tokens/src/figma-variables/output/sick2025-dark.json"
   ],

package/data/core/token/token:tokens-figma-variables-sick2025-light-json.json

@@ -18,7 +18,7 @@
   "name": "sick2025-light.json",
   "package": "tokens",
   "relations": [],
-  "since": "3.13.4",
+  "since": "3.14.0",
   "sources": [
     "packages/tokens/src/figma-variables/output/sick2025-light.json"
   ],

package/data/core/token/token:tokens-js-index-d-ts.json

@@ -17,7 +17,7 @@
   "name": "index.d.ts",
   "package": "tokens",
   "relations": [],
-  "since": "3.13.4",
+  "since": "3.14.0",
   "sources": [
     "packages/tokens/dist/js/index.d.ts"
   ],

package/data/core/token/token:tokens-js-index-js.json

@@ -17,7 +17,7 @@
   "name": "index.js",
   "package": "tokens",
   "relations": [],
-  "since": "3.13.4",
+  "since": "3.14.0",
   "sources": [
     "packages/tokens/dist/js/index.js"
   ],

package/data/core/token/token:tokens-scss-tokens-scss.json

@@ -17,7 +17,7 @@
   "name": "_tokens.scss",
   "package": "tokens",
   "relations": [],
-  "since": "3.13.4",
+  "since": "3.14.0",
   "sources": [
     "packages/tokens/dist/scss/_tokens.scss"
   ],

package/data/core/token/token:tokens-themes-sick2018-dark-css.json

@@ -18,7 +18,7 @@
   "name": "sick2018_dark.css",
   "package": "tokens",
   "relations": [],
-  "since": "3.13.4",
+  "since": "3.14.0",
   "sources": [
     "packages/tokens/dist/themes/sick2018_dark.css"
   ],

package/data/core/token/token:tokens-themes-sick2018-light-css.json

@@ -18,7 +18,7 @@
   "name": "sick2018_light.css",
   "package": "tokens",
   "relations": [],
-  "since": "3.13.4",
+  "since": "3.14.0",
   "sources": [
     "packages/tokens/dist/themes/sick2018_light.css"
   ],

package/data/core/token/token:tokens-themes-sick2025-dark-css.json

@@ -18,7 +18,7 @@
   "name": "sick2025_dark.css",
   "package": "tokens",
   "relations": [],
-  "since": "3.13.4",
+  "since": "3.14.0",
   "sources": [
     "packages/tokens/dist/themes/sick2025_dark.css"
   ],

package/data/core/token/token:tokens-themes-sick2025-light-css.json

@@ -18,7 +18,7 @@
   "name": "sick2025_light.css",
   "package": "tokens",
   "relations": [],
-  "since": "3.13.4",
+  "since": "3.14.0",
   "sources": [
     "packages/tokens/dist/themes/sick2025_light.css"
   ],