@c2n/autocomplete 0.0.7

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nguyen Thai Vinh
+
+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

@@ -0,0 +1,34 @@
+# @c2n/autocomplete
+
+`<c2-autocomplete>` is a keyboard-accessible combobox composed from `c2-overlay`, `c2-list` and `c2-list-item`.
+
+```bash
+npm install @c2n/autocomplete
+```
+
+```html
+<c2-autocomplete aria-label="Search" placeholder="Search…"></c2-autocomplete>
+```
+
+```js
+import '@c2n/autocomplete'
+
+const autocomplete = document.querySelector('c2-autocomplete')
+autocomplete.suggestions = [
+  { label: 'Ada Lovelace', description: 'Platform engineering' },
+  { label: 'Product roadmap', description: 'Updated yesterday' },
+]
+autocomplete.labelField = 'label'
+autocomplete.descriptionField = 'description'
+
+autocomplete.dataSource = async (query, signal) => {
+  const response = await fetch(`/api/suggestions?q=${encodeURIComponent(query)}`, { signal })
+  return response.json()
+}
+```
+
+As in `c2-virtual-list`, the default row reads only `labelField` and optional `descriptionField`. No other presentation fields have special meaning. For arbitrary objects, configure `itemKey`, `labelField`, `descriptionField`, `disabledField` and `searchFields`, then assign `renderItem({ item, index, search })` for richer row contents. The contents stay wrapped in a selectable `c2-list-item`.
+
+`selection-behavior="replace"` is the default and replaces the typed value with the selected key. Use `selection-behavior="preserve"` to keep the query unchanged and communicate selection only through `suggestion-select`; clicking the input then reopens the same results.
+
+Add `slot="header"` and `slot="footer"` content for controls or actions around the scrolling list. Listen for `suggestion-select` to receive the original item as `event.detail.item`.

package/dist/autocomplete.js

