@synergy-design-system/tokens 2.18.0 → 2.19.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@synergy-design-system/tokens-v2.19.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.18.1...tokens/2.19.0) (2025-05-21)
+
+
+### Features
+
+* ✨ Add variant="sticky" to syn-side-nav ([#855](https://github.com/synergy-design-system/synergy-design-system/issues/855)) ([0004497](https://github.com/synergy-design-system/synergy-design-system/commit/0004497ff3c35fab1de65fdd70730f5962ffd748))
+
+# [@synergy-design-system/tokens-v2.18.1](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.18.0...tokens/2.18.1) (2025-03-31)
+
+
+### Bug Fixes
+
+* 🐛  Upgrade packages to latest versions ([#830](https://github.com/synergy-design-system/synergy-design-system/issues/830)) ([f5fe54f](https://github.com/synergy-design-system/synergy-design-system/commit/f5fe54fb55732b1e3efdf3062d55ee517aef4e81))
+
 # [@synergy-design-system/tokens-v2.18.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.17.0...tokens/2.18.0) (2025-02-10)
 
 

package/dist/js/index.d.ts

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

package/dist/js/index.js

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

package/dist/scss/_tokens.scss

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

package/dist/themes/dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.17.0
+ * @synergy-design-system/tokens version 2.18.1
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/dist/themes/light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.17.0
+ * @synergy-design-system/tokens version 2.18.1
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/package.json

@@ -8,18 +8,18 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@tokens-studio/sd-transforms": "^1.2.9",
-    "@types/node": "^20.17.17",
+    "@tokens-studio/sd-transforms": "^1.2.12",
+    "@types/node": "^22.13.14",
     "chalk": "^5.4.1",
     "change-case": "^5.4.4",
     "eslint": "^8.57.1",
-    "eslint-import-resolver-typescript": "^3.7.0",
+    "eslint-import-resolver-typescript": "^4.2.5",
     "rimraf": "^6.0.1",
     "semantic-release": "^19.0.5",
     "semantic-release-monorepo": "7.0.5",
-    "style-dictionary": "^4.3.2",
-    "stylelint": "^16.14.1",
-    "typescript": "^5.7.3",
+    "style-dictionary": "^4.3.3",
+    "stylelint": "^16.17.0",
+    "typescript": "^5.8.2",
     "@synergy-design-system/eslint-config-syn": "0.1.0",
     "@synergy-design-system/stylelint-config-syn": "0.1.0"
   },
@@ -107,7 +107,7 @@
   },
   "type": "module",
   "types": "./dist/js/index.d.ts",
-  "version": "2.18.0",
+  "version": "2.19.0",
   "scripts": {
     "build": "pnpm clean && node scripts/build.js",
     "clean": "rimraf build",

package/src/figma-tokens/$themes.json

@@ -1,7 +1,7 @@
 [
   {
     "id": "30eaeb034a2c0a58ba5a3f529b201a5a4a615948",
-    "name": "Color",
+    "name": "Default",
     "$figmaStyleReferences": {},
     "selectedTokenSets": {
       "color/primitives": "enabled"
@@ -78,7 +78,7 @@
       "black": "bafcb93aa9c2c7d5962ae1f708c5fe9df2a01c63",
       "white": "59831283e335dadc50c9b259071fc562d6c66809"
     },
-    "group": "Primitives"
+    "group": "Brand"
   },
   {
     "id": "eda1d35f1a28a0d1fce620eca524dde48d6b5817",
@@ -311,12 +311,26 @@
       "input.filled.color": "S:16123b7fbffebafa01a5ac91f69f9c96fbb6a291,",
       "input.filled.color-disabled": "S:50d5ea5eca1de474be32aa6343b7643c5cc40049,",
       "input.filled.color-hover": "S:5eefc6417572b45a2142265f8686ce798ac04e80,",
-      "input.filled.color-focus": "S:bc4ba1f6b31a61949d3c4186b243633dba518ae6,"
+      "input.filled.color-focus": "S:bc4ba1f6b31a61949d3c4186b243633dba518ae6,",
+      "body.x-small.regular": "S:66b80a202f6771fe0a0761fcdd072807e3c0f571,",
+      "body.x-small.semibold": "S:9237e8e7b7588a9443c0c8c8622b20587692c0e1,",
+      "body.x-small.bold": "S:4561b26a4ca67ab3a2ccf7debfe8ccd2289fd028,",
+      "body.small.regular": "S:f5737128e28c444c6d3c4a0176a618e72d7a50e9,",
+      "body.small.semibold": "S:e09ff184ea5af497925e1f45a69b84935a21a561,",
+      "body.small.bold": "S:02e95cc4a32b84873ff81cd30dbb9dec68c78979,",
+      "body.medium.regular": "S:ae03ac43fcb2c536d40cca90daf52c7f5a8af308,",
+      "body.medium.semibold": "S:c7dfc3ca9fbd43e588176073337c34840dfd9b63,",
+      "body.medium.bold": "S:84a61543108eb70152e7e3854f611df20ba55173,",
+      "body.large.regular": "S:a0faa1e32eea4aad8fb55e9dded51882d9ab6c68,",
+      "body.large.semibold": "S:8e7e17494157a87fc3e7d718d511be8f46bd2297,",
+      "body.large.bold": "S:b0ab365a8c772ff65cbe85097eab487f102ebf8b,",
+      "heading.large": "S:bccc07ccab234fb971341b16abfc9f83ed011c36,",
+      "heading.x-large": "S:8166eff9b731b9736c35b84a66caed8f79303a5b,",
+      "heading.2x-large": "S:287ae4acd05c234f4d0602e1783b7f6593276000,",
+      "heading.3x-large": "S:3abb1c49155c8ddf0e8210b81b3d23c6fdac3318,"
     },
     "selectedTokenSets": {
-      "globals": "source",
       "semantic/focus-ring": "enabled",
-      "color/primitives": "source",
       "semantic/input": "enabled",
       "semantic/button": "enabled",
       "semantic/toggle": "enabled",
@@ -324,37 +338,16 @@
       "semantic/link": "enabled",
       "semantic/overlays": "enabled",
       "semantic/panels": "enabled",
-      "semantic/tooltip": "enabled"
+      "semantic/tooltip": "enabled",
+      "globals": "source",
+      "color/primitives": "source"
     },
     "$figmaCollectionId": "VariableCollectionId:790:67393",
     "$figmaModeId": "790:0",
     "$figmaVariableReferences": {
-      "tooltip.border.radius": "5c964539e35abe3542052142ad6bd66681cedfeb",
-      "tooltip.background-color": "eff1b08a86ab894b43003a21d6580f1b23206b16",
-      "tooltip.color": "dc2fa83fcad15871159e08e324a7485afb14d762",
-      "tooltip.font-family": "b6ec01c203c616686a6c4e7a940987aa334c7162",
-      "tooltip.font-weight": "7749313ae8f6f54163f07a9a733c9d20549dfeeb",
-      "tooltip.font-size": "82854b02e37ab707b63ae1d86d8373e10f5bda8e",
-      "tooltip.padding": "54f91632e7d8939dcf7b7138462e46885e47da3f",
-      "tooltip.arrow-size": "fd64b50bfc4fb4137153d26a47a4806fec5c84d9",
-      "panel.background.color": "7016be8a3da4f7589565381af1b6b83fed11bffc",
-      "panel.border.color": "1ac88fb0df1b1ceaabe633f9b62646eb0b47f679",
-      "panel.border.width": "c31c8d64df79e7f2db3dc7ef6de6a939c4e37e73",
-      "overlay.background.color": "71c533043f85b14167e19e4c9d83e348894edb61",
-      "link.color": "5e0d352cfd35e039bbd73662cb477a64e129513b",
-      "link.color-hover": "01b7180d9910e8474b035efc07869d3ec053cdec",
-      "link.color-active": "913d33ec8322a23a658502d50aece519887b4dab",
-      "link.low-emphasis.color": "12bed9bc1003a50744d9d5a06477a27697378658",
-      "link.low-emphasis.color-hover": "fecb13d13dbba0e7a4976d7aed01e022afa4b48f",
-      "link.low-emphasis.color-active": "179fadf96ee958351558fe30e268a7218b589726",
-      "typography.color.text": "5ec65d3455f0e99ac3bfab776a47564fd3128a13",
-      "typography.color.text-inverted": "77a4e3e48f6f5b4519eca72c77b2b38d5ac0067d",
-      "toggle.size.small": "59e798ea0cba4be9ea32e894e79cecd7b82cfded",
-      "toggle.size.medium": "c853d6f661e4380daff9745e0e4b39e2b56637f3",
-      "toggle.size.large": "8c9580c2db9de0c2ceb7553e99520d3a5c4a90d3",
-      "button.font-size.small": "e9b4ce0b4c5dc45ccdcff6efbfdf76de6afc8380",
-      "button.font-size.medium": "7ae158fdda63dba25f070476ae6809f173db0e0a",
-      "button.font-size.large": "52795a6ec1aa48e832c73ab0c7533053e887a20b",
+      "focus-ring.color": "4560189da085bbe8e1ce1fa9a615fa9b88869789",
+      "focus-ring.width": "2e54bf95bfc688cc460e9f7606fb9631fd43aecc",
+      "focus-ring.offset": "491c1017f3208a7c19a9ed70a4b1cc50001e01b4",
       "input.color": "bc745cc91841ef07e91b5fb6a8ac1018eb4247bf",
       "input.color-hover": "17492033de110a4bcc43dcb1437516a4ad52df3b",
       "input.color-focus": "8642f42f34c8b021c8802ad57409ae401fbba742",
@@ -413,9 +406,32 @@
       "input.font-size.small": "7380d84d1ea012e2d01d2d2a4e9ca8acb75089ff",
       "input.font-size.medium": "330178493eac96b79d4d1dee6c2ab572cfffe6cc",
       "input.font-size.large": "7601b7676a557b370ce8a1a6e26ad17ce873ccfc",
-      "focus-ring.color": "4560189da085bbe8e1ce1fa9a615fa9b88869789",
-      "focus-ring.width": "2e54bf95bfc688cc460e9f7606fb9631fd43aecc",
-      "focus-ring.offset": "491c1017f3208a7c19a9ed70a4b1cc50001e01b4"
+      "button.font-size.small": "e9b4ce0b4c5dc45ccdcff6efbfdf76de6afc8380",
+      "button.font-size.medium": "7ae158fdda63dba25f070476ae6809f173db0e0a",
+      "button.font-size.large": "52795a6ec1aa48e832c73ab0c7533053e887a20b",
+      "toggle.size.small": "59e798ea0cba4be9ea32e894e79cecd7b82cfded",
+      "toggle.size.medium": "c853d6f661e4380daff9745e0e4b39e2b56637f3",
+      "toggle.size.large": "8c9580c2db9de0c2ceb7553e99520d3a5c4a90d3",
+      "typography.color.text": "5ec65d3455f0e99ac3bfab776a47564fd3128a13",
+      "typography.color.text-inverted": "77a4e3e48f6f5b4519eca72c77b2b38d5ac0067d",
+      "link.color": "5e0d352cfd35e039bbd73662cb477a64e129513b",
+      "link.color-hover": "01b7180d9910e8474b035efc07869d3ec053cdec",
+      "link.color-active": "913d33ec8322a23a658502d50aece519887b4dab",
+      "link.quiet.color": "48a51533acf01d512d5152ea639964c3ca7ad8f9",
+      "link.quiet.color-hover": "fdf27bacf4e392728ba56ade77275cb09cd0b76e",
+      "link.quiet.color-active": "fcde5edc9f5a5de936e53cc714dff54eb20475cc",
+      "overlay.background.color": "71c533043f85b14167e19e4c9d83e348894edb61",
+      "panel.background.color": "7016be8a3da4f7589565381af1b6b83fed11bffc",
+      "panel.border.color": "1ac88fb0df1b1ceaabe633f9b62646eb0b47f679",
+      "panel.border.width": "c31c8d64df79e7f2db3dc7ef6de6a939c4e37e73",
+      "tooltip.border.radius": "5c964539e35abe3542052142ad6bd66681cedfeb",
+      "tooltip.background-color": "eff1b08a86ab894b43003a21d6580f1b23206b16",
+      "tooltip.color": "dc2fa83fcad15871159e08e324a7485afb14d762",
+      "tooltip.font-family": "e07c36d6742d63812e08d60b182f0eccdd1c60cf",
+      "tooltip.font-weight": "870ccf59c02f783bf89969e398fea85e5c2fe358",
+      "tooltip.font-size": "2cb29912db4795eb31ecc12157420dce5a9cc434",
+      "tooltip.padding": "54f91632e7d8939dcf7b7138462e46885e47da3f",
+      "tooltip.arrow-size": "fd64b50bfc4fb4137153d26a47a4806fec5c84d9"
     },
     "group": "Semantic"
   }

package/src/figma-tokens/_docs.json

@@ -2914,88 +2914,6 @@
         }
       }
     },
