@melodicdev/components 1.1.1 → 1.2.0

package/lib/components/forms/autocomplete/autocomplete.component.d.ts

@@ -0,0 +1,127 @@
+import type { IElementRef, OnCreate, OnDestroy } from '@melodicdev/core';
+import type { Size } from '../../../types/index.js';
+import type { AutocompleteOption, AutocompleteSearchFn } from './autocomplete.types.js';
+/**
+ * ml-autocomplete - Typeahead/autocomplete form component
+ *
+ * Provides a text input with dropdown suggestions. Supports static option lists
+ * or async search via a promise-returning function.
+ *
+ * @example
+ * ```html
+ * <ml-autocomplete
+ *   label="Search users"
+ *   placeholder="Type to search..."
+ *   .options=${userOptions}
+ * ></ml-autocomplete>
+ *
+ * <ml-autocomplete
+ *   label="Search"
+ *   .searchFn=${async (query) => fetch(`/api/search?q=${query}`).then(r => r.json())}
+ *   .debounce=${300}
+ * ></ml-autocomplete>
+ * ```
+ *
+ * @fires ml:change - Emitted when selection changes
+ * @fires ml:search - Emitted when search query changes
+ * @fires ml:open - Emitted when dropdown opens
+ * @fires ml:close - Emitted when dropdown closes
+ */
+export declare class AutocompleteComponent implements IElementRef, OnCreate, OnDestroy {
+    elementRef: HTMLElement;
+    /** Label text */
+    label: string;
+    /** Placeholder text */
+    placeholder: string;
+    /** Hint text shown below input */
+    hint: string;
+    /** Error message (shows error state when set) */
+    error: string;
+    /** Component size */
+    size: Size;
+    /** Disable the component */
+    disabled: boolean;
+    /** Mark as required */
+    required: boolean;
+    /** Enable multi-select mode */
+    multiple: boolean;
+    /** Currently selected value (single mode) */
+    value: string;
+    /** Currently selected values (multi mode) */
+    values: string[];
+    /** Static options list */
+    options: AutocompleteOption[];
+    /** Async search function */
+    searchFn: AutocompleteSearchFn | null;
+    /** Debounce ms for async search */
+    debounce: number;
+    /** Min chars before searching (0 = show on focus) */
+    minChars: number;
+    /** Show search icon */
+    showIcon: boolean;
+    /** Current search query */
+    search: string;
+    /** Whether dropdown is open */
+    isOpen: boolean;
+    /** Currently focused option index */
+    focusedIndex: number;
+    /** Loading state for async search */
+    _loading: boolean;
+    /** Resolved async results */
+    _asyncOptions: AutocompleteOption[];
+    private readonly _handleKeyDown;
+    private readonly _handleDocumentClick;
+    private _handleScroll;
+    private _debounceTimer;
+    private _syncingValues;
+    onCreate(): void;
+    onDestroy(): void;
+    onPropertyChange(name: string): void;
+    /** Get the selected option (single mode) */
+    get selectedOption(): AutocompleteOption | undefined;
+    /** Get selected options (multi mode) */
+    get selectedOptions(): AutocompleteOption[];
+    /** All available options (static or async) */
+    get allOptions(): AutocompleteOption[];
+    /** Filtered options for display */
+    get filteredOptions(): AutocompleteOption[];
+    get hasValue(): boolean;
+    /** Display text for the input in single mode */
+    get displayText(): string;
+    /** Open the dropdown */
+    open: () => void;
+    /** Close the dropdown */
+    close: () => void;
+    /** Select an option */
+    selectOption: (option: AutocompleteOption) => void;
+    /** Handle click on option */
+    handleOptionClick: (event: Event, option: AutocompleteOption) => void;
+    /** Handle input changes */
+    handleInput: (event: Event) => void;
+    /** Handle input focus */
+    handleFocus: () => void;
+    /** Handle input click */
+    handleInputClick: (event: Event) => void;
+    /** Handle tag remove in multi mode */
+    handleTagRemove: (event: Event, value: string) => void;
+    /** Clear the current value (single mode) */
+    handleClear: (event: Event) => void;
+    private toggleOption;
+    private debouncedSearch;
+    private executeSearch;
+    /** Close dropdown on clicks outside the component */
+    private onDocumentClick;
+    private addDocumentClickListener;
+    private removeDocumentClickListener;
+    private positionDropdown;
+    private addScrollListener;
+    private removeScrollListener;
+    private getDropdownEl;
+    private onKeyDown;
+    private focusNextOption;
+    private focusPreviousOption;
+    private findFirstEnabledIndex;
+    private updateValues;
+    private areValuesEqual;
+}
+//# sourceMappingURL=autocomplete.component.d.ts.map

package/lib/components/forms/autocomplete/autocomplete.component.d.ts.map

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

package/lib/components/forms/autocomplete/autocomplete.component.js

