@synergy-design-system/tokens 1.9.1 → 1.11.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@synergy-design-system/tokens-v1.11.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.10.0...tokens/1.11.0) (2024-04-08)
+
+
+### Features
+
+* ✨ add syn-side-nav, syn-nav-item, syn-prio-nav ([#364](https://github.com/synergy-design-system/synergy-design-system/issues/364)) ([fd9b821](https://github.com/synergy-design-system/synergy-design-system/commit/fd9b82138385f2708003ce18d9c118b7a8fb7925))
+
+# [@synergy-design-system/tokens-v1.10.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.9.1...tokens/1.10.0) (2024-03-28)
+
+
+### Features
+
+* ✨ syn-badge ([#390](https://github.com/synergy-design-system/synergy-design-system/issues/390)) ([a44d683](https://github.com/synergy-design-system/synergy-design-system/commit/a44d683b35e984bfbdac093dba5abd04c74f33c0))
+
 # [@synergy-design-system/tokens-v1.9.1](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.9.0...tokens/1.9.1) (2024-03-26)
 
 

package/dist/js/index.d.ts

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

package/dist/js/index.js

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

package/dist/scss/_tokens.scss

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 1.9.0
+ * @synergy-design-system/tokens version 1.10.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 1.9.0
+ * @synergy-design-system/tokens version 1.10.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Tue, 26 Mar 2024 07:28:20 GMT
+ * Generated on Mon, 08 Apr 2024 14:25:51 GMT
  */
 
 :root, .syn-theme-dark {

package/dist/themes/light.css

@@ -1,8 +1,8 @@
 /**
- * @synergy-design-system/tokens version 1.9.0
+ * @synergy-design-system/tokens version 1.10.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Tue, 26 Mar 2024 07:28:20 GMT
+ * Generated on Mon, 08 Apr 2024 14:25:51 GMT
  */
 
 :root, .syn-theme-light {

package/package.json

@@ -101,7 +101,7 @@
   },
   "type": "module",
   "types": "./dist/js/index.d.ts",
-  "version": "1.9.1",
+  "version": "1.11.0",
   "scripts": {
     "build": "pnpm clean && node scripts/build.js",
     "clean": "rimraf build",

package/src/figma-tokens/_docs.json

@@ -80,6 +80,16 @@
           "value": "When including badges in menu items, use the suffix slot to make sure they’re aligned correctly.",
           "type": "text"
         }
+      },
+      "withEmptyContent": {
+        "title": {
+          "value": "With empty content",
+          "type": "text"
+        },
+        "description": {
+          "value": "Badges can be used without content to just show an status indicator.",
+          "type": "text"
+        }
       }
     },
     "breadcrumb-item": {
@@ -523,7 +533,7 @@
     "dropdown": {
       "default": {
         "description": {
-          "value": "Dropdowns expose additional content that “drops down” in a panel.

Dropdowns consist of a trigger and a panel. By default, activating the trigger will expose the panel and interacting outside of the panel will close it.\n\nDropdowns are designed to work well with menus to provide a list of options the user can select from. However, dropdowns can also be used in lower-level applications (e.g. color picker). The API gives you complete control over showing, hiding, and positioning the panel.",
+          "value": "Dropdowns expose additional content that “drops down” in a panel.

Dropdowns consist of a trigger and a panel. By default, activating the trigger will expose the panel and interacting outside of the panel will close it.\n\nDropdowns are designed to work well with menus to provide a list of options the user can select from. However, dropdowns can also be used in lower-level applications (e.g. color picker). The API gives you complete control over showing, hiding, and positioning the panel.",
           "type": "text"
         },
         "title": {
@@ -616,6 +626,28 @@
         "type": "text"
       }
     },
+    "prio-nav": {
+      "default": {
+        "description": {
+          "value": "Priority navigation is supported as product navigation if required. This navigation layout provides a high level of findability and support so that users know where they are at all times and can ensure that they can easily reach their goals.\n\nNote: Please note that the priority navigation does not have a child menu navigation, if you want to have a child navigation, combine the priority navigation and the side navigation",
+          "type": "text"
+        },
+        "title": {
+          "value": "Priority Navigation",
+          "type": "text"
+        }
+      },
+      "priority-menu": {
+        "description": {
+          "value": "If there is not enough space, elements will move into a dropdown.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Priority Menu",
+          "type": "text"
+        }
+      }
+    },
     "icon-button": {
       "default": {
         "description": {
@@ -955,7 +987,7 @@
           "type": "text"
         },
         "info": {
-          "value": "Menus are intended for system menus (dropdown menus, select menus, context menus, etc.). They should not be mistaken for navigation menus which serve a different purpose and have a different semantic meaning. If you’re building navigation, use <nav> and <a> elements instead.\n(Figma: syn-side-nav or syn-horizontal-nav)",
+          "value": "Menus are intended for system menus (dropdown menus, select menus, context menus, etc.). They should not be mistaken for navigation menus which serve a different purpose and have a different semantic meaning. If you’re building navigation, use <nav> and <a> elements instead.\n(Figma: syn-side-nav or syn-prio-nav)",
           "type": "text"
         },
         "warning": {
@@ -1061,13 +1093,65 @@
       }
     },
     "progress-ring": {
-      "description": {
-        "value": "Progress rings are used to show the progress of a determinate operation in a circular fashion.",
-        "type": "text"
+      "default": {
+        "description": {
+          "value": "Progress rings are used to show the progress of a determinate operation in a circular fashion.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Progress Ring",
+          "type": "text"
+        }
       },
-      "title": {
-        "value": "Progress Ring",
-        "type": "text"
+      "size": {
+        "title": {
+          "value": "Size",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the --size custom property to set the diameter of the progress ring.",
+          "type": "text"
+        }
+      },
+      "track-indicator-width": {
+        "title": {
+          "value": "Track and Indicator Width",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the --track-width and --indicator-width custom properties to set the width of the progress ring’s track and indicator.",
+          "type": "text"
+        }
+      },
+      "color": {
+        "titel": {
+          "value": "Colors",
+          "type": "text"
+        },
+        "description": {
+          "value": "To change the color, use the --track-color and --indicator-color custom properties.",
+          "type": "text"
+        }
+      },
+      "labels": {
+        "title": {
+          "value": "Labels",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the label attribute to label the progress ring and tell assistive devices how to announce it.",
+          "type": "text"
+        }
+      },
+      "show-values": {
+        "title": {
+          "value": "Showing Values",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the default slot to show a label inside the progress ring.",
+          "type": "text"
+        }
       }
     },
     "qr-code": {
@@ -1365,13 +1449,45 @@
       }
     },
     "spinner": {
-      "description": {
-        "value": "Spinners are used to show the progress of an indeterminate operation.",
-        "type": "text"
+      "default": {
+        "description": {
+          "value": "Spinners are used to show the progress of an indeterminate operation.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Spinner",
+          "type": "text"
+        }
       },
-      "title": {
-        "value": "Spinner",
-        "type": "text"
+      "size": {
+        "title": {
+          "value": "Size",
+          "type": "text"
+        },
+        "description": {
+          "value": "Spinners are sized based on the current font size. To change their size, set the font-size property on the spinner itself or on a parent element as shown below.",
+          "type": "text"
+        }
+      },
+      "track-width": {
+        "title": {
+          "value": "Track Width",
+          "type": "text"
+        },
+        "description": {
+          "value": "The width of the spinner’s track can be changed by setting the --track-width custom property.",
+          "type": "text"
+        }
+      },
+      "color": {
+        "title": {
+          "value": "Color",
+          "type": "text"
+        },
+        "description": {
+          "value": "The spinner’s colors can be changed by setting the --indicator-color and --track-color custom properties.",
+          "type": "text"
+        }
       }
     },
     "split-panel": {
@@ -1865,7 +1981,7 @@
           "type": "text"
         },
         "description": {
-          "value": "Use the label attribute to change the content of a navigtion item.",
+          "value": "Use the label attribute to change the content of a navigation item.",
           "type": "text"
         }
       },
@@ -1875,7 +1991,7 @@
           "type": "text"
         },
         "description": {
-          "value": "Use the prefix and suffix slots to add. If available the prefix slot will be shown in the rail navigation.",
+          "value": "The current attribute provides the user feedback about which of the navigation elements is currently selected.",
           "type": "text"
         }
       },
@@ -1885,7 +2001,7 @@
           "type": "text"
         },
         "description": {
-          "value": "Use the prefix and suffix slots to add. If available the prefix slot will be shown in the rail navigation.",
+          "value": "The focus event gives the user feedback that the Navigation Item has been focused by the keyboard interaction or active click from the user.",
           "type": "text"
         }
       },
@@ -1915,7 +2031,7 @@
           "type": "text"
         },
         "description": {
-          "value": "Use the *children attribute to indicate that show a chevron. In development this will be handled automatically as soon as an element has children.:",
+          "value": "Use the *children attribute to indicate that a chevron should be shown. In development this will be handled automatically as soon as an element has children.\n\nNote:\nSince there should be no double use of functionality, a link cannot be mixed with an accordion behavior. The accordion always has priority, which means that if the href attribute is used at the same time as children, the link functionality is ignored and only the accordion behavior is provided.",
           "type": "text"
         }
       },
@@ -2010,6 +2126,16 @@
           "value": "Use the top navigation slot to add syn-navigation and horizontal syn-navigation-items.",
           "type": "text"
         }
+      },
+      "burger-menu": {
+        "title": {
+          "value": "Burger Menu",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the Burger Menu as trigger to open and close the Navigation. In the open state, the icon changes to a cancel icon. This will be hidden, if you use a rail navigation.",
+          "type": "text"
+        }
       }
     },
     "side-nav": {
@@ -2029,7 +2155,7 @@
           "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.\nOn touch devices the navigation opens on click and shows an overlay.\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": "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.",
           "type": "text"
         }
       },
@@ -2447,4 +2573,4 @@
       }
     }
   }
-}
+}