@synergy-design-system/tokens 2.13.0 → 2.15.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@synergy-design-system/tokens-v2.15.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.14.0...tokens/2.15.0) (2024-11-27)
+
+
+### Features
+
+* ✨ Create styles for a syn-link-list ([#678](https://github.com/synergy-design-system/synergy-design-system/issues/678)) ([ca3b99a](https://github.com/synergy-design-system/synergy-design-system/commit/ca3b99a828e2a078b538881f74324d0bee8fde66))
+
+# [@synergy-design-system/tokens-v2.14.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.13.0...tokens/2.14.0) (2024-11-21)
+
+
+### Features
+
+* ✨ provide accessible solution for validation ([#599](https://github.com/synergy-design-system/synergy-design-system/issues/599)) ([f8ef81a](https://github.com/synergy-design-system/synergy-design-system/commit/f8ef81a4a61af27fcb6de2c03ce13ef502fcb732))
+
 # [@synergy-design-system/tokens-v2.13.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.12.1...tokens/2.13.0) (2024-10-11)
 
 

package/dist/js/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.12.1
+ * @synergy-design-system/tokens version 2.14.0
  * SICK Global UX Foundation
  */
 

package/dist/js/index.js

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.12.1
+ * @synergy-design-system/tokens version 2.14.0
  * SICK Global UX Foundation
  */
 

package/dist/scss/_tokens.scss

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.12.1
+ * @synergy-design-system/tokens version 2.14.0
  * SICK Global UX Foundation
  */
 $SynFontSizeXSmall: var(--syn-font-size-x-small) !default;

package/dist/themes/dark.css

@@ -1,8 +1,8 @@
 /**
- * @synergy-design-system/tokens version 2.12.1
+ * @synergy-design-system/tokens version 2.14.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Fri, 11 Oct 2024 11:03:35 GMT
+ * Generated on Wed, 27 Nov 2024 10:49:18 GMT
  */
 
 :root, .syn-theme-dark {

package/dist/themes/light.css

@@ -1,8 +1,8 @@
 /**
- * @synergy-design-system/tokens version 2.12.1
+ * @synergy-design-system/tokens version 2.14.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Fri, 11 Oct 2024 11:03:35 GMT
+ * Generated on Wed, 27 Nov 2024 10:49:18 GMT
  */
 
 :root, .syn-theme-light {

package/package.json

@@ -17,7 +17,7 @@
     "semantic-release": "^19.0.5",
     "semantic-release-monorepo": "7.0.5",
     "style-dictionary": "^3.9.2",
-    "stylelint": "^16.9.0",
+    "stylelint": "^16.10.0",
     "@synergy-design-system/stylelint-config-syn": "0.1.0",
     "@synergy-design-system/eslint-config-syn": "0.1.0"
   },
@@ -101,7 +101,7 @@
   },
   "type": "module",
   "types": "./dist/js/index.d.ts",
-  "version": "2.13.0",
+  "version": "2.15.0",
   "scripts": {
     "build": "pnpm clean && node scripts/build.js",
     "clean": "rimraf build",

package/src/figma-tokens/_docs.json

@@ -114,7 +114,7 @@
         }
       },
       "toast-notifications": {
-        "titel": {
+        "title": {
           "value": "Toast Notifications",
           "type": "text"
         },
@@ -485,24 +485,24 @@
       }
     },
     "carousel": {
-      "description": {
-        "value": "Carousels display an arbitrary number of content slides along a horizontal or vertical axis.",
-        "type": "text"
-      },
       "title": {
         "value": "Carousel",
         "type": "text"
+      },
+      "description": {
+        "value": "Carousels display an arbitrary number of content slides along a horizontal or vertical axis.",
+        "type": "text"
       }
     },
     "checkbox": {
       "default": {
-        "description": {
-          "value": "Checkboxes allow the user to toggle an option on or off.",
-          "type": "text"
-        },
         "title": {
           "value": "Checkbox",
           "type": "text"
+        },
+        "description": {
+          "value": "Checkboxes allow the user to toggle an option on or off.",
+          "type": "text"
         }
       },
       "checked": {
@@ -581,40 +581,40 @@
           "type": "text"
         },
         "description": {
-          "value": "Add descriptive help text to a switch with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.",
+          "value": "Add descriptive help text to a switch with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.\nThe help-text attribute should not be used to display error messages. To handle validation and error messaging, use syn-validate for proper error management.",
           "type": "text"
         }
       }
     },
     "color-picker": {
-      "description": {
-        "value": "Color pickers allow the user to select a color.",
-        "type": "text"
-      },
       "title": {
         "value": "Color Picker",
         "type": "text"
+      },
+      "description": {
+        "value": "Color pickers allow the user to select a color.",
+        "type": "text"
       }
     },
     "copy-button": {
-      "description": {
-        "value": "Copies data to the clipboard when the user clicks the button.",
-        "type": "text"
-      },
       "title": {
         "value": "Copy Button",
         "type": "text"
+      },
+      "description": {
+        "value": "Copies data to the clipboard when the user clicks the button.",
+        "type": "text"
       }
     },
     "details": {
       "default": {
-        "description": {
-          "value": "Details show a brief summary and expand to show additional content. If you want to group the details, we recommend that you use the syn-accordion component.",
-          "type": "text"
-        },
         "title": {
           "value": "Details",
           "type": "text"
+        },
+        "description": {
+          "value": "Details show a brief summary and expand to show additional content. If you want to group the details, we recommend that you use the syn-accordion component.",
+          "type": "text"
         }
       },
       "disabled": {
@@ -987,7 +987,7 @@
           "type": "text"
         },
         "description": {
-          "value": "Add descriptive help text to a file selector with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.",
+          "value": "Add descriptive help text to a switch with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.\nThe help-text attribute should not be used to display error messages. To handle validation and error messaging, use syn-validate for proper error management.",
           "type": "text"
         }
       },
@@ -1176,7 +1176,7 @@
         }
       },
       "label": {
-        "titel": {
+        "title": {
           "value": "Accessibility Label",
           "type": "text"
         },
@@ -1253,7 +1253,7 @@
           "type": "text"
         },
         "description": {
-          "value": "Add descriptive help text to an input with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.",
+          "value": "Add descriptive help text to a switch with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.\nThe help-text attribute should not be used to display error messages. To handle validation and error messaging, use syn-validate for proper error management.",
           "type": "text"
         }
       },