-    "templates": {
-      "application-shell": {
-        "title": {
-          "value": "Application Shell",
-          "type": "text"
-        },
-        "description": {
-          "value": "Description for application shell",
-          "type": "text"
-        }
-      },
-      "contact-form": {
-        "title": {
-          "value": "Forms",
-          "type": "text"
-        },
-        "description": {
-          "value": "Forms usually contain form components such as checkboxes, selects, input fields, radio buttons, toggle switches and more. \nClear and simple forms help prevent user confusion and incorrect data submission. \n\nForms should be designed in columns as this improves scanability. One-column layout is preferred, but use two or more column layouts when there are too many components to fit in an area of the page.\n\nForms can be simple or complex, and may be presented as dedicated pages, side panels, or dialogs depending on the use case and the situation.",
-          "type": "text"
-        }
-      },
-      "templates": {
-        "title": {
-          "value": "Templates",
-          "type": "text"
-        },
-        "description": {
-          "value": "Contact Form",
-          "type": "text"
-        }
-      },
-      "table": {
-        "title": {
-          "value": "Table",
-          "type": "text"
-        },
-        "description": {
-          "value": "These examples demonstrate the usage of the syn-table-cell component in various contexts. The examples are intended solely for illustrating how syn-table-cell can be used to style tables.",
-          "type": "text"
-        }
-      },
-      "footer": {
-        "title": {
-          "value": "Footer",
-          "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 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"
-        }
-      },
-      "link-list": {
-        "title": {
-          "value": "Link list",
-          "type": "text"
-        },
-        "description": {
-          "value": "These examples demonstrate the usage of syn-link in simple grouping contexts: Horizontal and Vertical alignment.",
-          "type": "text"
-        }
-      },
-      "tag": {
-        "title": {
-          "value": "Tag",
-          "type": "text"
-        },
-        "description": {
-          "value": "These examples demonstrate the usage of syn-tag in various contexts: In combination with multiple filters and within a standalone tag group.",
-          "type": "text"
-        }
-      },
-      "breadcrumb": {
-        "title": {
-          "value": "Breadcrumb",
-          "type": "text"
-        },
-        "description": {
-          "value": "These examples demonstrate the use of syn-breadcrumb in desktop and mobile views. \n\nOn desktop, if there's room, always show the full breadcrumb trail.\n\nIf the viewport has not enough space for all breadcrumb items, it is possible to display a truncated version of the breadcrumb and move the items between Home and the parent page into a dropdown menu. \n\nAlternatively, an even shorter version can display only the name/link of the parent page and the prefix icon with the back arrow to navigate one level up.\n\nFor more information on breadcrumbs, visit Nielsen Norman Group: 
https://www.nngroup.com/articles/breadcrumbs/",
-          "type": "text"
-        }
-      }
-    },
     "nav-item": {
       "default": {
         "title": {
@@ -3187,7 +3105,17 @@
           "type": "text"
         },
         "description": {
-          "value": "Use the rail attribute to only show the prefix of navigation items. This will open on hover on the rail navigation, therefore the header doesn't have an burger-menu-icon.\nOn touch devices the navigation opens on click and shows an overlay to be closable.\n\nNote: The Rail is only an option if all Navigation Items on the first level have an Icon. If this is not the case you should use a burger navigation.",
+          "value": "Set the variant attribute to rail to only show a small navigation stripe at the left side using only the prefix-icons of the navigation items. This will open on hover on the rail navigation, therefore the header doesn't have an burger-menu-icon.\nOn touch devices the navigation opens on click and shows an overlay to be closable.\n\nNote: The Rail is only an option if all Navigation Items on the first level have an Icon. If this is not the case you should use a burger navigation.",
+          "type": "text"
+        }
+      },
+      "sticky": {
+        "title": {
+          "value": "Sticky",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the sticky variant when you need a persistent, toggleable side navigation that alternates between a compact “rail” (icon‐only) state and a full‐width state. \n\nNote: This pattern is only possible for flat navigation structures (no nesting) where every first‐level item has an icon.",
           "type": "text"
         }
       },
@@ -3952,5 +3880,171 @@
         "type": "text"
       }
     }
