@synergy-design-system/mcp 2.2.0 → 2.3.0

package/metadata/packages/components/components/syn-combobox/component.vue

@@ -6,12 +6,15 @@
 // ---------------------------------------------------------------------
 
 /**
- * @summary Comboboxes allow you to choose items from a menu of predefined options.
+ * @summary A combobox component that combines the functionality of a text input with a dropdown listbox,
+ * allowing users to either select from predefined options or enter custom values (when not restricted).
+ *
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-combobox--docs
  * @status stable
  *
  * @dependency syn-icon
  * @dependency syn-popup
+ * @dependency syn-tag
  *
  * @slot - The listbox options. Must be `<syn-option>` elements.
  *    You can use `<syn-optgroup>`'s to group items visually.
@@ -41,7 +44,7 @@
  * @csspart form-control-label - The label's wrapper.
  * @csspart form-control-input - The combobox's wrapper.
  * @csspart form-control-help-text - The help text's wrapper.
- * @csspart combobox - The container the wraps the prefix, combobox, clear icon, and expand button.
+ * @csspart combobox - The container that wraps the prefix, combobox, clear icon, and expand button.
  * @csspart prefix - The container that wraps the prefix slot.
  * @csspart suffix - The container that wraps the suffix slot.
  * @csspart display-input - The element that displays the selected option's label,
@@ -54,6 +57,12 @@
  * @csspart popup - The popup's exported `popup` part.
  * Use this to target the tooltip's popup container.
  * @csspart no-results - The container that wraps the "no results" message.
+ * @csspart tags - The container that houses option tags when `multiple` is used.
+ * @csspart tag - The individual tags that represent each selected option in `multiple`.
+ * @csspart tag__base - The tag's base part.
+ * @csspart tag__content - The tag's content part.
+ * @csspart tag__remove-button - The tag's remove button.
+ * @csspart tag__remove-button__base - The tag's remove button base part.
  *
  * @animation combobox.show - The animation to use when showing the combobox.
  * @animation combobox.hide - The animation to use when hiding the combobox.
@@ -88,11 +97,6 @@ const props = defineProps<{
    */
   name?: SynCombobox['name'];
 
-  /**
-   * The current value of the combobox, submitted as a name/value pair with form data.
-   */
-  value?: SynCombobox['value'];
-
   /**
    * The combobox's size.
    */
@@ -154,9 +158,16 @@ The form must be in the same document or shadow root for this to work.
   /**
 * When set to `true`, restricts the combobox to only allow selection from the available options.
 Users will not be able to enter custom values that are not present in the list.
+This will always be true, if `multiple` is active.
  */
   restricted?: SynCombobox['restricted'];
 
+  /**
+* Allows more than one option to be selected.
+If `multiple` is set, the combobox will always be `restricted` to the available options
+ */
+  multiple?: SynCombobox['multiple'];
+
   /**
 * A function that customizes the rendered option.
 * The first argument is the option, the second
@@ -173,6 +184,38 @@ The default filter method is a case- and diacritic-insensitive string comparison
  */
   filter?: SynCombobox['filter'];
 
+  /**
+* The delimiter to use when setting the value when `multiple` is enabled.
+The default is a space ' ', but you can set it to a comma or other character(s).
+ */
+  delimiter?: SynCombobox['delimiter'];
+
+  /**
+* The maximum number of selected options to show when `multiple` is true.
+* After the maximum, "+n" will be shown to
+indicate the number of additional items that are selected.
+* Set to 0 to remove the limit.
+ */
+  maxOptionsVisible?: SynCombobox['maxOptionsVisible'];
+
+  /**
+* A function that customizes the tags to be rendered when `multiple` is true.
+* The first argument is the option, the second
+is the current tag's index.
+* The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at
+the specified value.
+ */
+  getTag?: SynCombobox['getTag'];
+
+  /**
+* The current value of the combobox, submitted as a name/value pair with form data.
+* When `multiple` is enabled, the
+value attribute will be a list of values  separated by the delimiter, based on the options selected, and the value property will
+be an array.
+* **For this reason, values must not contain the delimiter character.**
+ */
+  value?: SynCombobox['value'];
+
   /**
    * Support for two way data binding
    */

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

@@ -11,6 +11,7 @@ import styles from './option.styles.js';
 import customStyles from './option.custom.styles.js';
 import { delimiterToWhiteSpace } from './utility.js';
 import type { CSSResultGroup } from 'lit';
+import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
 
 /**
  * @summary Options define the selectable items within various form controls such as [select](/components/select).
@@ -30,6 +31,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart prefix - The container that wraps the prefix.
  * @csspart suffix - The container that wraps the suffix.
  */
+@enableDefaultSettings('SynOption')
 export default class SynOption extends SynergyElement {
   static styles: CSSResultGroup = [componentStyles, styles, customStyles];
   static dependencies = { 'syn-icon': SynIcon };

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/tokens/CHANGELOG.md

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

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/components": "3.1.0",
-    "@synergy-design-system/docs": "0.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.2.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",