@@ -0,0 +1,491 @@
+var __decorate = (this && this.__decorate) || function (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;
+};
+import { MelodicComponent } from '@melodicdev/core';
+import { computePosition, offset, flip, shift } from '../../../utils/positioning/index.js';
+import { autocompleteTemplate } from './autocomplete.template.js';
+import { autocompleteStyles } from './autocomplete.styles.js';
+/**
+ * ml-autocomplete - Typeahead/autocomplete form component
+ *
+ * Provides a text input with dropdown suggestions. Supports static option lists
+ * or async search via a promise-returning function.
+ *
+ * @example
+ * ```html
+ * <ml-autocomplete
+ *   label="Search users"
+ *   placeholder="Type to search..."
+ *   .options=${userOptions}
+ * ></ml-autocomplete>
+ *
+ * <ml-autocomplete
+ *   label="Search"
+ *   .searchFn=${async (query) => fetch(`/api/search?q=${query}`).then(r => r.json())}
+ *   .debounce=${300}
+ * ></ml-autocomplete>
+ * ```
+ *
+ * @fires ml:change - Emitted when selection changes
+ * @fires ml:search - Emitted when search query changes
+ * @fires ml:open - Emitted when dropdown opens
+ * @fires ml:close - Emitted when dropdown closes
+ */
+let AutocompleteComponent = class AutocompleteComponent {
+    constructor() {
+        /** Label text */
+        this.label = '';
+        /** Placeholder text */
+        this.placeholder = 'Search';
+        /** Hint text shown below input */
+        this.hint = '';
+        /** Error message (shows error state when set) */
+        this.error = '';
+        /** Component size */
+        this.size = 'md';
+        /** Disable the component */
+        this.disabled = false;
+        /** Mark as required */
+        this.required = false;
+        /** Enable multi-select mode */
+        this.multiple = false;
+        /** Currently selected value (single mode) */
+        this.value = '';
+        /** Currently selected values (multi mode) */
+        this.values = [];
+        /** Static options list */
+        this.options = [];
+        /** Async search function */
+        this.searchFn = null;
+        /** Debounce ms for async search */
+        this.debounce = 300;
+        /** Min chars before searching (0 = show on focus) */
+        this.minChars = 0;
+        /** Show search icon */
+        this.showIcon = true;
+        /** Current search query */
+        this.search = '';
+        /** Whether dropdown is open */
+        this.isOpen = false;
+        /** Currently focused option index */
+        this.focusedIndex = -1;
+        /** Loading state for async search */
+        this._loading = false;
+        /** Resolved async results */
+        this._asyncOptions = [];
+        this._handleKeyDown = this.onKeyDown.bind(this);
+        this._handleDocumentClick = this.onDocumentClick.bind(this);
+        this._handleScroll = null;
+        this._debounceTimer = null;
+        this._syncingValues = false;
+        /** Open the dropdown */
+        this.open = () => {
+            if (this.disabled || this.isOpen)
+                return;
+            if (this.minChars > 0 && this.search.length < this.minChars)
+                return;
+            const dropdownEl = this.getDropdownEl();
+            if (!dropdownEl)
+                return;
+            dropdownEl.showPopover();
+            this.isOpen = true;
+            this.focusedIndex = this.findFirstEnabledIndex();
+            this.positionDropdown();
+            this.addScrollListener();
+            this.addDocumentClickListener();
+            this.elementRef.dispatchEvent(new CustomEvent('ml:open', { bubbles: true, composed: true }));
+        };
+        /** Close the dropdown */
+        this.close = () => {
+            if (!this.isOpen)
+                return;
+            this.getDropdownEl()?.hidePopover();
+            this.isOpen = false;
+            this.focusedIndex = -1;
+            this.removeScrollListener();
+            this.removeDocumentClickListener();
+            this.elementRef.dispatchEvent(new CustomEvent('ml:close', { bubbles: true, composed: true }));
+        };
+        /** Select an option */
+        this.selectOption = (option) => {
+            if (option.disabled)
+                return;
+            if (this.multiple) {
+                this.toggleOption(option);
+                return;
+            }
+            this.value = option.value;
+            this.search = '';
+            this.close();
+            this.elementRef.dispatchEvent(new CustomEvent('ml:change', {
+                bubbles: true,
+                composed: true,
+                detail: { value: this.value, option }
+            }));
+        };
+        /** Handle click on option */
+        this.handleOptionClick = (event, option) => {
+            event.stopPropagation();
+            this.selectOption(option);
+        };
+        /** Handle input changes */
+        this.handleInput = (event) => {
+            if (this.disabled)
+                return;
+            const target = event.target;
+            this.search = target.value;
+            // In single mode, clear the current value when the user types
+            if (!this.multiple && this.value) {
+                this.value = '';
+                this.elementRef.dispatchEvent(new CustomEvent('ml:change', {
+                    bubbles: true,
+                    composed: true,
+                    detail: { value: '', option: null }
+                }));
+            }
+            this.elementRef.dispatchEvent(new CustomEvent('ml:search', {
+                bubbles: true,
+                composed: true,
+                detail: { query: this.search }
+            }));
+            if (this.minChars > 0 && this.search.length < this.minChars) {
+                this.close();
+                return;
+            }
+            this.focusedIndex = this.findFirstEnabledIndex();
+            if (!this.isOpen) {
+                this.open();
+            }
+            if (this.searchFn) {
+                this.debouncedSearch(this.search);
+            }
+        };
+        /** Handle input focus */
+        this.handleFocus = () => {
+            if (this.disabled)
+                return;
+            if (this.minChars === 0) {
+                if (this.searchFn && this._asyncOptions.length === 0) {
+                    this.debouncedSearch('');
+                }
+                if (!this.isOpen) {
+                    this.open();
+                }
+            }
+        };
+        /** Handle input click */
+        this.handleInputClick = (event) => {
+            event.stopPropagation();
+            if (!this.isOpen && this.minChars === 0) {
+                if (this.searchFn && this._asyncOptions.length === 0) {
+                    this.debouncedSearch('');
+                }
+                this.open();
+            }
+        };
+        /** Handle tag remove in multi mode */
+        this.handleTagRemove = (event, value) => {
+            event.stopPropagation();
+            if (this.disabled)
+                return;
+            this.values = this.values.filter((item) => item !== value);
+            this.elementRef.dispatchEvent(new CustomEvent('ml:change', {
+                bubbles: true,
+                composed: true,
+                detail: { values: [...this.values], options: this.selectedOptions }
+            }));
+        };
+        /** Clear the current value (single mode) */
+        this.handleClear = (event) => {
+            event.stopPropagation();
+            if (this.disabled)
+                return;
+            this.value = '';
+            this.search = '';
+            this.elementRef.dispatchEvent(new CustomEvent('ml:change', {
+                bubbles: true,
+                composed: true,
+                detail: { value: '', option: null }
+            }));
+            // Focus the input after clearing
+            const input = this.elementRef.shadowRoot?.querySelector('.ml-autocomplete__input');
+            input?.focus();
+        };
+    }
+    onCreate() {
+        this.elementRef.addEventListener('keydown', this._handleKeyDown);
+    }
+    onDestroy() {
+        this.elementRef.removeEventListener('keydown', this._handleKeyDown);
+        this.removeScrollListener();
+        this.removeDocumentClickListener();
+        if (this._debounceTimer) {
+            clearTimeout(this._debounceTimer);
+        }
+    }
+    onPropertyChange(name) {
+        if (this._syncingValues)
+            return;
+        if (name === 'multiple') {
+            if (this.multiple) {
+                if (!this.values.length && this.value) {
+                    this.updateValues([this.value]);
+                }
+                return;
+            }
+            if (this.values.length) {
+                this.value = this.values[0] ?? '';
+            }
+            this.updateValues([]);
+            this.search = '';
+            return;
+        }
+        if (name === 'values') {
+            const rawValues = this.values;
+            let normalized = [];
+            if (typeof rawValues === 'string') {
+                normalized = rawValues
+                    .split(',')
+                    .map((v) => v.trim())
+                    .filter((v) => v.length > 0);
+            }
+            else if (Array.isArray(rawValues)) {
+                normalized = rawValues.filter((v) => typeof v === 'string');
+            }
+            normalized = Array.from(new Set(normalized));
+            if (!this.areValuesEqual(this.values, normalized)) {
+                this.updateValues(normalized);
+            }
+            if (!this.multiple) {
+                this.value = normalized[0] ?? '';
+                this.updateValues([]);
+            }
+            return;
+        }
+        if (name === 'value' && this.multiple) {
+            if (this.value) {
+                const nextValues = Array.from(new Set([...this.values, this.value]));
+                if (!this.areValuesEqual(this.values, nextValues)) {
+                    this.updateValues(nextValues);
+                }
+            }
+        }
+    }
+    /** Get the selected option (single mode) */
+    get selectedOption() {
+        return this.allOptions.find((opt) => opt.value === this.value);
+    }
+    /** Get selected options (multi mode) */
+    get selectedOptions() {
+        if (!this.multiple) {
+            return this.selectedOption ? [this.selectedOption] : [];
+        }
+        return this.allOptions.filter((opt) => this.values.includes(opt.value));
+    }
+    /** All available options (static or async) */
+    get allOptions() {
+        return this.searchFn ? this._asyncOptions : this.options;
+    }
+    /** Filtered options for display */
+    get filteredOptions() {
+        if (this.searchFn) {
+            return this._asyncOptions;
+        }
+        const query = this.search.trim().toLowerCase();
+        if (!query)
+            return this.options;
+        return this.options.filter((option) => {
+            const labelMatch = option.label.toLowerCase().includes(query);
+            const valueMatch = option.value.toLowerCase().includes(query);
+            const subtitleMatch = option.subtitle?.toLowerCase().includes(query) ?? false;
+            return labelMatch || valueMatch || subtitleMatch;
+        });
+    }
+    get hasValue() {
+        return this.multiple ? this.values.length > 0 : !!this.value;
+    }
+    /** Display text for the input in single mode */
+    get displayText() {
+        if (this.multiple)
+            return '';
+        return this.selectedOption?.label || '';
+    }
+    toggleOption(option) {
+        const exists = this.values.includes(option.value);
+        this.values = exists ? this.values.filter((v) => v !== option.value) : [...this.values, option.value];
+        this.elementRef.dispatchEvent(new CustomEvent('ml:change', {
+            bubbles: true,
+            composed: true,
+            detail: { values: [...this.values], options: this.selectedOptions, option }
+        }));
+        // Clear search and refocus input
+        this.search = '';
+        const input = this.elementRef.shadowRoot?.querySelector('.ml-autocomplete__input');
+        input?.focus();
+    }
+    debouncedSearch(query) {
+        if (this._debounceTimer) {
+            clearTimeout(this._debounceTimer);
+        }
+        this._debounceTimer = setTimeout(() => {
+            this.executeSearch(query);
+        }, this.debounce);
+    }
+    async executeSearch(query) {
+        if (!this.searchFn)
+            return;
+        this._loading = true;
+        try {
+            this._asyncOptions = await this.searchFn(query);
+            this.focusedIndex = this.findFirstEnabledIndex();
+        }
+        finally {
+            this._loading = false;
+        }
+    }
+    /** Close dropdown on clicks outside the component */
+    onDocumentClick(event) {
+        const path = event.composedPath();
+        if (!path.includes(this.elementRef)) {
+            this.close();
+        }
+    }
+    addDocumentClickListener() {
+        document.addEventListener('click', this._handleDocumentClick, true);
+    }
+    removeDocumentClickListener() {
+        document.removeEventListener('click', this._handleDocumentClick, true);
+    }
+    positionDropdown() {
+        const triggerEl = this.elementRef.shadowRoot?.querySelector('.ml-autocomplete__trigger');
+        const dropdownEl = this.getDropdownEl();
+        if (!triggerEl || !dropdownEl)
+            return;
+        dropdownEl.style.width = `${triggerEl.offsetWidth}px`;
+        const { x, y } = computePosition(triggerEl, dropdownEl, {
+            placement: 'bottom-start',
+            middleware: [offset(4), flip(), shift({ padding: 8 })]
+        });
+        dropdownEl.style.left = `${x}px`;
+        dropdownEl.style.top = `${y}px`;
+    }
+    addScrollListener() {
+        this._handleScroll = (event) => {
+            const dropdownEl = this.getDropdownEl();
+            if (dropdownEl?.contains(event.target))
+                return;
+            this.close();
+        };
+        window.addEventListener('scroll', this._handleScroll, true);
+    }
+    removeScrollListener() {
+        if (this._handleScroll) {
+            window.removeEventListener('scroll', this._handleScroll, true);
+            this._handleScroll = null;
+        }
+    }
+    getDropdownEl() {
+        return this.elementRef.shadowRoot?.querySelector('.ml-autocomplete__dropdown');
+    }
+    onKeyDown(event) {
+        if (this.disabled)
+            return;
+        switch (event.key) {
+            case 'Enter':
+                if (this.isOpen && this.focusedIndex >= 0) {
+                    event.preventDefault();
+                    const option = this.filteredOptions[this.focusedIndex];
+                    if (option && !option.disabled) {
+                        this.selectOption(option);
+                    }
+                }
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.close();
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!this.isOpen) {
+                    this.open();
+                }
+                else {
+                    this.focusNextOption();
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (this.isOpen) {
+                    this.focusPreviousOption();
+                }
+                break;
+            case 'Backspace':
+                if (this.multiple && this.search === '' && this.values.length > 0) {
+                    const lastValue = this.values[this.values.length - 1];
+                    this.values = this.values.slice(0, -1);
+                    this.elementRef.dispatchEvent(new CustomEvent('ml:change', {
+                        bubbles: true,
+                        composed: true,
+                        detail: { values: [...this.values], options: this.selectedOptions, removedValue: lastValue }
+                    }));
+                }
+                break;
+            case 'Tab':
+                this.close();
+                break;
+            default:
+                break;
+        }
+    }
+    focusNextOption() {
+        const options = this.filteredOptions;
+        let index = this.focusedIndex + 1;
+        while (index < options.length) {
+            if (!options[index].disabled) {
+                this.focusedIndex = index;
+                return;
+            }
+            index++;
+        }
+    }
+    focusPreviousOption() {
+        const options = this.filteredOptions;
+        let index = this.focusedIndex - 1;
+        while (index >= 0) {
+            if (!options[index].disabled) {
+                this.focusedIndex = index;
+                return;
+            }
+            index--;
+        }
+    }
+    findFirstEnabledIndex() {
+        return this.filteredOptions.findIndex((opt) => !opt.disabled);
+    }
+    updateValues(values) {
+        this._syncingValues = true;
+        this.values = values;
+        this._syncingValues = false;
+    }
+    areValuesEqual(left, right) {
+        if (left.length !== right.length)
+            return false;
+        for (let i = 0; i < left.length; i++) {
+            if (left[i] !== right[i])
+                return false;
+        }
+        return true;
+    }
+};
+AutocompleteComponent = __decorate([
+    MelodicComponent({
+        selector: 'ml-autocomplete',
+        template: autocompleteTemplate,
+        styles: autocompleteStyles,
+        attributes: ['label', 'placeholder', 'hint', 'error', 'size', 'disabled', 'required', 'value', 'multiple']
+    })
+], AutocompleteComponent);
+export { AutocompleteComponent };