+  },
+  "templates": {
+    "application-shell": {
+      "default": {
+        "title": {
+          "value": "Application Shell",
+          "type": "text"
+        },
+        "description": {
+          "value": "The App Shell is the basic structure for building applications. \n\nIt provides consistent layout examples that include different combinations of header, navigation, and a flexible content area.",
+          "type": "text"
+        }
+      },
+      "side-navigation": {
+        "title": {
+          "value": "Side Navigation",
+          "type": "text"
+        },
+        "description": {
+          "value": "The side navigation opens when the user clicks on the burger menu. As the side navigation opens, a transparent mask fades in and the navigation overlaps the content area. To close the navigation, the user must either click on the close icon or anywhere on the content area to the right of the side navigation.",
+          "type": "text"
+        }
+      },
+      "side-navigation-shrinking": {
+        "title": {
+          "value": "Side Navigation Shrinking Content",
+          "type": "text"
+        },
+        "description": {
+          "value": "The side navigation opens when the user clicks on the burger menu. As the side navigation opens, the content area shrinks. To close the navigation, the user must click on the close icon.",
+          "type": "text"
+        }
+      },
+      "rail-navigation-desktop": {
+        "title": {
+          "value": "Rail Navigation (Desktop)",
+          "type": "text"
+        },
+        "description": {
+          "value": "The navigation opens when the user hovers over it. As the navigation opens, it overlaps the content area. To close the navigation, the user simply hovers outside of it.",
+          "type": "text"
+        }
+      },
+      "rail-navigation-mobile": {
+        "title": {
+          "value": "Rail Navigation (Mobile)",
+          "type": "text"
+        },
+        "description": {
+          "value": "The navigation opens when the user touches it. As the side navigation opens, a transparent mask fades in and the navigation overlaps the content area. To close the navigation, the user must touch anywhere on the content area to the right of the side navigation.",
+          "type": "text"
+        }
+      },
+      "sticky-navigation-desktop": {
+        "title": {
+          "value": "Sticky Navigation (Desktop)",
+          "type": "text"
+        },
+        "description": {
+          "value": "General Behaviour\n\nThe navigation maintains its compact width until the user clicks the “show sidebar” icon at the bottom. When the navigation expands, it shifts the content area. To reduce the navigation's width, the user simply clicks “Hide sidebar” again.",
+          "type": "text"
+        }
+      },
+      "sticky-navigation-mobile": {
+        "title": {
+          "value": "Sticky Navigation (Mobile)",
+          "type": "text"
+        },
+        "description": {
+          "value": "General Behaviour\n\nThe navigation maintains its compact width until the user clicks the “show sidebar” icon at the bottom. When the navigation expands, it shifts the content area. To reduce the navigation's width, the user simply clicks “Hide sidebar” again.",
+          "type": "text"
+        }
+      },
+      "top-navigation": {
+        "title": {
+          "value": "Top Navigation",
+          "type": "text"
+        },
+        "description": {
+          "value": "The top navigation can be combined with a light grey background.\n\nThis variant is suitable, for example, in combination with cards to achieve a dashboard look and feel.",
+          "type": "text"
+        }
+      },
+      "white-background": {
+        "title": {
+          "value": "White Background",
+          "type": "text"
+        },
+        "description": {
+          "value": "Additionally the top navigation can be combined with a white background.",
+          "type": "text"
+        }
+      }
+    },
+    "contact-form": {
+      "default": {
+        "title": {
+          "value": "Forms",
+          "type": "text"
+        },
+        "description": {
+          "value": "Forms usually contain form components such as checkboxes, selects, input fields, radio buttons, toggle switches and more. \nClear and simple forms help prevent user confusion and incorrect data submission. \n\nForms should be designed in columns as this improves scanability. One-column layout is preferred, but use two or more column layouts when there are too many components to fit in an area of the page.\n\nForms can be simple or complex, and may be presented as dedicated pages, side panels, or dialogs depending on the use case and the situation.",
+          "type": "text"
+        }
+      }
+    },
+    "table": {
+      "default": {
+        "title": {
+          "value": "Table",
+          "type": "text"
+        },
+        "description": {
+          "value": "These examples demonstrate the usage of the syn-table-cell component in various contexts. The examples are intended solely for illustrating how syn-table-cell can be used to style tables.",
+          "type": "text"
+        }
+      }
+    },
+    "footer": {
+      "default": {
+        "title": {
+          "value": "Footer",
+          "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 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"
+        }
+      }
+    },
+    "link-list": {
+      "default": {
+        "title": {
+          "value": "Link list",
+          "type": "text"
+        },
+        "description": {
+          "value": "These examples demonstrate the usage of syn-link in simple grouping contexts: Horizontal and Vertical alignment.",
+          "type": "text"
+        }
+      }
+    },
+    "tag": {
+      "default": {
+        "title": {
+          "value": "Tag",
+          "type": "text"
+        },
+        "description": {
+          "value": "These examples demonstrate the usage of syn-tag in various contexts: In combination with multiple filters and within a standalone tag group.",
+          "type": "text"
+        }
+      }
+    },
+    "breadcrumb": {
+      "default": {
+        "title": {
+          "value": "Breadcrumb",
+          "type": "text"
+        },
+        "description": {
+          "value": "These examples demonstrate the use of syn-breadcrumb in desktop and mobile views. \n\nOn desktop, if there's room, always show the full breadcrumb trail.\n\nIf the viewport has not enough space for all breadcrumb items, it is possible to display a truncated version of the breadcrumb and move the items between Home and the parent page into a dropdown menu. \n\nAlternatively, an even shorter version can display only the name/link of the parent page and the prefix icon with the back arrow to navigate one level up.\n\nFor more information on breadcrumbs, visit Nielsen Norman Group: https://www.nngroup.com/articles/breadcrumbs/",
+          "type": "text"
+        }
+      }
+    }
   }
-}
+}