@@ -0,0 +1,569 @@
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
+import { getFieldValue } from "@c2n/core/data-helper.js";
+import { redispatchEvent } from "@c2n/core/dom-helper.js";
+import { arrayPropertyConverter, jsonPropertyConverter } from "@c2n/core/lit-helper.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { live } from "lit/directives/live.js";
+import "@c2n/list";
+import "@c2n/list-item";
+import "@c2n/overlay";
+//#region src/autocomplete.scss?inline
+var autocomplete_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: inline-block;\n  vertical-align: middle;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  display: flex;\n  box-sizing: border-box;\n  width: 100%;\n  min-height: var(--c2-autocomplete--min-height,40px);\n  align-items: center;\n  gap: var(--c2-autocomplete--gap,8px);\n  padding: var(--c2-autocomplete--padding,8px 10px);\n  color: var(--c2-autocomplete--color,#18181b);\n  background: var(--c2-autocomplete--background,#ffffff);\n  border: var(--c2-autocomplete--border,1px solid #bcbcc6);\n  border-radius: var(--c2-autocomplete--border-radius,8px);\n  transition: border 250ms cubic-bezier(0.2, 0, 0, 1), outline 250ms cubic-bezier(0.2, 0, 0, 1);\n  cursor: text;\n}\n.field:hover {\n  border: var(--c2-autocomplete__hover--border,1px solid #a1a1aa);\n}\n.field:focus-within {\n  border: var(--c2-autocomplete__focus--border,1px solid rgb(2, 101, 220));\n  outline: var(--c2-autocomplete__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n  outline-offset: 1px;\n}\n\n:host([disabled]) .field {\n  cursor: default;\n  opacity: var(--c2-autocomplete__disabled--opacity,0.38);\n}\n\n:host([readonly]) .field {\n  cursor: default;\n}\n\n.input {\n  min-width: 0;\n  flex: 1;\n  padding: 0;\n  color: inherit;\n  background: transparent;\n  border: 0;\n  outline: 0;\n  font: inherit;\n  font-size: var(--c2-autocomplete--font-size,14px);\n  line-height: 20px;\n}\n.input::placeholder {\n  color: var(--c2-autocomplete__placeholder--color,#71717a);\n}\n\n::slotted([slot=prefix-icon]),\n::slotted([slot=suffix-icon]),\n.clear {\n  flex: none;\n  width: var(--c2-autocomplete__icon--size,18px);\n  height: var(--c2-autocomplete__icon--size,18px);\n  color: var(--c2-autocomplete__icon--color,#71717a);\n}\n\n::slotted([slot=prefix-icon]),\n::slotted([slot=suffix-icon]) {\n  --c2-feather-icon--size: var(--c2-autocomplete__icon--size,18px);\n  --c2-mat-icon--font-size: var(--c2-autocomplete__icon--size,18px);\n}\n\n.clear {\n  display: grid;\n  place-items: center;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n}\n.clear svg {\n  width: 100%;\n  height: 100%;\n}\n\nc2-overlay {\n  --c2-overlay--offset-y: 6px;\n}\n\n.panel {\n  display: flex;\n  box-sizing: border-box;\n  overflow: hidden;\n  max-height: min(var(--c2-autocomplete__panel--max-height,320px), var(--c2-overlay--available-height, var(--c2-autocomplete__panel--max-height,320px)));\n  flex-direction: column;\n  color: var(--c2-autocomplete--color,#18181b);\n  background: var(--c2-autocomplete__panel--background,#ffffff);\n  border: var(--c2-autocomplete__panel--border,1px solid #e4e4e7);\n  border-radius: var(--c2-autocomplete__panel--border-radius,8px);\n  box-shadow: var(--c2-autocomplete__panel--box-shadow,0 12px 32px rgba(24, 24, 27, 0.14));\n  font-size: var(--c2-autocomplete--font-size,14px);\n}\n\n.panel-header,\n.panel-footer {\n  flex: none;\n}\n.panel-header[hidden],\n.panel-footer[hidden] {\n  display: none;\n}\n\n.panel-header {\n  padding: var(--c2-autocomplete__header--padding,10px 12px);\n  color: var(--c2-autocomplete__header--color,#71717a);\n  background: var(--c2-autocomplete__header--background,transparent);\n  border-bottom: var(--c2-autocomplete__header--border-bottom,1px solid #e4e4e7);\n}\n\n.panel-footer {\n  padding: var(--c2-autocomplete__footer--padding,10px 12px);\n  color: var(--c2-autocomplete__footer--color,#71717a);\n  background: var(--c2-autocomplete__footer--background,transparent);\n  border-top: var(--c2-autocomplete__footer--border-top,1px solid #e4e4e7);\n}\n\n.list {\n  min-height: 0;\n  flex: 1 1 auto;\n  --c2-list--background: transparent;\n  --c2-list--padding-top: var(--c2-autocomplete__list--padding,4px);\n  --c2-list--padding-right: var(--c2-autocomplete__list--padding,4px);\n  --c2-list--padding-bottom: var(--c2-autocomplete__list--padding,4px);\n  --c2-list--padding-left: var(--c2-autocomplete__list--padding,4px);\n  --c2-list-item--min-height: var(--c2-autocomplete__option--min-height,44px);\n  --c2-list-item--padding-top: var(--c2-autocomplete__option--padding-top,8px);\n  --c2-list-item--padding-right: var(--c2-autocomplete__option--padding-right,10px);\n  --c2-list-item--padding-bottom: var(--c2-autocomplete__option--padding-bottom,8px);\n  --c2-list-item--padding-left: var(--c2-autocomplete__option--padding-left,10px);\n  --c2-list-item--gap: var(--c2-autocomplete__option--gap,10px);\n  --c2-list-item--border-top-left-radius: var(--c2-autocomplete__option--border-radius,6px);\n  --c2-list-item--border-top-right-radius: var(--c2-autocomplete__option--border-radius,6px);\n  --c2-list-item--border-bottom-left-radius: var(--c2-autocomplete__option--border-radius,6px);\n  --c2-list-item--border-bottom-right-radius: var(--c2-autocomplete__option--border-radius,6px);\n  --c2-list-item__selected--background: var(--c2-autocomplete__option__active--background,#f4f4f5);\n  --c2-list-item__selected--color: var(--c2-autocomplete__option__active--color,#18181b);\n  --c2-list-item__selected__hover--background: var(--c2-autocomplete__option__active--background,#f4f4f5);\n  --c2-list-item__description--color: var(--c2-autocomplete__description--color,#71717a);\n  --c2-list-item__description--font-size: var(--c2-autocomplete__description--font-size,12px);\n  --c2-list-item__icon--size: var(--c2-autocomplete__icon--size,18px);\n  --c2-list-item__icon--color: var(--c2-autocomplete__icon--color,#71717a);\n}\n\nmark {\n  color: var(--c2-autocomplete__highlight--color,rgb(2, 101, 220));\n  background: transparent;\n  font-weight: var(--c2-autocomplete__highlight--font-weight,600);\n}\n\n.status {\n  padding: var(--c2-autocomplete__status--padding,14px 12px);\n  color: var(--c2-autocomplete__status--color,#71717a);\n  text-align: center;\n}";
+//#endregion
+//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+//#region src/autocomplete.ts
+var IMPLICIT_LABEL_FIELDS = [
+	"label",
+	"name",
+	"title",
+	"value"
+];
+var autocompleteId = 0;
+var Autocomplete = class Autocomplete extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.internals = this.attachInternals();
+		this.uid = ++autocompleteId;
+		this.defaultValue = "";
+		this.defaultValueCaptured = false;
+		this.requestSequence = 0;
+		this.customValidityMessage = "";
+		this.value = "";
+		this.name = "";
+		this.placeholder = "";
+		this.ariaLabel = null;
+		this.suggestions = [];
+		this.itemKey = "";
+		this.labelField = "";
+		this.descriptionField = "";
+		this.disabledField = "";
+		this.searchFields = [];
+		this.selectionBehavior = "replace";
+		this.debounce = 200;
+		this.minQueryLength = 1;
+		this.maxResults = 20;
+		this.showEmpty = false;
+		this.readonly = false;
+		this.disabled = false;
+		this.required = false;
+		this.open = false;
+		this.results = [];
+		this.loading = false;
+		this.focused = false;
+		this.activeIndex = -1;
+		this.disabledByForm = false;
+		this.hasHeader = false;
+		this.hasFooter = false;
+		this.handleInput = (event) => {
+			this.value = event.currentTarget.value;
+			this.selectedItem = void 0;
+			this.dispatchEvent(new CustomEvent("query-change", {
+				detail: { query: this.value },
+				bubbles: true,
+				composed: true
+			}));
+			redispatchEvent(this, event);
+			this.scheduleLoad();
+		};
+		this.handleChange = (event) => redispatchEvent(this, event);
+		this.handleFocus = () => {
+			this.focused = true;
+			if (this.value.trim().length >= this.minQueryLength) this.scheduleLoad();
+		};
+		this.handleBlur = () => {
+			this.focused = false;
+			queueMicrotask(() => {
+				if (!this.matches(":focus-within")) this.close();
+			});
+		};
+		this.handleFieldClick = () => {
+			this.focus();
+			if (this.value.trim().length < this.minQueryLength || this.effectiveDisabled || this.readonly) return;
+			if (!this.loading && this.results.length === 0 && !this.showEmpty && !this.loadError) this.scheduleLoad();
+			else {
+				if (this.activeIndex < 0) this.activeIndex = this.results.findIndex((item) => !this.isDisabled(item));
+				this.open = true;
+			}
+		};
+		this.handleDocumentPointerDown = (event) => {
+			if (this.open && !event.composedPath().includes(this)) this.close();
+		};
+		this.handleDocumentFocusIn = (event) => {
+			if (this.open && !event.composedPath().includes(this)) this.close();
+		};
+		this.handleDocumentKeydown = (event) => {
+			if (this.open && event.key === "Escape") this.close();
+		};
+		this.handleKeydown = (event) => {
+			const enabledIndexes = this.results.map((item, index) => ({
+				item,
+				index
+			})).filter(({ item }) => !this.isDisabled(item));
+			if (event.key === "Escape" || event.key === "Tab") {
+				this.close();
+				return;
+			}
+			if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+				event.preventDefault();
+				if (!this.open) {
+					this.scheduleLoad();
+					this.open = true;
+				}
+				if (enabledIndexes.length === 0) return;
+				const current = enabledIndexes.findIndex(({ index }) => index === this.activeIndex);
+				const offset = event.key === "ArrowDown" ? 1 : -1;
+				const next = current < 0 ? offset > 0 ? 0 : enabledIndexes.length - 1 : (current + offset + enabledIndexes.length) % enabledIndexes.length;
+				this.activeIndex = enabledIndexes[next].index;
+				return;
+			}
+			if (event.key === "Home" && this.open && enabledIndexes.length) {
+				event.preventDefault();
+				this.activeIndex = enabledIndexes[0].index;
+				return;
+			}
+			if (event.key === "End" && this.open && enabledIndexes.length) {
+				event.preventDefault();
+				this.activeIndex = enabledIndexes[enabledIndexes.length - 1].index;
+				return;
+			}
+			if (event.key === "Enter" && this.open && this.activeIndex >= 0) {
+				event.preventDefault();
+				this.selectItem(this.results[this.activeIndex], this.activeIndex);
+			}
+		};
+		this.handleListSelection = (event) => {
+			const key = event.detail.value[0];
+			const index = this.results.findIndex((item, itemIndex) => this.keyOf(item, itemIndex) === key);
+			if (index >= 0) this.selectItem(this.results[index], index);
+		};
+		this.handleClear = (event) => {
+			event.stopPropagation();
+			this.value = "";
+			this.selectedItem = void 0;
+			this.results = [];
+			this.cancelPendingRequest();
+			this.close();
+			this.input?.focus();
+			this.dispatchEvent(new CustomEvent("query-change", {
+				detail: { query: "" },
+				bubbles: true,
+				composed: true
+			}));
+			this.dispatchEvent(new Event("input", {
+				bubbles: true,
+				composed: true
+			}));
+			this.dispatchEvent(new Event("change", {
+				bubbles: true,
+				composed: true
+			}));
+		};
+		this.handleOverlayToggle = (event) => {
+			this.open = event.newState === "open";
+			if (!this.open) this.activeIndex = -1;
+		};
+	}
+	static {
+		this.formAssociated = true;
+	}
+	static {
+		this.styles = unsafeCSS(autocomplete_default);
+	}
+	static {
+		this.shadowRootOptions = {
+			...LitElement.shadowRootOptions,
+			delegatesFocus: true
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.ownerDocument.addEventListener("pointerdown", this.handleDocumentPointerDown, true);
+		this.ownerDocument.addEventListener("focusin", this.handleDocumentFocusIn, true);
+		this.ownerDocument.addEventListener("keydown", this.handleDocumentKeydown, true);
+		if (!this.defaultValueCaptured) {
+			this.defaultValue = this.getAttribute("value") ?? this.value;
+			this.defaultValueCaptured = true;
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.ownerDocument.removeEventListener("pointerdown", this.handleDocumentPointerDown, true);
+		this.ownerDocument.removeEventListener("focusin", this.handleDocumentFocusIn, true);
+		this.ownerDocument.removeEventListener("keydown", this.handleDocumentKeydown, true);
+		this.cancelPendingRequest();
+	}
+	formResetCallback() {
+		this.value = this.defaultValue;
+		this.selectedItem = void 0;
+		this.close();
+	}
+	formDisabledCallback(disabled) {
+		this.disabledByForm = disabled && !this.hasAttribute("disabled");
+	}
+	formStateRestoreCallback(state) {
+		if (typeof state === "string") this.value = state;
+	}
+	get form() {
+		return this.internals.form;
+	}
+	get labels() {
+		return this.internals.labels;
+	}
+	get validity() {
+		return this.internals.validity;
+	}
+	get validationMessage() {
+		return this.internals.validationMessage;
+	}
+	get willValidate() {
+		return this.internals.willValidate;
+	}
+	checkValidity() {
+		return this.internals.checkValidity();
+	}
+	reportValidity() {
+		return this.internals.reportValidity();
+	}
+	setCustomValidity(message) {
+		this.customValidityMessage = message;
+		this.syncFormState();
+	}
+	/** Focuses the inner text input. */
+	focus(options) {
+		this.input?.focus(options);
+	}
+	/** Runs local matching or the remote data source immediately, bypassing the debounce. */
+	async load(query = this.value) {
+		this.cancelPendingRequest();
+		const normalizedQuery = query.trim();
+		if (normalizedQuery.length < this.minQueryLength || this.effectiveDisabled || this.readonly) {
+			this.results = [];
+			this.loading = false;
+			this.loadError = void 0;
+			this.close();
+			return;
+		}
+		if (!this.dataSource) {
+			this.loading = false;
+			this.loadError = void 0;
+			this.results = this.suggestions.filter((item) => this.itemMatches(item, normalizedQuery)).slice(0, Math.max(0, this.maxResults));
+			this.finishResults();
+			return;
+		}
+		const controller = new AbortController();
+		const sequence = ++this.requestSequence;
+		this.requestController = controller;
+		this.loading = true;
+		this.loadError = void 0;
+		this.results = [];
+		this.open = this.focused;
+		try {
+			const loaded = await this.dataSource(normalizedQuery, controller.signal);
+			if (controller.signal.aborted || sequence !== this.requestSequence) return;
+			this.results = loaded.slice(0, Math.max(0, this.maxResults));
+		} catch (error) {
+			if (controller.signal.aborted || sequence !== this.requestSequence) return;
+			this.results = [];
+			this.loadError = error;
+		} finally {
+			if (!controller.signal.aborted && sequence === this.requestSequence) {
+				this.loading = false;
+				this.finishResults();
+			}
+		}
+	}
+	/** Closes the result panel and clears keyboard highlighting. */
+	close() {
+		this.open = false;
+		this.activeIndex = -1;
+	}
+	get effectiveDisabled() {
+		return this.disabled || this.disabledByForm;
+	}
+	get listboxId() {
+		return `c2-autocomplete-listbox-${this.uid}`;
+	}
+	get activeOptionId() {
+		return this.activeIndex >= 0 ? `${this.listboxId}-option-${this.activeIndex}` : void 0;
+	}
+	textOf(value) {
+		return value === void 0 || value === null ? "" : String(value);
+	}
+	keyOf(item, index) {
+		const fieldValue = this.itemKey ? getFieldValue(item, this.itemKey) : void 0;
+		if (fieldValue !== void 0 && fieldValue !== null) return String(fieldValue);
+		if (item === null || typeof item !== "object") return this.textOf(item);
+		return String(index);
+	}
+	labelOf(item) {
+		if (this.labelField) return this.textOf(getFieldValue(item, this.labelField));
+		if (item === null || typeof item !== "object") return this.textOf(item);
+		const record = item;
+		for (const field of IMPLICIT_LABEL_FIELDS) if (record[field] !== void 0) return this.textOf(record[field]);
+		return "";
+	}
+	isDisabled(item) {
+		return this.disabledField ? Boolean(getFieldValue(item, this.disabledField)) : false;
+	}
+	itemMatches(item, query) {
+		const needle = query.toLocaleLowerCase();
+		if (this.matcher) return this.matcher(item, needle);
+		const fields = this.searchFields.length ? this.searchFields : [this.labelField, this.descriptionField].filter(Boolean);
+		if (fields.length) return fields.some((field) => this.textOf(getFieldValue(item, field)).toLocaleLowerCase().includes(needle));
+		if (item === null || typeof item !== "object") return this.textOf(item).toLocaleLowerCase().includes(needle);
+		return Object.values(item).some((fieldValue) => (typeof fieldValue === "string" || typeof fieldValue === "number") && String(fieldValue).toLocaleLowerCase().includes(needle));
+	}
+	finishResults() {
+		this.activeIndex = this.results.findIndex((item) => !this.isDisabled(item));
+		this.open = this.focused && (this.results.length > 0 || this.showEmpty || !!this.loadError);
+	}
+	scheduleLoad() {
+		this.cancelPendingRequest();
+		if (this.value.trim().length < this.minQueryLength) {
+			this.load();
+			return;
+		}
+		if (!this.dataSource || this.debounce <= 0) {
+			this.load();
+			return;
+		}
+		this.loading = true;
+		this.results = [];
+		this.loadError = void 0;
+		this.open = this.focused;
+		this.debounceTimer = setTimeout(() => void this.load(), this.debounce);
+	}
+	cancelPendingRequest() {
+		if (this.debounceTimer) clearTimeout(this.debounceTimer);
+		this.debounceTimer = void 0;
+		this.requestController?.abort();
+		this.requestController = void 0;
+	}
+	selectItem(item, index) {
+		if (this.isDisabled(item)) return;
+		const value = this.keyOf(item, index);
+		const replaceValue = this.selectionBehavior !== "preserve";
+		if (replaceValue) this.value = value;
+		this.selectedItem = item;
+		this.close();
+		this.input?.focus();
+		this.dispatchEvent(new CustomEvent("suggestion-select", {
+			detail: {
+				value,
+				item,
+				index
+			},
+			bubbles: true,
+			composed: true
+		}));
+		if (replaceValue) {
+			this.dispatchEvent(new Event("input", {
+				bubbles: true,
+				composed: true
+			}));
+			this.dispatchEvent(new Event("change", {
+				bubbles: true,
+				composed: true
+			}));
+		}
+	}
+	slotHasContent(event) {
+		return event.target.assignedNodes({ flatten: true }).some((node) => node.nodeType === Node.ELEMENT_NODE || !!node.textContent?.trim());
+	}
+	renderHighlighted(text) {
+		const query = this.value.trim();
+		if (!query) return text;
+		const index = text.toLocaleLowerCase().indexOf(query.toLocaleLowerCase());
+		if (index < 0) return text;
+		return html`${text.slice(0, index)}<mark>${text.slice(index, index + query.length)}</mark>${text.slice(index + query.length)}`;
+	}
+	renderListItem(item, index) {
+		const label = this.labelOf(item);
+		const description = this.descriptionField ? this.textOf(getFieldValue(item, this.descriptionField)) : "";
+		const customContent = this.renderItem?.({
+			item,
+			index,
+			search: this.value
+		});
+		return html`<c2-list-item
+      id=${`${this.listboxId}-option-${index}`}
+      data-index=${index}
+      .value=${this.keyOf(item, index)}
+      .label=${label}
+      .data=${item}
+      .disabled=${this.isDisabled(item)}
+      @pointerenter=${() => {
+			if (!this.isDisabled(item)) this.activeIndex = index;
+		}}
+      >${customContent ?? html`${this.renderHighlighted(label)}${description ? html`<span slot="description">${description}</span>` : nothing}`}</c2-list-item
+    >`;
+	}
+	renderRows() {
+		if (this.loading) return html`<div class="status" role="status"><slot name="loading">Loading suggestions…</slot></div>`;
+		if (this.loadError) return html`<div class="status status--error" role="status"><slot name="error">Could not load suggestions.</slot></div>`;
+		if (this.results.length === 0) return html`<div class="status" role="status"><slot name="empty">No suggestions found.</slot></div>`;
+		return this.results.map((item, index) => this.renderListItem(item, index));
+	}
+	syncFormState() {
+		this.internals.setFormValue(this.effectiveDisabled ? null : this.value, this.value);
+		if (this.effectiveDisabled) {
+			this.internals.setValidity({});
+			return;
+		}
+		if (this.customValidityMessage) this.internals.setValidity({ customError: true }, this.customValidityMessage, this.input);
+		else if (this.required && !this.value) this.internals.setValidity({ valueMissing: true }, "Please fill out this field.", this.input);
+		else this.internals.setValidity({});
+	}
+	updated(changed) {
+		if (changed.has("suggestions") && !this.dataSource && this.focused && this.value.trim().length >= this.minQueryLength) this.load();
+		if (changed.has("open") && this.overlay && this.overlay.open !== this.open) this.overlay.open = this.open;
+		if (changed.has("activeIndex") && this.activeIndex >= 0) this.renderRoot.querySelector(`#${this.activeOptionId}`)?.scrollIntoView({ block: "nearest" });
+		this.syncFormState();
+	}
+	render() {
+		const selectedValue = this.activeIndex >= 0 ? [this.keyOf(this.results[this.activeIndex], this.activeIndex)] : [];
+		return html`<div class="field" @click=${this.handleFieldClick}>
+        <slot name="prefix-icon"></slot>
+        <input
+          class="input"
+          type="text"
+          role="combobox"
+          autocomplete="off"
+          aria-autocomplete="list"
+          aria-label=${ifDefined(this.ariaLabel || void 0)}
+          aria-controls=${this.listboxId}
+          aria-expanded=${this.open ? "true" : "false"}
+          aria-activedescendant=${ifDefined(this.activeOptionId)}
+          aria-busy=${this.loading ? "true" : "false"}
+          placeholder=${this.placeholder || nothing}
+          .value=${live(this.value)}
+          ?disabled=${this.effectiveDisabled}
+          ?readonly=${this.readonly}
+          ?required=${this.required}
+          @input=${this.handleInput}
+          @change=${this.handleChange}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+          @keydown=${this.handleKeydown}
+        />
+        ${this.value && !this.effectiveDisabled && !this.readonly ? html`<button class="clear" type="button" aria-label="Clear" tabindex="-1" @click=${this.handleClear}>
+                <slot name="clear-icon">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+                    <path d="m6 6 12 12M18 6 6 18"></path>
+                  </svg>
+                </slot>
+              </button>` : nothing}
+        <slot name="suffix-icon"></slot>
+      </div>
+      <c2-overlay
+        popover="manual"
+        fit-anchor
+        .anchor=${this.renderRoot.querySelector(".field")}
+        .open=${this.open}
+        @toggle=${this.handleOverlayToggle}
+      >
+        <div class="panel">
+          <header class="panel-header" ?hidden=${!this.hasHeader}>
+            <slot name="header" @slotchange=${(event) => this.hasHeader = this.slotHasContent(event)}></slot>
+          </header>
+          <c2-list
+            id=${this.listboxId}
+            class="list"
+            required
+            aria-label=${ifDefined(this.ariaLabel ? `${this.ariaLabel} suggestions` : "Suggestions")}
+            .value=${selectedValue}
+            @pointerdown=${(event) => event.preventDefault()}
+            @selection-change=${this.handleListSelection}
+            >${this.renderRows()}</c2-list
+          >
+          <footer class="panel-footer" ?hidden=${!this.hasFooter}>
+            <slot name="footer" @slotchange=${(event) => this.hasFooter = this.slotHasContent(event)}></slot>
+          </footer>
+        </div>
+      </c2-overlay>`;
+	}
+};
+__decorate([property({ type: String })], Autocomplete.prototype, "value", void 0);
+__decorate([property({ type: String })], Autocomplete.prototype, "name", void 0);
+__decorate([property({ type: String })], Autocomplete.prototype, "placeholder", void 0);
+__decorate([property({ attribute: "aria-label" })], Autocomplete.prototype, "ariaLabel", void 0);
+__decorate([property({ converter: jsonPropertyConverter })], Autocomplete.prototype, "suggestions", void 0);
+__decorate([property({
+	type: String,
+	attribute: "item-key"
+})], Autocomplete.prototype, "itemKey", void 0);
+__decorate([property({
+	type: String,
+	attribute: "label-field"
+})], Autocomplete.prototype, "labelField", void 0);
+__decorate([property({
+	type: String,
+	attribute: "description-field"
+})], Autocomplete.prototype, "descriptionField", void 0);
+__decorate([property({
+	type: String,
+	attribute: "disabled-field"
+})], Autocomplete.prototype, "disabledField", void 0);
+__decorate([property({
+	converter: arrayPropertyConverter,
+	attribute: "search-fields"
+})], Autocomplete.prototype, "searchFields", void 0);
+__decorate([property({ attribute: false })], Autocomplete.prototype, "matcher", void 0);
+__decorate([property({ attribute: false })], Autocomplete.prototype, "dataSource", void 0);
+__decorate([property({ attribute: false })], Autocomplete.prototype, "renderItem", void 0);
+__decorate([property({
+	attribute: "selection-behavior",
+	reflect: true
+})], Autocomplete.prototype, "selectionBehavior", void 0);
+__decorate([property({ type: Number })], Autocomplete.prototype, "debounce", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "min-query-length"
+})], Autocomplete.prototype, "minQueryLength", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "max-results"
+})], Autocomplete.prototype, "maxResults", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "show-empty"
+})], Autocomplete.prototype, "showEmpty", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Autocomplete.prototype, "readonly", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Autocomplete.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Autocomplete.prototype, "required", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Autocomplete.prototype, "open", void 0);
+__decorate([property({ attribute: false })], Autocomplete.prototype, "selectedItem", void 0);
+__decorate([state()], Autocomplete.prototype, "results", void 0);
+__decorate([state()], Autocomplete.prototype, "loading", void 0);
+__decorate([state()], Autocomplete.prototype, "loadError", void 0);
+__decorate([state()], Autocomplete.prototype, "focused", void 0);
+__decorate([state()], Autocomplete.prototype, "activeIndex", void 0);
+__decorate([state()], Autocomplete.prototype, "disabledByForm", void 0);
+__decorate([state()], Autocomplete.prototype, "hasHeader", void 0);
+__decorate([state()], Autocomplete.prototype, "hasFooter", void 0);
+__decorate([query(".input")], Autocomplete.prototype, "input", void 0);
+__decorate([query("c2-overlay")], Autocomplete.prototype, "overlay", void 0);
+Autocomplete = __decorate([customElement("c2-autocomplete")], Autocomplete);
+//#endregion
+export { Autocomplete };

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@c2n/autocomplete",
+  "version": "0.0.7",
+  "type": "module",
+  "main": "dist/autocomplete.js",
+  "exports": {
+    ".": {
+      "types": "./types/src/autocomplete.d.ts",
+      "default": "./dist/autocomplete.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "default": "./react.js"
+    },
+    "./vue": {
+      "types": "./vue.d.ts",
+      "default": "./vue.js"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types",
+    "react.d.ts",
+    "react.js",
+    "vue.d.ts",
+    "vue.js"
+  ],
+  "keywords": [
+    "autocomplete",
+    "web component",
+    "lit"
+  ],
+  "license": "MIT",
+  "author": "code2nguyen@gmail.com",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/code2nguyen/web-components.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "wireit",
+    "build:only": "vite build",
+    "type-check": "wireit"
+  },
+  "wireit": {
+    "type-check": {
+      "dependencies": [
+        "../../core:build",
+        "../list:build",
+        "../list-item:build",
+        "../overlay:build"
+      ],
+      "command": "tsc -p tsconfig.lib.json --composite false"
+    },
+    "build": {
+      "dependencies": [
+        "type-check"
+      ],
+      "command": "vite build"
+    }
+  },
+  "dependencies": {
+    "@c2n/core": "0.0.7",
+    "@c2n/list": "0.0.7",
+    "@c2n/list-item": "0.0.7",
+    "@c2n/overlay": "0.0.7",
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "@c2n/config": "*"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "c8db398a27f7cd417d665fdf5da455fee2d4e910"
+}

