@synergy-design-system/tokens 2.9.0 → 2.11.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@synergy-design-system/tokens-v2.11.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.10.0...tokens/2.11.0) (2024-09-27)
+
+
+### Features
+
+* ✨ add support for folder dnd in syn-file ([#616](https://github.com/synergy-design-system/synergy-design-system/issues/616)) ([114893b](https://github.com/synergy-design-system/synergy-design-system/commit/114893b7422ae86acd5893fc3f212054ce7e297e))
+
+# [@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.10.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.10.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.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 2.8.0
+ * @synergy-design-system/tokens version 2.10.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Mon, 26 Aug 2024 07:06:35 GMT
+ * Generated on Fri, 27 Sep 2024 12:12:34 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.10.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Mon, 26 Aug 2024 07:06:35 GMT
+ * Generated on Fri, 27 Sep 2024 12:12:34 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.11.0",
   "scripts": {
     "build": "pnpm clean && node scripts/build.js",
     "clean": "rimraf build",

package/src/figma-tokens/_docs.json

@@ -997,7 +997,7 @@
           "type": "text"
         },
         "description": {
-          "value": "Use the multiple attribute to allow the selection of multiple files.\n\nFigma only: Override the button/droparea and value text directly, to indicate that multiple files are uploaded (“file” -> “files”)",
+          "value": "Use the multiple attribute to allow the selection of multiple files.\n\nFigma only: Override the button/droparea and value text directly, to indicate that multiple files are selected (“file” -> “files”)",
           "type": "text"
         }
       },
@@ -1027,7 +1027,7 @@
           "type": "text"
         },
         "description": {
-          "value": "Use the size attribute to change a file uploads size.",
+          "value": "Use the size attribute to change the component's size.",
           "type": "text"
         }
       },
@@ -1060,6 +1060,16 @@
           "value": "The invalid status is used to warn the user that the syn-file is invalid. For example, if the entry of text is mandatory and nothing has been entered or if a text has been entered that does not have the correct format.",
           "type": "text"
         }
+      },
+      "directory": {
+        "title": {
+          "value": "Directory",
+          "type": "text"
+        },
+        "description": {
+          "value": "The webkitdirectory setting allows users to select entire directories instead of individual files. When a directory is chosen, all files inside (including those in sub-directories) are selected. Although this feature is not part of the official HTML specification, it is widely supported across major browsers.",
+          "type": "text"
+        }
       }
     },
     "format-bytes": {
@@ -2882,6 +2892,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 +3211,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": {
@@ -3581,4 +3783,4 @@
       }
     }
   }
-}
+}

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

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