@samline/autocomplete 1.0.0 → 2.0.0

package/dist/index.cjs

@@ -20,22 +20,83 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  Autocomplete: () => Autocomplete,
+  DEFAULT_CACHE_SIZE: () => DEFAULT_CACHE_SIZE,
+  DEFAULT_CACHE_TTL: () => DEFAULT_CACHE_TTL,
+  DEFAULT_DEBOUNCE: () => DEFAULT_DEBOUNCE,
+  DEFAULT_MAX_RESULTS: () => DEFAULT_MAX_RESULTS,
+  DEFAULT_MESSAGES: () => DEFAULT_MESSAGES,
+  DEFAULT_MIN_LENGTH: () => DEFAULT_MIN_LENGTH,
+  DEFAULT_QUERY_PARAM: () => DEFAULT_QUERY_PARAM,
+  HIGHLIGHT_ATTRIBUTE: () => HIGHLIGHT_ATTRIBUTE,
+  LIST_ATTRIBUTE: () => LIST_ATTRIBUTE,
+  LIVE_ATTRIBUTE: () => LIVE_ATTRIBUTE,
+  OPTION_ATTRIBUTE: () => OPTION_ATTRIBUTE,
+  POPUP_ATTRIBUTE: () => POPUP_ATTRIBUTE,
+  STATUS_ATTRIBUTE: () => STATUS_ATTRIBUTE,
   autocomplete: () => autocomplete,
   browser: () => browser,
   createAutocomplete: () => createAutocomplete,
-  createAutocompleteController: () => createAutocompleteController,
+  createCache: () => createCache,
+  filterSuggestions: () => filterSuggestions,
+  fromEndpoint: () => fromEndpoint,
+  highlight: () => highlight,
   mapCommonResponse: () => mapCommonResponse,
