forge-select 0.6.0 → 0.7.1

package/dist/index.cjs

@@ -123,10 +123,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;
   }
@@ -163,12 +163,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 (typeof ajax.url === "function") return ajax.url(query, page, cursor);
   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()}`;
 }
@@ -180,7 +180,12 @@ 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
@@ -294,21 +299,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;
@@ -343,6 +333,8 @@ 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;
@@ -360,6 +352,7 @@ var ForgeSelect = class {
     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;
@@ -375,6 +368,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;
@@ -443,6 +438,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,
@@ -464,6 +466,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);
@@ -501,6 +504,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");
@@ -515,6 +520,8 @@ 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);
@@ -546,11 +553,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`;
     }
   }
@@ -561,13 +573,15 @@ 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.rowHeightCache.clear();
+    this.clearRowCaches();
     this.searchIndex.clear();
     this.portalHost?.remove();
     this.root.remove();
@@ -615,10 +629,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)
@@ -646,8 +673,7 @@ var ForgeSelect = class {
     }
     this.root.classList.toggle("forge-select--sortable", this.opts.sortable && this.opts.multiple);
     this.updateSearchVisibility();
-    this.rowContentCache.clear();
-    this.rowHeightCache.clear();
+    this.clearRowCaches();
     this.searchIndex.clear();
     this.renderValue();
     if (this.isOpen) this.renderList();
@@ -679,6 +705,7 @@ var ForgeSelect = class {
   }
   clearRemoteCache() {
     this.remoteCache.clear();
+    this.remoteInFlight.clear();
   }
   setValue(value, options = {}) {
     const values = value == null ? [] : Array.isArray(value) ? value : [value];
@@ -708,11 +735,29 @@ 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.rowHeightCache.clear();
+    this.clearRowCaches();
     this.searchIndex.clear();
     this.highlightedIndex = -1;
     if (this.isOpen) this.renderList();
@@ -853,6 +898,7 @@ var ForgeSelect = class {
     if (portalParent) {
       this.portalHost = document.createElement("div");
       this.portalHost.className = "forge-select forge-select--portal-host";
+      this.portalHost.style.direction = getComputedStyle(this.root).direction;
       this.portalHost.dataset.theme = this.opts.theme;
       this.portalHost.style.setProperty("--fs-item-height", `${this.opts.itemHeight}px`);
       this.portalHost.append(this.dropdown);
@@ -883,10 +929,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));
@@ -896,21 +956,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) => {
@@ -965,7 +1026,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();
@@ -1183,23 +1244,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) {
@@ -1212,15 +1277,31 @@ var ForgeSelect = class {
         this.announceMaximum(existing);
         return void 0;
       }
+      if (this.opts.beforeSelect?.(existing) === false) return void 0;
       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;
+      if (this.opts.beforeSelect?.(duplicate) === false) 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 };
   }
@@ -1228,8 +1309,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 = "";
     }
@@ -1250,9 +1341,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 {
@@ -1260,6 +1353,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();
@@ -1284,7 +1378,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";
@@ -1292,7 +1386,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) {
@@ -1312,7 +1406,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);
     }
   }
