forge-select 0.5.0 → 0.7.0

package/dist/index.js

@@ -96,10 +96,10 @@ function parseOption(option) {
 }
 
 // src/option-renderer.ts
-function renderOptionContent(container, option, template, variant = "row") {
+function renderOptionContent(container, option, template, variant = "row", sanitizeTemplate) {
   if (template) {
     const result = template(option);
-    if (typeof result === "string") container.innerHTML = result;
+    if (typeof result === "string") container.innerHTML = sanitizeTemplate ? sanitizeTemplate(result, option) : result;
     else container.append(result);
     return;
   }
@@ -136,12 +136,12 @@ function renderOptionContent(container, option, template, variant = "row") {
 }
 
 // src/remote.ts
-function buildUrl(ajax, query, page) {
+function buildUrl(ajax, query, page, cursor) {
   if (!ajax.url) throw new Error("ForgeSelect: ajax requires either url or request.");
   if (typeof ajax.url === "function") return ajax.url(query, page);
   if (!ajax.params) return ajax.url;
   const params = new URLSearchParams();
-  for (const [key, value] of Object.entries(ajax.params(query, page))) params.set(key, String(value));
+  for (const [key, value] of Object.entries(ajax.params(query, page, cursor))) params.set(key, String(value));
   const separator = ajax.url.includes("?") ? "&" : "?";
   return `${ajax.url}${separator}${params.toString()}`;
 }
@@ -153,10 +153,16 @@ function normalizeRemoteResult(ajax, response) {
       "ForgeSelect: ajax.transform must return an array of options, or an object shaped like { options: Option[], hasMore?: boolean }."
     );
   }
-  return { options: result.options, hasMore: ajax.pagination ? Boolean(result.hasMore) : false };
+  const nextCursor = result.nextCursor == null ? void 0 : String(result.nextCursor);
+  return {
+    options: result.options,
+    hasMore: ajax.pagination ? result.hasMore ?? nextCursor !== void 0 : false,
+    nextCursor
+  };
 }
 
 // src/remote-cache.ts
+var REMOTE_CACHE_LIMIT = 50;
 var RemoteCache = class {
   constructor() {
     this.entries = /* @__PURE__ */ new Map();
@@ -171,7 +177,12 @@ var RemoteCache = class {
     return entry.value;
   }
   set(key, value, ttl, now = Date.now()) {
-    if (ttl > 0) this.entries.set(key, { value, expiresAt: now + ttl });
+    if (ttl <= 0) return;
+    if (this.entries.size >= REMOTE_CACHE_LIMIT && !this.entries.has(key)) {
+      const oldest = this.entries.keys().next().value;
+      this.entries.delete(oldest);
+    }
+    this.entries.set(key, { value, expiresAt: now + ttl });
   }
   clear() {
     this.entries.clear();
@@ -261,21 +272,6 @@ function computeCheckState(option, selected, isDisabled = defaultIsDisabled) {
   if (states.every((state) => state === "none")) return "none";
   return "some";
 }
-function findOption(items, value) {
-  const search = (options) => {
-    for (const option of options) {
-      if (option.value === value) return option;
-      const found = option.children ? search(option.children) : void 0;
-      if (found) return found;
-    }
-    return void 0;
-  };
-  for (const item of items) {
-    const found = search(isGroup(item) ? item.options : [item]);
-    if (found) return found;
-  }
-  return void 0;
-}
 function syncTreeAncestors(items, selected, isDisabled = defaultIsDisabled) {
   const sync = (option) => {
     if (!option.children?.length) return;
@@ -305,9 +301,13 @@ var DEFAULT_ITEM_HEIGHT = 36;
 var VIRTUAL_BUFFER = 5;
 var VIRTUAL_THRESHOLD = 100;
 var ROW_CACHE_LIMIT = 2e3;
+var PAGE_SIZE = 10;
+var TYPEAHEAD_RESET_MS = 500;
 var uidCounter = 0;
 var ForgeSelect = class {
   constructor(target, options = {}) {
+    this.optionByValue = /* @__PURE__ */ new Map();
+    this.optionByLabel = /* @__PURE__ */ new Map();
     this.selected = [];
     this.selectedOptions = /* @__PURE__ */ new Map();
     this.suppressNextTagClick = false;
@@ -322,8 +322,14 @@ var ForgeSelect = class {
     this.rows = [];
     this.navItems = [];
     this.highlightedIndex = -1;
+    this.typeaheadBuffer = "";
+    this.typeaheadTimer = null;
     this.rowContentCache = /* @__PURE__ */ new Map();
+    this.rowElementCache = /* @__PURE__ */ new Map();
     this.rowHeightCache = /* @__PURE__ */ new Map();
+    this.rowOffsetsCache = null;
+    this.scrollRafId = null;
+    this.ancestorScrollRafId = null;
     this.searchIndex = new SearchIndex();
     this.expandedValues = /* @__PURE__ */ new Set();
     this.loading = false;
@@ -335,6 +341,8 @@ var ForgeSelect = class {
     this.ajaxController = null;
     this.remoteLoaded = false;
     this.remoteCache = new RemoteCache();
+    this.remoteInFlight = /* @__PURE__ */ new Map();
+    this.prefetchControllers = /* @__PURE__ */ new Set();
     this.loadError = null;
     this.originalDisplay = "";
     this.originalDisabled = false;
@@ -352,7 +360,12 @@ var ForgeSelect = class {
       this.positionDropdown();
     };
     this.onAncestorScroll = () => {
-      if (this.portalHost) this.positionDropdown();
+      if (!this.portalHost) return;
+      if (this.ancestorScrollRafId != null) return;
+      this.ancestorScrollRafId = requestAnimationFrame(() => {
+        this.ancestorScrollRafId = null;
+        this.positionDropdown();
+      });
     };
     this.onNativeInvalid = (event) => {
       event.preventDefault();
@@ -398,6 +411,13 @@ var ForgeSelect = class {
       ajax: options.ajax,
       templateResult: options.templateResult,
       templateSelection: options.templateSelection,
+      sanitizeTemplate: options.sanitizeTemplate,
+      beforeSelect: options.beforeSelect,
+      beforeUnselect: options.beforeUnselect,
+      beforeCreate: options.beforeCreate,
+      createOption: options.createOption,
+      missingSelectionPolicy: options.missingSelectionPolicy ?? "preserve",
+      duplicateValuePolicy: options.duplicateValuePolicy ?? "warn",
       filterOption: options.filterOption,
       searchFields: options.searchFields ?? ["label", "description"],
       tokenSearch: options.tokenSearch ?? true,
@@ -419,6 +439,7 @@ var ForgeSelect = class {
     this.plugins = this.opts.plugins;
     if (nativeSelect) nativeSelect.required = this.opts.required;
     this.data = this.opts.data ?? (nativeSelect ? parseNativeOptions(nativeSelect) : []);
+    this.rebuildOptionIndexes();
     if (nativeSelect && !this.opts.data) {
       const nativeOptions = Array.from(nativeSelect.options);
       const hasIntentionalSelection = nativeSelect.multiple || nativeSelect.selectedIndex > 0 || nativeOptions.some((option) => option.defaultSelected);
@@ -456,6 +477,8 @@ var ForgeSelect = class {
     this.renderList();
     this.positionDropdown();
     window.addEventListener("resize", this.onWindowResize);
+    window.visualViewport?.addEventListener("resize", this.onWindowResize);
+    window.visualViewport?.addEventListener("scroll", this.onWindowResize);
     document.addEventListener("scroll", this.onAncestorScroll, true);
     if (this.searchInput && !this.searchInput.hidden) this.searchInput.focus();
     this.emitter.emit("open");
@@ -470,7 +493,22 @@ var ForgeSelect = class {
     this.control.setAttribute("aria-expanded", "false");
     document.removeEventListener("mousedown", this.onDocumentMouseDown);
     window.removeEventListener("resize", this.onWindowResize);
+    window.visualViewport?.removeEventListener("resize", this.onWindowResize);
+    window.visualViewport?.removeEventListener("scroll", this.onWindowResize);
     document.removeEventListener("scroll", this.onAncestorScroll, true);
+    if (this.ancestorScrollRafId != null) {
+      cancelAnimationFrame(this.ancestorScrollRafId);
+      this.ancestorScrollRafId = null;
+    }
+    if (this.scrollRafId != null) {
+      cancelAnimationFrame(this.scrollRafId);
+      this.scrollRafId = null;
+    }
+    if (this.typeaheadTimer) {
+      clearTimeout(this.typeaheadTimer);
+      this.typeaheadTimer = null;
+    }
+    this.typeaheadBuffer = "";
     this.highlightedIndex = -1;
     if (this.searchInput) {
       this.searchInput.value = "";
@@ -488,11 +526,16 @@ var ForgeSelect = class {
    */
   positionDropdown() {
     const controlRect = this.control.getBoundingClientRect();
-    const placement = computeDropdownPlacement(controlRect, this.dropdown.offsetHeight, window.innerHeight);
+    const viewport = window.visualViewport;
+    const placement = computeDropdownPlacement(
+      controlRect,
+      this.dropdown.offsetHeight,
+      viewport?.height ?? window.innerHeight
+    );
     this.root.classList.toggle("forge-select--drop-up", placement.dropUp);
     if (this.portalHost) {
-      this.portalHost.style.top = `${placement.top}px`;
-      this.portalHost.style.left = `${controlRect.left}px`;
+      this.portalHost.style.top = `${placement.top + (viewport?.offsetTop ?? 0)}px`;
+      this.portalHost.style.left = `${controlRect.left + (viewport?.offsetLeft ?? 0)}px`;
       this.portalHost.style.width = `${controlRect.width}px`;
     }
   }
@@ -503,10 +546,16 @@ var ForgeSelect = class {
     this.destroyed = true;
     if (this.ajaxTimer) clearTimeout(this.ajaxTimer);
     this.ajaxController?.abort();
+    for (const controller of this.prefetchControllers) controller.abort();
+    this.prefetchControllers.clear();
+    this.remoteInFlight.clear();
+    if (this.scrollRafId != null) cancelAnimationFrame(this.scrollRafId);
+    if (this.typeaheadTimer) clearTimeout(this.typeaheadTimer);
     this.nativeSelect?.removeEventListener("change", this.onNativeChange);
     this.nativeSelect?.removeEventListener("invalid", this.onNativeInvalid);
     this.nativeForm?.removeEventListener("reset", this.onFormReset);
     this.rowContentCache.clear();
+    this.rowElementCache.clear();
     this.rowHeightCache.clear();
     this.searchIndex.clear();
     this.portalHost?.remove();
@@ -555,10 +604,23 @@ var ForgeSelect = class {
     }
     if (options.templateResult !== void 0) this.opts.templateResult = options.templateResult;
     if (options.templateSelection !== void 0) this.opts.templateSelection = options.templateSelection;
+    if (options.sanitizeTemplate !== void 0) this.opts.sanitizeTemplate = options.sanitizeTemplate;
+    if (options.beforeSelect !== void 0) this.opts.beforeSelect = options.beforeSelect;
+    if (options.beforeUnselect !== void 0) this.opts.beforeUnselect = options.beforeUnselect;
+    if (options.beforeCreate !== void 0) this.opts.beforeCreate = options.beforeCreate;
+    if (options.createOption !== void 0) this.opts.createOption = options.createOption;
+    if (options.missingSelectionPolicy !== void 0) this.opts.missingSelectionPolicy = options.missingSelectionPolicy;
+    if (options.duplicateValuePolicy !== void 0) {
+      this.opts.duplicateValuePolicy = options.duplicateValuePolicy;
+      this.rebuildOptionIndexes();
+    }
     if (options.filterOption !== void 0) this.opts.filterOption = options.filterOption;
     if (options.searchFields !== void 0) this.opts.searchFields = options.searchFields;
     if (options.tokenSearch !== void 0) this.opts.tokenSearch = options.tokenSearch;
-    if (options.accentInsensitive !== void 0) this.opts.accentInsensitive = options.accentInsensitive;
+    if (options.accentInsensitive !== void 0) {
+      this.opts.accentInsensitive = options.accentInsensitive;
+      this.rebuildOptionIndexes();
+    }
     if (options.searchScorer !== void 0) this.opts.searchScorer = options.searchScorer;
     if (options.highlightSearch !== void 0) this.opts.highlightSearch = options.highlightSearch;
     if (options.minSearchLength !== void 0)
@@ -587,6 +649,8 @@ var ForgeSelect = class {
     this.root.classList.toggle("forge-select--sortable", this.opts.sortable && this.opts.multiple);
     this.updateSearchVisibility();
     this.rowContentCache.clear();
+    this.rowElementCache.clear();
+    this.rowHeightCache.clear();
     this.searchIndex.clear();
     this.renderValue();
     if (this.isOpen) this.renderList();
@@ -618,6 +682,7 @@ var ForgeSelect = class {
   }
   clearRemoteCache() {
     this.remoteCache.clear();
+    this.remoteInFlight.clear();
   }
   setValue(value, options = {}) {
     const values = value == null ? [] : Array.isArray(value) ? value : [value];
@@ -647,10 +712,31 @@ var ForgeSelect = class {
     this.remoteLoaded = true;
     this.page = 0;
     this.hasMore = false;
+    this.nextCursor = void 0;
+    const previousData = this.data;
     this.data = data;
+    try {
+      this.rebuildOptionIndexes();
+    } catch (error) {
+      this.data = previousData;
+      this.rebuildOptionIndexes();
+      throw error;
+    }
+    const missing = this.selected.filter((value) => !this.optionByValue.has(value));
+    if (missing.length > 0 && this.opts.missingSelectionPolicy === "error") {
+      this.data = previousData;
+      this.rebuildOptionIndexes();
+      throw new Error(`ForgeSelect: setData() is missing selected value(s): ${missing.join(", ")}`);
+    }
     this.opts.data = data;
+    if (missing.length > 0 && this.opts.missingSelectionPolicy === "prune") {
+      this.selected = this.selected.filter((value) => this.optionByValue.has(value));
+      this.afterSelectionChange();
+    }
     this.updateSearchVisibility();
     this.rowContentCache.clear();
+    this.rowElementCache.clear();
+    this.rowHeightCache.clear();
     this.searchIndex.clear();
     this.highlightedIndex = -1;
     if (this.isOpen) this.renderList();
@@ -821,10 +907,24 @@ var ForgeSelect = class {
     });
     this.clearBtn.addEventListener("click", (event) => {
       event.stopPropagation();
+      if (this.selected.some((value) => {
+        const option = this.findOption(value) ?? this.selectedOptions.get(value) ?? { value, label: value };
+        return this.opts.beforeUnselect?.(option) === false;
+      }))
+        return;
       this.clearSelection();
     });
     if (this.searchInput) {
+      let composing = false;
+      this.searchInput.addEventListener("compositionstart", () => {
+        composing = true;
+      });
+      this.searchInput.addEventListener("compositionend", () => {
+        composing = false;
+        this.applySearchQuery(this.searchInput.value, true);
+      });
       this.searchInput.addEventListener("input", () => {
+        if (composing) return;
         this.applySearchQuery(this.searchInput.value, true);
       });
       this.searchInput.addEventListener("keydown", (event) => this.handleKeydown(event));
@@ -834,21 +934,22 @@ var ForgeSelect = class {
         const labels = text.split(/[,\n]+/).map((s) => s.trim()).filter(Boolean);
         if (labels.length < 2) return;
         event.preventDefault();
-        const created = [];
-        for (const label of labels) {
-          const result = this.createTag(label);
-          if (result) created.push(result);
-        }
-        if (created.length === 0) return;
-        this.searchInput.value = "";
-        this.query = "";
-        this.afterSelectionChange();
-        for (const result of created) {
-          if (result.created) this.emitter.emit("create", result.option);
-          this.emitter.emit("select", result.option);
-        }
-        if (this.opts.closeOnSelect) this.close();
-        else this.renderList();
+        void Promise.all(labels.map((label) => this.createTag(label))).then((results) => {
+          const created = results.filter((result) => result !== void 0);
+          if (created.length === 0 || this.destroyed) return;
+          this.searchInput.value = "";
+          this.query = "";
+          this.afterSelectionChange();
+          for (const result of created) {
+            if (result.created) this.emitter.emit("create", result.option);
+            this.emitter.emit("select", result.option);
+          }
+          if (this.opts.closeOnSelect) this.close();
+          else this.renderList();
+        }).catch((cause) => {
+          const error = cause instanceof Error ? cause : new Error(String(cause));
+          this.emitter.emit("error", error);
+        });
       });
     }
     this.list.addEventListener("click", (event) => {
@@ -872,8 +973,12 @@ var ForgeSelect = class {
       this.activateNavItem(navIndex);
     });
     this.list.addEventListener("scroll", () => {
-      if (this.usesVirtualScroll()) this.renderRows();
-      this.maybeLoadNextPage();
+      if (this.scrollRafId != null) return;
+      this.scrollRafId = requestAnimationFrame(() => {
+        this.scrollRafId = null;
+        if (this.usesVirtualScroll()) this.renderRows();
+        this.maybeLoadNextPage();
+      });
     });
   }
   applySearchQuery(query, emitSearch) {
@@ -881,7 +986,6 @@ var ForgeSelect = class {
     if (this.searchInput && this.searchInput.value !== query) this.searchInput.value = query;
     this.highlightedIndex = -1;
     this.list.scrollTop = 0;
-    this.rowContentCache.clear();
     if (emitSearch) this.emitter.emit("search", query);
     const trimmed = query.trim();
     const belowMinLength = trimmed !== "" && trimmed.length < this.opts.minSearchLength;
@@ -900,7 +1004,7 @@ var ForgeSelect = class {
     this.renderList();
   }
   handleKeydown(event) {
-    if (this.isDisabled) return;
+    if (this.isDisabled || event.isComposing || event.keyCode === 229) return;
     switch (event.key) {
       case "Enter":
         event.preventDefault();
@@ -935,9 +1039,63 @@ var ForgeSelect = class {
       case "ArrowLeft":
         if (this.isOpen && this.navigateTree("left")) event.preventDefault();
         break;
+      case "Home":
+        if (this.isOpen) {
+          event.preventDefault();
+          this.focusNavIndex(0);
+        }
+        break;
+      case "End":
+        if (this.isOpen) {
+          event.preventDefault();
+          this.focusNavIndex(this.navItems.length - 1);
+        }
+        break;
+      case "PageDown":
+        if (this.isOpen) {
+          event.preventDefault();
+          this.focusNavIndex(
+            Math.min(this.navItems.length - 1, (this.highlightedIndex === -1 ? 0 : this.highlightedIndex) + PAGE_SIZE)
+          );
+        }
+        break;
+      case "PageUp":
+        if (this.isOpen) {
+          event.preventDefault();
+          this.focusNavIndex(Math.max(0, (this.highlightedIndex === -1 ? 0 : this.highlightedIndex) - PAGE_SIZE));
+        }
+        break;
       case "Tab":
         this.close();
         break;
+      default:
+        if (this.isOpen && event.target === this.control && event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+          this.handleTypeahead(event.key);
+        }
+        break;
+    }
+  }
+  /**
+   * Jumps the highlight to the next nav item (wrapping) whose label starts
+   * with the accumulated buffer, matching native <select> typeahead: rapid
+   * distinct keystrokes narrow the prefix, a pause resets it.
+   */
+  handleTypeahead(char) {
+    if (this.typeaheadTimer) clearTimeout(this.typeaheadTimer);
+    this.typeaheadBuffer += normalizeSearchText(char, this.opts.accentInsensitive);
+    this.typeaheadTimer = setTimeout(() => {
+      this.typeaheadBuffer = "";
+      this.typeaheadTimer = null;
+    }, TYPEAHEAD_RESET_MS);
+    const prefix = [...this.typeaheadBuffer].every((value) => value === this.typeaheadBuffer[0]) ? this.typeaheadBuffer[0] : this.typeaheadBuffer;
+    const count = this.navItems.length;
+    for (let step = 1; step <= count; step += 1) {
+      const index = (this.highlightedIndex + step + count) % count;
+      const item = this.navItems[index];
+      if (item.kind === "option" && normalizeSearchText(item.option.label, this.opts.accentInsensitive).startsWith(prefix)) {
+        this.focusNavIndex(index);
+        return;
+      }
     }
   }
   // ---------------------------------------------------------------- selection
@@ -1028,7 +1186,10 @@ var ForgeSelect = class {
       this.control.classList.remove("forge-select__control--invalid");
       this.control.removeAttribute("aria-invalid");
     }
-    if (this.isOpen) this.renderList();
+    if (this.isOpen) {
+      if (this.opts.maxSelections != null) this.renderList();
+      else this.renderRows();
+    }
     if (emitChange) this.emitter.emit("change", this.getValue());
   }
   syncNativeSelect(dispatchChange = true) {
@@ -1061,23 +1222,27 @@ var ForgeSelect = class {
     }
   }
   findOption(value) {
-    return findOption(this.data, value);
+    return this.optionByValue.get(value);
   }
   findOptionByLabel(label) {
-    const lower = label.toLowerCase();
-    const search = (options) => {
-      for (const option of options) {
-        if (option.label.toLowerCase() === lower) return option;
-        const found = option.children ? search(option.children) : void 0;
-        if (found) return found;
-      }
-      return void 0;
+    return this.optionByLabel.get(normalizeSearchText(label, this.opts.accentInsensitive));
+  }
+  rebuildOptionIndexes() {
+    this.optionByValue.clear();
+    this.optionByLabel.clear();
+    const duplicates = /* @__PURE__ */ new Set();
+    const visit = (option) => {
+      if (this.optionByValue.has(option.value)) duplicates.add(option.value);
+      else this.optionByValue.set(option.value, option);
+      const label = normalizeSearchText(option.label, this.opts.accentInsensitive);
+      if (!this.optionByLabel.has(label)) this.optionByLabel.set(label, option);
+      option.children?.forEach(visit);
     };
-    for (const item of this.data) {
-      const found = search(isGroup(item) ? item.options : [item]);
-      if (found) return found;
-    }
-    return void 0;
+    for (const item of this.data) (isGroup(item) ? item.options : [item]).forEach(visit);
+    if (duplicates.size === 0 || this.opts.duplicateValuePolicy === "ignore") return;
+    const message = `ForgeSelect: duplicate option value(s): ${[...duplicates].join(", ")}`;
+    if (this.opts.duplicateValuePolicy === "error") throw new Error(message);
+    console.warn(message);
   }
   /** Selects an existing option matching `label` exactly, or creates and selects a new one. */
   createTag(label) {
@@ -1093,12 +1258,26 @@ var ForgeSelect = class {
       this.selectValue(existing.value, false);
       return { option: existing, created: false };
     }
-    const option = { value: trimmed, label: trimmed };
+    if (this.opts.beforeCreate?.(trimmed) === false) return void 0;
+    const created = this.opts.createOption?.(trimmed) ?? { value: trimmed, label: trimmed };
+    if (created instanceof Promise) {
+      return created.then((option) => option ? this.addCreatedOption(option) : void 0);
+    }
+    return created ? this.addCreatedOption(created) : void 0;
+  }
+  addCreatedOption(option) {
     if (this.opts.multiple && !this.canSelectOption(option)) {
       this.announceMaximum(option);
       return void 0;
     }
+    const duplicate = this.findOption(option.value);
+    if (duplicate) {
+      if (this.selected.includes(duplicate.value)) return void 0;
+      this.selectValue(duplicate.value, false);
+      return { option: duplicate, created: false };
+    }
     this.data.push(option);
+    this.rebuildOptionIndexes();
     this.selectValue(option.value, false);
     return { option, created: true };
   }
@@ -1106,8 +1285,18 @@ var ForgeSelect = class {
     const label = this.query.trim();
     if (!label) return;
     const result = this.createTag(label);
-    if (!result) return;
-    if (this.searchInput) {
+    if (result instanceof Promise) {
+      void result.then((created) => this.finishCreateFromQuery(created, label)).catch((cause) => {
+        const error = cause instanceof Error ? cause : new Error(String(cause));
+        this.emitter.emit("error", error);
+      });
+      return;
+    }
+    this.finishCreateFromQuery(result, label);
+  }
+  finishCreateFromQuery(result, sourceLabel) {
+    if (!result || this.destroyed) return;
+    if (this.searchInput && this.query.trim() === sourceLabel) {
       this.searchInput.value = "";
       this.query = "";
     }
@@ -1115,6 +1304,7 @@ var ForgeSelect = class {
     if (result.created) this.emitter.emit("create", result.option);
     this.emitter.emit("select", result.option);
     if (!this.opts.multiple || this.opts.closeOnSelect) this.close();
+    else if (this.isOpen) this.renderList();
   }
   activateNavItem(navIndex) {
     const item = this.navItems[navIndex];
@@ -1127,9 +1317,11 @@ var ForgeSelect = class {
     if (this.opts.multiple) {
       let changed = false;
       if (this.selected.includes(value)) {
+        if (this.opts.beforeUnselect?.(item.option) === false) return;
         this.deselectValue(value, true);
         changed = true;
       } else if (this.canSelectOption(item.option)) {
+        if (this.opts.beforeSelect?.(item.option) === false) return;
         this.selectValue(value, true);
         changed = true;
       } else {
@@ -1137,6 +1329,7 @@ var ForgeSelect = class {
       }
       if (changed && this.opts.closeOnSelect) this.close();
     } else {
+      if (this.opts.beforeSelect?.(item.option) === false) return;
       this.selectValue(value, true);
       this.close();
       this.control.focus();
@@ -1161,7 +1354,7 @@ var ForgeSelect = class {
         tag.className = "forge-select__tag";
         const label = document.createElement("span");
         label.className = "forge-select__tag-label";
-        renderOptionContent(label, option, this.opts.templateSelection, "inline");
+        renderOptionContent(label, option, this.opts.templateSelection, "inline", this.opts.sanitizeTemplate);
         const remove = document.createElement("button");
         remove.type = "button";
         remove.className = "forge-select__tag-remove";
@@ -1169,7 +1362,7 @@ var ForgeSelect = class {
         remove.textContent = "\xD7";
         remove.addEventListener("click", (event) => {
           event.stopPropagation();
-          if (!this.isDisabled) this.deselectValue(value, true);
+          if (!this.isDisabled && this.opts.beforeUnselect?.(option) !== false) this.deselectValue(value, true);
         });
         tag.append(label, remove);
         if (this.opts.sortable) {
@@ -1189,7 +1382,7 @@ var ForgeSelect = class {
       };
       const span = document.createElement("span");
       span.className = "forge-select__single-value";
-      renderOptionContent(span, option, this.opts.templateSelection, "inline");
+      renderOptionContent(span, option, this.opts.templateSelection, "inline", this.opts.sanitizeTemplate);
       this.valueEl.append(span);
     }
   }
@@ -1289,6 +1482,7 @@ var ForgeSelect = class {
   buildRows() {
     this.rows = [];
     this.navItems = [];
+    this.rowOffsetsCache = null;
     const trimmedQuery = this.query.trim();
     const query = normalizeSearchText(trimmedQuery, this.opts.accentInsensitive);
     const matches = (option) => query === "" || (this.opts.filterOption ? this.opts.filterOption(option, trimmedQuery) : this.searchIndex.score(option, trimmedQuery, {
@@ -1297,7 +1491,14 @@ var ForgeSelect = class {
       accentInsensitive: this.opts.accentInsensitive,
       scorer: this.opts.searchScorer
     }) > 0);
-    const subtreeMatches = (option) => query === "" || matches(option) || (option.children ?? []).some(subtreeMatches);
+    const subtreeMatchCache = /* @__PURE__ */ new Map();
+    const subtreeMatches = (option) => {
+      const cached = subtreeMatchCache.get(option);
+      if (cached !== void 0) return cached;
+      const result = query === "" || matches(option) || (option.children ?? []).some(subtreeMatches);
+      subtreeMatchCache.set(option, result);
+      return result;
+    };
     const pushOption = (option, depth, parentValue) => {
       let navIndex = -1;
       const interactionDisabled = this.isOptionDisabled(option) || this.hasReachedMaximum() && !this.selected.includes(option.value);
@@ -1353,7 +1554,7 @@ var ForgeSelect = class {
     return this.opts.virtualScroll !== false && this.rows.length > VIRTUAL_THRESHOLD;
   }
   rowKey(row, index) {
-    if (row.kind === "option") return `option:${row.option.value}`;
+    if (row.kind === "option") return `option:${row.option.value}:${index}`;
     if (row.kind === "group") return `group:${row.label}:${index}`;
     return `${row.kind}:${index}`;
   }
@@ -1367,8 +1568,10 @@ var ForgeSelect = class {
     return offset;
   }
   rowOffsets() {
+    if (this.rowOffsetsCache) return this.rowOffsetsCache;
     const offsets = [0];
     for (let i = 0; i < this.rows.length; i += 1) offsets.push(offsets[i] + this.measuredRowHeight(i));
+    this.rowOffsetsCache = offsets;
     return offsets;
   }
   renderList() {
@@ -1393,7 +1596,14 @@ var ForgeSelect = class {
     if (virtual) {
       const viewport = clientHeight || rowHeight * 8;
       if (this.opts.variableItemHeight) {
-        while (start < this.rows.length && offsets[start + 1] < scrollTop) start += 1;
+        let low = 0;
+        let high = this.rows.length;
+        while (low < high) {
+          const middle = low + high >>> 1;
+          if (offsets[middle + 1] < scrollTop) low = middle + 1;
+          else high = middle;
+        }
+        start = low;
         start = Math.max(0, start - VIRTUAL_BUFFER);
         end = start;
         const target = scrollTop + viewport + VIRTUAL_BUFFER * rowHeight;
@@ -1408,12 +1618,27 @@ var ForgeSelect = class {
       topSpacer.style.height = `${offsets?.[start] ?? this.rowOffset(start)}px`;
       this.list.append(topSpacer);
     }
+    const appended = [];
     for (let i = start; i < end; i++) {
-      const element = this.renderRow(this.rows[i]);
+      const key = this.rowKey(this.rows[i], i);
+      const element = this.renderRow(this.rows[i], this.rowElementCache.get(key));
+      this.rowElementCache.set(key, element);
+      if (this.rowElementCache.size > ROW_CACHE_LIMIT) {
+        const oldest = this.rowElementCache.keys().next().value;
+        this.rowElementCache.delete(oldest);
+      }
       this.list.append(element);
-      if (this.opts.variableItemHeight) {
+      appended.push(element);
+    }
+    if (this.opts.variableItemHeight) {
+      for (let i = start; i < end; i++) {
+        const element = appended[i - start];
         const measured = element.getBoundingClientRect().height || element.offsetHeight;
-        if (measured > 0) this.rowHeightCache.set(this.rowKey(this.rows[i], i), measured);
+        if (measured > 0) {
+          const key = this.rowKey(this.rows[i], i);
+          if (this.rowHeightCache.get(key) !== measured) this.rowOffsetsCache = null;
+          this.rowHeightCache.set(key, measured);
+        }
       }
     }
     if (virtual) {
@@ -1428,8 +1653,22 @@ var ForgeSelect = class {
     }
     this.updateActiveDescendant();
   }
-  renderRow(row) {
-    const li = document.createElement("li");
+  renderRow(row, recycled) {
+    const li = recycled ?? document.createElement("li");
+    li.replaceChildren();
+    li.className = "";
+    for (const attribute of [
+      "role",
+      "id",
+      "aria-hidden",
+      "aria-selected",
+      "aria-disabled",
+      "aria-expanded",
+      "aria-level",
+      "data-nav-index",
+      "data-option-value"
+    ])
+      li.removeAttribute(attribute);
     switch (row.kind) {
       case "group":
         li.className = "forge-select__group-label";
@@ -1549,7 +1788,7 @@ var ForgeSelect = class {
     if (!cached) {
       const holder = document.createElement("span");
       holder.className = "forge-select__option-content";
-      renderOptionContent(holder, option, this.opts.templateResult);
+      renderOptionContent(holder, option, this.opts.templateResult, "row", this.opts.sanitizeTemplate);
       if (this.rowContentCache.size >= ROW_CACHE_LIMIT) {
         const oldest = this.rowContentCache.keys().next().value;
         this.rowContentCache.delete(oldest);
@@ -1565,6 +1804,7 @@ var ForgeSelect = class {
     this.focusNavIndex(next);
   }
   focusNavIndex(next) {
+    if (this.navItems.length === 0) return;
     this.highlightedIndex = next;
     if (this.usesVirtualScroll()) {
       const rowIndex = this.rows.findIndex(
@@ -1637,6 +1877,7 @@ var ForgeSelect = class {
     this.ajaxController = null;
     this.page = 0;
     this.hasMore = true;
+    this.nextCursor = void 0;
     this.setLoading(true);
     this.loadingMore = false;
     this.loadError = null;
@@ -1651,17 +1892,27 @@ var ForgeSelect = class {
     this.loading = loading;
     this.emitter.emit("loading", loading);
   }
-  remoteCacheKey(query, page) {
-    return `${query}\0${page}`;
+  remoteCacheKey(query, page, cursor) {
+    return `${query}\0${cursor ?? page}`;
   }
-  async requestRemote(query, page, signal) {
+  fetchRemoteResult(query, page, signal, cursor) {
+    const key = this.remoteCacheKey(query, page, cursor);
+    const pending = this.remoteInFlight.get(key);
+    if (pending) return pending;
+    const ajax = this.opts.ajax;
+    const request = this.requestRemote(query, page, signal, cursor).then((json) => normalizeRemoteResult(ajax, json)).finally(() => this.remoteInFlight.delete(key));
+    this.remoteInFlight.set(key, request);
+    return request;
+  }
+  async requestRemote(query, page, signal, cursor) {
     const ajax = this.opts.ajax;
     const attempts = Math.max(0, Math.floor(ajax.retry ?? 0)) + 1;
     let lastError;
     for (let attempt = 0; attempt < attempts; attempt += 1) {
       try {
-        if (ajax.request) return await ajax.request(query, page, signal);
-        const response = await fetch(buildUrl(ajax, query, page), { signal });
+        if (ajax.request)
+          return cursor === void 0 ? await ajax.request(query, page, signal) : await ajax.request(query, page, signal, cursor);
+        const response = await fetch(buildUrl(ajax, query, page, cursor), { signal });
         if (response.ok === false) throw new Error(`ForgeSelect: remote request failed with HTTP ${response.status}`);
         return await response.json();
       } catch (error) {
@@ -1689,10 +1940,13 @@ var ForgeSelect = class {
     const key = this.remoteCacheKey(query, 0);
     if (this.remoteCache.get(key)) return;
     const controller = new AbortController();
+    this.prefetchControllers.add(controller);
     try {
-      const json = await this.requestRemote(query, 0, controller.signal);
-      this.remoteCache.set(key, normalizeRemoteResult(ajax, json), ajax.cacheTtl ?? 3e4);
+      const result = await this.fetchRemoteResult(query, 0, controller.signal);
+      this.remoteCache.set(key, result, ajax.cacheTtl ?? 3e4);
     } catch {
+    } finally {
+      this.prefetchControllers.delete(controller);
     }
   }
   /**
@@ -1718,12 +1972,12 @@ var ForgeSelect = class {
     const controller = new AbortController();
     this.ajaxController = controller;
     const page = append ? this.page + 1 : 0;
+    const cursor = append ? this.nextCursor : void 0;
     try {
-      const key = this.remoteCacheKey(query, page);
+      const key = this.remoteCacheKey(query, page, cursor);
       let result = this.remoteCache.get(key);
       if (!result) {
-        const json = await this.requestRemote(query, page, controller.signal);
-        result = normalizeRemoteResult(ajax, json);
+        result = await this.fetchRemoteResult(query, page, controller.signal, cursor);
         this.remoteCache.set(key, result, ajax.cacheTtl ?? 3e4);
       }
       if (activeRequestId !== this.ajaxRequestId || this.destroyed) return;
@@ -1734,17 +1988,21 @@ var ForgeSelect = class {
       } else {
         this.data = options;
         this.rowContentCache.clear();
+        this.rowHeightCache.clear();
       }
       this.page = page;
       this.hasMore = hasMore;
+      this.nextCursor = result.nextCursor;
       this.remoteLoaded = true;
       this.loadError = null;
+      this.rebuildOptionIndexes();
     } catch (cause) {
       if (activeRequestId !== this.ajaxRequestId || this.destroyed || controller.signal.aborted) return;
       const error = cause instanceof Error ? cause : new Error(String(cause));
       if (!append) {
         this.data = [];
         this.rowContentCache.clear();
+        this.rowHeightCache.clear();
       }
       this.hasMore = false;
       this.loadError = error;