@synergy-design-system/components 2.15.1 → 2.15.2

package/dist/chunks/{chunk.L4VLQVR6.js → chunk.NU2F6SN4.js}

@@ -1,9 +1,9 @@
 import {
   optgroup_styles_default
-} from "./chunk.IFW77IB7.js";
+} from "./chunk.FIDKOOLR.js";
 import {
   SynDivider
-} from "./chunk.ZH4SWUQK.js";
+} from "./chunk.Z56HB5T7.js";
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
@@ -12,7 +12,7 @@ import {
 } from "./chunk.74IOULXM.js";
 import {
   SynergyElement
-} from "./chunk.GJP3MWP2.js";
+} from "./chunk.BOFHYW24.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -93,4 +93,4 @@ __decorateClass([
 export {
   SynOptgroup
 };
-//# sourceMappingURL=chunk.L4VLQVR6.js.map
+//# sourceMappingURL=chunk.NU2F6SN4.js.map

package/dist/chunks/{chunk.BDJ3X64K.js → chunk.NZNKGVQL.js}

@@ -1,9 +1,3 @@
-import {
-  badge_custom_styles_default
-} from "./chunk.J6CGTLVH.js";
-import {
-  badge_styles_default
-} from "./chunk.Y5TMYX2L.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
@@ -12,7 +6,13 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.GJP3MWP2.js";
+} from "./chunk.BOFHYW24.js";
+import {
+  badge_custom_styles_default
+} from "./chunk.J6CGTLVH.js";
+import {
+  badge_styles_default
+} from "./chunk.Y5TMYX2L.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -60,4 +60,4 @@ __decorateClass([
 export {
   SynBadge
 };
-//# sourceMappingURL=chunk.BDJ3X64K.js.map
+//# sourceMappingURL=chunk.NZNKGVQL.js.map

package/dist/chunks/{chunk.MDMALPDW.js → chunk.O2AOZIC3.js}

@@ -1,6 +1,6 @@
 import {
   SynDivider
-} from "./chunk.ZH4SWUQK.js";
+} from "./chunk.Z56HB5T7.js";
 
 // src/components/divider/divider.ts
 var divider_default = SynDivider;
@@ -9,4 +9,4 @@ SynDivider.define("syn-divider");
 export {
   divider_default
 };
-//# sourceMappingURL=chunk.MDMALPDW.js.map
+//# sourceMappingURL=chunk.O2AOZIC3.js.map

package/dist/chunks/{chunk.S3OMACCV.js → chunk.O356GTXZ.js}

@@ -18,19 +18,19 @@ import {
 } from "./chunk.HQ6QUSK7.js";
 import {
   SynIcon
-} from "./chunk.JRJDNTMQ.js";
-import {
-  LocalizeController
-} from "./chunk.GIU3H3J3.js";
+} from "./chunk.SXSOAZE2.js";
 import {
   watch
 } from "./chunk.74IOULXM.js";
+import {
+  LocalizeController
+} from "./chunk.GIU3H3J3.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.GJP3MWP2.js";
+} from "./chunk.BOFHYW24.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -241,4 +241,4 @@ setDefaultAnimation("details.hide", {
 export {
   SynDetails
 };
-//# sourceMappingURL=chunk.S3OMACCV.js.map
+//# sourceMappingURL=chunk.O356GTXZ.js.map

package/dist/chunks/{chunk.MDHV46T7.js → chunk.OJDFWW3D.js}

@@ -10,7 +10,7 @@ import {
 } from "./chunk.FKKJBKYL.js";
 import {
   SynButtonGroup
-} from "./chunk.42PJGQ52.js";
+} from "./chunk.B4BK2K4W.js";
 import {
   FormControlController,
   customErrorValidityState,
@@ -28,7 +28,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.GJP3MWP2.js";
+} from "./chunk.BOFHYW24.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -363,4 +363,4 @@ __decorateClass([
 export {
   SynRadioGroup
 };
-//# sourceMappingURL=chunk.MDHV46T7.js.map
+//# sourceMappingURL=chunk.OJDFWW3D.js.map

package/dist/chunks/{chunk.SGJLQJQQ.js → chunk.OYGUXWRA.js}

@@ -1,6 +1,6 @@
 import {
   SynTab
-} from "./chunk.VIRODKYQ.js";
+} from "./chunk.AEXQJTZQ.js";
 
 // src/components/tab/tab.ts
 var tab_default = SynTab;