@@ -1440,6 +1440,38 @@
         }
       }
     },
+    "link-list": {
+      "horizontal": {
+        "title": {
+          "value": "Horizontal",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the horizontal attribute to indicate that it is used as a horizontal link list.",
+          "type": "text"
+        }
+      },
+      "multiline": {
+        "title": {
+          "value": "Multiline",
+          "type": "text"
+        },
+        "description": {
+          "value": "The horizontal link list automatically wraps into a new line if there is not enough space available.",
+          "type": "text"
+        }
+      },
+      "size": {
+        "title": {
+          "value": "Size",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the size attribute to change the link list size.",
+          "type": "text"
+        }
+      }
+    },
     "menu-item": {
       "default": {
         "description": {
@@ -1781,7 +1813,7 @@
           "type": "text"
         },
         "description": {
-          "value": "Add descriptive help text to a radio group with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.",
+          "value": "Add descriptive help text to a switch with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.\nThe help-text attribute should not be used to display error messages. To handle validation and error messaging, use syn-validate for proper error management.",
           "type": "text"
         }
       },
@@ -1848,33 +1880,33 @@
     },
     "range": {
       "default": {
-        "description": {
-          "value": "Ranges allow the user to select values within a given range using a thumb.",
-          "type": "text"
-        },
         "title": {
           "value": "Range",
           "type": "text"
+        },
+        "description": {
+          "value": "Ranges allow the user to select values within a given range using a thumb.",
+          "type": "text"
         }
       },
       "labels": {
-        "description": {
-          "value": "Use the label attribute to give the range an accessible label. For labels that contain HTML, use the label slot instead.",
-          "type": "text"
-        },
         "title": {
           "value": "Labels",
           "type": "text"
+        },
+        "description": {
+          "value": "Use the label attribute to give the range an accessible label. For labels that contain HTML, use the label slot instead.",
+          "type": "text"
         }
       },
       "help-text": {
-        "description": {
-          "value": "Add descriptive help text to a range with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.",
-          "type": "text"
-        },
         "title": {
           "value": "Help Text",
           "type": "text"
+        },
+        "description": {
+          "value": "Add descriptive help text to a switch with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.\nThe help-text attribute should not be used to display error messages. To handle validation and error messaging, use syn-validate for proper error management.",
+          "type": "text"
         }
       },
       "focus": {
@@ -1908,23 +1940,23 @@
         }
       },
       "disabled": {
-        "description": {
-          "value": "Use the disabled attribute to disable a range.",
-          "type": "text"
-        },
         "title": {
           "value": "Disabled",
           "type": "text"
+        },
+        "description": {
+          "value": "Use the disabled attribute to disable a range.",
+          "type": "text"
         }
       },
       "prefix-suffix": {
-        "description": {
-          "value": "Add any element to the start and end of range items using the prefix and suffix slots.",
-          "type": "text"
-        },
         "title": {
           "value": "Prefix and Suffix",
           "type": "text"
+        },
+        "description": {
+          "value": "Add any element to the start and end of range items using the prefix and suffix slots.",
+          "type": "text"
         }
       },
       "custom-track-colors": {
@@ -1938,44 +1970,44 @@
         }
       },
       "custom-track-offset": {
-        "description": {
-          "value": "You can customize the initial offset of the active track using the --track-active-offset custom property.",
-          "type": "text"
-        },
         "title": {
           "value": "Custom Track Offset",
           "type": "text"
+        },
+        "description": {
+          "value": "You can customize the initial offset of the active track using the --track-active-offset custom property.",
+          "type": "text"
         }
       },
       "multi-knob": {
-        "description": {
-          "value": "You can add multiple range-thumbs to your range.",
-          "type": "text"
-        },
         "title": {
           "value": "Multi thumb",
           "type": "text"
+        },
+        "description": {
+          "value": "You can add multiple range-thumbs to your range.",
+          "type": "text"
         }
       },
       "multi-knob-restrict-movement": {
-        "description": {
-          "value": "You can prevent the thumbs from overlapping by listening to the provided `syn-move` event.",
-          "type": "text"
-        },
         "title": {
           "value": "Multi thumb with restricted movement",
           "type": "text"
+        },
+        "description": {
+          "value": "You can prevent the thumbs from overlapping by listening to the provided `syn-move` event.",
+          "type": "text"
         }
       },
       "ticks": {
         "default": {
-          "description": {
-            "value": "Use the ticks slot to insert ticks or groups with ticks to improve positioning.",
-            "type": "text"
-          },
           "title": {
             "value": "Ticks",
             "type": "text"
+          },
+          "description": {
+            "value": "Use the ticks slot to insert ticks or groups with ticks to improve positioning.",
+            "type": "text"
           }
         },
         "label": {
@@ -2010,33 +2042,33 @@
         }
       },
       "tooltip-placement": {
-        "description": {
-          "value": "By default, the tooltip is shown on top. Set tooltip-placement to bottom to show it below the range.",
-          "type": "text"
-        },
         "title": {
           "value": "Tooltip Placement",
           "type": "text"
+        },
+        "description": {
+          "value": "By default, the tooltip is shown on top. Set tooltip-placement to bottom to show it below the range.",
+          "type": "text"
         }
       },
       "tooltip-disabled": {
-        "description": {
-          "value": "To disable the tooltip, set tooltip-placement to none.",
-          "type": "text"
-        },
         "title": {
           "value": "Disable the Tooltip",
           "type": "text"
+        },
+        "description": {
+          "value": "To disable the tooltip, set tooltip-placement to none.",
+          "type": "text"
         }
       },
       "tooltip-formatter": {
-        "description": {
-          "value": "You can change the tooltip’s content by setting the tooltipFormatter property to a function that accepts the range’s value as an argument.",
-          "type": "text"
-        },
         "title": {
           "value": "Custom Tooltip Formatter",
           "type": "text"
+        },
+        "description": {
+          "value": "You can change the tooltip’s content by setting the tooltipFormatter property to a function that accepts the range’s value as an argument.",
+          "type": "text"
         }
       }
     },