package/lib/components/forms/autocomplete/autocomplete.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const autocompleteStyles: () => import("@melodicdev/core").TemplateResult;
+//# sourceMappingURL=autocomplete.styles.d.ts.map

package/lib/components/forms/autocomplete/autocomplete.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/autocomplete/autocomplete.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,iDAgW9B,CAAC"}

package/lib/components/forms/autocomplete/autocomplete.styles.js

@@ -0,0 +1,354 @@
+import { css } from '@melodicdev/core';
+export const autocompleteStyles = () => css `
+	:host {
+		display: block;
+		width: 100%;
+		min-width: 0;
+		box-sizing: border-box;
+	}
+
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+	}
+
+	.ml-autocomplete {
+		display: flex;
+		flex-direction: column;
+		gap: var(--ml-space-1-5);
+		max-width: 100%;
+	}
+
+	.ml-autocomplete__control {
+		position: relative;
+		max-width: 100%;
+	}
+
+	.ml-autocomplete__label {
+		font-size: var(--ml-text-sm);
+		font-weight: var(--ml-font-medium);
+		color: var(--ml-color-text-secondary);
+		line-height: var(--ml-leading-tight);
+	}
+
+	.ml-autocomplete__required {
+		color: var(--ml-color-danger);
+		margin-left: var(--ml-space-0-5);
+	}
+
+	.ml-autocomplete__trigger {
+		display: flex;
+		align-items: center;
+		gap: var(--ml-space-2);
+		width: 100%;
+		max-width: 100%;
+		overflow: hidden;
+		background-color: var(--ml-color-surface);
+		border: var(--ml-border) solid var(--ml-color-border);
+		border-radius: var(--ml-radius);
+		box-shadow: none;
+		color: var(--ml-color-text);
+		font-family: var(--ml-font-sans);
+		cursor: text;
+		text-align: left;
+		transition:
+			border-color var(--ml-duration-150) var(--ml-ease-in-out),
+			box-shadow var(--ml-duration-150) var(--ml-ease-in-out);
+	}
+
+	.ml-autocomplete:not(.ml-autocomplete--disabled) .ml-autocomplete__trigger:hover {
+		border-color: var(--ml-color-border-strong);
+	}
+
+	.ml-autocomplete__trigger:focus-within {
+		outline: none;
+		border-color: var(--ml-color-primary);
+		box-shadow: var(--ml-shadow-focus-ring);
+	}
+
+	.ml-autocomplete--disabled .ml-autocomplete__trigger {
+		background-color: var(--ml-color-input-disabled-bg);
+		cursor: not-allowed;
+		color: var(--ml-color-text-muted);
+	}
+
+	.ml-autocomplete__search-icon {
+		color: var(--ml-color-text-muted);
+		flex-shrink: 0;
+		height: 20px;
+		display: flex;
+		align-items: center;
+	}
+
+	.ml-autocomplete__input {
+		flex: 1 1 20px;
+		min-width: 20px;
+		height: 20px;
+		border: none;
+		outline: none;
+		background: transparent;
+		font: inherit;
+		color: var(--ml-color-text);
+		padding: 0;
+		line-height: 20px;
+	}
+
+	.ml-autocomplete__input::placeholder {
+		color: var(--ml-color-text-muted);
+	}
+
+	.ml-autocomplete__input:disabled {
+		color: var(--ml-color-text-muted);
+		cursor: not-allowed;
+	}
+
+	.ml-autocomplete__clear {
+		border: none;
+		background: transparent;
+		padding: 2px;
+		color: var(--ml-color-text-muted);
+		cursor: pointer;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		border-radius: var(--ml-radius-full);
+		transition: color var(--ml-duration-100) var(--ml-ease-in-out),
+			background-color var(--ml-duration-100) var(--ml-ease-in-out);
+	}
+
+	.ml-autocomplete__clear:hover {
+		color: var(--ml-color-text);
+		background-color: var(--ml-color-surface-raised);
+	}
+
+	/* Multi-mode styles */
+	.ml-autocomplete--multiple .ml-autocomplete__trigger {
+		flex-wrap: wrap;
+		padding-top: var(--ml-space-2);
+		padding-bottom: var(--ml-space-2);
+	}
+
+	.ml-autocomplete__tags {
+		display: contents;
+	}
+
+	.ml-autocomplete__tag {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--ml-space-1);
+		padding: 0 var(--ml-space-1-5);
+		height: 20px;
+		border-radius: var(--ml-radius-full);
+		border: var(--ml-border) solid var(--ml-color-border);
+		background-color: var(--ml-color-surface);
+		font-size: var(--ml-text-xs);
+		font-weight: var(--ml-font-medium);
+		color: var(--ml-color-text);
+		line-height: 1;
+		white-space: nowrap;
+		max-width: 100%;
+		overflow: hidden;
+		box-sizing: border-box;
+	}
+
+	.ml-autocomplete__tag-label {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		line-height: inherit;
+	}
+
+	.ml-autocomplete__tag-avatar {
+		width: 14px;
+		height: 14px;
+		border-radius: var(--ml-radius-full);
+		object-fit: cover;
+		margin-left: -2px;
+	}
+
+	.ml-autocomplete__tag-remove {
+		border: none;
+		background: transparent;
+		padding: 2px;
+		margin-left: var(--ml-space-0-5);
+		margin-right: -4px;
+		color: var(--ml-color-text-secondary);
+		cursor: pointer;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		border-radius: var(--ml-radius-full);
+		transition: color var(--ml-duration-100) var(--ml-ease-in-out),
+			background-color var(--ml-duration-100) var(--ml-ease-in-out);
+	}
+
+	.ml-autocomplete__tag-remove:hover {
+		color: var(--ml-color-text);
+		background-color: var(--ml-color-surface-raised);
+	}
+
+	/* Dropdown */
+	.ml-autocomplete__dropdown {
+		position: fixed;
+		inset: unset;
+		margin: 0;
+		z-index: 50;
+		background-color: var(--ml-color-surface);
+		border: var(--ml-border) solid var(--ml-color-border);
+		border-radius: var(--ml-radius);
+		box-shadow: var(--ml-shadow-lg);
+		max-height: 280px;
+		overflow-y: auto;
+		padding: var(--ml-space-1-5);
+		display: flex;
+		flex-direction: column;
+		gap: var(--ml-space-1);
+	}
+
+	.ml-autocomplete__dropdown:not(:popover-open) {
+		display: none;
+	}
+
+	.ml-autocomplete__empty {
+		padding: var(--ml-space-2) var(--ml-space-3);
+		font-size: var(--ml-text-sm);
+		color: var(--ml-color-text-muted);
+	}
+
+	.ml-autocomplete__loading {
+		padding: var(--ml-space-3) var(--ml-space-3);
+		font-size: var(--ml-text-sm);
+		color: var(--ml-color-text-muted);
+		display: flex;
+		align-items: center;
+		gap: var(--ml-space-2);
+		justify-content: center;
+	}
+
+	/* Options */
+	.ml-autocomplete__option {
+		display: flex;
+		align-items: center;
+		gap: var(--ml-space-2);
+		padding: var(--ml-space-2) var(--ml-space-3);
+		border-radius: var(--ml-radius-sm);
+		cursor: pointer;
+		font-size: var(--ml-text-sm);
+		font-weight: var(--ml-font-medium);
+		color: var(--ml-color-text);
+		transition: background-color var(--ml-duration-100) var(--ml-ease-in-out);
+	}
+
+	.ml-autocomplete__option:hover:not(.ml-autocomplete__option--disabled) {
+		background-color: var(--ml-color-surface-raised);
+	}
+
+	.ml-autocomplete__option--focused {
+		background-color: var(--ml-color-surface-raised);
+	}
+
+	.ml-autocomplete__option--selected {
+		background-color: var(--ml-color-primary-subtle);
+	}
+
+	.ml-autocomplete__option--selected:hover:not(.ml-autocomplete__option--disabled) {
+		background-color: var(--ml-color-primary-subtle);
+	}
+
+	.ml-autocomplete__option--disabled {
+		color: var(--ml-color-text-muted);
+		cursor: not-allowed;
+	}
+
+	.ml-autocomplete__option-icon {
+		flex-shrink: 0;
+		color: var(--ml-color-text-muted);
+	}
+
+	.ml-autocomplete__option-avatar {
+		width: 24px;
+		height: 24px;
+		border-radius: var(--ml-radius-full);
+		object-fit: cover;
+		flex-shrink: 0;
+	}
+
+	.ml-autocomplete__option--selected .ml-autocomplete__option-icon {
+		color: var(--ml-color-primary);
+	}
+
+	.ml-autocomplete__option-content {
+		flex: 1;
+		min-width: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 1px;
+	}
+
+	.ml-autocomplete__option-label {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.ml-autocomplete__option-subtitle {
+		font-size: var(--ml-text-xs);
+		font-weight: var(--ml-font-normal);
+		color: var(--ml-color-text-muted);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.ml-autocomplete__option-check {
+		flex-shrink: 0;
+		color: var(--ml-color-primary);
+		margin-left: auto;
+	}
+
+	/* Hint / Error */
+	.ml-autocomplete__hint,
+	.ml-autocomplete__error {
+		font-size: var(--ml-text-sm);
+		line-height: var(--ml-leading-tight);
+	}
+
+	.ml-autocomplete__hint {
+		color: var(--ml-color-text-muted);
+	}
+
+	.ml-autocomplete__error {
+		color: var(--ml-color-danger);
+	}
+
+	.ml-autocomplete--error .ml-autocomplete__trigger {
+		border-color: var(--ml-color-danger);
+	}
+
+	.ml-autocomplete--error .ml-autocomplete__trigger:focus-within {
+		box-shadow: var(--ml-shadow-ring-error);
+	}
+
+	/* Size variants */
+	.ml-autocomplete--sm .ml-autocomplete__trigger {
+		padding: var(--ml-space-2) var(--ml-space-3);
+		font-size: var(--ml-text-sm);
+	}
+
+	.ml-autocomplete--md .ml-autocomplete__trigger {
+		padding: var(--ml-space-2-5) var(--ml-space-3-5);
+		font-size: var(--ml-text-sm);
+	}
+
+	.ml-autocomplete--lg .ml-autocomplete__trigger {
+		padding: var(--ml-space-3) var(--ml-space-3-5);
+		font-size: var(--ml-text-base);
+	}
+
+	/* Disabled state */
+	.ml-autocomplete--disabled {
+		pointer-events: none;
+	}
+`;

