@synergy-design-system/components 3.1.0 → 3.2.1

package/dist/chunks/{chunk.6GWSQWLE.js → chunk.NY33MDYP.js}

@@ -1,12 +1,19 @@
+import {
+  SynTag
+} from "./chunk.SRY32QYH.js";
+import {
+  compareValues,
+  isAllowedValue
+} from "./chunk.VECCQZP5.js";
 import {
   SynOption
-} from "./chunk.4M4LRUZD.js";
+} from "./chunk.2PW7XZZF.js";
 import {
   SynPopup
-} from "./chunk.P3W7SDQW.js";
+} from "./chunk.T3OH2LR6.js";
 import {
   defaultOptionRenderer
-} from "./chunk.IAS6MLT6.js";
+} from "./chunk.KLL2SVR7.js";
 import {
   checkValueBelongsToOption,
   createOptionFromDifferentTypes,
@@ -14,59 +21,57 @@ import {
   getAllOptions,
   getAssignedElementsForSlot,
   getValueFromOption,
+  getValuesFromOptions,
   normalizeString
-} from "./chunk.BWTMFHNM.js";
+} from "./chunk.FVIRHFY6.js";
 import {
   scrollIntoView
-} from "./chunk.5732DMBC.js";
-import {
-  defaultValue
-} from "./chunk.3NXKLKWH.js";
+} from "./chunk.2DT3C6WE.js";
 import {
   form_control_custom_styles_default,
   form_control_styles_default
-} from "./chunk.G4URZQCL.js";
+} from "./chunk.PTRCO527.js";
 import {
   combobox_custom_styles_default
-} from "./chunk.BIJTSOZF.js";
+} from "./chunk.2IL4PA6Q.js";
 import {
   combobox_styles_default
-} from "./chunk.FD2CG2HT.js";
+} from "./chunk.6AT5JL7A.js";
 import {
   FormControlController
-} from "./chunk.U5757NSE.js";
+} from "./chunk.J3GDDM6Q.js";
 import {
   waitForEvent
-} from "./chunk.C2ENQBPM.js";
+} from "./chunk.LQDIH4Z5.js";
 import {
   animateTo,
   stopAnimations
-} from "./chunk.6EKUFYET.js";
+} from "./chunk.Q6HZ4JXR.js";
 import {
   getAnimation,
   setDefaultAnimation
-} from "./chunk.ADSEQZBF.js";
+} from "./chunk.RJUVM6NO.js";
 import {
   HasSlotController
-} from "./chunk.WVVQK5TE.js";
+} from "./chunk.CHFWLQN5.js";
 import {
   SynIcon
-} from "./chunk.Q6XDV7O7.js";
+} from "./chunk.7XSJ52RM.js";
 import {
   LocalizeController
-} from "./chunk.OAQRCZOO.js";
+} from "./chunk.QLETXF4A.js";
 import {
   enableDefaultSettings
-} from "./chunk.MLILJGXQ.js";
+} from "./chunk.YACUYJZN.js";
 import {
   watch
-} from "./chunk.JE5Y2YD7.js";
+} from "./chunk.SMIMHADA.js";
 import {
   component_styles_default
-} from "./chunk.NLYVOJGK.js";
+} from "./chunk.FXJLG622.js";
 import {
   SynergyElement
-} from "./chunk.FBQ7NUNW.js";
+} from "./chunk.VWFRCPN5.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -75,6 +80,7 @@ import {
 import { classMap } from "lit/directives/class-map.js";
 import { html } from "lit";
 import { property, query, state } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 var SynCombobox = class extends SynergyElement {
   constructor() {
     super(...arguments);
@@ -83,15 +89,27 @@ var SynCombobox = class extends SynergyElement {
     });
     this.hasSlotController = new HasSlotController(this, "help-text", "label");
     this.localize = new LocalizeController(this);
-    this.isOptionRendererTriggered = false;
+    /**
+     * Cache of the last syn-options that were selected by user interaction (click or keyboard navigation).
+     * Used to track user selections and maintain selection state during value changes.
+     */
+    this.lastOptions = [];
     this.isInitialized = false;
+    /**
+     * Flag to prevent infinite loops when the option renderer programmatically updates options.
+     * Set to true during option rendering to ignore slot change events triggered by our own updates.
+     */
+    this.isOptionRendererTriggered = false;
     this.hasFocus = false;
     this.isUserInput = false;
     this.displayLabel = "";
+    this.selectedOptions = [];
     this.numberFilteredOptions = 0;
     this.cachedOptions = [];
+    this.valueHasChanged = false;
+    this.hideOptions = false;
     this.name = "";
-    this.value = "";
+    this._value = "";
     this.defaultValue = "";
     this.size = "medium";
     this.placeholder = "";
@@ -104,8 +122,10 @@ var SynCombobox = class extends SynergyElement {
     this.form = "";
     this.required = false;
     this.restricted = false;
+    this.multiple = false;
     this.getOption = defaultOptionRenderer;
     this.filter = (option, queryStr) => {
+      var _a;
       let content = (option == null ? void 0 : option.textContent) || "";
       if (option instanceof SynOption) {
         content = option.getTextLabel();
@@ -115,7 +135,33 @@ var SynCombobox = class extends SynergyElement {
       if (normalizedOption.includes(normalizedQuery)) {
         return true;
       }
-      return (option == null ? void 0 : option.value) === queryStr;
+      return ((_a = option == null ? void 0 : option.value) == null ? void 0 : _a.toString()) === queryStr;
+    };
+    this.delimiter = " ";
+    this.maxOptionsVisible = 3;
+    this.getTag = (option) => html`
+    <syn-tag
+      part="tag"
+      exportparts="
+            base:tag__base,
+            content:tag__content,
+            remove-button:tag__remove-button,
+            remove-button__base:tag__remove-button__base
+          "
+      size=${this.size}
+      removable
+      @syn-remove=${(event) => this.handleTagRemove(event, option)}
+    >
+      ${option.getTextLabel()}
+    </syn-tag>
+  `;
+    this.calculateTagMaxWidth = (entries) => {
+      const input = entries.at(0);
+      if (!input || !this.tagContainer) return;
+      const inputWidth = input.contentRect.width;
+      const tagsWidth = this.tagContainer.getBoundingClientRect().width;
+      const availableTagSpace = Math.max(85, tagsWidth + inputWidth - 48);
+      this.tagContainer.style.setProperty("--syn-select-tag-max-width", `${availableTagSpace}px`);
     };
     this.handleDocumentFocusIn = (event) => {
       const path = event.composedPath();
@@ -138,7 +184,11 @@ var SynCombobox = class extends SynergyElement {
           this.hide();
           this.displayInput.focus({ preventScroll: true });
         } else if (!this.open) {
-          this.clearCombobox();
+          if (this.multiple) {
+            this.clearInputField();
+          } else {
+            this.clearCombobox();
+          }
         }
       }
       if (event.key === "Enter") {
@@ -156,17 +206,29 @@ var SynCombobox = class extends SynergyElement {
           return;
         }
         if (currentOption) {
-          const oldValue = this.lastOption ? getValueFromOption(this.lastOption) : void 0;
-          this.updateSelectedOptionsCacheAndValue(currentOption);
-          if (this.value !== oldValue) {
-            this.setSelectedOptionToSelected();
+          this.isUserInput = true;
+          this.valueHasChanged = true;
+          const oldValue = this.lastOptions ? getValuesFromOptions(this.lastOptions) : [];
+          if (this.multiple) {
+            this.toggleOptionSelection(currentOption);
+          } else {
+            this.setSelectedOptions(currentOption);
+          }
+          this.selectionChanged();
+          const value = Array.isArray(this.value) ? this.value : [this.value];
+          this.updateComplete.then(() => {
+            this.isUserInput = false;
+          });
+          if (!compareValues(oldValue, value)) {
             this.updateComplete.then(() => {
               this.emit("syn-input");
               this.emit("syn-change");
             });
           }
         }
-        this.hide();
+        if (!this.multiple) {
+          this.hide();
+        }
         this.displayInput.focus({ preventScroll: true });
         return;
       }
@@ -185,8 +247,8 @@ var SynCombobox = class extends SynergyElement {
           this.displayInput.setSelectionRange(0, 0);
         } else if (event.key === "End") {
           this.displayInput.setSelectionRange(
-            this.displayInput.value.length,
-            this.displayInput.value.length
+            this.displayLabel.length,
+            this.displayLabel.length
           );
         }
       }
@@ -199,6 +261,23 @@ var SynCombobox = class extends SynergyElement {
       }
     };
   }
+  get value() {
+    return this._value;
+  }
+  set value(val) {
+    if (this.multiple) {
+      if (!Array.isArray(val)) {
+        val = typeof val === "string" ? val.split(this.delimiter) : [val].filter(isAllowedValue);
+      }
+    } else {
+      val = Array.isArray(val) ? val.join(this.delimiter) : val;
+    }
+    if (compareValues(this._value, val)) {
+      return;
+    }
+    this.valueHasChanged = true;
+    this._value = val;
+  }
   /** Gets the validity state object */
   get validity() {
     return this.valueInput.validity;
@@ -207,24 +286,109 @@ var SynCombobox = class extends SynergyElement {
   get validationMessage() {
     return this.valueInput.validationMessage;
   }
+  enableResizeObserver() {
+    if (!this.multiple) return;
+    if (!this.resizeObserver) {
+      this.resizeObserver = new ResizeObserver(this.calculateTagMaxWidth);
+    }
+    this.resizeObserver.observe(this.displayInput);
+  }
   connectedCallback() {
     super.connectedCallback();
+    this.mutationObserver = new MutationObserver((entries) => {
+      const hasRelevantValueChange = entries.some((entry) => {
+        if (!(entry.target instanceof SynOption)) {
+          return false;
+        }
+        if (entry.type !== "attributes" || entry.attributeName !== "value") {
+          return false;
+        }
+        const currentValue = entry.target.getAttribute("value");
+        return entry.oldValue !== currentValue && !!currentValue;
+      });
+      if (hasRelevantValueChange) {
+        this.handleSlotContentChange();
+      }
+    });
+    this.mutationObserver.observe(this, {
+      attributeFilter: ["value"],
+      attributeOldValue: true,
+      attributes: true,
+      childList: true,
+      subtree: true
+    });
+    setTimeout(() => {
+      this.handleSlotContentChange();
+    });
     this.open = false;
   }
+  disconnectedCallback() {
+    var _a, _b;
+    super.disconnectedCallback();
+    (_a = this.resizeObserver) == null ? void 0 : _a.disconnect();
+    (_b = this.mutationObserver) == null ? void 0 : _b.disconnect();
+    this.removeOpenListeners();
+  }
   firstUpdated() {
     this.isInitialized = true;
     this.formControlController.updateValidity();
   }
+  updated(changedProperties) {
+    var _a;
+    super.updated(changedProperties);
+    if (changedProperties.has("multiple")) {
+      if (!this.multiple) {
+        (_a = this.resizeObserver) == null ? void 0 : _a.disconnect();
+      } else {
+        this.enableResizeObserver();
+      }
+    }
+  }
+  // eslint-disable-next-line complexity
   willUpdate(changedProperties) {
     super.willUpdate(changedProperties);
-    if (!this.isInitialized && !this.defaultValue && this.value) {
-      this.defaultValue = this.value;
+    const isDefaultValueEmpty = this.defaultValue == null || this.defaultValue === "" || Array.isArray(this.defaultValue) && this.defaultValue.length === 0;
+    if (changedProperties.has("value") && isDefaultValueEmpty && this.value && !this.isUserInput) {
+      if (this.multiple && Array.isArray(this.value)) {
+        this.defaultValue = this.value.join(this.delimiter);
+      } else {
+        this.defaultValue = this.value;
+      }
+      this.valueHasChanged = false;
     }
+    if (!this.isInitialized && changedProperties.has("value") && this.value !== void 0 && changedProperties.has("multiple") && this.multiple) {
+      if (!Array.isArray(this.defaultValue)) {
+        const cachedValueHasChanged = this.valueHasChanged;
+        this.value = typeof this.defaultValue === "string" ? this.defaultValue.split(this.delimiter) : [this.defaultValue].filter(isAllowedValue);
+        this.valueHasChanged = cachedValueHasChanged;
+      }
+    }
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    super.attributeChangedCallback(name, oldVal, newVal);
+    if (name === "value") {
+      const cachedValueHasChanged = this.valueHasChanged;
+      this.value = this.defaultValue;
+      this.valueHasChanged = cachedValueHasChanged;
+    }
+  }
+  get tags() {
+    return this.selectedOptions.map((option, index) => {
+      if (index < this.maxOptionsVisible || this.maxOptionsVisible <= 0) {
+        const tag = this.getTag(option, index);
+        return html`<div @syn-remove=${(e) => this.handleTagRemove(e, option)}>
+          ${typeof tag === "string" ? unsafeHTML(tag) : tag}
+        </div>`;
+      }
+      if (index === this.maxOptionsVisible) {
+        return html`<syn-tag size=${this.size}>+${this.selectedOptions.length - index}</syn-tag>`;
+      }
+      return html``;
+    });
   }
   addOpenListeners() {
     var _a;
     document.addEventListener("focusin", this.handleDocumentFocusIn);
-    document.addEventListener("keydown", this.handleDocumentKeyDown);
     document.addEventListener("mousedown", this.handleDocumentMouseDown);
     if (this.getRootNode() !== document) {
       this.getRootNode().addEventListener("focusin", this.handleDocumentFocusIn);
@@ -243,7 +407,6 @@ var SynCombobox = class extends SynergyElement {
   removeOpenListeners() {
     var _a;
     document.removeEventListener("focusin", this.handleDocumentFocusIn);
-    document.removeEventListener("keydown", this.handleDocumentKeyDown);
     document.removeEventListener("mousedown", this.handleDocumentMouseDown);
     if (this.getRootNode() !== document) {
       this.getRootNode().removeEventListener("focusin", this.handleDocumentFocusIn);
@@ -261,8 +424,22 @@ var SynCombobox = class extends SynergyElement {
   handleLabelClick() {
     this.displayInput.focus();
   }
+  handleTagRemove(event, option) {
+    event.stopPropagation();
+    this.valueHasChanged = true;
+    if (!this.disabled) {
+      this.toggleOptionSelection(option, false);
+      this.selectionChanged();
+      this.updateComplete.then(() => {
+        this.emit("syn-input");
+        this.emit("syn-change");
+      });
+    }
+  }
   handleComboboxMouseDown(event) {
-    if (this.disabled) {
+    const path = event.composedPath();
+    const isIconButton = path.some((el) => el instanceof Element && el.tagName.toLowerCase() === "syn-icon-button");
+    if (this.disabled || isIconButton) {
       return;
     }
     const toggleListboxOpen = () => this.open ? this.hide() : this.show();
@@ -281,14 +458,26 @@ var SynCombobox = class extends SynergyElement {
     event.stopPropagation();
     this.clearCombobox();
   }
+  clearInputField() {
+    if (this.displayLabel !== "") {
+      const cachedValueHasChanged = this.valueHasChanged;
+      this.value = getValuesFromOptions(this.selectedOptions);
+      this.valueHasChanged = cachedValueHasChanged;
+      this.displayInput.focus({ preventScroll: true });
+      this.updateComplete.then(() => {
+        this.emit("syn-input");
+      });
+    }
+  }
   clearCombobox() {
+    this.valueHasChanged = true;
     if (this.value !== "") {
       this.value = "";
-      this.displayInput.value = "";
-      this.lastOption = void 0;
-      this.updateSelectedOptionsCacheAndValue(void 0);
+      this.displayLabel = "";
+      this.lastOptions = [];
+      this.setSelectedOptions([]);
+      this.selectionChanged();
       this.displayInput.focus({ preventScroll: true });
-      this.setSelectedOptionToSelected();
       this.updateComplete.then(() => {
         this.emit("syn-clear");
         this.emit("syn-input");
@@ -305,19 +494,31 @@ var SynCombobox = class extends SynergyElement {
   handleOptionClick(event) {
     const target = event.target;
     const option = target.closest("syn-option");
-    const oldValue = this.lastOption ? getValueFromOption(this.lastOption) : void 0;
+    const oldValue = this.lastOptions ? getValuesFromOptions(this.lastOptions) : [];
     if (option && !option.disabled) {
-      this.updateSelectedOptionsCacheAndValue(option);
-      this.updateComplete.then(() => this.displayInput.focus({ preventScroll: true }));
-      if (this.value !== oldValue) {
-        this.setSelectedOptionToSelected();
+      this.isUserInput = true;
+      this.valueHasChanged = true;
+      if (this.multiple) {
+        this.toggleOptionSelection(option);
+      } else {
+        this.setSelectedOptions(option);
+      }
+      this.selectionChanged();
+      this.updateComplete.then(() => {
+        this.displayInput.focus({ preventScroll: true });
+        this.isUserInput = false;
+      });
+      const value = Array.isArray(this.value) ? this.value : [this.value];
+      if (!compareValues(oldValue, value)) {
         this.updateComplete.then(() => {
           this.emit("syn-input");
           this.emit("syn-change");
         });
       }
-      this.hide();
-      this.displayInput.focus({ preventScroll: true });
+      if (!this.multiple) {
+        this.hide();
+        this.displayInput.focus({ preventScroll: true });
+      }
     }
   }
   /* eslint-enable @typescript-eslint/no-floating-promises */
@@ -345,6 +546,37 @@ var SynCombobox = class extends SynergyElement {
     this.setCurrentOption(filteredOptions[newIndex]);
     scrollIntoView(this.getCurrentOption(), this.listbox, "vertical", "auto");
   }
+  // Toggles an option's selected state
+  // eslint-disable-next-line class-methods-use-this
+  toggleOptionSelection(option, force) {
+    if (force === true || force === false) {
+      option.selected = force;
+    } else {
+      option.selected = !option.selected;
+    }
+    const cachedOption = this.cachedOptions.find((opt) => opt.id === option.id);
+    if (cachedOption) {
+      cachedOption.selected = option.selected;
+    }
+  }
+  // Sets the selected option(s)
+  setSelectedOptions(option) {
+    const newSelectedOptions = Array.isArray(option) ? option : [option];
+    if (!this.multiple && newSelectedOptions.length > 1) {
+      newSelectedOptions.splice(1);
+    }
+    const slottedOptions = this.getSlottedOptions();
+    slottedOptions.forEach((opt) => {
+      opt.selected = newSelectedOptions.some(
+        (selectedOpt) => selectedOpt.id === opt.id
+      );
+    });
+    this.cachedOptions.forEach((opt) => {
+      opt.selected = newSelectedOptions.some(
+        (selectedOpt) => selectedOpt.id === opt.id
+      );
+    });
+  }
   getAllFilteredOptions() {
     return this.getSlottedOptions().filter((option) => !option.hidden);
   }
@@ -367,41 +599,67 @@ var SynCombobox = class extends SynergyElement {
     }
   }
   /**
-   * Updates the selected options cache, the current value, and the display value
+   * Updates the component state after selection changes.
+   *
+   * This method synchronizes:
+   * 1. The selectedOptions cache with currently selected options
+   * 2. The component's value property (string or array)
+   * 3. The display label shown in the input
+   * 4. Form validation state
+   *
+   * **Validation Logic:**
+   * - In restricted mode, invalid values trigger a reset to last valid state
+   * - Multiple mode requires all values to correspond to existing options
+   * - Single mode allows free text input when not restricted
    */
   // eslint-disable-next-line complexity
-  updateSelectedOptionsCacheAndValue(option) {
-    this.selectedOption = option;
+  selectionChanged() {
+    const options = this.getSlottedOptions();
+    this.selectedOptions = options.filter((opt) => opt.selected);
+    if (this.selectedOptions.length === 0) {
+      this.displayLabel = Array.isArray(this.value) ? this.value.join(", ") : String(this.value);
+    }
     let optionValue;
-    if (option) {
-      this.lastOption = option;
-      optionValue = String(getValueFromOption(option));
-    } else if (this.restricted && !this.isValidValue() && this.value !== "" && !this.isUserInput) {
-      this.resetToLastValidValue();
-      return;
+    const cachedValueHasChanged = this.valueHasChanged;
+    if (this.multiple) {
+      this.value = this.selectedOptions.map((opt) => getValueFromOption(opt));
+      if (this.value.length === 0 && this.selectedOptions.length !== 0) {
+        this.valueHasChanged = cachedValueHasChanged;
+        this.resetToLastValidValue();
+        return;
+      }
+    } else {
+      if (this.selectedOptions.length !== 0) {
+        optionValue = getValueFromOption(this.selectedOptions[0]);
+      } else if (this.restricted && !this.isValidValue(this.displayLabel) && this.displayLabel !== "" && !this.isUserInput) {
+        this.resetToLastValidValue();
+        this.valueHasChanged = cachedValueHasChanged;
+        return;
+      }
+      this.value = optionValue != null ? optionValue : this.displayLabel;
     }
-    this.value = optionValue != null ? optionValue : this.displayInput.value;
+    this.valueHasChanged = cachedValueHasChanged;
+    this.lastOptions = [...this.selectedOptions];
     this.updateComplete.then(() => {
       var _a, _b;
-      this.displayLabel = (_b = (_a = this.selectedOption) == null ? void 0 : _a.getTextLabel()) != null ? _b : this.displayInput.value;
+      this.displayLabel = this.multiple ? "" : (_b = (_a = this.selectedOptions[0]) == null ? void 0 : _a.getTextLabel()) != null ? _b : this.displayLabel;
       this.formControlController.updateValidity();
     });
   }
-  setSelectedOptionToSelected() {
-    const slottedOptions = this.getSlottedOptions();
-    slottedOptions.forEach((opt) => {
-      opt.selected = false;
-    });
-    if (this.selectedOption) {
-      this.selectedOption.selected = true;
-    }
-  }
   handleInvalid(event) {
     this.formControlController.setValidity(false);
     this.formControlController.emitInvalidEvent(event);
   }
   handlePropertiesChange() {
-    this.createComboboxOptionsFromQuery(this.value);
+    this.createComboboxOptionsFromQuery(this.displayLabel);
+    if (this.open) {
+      this.updateComplete.then(() => {
+        this.open = this.multiple || this.restricted || this.numberFilteredOptions > 0;
+      });
+    }
+  }
+  handleDisplayInputValueChange() {
+    this.createComboboxOptionsFromQuery(this.displayLabel);
   }
   handleDisabledChange() {
     this.formControlController.setValidity(this.disabled);
@@ -410,13 +668,22 @@ var SynCombobox = class extends SynergyElement {
       this.handleOpenChange();
     }
   }
+  handleDelimiterChange() {
+    this.getSlottedOptions().forEach((option) => {
+      option.delimiter = this.delimiter;
+    });
+  }
   handleValueChange() {
+    if (!this.valueHasChanged) {
+      const cachedValueHasChanged = this.valueHasChanged;
+      this.value = this.defaultValue;
+      this.valueHasChanged = cachedValueHasChanged;
+    }
     this.updateSelectedOptionFromValue();
-    this.setCurrentOption(null);
   }
   async handleOpenChange() {
     if (this.open && !this.disabled) {
-      if (this.numberFilteredOptions === 0 && !this.restricted) {
+      if (this.numberFilteredOptions === 0 && !this.restricted && !this.multiple) {
         this.open = false;
         this.emit("syn-error");
         return;
@@ -491,6 +758,21 @@ var SynCombobox = class extends SynergyElement {
   blur() {
     this.displayInput.blur();
   }
+  /**
+   * Updates the visibility and rendering of options based on the current query string.
+   *
+   * This method performs several critical tasks:
+   * 1. **Option Filtering**: Uses the `filter` function to determine which options should be visible
+   * 2. **Custom Rendering**: Applies the `getOption` function to customize option appearance
+   * 3. **Optgroup Management**: Shows/hides optgroups based on their visible children
+   * 4. **Counts visible options**: Tracks the number of visible options for UI logic
+   *
+   * **Performance Considerations:**
+   * - Uses cached options to avoid repeated DOM queries
+   * - Prevents infinite loops during option updates with `isOptionRendererTriggered`
+   *
+   * @param queryString - The current user input to filter and highlight options with
+   */
   /* eslint-disable no-param-reassign, @typescript-eslint/no-floating-promises */
   createComboboxOptionsFromQuery(queryString) {
     var _a;
@@ -522,37 +804,57 @@ var SynCombobox = class extends SynergyElement {
     (_a = visibleOptgroups[0]) == null ? void 0 : _a.style.setProperty("--display-divider", "none");
     setTimeout(() => {
       this.isOptionRendererTriggered = false;
-    }, 0);
+    });
   }
   /* eslint-enable no-param-reassign, @typescript-eslint/no-floating-promises */
+  // eslint-disable-next-line complexity
   async handleInput() {
     const inputValue = this.displayInput.value;
-    const cachedLastOption = this.lastOption;
+    this.displayLabel = inputValue;
+    const cachedLastOption = this.lastOptions;
     this.isUserInput = true;
-    this.value = inputValue;
+    if (!this.multiple) {
+      this.selectedOptions = [];
+    }
+    if (this.multiple) {
+      const validValues = getValuesFromOptions(this.selectedOptions);
+      this.value = [...validValues, inputValue];
+    } else {
+      this.value = inputValue;
+    }
     await this.updateComplete;
     this.isUserInput = false;
-    this.lastOption = cachedLastOption;
-    this.open = this.restricted || this.numberFilteredOptions > 0;
-    this.selectedOption = void 0;
+    this.lastOptions = cachedLastOption;
+    this.open = this.multiple || this.restricted || this.numberFilteredOptions > 0;
     this.formControlController.updateValidity();
     this.emit("syn-input");
   }
   /**
-   * Checks if the current value is available in the options list.
+   * Checks if the value is available in the options list.
    * This is used to determine if the value is valid when the combobox is restricted.
-   *
+   * @param value - The value to check for validity.
    * @returns `true` if the current value is available in the options list,
    * otherwise `false`.
    */
-  isValidValue() {
+  isValidValue(value) {
     const isValid = this.cachedOptions.some(
-      (option) => getValueFromOption(option) === this.value
+      (option) => checkValueBelongsToOption(value, option)
     );
     return isValid;
   }
-  getOptionFromValue() {
-    return this.cachedOptions.find((option) => checkValueBelongsToOption(this.value, option));
+  getOptionsFromValue() {
+    const value = this.valueHasChanged ? this.value : this.defaultValue;
+    let convertedValue;
+    if (Array.isArray(value)) {
+      convertedValue = value;
+    } else if (value === void 0 || value == null) {
+      convertedValue = [];
+    } else if (this.multiple && typeof value === "string") {
+      convertedValue = value.split(this.delimiter);
+    } else {
+      convertedValue = [value];
+    }
+    return convertedValue.map((val) => this.cachedOptions.find((option) => checkValueBelongsToOption(val, option))).filter((opt) => opt !== void 0);
   }
   /**
    * Resets the value to the last valid value or to an empty string.
@@ -560,10 +862,12 @@ var SynCombobox = class extends SynergyElement {
   resetToLastValidValue() {
     var _a, _b, _c, _d;
     let label = "";
-    let value = "";
-    if (this.lastOption) {
-      value = String(getValueFromOption(this.lastOption));
-      label = this.lastOption.getTextLabel();
+    let value = [];
+    if (this.lastOptions.length !== 0) {
+      value = getValuesFromOptions(this.lastOptions);
+      if (!this.multiple) {
+        label = this.lastOptions[0].getTextLabel();
+      }
     }
     const popupAnimations = (_d = (_c = (_b = (_a = this.popup) == null ? void 0 : _a.popup) == null ? void 0 : _b.getAnimations) == null ? void 0 : _c.call(_b)) != null ? _d : [];
     const waitForAnimations = popupAnimations.length ? Promise.all(
@@ -571,30 +875,54 @@ var SynCombobox = class extends SynergyElement {
         animation.addEventListener("finish", () => resolve(), { once: true });
       }))
     ) : Promise.resolve();
+    this.hideOptions = true;
     waitForAnimations.then(() => {
-      this.value = value;
-      this.displayInput.value = label;
-      this.formControlController.updateValidity();
+      this.hideOptions = false;
     });
+    const cachedValueHasChanged = this.valueHasChanged;
+    this.value = value;
+    this.displayLabel = label;
+    this.formControlController.updateValidity();
+    this.valueHasChanged = cachedValueHasChanged;
   }
+  // eslint-disable-next-line complexity
   handleChange() {
-    if (this.selectedOption) {
+    const isSameSelection = this.selectedOptions.length !== 0 && this.selectedOptions.length === this.getOptionsFromValue().length;
+    let values;
+    if (Array.isArray(this.value)) {
+      values = this.value;
+    } else if (typeof this.value === "string") {
+      values = this.value.split(this.delimiter);
+    } else {
+      values = [this.value];
+    }
+    const allValuesValid = values.every((val) => this.isValidValue(val));
+    const isMultipleAndUserInput = this.multiple && isSameSelection && allValuesValid;
+    const isNonMultipleAndUserInput = !this.multiple && this.selectedOptions.length > 0;
+    if (isNonMultipleAndUserInput || isMultipleAndUserInput) {
       return;
     }
-    if (this.restricted && !this.isValidValue() && this.value !== "") {
+    const oldValue = this.lastOptions ? getValuesFromOptions(this.lastOptions) : [];
+    if ((this.restricted || this.multiple) && !this.isValidValue(this.displayLabel) && this.displayLabel !== "") {
       this.resetToLastValidValue();
       return;
     }
-    this.value = this.displayInput.value;
-    this.lastOption = this.getOptionFromValue();
-    this.selectedOption = this.getOptionFromValue();
+    const options = this.getOptionsFromValue();
+    this.setSelectedOptions(options);
+    this.selectionChanged();
+    this.lastOptions = [...options];
     this.updateComplete.then(() => {
       this.formControlController.updateValidity();
     });
-    this.setSelectedOptionToSelected();
-    this.emit("syn-change");
+    const value = Array.isArray(this.value) ? this.value : [this.value];
+    if (!compareValues(oldValue, value)) {
+      this.emit("syn-change");
+    }
   }
   getSlottedOptions() {
+    if (!this.defaultSlot) {
+      return [];
+    }
     return getAllOptions(getAssignedElementsForSlot(this.defaultSlot)).flat();
   }
   getSlottedOptGroups() {
@@ -614,41 +942,86 @@ var SynCombobox = class extends SynergyElement {
   }
   /* eslint-enable no-param-reassign */
   updateSelectedOptionFromValue() {
-    const option = this.getOptionFromValue();
-    if (!option) {
-      this.displayInput.value = this.value;
+    if (!this.isUserInput) {
+      const options = this.getOptionsFromValue();
+      this.setSelectedOptions(options);
+      this.selectionChanged();
+    }
+    let queryString = "";
+    if (this.multiple) {
+      queryString = this.displayLabel;
+    } else {
+      queryString = Array.isArray(this.value) ? this.value.join(", ") : String(this.value);
     }
-    this.updateSelectedOptionsCacheAndValue(option);
-    this.createComboboxOptionsFromQuery(this.value);
+    this.createComboboxOptionsFromQuery(queryString);
   }
-  /* eslint-disable @typescript-eslint/no-floating-promises, complexity */
-  /* @internal - used by options to update labels */
+  /**
+   * Synchronizes the internal component state with changes to slotted options.
+   *
+   * This method is automatically triggered by:
+   * - MutationObserver when option 'value' attributes change
+   * - Initial component setup during connectedCallback (after timeout)
+   * - Default slot changes (via handleDefaultSlotChange)
+   * - Custom element registration completion for syn-option (deferred execution)
+   *
+   * The synchronization process:
+   * 1. Waits for syn-option custom elements to be registered before processing
+   * 2. Updates delimiter settings on all slotted options
+   * 3. Refreshes the internal cache of options and optgroups
+   * 4. Synchronizes selected options based on current component value
+   * 5. Auto-opens listbox if component has focus, has value, and is currently closed
+   *
+   * This ensures the component's internal state stays consistent with the slotted
+   * DOM content after options are added, removed, or their values change.
+   *
+   */
+  /* eslint-disable @typescript-eslint/no-floating-promises */
+  handleSlotContentChange() {
+    if (!customElements.get("syn-option")) {
+      customElements.whenDefined("syn-option").then(() => this.handleSlotContentChange());
+      return;
+    }
+    this.handleDelimiterChange();
+    this.cacheSlottedOptionsAndOptgroups();
+    this.updateSelectedOptionFromValue();
+    let hasValue;
+    if (Array.isArray(this.value)) {
+      hasValue = this.value.length > 0;
+    } else if (typeof this.value === "string") {
+      hasValue = this.value.length > 0;
+    } else {
+      hasValue = this.value !== void 0 && this.value !== null;
+    }
+    if (this.hasFocus && hasValue && !this.open) {
+      this.show();
+    }
+  }
+  /* eslint-enable @typescript-eslint/no-floating-promises */
   handleDefaultSlotChange() {
-    const slottedOptions = this.getSlottedOptions();
-    const optionsLength = slottedOptions.length;
-    const cachedOptionsLength = this.cachedOptions.length;
-    if (!this.isOptionRendererTriggered || cachedOptionsLength !== optionsLength) {
-      if (!customElements.get("syn-option")) {
-        customElements.whenDefined("syn-option").then(() => this.handleDefaultSlotChange());
-        return;
-      }
-      this.cacheSlottedOptionsAndOptgroups();
-      this.updateSelectedOptionFromValue();
-      if (this.hasFocus && this.value.length > 0 && !this.open) {
-        this.show();
-      }
+    if (this.isOptionRendererTriggered) {
+      return;
     }
+    this.handleSlotContentChange();
   }
-  /* eslint-enable @typescript-eslint/no-floating-promises, complexity */
   /* eslint-disable @typescript-eslint/unbound-method */
   // eslint-disable-next-line complexity
   render() {
+    var _a;
     const hasLabelSlot = this.hasSlotController.test("label");
     const hasHelpTextSlot = this.hasSlotController.test("help-text");
     const hasLabel = this.label ? true : !!hasLabelSlot;
     const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
-    const hasClearIcon = this.clearable && !this.disabled && this.value.length > 0;
-    const isPlaceholderVisible = this.placeholder && this.value.length === 0;
+    let hasValue;
+    if (Array.isArray(this.value)) {
+      hasValue = this.value.length > 0;
+    } else if (typeof this.value === "string") {
+      hasValue = this.value.length > 0;
+    } else {
+      hasValue = this.value !== void 0 && this.value !== null && typeof this.value === "number";
+    }
+    const hasClearIcon = this.clearable && !this.disabled && hasValue;
+    const isPlaceholderVisible = this.placeholder && !hasValue;
+    const tagsVisible = this.multiple && this.selectedOptions.length > 0;
     return html`
       <div
         part="form-control"
@@ -680,10 +1053,12 @@ var SynCombobox = class extends SynergyElement {
       "combobox--focused": this.hasFocus,
       "combobox--large": this.size === "large",
       "combobox--medium": this.size === "medium",
+      "combobox--multiple": this.multiple,
       "combobox--open": this.open,
       "combobox--placeholder-visible": isPlaceholderVisible,
       "combobox--small": this.size === "small",
       "combobox--standard": true,
+      "combobox--tags-visible": tagsVisible,
       "combobox--top": this.placement === "top"
     })}
             placement=${`${this.placement}-start`}
@@ -703,6 +1078,8 @@ var SynCombobox = class extends SynergyElement {
             >
               <slot part="prefix" name="prefix" class="combobox__prefix"></slot>
 
+              ${this.multiple ? html`<div part="tags" class="combobox__tags">${this.tags}</div>` : ""}
+
               <input
                 part="display-input"
                 class="combobox__display-input"
@@ -735,7 +1112,7 @@ var SynCombobox = class extends SynergyElement {
                 type="text"
                 ?disabled=${this.disabled}
                 ?required=${this.required}
-                .value=${this.value}
+                .value=${Array.isArray(this.value) ? this.value.join(", ") : (_a = this.value) == null ? void 0 : _a.toString()}
                 tabindex="-1"
                 aria-hidden="true"
                 @focus=${() => this.focus()}
@@ -770,6 +1147,7 @@ var SynCombobox = class extends SynergyElement {
               role="listbox"
               aria-expanded=${this.open ? "true" : "false"}
               aria-labelledby="label"
+              aria-multiselectable=${this.multiple ? "true" : "false"}
               part="listbox"
               class="combobox__listbox"
               tabindex="-1"
@@ -777,13 +1155,13 @@ var SynCombobox = class extends SynergyElement {
               @mouseup=${this.handleOptionClick}
             >
               <div class="listbox__options" part="filtered-listbox">
-                ${this.numberFilteredOptions === 0 ? html`<span
+                ${this.hideOptions || this.numberFilteredOptions === 0 ? html`<span
                       class="listbox__no-results"
                       aria-hidden="true"
                       part="no-results"
                       >${this.localize.term("noResults")}</span
                     >` : ""}
-                <slot @slotchange=${this.handleDefaultSlotChange}></slot>      
+                <slot class=${classMap({ options__hide: this.hideOptions })} @slotchange=${this.handleDefaultSlotChange}></slot>      
               </div>
             </div>
           </syn-popup>
@@ -811,7 +1189,8 @@ SynCombobox.styles = [
 ];
 SynCombobox.dependencies = {
   "syn-icon": SynIcon,
-  "syn-popup": SynPopup
+  "syn-popup": SynPopup,
+  "syn-tag": SynTag
 };
 __decorateClass([
   query(".combobox")
@@ -831,6 +1210,9 @@ __decorateClass([
 __decorateClass([
   query("slot:not([name])")
 ], SynCombobox.prototype, "defaultSlot", 2);
+__decorateClass([
+  query(".combobox__tags")
+], SynCombobox.prototype, "tagContainer", 2);
 __decorateClass([
   state()
 ], SynCombobox.prototype, "hasFocus", 2);
@@ -842,21 +1224,27 @@ __decorateClass([
 ], SynCombobox.prototype, "displayLabel", 2);
 __decorateClass([
   state()
-], SynCombobox.prototype, "selectedOption", 2);
+], SynCombobox.prototype, "selectedOptions", 2);
 __decorateClass([
   state()
 ], SynCombobox.prototype, "numberFilteredOptions", 2);
 __decorateClass([
   state()
 ], SynCombobox.prototype, "cachedOptions", 2);
+__decorateClass([
+  state()
+], SynCombobox.prototype, "valueHasChanged", 2);
+__decorateClass([
+  state()
+], SynCombobox.prototype, "hideOptions", 2);
 __decorateClass([
   property()
 ], SynCombobox.prototype, "name", 2);
 __decorateClass([
-  property()
-], SynCombobox.prototype, "value", 2);
+  state()
+], SynCombobox.prototype, "value", 1);
 __decorateClass([
-  defaultValue()
+  property({ attribute: "value" })
 ], SynCombobox.prototype, "defaultValue", 2);
 __decorateClass([
   property({ reflect: true })
@@ -891,20 +1279,38 @@ __decorateClass([
 __decorateClass([
   property({ reflect: true, type: Boolean })
 ], SynCombobox.prototype, "restricted", 2);
+__decorateClass([
+  property({ reflect: true, type: Boolean })
+], SynCombobox.prototype, "multiple", 2);
 __decorateClass([
   property()
 ], SynCombobox.prototype, "getOption", 2);
 __decorateClass([
   property()
 ], SynCombobox.prototype, "filter", 2);
+__decorateClass([
+  property()
+], SynCombobox.prototype, "delimiter", 2);
+__decorateClass([
+  property({ attribute: "max-options-visible", type: Number })
+], SynCombobox.prototype, "maxOptionsVisible", 2);
+__decorateClass([
+  property()
+], SynCombobox.prototype, "getTag", 2);
 __decorateClass([
   watch(["filter", "getOption"], { waitUntilFirstUpdate: true })
 ], SynCombobox.prototype, "handlePropertiesChange", 1);
+__decorateClass([
+  watch("displayLabel", { waitUntilFirstUpdate: true })
+], SynCombobox.prototype, "handleDisplayInputValueChange", 1);
 __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SynCombobox.prototype, "handleDisabledChange", 1);
 __decorateClass([
-  watch("value", { waitUntilFirstUpdate: true })
+  watch("delimiter")
+], SynCombobox.prototype, "handleDelimiterChange", 1);
+__decorateClass([
+  watch(["defaultValue", "value", "delimiter", "multiple", "restricted"], { waitUntilFirstUpdate: true })
 ], SynCombobox.prototype, "handleValueChange", 1);
 __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
@@ -930,4 +1336,4 @@ setDefaultAnimation("combobox.hide", {
 export {
   SynCombobox
 };
-//# sourceMappingURL=chunk.6GWSQWLE.js.map
+//# sourceMappingURL=chunk.NY33MDYP.js.map