forge-select 0.3.0 → 0.4.0

package/dist/index.js

@@ -24,6 +24,17 @@ var Emitter = class {
   }
 };
 
+// src/dropdown-position.ts
+function computeDropdownPlacement(controlRect, dropdownHeight, viewportHeight, gap = 4) {
+  const spaceBelow = viewportHeight - controlRect.bottom;
+  const spaceAbove = controlRect.top;
+  const dropUp = dropdownHeight > spaceBelow && spaceAbove > spaceBelow;
+  return {
+    dropUp,
+    top: dropUp ? controlRect.top - dropdownHeight - gap : controlRect.bottom + gap
+  };
+}
+
 // src/i18n.ts
 var locales = {
   en: {
@@ -35,7 +46,9 @@ var locales = {
     clearSelection: "Clear selection",
     removeItem: "Remove {label}",
     search: "Search",
-    reorderHint: "{label}. Press Alt+Left or Alt+Right to reorder."
+    reorderHint: "{label}. Press Alt+Left or Alt+Right to reorder.",
+    minSearchLength: "Type {count} or more characters to search",
+    maximumSelected: "Maximum of {count} selections reached"
   },
   vi: {
     noResults: "Kh\xF4ng t\xECm th\u1EA5y k\u1EBFt qu\u1EA3",
@@ -46,7 +59,9 @@ var locales = {
     clearSelection: "X\xF3a l\u1EF1a ch\u1ECDn",
     removeItem: "X\xF3a {label}",
     search: "T\xECm ki\u1EBFm",
-    reorderHint: "{label}. Nh\u1EA5n Alt+Tr\xE1i ho\u1EB7c Alt+Ph\u1EA3i \u0111\u1EC3 s\u1EAFp x\u1EBFp l\u1EA1i."
+    reorderHint: "{label}. Nh\u1EA5n Alt+Tr\xE1i ho\u1EB7c Alt+Ph\u1EA3i \u0111\u1EC3 s\u1EAFp x\u1EBFp l\u1EA1i.",
+    minSearchLength: "Nh\u1EADp th\xEAm {count} k\xFD t\u1EF1 \u0111\u1EC3 t\xECm ki\u1EBFm",
+    maximumSelected: "\u0110\xE3 \u0111\u1EA1t t\u1ED1i \u0111a {count} l\u1EF1a ch\u1ECDn"
   }
 };
 function getStrings(language) {
@@ -122,6 +137,7 @@ function renderOptionContent(container, option, template, variant = "row") {
 
 // src/remote.ts
 function buildUrl(ajax, query, page) {
+  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();
@@ -144,18 +160,19 @@ function normalizeRemoteResult(ajax, response) {
 function isGroup(item) {
   return item.options !== void 0;
 }
-function collectDescendantValues(option) {
+var defaultIsDisabled = (option) => !!option.disabled;
+function collectDescendantValues(option, isDisabled = defaultIsDisabled) {
   if (!option.children) return [];
   const values = [];
   for (const child of option.children) {
-    if (!child.disabled) values.push(child.value);
-    values.push(...collectDescendantValues(child));
+    if (!isDisabled(child)) values.push(child.value);
+    values.push(...collectDescendantValues(child, isDisabled));
   }
   return values;
 }
-function computeCheckState(option, selected) {
+function computeCheckState(option, selected, isDisabled = defaultIsDisabled) {
   if (!option.children?.length) return selected.includes(option.value) ? "all" : "none";
-  const states = option.children.filter((child) => !child.disabled).map((child) => computeCheckState(child, selected));
+  const states = option.children.filter((child) => !isDisabled(child)).map((child) => computeCheckState(child, selected, isDisabled));
   if (states.length === 0) return "none";
   if (states.every((state) => state === "all")) return "all";
   if (states.every((state) => state === "none")) return "none";
@@ -176,11 +193,11 @@ function findOption(items, value) {
   }
   return void 0;
 }
-function syncTreeAncestors(items, selected) {
+function syncTreeAncestors(items, selected, isDisabled = defaultIsDisabled) {
   const sync = (option) => {
     if (!option.children?.length) return;
     for (const child of option.children) sync(child);
-    const state = computeCheckState(option, selected);
+    const state = computeCheckState(option, selected, isDisabled);
     const index = selected.indexOf(option.value);
     if (state === "all" && index === -1) selected.push(option.value);
     else if (state !== "all" && index !== -1) selected.splice(index, 1);
@@ -214,6 +231,7 @@ var ForgeSelect = class {
     this.emitter = new Emitter();
     this.uid = `forge-select-${++uidCounter}`;
     this.searchInput = null;
+    this.portalHost = null;
     this.isOpen = false;
     this.isDisabled = false;
     this.destroyed = false;
@@ -237,8 +255,25 @@ var ForgeSelect = class {
     this.nativeSelect = null;
     this.nativeForm = null;
     this.syncingNative = false;
+    /** Combines the static `disabled` field with the dynamic `isOptionDisabled` callback. */
+    this.isOptionDisabled = (option) => option.disabled === true || (this.opts.isOptionDisabled?.(option) ?? false);
+    this.pointerDownOnControl = false;
     this.onDocumentMouseDown = (event) => {
-      if (!this.root.contains(event.target)) this.close();
+      const target = event.target;
+      if (!this.root.contains(target) && !this.portalHost?.contains(target)) this.close();
+    };
+    this.onWindowResize = () => {
+      this.positionDropdown();
+    };
+    this.onAncestorScroll = () => {
+      if (this.portalHost) this.positionDropdown();
+    };
+    this.onNativeInvalid = (event) => {
+      event.preventDefault();
+      this.control.classList.add("forge-select__control--invalid");
+      this.control.setAttribute("aria-invalid", "true");
+      if (!this.isOpen) this.open();
+      this.control.focus();
     };
     this.onNativeChange = () => {
       if (!this.nativeSelect || this.destroyed || this.syncingNative) return;
@@ -267,19 +302,29 @@ var ForgeSelect = class {
       clearable: options.clearable ?? false,
       allowCreate: options.allowCreate ?? false,
       sortable: options.sortable ?? false,
+      closeOnSelect: options.closeOnSelect ?? false,
+      maxSelections: options.maxSelections == null || !Number.isFinite(options.maxSelections) ? void 0 : Math.max(0, Math.floor(options.maxSelections)),
       theme: options.theme ?? "default",
       disabled: options.disabled ?? nativeSelect?.disabled ?? false,
+      required: options.required ?? nativeSelect?.required ?? false,
       data: options.data,
       ajax: options.ajax,
       templateResult: options.templateResult,
       templateSelection: options.templateSelection,
+      filterOption: options.filterOption,
+      minSearchLength: Math.max(0, Math.floor(options.minSearchLength ?? 0)),
+      minResultsForSearch: Math.max(0, Math.floor(options.minResultsForSearch ?? 0)),
+      isOptionDisabled: options.isOptionDisabled,
       virtualScroll: options.virtualScroll,
       itemHeight: options.itemHeight ?? DEFAULT_ITEM_HEIGHT,
       language: options.language ?? "en",
-      plugins: options.plugins ?? []
+      plugins: options.plugins ?? [],
+      openOnFocus: options.openOnFocus ?? false,
+      dropdownParent: options.dropdownParent
     };
     this.strings = getStrings(this.opts.language);
     this.plugins = this.opts.plugins;
+    if (nativeSelect) nativeSelect.required = this.opts.required;
     this.data = this.opts.data ?? (nativeSelect ? parseNativeOptions(nativeSelect) : []);
     if (nativeSelect && !this.opts.data) {
       const nativeOptions = Array.from(nativeSelect.options);
@@ -292,6 +337,7 @@ var ForgeSelect = class {
     this.renderValue();
     if (this.opts.disabled) this.disable();
     nativeSelect?.addEventListener("change", this.onNativeChange);
+    nativeSelect?.addEventListener("invalid", this.onNativeInvalid);
     this.nativeForm?.addEventListener("reset", this.onFormReset);
     for (const plugin of this.plugins) plugin.onInit?.(this);
   }
@@ -314,7 +360,10 @@ var ForgeSelect = class {
       this.scheduleRemoteLoad(this.query, 0);
     }
     this.renderList();
-    if (this.searchInput) this.searchInput.focus();
+    this.positionDropdown();
+    window.addEventListener("resize", this.onWindowResize);
+    document.addEventListener("scroll", this.onAncestorScroll, true);
+    if (this.searchInput && !this.searchInput.hidden) this.searchInput.focus();
     this.emitter.emit("open");
     for (const plugin of this.plugins) plugin.onOpen?.(this);
   }
@@ -323,8 +372,11 @@ var ForgeSelect = class {
     this.isOpen = false;
     this.dropdown.hidden = true;
     this.root.classList.remove("forge-select--open");
+    this.root.classList.remove("forge-select--drop-up");
     this.control.setAttribute("aria-expanded", "false");
     document.removeEventListener("mousedown", this.onDocumentMouseDown);
+    window.removeEventListener("resize", this.onWindowResize);
+    document.removeEventListener("scroll", this.onAncestorScroll, true);
     this.highlightedIndex = -1;
     if (this.searchInput) {
       this.searchInput.value = "";
@@ -333,6 +385,23 @@ var ForgeSelect = class {
     this.emitter.emit("close");
     for (const plugin of this.plugins) plugin.onClose?.(this);
   }
+  /**
+   * Flips the dropdown above the control when there isn't enough room below
+   * but there is above. Recomputed on open() and on window resize — the
+   * dropdown is positioned absolutely inside the relatively-positioned root,
+   * so it already tracks the control correctly on page scroll without
+   * needing a scroll listener.
+   */
+  positionDropdown() {
+    const controlRect = this.control.getBoundingClientRect();
+    const placement = computeDropdownPlacement(controlRect, this.dropdown.offsetHeight, 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.width = `${controlRect.width}px`;
+    }
+  }
   destroy() {
     if (this.destroyed) return;
     this.close();
@@ -341,8 +410,10 @@ var ForgeSelect = class {
     if (this.ajaxTimer) clearTimeout(this.ajaxTimer);
     this.ajaxController?.abort();
     this.nativeSelect?.removeEventListener("change", this.onNativeChange);
+    this.nativeSelect?.removeEventListener("invalid", this.onNativeInvalid);
     this.nativeForm?.removeEventListener("reset", this.onFormReset);
     this.rowContentCache.clear();
+    this.portalHost?.remove();
     this.root.remove();
     this.el.style.display = this.originalDisplay;
     if (this.nativeSelect) this.nativeSelect.disabled = this.originalDisabled;
@@ -360,6 +431,52 @@ var ForgeSelect = class {
     for (const v of next) this.selectValue(v, false);
     this.afterSelectionChange(options.emitChange ?? true);
   }
+  /**
+   * Replaces the option list after construction. An open dropdown re-renders
+   * immediately; a selection whose value isn't in the new data stays
+   * selected (rendered via the already-selected option's own label/avatar,
+   * the same fallback used for values selected from a stale ajax page).
+   */
+  setData(data) {
+    if (this.ajaxTimer) {
+      clearTimeout(this.ajaxTimer);
+      this.ajaxTimer = null;
+    }
+    this.ajaxController?.abort();
+    this.ajaxController = null;
+    this.ajaxRequestId += 1;
+    this.loading = false;
+    this.loadingMore = false;
+    this.loadError = null;
+    this.remoteLoaded = true;
+    this.page = 0;
+    this.hasMore = false;
+    this.data = data;
+    this.opts.data = data;
+    this.updateSearchVisibility();
+    this.rowContentCache.clear();
+    this.highlightedIndex = -1;
+    if (this.isOpen) this.renderList();
+  }
+  /**
+   * Multi-select only: selects every currently non-disabled option, including
+   * nested tree descendants and options inside groups. If `maxSelections` is
+   * set, stops once the cap is reached rather than exceeding it. A no-op for
+   * single-select.
+   */
+  selectAll() {
+    if (!this.opts.multiple) return;
+    this.selected = [];
+    for (const value of this.allSelectableValues()) {
+      const option = this.findOption(value);
+      if (option && this.canSelectOption(option)) this.selectValue(value, false);
+    }
+    this.afterSelectionChange();
+  }
+  /** Clears every selection. Equivalent to `setValue(null)`. */
+  clearAll() {
+    this.clearSelection();
+  }
   enable() {
     this.isDisabled = false;
     this.root.classList.remove("forge-select--disabled");
@@ -405,7 +522,22 @@ var ForgeSelect = class {
       }
     }
   }
+  shouldShowSearch() {
+    return this.opts.searchable && (this.opts.ajax != null || collectValues(this.data).size >= this.opts.minResultsForSearch);
+  }
+  updateSearchVisibility() {
+    if (!this.searchInput) return;
+    this.searchInput.hidden = !this.shouldShowSearch();
+    if (this.searchInput.hidden) {
+      this.searchInput.value = "";
+      this.query = "";
+    }
+  }
   buildDom() {
+    const portalParent = typeof this.opts.dropdownParent === "string" ? document.querySelector(this.opts.dropdownParent) : this.opts.dropdownParent;
+    if (this.opts.dropdownParent && !portalParent) {
+      throw new Error(`ForgeSelect: dropdown parent not found: ${String(this.opts.dropdownParent)}`);
+    }
     this.root = document.createElement("div");
     this.root.className = "forge-select";
     this.root.dataset.theme = this.opts.theme;
@@ -417,6 +549,7 @@ var ForgeSelect = class {
     this.control.setAttribute("aria-haspopup", "listbox");
     this.control.setAttribute("aria-expanded", "false");
     this.control.setAttribute("aria-controls", `${this.uid}-list`);
+    if (this.opts.required) this.control.setAttribute("aria-required", "true");
     this.control.tabIndex = 0;
     this.applyAccessibleName();
     this.valueEl = document.createElement("div");
@@ -441,6 +574,7 @@ var ForgeSelect = class {
       this.searchInput.setAttribute("aria-label", this.strings.search);
       this.searchInput.setAttribute("aria-autocomplete", "list");
       this.searchInput.setAttribute("aria-controls", `${this.uid}-list`);
+      this.searchInput.hidden = !this.shouldShowSearch();
       this.dropdown.append(this.searchInput);
     }
     this.list = document.createElement("ul");
@@ -453,9 +587,18 @@ var ForgeSelect = class {
     this.liveRegion.className = "forge-select__sr-only";
     this.liveRegion.setAttribute("role", "status");
     this.liveRegion.setAttribute("aria-live", "polite");
-    this.root.append(this.control, this.dropdown, this.liveRegion);
+    this.root.append(this.control, this.liveRegion);
+    if (!portalParent) this.root.append(this.dropdown);
     this.el.style.display = "none";
     this.el.insertAdjacentElement("afterend", this.root);
+    if (portalParent) {
+      this.portalHost = document.createElement("div");
+      this.portalHost.className = "forge-select forge-select--portal-host";
+      this.portalHost.dataset.theme = this.opts.theme;
+      this.portalHost.style.setProperty("--fs-item-height", `${this.opts.itemHeight}px`);
+      this.portalHost.append(this.dropdown);
+      portalParent.append(this.portalHost);
+    }
     this.bindEvents();
   }
   bindEvents() {
@@ -470,6 +613,15 @@ var ForgeSelect = class {
       else this.open();
     });
     this.control.addEventListener("keydown", (event) => this.handleKeydown(event));
+    this.control.addEventListener("mousedown", () => {
+      this.pointerDownOnControl = true;
+    });
+    this.control.addEventListener("focus", () => {
+      if (this.opts.openOnFocus && !this.pointerDownOnControl && !this.isOpen && !this.isDisabled) {
+        this.open();
+      }
+      this.pointerDownOnControl = false;
+    });
     this.clearBtn.addEventListener("click", (event) => {
       event.stopPropagation();
       this.clearSelection();
@@ -480,13 +632,45 @@ var ForgeSelect = class {
         this.highlightedIndex = -1;
         this.list.scrollTop = 0;
         this.emitter.emit("search", this.query);
-        if (this.opts.ajax) {
+        const trimmed = this.query.trim();
+        const belowMinLength = trimmed !== "" && trimmed.length < this.opts.minSearchLength;
+        if (this.opts.ajax && !belowMinLength) {
           this.scheduleRemoteLoad(this.query, this.opts.ajax.debounce ?? 250);
         } else {
+          if (belowMinLength) {
+            if (this.ajaxTimer) {
+              clearTimeout(this.ajaxTimer);
+              this.ajaxTimer = null;
+            }
+            this.ajaxController?.abort();
+            this.loading = false;
+          }
           this.renderList();
         }
       });
       this.searchInput.addEventListener("keydown", (event) => this.handleKeydown(event));
+      this.searchInput.addEventListener("paste", (event) => {
+        if (!this.opts.multiple || !this.opts.allowCreate) return;
+        const text = event.clipboardData?.getData("text") ?? "";
+        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();
+      });
     }
     this.list.addEventListener("click", (event) => {
       const target = event.target;
@@ -499,7 +683,12 @@ var ForgeSelect = class {
         return;
       }
       const li = target.closest("li[data-nav-index]");
-      if (!li) return;
+      if (!li) {
+        const optionRow = target.closest("li[data-option-value]");
+        const option = optionRow ? this.findOption(optionRow.dataset.optionValue) : void 0;
+        if (option && this.hasReachedMaximum() && !this.selected.includes(option.value)) this.announceMaximum(option);
+        return;
+      }
       const navIndex = Number(li.dataset.navIndex);
       this.activateNavItem(navIndex);
     });
@@ -550,36 +739,61 @@ var ForgeSelect = class {
     }
   }
   // ---------------------------------------------------------------- selection
+  canSelectOption(option) {
+    if (this.opts.maxSelections == null) return true;
+    const projected = [...this.selected];
+    if (!projected.includes(option.value)) projected.push(option.value);
+    for (const value of collectDescendantValues(option, this.isOptionDisabled)) {
+      if (!projected.includes(value)) projected.push(value);
+    }
+    syncTreeAncestors(this.data, projected, this.isOptionDisabled);
+    return projected.length <= this.opts.maxSelections;
+  }
+  hasReachedMaximum() {
+    return this.opts.maxSelections != null && this.selected.length >= this.opts.maxSelections;
+  }
+  announceMaximum(option) {
+    const limit = this.opts.maxSelections;
+    if (limit == null) return;
+    this.liveRegion.textContent = format(this.strings.maximumSelected, { count: String(limit) });
+    this.emitter.emit("maximum", { limit, option });
+  }
   selectValue(value, notify) {
     if (this.selected.includes(value)) return;
     const option = this.findOption(value) ?? this.selectedOptions.get(value) ?? { value, label: value };
     this.selectedOptions.set(value, option);
     if (this.opts.multiple) {
       this.selected.push(value);
-      for (const v of collectDescendantValues(option)) {
+      for (const v of collectDescendantValues(option, this.isOptionDisabled)) {
         if (!this.selected.includes(v)) this.selected.push(v);
       }
       this.syncTreeAncestors();
     } else {
       this.selected = [value];
     }
-    if (notify) this.afterSelectionChange();
+    if (notify) {
+      this.afterSelectionChange();
+      this.emitter.emit("select", option);
+    }
   }
   deselectValue(value, notify) {
     const index = this.selected.indexOf(value);
     if (index === -1) return;
+    const option = this.findOption(value) ?? this.selectedOptions.get(value);
     this.selected.splice(index, 1);
     if (this.opts.multiple) {
-      const option = this.findOption(value) ?? this.selectedOptions.get(value);
       if (option) {
-        for (const v of collectDescendantValues(option)) {
+        for (const v of collectDescendantValues(option, this.isOptionDisabled)) {
           const i = this.selected.indexOf(v);
           if (i !== -1) this.selected.splice(i, 1);
         }
       }
       this.syncTreeAncestors();
     }
-    if (notify) this.afterSelectionChange();
+    if (notify) {
+      this.afterSelectionChange();
+      this.emitter.emit("unselect", option ?? { value, label: value });
+    }
   }
   /**
    * Keeps every tree parent's own membership in `selected` consistent with
@@ -588,7 +802,7 @@ var ForgeSelect = class {
    * No-op for data with no `children` anywhere.
    */
   syncTreeAncestors() {
-    syncTreeAncestors(this.data, this.selected);
+    syncTreeAncestors(this.data, this.selected, this.isOptionDisabled);
   }
   clearSelection() {
     if (this.selected.length === 0) return;
@@ -596,9 +810,22 @@ var ForgeSelect = class {
     this.emitter.emit("clear");
     this.afterSelectionChange();
   }
+  allSelectableValues() {
+    const values = [];
+    const visit = (option) => {
+      if (!this.isOptionDisabled(option)) values.push(option.value);
+      option.children?.forEach(visit);
+    };
+    for (const item of this.data) (isGroup(item) ? item.options : [item]).forEach(visit);
+    return values;
+  }
   afterSelectionChange(emitChange = true) {
     this.renderValue();
     this.syncNativeSelect(emitChange);
+    if (!this.opts.required || this.selected.length > 0) {
+      this.control.classList.remove("forge-select__control--invalid");
+      this.control.removeAttribute("aria-invalid");
+    }
     if (this.isOpen) this.renderList();
     if (emitChange) this.emitter.emit("change", this.getValue());
   }
@@ -634,17 +861,58 @@ var ForgeSelect = class {
   findOption(value) {
     return findOption(this.data, 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;
+    };
+    for (const item of this.data) {
+      const found = search(isGroup(item) ? item.options : [item]);
+      if (found) return found;
+    }
+    return void 0;
+  }
+  /** Selects an existing option matching `label` exactly, or creates and selects a new one. */
+  createTag(label) {
+    const trimmed = label.trim();
+    if (!trimmed) return void 0;
+    const existing = this.findOptionByLabel(trimmed);
+    if (existing) {
+      if (this.selected.includes(existing.value)) return void 0;
+      if (this.opts.multiple && !this.canSelectOption(existing)) {
+        this.announceMaximum(existing);
+        return void 0;
+      }
+      this.selectValue(existing.value, false);
+      return { option: existing, created: false };
+    }
+    const option = { value: trimmed, label: trimmed };
+    if (this.opts.multiple && !this.canSelectOption(option)) {
+      this.announceMaximum(option);
+      return void 0;
+    }
+    this.data.push(option);
+    this.selectValue(option.value, false);
+    return { option, created: true };
+  }
   createFromQuery() {
     const label = this.query.trim();
     if (!label) return;
-    const option = { value: label, label };
-    this.data.push(option);
+    const result = this.createTag(label);
+    if (!result) return;
     if (this.searchInput) {
       this.searchInput.value = "";
       this.query = "";
     }
-    this.selectValue(option.value, true);
-    if (!this.opts.multiple) this.close();
+    this.afterSelectionChange();
+    if (result.created) this.emitter.emit("create", result.option);
+    this.emitter.emit("select", result.option);
+    if (!this.opts.multiple || this.opts.closeOnSelect) this.close();
   }
   activateNavItem(navIndex) {
     const item = this.navItems[navIndex];
@@ -655,8 +923,17 @@ var ForgeSelect = class {
     }
     const { value } = item.option;
     if (this.opts.multiple) {
-      if (this.selected.includes(value)) this.deselectValue(value, true);
-      else this.selectValue(value, true);
+      let changed = false;
+      if (this.selected.includes(value)) {
+        this.deselectValue(value, true);
+        changed = true;
+      } else if (this.canSelectOption(item.option)) {
+        this.selectValue(value, true);
+        changed = true;
+      } else {
+        this.announceMaximum(item.option);
+      }
+      if (changed && this.opts.closeOnSelect) this.close();
     } else {
       this.selectValue(value, true);
       this.close();
@@ -772,6 +1049,7 @@ var ForgeSelect = class {
       this.selected = order;
       this.suppressNextTagClick = true;
       this.afterSelectionChange();
+      this.emitter.emit("reorder", [...this.selected]);
     };
     tag.addEventListener("pointerdown", (event) => {
       if (this.isDisabled || event.button !== 0) return;
@@ -795,6 +1073,7 @@ var ForgeSelect = class {
     [next[index], next[targetIndex]] = [next[targetIndex], next[index]];
     this.selected = next;
     this.afterSelectionChange();
+    this.emitter.emit("reorder", [...this.selected]);
     this.focusTagByValue(value);
   }
   focusTagByValue(value) {
@@ -808,12 +1087,14 @@ var ForgeSelect = class {
   buildRows() {
     this.rows = [];
     this.navItems = [];
-    const query = this.query.trim().toLowerCase();
-    const matches = (option) => query === "" || option.label.toLowerCase().includes(query) || (option.description?.toLowerCase().includes(query) ?? false);
+    const trimmedQuery = this.query.trim();
+    const query = trimmedQuery.toLowerCase();
+    const matches = (option) => query === "" || (this.opts.filterOption ? this.opts.filterOption(option, trimmedQuery) : option.label.toLowerCase().includes(query) || (option.description?.toLowerCase().includes(query) ?? false));
     const subtreeMatches = (option) => query === "" || matches(option) || (option.children ?? []).some(subtreeMatches);
     const pushOption = (option, depth, parentValue) => {
       let navIndex = -1;
-      if (!option.disabled) {
+      const interactionDisabled = this.isOptionDisabled(option) || this.hasReachedMaximum() && !this.selected.includes(option.value);
+      if (!interactionDisabled) {
         navIndex = this.navItems.length;
         this.navItems.push({ kind: "option", option, parentValue });
       }
@@ -828,6 +1109,10 @@ var ForgeSelect = class {
         }
       }
     };
+    if (trimmedQuery !== "" && trimmedQuery.length < this.opts.minSearchLength) {
+      this.rows.push({ kind: "min-length" });
+      return;
+    }
     if (this.loading) {
       this.rows.push({ kind: "loading" });
       return;
@@ -855,12 +1140,7 @@ var ForgeSelect = class {
     else if (this.loadingMore) this.rows.push({ kind: "loading-more" });
   }
   hasExactMatch(lowerQuery) {
-    const matchesExactly = (option) => option.label.toLowerCase() === lowerQuery || (option.children ?? []).some(matchesExactly);
-    for (const item of this.data) {
-      const options = isGroup(item) ? item.options : [item];
-      if (options.some(matchesExactly)) return true;
-    }
-    return false;
+    return !!this.findOptionByLabel(lowerQuery);
   }
   usesVirtualScroll() {
     return this.opts.virtualScroll !== false && this.rows.length > VIRTUAL_THRESHOLD;
@@ -872,7 +1152,7 @@ var ForgeSelect = class {
   }
   announceStatus() {
     const first = this.rows[0];
-    const message = first?.kind === "loading" ? this.strings.loading : first?.kind === "error" ? this.strings.errorLoading : first?.kind === "empty" ? this.strings.noResults : "";
+    const message = this.hasReachedMaximum() ? format(this.strings.maximumSelected, { count: String(this.opts.maxSelections) }) : first?.kind === "loading" ? this.strings.loading : first?.kind === "error" ? this.strings.errorLoading : first?.kind === "empty" ? this.strings.noResults : first?.kind === "min-length" ? format(this.strings.minSearchLength, { count: String(this.opts.minSearchLength) }) : "";
     if (this.liveRegion.textContent !== message) this.liveRegion.textContent = message;
   }
   renderRows() {
@@ -923,6 +1203,13 @@ var ForgeSelect = class {
         li.setAttribute("aria-selected", "false");
         li.textContent = this.strings.noResults;
         break;
+      case "min-length":
+        li.className = "forge-select__min-length";
+        li.setAttribute("role", "option");
+        li.setAttribute("aria-disabled", "true");
+        li.setAttribute("aria-selected", "false");
+        li.textContent = format(this.strings.minSearchLength, { count: String(this.opts.minSearchLength) });
+        break;
       case "error":
         li.className = "forge-select__error";
         li.setAttribute("role", "option");
@@ -952,17 +1239,19 @@ var ForgeSelect = class {
         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) === "some") {
+        if (this.opts.multiple && row.hasChildren && computeCheckState(row.option, this.selected, this.isOptionDisabled) === "some") {
           li.classList.add("forge-select__option--indeterminate");
         }
         if (row.depth > 0) {
           li.style.paddingLeft = `calc(12px + ${row.depth} * var(--fs-tree-indent, 18px))`;
         }
-        if (row.option.disabled) {
+        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 {
@@ -1118,10 +1407,15 @@ var ForgeSelect = class {
     this.ajaxController = controller;
     const page = append ? this.page + 1 : 0;
     try {
-      const url = buildUrl(ajax, query, page);
-      const response = await fetch(url, { signal: controller.signal });
-      if (response.ok === false) throw new Error(`ForgeSelect: remote request failed with HTTP ${response.status}`);
-      const json = await response.json();
+      let json;
+      if (ajax.request) {
+        json = await ajax.request(query, page, controller.signal);
+      } else {
+        const url = buildUrl(ajax, query, page);
+        const response = await fetch(url, { signal: controller.signal });
+        if (response.ok === false) throw new Error(`ForgeSelect: remote request failed with HTTP ${response.status}`);
+        json = await response.json();
+      }
       if (activeRequestId !== this.ajaxRequestId || this.destroyed) return;
       const { options, hasMore } = normalizeRemoteResult(ajax, json);
       if (append) {