@synergy-design-system/mcp 2.1.0 → 2.3.0

package/metadata/packages/components/components/syn-tab/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

package/metadata/packages/components/components/syn-tab/component.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { classMap } from 'lit/directives/class-map.js';
 import { html } from 'lit';

package/metadata/packages/components/components/syn-tab-group/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

package/metadata/packages/components/components/syn-tab-group/component.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import '../../internal/scrollend-polyfill.js';
 import { classMap } from 'lit/directives/class-map.js';

package/metadata/packages/components/components/syn-tab-panel/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

package/metadata/packages/components/components/syn-tab-panel/component.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { classMap } from 'lit/directives/class-map.js';
 import { html } from 'lit';

package/metadata/packages/components/components/syn-tag/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

package/metadata/packages/components/components/syn-tag/component.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { classMap } from 'lit/directives/class-map.js';
 import { html } from 'lit';

package/metadata/packages/components/components/syn-textarea/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

package/metadata/packages/components/components/syn-textarea/component.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { classMap } from 'lit/directives/class-map.js';
 import { defaultValue } from '../../internal/default-value.js';

package/metadata/packages/components/components/syn-tooltip/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

package/metadata/packages/components/components/syn-tooltip/component.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { animateTo, parseDuration, stopAnimations } from '../../internal/animate.js';
 import { classMap } from 'lit/directives/class-map.js';