@@ -2072,13 +2104,13 @@
     },
     "select": {
       "default": {
-        "description": {
-          "value": "Selects allow you to choose items from a menu of predefined options.",
-          "type": "text"
-        },
         "title": {
           "value": "Select",
           "type": "text"
+        },
+        "description": {
+          "value": "Selects allow you to choose items from a menu of predefined options.",
+          "type": "text"
         }
       },
       "labels": {
@@ -2097,7 +2129,7 @@
           "type": "text"
         },
         "description": {
-          "value": "Add descriptive help text to a select with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.",
+          "value": "Add descriptive help text to a switch with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.\nThe help-text attribute should not be used to display error messages. To handle validation and error messaging, use syn-validate for proper error management.",
           "type": "text"
         }
       },
@@ -2213,24 +2245,24 @@
       }
     },
     "skeleton": {
-      "description": {
-        "value": "Skeletons are used to provide a visual representation of where content will eventually be drawn.",
-        "type": "text"
-      },
       "title": {
         "value": "Skeleton",
         "type": "text"
+      },
+      "description": {
+        "value": "Skeletons are used to provide a visual representation of where content will eventually be drawn.",
+        "type": "text"
       }
     },
     "spinner": {
       "default": {
-        "description": {
-          "value": "Spinners are used to show the progress of an indeterminate operation.",
-          "type": "text"
-        },
         "title": {
           "value": "Spinner",
           "type": "text"
+        },
+        "description": {
+          "value": "Spinners are used to show the progress of an indeterminate operation.",
+          "type": "text"
         }
       },
       "size": {
@@ -2265,13 +2297,13 @@
       }
     },
     "split-panel": {
-      "description": {
-        "value": "Split panels display two adjacent panels, allowing the user to reposition them.",
-        "type": "text"
-      },
       "title": {
         "value": "Split Panel",
         "type": "text"
+      },
+      "description": {
+        "value": "Split panels display two adjacent panels, allowing the user to reposition them.",
+        "type": "text"
       }
     },
     "switch": {
@@ -2341,7 +2373,7 @@
           "type": "text"
         },
         "description": {
-          "value": "Add descriptive help text to a switch with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.",
+          "value": "Add descriptive help text to a switch with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.\nThe help-text attribute should not be used to display error messages. To handle validation and error messaging, use syn-validate for proper error management.",
           "type": "text"
         }
       }
