@synergy-design-system/tokens 2.9.0 → 2.10.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [@synergy-design-system/tokens-v2.10.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.9.0...tokens/2.10.0) (2024-09-24)
+
+
+### Features
+
+* ✨add syn-combobox ([#542](https://github.com/synergy-design-system/synergy-design-system/issues/542)) ([9be251b](https://github.com/synergy-design-system/synergy-design-system/commit/9be251b327f9ea63fb29c1194d2471d87c195ed4))
+
 # [@synergy-design-system/tokens-v2.9.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.8.0...tokens/2.9.0) (2024-08-26)
 
 

package/README.md

@@ -1,7 +1,7 @@
 # @synergy-design-system/tokens
 
-This package provides the design tokens that form the base for all components of the synergy design system.
-It provides multiple exports for colors, spacings, shadows, sizings, etc. that can be also consumed by applications directly.
+This package provides the design tokens that form the base for all components of the Synergy Design System.
+It provides exports for colors, spacings, shadows, sizings, typography and more that can be also consumed by applications directly.
 
 The source of the tokens can be found at [Figma](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=104-235&mode=design&t=GPu4VVd9yffLLAaS-0)
 

package/dist/js/index.d.ts

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

package/dist/js/index.js

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

package/dist/scss/_tokens.scss

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.8.0
+ * @synergy-design-system/tokens version 2.9.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.8.0
+ * @synergy-design-system/tokens version 2.9.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Mon, 26 Aug 2024 07:06:35 GMT
+ * Generated on Tue, 24 Sep 2024 09:48:08 GMT
  */
 
 :root, .syn-theme-dark {

package/dist/themes/light.css

@@ -1,8 +1,8 @@
 /**
- * @synergy-design-system/tokens version 2.8.0
+ * @synergy-design-system/tokens version 2.9.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Mon, 26 Aug 2024 07:06:35 GMT
+ * Generated on Tue, 24 Sep 2024 09:48:08 GMT
  */
 
 :root, .syn-theme-light {

package/package.json

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

package/src/figma-tokens/_docs.json

@@ -2882,6 +2882,36 @@
           "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 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).",
+          "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"
+        }
       }
     },
     "nav-item": {
@@ -3171,6 +3201,168 @@
           "type": "text"
         }
       }
+    },
+    "combobox": {
+      "default": {
+        "title": {
+          "value": "Combobox",
+          "type": "text"
+        },
+        "description": {
+          "value": "The combobox suggests items based on the user input.",
+          "type": "text"
+        }
+      },
+      "label": {
+        "title": {
+          "value": "Labels",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the label attribute to give the combobox an accessible label. For labels that contain HTML, use the label slot instead.",
+          "type": "text"
+        }
+      },
+      "help-text": {
+        "title": {
+          "value": "Help Text",
+          "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.",
+          "type": "text"
+        }
+      },
+      "placeholder": {
+        "title": {
+          "value": "Placeholder",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the placeholder attribute to add a placeholder.",
+          "type": "text"
+        }
+      },
+      "focus": {
+        "title": {
+          "value": "Focus / Active",
+          "type": "text"
+        },
+        "description": {
+          "value": "The focus attribute provides feedback to the users, informing them that the combobox component is ready for use.",
+          "type": "text"
+        }
+      },
+      "simple": {
+        "title": {
+          "value": "Simple suggests",
+          "type": "text"
+        },
+        "description": {
+          "value": "A simple suggestions list shows the user a filtered list.",
+          "type": "text"
+        }
+      },
+      "highlight": {
+        "title": {
+          "value": "Highlight Query",
+          "type": "text"
+        },
+        "description": {
+          "value": "The filtered options shown in the list can be customized by passing a function to the getOption property. Your function can return a string of HTML, a Lit Template, or an HTMLElement. The getOption() function will be called for each option. The first argument is an <syn-option> element and the second argument is the query string.\n\nRemember that the options are rendered in a shadow root. To style them, you can use the style attribute in your template or you can add your own parts and target them with the ::part() selector.\n\n **Note:** Be sure you trust the content you are outputting! Passing unsanitized user input to getOption() can result in XSS vulnerabilities.",
+          "type": "text"
+        }
+      },
+      "grouping": {
+        "title": {
+          "value": "Grouping Query",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use <syn-optgroup> to group <syn-option>`s visually.",
+          "type": "text"
+        }
+      },
+      "container-height": {
+        "title": {
+          "value": "Suggestion Container Height",
+          "type": "text"
+        },
+        "description": {
+          "value": "The height of the filtered options list can be customized by setting the `max-height` on the `listbox` part of the combobox.",
+          "type": "text"
+        }
+      },
+      "clearable": {
+        "title": {
+          "value": "Clearable",
+          "type": "text"
+        },
+        "description": {
+          "value": "Add the clearable attribute to add a clear button when the combobox has content.",
+          "type": "text"
+        }
+      },
+      "disabled": {
+        "title": {
+          "value": "Disabled",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the disabled attribute to disable a combobox.",
+          "type": "text"
+        }
+      },
+      "size": {
+        "title": {
+          "value": "Sizes",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the size attribute to change a combobox size.",
+          "type": "text"
+        }
+      },
+      "invalid": {
+        "title": {
+          "value": "Invalid",
+          "type": "text"
+        },
+        "description": {
+          "value": "The invalid status is used to warn the user that the combobox is invalid. For example, if the entry is mandatory.",
+          "type": "text"
+        }
+      },
+      "preffix-sufffix": {
+        "title": {
+          "value": "Prefix Suffix Text and Icons",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the prefix and suffix slots to add text and icons.",
+          "type": "text"
+        }
+      },
+      "async-options": {
+        "title": {
+          "value": "Async Options",
+          "type": "text"
+        },
+        "description": {
+          "value": "It is possible to add options dynamically to the combobox e.g. if the option values need to be fetched asynchronously from a remote server or API.",
+          "type": "text"
+        }
+      },
+      "custom-filter": {
+        "title": {
+          "value": "Custom filter",
+          "type": "text"
+        },
+        "description": {
+          "value": "A custom filter can be applied by passing a filter function to the `filter` property. This filter() function will be called for each option. The first argument is an <syn-option> element and the second argument is the query string.",
+          "type": "text"
+        }
+      }
     }
   },
   "assets": {

package/src/figma-tokens/semantic/link.json

@@ -27,4 +27,4 @@
       }
     }
   }
-}
+}