-  parseJsonResponse: () => parseJsonResponse
+  normalizeText: () => normalizeText,
+  parseJsonResponse: () => parseJsonResponse,
+  renderHighlight: () => renderHighlight
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/core/defaults.ts
-var DEFAULT_MESSAGES = {
-  loading: "Searching...",
-  empty: "No results",
-  error: "Search failed"
+// src/constants.ts
+var DEFAULT_QUERY_PARAM = "q";
+var DEFAULT_MIN_LENGTH = 2;
+var DEFAULT_DEBOUNCE = 250;
+var DEFAULT_MAX_RESULTS = 8;
+var DEFAULT_CACHE_SIZE = 50;
+var DEFAULT_CACHE_TTL = 3e5;
+var POPUP_ATTRIBUTE = "data-autocomplete-popup";
+var LIST_ATTRIBUTE = "data-autocomplete-list";
+var OPTION_ATTRIBUTE = "data-autocomplete-option";
+var STATUS_ATTRIBUTE = "data-autocomplete-status";
+var LIVE_ATTRIBUTE = "data-autocomplete-live";
+var HIGHLIGHT_ATTRIBUTE = "data-autocomplete-highlight";
+
+// src/core/cache.ts
+var createCache = ({ max = DEFAULT_CACHE_SIZE, ttl = DEFAULT_CACHE_TTL } = {}, now = Date.now) => {
+  const entries = /* @__PURE__ */ new Map();
+  const get = (key) => {
+    const entry = entries.get(key);
+    if (!entry) return void 0;
+    entries.delete(key);
+    if (entry.expires <= now()) return void 0;
+    entries.set(key, entry);
+    return entry.value;
+  };
+  const set = (key, value) => {
+    entries.delete(key);
+    entries.set(key, { value, expires: now() + ttl });
+    while (entries.size > max) {
+      const oldest = entries.keys().next();
+      if (oldest.done) break;
+      entries.delete(oldest.value);
+    }
+  };
+  return {
+    get,
+    set,
+    clear: () => entries.clear(),
+    get size() {
+      return entries.size;
+    }
+  };
 };
+
+// src/core/source.ts
 var parseJsonResponse = async (response) => response.json();
+var invalidPayloadError = () => new TypeError(
+  "Autocomplete response does not contain an array. Configure mapResponse(payload, response, query)."
+);
 var mapCommonResponse = (payload) => {
   if (Array.isArray(payload)) return payload;
   if (!payload || typeof payload !== "object") throw invalidPayloadError();
@@ -45,86 +106,200 @@ var mapCommonResponse = (payload) => {
   if (Array.isArray(record.data)) return record.data;
   throw invalidPayloadError();
 };
-function getDefaultLabel(suggestion) {
-  if (typeof suggestion === "string") return suggestion;
-  if (!suggestion || typeof suggestion !== "object") return String(suggestion ?? "");
-  const record = suggestion;
-  return String(record.label ?? record.value ?? record.title ?? "");
-}
-function getDefaultValue(suggestion) {
+var fromEndpoint = ({
+  endpoint,
+  queryParam = DEFAULT_QUERY_PARAM,
+  requestInit = {},
+  parseResponse = parseJsonResponse,
+  mapResponse = mapCommonResponse
+}) => {
+  if (!endpoint) throw new TypeError("Autocomplete requires an endpoint.");
+  return async (query, { signal, input }) => {
+    const resolved = typeof endpoint === "function" ? endpoint(query, input) : endpoint;
+    const url = new URL(resolved, document.baseURI);
+    if (queryParam !== null) url.searchParams.set(queryParam, query);
+    const init = typeof requestInit === "function" ? requestInit(query, input) : requestInit;
+    const response = await fetch(url, { ...init, signal });
+    if (!response.ok) throw new Error(`Autocomplete request failed with HTTP ${response.status}.`);
+    const payload = await parseResponse(response, query);
+    const result = await mapResponse(payload, response, query);
+    if (!Array.isArray(result))
+      throw new TypeError("Autocomplete mapResponse must return an array.");
+    return result;
+  };
+};
+
+// src/core/state.ts
+var DEFAULT_MESSAGES = {
+  loading: "Searching...",
+  empty: "No results",
+  error: "Search failed",
+  results: ({ count }) => count === 1 ? "1 result available" : `${count} results available`
+};
+var resolveMessage = (message, context) => typeof message === "function" ? message(context) : message;
+var readField = (suggestion, keys) => {
   if (typeof suggestion === "string") return suggestion;
   if (!suggestion || typeof suggestion !== "object") return String(suggestion ?? "");
   const record = suggestion;
-  return String(record.value ?? record.label ?? record.title ?? "");
-}
-function getDefaultId(suggestion, index) {
+  const key = keys.find((name) => record[name] !== void 0 && record[name] !== null);
+  return key === void 0 ? "" : String(record[key]);
+};
+var getDefaultLabel = (suggestion) => readField(suggestion, ["label", "value", "title", "name"]);
+var getDefaultValue = (suggestion) => readField(suggestion, ["value", "label", "title", "name"]);
+var getDefaultId = (suggestion, index) => {
   if (!suggestion || typeof suggestion !== "object") return index;
   return suggestion.id ?? index;
-}
-function validateOptions(options) {
-  if (!options.endpoint) throw new TypeError("Autocomplete requires an endpoint.");
+};
+var assertNonNegativeInteger = (value, name) => {
+  if (value !== void 0 && (!Number.isInteger(value) || value < 0)) {
+    throw new TypeError(`Autocomplete ${name} must be a non-negative integer.`);
+  }
+};
+var assertPositiveInteger = (value, name) => {
+  if (value !== void 0 && (!Number.isInteger(value) || value < 1)) {
+    throw new TypeError(`Autocomplete ${name} must be an integer greater than zero.`);
+  }
+};
+var validateOptions = (options) => {
+  const hasSource = options.source !== void 0;
+  const hasEndpoint = options.endpoint !== void 0;
+  if (hasSource && hasEndpoint) {
+    throw new TypeError("Autocomplete accepts either a source or an endpoint, not both.");
+  }
+  if (!hasSource && !options.endpoint) {
+    throw new TypeError("Autocomplete requires a source or an endpoint.");
+  }
+  if (hasSource && !Array.isArray(options.source) && typeof options.source !== "function") {
+    throw new TypeError("Autocomplete source must be an array or a function.");
+  }
   assertNonNegativeInteger(options.minLength, "minLength");
   assertNonNegativeInteger(options.debounce, "debounce");
-  if (options.maxResults !== void 0 && (!Number.isInteger(options.maxResults) || options.maxResults < 1)) {
-    throw new TypeError("Autocomplete maxResults must be an integer greater than zero.");
+  assertPositiveInteger(options.maxResults, "maxResults");
+  if (typeof options.cache === "object") {
+    assertPositiveInteger(options.cache.max, "cache.max");
+    assertNonNegativeInteger(options.cache.ttl, "cache.ttl");
   }
-}
-function assertNonNegativeInteger(value, name) {
-  if (value !== void 0 && (!Number.isInteger(value) || value < 0)) {
-    throw new TypeError(`Autocomplete ${name} must be a non-negative integer.`);
+};
+
+// src/core/text.ts
+var COMBINING_MARKS = /\p{M}/gu;
+var WHITESPACE = /\s+/;
+var normalizeText = (value) => value.normalize("NFD").replace(COMBINING_MARKS, "").toLowerCase();
+var getTerms = (query, normalize) => Array.from(new Set(normalize(query).split(WHITESPACE).filter(Boolean)));
+var filterSuggestions = (suggestions, query, { getText, normalize = normalizeText }) => {
+  const terms = getTerms(query, normalize);
+  if (terms.length === 0) return [...suggestions];
+  return suggestions.filter((suggestion) => {
+    const text = normalize(getText(suggestion));
+    return terms.every((term) => text.includes(term));
+  });
+};
+var highlight = (text, query, normalize = normalizeText) => {
+  const terms = getTerms(query, normalize);
+  if (terms.length === 0 || text === "") return text === "" ? [] : [{ text, match: false }];
+  let normalized = "";
+  const starts = [];
+  const ends = [];
+  let offset = 0;
+  for (const char of text) {
+    const piece = normalize(char);
+    if (piece === "" && ends.length > 0) ends[ends.length - 1] = offset + char.length;
+    normalized += piece;
+    for (let index = 0; index < piece.length; index += 1) {
+      starts.push(offset);
+      ends.push(offset + char.length);
+    }
+    offset += char.length;
   }
-}
-function invalidPayloadError() {
-  return new TypeError(
-    "Autocomplete response does not contain an array. Configure mapResponse(payload, response, query)."
-  );
-}
+  const ranges = [];
+  for (const term of terms) {
+    let found = normalized.indexOf(term);
+    while (found !== -1) {
+      ranges.push([starts[found], ends[found + term.length - 1]]);
+      found = normalized.indexOf(term, found + 1);
+    }
+  }
+  if (ranges.length === 0) return [{ text, match: false }];
+  ranges.sort((a, b) => a[0] - b[0]);
+  const merged = [];
+  for (const range of ranges) {
+    const last = merged[merged.length - 1];
+    if (last && range[0] <= last[1]) last[1] = Math.max(last[1], range[1]);
+    else merged.push([range[0], range[1]]);
+  }
+  const parts = [];
+  let cursor = 0;
+  for (const [start, end] of merged) {
+    if (start > cursor) parts.push({ text: text.slice(cursor, start), match: false });
+    parts.push({ text: text.slice(start, end), match: true });
+    cursor = end;
+  }
+  if (cursor < text.length) parts.push({ text: text.slice(cursor), match: false });
+  return parts;
+};
 
-// src/core/dom.ts
-function resolveInput(target) {
+// src/vanilla/dom.ts
+var resolveInput = (target) => {
   const element = typeof target === "string" ? document.querySelector(target) : target;
   if (!(element instanceof HTMLInputElement)) {
     throw new TypeError("Autocomplete requires an HTMLInputElement or a valid selector.");
   }
   return element;
-}
-function sanitizeId(value) {
-  return String(value).replace(/[^a-zA-Z0-9_-]/g, "-");
-}
-function restoreAttribute(element, name, value) {
-  if (value === null) {
-    element.removeAttribute(name);
-    return;
+};
+var sanitizeId = (value) => String(value).replace(/[^a-zA-Z0-9_-]/g, "-");
+var restoreAttribute = (element, name, value) => {
+  if (value === null) element.removeAttribute(name);
+  else element.setAttribute(name, value);
+};
+var renderHighlight = (element, parts) => {
+  for (const part of parts) {
+    if (!part.match) {
+      element.append(document.createTextNode(part.text));
+      continue;
+    }
+    const mark = document.createElement("mark");
+    mark.setAttribute(HIGHLIGHT_ATTRIBUTE, "");
+    mark.textContent = part.text;
+    element.append(mark);
   }
-  element.setAttribute(name, value);
-}
+};
+var VISUALLY_HIDDEN = "position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0";
 
-// src/core/controller.ts
+// src/vanilla/render.ts
+var RESTORED_ATTRIBUTES = [
+  "role",
+  "autocomplete",
+  "aria-autocomplete",
+  "aria-controls",
+  "aria-expanded",
+  "aria-activedescendant"
+];
 var instanceCount = 0;
-function createAutocompleteController(target, options) {
+var isAbortError = (error) => error instanceof DOMException && error.name === "AbortError";
+var autocomplete = (target, options) => {
   validateOptions(options);
   const input = resolveInput(target);
   const instanceId = `autocomplete-${++instanceCount}`;
   const messages = { ...DEFAULT_MESSAGES, ...options.messages };
-  const mapResponse = options.mapResponse ?? mapCommonResponse;
-  const settings = {
-    queryParam: options.queryParam === void 0 ? "q" : options.queryParam,
-    requestInit: options.requestInit ?? {},
-    parseResponse: options.parseResponse ?? parseJsonResponse,
-    mapResponse,
-    getId: options.getId ?? getDefaultId,
-    getLabel: options.getLabel ?? getDefaultLabel,
-    getValue: options.getValue ?? getDefaultValue,
-    renderOption: options.renderOption,
-    minLength: options.minLength ?? 2,
-    debounce: options.debounce ?? 250,
-    maxResults: options.maxResults ?? 8,
-    searchOnFocus: options.searchOnFocus ?? true,
-    onSelect: options.onSelect,
-    onError: options.onError
-  };
+  const localSuggestions = Array.isArray(options.source) ? options.source : null;
+  const getLabel = options.getLabel ?? getDefaultLabel;
+  const getValue = options.getValue ?? getDefaultValue;
+  const getId = options.getId ?? getDefaultId;
+  const normalize = options.normalize ?? normalizeText;
+  const minLength = options.minLength ?? (localSuggestions ? 1 : DEFAULT_MIN_LENGTH);
+  const debounce = options.debounce ?? (localSuggestions ? 0 : DEFAULT_DEBOUNCE);
+  const maxResults = options.maxResults ?? DEFAULT_MAX_RESULTS;
+  const searchOnFocus = options.searchOnFocus ?? true;
+  const highlightEnabled = options.highlight ?? true;
+  const source = localSuggestions ? null : typeof options.source === "function" ? options.source : fromEndpoint(options);
+  const cache = source && options.cache !== false ? createCache(typeof options.cache === "object" ? options.cache : {}) : null;
+  const popup = document.createElement("div");
   const list = document.createElement("div");
+  const status = document.createElement("div");
+  const live = document.createElement("div");
   const originalAttributes = /* @__PURE__ */ new Map();
+  const label = input.labels?.[0] ?? null;
+  const originalLabelId = label?.getAttribute("id") ?? null;
   let suggestions = [];
   let activeIndex = -1;
   let selected = null;
@@ -133,145 +308,220 @@ function createAutocompleteController(target, options) {
   let requestSequence = 0;
   let destroyed = false;
   let suppressFocusSearch = false;
+  popup.hidden = true;
+  popup.setAttribute(POPUP_ATTRIBUTE, "");
   list.id = `${instanceId}-listbox`;
   list.hidden = true;
   list.role = "listbox";
-  list.dataset.autocompleteList = "";
-  for (const name of [
-    "role",
-    "autocomplete",
-    "aria-autocomplete",
-    "aria-controls",
-    "aria-expanded",
-    "aria-activedescendant"
-  ]) {
-    originalAttributes.set(name, input.getAttribute(name));
+  list.setAttribute(LIST_ATTRIBUTE, "");
+  status.hidden = true;
+  status.setAttribute(STATUS_ATTRIBUTE, "");
+  status.setAttribute("aria-hidden", "true");
+  live.role = "status";
+  live.setAttribute("aria-live", "polite");
+  live.setAttribute("aria-atomic", "true");
+  live.setAttribute(LIVE_ATTRIBUTE, "");
+  live.style.cssText = VISUALLY_HIDDEN;
+  if (label) {
+    if (!label.id) label.id = `${instanceId}-label`;
+    list.setAttribute("aria-labelledby", label.id);
   }
+  for (const name of RESTORED_ATTRIBUTES) originalAttributes.set(name, input.getAttribute(name));
   input.role = "combobox";
   input.autocomplete = "off";
   input.setAttribute("aria-autocomplete", "list");
   input.setAttribute("aria-controls", list.id);
   input.setAttribute("aria-expanded", "false");
-  input.insertAdjacentElement("afterend", list);
-  function buildUrl(query) {
-    const endpoint = typeof options.endpoint === "function" ? options.endpoint(query, input) : options.endpoint;
-    const url = new URL(endpoint, document.baseURI);
-    if (settings.queryParam !== null) url.searchParams.set(settings.queryParam, query);
-    return url;
-  }
-  function buildRequestInit(query, signal) {
-    const init = typeof settings.requestInit === "function" ? settings.requestInit(query, input) : settings.requestInit;
-    return { ...init, signal };
-  }
-  function handleInput(event) {
-    if (event.isComposing) return;
-    scheduleSearch();
-  }
-  function scheduleSearch() {
-    window.clearTimeout(debounceTimer);
-    const query = input.value.trim();
-    if (selected !== null) {
-      selected = null;
-      dispatch("autocomplete:clear", { query });
-    }
-    if (query.length < settings.minLength) {
-      cancel();
-      close();
+  popup.append(list, status);
+  input.insertAdjacentElement("afterend", popup);
+  popup.insertAdjacentElement("afterend", live);
+  const dispatch = (name, detail) => {
+    input.dispatchEvent(new CustomEvent(name, { bubbles: true, detail }));
+  };
+  const announce = (message) => {
+    live.textContent = message;
+  };
+  const cancel = () => {
+    clearTimeout(debounceTimer);
+    debounceTimer = void 0;
+    requestSequence += 1;
+    abortController?.abort();
+    abortController = null;
+  };
+  const updateActiveOption = () => {
+    const elements = list.querySelectorAll(`[${OPTION_ATTRIBUTE}]`);
+    elements.forEach((element, index) => {
+      const active2 = index === activeIndex;
+      element.dataset.active = String(active2);
+      element.setAttribute("aria-selected", String(active2));
+    });
+    const active = elements.item(activeIndex);
+    if (!active) {
+      input.removeAttribute("aria-activedescendant");
       return;
     }
-    debounceTimer = window.setTimeout(() => void search(query), settings.debounce);
-  }
-  async function search(query = input.value.trim()) {
-    if (destroyed || query.length < settings.minLength) {
+    input.setAttribute("aria-activedescendant", active.id);
+    active.scrollIntoView({ block: "nearest" });
+  };
+  const close = () => {
+    activeIndex = -1;
+    popup.hidden = true;
+    list.hidden = true;
+    status.hidden = true;
+    input.setAttribute("aria-expanded", "false");
+    input.removeAttribute("aria-activedescendant");
+    updateActiveOption();
+  };
+  const dismiss = () => {
+    cancel();
+    close();
+  };
+  const renderStatus = (state, query) => {
+    if (destroyed) return;
+    const message = resolveMessage(messages[state], { query, count: 0 });
+    list.replaceChildren();
+    list.hidden = true;
+    status.textContent = message;
+    status.setAttribute(STATUS_ATTRIBUTE, state);
+    status.hidden = false;
+    popup.hidden = false;
+    input.setAttribute("aria-expanded", "false");
+    input.removeAttribute("aria-activedescendant");
+    if (state !== "loading") announce(message);
+  };
+  const select = (index) => {
+    const suggestion = suggestions[index];
+    if (!suggestion) return;
+    selected = suggestion.data;
+    input.value = suggestion.value;
+    dismiss();
+    dispatch("autocomplete:select", {
+      suggestion: suggestion.data,
+      label: suggestion.label,
+      value: suggestion.value
+    });
+    options.onSelect?.(suggestion.data, input);
+  };
+  const handleOptionPointerDown = (event) => {
+    event.preventDefault();
+    select(Number(event.currentTarget.dataset.index));
+    if (document.activeElement !== input) {
+      suppressFocusSearch = true;
+      input.focus({ preventScroll: true });
+      suppressFocusSearch = false;
+    }
+  };
+  const handleOptionPointerEnter = (event) => {
+    activeIndex = Number(event.currentTarget.dataset.index);
+    updateActiveOption();
+  };
+  const renderSuggestions = (query) => {
+    const fragment = document.createDocumentFragment();
+    suggestions.forEach((suggestion, index) => {
+      const option = document.createElement("div");
+      const parts = highlightEnabled ? highlight(suggestion.label, query, normalize) : [{ text: suggestion.label, match: false }];
+      option.id = suggestion.id;
+      option.role = "option";
+      option.setAttribute(OPTION_ATTRIBUTE, "");
+      option.dataset.index = String(index);
+      option.setAttribute("aria-selected", "false");
+      renderHighlight(option, parts);
+      options.renderOption?.(option, suggestion.data, {
+        query,
+        index,
+        label: suggestion.label,
+        highlight: parts
+      });
+      option.addEventListener("pointerdown", handleOptionPointerDown);
+      option.addEventListener("pointerenter", handleOptionPointerEnter);
+      fragment.append(option);
+    });
+    list.replaceChildren(fragment);
+    list.hidden = false;
+    status.hidden = true;
+    popup.hidden = false;
+    input.setAttribute("aria-expanded", "true");
+  };
+  const normalizeSuggestion = (suggestion, index) => ({
+    id: `${instanceId}-option-${sanitizeId(getId(suggestion, index))}`,
+    label: String(getLabel(suggestion)),
+    value: String(getValue(suggestion)),
+    data: suggestion
+  });
+  const showResults = (query, result, cached) => {
+    if (destroyed) return;
+    suggestions = result.slice(0, maxResults).map(normalizeSuggestion);
+    activeIndex = -1;
+    if (suggestions.length === 0) renderStatus("empty", query);
+    else {
+      renderSuggestions(query);
+      announce(resolveMessage(messages.results, { query, count: suggestions.length }));
+    }
+    dispatch("autocomplete:load", {
+      query,
+      suggestions: suggestions.map((suggestion) => suggestion.data),
+      cached
+    });
+  };
+  const filterLocal = (items, query) => {
+    const filter = options.filter;
+    return filter ? items.filter((item) => filter(item, query)) : filterSuggestions(items, query, { getText: getLabel, normalize });
+  };
+  const search = async (query = input.value.trim()) => {
+    if (destroyed || query.length < minLength) {
       close();
       return;
     }
     cancel();
     const sequence = ++requestSequence;
+    if (localSuggestions) {
+      showResults(query, filterLocal(localSuggestions, query), false);
+      return;
+    }
+    const hit = cache?.get(query);
+    if (hit) {
+      showResults(query, hit, true);
+      return;
+    }
     const controller = new AbortController();
     abortController = controller;
-    renderStatus(messages.loading, "status", "loading");
+    renderStatus("loading", query);
     dispatch("autocomplete:loadstart", { query });
     try {
-      const response = await fetch(buildUrl(query), buildRequestInit(query, controller.signal));
-      if (!response.ok) throw new Error(`Autocomplete request failed with HTTP ${response.status}.`);
-      const payload = await settings.parseResponse(response, query);
-      const result = await settings.mapResponse(payload, response, query);
-      if (!Array.isArray(result))
-        throw new TypeError("Autocomplete mapResponse must return an array.");
+      const result = await source(query, { signal: controller.signal, input });
+      if (!Array.isArray(result)) throw new TypeError("Autocomplete source must return an array.");
       if (sequence !== requestSequence) return;
-      suggestions = result.slice(0, settings.maxResults).map(normalizeSuggestion);
-      activeIndex = -1;
-      if (suggestions.length === 0) renderStatus(messages.empty, "status", "empty");
-      else renderSuggestions();
-      dispatch("autocomplete:load", {
-        query,
-        suggestions: suggestions.map((suggestion) => suggestion.data)
-      });
+      cache?.set(query, result);
+      showResults(query, result, false);
     } catch (error) {
-      if (isAbortError(error) || sequence !== requestSequence) return;
+      if (isAbortError(error) || sequence !== requestSequence || destroyed) return;
       suggestions = [];
       activeIndex = -1;
-      renderStatus(messages.error, "alert", "error");
+      renderStatus("error", query);
       dispatch("autocomplete:error", { query, error });
-      settings.onError?.(error, input);
+      options.onError?.(error, input);
     } finally {
       if (sequence === requestSequence) abortController = null;
     }
-  }
-  function normalizeSuggestion(suggestion, index) {
-    return {
-      id: `${instanceId}-option-${sanitizeId(settings.getId(suggestion, index))}`,
-      label: String(settings.getLabel(suggestion)),
-      value: String(settings.getValue(suggestion)),
-      data: suggestion
-    };
-  }
-  function renderSuggestions() {
-    const fragment = document.createDocumentFragment();
-    list.replaceChildren();
-    suggestions.forEach((suggestion, index) => {
-      const option = document.createElement("button");
-      option.id = suggestion.id;
-      option.type = "button";
-      option.role = "option";
-      option.textContent = suggestion.label;
-      option.dataset.autocompleteOption = "";
-      option.dataset.index = String(index);
-      option.setAttribute("aria-selected", "false");
-      settings.renderOption?.(option, suggestion.data);
-      option.addEventListener("pointerdown", handleOptionPointerDown);
-      option.addEventListener("pointerenter", handleOptionPointerEnter);
-      fragment.append(option);
-    });
-    list.append(fragment);
-    open();
-  }
-  function renderStatus(message, role, state) {
-    const element = document.createElement("div");
-    element.role = role;
-    element.textContent = message;
-    element.dataset.autocompleteStatus = state;
-    list.replaceChildren(element);
-    open(true);
-  }
-  function open(allowStatus = false) {
-    if (destroyed || !allowStatus && suggestions.length === 0) return;
-    list.hidden = false;
-    input.setAttribute("aria-expanded", "true");
-  }
-  function close() {
-    activeIndex = -1;
-    list.hidden = true;
-    input.setAttribute("aria-expanded", "false");
-    input.removeAttribute("aria-activedescendant");
-    updateActiveOption();
-  }
-  function dismiss() {
-    cancel();
-    close();
-  }
-  function clear() {
+  };
+  const scheduleSearch = () => {
+    clearTimeout(debounceTimer);
+    const query = input.value.trim();
+    if (selected !== null) {
+      selected = null;
+      dispatch("autocomplete:clear", { query });
+    }
+    if (query.length < minLength) {
+      dismiss();
+      return;
+    }
+    if (debounce === 0) {
+      void search(query);
+      return;
+    }
+    debounceTimer = setTimeout(() => void search(query), debounce);
+  };
+  const clear = () => {
     const hadSelection = selected !== null;
     cancel();
     suggestions = [];
@@ -279,70 +529,36 @@ function createAutocompleteController(target, options) {
     selected = null;
     input.value = "";
     close();
+    announce("");
     if (hadSelection) dispatch("autocomplete:clear", { query: "" });
-  }
-  function moveActiveOption(direction) {
+  };
+  const moveActiveOption = (direction) => {
     if (list.hidden || suggestions.length === 0) return;
     activeIndex = activeIndex === -1 ? direction > 0 ? 0 : suggestions.length - 1 : (activeIndex + direction + suggestions.length) % suggestions.length;
     updateActiveOption();
-  }
-  function updateActiveOption() {
-    const options2 = list.querySelectorAll("[data-autocomplete-option]");
-    options2.forEach((option, index) => {
-      const active2 = index === activeIndex;
-      option.dataset.active = String(active2);
-      option.setAttribute("aria-selected", String(active2));
-    });
-    const active = options2.item(activeIndex);
-    if (!active) {
-      input.removeAttribute("aria-activedescendant");
-      return;
-    }
-    input.setAttribute("aria-activedescendant", active.id);
-    active.scrollIntoView({ block: "nearest" });
-  }
-  function select(index) {
-    const suggestion = suggestions[index];
-    if (!suggestion) return;
-    selected = suggestion.data;
-    input.value = suggestion.value;
-    dismiss();
-    dispatch("autocomplete:select", {
-      suggestion: suggestion.data,
-      label: suggestion.label,
-      value: suggestion.value
-    });
-    settings.onSelect?.(suggestion.data, input);
-  }
-  function dispatch(name, detail) {
-    input.dispatchEvent(new CustomEvent(name, { bubbles: true, detail }));
-  }
-  function cancel() {
-    window.clearTimeout(debounceTimer);
-    debounceTimer = void 0;
-    requestSequence += 1;
-    abortController?.abort();
-    abortController = null;
-  }
-  function handleFocus() {
+  };
+  const handleInput = (event) => {
+    if (event.isComposing) return;
+    scheduleSearch();
+  };
+  const handleFocus = () => {
     if (suppressFocusSearch) return;
-    if (settings.searchOnFocus && input.value.trim().length >= settings.minLength) {
-      scheduleSearch();
-    }
-  }
-  function handleKeydown(event) {
+    if (searchOnFocus && input.value.trim().length >= minLength) scheduleSearch();
+  };
+  const handleKeydown = (event) => {
+    const listOpen = !list.hidden && suggestions.length > 0;
     if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-      if (suggestions.length === 0 || list.hidden) return;
+      if (!listOpen) return;
       event.preventDefault();
       moveActiveOption(event.key === "ArrowDown" ? 1 : -1);
       return;
     }
-    if (event.key === "Enter" && !list.hidden && activeIndex >= 0) {
+    if (event.key === "Enter" && listOpen && activeIndex >= 0) {
       event.preventDefault();
       select(activeIndex);
       return;
     }
-    if ((event.key === "Home" || event.key === "End") && !list.hidden && suggestions.length > 0) {
+    if ((event.key === "Home" || event.key === "End") && listOpen) {
       event.preventDefault();
       activeIndex = event.key === "Home" ? 0 : suggestions.length - 1;
       updateActiveOption();
@@ -354,26 +570,11 @@ function createAutocompleteController(target, options) {
       return;
     }
     if (event.key === "Tab") dismiss();
-  }
-  function handleOptionPointerDown(event) {
-    event.preventDefault();
-    const element = event.currentTarget;
-    select(Number(element.dataset.index));
-    if (document.activeElement !== input) {
-      suppressFocusSearch = true;
-      input.focus({ preventScroll: true });
-      suppressFocusSearch = false;
-    }
-  }
-  function handleOptionPointerEnter(event) {
-    const element = event.currentTarget;
-    activeIndex = Number(element.dataset.index);
-    updateActiveOption();
-  }
-  function handleDocumentPointerDown(event) {
-    if (event.target !== input && !list.contains(event.target)) dismiss();
-  }
-  function destroy2() {
+  };
+  const handleDocumentPointerDown = (event) => {
+    if (event.target !== input && !popup.contains(event.target)) dismiss();
+  };
+  const destroy = () => {
     if (destroyed) return;
     destroyed = true;
     cancel();
@@ -382,9 +583,12 @@ function createAutocompleteController(target, options) {
     input.removeEventListener("focus", handleFocus);
     input.removeEventListener("keydown", handleKeydown);
     document.removeEventListener("pointerdown", handleDocumentPointerDown);
-    list.remove();
+    popup.remove();
+    live.remove();
+    cache?.clear();
     originalAttributes.forEach((value, name) => restoreAttribute(input, name, value));
-  }
+    if (label) restoreAttribute(label, "id", originalLabelId);
+  };
   input.addEventListener("input", handleInput);
   input.addEventListener("compositionend", scheduleSearch);
   input.addEventListener("focus", handleFocus);
@@ -392,53 +596,102 @@ function createAutocompleteController(target, options) {
   document.addEventListener("pointerdown", handleDocumentPointerDown);
   return {
     element: input,
+    popupElement: popup,
     listElement: list,
+    statusElement: status,
+    liveElement: live,
     options,
     search,
     close: dismiss,
     clear,
     cancel,
+    clearCache: () => cache?.clear(),
     getSelected: () => selected,
-    destroy: destroy2
+    destroy
   };
-}
-function isAbortError(error) {
-  return error instanceof DOMException && error.name === "AbortError";
-}
-
-// src/api/create-autocomplete.ts
-function createAutocomplete(target, options) {
-  return createAutocompleteController(target, options);
-}
-var autocomplete = createAutocomplete;
+};
+var createAutocomplete = autocomplete;
 
 // src/browser/registry.ts
 var available = /* @__PURE__ */ Object.create(null);
-function create(target, options) {
-  const input = resolveInput(target);
-  if (!input.id) throw new TypeError("Autocomplete.create requires an input with an id.");
-  available[input.id]?.destroy();
-  const controller = createAutocomplete(input, options);
-  available[input.id] = controller;
-  return controller;
-}
-function destroy(id) {
-  available[id]?.destroy();
+var removeRegistration = (id) => {
+  const entry = available[id];
+  if (!entry) return;
   delete available[id];
-}
-var browser = {
-  autocomplete: createAutocomplete,
-  create,
-  destroy,
+  entry.destroy();
+};
+var newAutocomplete = ({
+  id,
+  options
+}) => {
+  if (!id) {
+    console.error("Autocomplete ID is required");
+    return null;
+  }
+  const input = document.getElementById(id);
+  if (!(input instanceof HTMLInputElement)) {
+    console.warn(`Autocomplete input with ID ${id} not found`);
+    return null;
+  }
+  removeRegistration(id);
+  const controller = autocomplete(input, options);
+  const destroy = controller.destroy;
+  const registered = {
+    ...controller,
+    destroy: () => {
+      if (available[id] === registered) delete available[id];
+      destroy();
+    }
+  };
+  available[id] = registered;
+  return registered;
+};
+var getAutocomplete = (id) => available[id] ?? null;
+var getAutocompletes = () => ({
+  ...available
+});
+var destroyAutocomplete = (target) => {
+  if (typeof target === "string") return removeRegistration(target);
+  const entry = Object.entries(available).find(([, controller]) => controller.element === target);
+  if (entry) removeRegistration(entry[0]);
+};
+var destroyAutocompletes = () => Object.keys(available).forEach(removeRegistration);
+var Autocomplete = {
+  autocomplete,
+  newAutocomplete,
+  getAutocomplete,
+  getAutocompletes,
+  destroyAutocomplete,
+  destroyAutocompletes,
   available
 };
+var browser = Autocomplete;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Autocomplete,
+  DEFAULT_CACHE_SIZE,
+  DEFAULT_CACHE_TTL,
+  DEFAULT_DEBOUNCE,
+  DEFAULT_MAX_RESULTS,
+  DEFAULT_MESSAGES,
+  DEFAULT_MIN_LENGTH,
+  DEFAULT_QUERY_PARAM,
+  HIGHLIGHT_ATTRIBUTE,
+  LIST_ATTRIBUTE,
+  LIVE_ATTRIBUTE,
+  OPTION_ATTRIBUTE,
+  POPUP_ATTRIBUTE,
+  STATUS_ATTRIBUTE,
   autocomplete,
   browser,
   createAutocomplete,
-  createAutocompleteController,
+  createCache,
+  filterSuggestions,
+  fromEndpoint,
+  highlight,
   mapCommonResponse,
-  parseJsonResponse
+  normalizeText,
+  parseJsonResponse,
+  renderHighlight
 });
 //# sourceMappingURL=index.cjs.map