@samline/autocomplete 0.0.0-stage → 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,23 @@
+# Changelog
+
+All notable changes to `@samline/autocomplete` are documented in this file. The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and the project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.0.0] - 2026-11-13
+
+First public release.
+
+### Added
+
+- `createAutocomplete(input, options)` (alias `autocomplete`) turns an existing text input into an accessible remote combobox: debounce, abortable requests, stale-response protection, listbox rendering, keyboard and pointer selection, events and cleanup.
+- Options: `endpoint`, `queryParam`, `requestInit`, `parseResponse`, `mapResponse`, `getId`, `getLabel`, `getValue`, `renderOption`, `minLength`, `debounce`, `maxResults`, `searchOnFocus`, `messages`, `onSelect` and `onError`.
+- Events `autocomplete:loadstart`, `autocomplete:load`, `autocomplete:error`, `autocomplete:select` and `autocomplete:clear`.
+- Keyboard: ArrowUp, ArrowDown, Home, End, Enter, Escape and Tab. Searches wait for IME composition to finish.
+- Browser global `window.Autocomplete` with `create`, `destroy`, `available` and `autocomplete`, and an optional stylesheet themed with `--autocomplete-*` custom properties.
+- Website with examples and documentation at https://samline.github.io/autocomplete/.
+
+### Fixed (since the unpublished 0.1.0)
+
+- Escape, Tab, clicking outside, selecting a suggestion and `close()` cancel the pending debounced search and abort the request in flight. Before, a late response reopened the list after it was dismissed.
+- The standalone script defines `window.Autocomplete` with its documented members. Before, the global was wrapped as `{ default }`.
+
+[1.0.0]: https://github.com/samline/autocomplete/releases/tag/v1.0.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 samline
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,139 @@
-# Temporary Holding Version
+# @samline/autocomplete
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+An accessible, framework-agnostic remote autocomplete (combobox) for vanilla JavaScript, TypeScript and plain HTML. Point an input at your endpoint; debounce, cancellation, keyboard navigation, events and cleanup are handled for you.
+
+[Demo](https://samline.github.io/autocomplete/) · [Examples](https://samline.github.io/autocomplete/examples/) · [Documentation](https://samline.github.io/autocomplete/docs/) · [Changelog](CHANGELOG.md)
+
+## Table of contents
+
+- [Installation](#installation)
+- [Quick start](#quick-start)
+- [HTML / CDN](#html--cdn)
+- [Capabilities](#capabilities)
+- [API at a glance](#api-at-a-glance)
+- [Documentation](#documentation)
+- [Changelog](#changelog)
+- [AI agent skill](#ai-agent-skill)
+- [License](#license)
+
+## Installation
+
+```sh
+npm install @samline/autocomplete
+```
+
+```sh
+pnpm add @samline/autocomplete
+```
+
+```sh
+bun add @samline/autocomplete
+```
+
+Works in modern browsers with `fetch` and `AbortController`, and imports in Node 20 or newer. No runtime dependencies; the stylesheet is optional.
+
+## Quick start
+
+```html
+<div class="field" style="position: relative">
+  <label for="city">City</label>
+  <input id="city" type="text" />
+</div>
+```
+
+```js
+import { createAutocomplete } from '@samline/autocomplete'
+import '@samline/autocomplete/styles.css'
+
+const controller = createAutocomplete('#city', {
+  endpoint: '/api/cities', // GET /api/cities?q=<query>
+  getId: city => city.id,
+  getLabel: city => city.name,
+  onSelect: city => console.log('Selected', city),
+})
+
+controller.destroy() // removes the list and restores the input
+```
+
+## HTML / CDN
+
+For Shopify, WordPress or plain HTML pages without a build step, load the stylesheet and the browser bundle. Pin the version in production.
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@samline/autocomplete@1.0.0/dist/styles.css" />
+<script src="https://cdn.jsdelivr.net/npm/@samline/autocomplete@1.0.0/dist/browser/global.global.js"></script>
+<script>
+  window.Autocomplete.create('#city', { endpoint: '/api/cities' })
+</script>
+```
+
+`window.Autocomplete` has `create(target, options)` (requires an input id and registers the controller), `destroy(id)`, `available` and `autocomplete(target, options)`.
+
+## Capabilities
+
+### Any endpoint, any response
+
+`endpoint` is a URL or a function of the query. `requestInit` adds headers or credentials, `parseResponse` replaces JSON parsing, and `mapResponse`, `getId`, `getLabel` and `getValue` adapt whatever your API returns.
+
+### An accessible combobox
+
+ARIA `combobox` and `listbox` roles, `aria-expanded` and `aria-activedescendant`, status and error messages, and ArrowUp, ArrowDown, Home, End, Enter, Escape and Tab. Searches wait for IME composition to finish.
+
+### No stale results
+
+Searches are debounced, superseded requests are aborted and late responses ignored. Closing the list (Escape, Tab, clicking outside, selecting or `close()`) cancels the pending search.
+
+### Events and styling
+
+`autocomplete:select`, `autocomplete:clear`, `autocomplete:load`, `autocomplete:loadstart` and `autocomplete:error` bubble from the input. The optional stylesheet is themed with `--autocomplete-*` custom properties, and `renderOption` adds your own content to each option.
+
+## API at a glance
+
+| API | Purpose |
+| --- | --- |
+| `createAutocomplete(input, options)` | Attach the combobox and return a controller (`autocomplete` is an alias). |
+| `controller.search(query?)` / `close()` / `clear()` / `cancel()` | Run a search now, close the list, clear everything or cancel pending work. |
+| `controller.getSelected()` / `destroy()` | Read the selected suggestion or remove the combobox. |
+| `mapCommonResponse`, `parseJsonResponse` | The default response mapper and parser. |
+
+### Entrypoints
+
+| Entrypoint | When to use |
+| --- | --- |
+| `@samline/autocomplete` | ESM or CommonJS: `createAutocomplete`, helpers, `browser` registry and types. |
+| `@samline/autocomplete/browser` | Classic script that defines `window.Autocomplete`. |
+| `@samline/autocomplete/styles.css` | Optional base stylesheet. |
+
+## Documentation
+
+Read the [documentation](https://samline.github.io/autocomplete/docs/) for the full guides and API contracts, and explore [working examples](https://samline.github.io/autocomplete/examples/) with complete and separate source files.
+
+| Guide | What it covers |
+| --- | --- |
+| [Installation](https://samline.github.io/autocomplete/docs/getting-started/) | Package / ESM, HTML / CDN and working starter files. |
+| [Options](https://samline.github.io/autocomplete/docs/reference/configuration/) | Every option and its default. |
+| [API reference](https://samline.github.io/autocomplete/docs/reference/api/) | The controller, helpers, browser global and events. |
+| [Accessibility](https://samline.github.io/autocomplete/docs/guides/accessibility/) | What the combobox provides and what your page provides. |
+| [Styling](https://samline.github.io/autocomplete/docs/guides/styling/) | The DOM contract and the custom properties. |
+
+## Changelog
+
+Read [CHANGELOG.md](CHANGELOG.md) or the [published changelog](https://samline.github.io/autocomplete/docs/changelog/) for release history and explicitly marked breaking and behavior changes. Review the notes before upgrading.
+
+## AI agent skill
+
+The [Autocomplete skill](https://samline.github.io/autocomplete/skills/autocomplete/SKILL.md) teaches verified package integration. Its maintained [repository source](skills/autocomplete/SKILL.md) and website download are the same file. Verify the installed package version before applying its guidance.
+
+Download [SKILL.md](https://samline.github.io/autocomplete/skills/autocomplete/SKILL.md) into an `autocomplete/` folder in your agent's supported skill directory. For agents that discover project skills from `.agents/skills/`:
+
+```sh
+mkdir -p .agents/skills/autocomplete
+curl --fail --location https://samline.github.io/autocomplete/skills/autocomplete/SKILL.md \
+  --output .agents/skills/autocomplete/SKILL.md
+```
+
+When working from this repository, copy `skills/autocomplete/SKILL.md` instead. Keep the filename `SKILL.md`; discovery paths and invocation syntax depend on the agent.
+
+## License
+
+MIT — [LICENSE.md](LICENSE.md).

package/dist/browser/global.d.ts

@@ -0,0 +1,61 @@
+type AutocompleteTarget = string | HTMLInputElement;
+type AutocompleteEndpoint = string | URL | ((query: string, input: HTMLInputElement) => string | URL);
+type AutocompleteRequestInit = RequestInit | ((query: string, input: HTMLInputElement) => RequestInit);
+type AutocompleteParser = (response: Response, query: string) => Promise<unknown>;
+type AutocompleteResponseMapper<T> = (payload: unknown, response: Response, query: string) => readonly T[] | Promise<readonly T[]>;
+interface AutocompleteMessages {
+    loading: string;
+    empty: string;
+    error: string;
+}
+interface AutocompleteOptions<T = unknown> {
+    endpoint: AutocompleteEndpoint;
+    queryParam?: string | null;
+    requestInit?: AutocompleteRequestInit;
+    parseResponse?: AutocompleteParser;
+    mapResponse?: AutocompleteResponseMapper<T>;
+    getId?: (suggestion: T, index: number) => string | number;
+    getLabel?: (suggestion: T) => string;
+    getValue?: (suggestion: T) => string;
+    renderOption?: (element: HTMLButtonElement, suggestion: T) => void;
+    minLength?: number;
+    debounce?: number;
+    maxResults?: number;
+    searchOnFocus?: boolean;
+    messages?: Partial<AutocompleteMessages>;
+    onSelect?: (suggestion: T, input: HTMLInputElement) => void;
+    onError?: (error: unknown, input: HTMLInputElement) => void;
+}
+interface AutocompleteController<T = unknown> {
+    readonly element: HTMLInputElement;
+    readonly listElement: HTMLDivElement;
+    readonly options: Readonly<AutocompleteOptions<T>>;
+    search(query?: string): Promise<void>;
+    close(): void;
+    clear(): void;
+    cancel(): void;
+    getSelected(): T | null;
+    destroy(): void;
+}
+
+declare function createAutocomplete<T = unknown>(target: AutocompleteTarget, options: AutocompleteOptions<T>): AutocompleteController<T>;
+
+type AutocompleteAvailable = Record<string, AutocompleteController<unknown>>;
+interface AutocompleteApi {
+    autocomplete: typeof createAutocomplete;
+    create: <T>(target: AutocompleteTarget, options: AutocompleteOptions<T>) => AutocompleteController<T>;
+    destroy: (id: string) => void;
+    available: AutocompleteAvailable;
+}
+
+declare global {
+    interface Window {
+        Autocomplete?: AutocompleteApi;
+    }
+}
+declare const autocomplete: typeof createAutocomplete;
+declare const create: <T>(target: AutocompleteTarget, options: AutocompleteOptions<T>) => AutocompleteController<T>;
+declare const destroy: (id: string) => void;
+declare const available: AutocompleteAvailable;
+
+export { autocomplete, available, create, destroy };

package/dist/browser/global.global.js

@@ -0,0 +1,437 @@
+"use strict";
+var Autocomplete = (() => {
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __export = (target, all) => {
+    for (var name in all)
+      __defProp(target, name, { get: all[name], enumerable: true });
+  };
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+  // src/browser/global.ts
+  var global_exports = {};
+  __export(global_exports, {
+    autocomplete: () => autocomplete,
+    available: () => available2,
+    create: () => create2,
+    destroy: () => destroy2
+  });
+
+  // src/core/defaults.ts
+  var DEFAULT_MESSAGES = {
+    loading: "Searching...",
+    empty: "No results",
+    error: "Search failed"
+  };
+  var parseJsonResponse = async (response) => response.json();
+  var mapCommonResponse = (payload) => {
+    if (Array.isArray(payload)) return payload;
+    if (!payload || typeof payload !== "object") throw invalidPayloadError();
+    const record = payload;
+    if (Array.isArray(record.suggestions)) return record.suggestions;
+    if (Array.isArray(record.items)) return record.items;
+    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) {
+    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) {
+    if (!suggestion || typeof suggestion !== "object") return index;
+    return suggestion.id ?? index;
+  }
+  function validateOptions(options) {
+    if (!options.endpoint) throw new TypeError("Autocomplete requires an endpoint.");
+    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.");
+    }
+  }
+  function assertNonNegativeInteger(value, name) {
+    if (value !== void 0 && (!Number.isInteger(value) || value < 0)) {
+      throw new TypeError(`Autocomplete ${name} must be a non-negative integer.`);
+    }
+  }
+  function invalidPayloadError() {
+    return new TypeError(
+      "Autocomplete response does not contain an array. Configure mapResponse(payload, response, query)."
+    );
+  }
+
+  // src/core/dom.ts
+  function 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;
+    }
+    element.setAttribute(name, value);
+  }
+
+  // src/core/controller.ts
+  var instanceCount = 0;
+  function createAutocompleteController(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 list = document.createElement("div");
+    const originalAttributes = /* @__PURE__ */ new Map();
+    let suggestions = [];
+    let activeIndex = -1;
+    let selected = null;
+    let debounceTimer;
+    let abortController = null;
+    let requestSequence = 0;
+    let destroyed = false;
+    let suppressFocusSearch = false;
+    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));
+    }
+    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();
+        return;
+      }
+      debounceTimer = window.setTimeout(() => void search(query), settings.debounce);
+    }
+    async function search(query = input.value.trim()) {
+      if (destroyed || query.length < settings.minLength) {
+        close();
+        return;
+      }
+      cancel();
+      const sequence = ++requestSequence;
+      const controller = new AbortController();
+      abortController = controller;
+      renderStatus(messages.loading, "status", "loading");
+      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.");
+        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)
+        });
+      } catch (error) {
+        if (isAbortError(error) || sequence !== requestSequence) return;
+        suggestions = [];
+        activeIndex = -1;
+        renderStatus(messages.error, "alert", "error");
+        dispatch("autocomplete:error", { query, error });
+        settings.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 hadSelection = selected !== null;
+      cancel();
+      suggestions = [];
+      activeIndex = -1;
+      selected = null;
+      input.value = "";
+      close();
+      if (hadSelection) dispatch("autocomplete:clear", { query: "" });
+    }
+    function 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() {
+      if (suppressFocusSearch) return;
+      if (settings.searchOnFocus && input.value.trim().length >= settings.minLength) {
+        scheduleSearch();
+      }
+    }
+    function handleKeydown(event) {
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        if (suggestions.length === 0 || list.hidden) return;
+        event.preventDefault();
+        moveActiveOption(event.key === "ArrowDown" ? 1 : -1);
+        return;
+      }
+      if (event.key === "Enter" && !list.hidden && activeIndex >= 0) {
+        event.preventDefault();
+        select(activeIndex);
+        return;
+      }
+      if ((event.key === "Home" || event.key === "End") && !list.hidden && suggestions.length > 0) {
+        event.preventDefault();
+        activeIndex = event.key === "Home" ? 0 : suggestions.length - 1;
+        updateActiveOption();
+        return;
+      }
+      if (event.key === "Escape") {
+        event.preventDefault();
+        dismiss();
+        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() {
+      if (destroyed) return;
+      destroyed = true;
+      cancel();
+      input.removeEventListener("input", handleInput);
+      input.removeEventListener("compositionend", scheduleSearch);
+      input.removeEventListener("focus", handleFocus);
+      input.removeEventListener("keydown", handleKeydown);
+      document.removeEventListener("pointerdown", handleDocumentPointerDown);
+      list.remove();
+      originalAttributes.forEach((value, name) => restoreAttribute(input, name, value));
+    }
+    input.addEventListener("input", handleInput);
+    input.addEventListener("compositionend", scheduleSearch);
+    input.addEventListener("focus", handleFocus);
+    input.addEventListener("keydown", handleKeydown);
+    document.addEventListener("pointerdown", handleDocumentPointerDown);
+    return {
+      element: input,
+      listElement: list,
+      options,
+      search,
+      close: dismiss,
+      clear,
+      cancel,
+      getSelected: () => selected,
+      destroy: destroy3
+    };
+  }
+  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();
+    delete available[id];
+  }
+  var browser = {
+    autocomplete: createAutocomplete,
+    create,
+    destroy,
+    available
+  };
+
+  // src/browser/global.ts
+  var { autocomplete, create: create2, destroy: destroy2, available: available2 } = browser;
+  return __toCommonJS(global_exports);
+})();
+//# sourceMappingURL=global.global.js.map