package/lib/components/forms/autocomplete/autocomplete.template.d.ts

@@ -0,0 +1,3 @@
+import type { AutocompleteComponent } from './autocomplete.component.js';
+export declare function autocompleteTemplate(c: AutocompleteComponent): import("@melodicdev/core").TemplateResult;
+//# sourceMappingURL=autocomplete.template.d.ts.map

package/lib/components/forms/autocomplete/autocomplete.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.template.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/autocomplete/autocomplete.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAGzE,wBAAgB,oBAAoB,CAAC,CAAC,EAAE,qBAAqB,6CA8D5D"}

package/lib/components/forms/autocomplete/autocomplete.template.js

@@ -0,0 +1,128 @@
+import { html, classMap, when, repeat } from '@melodicdev/core';
+export function autocompleteTemplate(c) {
+    return html `
+		<div
+			class=${classMap({
+        'ml-autocomplete': true,
+        [`ml-autocomplete--${c.size}`]: true,
+        'ml-autocomplete--open': c.isOpen,
+        'ml-autocomplete--disabled': c.disabled,
+        'ml-autocomplete--error': !!c.error,
+        'ml-autocomplete--has-value': c.hasValue,
+        'ml-autocomplete--multiple': c.multiple
+    })}
+		>
+			${when(!!c.label, () => html `
+					<label class="ml-autocomplete__label">
+						${c.label}
+						${when(c.required, () => html `<span class="ml-autocomplete__required">*</span>`)}
+					</label>
+				`)}
+
+			<div class="ml-autocomplete__control">
+				<div
+					class="ml-autocomplete__trigger"
+					@click=${c.handleInputClick}
+				>
+					${when(c.multiple, () => renderMultiValue(c), () => renderSingleValue(c))}
+				</div>
+
+				<div
+					class="ml-autocomplete__dropdown"
+					role="listbox"
+					popover="manual"
+				>
+					${c._loading
+        ? html `<div class="ml-autocomplete__loading">
+							<ml-spinner size="sm"></ml-spinner>
+							<span>Searching...</span>
+						</div>`
+        : c.filteredOptions.length
+            ? repeat(c.filteredOptions, (option) => `${option.value}-${c.multiple ? c.values.includes(option.value) : c.value === option.value}`, (option, index) => renderOption(c, option, index))
+            : html `<div class="ml-autocomplete__empty">No results found</div>`}
+				</div>
+			</div>
+
+			${when(!!c.error, () => html `<span class="ml-autocomplete__error">${c.error}</span>`, () => html `${when(!!c.hint, () => html `<span class="ml-autocomplete__hint">${c.hint}</span>`)}`)}
+		</div>
+	`;
+}
+function renderSingleValue(c) {
+    const showClear = !c.multiple && c.hasValue && !c.disabled;
+    return html `
+		${when(c.showIcon, () => html `<ml-icon icon="magnifying-glass" size="sm" format="regular" class="ml-autocomplete__search-icon"></ml-icon>`)}
+		<input
+			class="ml-autocomplete__input"
+			type="text"
+			placeholder=${c.hasValue ? c.displayText : c.placeholder}
+			aria-label=${c.label || c.placeholder || 'Search'}
+			.value=${c.hasValue && !c.search ? c.displayText : c.search}
+			@input=${c.handleInput}
+			@focus=${c.handleFocus}
+			@click=${c.handleInputClick}
+			?disabled=${c.disabled}
+			autocomplete="off"
+		/>
+		${when(showClear, () => html `
+				<button type="button" class="ml-autocomplete__clear" aria-label="Clear selection" @click=${c.handleClear}>
+					<ml-icon icon="x" size="sm" format="bold"></ml-icon>
+				</button>
+			`)}
+	`;
+}
+function renderMultiValue(c) {
+    return html `
+		${when(c.showIcon, () => html `<ml-icon icon="magnifying-glass" size="sm" format="regular" class="ml-autocomplete__search-icon"></ml-icon>`)}
+		<span class="ml-autocomplete__tags">
+			${repeat(c.selectedOptions, (option) => option.value, (option) => html `
+					<span class="ml-autocomplete__tag">
+						${option.avatarUrl
+        ? html `<img class="ml-autocomplete__tag-avatar" src="${option.avatarUrl}" alt="${option.avatarAlt || option.label}" />`
+        : html ``}
+						<span class="ml-autocomplete__tag-label">${option.label}</span>
+						<button type="button" class="ml-autocomplete__tag-remove" aria-label="Remove ${option.label}" @click=${(event) => c.handleTagRemove(event, option.value)}>
+							<ml-icon icon="x" size="sm" format="bold"></ml-icon>
+						</button>
+					</span>
+				`)}
+		</span>
+		<input
+			class="ml-autocomplete__input"
+			type="text"
+			placeholder=${c.values.length ? '' : c.placeholder}
+			aria-label=${c.label || c.placeholder || 'Search'}
+			.value=${c.search}
+			@input=${c.handleInput}
+			@focus=${c.handleFocus}
+			@click=${c.handleInputClick}
+			?disabled=${c.disabled}
+			autocomplete="off"
+		/>
+	`;
+}
+function renderOption(c, option, index) {
+    const isSelected = c.multiple ? c.values.includes(option.value) : c.value === option.value;
+    const isFocused = c.focusedIndex === index;
+    return html `
+		<div
+			class=${classMap({
+        'ml-autocomplete__option': true,
+        'ml-autocomplete__option--selected': isSelected,
+        'ml-autocomplete__option--focused': isFocused,
+        'ml-autocomplete__option--disabled': !!option.disabled
+    })}
+			role="option"
+			aria-selected=${isSelected}
+			aria-disabled=${option.disabled || false}
+			@click=${(e) => c.handleOptionClick(e, option)}
+		>
+			${when(!!option.avatarUrl, () => html `<img class="ml-autocomplete__option-avatar" src="${option.avatarUrl}" alt="${option.avatarAlt || option.label}" />`)}
+			${when(!option.avatarUrl && !!option.icon, () => html `<ml-icon icon="${option.icon}" size="sm" class="ml-autocomplete__option-icon"></ml-icon>`)}
+			<span class="ml-autocomplete__option-content">
+				<span class="ml-autocomplete__option-label">${option.label}</span>
+				${when(!!option.subtitle, () => html `<span class="ml-autocomplete__option-subtitle">${option.subtitle}</span>`)}
+			</span>
+			${when(isSelected, () => html `<ml-icon icon="check" size="sm" format="regular" class="ml-autocomplete__option-check"></ml-icon>`)}
+		</div>
+	`;
+}