package/metadata/packages/components/static/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## 3.2.0
+
+### Minor Changes
+
+- [#1164](https://github.com/synergy-design-system/synergy-design-system/pull/1164) [`c9fb440`](https://github.com/synergy-design-system/synergy-design-system/commit/c9fb4405c0a1eb3499e4753447ac643ae632ff56) Thanks [@kirchsuSICKAG](https://github.com/kirchsuSICKAG)! - Released on: 2026-02-05
+
+  feat: ✨ syn-combobox multiple (#627)
+
+  Adds multiple selection functionality to the `syn-combobox` component, enabling users to select multiple options simultaneously.
+
+  **Properties Added:**
+  - `multiple`: Enables multiple selection mode
+  - `delimiter`: Customizable value separator (default: ` ` (space))
+  - `max-options-visible`: Controls visible tag limit with overflow handling
+  - `getTag`: Custom tag rendering function
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @synergy-design-system/tokens@3.2.0
+
 ## 3.1.0
 
 ### Minor Changes

package/metadata/packages/components/static/LIMITATIONS.md

@@ -4,6 +4,64 @@ This file lists known issues and limitations of Synergy Web Components and usefu
 
 ---
 
+<h2 id="syn-option-spaces">Console errors when using spaces in `<syn-option>` values</h2>
+
+<h3 id="syn-option-spaces-meta">Meta Information</h3>
+
+- Framework version: ALL
+- Synergy version: ALL
+- Issues: [#1087](https://github.com/synergy-design-system/synergy-design-system/issues/1087)
+
+<h3 id="syn-option-spaces-description">Description</h3>
+
+When using `<syn-option>` components with values that contain spaces inside `<syn-select>` or `<syn-combobox>` components, you may see console errors like:
+
+> Option values cannot include " ". All occurrences of " " have been replaced with "\_".
+
+<h3 id="syn-option-spaces-cause">Cause</h3>
+
+When using the `multiple` attribute, Synergy components create a space-separated list of selected values (e.g., `"Option_One Option_Two"`). If option values themselves contain spaces, the component cannot properly distinguish between individual values in this list. To prevent data corruption, spaces in option values are automatically replaced with underscores (`_`).
+
+<h3 id="syn-option-spaces-solution">Proposed Solution</h3>
+
+<h4 id="syn-option-spaces-problem">Problem</h4>
+
+```html
+<syn-select multiple>
+  <syn-option value="Option One">Option One</syn-option>
+  <syn-option value="Option Two">Option Two</syn-option>
+</syn-select>
+```
+
+<h4 id="syn-option-spaces-solution-1">Solution 1: Use space-free values (Recommended)</h4>
+
+Design your option values without spaces and use the display text separately:
+
+```html
+<syn-select multiple>
+  <syn-option value="option-one">Option One</syn-option>
+  <syn-option value="option-two">Option Two</syn-option>
+</syn-select>
+```
+
+<h4 id="syn-option-spaces-solution-2">Solution 2: Change the global delimiter</h4>
+
+If you need to keep spaces in values and don't mind changing how all select and combobox components work globally, you can configure a different delimiter:
+
+```js
+import { setGlobalDefaultSettings } from "@synergy-design-system/components";
+
+setGlobalDefaultSettings({
+  delimiter: {
+    SynOption: ",",
+    SynSelect: ",",
+    SynCombobox: ",",
+  },
+});
+```
+
+**Note:** This affects **all** select and combobox components in your application, which do not explicitly set the `delimiter` attribute.
+
 <h2 id="syn-input-number-width">`<syn-input type="number">` is too large when no `width` is set</h2>
 
 <h3 id="syn-input-number-width-meta">Meta Information</h3>

package/metadata/packages/components/static/README.md

@@ -229,64 +229,3 @@ This package ships with a [custom-elements-manifest](https://github.com/webcompo
 Please have a look at the official [breaking changes list](https://synergy-design-system.github.io/?path=/docs/packages-components-breaking-changes--docs) for information how to update to new major versions of Synergy.
 
 ---
-
-## Local setup
-
-### Using the vendor cli
-
-The vendor cli is taking care about updating our code base according to a new version of shoelace.
-
-To change the shoelace version, that should be downloaded, change the version in the config of `./scripts/vendorism.js`.
-To download it use the command `pnpm vendor.get`.
-If code in our components library should be updated to this new shoelace version use `pnpm vendor.set`.
-
-All shoelace files are per default readonly and are disabled from being changed. To change this files can be ejected. This can be done via:
-`pnpm vendor.eject "src/declaration.d.ts"`.
-
-### Adding events to the output
-
-To add events to the component output, make sure to add them to `src/scripts/vendorism.js` into the `events` array that is defined there. After a new build run `via pnpm build`, you will see the new event files and the `events/events.ts` file will be regenerated.
-
-### Adding metadata to components
-
-Components can be enriched with metadata that automatically generates JSDoc annotations during the build process. The `add-metadata-to-components.js` script processes `*.component.ts` files and looks for corresponding `metadata.json` files to inject JSDoc tags.
-
-#### Supported metadata types
-
-- `@animation` - Component animations
-- `@event` - Custom events
-- `@slot` - Content slots
-- `@dependency` - Dependencies
-- `@csspart` - CSS parts for styling
-- `@cssproperty` - CSS custom properties
-
-#### Usage
-
-Create a `metadata.json` file in your component directory:
-
-```json
-{
-  "@event": [
-    { "name": "syn-change", "description": "Emitted when value changes" }
-  ],
-  "@slot": [{ "name": "default", "description": "Main content" }],
-  "@csspart": [{ "name": "base", "description": "Base wrapper" }]
-}
-```
-
-This will generate the following JSDoc annotations in your component:
-
-```typescript
-/**
- * @summary Your component description
- *
- * @event syn-change - Emitted when value changes
- * @slot default - Main content
- * @csspart base - Base wrapper
- */
-export default class YourComponent extends SynergyElement {
-  // Component implementation...
-}
-```
-
-Each metadata object requires a `name` property and optionally accepts a `description`. Run `pnpm vendor.set` to process the metadata and automatically add JSDoc annotations to your component's class comment.

package/metadata/packages/tokens/CHANGELOG.md

@@ -1,5 +1,7 @@
 # Changelog
 
+## 3.2.0
+
 ## 3.1.0
 
 ### Minor Changes

package/metadata/packages/tokens/dark.css

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

package/metadata/packages/tokens/index.js

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

package/metadata/packages/tokens/light.css

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

package/metadata/packages/tokens/sick2018_dark.css

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

package/metadata/packages/tokens/sick2018_light.css

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

package/metadata/packages/tokens/sick2025_dark.css

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

package/metadata/packages/tokens/sick2025_light.css

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

package/metadata/static/components/syn-combobox/docs.md

@@ -3,7 +3,7 @@
 The combobox suggests items based on the user input.
 
 ```html
-<syn-combobox size="medium" placement="bottom" form="">
+<syn-combobox max-options-visible="3" size="medium" placement="bottom" form="">
   <syn-option
     role="option"
     aria-selected="false"
@@ -441,6 +441,140 @@ Use the disabled attribute to disable a combobox.
 
 ---
 
+## Multiple
+
+To allow multiple options to be selected, use the multiple attribute. It’s a good practice to use clearable when this option is enabled. To set multiple values at once, set value to a space-delimited list of values. Use the max-options-visible attribute to define the maximum number of selected options that will be visible. After the maximum, "+n" will be shown to indicate the number of additional items that are selected.
+
+```html
+<syn-combobox
+  value="option-1 option-2 option-3"
+  multiple=""
+  clearable=""
+  max-options-visible="2"
+  size="medium"
+  placement="bottom"
+  form=""
+>
+  <syn-option
+    value="option-1"
+    role="option"
+    aria-selected="false"
+    aria-disabled="false"
+    id="syn-combobox-option-0"
+    >Option 1</syn-option
+  >
+  <syn-option
+    value="option-2"
+    role="option"
+    aria-selected="false"
+    aria-disabled="false"
+    id="syn-combobox-option-1"
+    >Option 2</syn-option
+  >
+  <syn-option
+    value="option-3"
+    role="option"
+    aria-selected="false"
+    aria-disabled="false"
+    id="syn-combobox-option-2"
+    >Option 3</syn-option
+  >
+  <syn-option
+    value="option-4"
+    role="option"
+    aria-selected="false"
+    aria-disabled="false"
+    id="syn-combobox-option-3"
+    >Option 4</syn-option
+  >
+  <syn-option
+    value="option-5"
+    role="option"
+    aria-selected="false"
+    aria-disabled="false"
+    id="syn-combobox-option-4"
+    >Option 5</syn-option
+  >
+  <syn-option
+    value="option-6"
+    role="option"
+    aria-selected="false"
+    aria-disabled="false"
+    id="syn-combobox-option-5"
+    >Option 6</syn-option
+  >
+</syn-combobox>
+```
+
+---
+
+## Setting Initial Value
+
+Use the value attribute to set the initial selection.When using multiple, the value attribute uses space-delimited values to select more than one option. Because of this, <syn-option> values cannot contain spaces. If you’re accessing the value property through Javascript, it will be an array.
+
+```html
+<syn-combobox
+  value="option-1 option-2 option-3"
+  multiple=""
+  clearable=""
+  max-options-visible="2"
+  size="medium"
+  placement="bottom"
+  form=""
+>
+  <syn-option
+    value="option-1"
+    role="option"
+    aria-selected="false"
+    aria-disabled="false"
+    id="syn-combobox-option-0"
+    >Option 1</syn-option
+  >
+  <syn-option
+    value="option-2"
+    role="option"
+    aria-selected="false"
+    aria-disabled="false"
+    id="syn-combobox-option-1"
+    >Option 2</syn-option
+  >
+  <syn-option
+    value="option-3"
+    role="option"
+    aria-selected="false"
+    aria-disabled="false"
+    id="syn-combobox-option-2"
+    >Option 3</syn-option
+  >
+  <syn-option
+    value="option-4"
+    role="option"
+    aria-selected="false"
+    aria-disabled="false"
+    id="syn-combobox-option-3"
+    >Option 4</syn-option
+  >
+  <syn-option
+    value="option-5"
+    role="option"
+    aria-selected="false"
+    aria-disabled="false"
+    id="syn-combobox-option-4"
+    >Option 5</syn-option
+  >
+  <syn-option
+    value="option-6"
+    role="option"
+    aria-selected="false"
+    aria-disabled="false"
+    id="syn-combobox-option-5"
+    >Option 6</syn-option
+  >
+</syn-combobox>
+```
+
+---
+
 ## Restricted
 
 This restricts the combobox to only allow selections from the available options. Users cannot enter custom values that are not in the list.

package/package.json

@@ -28,12 +28,12 @@
     "serve-handler": "^6.1.6",
     "ts-jest": "^29.4.6",
     "typescript": "^5.9.3",
-    "@synergy-design-system/docs": "0.1.0",
-    "@synergy-design-system/eslint-config-syn": "^0.1.0",
-    "@synergy-design-system/components": "3.1.0",
+    "@synergy-design-system/components": "3.2.0",
     "@synergy-design-system/fonts": "1.0.2",
+    "@synergy-design-system/eslint-config-syn": "^0.1.0",
     "@synergy-design-system/styles": "2.0.0",
-    "@synergy-design-system/tokens": "^3.1.0"
+    "@synergy-design-system/docs": "0.1.0",
+    "@synergy-design-system/tokens": "^3.2.0"
   },
   "exports": {
     ".": {
@@ -67,7 +67,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "scripts": {
     "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
     "build:all": "pnpm run build && pnpm run build:storybook",