package/react.d.ts

@@ -0,0 +1,24 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// JSX types for the custom elements of @c2n/autocomplete. Import once, anywhere in the program:
+//
+//     import '@c2n/autocomplete/react'
+//
+// Register the elements at module scope before React renders, or React writes an object prop as an
+// attribute and it stringifies.
+
+import type { DetailedHTMLProps, HTMLAttributes } from 'react'
+import type { Autocomplete } from '@c2n/autocomplete'
+
+/** Standard React host-element attributes plus the element's own public properties. */
+type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'c2-autocomplete': C2Props<Autocomplete>
+    }
+  }
+}
+
+export {}

package/react.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}

package/types/src/autocomplete.d.ts

@@ -0,0 +1,248 @@
+import { LitElement, type PropertyValues } from 'lit';
+import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
+import '@c2n/list';
+import '@c2n/list-item';
+import '@c2n/overlay';
+/** Convenient default shape; `suggestions` and `dataSource` may also contain any other item type. */
+export interface AutocompleteSuggestion {
+    label: string;
+    description?: string;
+}
+export interface AutocompleteItemContext {
+    /** Original item returned by `suggestions` or `dataSource`. */
+    item: unknown;
+    /** Index after filtering. */
+    index: number;
+    /** Current query, so custom renderers can highlight it. */
+    search: string;
+}
+/** Returns anything Lit can render. The result is placed inside a real `c2-list-item`. */
+export type AutocompleteItemRenderer = (context: AutocompleteItemContext) => unknown;
+export type AutocompleteMatcher = (item: unknown, query: string) => boolean;
+export type AutocompleteDataSource = (query: string, signal: AbortSignal) => unknown[] | Promise<unknown[]>;
+export type AutocompleteSelectionBehavior = 'preserve' | 'replace';
+export interface AutocompleteSelectEventDetail {
+    value: string;
+    item: unknown;
+    index: number;
+}
+/** Events fired by {@link Autocomplete}, keyed for `addEventListener`. */
+export interface AutocompleteEventMap {
+    'query-change': CustomEvent<{
+        query: string;
+    }>;
+    'suggestion-select': CustomEvent<AutocompleteSelectEventDetail>;
+    input: InputEvent;
+    change: Event;
+}
+export interface Autocomplete {
+    addEventListener: TypedAddEventListener<Autocomplete, AutocompleteEventMap>;
+    removeEventListener: TypedRemoveEventListener<Autocomplete, AutocompleteEventMap>;
+}
+/**
+ * A combobox backed by a composed `c2-list` inside `c2-overlay`. As in `c2-virtual-list`, arbitrary objects use
+ * `itemKey`, `labelField`, `descriptionField` and `disabledField`; `renderItem({ item, index, search })` replaces only
+ * the row content, so selection, keyboard behaviour and accessibility remain owned by the surrounding
+ * `c2-list-item`.
+ *
+ * Local suggestions are filtered in the browser. `dataSource(query, signal)` delegates matching to a server and is
+ * debounced; every superseded request is aborted. The overlay is structurally a header slot, the list, and a footer
+ * slot, with loading / empty / error states rendered inside the list surface.
+ *
+ * @tag c2-autocomplete
+ *
+ * @slot prefix-icon - Icon or adornment shown before the text input.
+ * @slot suffix-icon - Icon or adornment shown after the clear button.
+ * @slot clear-icon - Replaces the default cross in the clear button.
+ * @slot header - Content above the suggestion list, such as filter chips or a result summary.
+ * @slot footer - Content below the suggestion list, such as an “all results” action.
+ * @slot loading - Replaces the loading message inside the list.
+ * @slot empty - Replaces the empty-result message inside the list.
+ * @slot error - Replaces the remote-source error message inside the list.
+ *
+ * @event {CustomEvent<{ query: string }>} query-change - Fired on every user edit, before local filtering or a remote request.
+ * @event {CustomEvent<AutocompleteSelectEventDetail>} suggestion-select - Fired after a row is chosen. The detail contains the selected key, original item and visible index.
+ * @event {InputEvent} input - Re-dispatched from the inner input on every edit; also fired after a suggestion replaces the value.
+ * @event {Event} change - Fired after the typed value is committed or a suggestion replaces it.
+ *
+ * @cssproperty {pixel} [--c2-autocomplete--min-height=40px]
+ * @cssproperty {padding} [--c2-autocomplete--padding=8px 10px]
+ * @cssproperty {pixel} [--c2-autocomplete--gap=8px]
+ * @cssproperty {color} [--c2-autocomplete--background=#ffffff]
+ * @cssproperty {color} [--c2-autocomplete--color=#18181b]
+ * @cssproperty {font-size} [--c2-autocomplete--font-size=14px]
+ * @cssproperty {border} [--c2-autocomplete--border=1px solid #bcbcc6]
+ * @cssproperty {border-radius} [--c2-autocomplete--border-radius=8px]
+ * @cssproperty {border} [--c2-autocomplete__hover--border=1px solid #a1a1aa]
+ * @cssproperty {border} [--c2-autocomplete__focus--border=1px solid rgb(2, 101, 220)]
+ * @cssproperty {outline} [--c2-autocomplete__focus--outline=2px solid rgba(2, 101, 220, 0.4)]
+ * @cssproperty {color} [--c2-autocomplete__placeholder--color=#71717a]
+ * @cssproperty {opacity} [--c2-autocomplete__disabled--opacity=0.38]
+ * @cssproperty {pixel} [--c2-autocomplete__icon--size=18px]
+ * @cssproperty {color} [--c2-autocomplete__icon--color=#71717a]
+ * @cssproperty {color} [--c2-autocomplete__panel--background=#ffffff]
+ * @cssproperty {border} [--c2-autocomplete__panel--border=1px solid #e4e4e7]
+ * @cssproperty {border-radius} [--c2-autocomplete__panel--border-radius=8px]
+ * @cssproperty {box-shadow} [--c2-autocomplete__panel--box-shadow=0 12px 32px rgba(24, 24, 27, 0.14)]
+ * @cssproperty {pixel} [--c2-autocomplete__panel--max-height=320px]
+ * @cssproperty {padding} [--c2-autocomplete__list--padding=4px]
+ * @cssproperty {color} [--c2-autocomplete__header--background=transparent]
+ * @cssproperty {color} [--c2-autocomplete__header--color=#71717a]
+ * @cssproperty {padding} [--c2-autocomplete__header--padding=10px 12px]
+ * @cssproperty {border} [--c2-autocomplete__header--border-bottom=1px solid #e4e4e7]
+ * @cssproperty {color} [--c2-autocomplete__footer--background=transparent]
+ * @cssproperty {color} [--c2-autocomplete__footer--color=#71717a]
+ * @cssproperty {padding} [--c2-autocomplete__footer--padding=10px 12px]
+ * @cssproperty {border} [--c2-autocomplete__footer--border-top=1px solid #e4e4e7]
+ * @cssproperty {pixel} [--c2-autocomplete__option--min-height=44px]
+ * @cssproperty {pixel} [--c2-autocomplete__option--padding-top=8px]
+ * @cssproperty {pixel} [--c2-autocomplete__option--padding-right=10px]
+ * @cssproperty {pixel} [--c2-autocomplete__option--padding-bottom=8px]
+ * @cssproperty {pixel} [--c2-autocomplete__option--padding-left=10px]
+ * @cssproperty {pixel} [--c2-autocomplete__option--gap=10px]
+ * @cssproperty {border-radius} [--c2-autocomplete__option--border-radius=6px]
+ * @cssproperty {color} [--c2-autocomplete__option__active--background=#f4f4f5]
+ * @cssproperty {color} [--c2-autocomplete__option__active--color=#18181b]
+ * @cssproperty {color} [--c2-autocomplete__description--color=#71717a]
+ * @cssproperty {font-size} [--c2-autocomplete__description--font-size=12px]
+ * @cssproperty {color} [--c2-autocomplete__highlight--color=rgb(2, 101, 220)]
+ * @cssproperty {font-weight} [--c2-autocomplete__highlight--font-weight=600]
+ * @cssproperty {color} [--c2-autocomplete__status--color=#71717a]
+ * @cssproperty {padding} [--c2-autocomplete__status--padding=14px 12px]
+ *
+ * @internalcomponent c2-overlay
+ * @internalcomponent c2-list
+ * @internalcomponent c2-list-item
+ */
+export declare class Autocomplete extends LitElement {
+    static formAssociated: boolean;
+    static styles: import("lit").CSSResult;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry | null;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    private readonly internals;
+    private readonly uid;
+    private defaultValue;
+    private defaultValueCaptured;
+    private debounceTimer;
+    private requestController;
+    private requestSequence;
+    private customValidityMessage;
+    /** Current input text and form value. A selection replaces it only when `selectionBehavior` is `replace`. */
+    value: string;
+    /** Input name used for form submission. */
+    name: string;
+    /** Text shown while the input is empty. */
+    placeholder: string;
+    /** Accessible name forwarded to the combobox input and composed list. */
+    ariaLabel: string | null;
+    /** Local items to search. An array in the property, JSON in the attribute; items may have any structure. */
+    suggestions: unknown[];
+    /** Field used as a result's stable value. An empty value falls back to a primitive item or its index. */
+    itemKey: string;
+    /** Field used as primary row text. Defaults to `label`, `name`, `title` or `value`. */
+    labelField: string;
+    /** Field used for the optional secondary row line. */
+    descriptionField: string;
+    /** Field whose truthy value makes a row unavailable. */
+    disabledField: string;
+    /** Fields used by local matching; a `;`-separated attribute or string array property. Defaults to every scalar field. */
+    searchFields: string[];
+    /** Custom local matching for arbitrary item structures. */
+    matcher: AutocompleteMatcher | undefined;
+    /** Async item provider. It receives the query and an abort signal; server results are not filtered again locally. */
+    dataSource: AutocompleteDataSource | undefined;
+    /** Replaces a row's content. The returned content is wrapped in a selectable `c2-list-item`. */
+    renderItem: AutocompleteItemRenderer | undefined;
+    /** Whether selection preserves the typed query or replaces it with the selected item's key. */
+    selectionBehavior: AutocompleteSelectionBehavior;
+    /** Delay before calling `dataSource`, in milliseconds. */
+    debounce: number;
+    /** Query length required before results are shown or requested. */
+    minQueryLength: number;
+    /** Maximum number of results shown after filtering or loading. */
+    maxResults: number;
+    /** Keep the result panel open to show an empty state when nothing matches. */
+    showEmpty: boolean;
+    /** Shows the value without allowing edits or opening suggestions. */
+    readonly: boolean;
+    /** Disables the control and excludes it from form submission. */
+    disabled: boolean;
+    /** Marks the control required for native form validation. */
+    required: boolean;
+    /** Whether the suggestion panel is open. May also be controlled programmatically. */
+    open: boolean;
+    /** Original item selected most recently, or `undefined` after the input is edited. */
+    selectedItem: unknown;
+    private results;
+    private loading;
+    private loadError;
+    private focused;
+    private activeIndex;
+    private disabledByForm;
+    private hasHeader;
+    private hasFooter;
+    private input?;
+    private overlay?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formStateRestoreCallback(state: string | File | FormData | null): void;
+    get form(): HTMLFormElement | null;
+    get labels(): NodeList;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    setCustomValidity(message: string): void;
+    /** Focuses the inner text input. */
+    focus(options?: FocusOptions): void;
+    /** Runs local matching or the remote data source immediately, bypassing the debounce. */
+    load(query?: string): Promise<void>;
+    /** Closes the result panel and clears keyboard highlighting. */
+    close(): void;
+    private get effectiveDisabled();
+    private get listboxId();
+    private get activeOptionId();
+    private textOf;
+    private keyOf;
+    private labelOf;
+    private isDisabled;
+    private itemMatches;
+    private finishResults;
+    private scheduleLoad;
+    private cancelPendingRequest;
+    private handleInput;
+    private handleChange;
+    private handleFocus;
+    private handleBlur;
+    private handleFieldClick;
+    private handleDocumentPointerDown;
+    private handleDocumentFocusIn;
+    private handleDocumentKeydown;
+    private handleKeydown;
+    private handleListSelection;
+    private selectItem;
+    private handleClear;
+    private handleOverlayToggle;
+    private slotHasContent;
+    private renderHighlighted;
+    private renderListItem;
+    private renderRows;
+    private syncFormState;
+    protected updated(changed: PropertyValues): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-autocomplete': Autocomplete;
+    }
+}
+//# sourceMappingURL=autocomplete.d.ts.map