package/lib/components/forms/autocomplete/autocomplete.types.d.ts

@@ -0,0 +1,18 @@
+export interface AutocompleteOption {
+    /** Unique value for the option */
+    value: string;
+    /** Display label */
+    label: string;
+    /** Optional secondary text */
+    subtitle?: string;
+    /** Optional avatar image */
+    avatarUrl?: string;
+    /** Optional avatar alt text */
+    avatarAlt?: string;
+    /** Optional icon name (Phosphor icon) */
+    icon?: string;
+    /** Whether the option is disabled */
+    disabled?: boolean;
+}
+export type AutocompleteSearchFn = (query: string) => Promise<AutocompleteOption[]>;
+//# sourceMappingURL=autocomplete.types.d.ts.map

package/lib/components/forms/autocomplete/autocomplete.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.types.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/autocomplete/autocomplete.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,kBAAkB;IAClC,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IAEd,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IAEd,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,MAAM,oBAAoB,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAAC"}

package/lib/components/forms/autocomplete/autocomplete.types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/forms/autocomplete/index.d.ts

@@ -0,0 +1,5 @@
+export { AutocompleteComponent } from './autocomplete.component.js';
+export { autocompleteTemplate } from './autocomplete.template.js';
+export { autocompleteStyles } from './autocomplete.styles.js';
+export type { AutocompleteOption, AutocompleteSearchFn } from './autocomplete.types.js';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/forms/autocomplete/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/autocomplete/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,YAAY,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC"}