@@ -2509,7 +2541,7 @@
           "type": "text"
         },
         "description": {
-          "value": "Add descriptive help text to a textarea with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.",
+          "value": "Add descriptive help text to a switch with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.\nThe help-text attribute should not be used to display error messages. To handle validation and error messaging, use syn-validate for proper error management.",
           "type": "text"
         }
       },
@@ -2687,44 +2719,44 @@
       }
     },
     "tree-item": {
-      "description": {
-        "value": "A tree item serves as a hierarchical node that lives inside a tree.",
-        "type": "text"
-      },
       "title": {
         "value": "Tree Item",
         "type": "text"
+      },
+      "description": {
+        "value": "A tree item serves as a hierarchical node that lives inside a tree.",
+        "type": "text"
       }
     },
     "tree": {
-      "description": {
-        "value": "Trees allow you to display a hierarchical list of selectable tree items. Items with children can be expanded and collapsed as desired by the user.",
-        "type": "text"
-      },
       "title": {
         "value": "Tree",
         "type": "text"
+      },
+      "description": {
+        "value": "Trees allow you to display a hierarchical list of selectable tree items. Items with children can be expanded and collapsed as desired by the user.",
+        "type": "text"
       }
     },
     "visually-hidden": {
-      "description": {
-        "value": "The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.",
-        "type": "text"
-      },
       "title": {
         "value": "Visually Hidden",
         "type": "text"
+      },
+      "description": {
+        "value": "The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.",
+        "type": "text"
       }
     },
     "radio": {
       "default": {
-        "description": {
-          "value": "Radios allow the user to select a single option from a group. \\nRadios are designed to be used with radio groups.",
-          "type": "text"
-        },
         "title": {
           "value": "Radio",
           "type": "text"
+        },
+        "description": {
+          "value": "Radios allow the user to select a single option from a group. \\nRadios are designed to be used with radio groups.",
+          "type": "text"
         }
       },
       "focus": {
@@ -2812,42 +2844,52 @@
     },
     "styles": {
       "body": {
-        "description": {
-          "value": "Body text is used for long-form content where a paragraph or multiple lines of text are required. Body text styles are optimized for reading as a large chunk of information through line height and paragraph spacing. Inline links sit within body text styles and inherit the same font values.\nUI text is text used in UI components and uses the same text stylings.\n\nThe default font size is medium (16 px). Synergy supports three additional font sizes for body copy.\n\nIt is also possible to format the text bold or semibold for certain text passages and UI elements such as label.",
-          "type": "text"
-        },
         "title": {
           "value": "Body and UI text",
           "type": "text"
+        },
+        "description": {
+          "value": "Body text is used for long-form content where a paragraph or multiple lines of text are required. Body text styles are optimized for reading as a large chunk of information through line height and paragraph spacing. Inline links sit within body text styles and inherit the same font values.\nUI text is text used in UI components and uses the same text stylings.\n\nThe default font size is medium (16 px). Synergy supports three additional font sizes for body copy.\n\nIt is also possible to format the text bold or semibold for certain text passages and UI elements such as label.",
+          "type": "text"
         }
       },
       "headings": {
-        "description": {
-          "value": "Heading styles come in a range of sizes, and can be used in a range of contexts, such as:\n- building page hierarchy,\n- helping users scan large chunks of text,\n- providing a title to a page or piece of content,\n-as subheadings or eyebrow headings, where there is still only one H1 tag per page (as per Accessibility requirements).\n\nOur heading styles are consistently bold, to better address the visual hierarchy.",
-          "type": "text"
-        },
         "title": {
           "value": "Headings",
           "type": "text"
+        },
+        "description": {
+          "value": "Heading styles come in a range of sizes, and can be used in a range of contexts, such as:\n- building page hierarchy,\n- helping users scan large chunks of text,\n- providing a title to a page or piece of content,\n-as subheadings or eyebrow headings, where there is still only one H1 tag per page (as per Accessibility requirements).\n\nOur heading styles are consistently bold, to better address the visual hierarchy.",
+          "type": "text"
         }
       },
       "weight": {
-        "description": {
-          "value": "Supported font weights",
-          "type": "text"
-        },
         "title": {
           "value": "Font-Weights",
           "type": "text"
+        },
+        "description": {
+          "value": "Supported font weights",
+          "type": "text"
         }
       },
       "link": {
+        "title": {
+          "value": "Link",
+          "type": "text"
+        },
         "description": {
           "value": "Links can be used to display a link to other pages.",
           "type": "text"
+        }
+      },
+      "link-list": {
+        "description": {
+          "value": "Links can be grouped horizontally or vertically.",
+          "type": "text"
         },
         "title": {
-          "value": "Link",
+          "value": "Link list",
           "type": "text"
         }
       }
@@ -2899,7 +2941,7 @@
           "type": "text"
         },
         "description": {
-          "value": "The footer is the area located at the bottom of the application window, below the content area.\n\nThe footer may contain one or more links pointing to legal information items as well as a copyright symbol and current year. The standard links can include things like:\n- Imprint (e.g. https://www.sick.com/imprint)\n- Terms and conditions (e.g. https://www.sick.com/tac)\n- Terms of use (e.g. https://www.sick.com/terms-of-use)\n- Data protection (e.g. https://www.sick.com/dataprotection)\n\nIf you don't want to use the links in the footer, please make sure to include the legal required links somewhere else.\n\nThe footer links can be placed on any background color. If you need a more compact version of the footer, simply adjust the top and bottom margins from spacing.large (24px) to spacing.medium (16px).",
+          "value": "The footer is the area located at the bottom of the application window, below the content area.\n\nThe footer may contain one or more links pointing to legal information items as well as a copyright symbol and current year. The standard links can include things like:\n- Imprint (e.g. https://www.sick.com/imprint)\n- Terms and conditions (e.g. https://www.sick.com/tac)\n- Terms of use (e.g. https://www.sick.com/terms-of-use)\n- Data protection (e.g. https://www.sick.com/dataprotection)\n\nIf a footer is not required or desired, ensure that all legally required links are placed elsewhere in your application, depending on legal requirements.\n\nFor example, you can: add an info icon (or similar element) to your header and display the necessary information in a dropdown menu. Alternatively, create a dedicated navigation entry to house the required legal links.\n\nThe footer links can be placed on any background color. If you need a more compact version of the footer, adjust the top and bottom margins from spacing.large (24px) to spacing.medium (16px).",
           "type": "text"
         }
       },