@@ -1421,7 +1515,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);
@@ -1476,8 +1577,20 @@ var ForgeSelect = class {
   usesVirtualScroll() {
     return this.opts.virtualScroll !== false && this.rows.length > VIRTUAL_THRESHOLD;
   }
+  /**
+   * Drops every per-row cache at once. Rendered content, recycled <li>
+   * elements, and measured heights are all keyed off the current `data`, so
+   * they must be invalidated together whenever `data` is replaced — clearing
+   * only some of them leaves recycled rows carrying state from the old list.
+   */
+  clearRowCaches() {
+    this.rowContentCache.clear();
+    this.rowElementCache.clear();
+    this.rowHeightCache.clear();
+    this.rowOffsetsCache = null;
+  }
   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}`;
   }
@@ -1519,7 +1632,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;
@@ -1536,7 +1656,13 @@ var ForgeSelect = class {
     }
     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);
       appended.push(element);
     }
@@ -1563,8 +1689,27 @@ 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",
+      "data-selection-state",
+      // Tree rows set an inline padding-left indent; clearing the whole
+      // attribute keeps recycling self-contained, so a row reused at a
+      // shallower depth can't inherit the previous row's indent.
+      "style"
+    ])
+      li.removeAttribute(attribute);
     switch (row.kind) {
       case "group":
         li.className = "forge-select__group-label";
@@ -1612,45 +1757,47 @@ var ForgeSelect = class {
         li.textContent = format(this.strings.createOption, { query: this.query.trim() });
         if (row.navIndex === this.highlightedIndex) li.classList.add("forge-select__option--highlighted");
         break;
-      case "option": {
-        li.className = "forge-select__option";
-        li.dataset.optionValue = row.option.value;
-        if (row.option.className) li.classList.add(...row.option.className.trim().split(/\s+/).filter(Boolean));
-        li.setAttribute("role", "option");
-        const isSelected = this.selected.includes(row.option.value);
-        li.setAttribute("aria-selected", String(isSelected));
-        if (isSelected) li.classList.add("forge-select__option--selected");
-        if (this.opts.multiple && row.hasChildren && computeCheckState(row.option, this.selected, this.isOptionDisabled) === "some") {
-          li.classList.add("forge-select__option--indeterminate");
-          li.dataset.selectionState = "mixed";
-        }
-        if (row.depth > 0) {
-          li.style.paddingLeft = `calc(12px + ${row.depth} * var(--fs-tree-indent, 18px))`;
-        }
-        if (this.isOptionDisabled(row.option) || this.hasReachedMaximum() && !this.selected.includes(row.option.value)) {
-          li.classList.add("forge-select__option--disabled");
-          li.setAttribute("aria-disabled", "true");
-        } else {
-          li.id = `${this.uid}-nav-${row.navIndex}`;
-          li.dataset.navIndex = String(row.navIndex);
-          if (row.navIndex === this.highlightedIndex) li.classList.add("forge-select__option--highlighted");
-        }
-        if (row.hasChildren) {
-          const expanded = this.query !== "" || this.expandedValues.has(row.option.value);
-          li.setAttribute("aria-expanded", String(expanded));
-          const twisty = document.createElement("span");
-          twisty.className = "forge-select__twisty";
-          twisty.dataset.twisty = row.option.value;
-          twisty.setAttribute("aria-hidden", "true");
-          twisty.textContent = expanded ? "\u25BC" : "\u25B6";
-          li.append(twisty);
-        }
-        li.append(this.optionContent(row.option));
+      case "option":
+        this.renderOptionRow(li, row);
         break;
-      }
     }
     return li;
   }
+  renderOptionRow(li, row) {
+    li.className = "forge-select__option";
+    li.dataset.optionValue = row.option.value;
+    if (row.option.className) li.classList.add(...row.option.className.trim().split(/\s+/).filter(Boolean));
+    li.setAttribute("role", "option");
+    const isSelected = this.selected.includes(row.option.value);
+    li.setAttribute("aria-selected", String(isSelected));
+    if (isSelected) li.classList.add("forge-select__option--selected");
+    if (this.opts.multiple && row.hasChildren && computeCheckState(row.option, this.selected, this.isOptionDisabled) === "some") {
+      li.classList.add("forge-select__option--indeterminate");
+      li.dataset.selectionState = "mixed";
+    }
+    if (row.depth > 0) {
+      li.style.paddingLeft = `calc(12px + ${row.depth} * var(--fs-tree-indent, 18px))`;
+    }
+    if (this.isOptionDisabled(row.option) || this.hasReachedMaximum() && !this.selected.includes(row.option.value)) {
+      li.classList.add("forge-select__option--disabled");
+      li.setAttribute("aria-disabled", "true");
+    } else {
+      li.id = `${this.uid}-nav-${row.navIndex}`;
+      li.dataset.navIndex = String(row.navIndex);
+      if (row.navIndex === this.highlightedIndex) li.classList.add("forge-select__option--highlighted");
+    }
+    if (row.hasChildren) {
+      const expanded = this.query !== "" || this.expandedValues.has(row.option.value);
+      li.setAttribute("aria-expanded", String(expanded));
+      const twisty = document.createElement("span");
+      twisty.className = "forge-select__twisty";
+      twisty.dataset.twisty = row.option.value;
+      twisty.setAttribute("aria-hidden", "true");
+      twisty.textContent = expanded ? "\u25BC" : "\u25B6";
+      li.append(twisty);
+    }
+    li.append(this.optionContent(row.option));
+  }
   /**
    * Rendered row content is cached per option value and cloned on each render,
    * so templates run once per option instead of once per scroll frame.
@@ -1684,7 +1831,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);
@@ -1773,6 +1920,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;
@@ -1787,17 +1935,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) {
@@ -1825,10 +1983,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);
     }
   }
   /**
@@ -1854,12 +2015,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;
@@ -1869,20 +2030,20 @@ var ForgeSelect = class {
         this.data = [...this.data, ...options.filter((o) => !existing.has(o.value))];
       } else {
         this.data = options;
-        this.rowContentCache.clear();
-        this.rowHeightCache.clear();
+        this.clearRowCaches();
       }
       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.clearRowCaches();
       }
       this.hasMore = false;
       this.loadError = error;