@@ -9,4 +9,4 @@ SynTab.define("syn-tab");
 export {
   tab_default
 };
-//# sourceMappingURL=chunk.SGJLQJQQ.js.map
+//# sourceMappingURL=chunk.OYGUXWRA.js.map

package/dist/chunks/{chunk.4G4X6V2X.js → chunk.P5JA46R6.js}

@@ -3,10 +3,10 @@ import {
 } from "./chunk.ONW45GQI.js";
 import {
   SynDivider
-} from "./chunk.ZH4SWUQK.js";
+} from "./chunk.Z56HB5T7.js";
 import {
   SynDrawer
-} from "./chunk.COCYYLZ5.js";
+} from "./chunk.I3MEFWOZ.js";
 import {
   unlockBodyScrolling
 } from "./chunk.5732DMBC.js";
@@ -21,18 +21,18 @@ import {
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
-import {
-  LocalizeController
-} from "./chunk.GIU3H3J3.js";
 import {
   watch
 } from "./chunk.74IOULXM.js";
+import {
+  LocalizeController
+} from "./chunk.GIU3H3J3.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.GJP3MWP2.js";
+} from "./chunk.BOFHYW24.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -310,4 +310,4 @@ setDefaultAnimation("sideNav.overlay.hide", {
 export {
   SynSideNav
 };
-//# sourceMappingURL=chunk.4G4X6V2X.js.map
+//# sourceMappingURL=chunk.P5JA46R6.js.map

package/dist/chunks/{chunk.DF7L374K.js → chunk.Q42XIW7C.js}

@@ -1,6 +1,6 @@
 import {
   SynRadioButton
-} from "./chunk.KYN4SHKA.js";
+} from "./chunk.WZCXH5QP.js";
 
 // src/components/radio-button/radio-button.ts
 var radio_button_default = SynRadioButton;
@@ -9,4 +9,4 @@ SynRadioButton.define("syn-radio-button");
 export {
   radio_button_default
 };
-//# sourceMappingURL=chunk.DF7L374K.js.map
+//# sourceMappingURL=chunk.Q42XIW7C.js.map

package/dist/chunks/{chunk.OBMYXDWN.js → chunk.R6EEYS6Z.js}

@@ -1,15 +1,15 @@
-import {
-  accordion_styles_default
-} from "./chunk.WNUZ6LH4.js";
 import {
   watch
 } from "./chunk.74IOULXM.js";
+import {
+  accordion_styles_default
+} from "./chunk.WNUZ6LH4.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.GJP3MWP2.js";
+} from "./chunk.BOFHYW24.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -105,4 +105,4 @@ __decorateClass([
 export {
   SynAccordion
 };
-//# sourceMappingURL=chunk.OBMYXDWN.js.map
+//# sourceMappingURL=chunk.R6EEYS6Z.js.map

package/dist/chunks/{chunk.XQ2QE2VZ.js → chunk.RCP7TWVL.js}

@@ -1,6 +1,6 @@
 import {
   SynDetails
-} from "./chunk.S3OMACCV.js";
+} from "./chunk.O356GTXZ.js";
 
 // src/components/details/details.ts
 var details_default = SynDetails;
@@ -9,4 +9,4 @@ SynDetails.define("syn-details");
 export {
   details_default
 };
-//# sourceMappingURL=chunk.XQ2QE2VZ.js.map
+//# sourceMappingURL=chunk.RCP7TWVL.js.map

package/dist/chunks/{chunk.BBHVVRXK.js → chunk.RGIV7H3H.js}

@@ -49,9 +49,20 @@ var option_custom_styles_default = css`
   .option--current .option__suffix::slotted(syn-icon) {
     color: var(--syn-color-neutral-0);
   }
+
+  /* This is needed for the highlight styling of the options in syn-combobox */
+  .option__label::slotted(.syn-highlight-style) {
+    background-color: transparent;
+    color: var(--syn-color-neutral-950);
+    font: var(--syn-body-medium-bold);
+  }
+
+  :host([aria-selected='true']) .option__label::slotted(.syn-highlight-style) {
+    color: var(--syn-color-neutral-0);
+  }
 `;
 
 export {
   option_custom_styles_default
 };
-//# sourceMappingURL=chunk.BBHVVRXK.js.map
+//# sourceMappingURL=chunk.RGIV7H3H.js.map