package/types/src/autocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../src/autocomplete.ts"],"names":[],"mappings":"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"}

package/vue.d.ts

@@ -0,0 +1,46 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// Vue template types for the custom elements of @c2n/autocomplete. Import once, anywhere in the program:
+//
+//     import '@c2n/autocomplete/vue'
+//
+// Tell the compiler about the tags as well, or every c2-* tag is resolved as a Vue component and renders
+// nothing: template.compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-') in vite.config.ts.
+
+import type { DefineComponent, HTMLAttributes } from 'vue'
+import type { Autocomplete, AutocompleteEventMap } from '@c2n/autocomplete'
+
+/** The element's own public properties, plus every attribute Vue understands on a host element. */
+type C2Props<T> = Partial<Omit<T, keyof HTMLElement>> & HTMLAttributes
+
+declare module 'vue' {
+  interface GlobalComponents {
+    'c2-autocomplete': DefineComponent<
+      C2Props<Autocomplete> & {
+        'aria-label'?: unknown
+        'item-key'?: unknown
+        'label-field'?: unknown
+        'description-field'?: unknown
+        'disabled-field'?: unknown
+        'search-fields'?: unknown
+        'selection-behavior'?: unknown
+        'min-query-length'?: unknown
+        'max-results'?: unknown
+        'show-empty'?: unknown
+        onSuggestionSelect?: (event: AutocompleteEventMap['suggestion-select']) => void
+        onInput?: (event: AutocompleteEventMap['input']) => void
+        onChange?: (event: AutocompleteEventMap['change']) => void
+        onQueryChange?: (event: AutocompleteEventMap['query-change']) => void
+      }
+    >
+  }
+}
+
+declare module '@vue/runtime-dom' {
+  interface HTMLAttributes {
+    /** Vue's own definition omits it, and slotting a plain element into a component needs it. */
+    slot?: string
+  }
+}
+
+export {}

package/vue.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}