package/lib/components/forms/autocomplete/index.js

@@ -0,0 +1,3 @@
+export { AutocompleteComponent } from './autocomplete.component.js';
+export { autocompleteTemplate } from './autocomplete.template.js';
+export { autocompleteStyles } from './autocomplete.styles.js';

package/lib/index.d.ts

@@ -8,6 +8,7 @@ export * from './components/forms/checkbox/index.js';
 export * from './components/forms/radio/index.js';
 export * from './components/forms/toggle/index.js';
 export * from './components/forms/select/index.js';
+export * from './components/forms/autocomplete/index.js';
 export * from './components/forms/slider/index.js';
 export * from './components/forms/form-field/index.js';
 export * from './components/feedback/spinner/index.js';

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,kBAAkB,CAAC;AAGjC,cAAc,kBAAkB,CAAC;AAEjC,cAAc,sBAAsB,CAAC;AAGrC,cAAc,oCAAoC,CAAC;AACnD,cAAc,mCAAmC,CAAC;AAClD,cAAc,sCAAsC,CAAC;AACrD,cAAc,sCAAsC,CAAC;AACrD,cAAc,mCAAmC,CAAC;AAClD,cAAc,oCAAoC,CAAC;AACnD,cAAc,oCAAoC,CAAC;AACnD,cAAc,oCAAoC,CAAC;AACnD,cAAc,wCAAwC,CAAC;AAGvD,cAAc,wCAAwC,CAAC;AACvD,cAAc,sCAAsC,CAAC;AACrD,cAAc,sCAAsC,CAAC;AACrD,cAAc,yCAAyC,CAAC;AAGxD,cAAc,uCAAuC,CAAC;AACtD,cAAc,0CAA0C,CAAC;AACzD,cAAc,wCAAwC,CAAC;AACvD,cAAc,4CAA4C,CAAC;AAG3D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,0CAA0C,CAAC;AAGzD,cAAc,oCAAoC,CAAC;AAGnD,cAAc,uCAAuC,CAAC;AACtD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,6CAA6C,CAAC;AAG5D,cAAc,uCAAuC,CAAC;AACtD,cAAc,uCAAuC,CAAC;AACtD,cAAc,yCAAyC,CAAC;AACxD,cAAc,wCAAwC,CAAC;AACvD,cAAc,wCAAwC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,kBAAkB,CAAC;AAGjC,cAAc,kBAAkB,CAAC;AAEjC,cAAc,sBAAsB,CAAC;AAGrC,cAAc,oCAAoC,CAAC;AACnD,cAAc,mCAAmC,CAAC;AAClD,cAAc,sCAAsC,CAAC;AACrD,cAAc,sCAAsC,CAAC;AACrD,cAAc,mCAAmC,CAAC;AAClD,cAAc,oCAAoC,CAAC;AACnD,cAAc,oCAAoC,CAAC;AACnD,cAAc,0CAA0C,CAAC;AACzD,cAAc,oCAAoC,CAAC;AACnD,cAAc,wCAAwC,CAAC;AAGvD,cAAc,wCAAwC,CAAC;AACvD,cAAc,sCAAsC,CAAC;AACrD,cAAc,sCAAsC,CAAC;AACrD,cAAc,yCAAyC,CAAC;AAGxD,cAAc,uCAAuC,CAAC;AACtD,cAAc,0CAA0C,CAAC;AACzD,cAAc,wCAAwC,CAAC;AACvD,cAAc,4CAA4C,CAAC;AAG3D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,0CAA0C,CAAC;AAGzD,cAAc,oCAAoC,CAAC;AAGnD,cAAc,uCAAuC,CAAC;AACtD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,6CAA6C,CAAC;AAG5D,cAAc,uCAAuC,CAAC;AACtD,cAAc,uCAAuC,CAAC;AACtD,cAAc,yCAAyC,CAAC;AACxD,cAAc,wCAAwC,CAAC;AACvD,cAAc,wCAAwC,CAAC"}

package/lib/index.js

@@ -11,6 +11,7 @@ export * from './components/forms/checkbox/index.js';
 export * from './components/forms/radio/index.js';
 export * from './components/forms/toggle/index.js';
 export * from './components/forms/select/index.js';
+export * from './components/forms/autocomplete/index.js';
 export * from './components/forms/slider/index.js';
 export * from './components/forms/form-field/index.js';
 // Components - Feedback

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@melodicdev/components",
-	"version": "1.1.1",
+	"version": "1.2.0",
 	"description": "Themeable UI component library built on the Melodic Framework",
 	"license": "MIT",
 	"author": "Melodic Development",
@@ -193,6 +193,10 @@
 			"types": "./lib/components/forms/select/index.d.ts",
 			"default": "./lib/components/forms/select/index.js"
 		},
+		"./autocomplete": {
+			"types": "./lib/components/forms/autocomplete/index.d.ts",
+			"default": "./lib/components/forms/autocomplete/index.js"
+		},
 		"./sidebar": {
 			"types": "./lib/components/navigation/sidebar/index.d.ts",
 			"default": "./lib/components/navigation/sidebar/index.js"