package/dist/chunks/{chunk.BBHVVRXK.js.map → chunk.RGIV7H3H.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/option/option.custom.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  .option {\n    /* Height is dependent on line-height of .option__label, which does not fit completely to layout */\n    min-height: 48px;\n    padding: var(--syn-spacing-small) var(--syn-spacing-medium);\n  }\n\n  .option:not(.option--current) {\n    color: var(--syn-color-neutral-950);\n  }\n\n  .option__label {\n    line-height: var(--syn-line-height-normal);\n  }\n\n  .option__check {\n    color: var(--syn-color-primary-600);\n    font-size: var(--syn-spacing-large);\n  }\n\n  .option .option__check {\n    padding-inline-end: var(--syn-spacing-small);\n  }\n\n  /* Invert the check mark when keyboard navigation is used */\n  .option--current .option__check {\n    color: var(--syn-color-neutral-0);\n  }\n\n  /* Use larger spacing between icons and content */\n  .option__prefix::slotted(*) {\n    margin-inline-end: var(--syn-spacing-small);\n  }\n\n  .option__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Set correct icon size when someone uses syn-icon in the slots */\n  .option__prefix::slotted(syn-icon),\n  .option__suffix::slotted(syn-icon) {\n    color: var(--syn-color-neutral-800);\n    font-size: var(--syn-spacing-large);\n  }\n\n  .option--current .option__prefix::slotted(syn-icon),\n  .option--current .option__suffix::slotted(syn-icon) {\n    color: var(--syn-color-neutral-0);\n  }\n`;\n"],
-  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,+BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  .option {\n    /* Height is dependent on line-height of .option__label, which does not fit completely to layout */\n    min-height: 48px;\n    padding: var(--syn-spacing-small) var(--syn-spacing-medium);\n  }\n\n  .option:not(.option--current) {\n    color: var(--syn-color-neutral-950);\n  }\n\n  .option__label {\n    line-height: var(--syn-line-height-normal);\n  }\n\n  .option__check {\n    color: var(--syn-color-primary-600);\n    font-size: var(--syn-spacing-large);\n  }\n\n  .option .option__check {\n    padding-inline-end: var(--syn-spacing-small);\n  }\n\n  /* Invert the check mark when keyboard navigation is used */\n  .option--current .option__check {\n    color: var(--syn-color-neutral-0);\n  }\n\n  /* Use larger spacing between icons and content */\n  .option__prefix::slotted(*) {\n    margin-inline-end: var(--syn-spacing-small);\n  }\n\n  .option__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Set correct icon size when someone uses syn-icon in the slots */\n  .option__prefix::slotted(syn-icon),\n  .option__suffix::slotted(syn-icon) {\n    color: var(--syn-color-neutral-800);\n    font-size: var(--syn-spacing-large);\n  }\n\n  .option--current .option__prefix::slotted(syn-icon),\n  .option--current .option__suffix::slotted(syn-icon) {\n    color: var(--syn-color-neutral-0);\n  }\n\n  /* This is needed for the highlight styling of the options in syn-combobox */\n  .option__label::slotted(.syn-highlight-style) {\n    background-color: transparent;\n    color: var(--syn-color-neutral-950);\n    font: var(--syn-body-medium-bold);\n  }\n\n  :host([aria-selected='true']) .option__label::slotted(.syn-highlight-style) {\n    color: var(--syn-color-neutral-0);\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,+BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/chunks/{chunk.FZT4C2IH.js → chunk.RHBNJ7VK.js}

@@ -1,6 +1,6 @@
 import {
   SynBreadcrumbItem
-} from "./chunk.57VAAUO6.js";
+} from "./chunk.B54BXEJN.js";
 
 // src/components/breadcrumb-item/breadcrumb-item.ts
 var breadcrumb_item_default = SynBreadcrumbItem;
@@ -9,4 +9,4 @@ SynBreadcrumbItem.define("syn-breadcrumb-item");
 export {
   breadcrumb_item_default
 };
-//# sourceMappingURL=chunk.FZT4C2IH.js.map
+//# sourceMappingURL=chunk.RHBNJ7VK.js.map

package/dist/chunks/{chunk.BFVB5VHQ.js → chunk.ROEK5YOP.js}

@@ -1,6 +1,6 @@
 import {
   SynPrioNav
-} from "./chunk.KLXZ3EYA.js";
+} from "./chunk.2YQLQNSR.js";
 
 // src/components/prio-nav/prio-nav.ts
 var prio_nav_default = SynPrioNav;
@@ -9,4 +9,4 @@ SynPrioNav.define("syn-prio-nav");
 export {
   prio_nav_default
 };
-//# sourceMappingURL=chunk.BFVB5VHQ.js.map
+//# sourceMappingURL=chunk.ROEK5YOP.js.map

package/dist/chunks/{chunk.KDZQ7752.js → chunk.RZLON23M.js}

@@ -1,15 +1,19 @@
+import {
+  SynOption
+} from "./chunk.KXLXPVGN.js";
 import {
   SynPopup
-} from "./chunk.33URTGM5.js";
+} from "./chunk.67BGUF26.js";
 import {
   defaultOptionRenderer
-} from "./chunk.SRH6ZOHT.js";
+} from "./chunk.HVVPX2VA.js";
 import {
+  createOptionFromDifferentTypes,
   filterOnlyOptgroups,
   getAllOptions,
   getAssignedElementsForSlot,
   normalizeString
-} from "./chunk.2Y33P22F.js";
+} from "./chunk.S6AC4UW6.js";
 import {
   scrollIntoView
 } from "./chunk.5732DMBC.js";
@@ -22,7 +26,7 @@ import {
 } from "./chunk.FKKJBKYL.js";
 import {
   combobox_custom_styles_default
-} from "./chunk.DPCIJLV4.js";
+} from "./chunk.AL24ODK6.js";
 import {
   combobox_styles_default
 } from "./chunk.V4SIKF4X.js";
@@ -45,19 +49,19 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.JRJDNTMQ.js";
-import {
-  LocalizeController
-} from "./chunk.GIU3H3J3.js";
+} from "./chunk.SXSOAZE2.js";
 import {
   watch
 } from "./chunk.74IOULXM.js";
+import {
+  LocalizeController
+} from "./chunk.GIU3H3J3.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.GJP3MWP2.js";
+} from "./chunk.BOFHYW24.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -65,7 +69,6 @@ import {
 // src/components/combobox/combobox.component.ts
 import { classMap } from "lit/directives/class-map.js";
 import { html } from "lit";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { property, query, state } from "lit/decorators.js";
 var SynCombobox = class extends SynergyElement {
   constructor() {
@@ -77,9 +80,11 @@ var SynCombobox = class extends SynergyElement {
     this.localize = new LocalizeController(this);
     /** The last value of a syn-option, that was selected by click or via keyboard navigation */
     this.lastOptionValue = "";
+    this.isOptionRendererTriggered = false;
     this.hasFocus = false;
     this.displayLabel = "";
-    this.filteredOptions = [];
+    this.numberFilteredOptions = 0;
+    this.cachedOptions = [];
     this.name = "";
     this.value = "";
     this.defaultValue = "";
@@ -96,7 +101,11 @@ var SynCombobox = class extends SynergyElement {
     this.required = false;
     this.getOption = defaultOptionRenderer;
     this.filter = (option, queryStr) => {
-      const normalizedOption = normalizeString(option.getTextLabel());
+      let content = (option == null ? void 0 : option.textContent) || "";
+      if (option instanceof SynOption) {
+        content = option.getTextLabel();
+      }
+      const normalizedOption = normalizeString(content);
       const normalizedQuery = normalizeString(queryStr);
       return normalizedOption.includes(normalizedQuery);
     };
@@ -197,24 +206,6 @@ var SynCombobox = class extends SynergyElement {
     this.displayLabel = this.value;
     this.formControlController.updateValidity();
   }
-  get options() {
-    const renderOption = (option) => {
-      const queryString = this.displayInput.value;
-      const optionHtml = this.getOption(option, queryString);
-      return html`${typeof optionHtml === "string" ? unsafeHTML(optionHtml) : optionHtml}`;
-    };
-    return this.filteredOptions.map((item) => {
-      if (item.tagName.toLowerCase() === "syn-optgroup") {
-        Array.from(item.children).forEach((option) => {
-          if (option.tagName.toLowerCase() === "syn-option") {
-            renderOption(option);
-          }
-        });
-        return item;
-      }
-      return renderOption(item);
-    });
-  }
   addOpenListeners() {
     var _a;
     document.addEventListener("focusin", this.handleDocumentFocusIn);
@@ -255,11 +246,12 @@ var SynCombobox = class extends SynergyElement {
   handleLabelClick() {
     this.displayInput.focus();
   }
-  handleComboboxMouseDown() {
+  handleComboboxMouseDown(event) {
     if (this.disabled) {
       return;
     }
     const toggleListboxOpen = () => this.open ? this.hide() : this.show();
+    event.preventDefault();
     toggleListboxOpen().then(() => {
       setTimeout(() => this.displayInput.focus({ preventScroll: true }));
     });
@@ -337,7 +329,7 @@ var SynCombobox = class extends SynergyElement {
     scrollIntoView(this.getCurrentOption(), this.listbox, "vertical", "auto");
   }
   getAllFilteredOptions() {
-    return [...this.filteredWrapper.querySelectorAll("syn-option")];
+    return this.getSlottedOptions().filter((option) => !option.hidden);
   }
   getCurrentOption() {
     return this.getAllFilteredOptions().find((option) => option.current);
@@ -378,7 +370,7 @@ var SynCombobox = class extends SynergyElement {
     this.formControlController.setValidity(false);
     this.formControlController.emitInvalidEvent(event);
   }
-  handleFilterChange() {
+  handlePropertiesChange() {
     this.createComboboxOptionsFromQuery(this.value);
   }
   handleDisabledChange() {
@@ -395,7 +387,7 @@ var SynCombobox = class extends SynergyElement {
   }
   async handleOpenChange() {
     if (this.open && !this.disabled) {
-      if (this.filteredOptions.length === 0) {
+      if (this.numberFilteredOptions === 0) {
         this.open = false;
         this.emit("syn-error");
         return;
@@ -470,32 +462,45 @@ var SynCombobox = class extends SynergyElement {
   blur() {
     this.displayInput.blur();
   }
+  /* eslint-disable no-param-reassign, @typescript-eslint/no-floating-promises */
   createComboboxOptionsFromQuery(queryString) {
-    const optgroups = [];
-    this.filteredOptions = this.getSlottedOptions().filter((option) => this.filter(option, queryString) || queryString === "").map((option) => {
-      var _a;
-      const clonedOption = option.cloneNode(true);
-      const hasOptgroup = ((_a = option.parentElement) == null ? void 0 : _a.tagName.toLowerCase()) === "syn-optgroup";
-      if (!hasOptgroup) {
-        return clonedOption;
+    var _a;
+    this.numberFilteredOptions = 0;
+    this.isOptionRendererTriggered = true;
+    if (this.cachedOptions.length === 0) {
+      this.cacheSlottedOptionsAndOptgroups();
+    }
+    this.getSlottedOptions().forEach((option) => {
+      const cachedOption = this.cachedOptions.find((o) => o.id === option.id) || option;
+      const optionResult = this.getOption(cachedOption, queryString);
+      let updatedOption = createOptionFromDifferentTypes(optionResult);
+      if (!updatedOption) {
+        updatedOption = cachedOption;
       }
-      const optgroup = option.parentElement;
-      const filteredOptgroup = optgroups.find((el) => el.id === optgroup.id);
-      if (filteredOptgroup) {
-        filteredOptgroup == null ? void 0 : filteredOptgroup.appendChild(clonedOption);
-        return void 0;
+      const hideOption = !(this.filter(updatedOption, queryString) || queryString === "");
+      updatedOption.hidden = hideOption;
+      option.replaceWith(updatedOption);
+      if (!hideOption) {
+        this.numberFilteredOptions += 1;
       }
-      const clonedOptgroup = optgroup.cloneNode();
-      clonedOptgroup.appendChild(clonedOption);
-      optgroups.push(clonedOptgroup);
-      return clonedOptgroup;
-    }).filter(Boolean);
+    });
+    const visibleOptgroups = this.getSlottedOptGroups().filter((optgroup) => {
+      const options = getAllOptions(Array.from(optgroup.children)).flat();
+      const isVisible = options.some((option) => !option.hidden);
+      optgroup.hidden = !isVisible;
+      return isVisible;
+    });
+    (_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 */
   async handleInput() {
     const inputValue = this.displayInput.value;
     this.value = inputValue;
     await this.updateComplete;
-    this.open = this.filteredWrapper.children.length > 0;
+    this.open = this.numberFilteredOptions > 0;
     this.setSelectedOption(void 0);
     this.formControlController.updateValidity();
     this.emit("syn-input");
@@ -515,13 +520,8 @@ var SynCombobox = class extends SynergyElement {
   getSlottedOptGroups() {
     return filterOnlyOptgroups(getAssignedElementsForSlot(this.defaultSlot));
   }
-  /* eslint-disable no-param-reassign, @typescript-eslint/no-floating-promises */
-  /* @internal - used by options to update labels */
-  handleDefaultSlotChange() {
-    if (!customElements.get("syn-option")) {
-      customElements.whenDefined("syn-option").then(() => this.handleDefaultSlotChange());
-      return;
-    }
+  /* eslint-disable no-param-reassign */
+  cacheSlottedOptionsAndOptgroups() {
     const slottedOptions = this.getSlottedOptions();
     const slottedOptgroups = this.getSlottedOptGroups();
     slottedOptions.forEach((option, index) => {
@@ -530,12 +530,25 @@ var SynCombobox = class extends SynergyElement {
     slottedOptgroups.forEach((optgroup, index) => {
       optgroup.id = optgroup.id || `syn-combobox-optgroup-${index}`;
     });
-    this.createComboboxOptionsFromQuery(this.value);
-    if (this.hasFocus && this.value.length > 0 && !this.open) {
-      this.show();
+    this.cachedOptions = [...slottedOptions];
+  }
+  /* eslint-enable no-param-reassign */
+  /* eslint-disable @typescript-eslint/no-floating-promises, complexity */
+  /* @internal - used by options to update labels */
+  handleDefaultSlotChange() {
+    if (!this.isOptionRendererTriggered) {
+      if (!customElements.get("syn-option")) {
+        customElements.whenDefined("syn-option").then(() => this.handleDefaultSlotChange());
+        return;
+      }
+      this.cacheSlottedOptionsAndOptgroups();
+      this.createComboboxOptionsFromQuery(this.value);
+      if (this.hasFocus && this.value.length > 0 && !this.open) {
+        this.show();
+      }
     }
   }
-  /* eslint-enable no-param-reassign, @typescript-eslint/no-floating-promises */
+  /* eslint-enable @typescript-eslint/no-floating-promises, complexity */
   /* eslint-disable @typescript-eslint/unbound-method */
   // eslint-disable-next-line complexity
   render() {
@@ -673,9 +686,8 @@ var SynCombobox = class extends SynergyElement {
               @mouseup=${this.handleOptionClick}
             >
               <div class="listbox__options" part="filtered-listbox">
-                ${this.options}
+                <slot @slotchange=${this.handleDefaultSlotChange}></slot>      
               </div>
-              <slot @slotchange=${this.handleDefaultSlotChange}></slot>      
             </div>
           </syn-popup>
         </div>
@@ -719,9 +731,6 @@ __decorateClass([
 __decorateClass([
   query(".combobox__listbox")
 ], SynCombobox.prototype, "listbox", 2);
-__decorateClass([
-  query(".listbox__options")
-], SynCombobox.prototype, "filteredWrapper", 2);
 __decorateClass([
   query("slot:not([name])")
 ], SynCombobox.prototype, "defaultSlot", 2);
@@ -736,7 +745,10 @@ __decorateClass([
 ], SynCombobox.prototype, "selectedOption", 2);
 __decorateClass([
   state()
-], SynCombobox.prototype, "filteredOptions", 2);
+], SynCombobox.prototype, "numberFilteredOptions", 2);
+__decorateClass([
+  state()
+], SynCombobox.prototype, "cachedOptions", 2);
 __decorateClass([
   property()
 ], SynCombobox.prototype, "name", 2);
@@ -786,8 +798,8 @@ __decorateClass([
   property()
 ], SynCombobox.prototype, "filter", 2);
 __decorateClass([
-  watch("filter", { waitUntilFirstUpdate: true })
-], SynCombobox.prototype, "handleFilterChange", 1);
+  watch(["filter", "getOption"], { waitUntilFirstUpdate: true })
+], SynCombobox.prototype, "handlePropertiesChange", 1);
 __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SynCombobox.prototype, "handleDisabledChange", 1);
@@ -815,4 +827,4 @@ setDefaultAnimation("combobox.hide", {
 export {
   SynCombobox
 };
-//# sourceMappingURL=chunk.KDZQ7752.js.map
+//# sourceMappingURL=chunk.RZLON23M.js.map