@samline/autocomplete 1.0.0 → 2.0.0

package/dist/browser/global.global.js

@@ -1,5 +1,5 @@
 "use strict";
-var Autocomplete = (() => {
+var AutocompleteBundle = (() => {
   var __defProp = Object.defineProperty;
   var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
   var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -21,19 +21,66 @@ var Autocomplete = (() => {
   // src/browser/global.ts
   var global_exports = {};
   __export(global_exports, {
-    autocomplete: () => autocomplete,
+    autocomplete: () => autocomplete2,
     available: () => available2,
-    create: () => create2,
-    destroy: () => destroy2
+    browser: () => browser,
+    default: () => global_default,
+    destroyAutocomplete: () => destroyAutocomplete2,
+    destroyAutocompletes: () => destroyAutocompletes2,
+    getAutocomplete: () => getAutocomplete2,
+    getAutocompletes: () => getAutocompletes2,
+    newAutocomplete: () => newAutocomplete2
   });
 
-  // 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();
@@ -43,86 +90,200 @@ var Autocomplete = (() => {
     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;
@@ -131,145 +292,220 @@ var Autocomplete = (() => {
     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 = [];
@@ -277,70 +513,36 @@ var Autocomplete = (() => {
       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();
@@ -352,26 +554,11 @@ var Autocomplete = (() => {
         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 destroy3() {
+    };
+    const handleDocumentPointerDown = (event) => {
+      if (event.target !== input && !popup.contains(event.target)) dismiss();
+    };
+    const destroy = () => {
       if (destroyed) return;
       destroyed = true;
       cancel();
@@ -380,9 +567,12 @@ var Autocomplete = (() => {
       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);
@@ -390,48 +580,89 @@ var Autocomplete = (() => {
     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: destroy3
+      destroy
     };
-  }
-  function isAbortError(error) {
-    return error instanceof DOMException && error.name === "AbortError";
-  }
-
-  // src/api/create-autocomplete.ts
-  function createAutocomplete(target, options) {
-    return createAutocompleteController(target, options);
-  }
+  };
 
   // 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
   };
 
   // src/browser/global.ts
-  var { autocomplete, create: create2, destroy: destroy2, available: available2 } = browser;
+  if (typeof globalThis !== "undefined") {
+    ;
+    globalThis.Autocomplete = Autocomplete;
+  }
+  var browser = Autocomplete;
+  var autocomplete2 = Autocomplete.autocomplete;
+  var newAutocomplete2 = Autocomplete.newAutocomplete;
+  var getAutocomplete2 = Autocomplete.getAutocomplete;
+  var getAutocompletes2 = Autocomplete.getAutocompletes;
+  var destroyAutocomplete2 = Autocomplete.destroyAutocomplete;
+  var destroyAutocompletes2 = Autocomplete.destroyAutocompletes;
+  var available2 = Autocomplete.available;
+  var global_default = Autocomplete;
   return __toCommonJS(global_exports);
 })();
 //# sourceMappingURL=global.global.js.map