@@ -3239,7 +3281,7 @@
           "type": "text"
         },
         "description": {
-          "value": "Add descriptive help text to a combobox with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.",
+          "value": "Add descriptive help text to a switch with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.\nThe help-text attribute should not be used to display error messages. To handle validation and error messaging, use syn-validate for proper error management.",
           "type": "text"
         }
       },
@@ -3373,6 +3415,104 @@
           "type": "text"
         }
       }
+    },
+    "validate": {
+      "default": {
+        "title": {
+          "value": "Validate",
+          "type": "text"
+        },
+        "description": {
+          "value": "Validate offers options for convenient error handling in form elements.",
+          "type": "text"
+        }
+      },
+      "inline": {
+        "title": {
+          "value": "Inline variant",
+          "type": "text"
+        },
+        "description": {
+          "value": "Set the variant attribute to `inline` to show the invalid message below the selected element.",
+          "type": "text"
+        },
+        "note": {
+          "value": "Per default, syn-validate uses the browser’s built-in validation. This shows only one error at a time and is optimized for accessbility.\nWhen using the inline variant, you have to ensure accessibility on your side and have to have in mind it most likely will lead to layout shifts.",
+          "type": "text"
+        }
+      },
+      "hide-icon": {
+        "title": {
+          "value": "Hide Icon",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use hide-icon to hide the icon in inline style. This is especially useful when showing more than one error at a time.",
+          "type": "text"
+        }
+      },
+      "live": {
+        "title": {
+          "value": "Live",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the live value for the on attribute to validate on every input change (e. g. typing a character or checking a checkbox.) instead of form submit. This will automatically bind to the input and blur events.",
+          "type": "text"
+        },
+        "note": {
+          "value": "Please ensure, that you really need live validation for your use case as this can have implications on accessibility.",
+          "type": "text"
+        }
+      },
+      "custom-validation": {
+        "title": {
+          "value": "Custom Validation",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the custom-validation-message attribute to use whichever error you need as text, overriding the default browser errors.",
+          "type": "text"
+        },
+        "note": {
+          "value": "By using the custom-validation-message attribute, you can override the default browser error messages with custom text. However, please note that applying this attribute disables the browser’s native validation functionality. This means the standard error messages will not be displayed until the custom-validation attribute is removed, at which point the native functionality will be restored.",
+          "type": "text"
+        }
+      },
+      "custom-form-field": {
+        "title": {
+          "value": "Custom Form Field",
+          "type": "text"
+        },
+        "description": {
+          "value": "Wrap the element around any other form field, that follows browser standards to use all features.",
+          "type": "text"
+        }
+      },
+      "custom-event-names": {
+        "title": {
+          "value": "Binding To Custom Event Names",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the `on` attribute to listen for one or many custom events. This may be useful if you want to validate on keypress or custom events that may be fired by third party web-components.",
+          "type": "text"
+        },
+        "note": {
+          "value": "You can provide one or multiple events in the `on` property. Please use a whitespace separated list of DOM event names. `<syn-validate>` will make sure to automatically use Synergies custom events. This means `<syn-validate on=\"change click\">` will bind to the `syn-change` and `click` events for a `<syn-input>` __or__ `change` and `click` events for a regular `<input>` element.",
+          "type": "text"
+        }
+      },
+      "eager": {
+        "title": {
+          "value": "Eager validation",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the eager attribute to validate the field when the component is mounted. This may be used to prefill validation messages, e.g. during page loads. Please be aware that when mixed with a `variant` of `native`, this will display the error of the last eager element in your `<form>` only!",
+          "type": "text"
+        }
+      }
     }
   },
   "assets": {