dap-design-system 0.62.3 → 0.63.0

package/dist/components/combobox/comboboxBase.js

@@ -1,45 +1,42 @@
-var w = Object.getPrototypeOf;
-var S = Reflect.get;
-var x = (m, e, t) => S(w(m), t, e);
-var h = (m, e, t) => new Promise((i, a) => {
-  var n = (u) => {
+var C = Object.getPrototypeOf;
+var O = Reflect.get;
+var x = (m, e, t) => O(C(m), t, e);
+var h = (m, e, t) => new Promise((i, s) => {
+  var a = (u) => {
     try {
       c(t.next(u));
     } catch (b) {
-      a(b);
+      s(b);
     }
   }, o = (u) => {
     try {
       c(t.throw(u));
     } catch (b) {
-      a(b);
+      s(b);
     }
-  }, c = (u) => u.done ? i(u.value) : Promise.resolve(u.value).then(n, o);
+  }, c = (u) => u.done ? i(u.value) : Promise.resolve(u.value).then(a, o);
   c((t = t.apply(m, e)).next());
 });
 import { clsx as g } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as I } from "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as r } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { state as v } from "../../node_modules/@lit/reactive-element/decorators/state.js";
-import { query as C } from "../../node_modules/@lit/reactive-element/decorators/query.js";
-import { ifDefined as p } from "../../node_modules/lit-html/directives/if-defined.js";
-import { html as d } from "../../node_modules/lit-html/static.js";
-import { getValidityStateObject as D } from "../../common/utils.js";
+import { unsafeCSS as S, nothing as v } from "lit";
+import { query as w, property as r, state as y } from "lit/decorators.js";
+import { ifDefined as p } from "lit/directives/if-defined.js";
+import { html as d } from "lit/static-html.js";
+import { getValidityStateObject as D, idInScope as T } from "../../common/utils.js";
 import { GenericFormElement as V } from "../../internal/mixin/genericFormElement.js";
 import "../../localization/localization.js";
-import $ from "./combobox.scss.js";
-import { t as y } from "../../node_modules/i18next/dist/esm/i18next.js";
-import { unsafeCSS as O } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var T = Object.defineProperty, l = (m, e, t, i) => {
-  for (var a = void 0, n = m.length - 1, o; n >= 0; n--)
-    (o = m[n]) && (a = o(e, t, a) || a);
-  return a && T(e, t, a), a;
+import { filterOptions as $ } from "../option-list/listbox-state.js";
+import { toOptionItems as A, optionElementsFor as k, optionItemsConverter as M } from "../option-list/option-data.js";
+import L from "./combobox.scss.js";
+import { t as f } from "../../node_modules/i18next/dist/esm/i18next.js";
+var E = Object.defineProperty, B = Object.getOwnPropertyDescriptor, n = (m, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? B(e, t) : e, a = m.length - 1, o; a >= 0; a--)
+    (o = m[a]) && (s = (i ? o(e, t, s) : o(s)) || s);
+  return i && s && E(e, t, s), s;
 };
-const f = class f extends V {
+const I = class I extends V {
   constructor() {
-    super(...arguments), this.placement = "bottom-start", this.opened = !1, this.searchMode = "autocomplete", this.search = !1, this.clearButton = "true", this.allowManualInput = !1, this.searchForText = !1, this.searchOnValueSet = "false", this.loading = !1, this.selectable = "true", this.noAnimation = !1, this.textComplete = !1, this.openOnEmpty = !1, this.disableViewportAutoClose = !1, this.multiselect = !1, this.clearButtonTestId = "combobox-clear-button", this.searchButtonTestId = "combobox-search-button", this.disableSearchWhenEmpty = !1, this.selectedItems = [], this.optionListObserver = null, this.isUserInteraction = !1, this.pendingInitialValues = [], this.handleClick = () => {
+    super(...arguments), this.placement = "bottom-start", this.opened = !1, this.searchMode = "autocomplete", this.search = !1, this.clearButton = "true", this.allowManualInput = !1, this.searchForText = !1, this.searchOnValueSet = "false", this.loading = !1, this.selectable = "true", this.noAnimation = !1, this.textComplete = !1, this.openOnEmpty = !1, this.disableViewportAutoClose = !1, this.multiselect = !1, this.clearButtonTestId = "combobox-clear-button", this.searchButtonTestId = "combobox-search-button", this.disableSearchWhenEmpty = !1, this.selectedItems = [], this.filtering = !0, this.optionListObserver = null, this.isUserInteraction = !1, this.pendingInitialValues = [], this.handleClick = () => {
       !this.getComboboxOptions().length && !this.openOnEmpty ? this.hideDropDown() : this.opened ? this.hideDropDown() : this.showDropDown();
     }, this.handleKeyDown = (e) => h(this, null, function* () {
       var t, i;
@@ -53,24 +50,24 @@ const f = class f extends V {
         return this.hideDropDown(), this.focus();
       if (e.key === "Backspace" && this.multiselect && (((t = this.triggerInput) == null ? void 0 : t.value) || "") === "" && this.selectedItems.length > 0) {
         e.preventDefault();
-        const n = this.selectedItems[this.selectedItems.length - 1];
-        this.removeSelectedItem(n), this.emit("dds-change", {
+        const a = this.selectedItems[this.selectedItems.length - 1];
+        this.removeSelectedItem(a), this.emit("dds-change", {
           value: this.selectedItems.map((o) => o.value).join(","),
           selectedItems: this.selectedItems,
           type: "remove",
-          item: n
+          item: a
         }), this.setValidity();
         return;
       }
       if ((e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft" || e.key === "ArrowRight") && this.isAutoComplete)
         return this.handleArrowKeys(e);
       if (this.isAutoComplete && ((i = this.triggerInput) != null && i.value) && !this.opened) {
-        const a = this.getComboboxOptions().length > 0;
-        (this.openOnEmpty || a) && this.showDropDown();
+        const s = this.getComboboxOptions().length > 0;
+        (this.openOnEmpty || s) && this.showDropDown();
       }
     }), this.handleInput = (e) => h(this, null, function* () {
       const t = this.triggerInput;
-      if (this.isUserInteraction = !0, e.inputType !== "deleteContentBackward" || e.inputType === "deleteContentBackward" && this.allowManualInput ? (this.selectedText = t.value, this.search && (this.value = t.value)) : this.search ? (this.selectedText = t.value, this.value = t.value) : t.value === "" && e.inputType === "deleteContentBackward" && this.clearSelection(), this.emit("dds-input", { input: t.value, originalEvent: e }), this.setValidity(), this.requestUpdate(), this.isAutoComplete && t.value && !this.opened) {
+      if (this.filtering = !0, this.isUserInteraction = !0, e.inputType !== "deleteContentBackward" || e.inputType === "deleteContentBackward" && this.allowManualInput ? (this.selectedText = t.value, this.search && (this.value = t.value)) : this.search ? (this.selectedText = t.value, this.value = t.value) : t.value === "" && e.inputType === "deleteContentBackward" ? this.clearSelection() : this.textComplete || (this.selectedText = t.value), this.emit("dds-input", { input: t.value, originalEvent: e }), this.setValidity(), this.requestUpdate(), this.isAutoComplete && t.value && !this.opened) {
         const i = this.getComboboxOptions().length > 0;
         (this.openOnEmpty || i) && this.showDropDown();
       }
@@ -80,7 +77,10 @@ const f = class f extends V {
         this.hideDropDown({ skipFocus: !0 }), this.triggerInput.focus();
         return;
       }
-      ((i = e.detail) == null ? void 0 : i.key) === "Escape" && (this.hideDropDown(), this.currentItem = this.selectedItem, this.selectedText = "", this.selectedItem && (this.triggerInput.value = this.selectedItemText), this.triggerInput.focus());
+      if (((i = e.detail) == null ? void 0 : i.key) === "Escape") {
+        const s = this.selectedText || "";
+        this.hideDropDown(), this.currentItem = this.selectedItem, this.selectedText = "", this.selectedItem ? this.triggerInput.value = this.selectedItemText : this.triggerInput.value = s, this.triggerInput.focus();
+      }
     }, this.handleDocumentMouseDown = (e) => {
       const t = e.composedPath();
       this && !t.includes(this) && this.hideDropDown();
@@ -116,12 +116,14 @@ const f = class f extends V {
         type: "deselect"
       }), this.requestUpdate(), this.setValidity();
     }, this.handleCurrentOptionChange = (e) => {
-      this.currentItem = e.detail, !this.multiselect && e.detail && (this.textComplete && this.searchMode !== "manual" && this.searchMode !== "none" && (this.triggerInput.value = e.detail.text), this.isAutoComplete && this.selectedText && this.selectedText !== "" && !this.allowManualInput && this.textComplete && (this.triggerInput.value = e.detail.text, this.setSelectionRange(
+      this.currentItem = e.detail, !this.multiselect && e.detail && (this.textComplete && this.selectedText && this.searchMode !== "manual" && this.searchMode !== "none" && (this.triggerInput.value = e.detail.text), this.isAutoComplete && this.selectedText && this.selectedText !== "" && !this.allowManualInput && this.textComplete && (this.triggerInput.value = e.detail.text, this.setSelectionRange(
         this.selectedText.length,
         this.triggerInput.value.length
       )));
     }, this.handleListChanged = (e) => {
-      !e.detail.elements.length && !this.openOnEmpty && this.hideDropDown();
+      var s;
+      const t = this.filtering && this.selectedText || "", i = this.searchMode !== "manual" && $(this.getComboboxOptions(), t).length > 0;
+      !e.detail.elements.length && !this.openOnEmpty && !i ? this.hideDropDown() : this.opened && e.detail.elements.length && ((s = this.optionList) == null || s.revealActiveOption());
     }, this.handleClearClick = () => {
       this.disabled || (this.multiselect ? this.clearAllSelections() : this.clearSelection(), this.triggerInput.focus(), this.setValidity(), this.openOnEmpty || this.hideDropDown(), this.emit("dds-clear"));
     }, this.handleSearchClick = (e) => {
@@ -135,6 +137,12 @@ const f = class f extends V {
       }), this.setValidity(), this.triggerInput.focus();
     };
   }
+  get items() {
+    return this._items;
+  }
+  set items(e) {
+    this._items = A(e);
+  }
   /** True when the search input currently holds non-whitespace text. */
   get hasSearchText() {
     return (this.selectedText || this.selectedItemText || this.value || "").trim().length > 0;
@@ -145,34 +153,34 @@ const f = class f extends V {
    * when picked by the user; reading `.text` alone yields "undefined" for the former.
    */
   get selectedItemText() {
-    var e, t, i, a;
-    return (a = (i = (e = this.selectedItem) == null ? void 0 : e.text) != null ? i : (t = this.selectedItem) == null ? void 0 : t.optionText) != null ? a : "";
+    var e, t, i, s;
+    return (s = (i = (e = this.selectedItem) == null ? void 0 : e.text) != null ? i : (t = this.selectedItem) == null ? void 0 : t.optionText) != null ? s : "";
   }
   firstUpdated(e) {
     return h(this, null, function* () {
-      var a;
-      x(f.prototype, this, "firstUpdated").call(this, e), yield this.optionList.updateComplete, yield new Promise((n) => requestAnimationFrame(n));
+      var s;
+      x(I.prototype, this, "firstUpdated").call(this, e), yield this.optionList.updateComplete, yield new Promise((a) => requestAnimationFrame(a));
       const t = this.getComboboxOptions();
-      yield Promise.all(t.map((n) => n.updateComplete));
-      const i = x(f.prototype, this, "value");
+      yield Promise.all(t.map((a) => a.updateComplete));
+      const i = x(I.prototype, this, "value");
       if (i)
         if (this.multiselect) {
-          const n = i.split(",").map((o) => o.trim()).filter((o) => o);
-          this.pendingInitialValues = n, this.updateMultipleSelectionsFromValues(n);
+          const a = i.split(",").map((o) => o.trim()).filter((o) => o);
+          this.pendingInitialValues = a, this.updateMultipleSelectionsFromValues(a);
         } else
-          this.selectedItem = (a = this.optionList) == null ? void 0 : a.getAllOptions().find((n) => n.value === i), this.selectedItem ? this.selectedText = this.selectedItem.optionText || "" : this.selectedText = "", !this.selectedText && (this.allowManualInput || this.searchMode === "none") && (this.selectedText = i);
+          this.selectedItem = (s = this.optionList) == null ? void 0 : s.getAllOptions().find((a) => a.value === i), this.selectedItem ? this.selectedText = this.selectedItem.optionText || "" : this.selectedText = "", !this.selectedText && (this.allowManualInput || this.searchMode === "none") && (this.selectedText = i);
       this.setupOptionListObserver();
     });
   }
   updated(e) {
-    var t;
-    if (super.updated(e), e.has("value") && this.triggerInput && !this.search && !this.multiselect) {
-      const i = this.value;
-      i ? this.handleValueChange(i) : this.clearSelection();
+    var t, i;
+    if (super.updated(e), e.has("opened") && this.opened && ((t = this.optionList) == null || t.revealActiveOption()), e.has("items") && this.updateComboboxState(), e.has("value") && this.triggerInput && !this.search && !this.multiselect) {
+      const s = this.value;
+      s ? this.handleValueChange(s) : this.clearSelection();
     }
     if (e.has("value") && this.triggerInput && this.isFreeTextSearch) {
-      const i = (t = this.value) != null ? t : "";
-      this.triggerInput.value !== i && (this.triggerInput.value = i), this.selectedText = i;
+      const a = (this.selectedItem && this.selectedItem.value === this.value ? this.selectedItemText : "") || ((i = this.value) != null ? i : "");
+      this.triggerInput.value !== a && (this.triggerInput.value = a), this.selectedText = a;
     }
   }
   get isFreeTextSearch() {
@@ -185,7 +193,7 @@ const f = class f extends V {
   handleValueChange(e) {
     if (!e) return;
     this.isUserInteraction = !1;
-    const t = this.getComboboxOptions().find((i) => i.value === e);
+    const t = this.findOptionForValue(e);
     t ? (this.selectedItem = t, this.selectedText = t.optionText || t.textContent || "", this.triggerInput && (this.triggerInput.value = this.selectedText), this.requestUpdate()) : (this.selectedItem = null, this.search || (this.selectedText = "", this.triggerInput && (this.triggerInput.value = "")), this.requestUpdate());
   }
   setupOptionListObserver() {
@@ -193,12 +201,12 @@ const f = class f extends V {
       let t = !1;
       e.forEach((i) => {
         if (i.type === "childList") {
-          const a = Array.from(i.addedNodes).some(
+          const s = Array.from(i.addedNodes).some(
             (o) => o.nodeName === "DAP-DS-OPTION-ITEM"
-          ), n = Array.from(i.removedNodes).some(
+          ), a = Array.from(i.removedNodes).some(
             (o) => o.nodeName === "DAP-DS-OPTION-ITEM"
           );
-          (a || n) && (t = !0);
+          (s || a) && (t = !0);
         }
       }), t && this.updateComboboxState();
     }), this.optionListObserver.observe(this, {
@@ -222,9 +230,7 @@ const f = class f extends V {
   updateSelectionFromValue() {
     if (!this.value) return;
     this.isUserInteraction = !1;
-    const e = this.getComboboxOptions().find(
-      (t) => t.value === this.value
-    );
+    const e = this.findOptionForValue(this.value);
     e && (this.selectedItem = e, this.selectedText = e.optionText || e.textContent || "", this.triggerInput && (this.triggerInput.value = this.selectedText), this.requestUpdate());
   }
   cleanupOptionListObserver() {
@@ -239,12 +245,27 @@ const f = class f extends V {
   get isAutoComplete() {
     return this.searchMode === "autocomplete" || this.searchMode === "manual";
   }
+  /**
+   * The option a value refers to. With `searchForText` a pick stores the
+   * option's text as the value, so fall back to matching the text; otherwise
+   * the pick is treated as an unknown value and the input gets cleared.
+   */
+  findOptionForValue(e) {
+    var i;
+    const t = this.getComboboxOptions();
+    return (i = t.find((s) => s.value === e)) != null ? i : this.searchForText ? t.find((s) => s.optionText === e) : void 0;
+  }
+  /** The option value the list should mark as selected. */
+  get listValue() {
+    var e, t;
+    return this.searchForText ? (t = (e = this.selectedItem) == null ? void 0 : e.value) != null ? t : this.value : this.value;
+  }
   /**
    * Get all option items directly from the combobox element
    * This is more reliable for dynamic updates than the option list component
    */
   getComboboxOptions() {
-    return Array.from(this.querySelectorAll("dap-ds-option-item"));
+    return this.items ? k(this.items) : Array.from(this.querySelectorAll("dap-ds-option-item"));
   }
   get isOpenOnEmpty() {
     return this.openOnEmpty || !this.openOnEmpty && this.getComboboxOptions().length > 0;
@@ -288,12 +309,12 @@ const f = class f extends V {
         value: this.selectedItem.value,
         selectedItem: this.selectedItem,
         type: "select"
-      }), yield this.updateComplete, this.value = this.selectedItem.value, this.selectedText = this.currentItem.text, this.triggerInput.value = this.currentItem.text, this.triggerInput.focus(), this.setValidity();
+      }), yield this.updateComplete, this.value = this.selectedItem.value, this.selectedText = this.currentItem.text, this.triggerInput.value = this.currentItem.text, this.triggerInput.focus(), this.setValidity(), this.multiselect || (yield this.hideDropDown());
     });
   }
   handleTextSearch(e) {
     return h(this, null, function* () {
-      this.value = e, this.selectedText = e, this.triggerInput.value = e, this.triggerInput.focus(), this.emit("dds-search", { search: e }), this.setValidity();
+      this.value = e, this.selectedText = e, this.triggerInput.value = e, this.triggerInput.focus(), this.emit("dds-search", { search: e }), this.setValidity(), yield this.hideDropDown();
     });
   }
   handleArrowKeys(e) {
@@ -325,7 +346,7 @@ const f = class f extends V {
   }
   addSelectedItem(e) {
     if (!this.multiselect || this.selectedItems.some(
-      (a) => a.value === e.value
+      (s) => s.value === e.value
     ) || this.isMaxSelectionsReached()) return;
     this.selectedItems = [...this.selectedItems, e];
     const i = this.getSelectedValues().join(",");
@@ -351,13 +372,13 @@ const f = class f extends V {
     if (!this.multiselect) return;
     const t = this.getComboboxOptions();
     this.selectedItems.length === 0 && (this.selectedItems = []);
-    let a = !1;
-    e.forEach((n) => {
+    let s = !1;
+    e.forEach((a) => {
       const o = t.find(
-        (c) => c.value === n || c.getAttribute("value") === n
+        (c) => c.value === a || c.getAttribute("value") === a
       );
-      o && (this.selectedItems.some((u) => u.value === n) || (this.selectedItems.push(o), a = !0));
-    }), a && this.pendingInitialValues.length > 0 && (this.pendingInitialValues = []), this.requestUpdate();
+      o && (this.selectedItems.some((u) => u.value === a) || (this.selectedItems.push(o), s = !0));
+    }), s && this.pendingInitialValues.length > 0 && (this.pendingInitialValues = []), this.requestUpdate();
   }
   /**
    * Override value getter/setter to handle multiselect mode
@@ -378,7 +399,11 @@ const f = class f extends V {
   }
   showDropDown() {
     return h(this, null, function* () {
-      this.disabled || this.readonly || !this.isAutoComplete || this.opened || !this.openOnEmpty && !this.getComboboxOptions().length && !this.isAutoComplete || (this.opened = !0, document.addEventListener("mousedown", this.handleDocumentMouseDown));
+      var t, i;
+      if (this.disabled || this.readonly || !this.isAutoComplete || this.opened || !this.openOnEmpty && !this.getComboboxOptions().length && !this.isAutoComplete)
+        return;
+      const e = (i = (t = this.triggerInput) == null ? void 0 : t.value) != null ? i : "";
+      e && e === this.selectedItemText && (this.filtering = !1), this.opened = !0, document.addEventListener("mousedown", this.handleDocumentMouseDown);
     });
   }
   hideDropDown(e) {
@@ -430,7 +455,7 @@ const f = class f extends V {
     });
   }
   get validationMessage() {
-    return y("form.validationMessage.select");
+    return f("form.validationMessage.select");
   }
   checkValidity() {
     return this.required ? this.getValidity() : !0;
@@ -450,6 +475,26 @@ const f = class f extends V {
   handleInvalid(e) {
     e.preventDefault();
   }
+  /**
+   * Screen-reader status for the highlighted option while focus stays in the input.
+   * aria-activedescendant cannot reach options inside option-list's shadow root, so
+   * the highlight (e.g. the first match after typing) is announced through a polite
+   * live region instead. Once focus moves onto an option it is announced natively,
+   * so the status is cleared to avoid a double announcement.
+   */
+  get activeOptionStatus() {
+    var i, s, a;
+    if (!this.opened || !this.currentItem || ((i = this.shadowRoot) == null ? void 0 : i.activeElement) !== this.triggerInput)
+      return "";
+    const e = (a = (s = this.optionList) == null ? void 0 : s.getAllAvailabeOptions()) != null ? a : [], t = e.findIndex(
+      (o) => o.value === this.currentItem.value
+    );
+    return t < 0 ? "" : f("combobox.activeOption", {
+      option: this.currentItem.text,
+      position: t + 1,
+      count: e.length
+    });
+  }
   getActiveDescendant() {
     var t;
     return this.opened ? (t = this.optionList) == null ? void 0 : t.getActiveOption() : this.triggerInput;
@@ -491,14 +536,14 @@ const f = class f extends V {
     `;
   }
   renderChips() {
-    return !this.multiselect || this.selectedItems.length === 0 ? I : d`
+    return !this.multiselect || this.selectedItems.length === 0 ? v : d`
       <div class="combobox__chips" part="chips">
         ${this.selectedItems.map((e) => this.renderChip(e))}
       </div>
     `;
   }
   renderInput() {
-    var t, i;
+    var t;
     const e = this.multiselect ? this.selectedText : this.selectedText !== "" ? this.selectedText : this.selectedItemText;
     return d`<input
       id="input"
@@ -509,22 +554,26 @@ const f = class f extends V {
       "input--readonly": this.readonly,
       "input--multiselect": this.multiselect
     })}"
-      aria-expanded=${this.opened}
+      aria-expanded=${this.opened ? "true" : "false"}
       aria-haspopup="listbox"
       aria-labelledby="label"
       aria-describedby="description ${this.feedback ? "feedback" : ""}"
       aria-disabled=${this.disabled}
       aria-autocomplete="both"
       aria-controls="option-list"
-      aria-activedescendant=${p((t = this.getActiveDescendant()) == null ? void 0 : t.id)}
-      aria-multiselectable=${this.multiselect ? "true" : "false"}
+      aria-activedescendant=${p(
+      // Options render in option-list's shadow root, out of this scope; a
+      // cross-scope IDREF is ignored by browsers, so only same-scope ids are set.
+      // Closed: no active descendant (the input must not reference itself).
+      this.opened ? T(this.shadowRoot, this.getActiveDescendant()) : void 0
+    )}
       ?required=${this.required}
       ?readonly=${this.readonly}
       ?autofocus=${this.autofocus}
       autocomplete=${this.autocomplete}
       ?disabled=${this.disabled}
       value=${e}
-      placeholder=${p((i = this.placeholder) != null ? i : "")}
+      placeholder=${p((t = this.placeholder) != null ? t : "")}
       type=${this.search ? "search" : "text"}
       @blur=${this.handleBlur}
       @focus=${this.handleFocus}
@@ -533,14 +582,14 @@ const f = class f extends V {
       @click=${this.handleClick} />`;
   }
   renderClearButton() {
-    return this.clearButton !== "true" || this.readonly ? I : d`<div
+    return this.clearButton !== "true" || this.readonly ? v : d`<div
       class="${g("clear-icon", {
       "clear-icon--hidden": this.shouldHideClearIcon
     })}">
       <dap-ds-icon-button
         icon="close-line"
         data-testid=${this.clearButtonTestId}
-        aria-label=${y("clear")}
+        aria-label=${f("clear")}
         ?disabled=${this.disabled}
         @click=${this.handleClearClick}></dap-ds-icon-button>
     </div>`;
@@ -571,10 +620,10 @@ const f = class f extends V {
           ?disabled=${this.disableSearchWhenEmpty && !this.hasSearchText}
           data-testid=${this.searchButtonTestId}
           iconSize=${this.getInnerIconSize(this.size)}
-          aria-label=${(i = this.searchButtonAriaLabel) != null ? i : y("search")}
+          aria-label=${(i = this.searchButtonAriaLabel) != null ? i : f("search")}
           @click=${this.handleSearchClick}>
         </dap-ds-icon-button>`}
-      </div>` : I;
+      </div>` : v;
   }
   renderSelectActions() {
     return d`<div
@@ -595,10 +644,13 @@ const f = class f extends V {
       .search=${this.search}
       searchMode=${this.allowManualInput ? "none" : this.searchMode}
       searchOnValueSet=${this.searchOnValueSet === "true"}
-      filterText=${this.selectedText}
+      filterText=${this.filtering ? this.selectedText : ""}
       size=${p(this.size)}
-      value=${p(this.value)}
+      value=${p(this.listValue)}
       selectable=${p(this.selectable)}
+      ?multiselectable=${this.multiselect}
+      .items=${this.items}
+      .renderOption=${this.renderOption}
       @dds-option-change=${this.handleSelectedChange}
       @dds-option-deselect=${this.handleOptionDeselect}
       @dds-keydown=${this.handleListKeyDown}
@@ -608,7 +660,7 @@ const f = class f extends V {
     </dap-ds-option-list>`;
   }
   renderCombobox() {
-    return d` ${this.renderLabel()}
+    return d` ${this.renderLabel(void 0, "input")}
       <div>
         <dap-ds-popup
           part="base"
@@ -642,15 +694,22 @@ const f = class f extends V {
           </div>
           ${this.renderOptionList()}
         </dap-ds-popup>
+        <div
+          class="sr-only active-option-status"
+          role="status"
+          aria-live="polite"
+          aria-atomic="true">
+          ${this.activeOptionStatus}
+        </div>
         ${this.multiselect ? d`<div
               class="sr-only"
               role="status"
               aria-live="polite"
               aria-atomic="true">
-              ${this.selectedItems.length > 0 ? y("combobox.multiselect.selected", {
+              ${this.selectedItems.length > 0 ? f("combobox.multiselect.selected", {
       count: this.selectedItems.length
     }) : ""}
-            </div>` : I}
+            </div>` : v}
         ${this.feedback && d`<dap-ds-feedback
           part="feedback"
           feedbackType=${p(this.feedbackType)}
@@ -661,96 +720,105 @@ const f = class f extends V {
       </div>`;
   }
 };
-f.styles = O($);
-let s = f;
-l([
-  C("input")
-], s.prototype, "triggerInput");
-l([
-  C("dap-ds-option-list")
-], s.prototype, "optionList");
-l([
+I.styles = S(L);
+let l = I;
+n([
+  w("input")
+], l.prototype, "triggerInput", 2);
+n([
+  w("dap-ds-option-list")
+], l.prototype, "optionList", 2);
+n([
   r({ reflect: !0 })
-], s.prototype, "placement");
-l([
+], l.prototype, "placement", 2);
+n([
   r({ type: Boolean, reflect: !0 })
-], s.prototype, "opened");
-l([
+], l.prototype, "opened", 2);
+n([
   r()
-], s.prototype, "searchMode");
-l([
+], l.prototype, "searchMode", 2);
+n([
   r({ type: Boolean })
-], s.prototype, "search");
-l([
+], l.prototype, "search", 2);
+n([
   r()
-], s.prototype, "clearButton");
-l([
+], l.prototype, "clearButton", 2);
+n([
   r()
-], s.prototype, "placeholder");
-l([
+], l.prototype, "placeholder", 2);
+n([
   r({ type: Boolean })
-], s.prototype, "sync");
-l([
+], l.prototype, "sync", 2);
+n([
   r({ type: Boolean })
-], s.prototype, "allowManualInput");
-l([
+], l.prototype, "allowManualInput", 2);
+n([
   r({ type: Boolean })
-], s.prototype, "searchForText");
-l([
+], l.prototype, "searchForText", 2);
+n([
   r({ type: String })
-], s.prototype, "searchOnValueSet");
-l([
+], l.prototype, "searchOnValueSet", 2);
+n([
   r({ type: Boolean })
-], s.prototype, "loading");
-l([
+], l.prototype, "loading", 2);
+n([
   r({ type: String })
-], s.prototype, "selectable");
-l([
+], l.prototype, "selectable", 2);
+n([
   r({ type: Boolean })
-], s.prototype, "noAnimation");
-l([
+], l.prototype, "noAnimation", 2);
+n([
   r({ type: Boolean })
-], s.prototype, "textComplete");
-l([
+], l.prototype, "textComplete", 2);
+n([
   r({ type: Boolean })
-], s.prototype, "openOnEmpty");
-l([
+], l.prototype, "openOnEmpty", 2);
+n([
   r({ type: Boolean })
-], s.prototype, "disableViewportAutoClose");
-l([
+], l.prototype, "disableViewportAutoClose", 2);
+n([
   r()
-], s.prototype, "searchButtonAriaLabel");
-l([
+], l.prototype, "searchButtonAriaLabel", 2);
+n([
   r({ type: Boolean })
-], s.prototype, "subtle");
-l([
+], l.prototype, "subtle", 2);
+n([
   r({ type: Boolean, reflect: !0 })
-], s.prototype, "multiselect");
-l([
+], l.prototype, "multiselect", 2);
+n([
   r({ type: Number, reflect: !0 })
-], s.prototype, "maxSelections");
-l([
+], l.prototype, "maxSelections", 2);
+n([
+  r({ converter: M })
+], l.prototype, "items", 1);
+n([
+  r({ attribute: !1 })
+], l.prototype, "renderOption", 2);
+n([
   r()
-], s.prototype, "clearButtonTestId");
-l([
+], l.prototype, "clearButtonTestId", 2);
+n([
   r()
-], s.prototype, "searchButtonTestId");
-l([
+], l.prototype, "searchButtonTestId", 2);
+n([
   r({ type: Boolean })
-], s.prototype, "disableSearchWhenEmpty");
-l([
-  v()
-], s.prototype, "selectedItem");
-l([
-  v()
-], s.prototype, "selectedItems");
-l([
-  v()
-], s.prototype, "currentItem");
-l([
-  v()
-], s.prototype, "selectedText");
+], l.prototype, "disableSearchWhenEmpty", 2);
+n([
+  y()
+], l.prototype, "selectedItem", 2);
+n([
+  y()
+], l.prototype, "selectedItems", 2);
+n([
+  y()
+], l.prototype, "currentItem", 2);
+n([
+  y()
+], l.prototype, "selectedText", 2);
+n([
+  y()
+], l.prototype, "filtering", 2);
 export {
-  s as default
+  l as default
 };
 //# sourceMappingURL=comboboxBase.js.map