@mhmo91/schmancy 0.10.41 → 0.10.43

package/src/form/fields/autocomplete/autocomplete.ts

@@ -8,18 +8,8 @@ import { ifDefined } from 'lit/directives/if-defined.js'
 import { createRef, ref } from 'lit/directives/ref.js'
 import { repeat } from 'lit/directives/repeat.js'
 import { when } from 'lit/directives/when.js'
-import {
-    BehaviorSubject,
-    combineLatest,
-    fromEvent,
-    timer
-} from 'rxjs'
-import {
-    debounceTime,
-    distinctUntilChanged,
-    takeUntil,
-    tap
-} from 'rxjs/operators'
+import { BehaviorSubject, combineLatest, fromEvent, timer } from 'rxjs'
+import { debounceTime, distinctUntilChanged, takeUntil, tap } from 'rxjs/operators'
 import style from './autocomplete.scss?inline'
 
 // Import the similarity function (or include it inline)
@@ -28,13 +18,13 @@ import { similarity } from '../../../utils/search'
 import '../../../chips/input-chip'
 
 export type SchmancyAutocompleteChangeEvent = CustomEvent<{
-    value: string | string[]
-    values?: string[]
+	value: string | string[]
+	values?: string[]
 }>
 
 interface FilteredOption {
-    option: SchmancyOption
-    score: number
+	option: SchmancyOption
+	score: number
 }
 
 /**
@@ -50,715 +40,713 @@ interface FilteredOption {
  */
 @customElement('schmancy-autocomplete')
 export default class SchmancyAutocomplete extends SchmancyFormField(unsafeCSS(style)) {
-
-    // `formAssociated`, `internals`, `attachInternals`, `name`, `label`,
-    // `required`, `disabled`, `error`, `validationMessage`, `hint`, `id`,
-    // `validateOn`, `touched/dirty/submitted`, `markTouched/markSubmitted`,
-    // `setCustomValidity`, `formDisabledCallback`, FIELD_CONNECT_EVENT dispatch
-    // — all from the mixin.
-
-    /** Override mixin's resetForm with autocomplete-specific subject reset. */
-    override resetForm(): void {
-        if (this.multi) {
-            this.selectedValues$.next([])
-        } else {
-            this.selectedValue$.next('')
-        }
-        this.inputValue = ''
-        this.inputValue$.next('')
-        super.resetForm()
-    }
-
-    // Track whether value/values have been explicitly set
-     valueSet: boolean = false
-     valuesSet: boolean = false
-
-    // Autocomplete-specific properties only — `name`, `label`, `required`,
-    // `error`, `validationMessage` come from the mixin.
-    @property({ type: String }) placeholder = ''
-    @property({ type: String }) maxHeight = '300px'
-    @property({ type: Boolean }) multi = false
-    @property({ type: String }) description = ''
-    @property({ type: String, reflect: true }) size: InputSize = 'md'
-    @property({ type: String }) autocomplete = 'off'
-    @property({ type: Number }) debounceMs = 200
-    @property({ type: Number }) similarityThreshold = 0.3 // Minimum similarity score to show option
-
-    private readonly a11yId = `schmancy-autocomplete-${Math.random().toString(36).slice(2, 10)}`
-
-    // Values property for multi-select mode
-    @property({ type: Array })
-    get values() {
-        return [...this.selectedValues$.value]
-    }
-    set values(vals: string[]) {
-        this.valuesSet = true
-        this.selectedValues$.next(Array.isArray(vals) ? [...vals] : [])
-    }
-
-    // Value property — narrowed override of the mixin's wide value union.
-    @property({ type: String, reflect: true })
-    override get value(): string {
-        return this.multi
-            ? this.selectedValues$.value.join(',')
-            : this.selectedValue$.value
-    }
-    override set value(val: string) {
-        this.valueSet = true
-        if (this.multi) {
-            const newValues = val ? val.split(',').map(v => v.trim()).filter(Boolean) : []
-            const currentValues = this.selectedValues$.value
-            // Only update if values actually changed
-            if (JSON.stringify(newValues) !== JSON.stringify(currentValues)) {
-                this.selectedValues$.next(newValues)
-            }
-        } else {
-            // Only update if value actually changed
-            if (val !== this.selectedValue$.value) {
-                this.selectedValue$.next(val)
-                // Update the input display when value is set
-                this.updateInputDisplay()
-            }
-        }
-    }
-
-    // State
-    @state() private open = false
-    @state() private inputValue = ''
-    @state() private visibleOptionsCount = 0
-    @state() private hasResults = true
-
-    // DOM references
-    @query('#options') listbox!: HTMLUListElement
-    @query('sch-input') input!: SchmancyInput
-    @queryAssignedElements({ flatten: true }) private options!: SchmancyOption[]
-    private inputElementRef = createRef<HTMLInputElement>()
-
-    // RxJS Subjects - only what we actually need
-    private selectedValue$ = new BehaviorSubject<string>('')
-    private selectedValues$ = new BehaviorSubject<string[]>([])
-    private inputValue$ = new BehaviorSubject<string>('')
-
-    override connectedCallback() {
-        // FIELD_CONNECT_EVENT is dispatched by the mixin's connectedCallback.
-        super.connectedCallback()
-        this.setupAutocompleteLogic()
-        this.setupDocumentClickHandler()
-    }
-
-    private setupAutocompleteLogic() {
-        // Sync selection state
-        combineLatest([
-            this.selectedValue$,
-            this.selectedValues$
-        ]).pipe(
-            tap(([selectedValue, selectedValues]) => {
-                this.updateOptionSelection(selectedValue, selectedValues)
-                // Keep ElementInternals form value in sync with selection (single and multi).
-                const formValue = this.multi ? selectedValues.join(',') : selectedValue
-                this.internals?.setFormValue(formValue || null)
-                if (this.required) {
-                    const missing = this.multi ? selectedValues.length === 0 : !selectedValue
-                    this.internals?.setValidity(
-                        missing ? { valueMissing: true } : {},
-                        missing ? this.validationMessage || 'Please select an option.' : undefined,
-                    )
-                }
-            }),
-            takeUntil(this.disconnecting)
-        ).subscribe()
-
-        // Filter options based on input
-        this.inputValue$.pipe(
-            distinctUntilChanged(),
-            debounceTime(this.debounceMs),
-            tap(searchTerm => {
-                if (this.open) {
-                    this.filterOptions(searchTerm)
-                }
-            }),
-            takeUntil(this.disconnecting)
-        ).subscribe()
-    }
-
-    private setupOptionHandlers() {
-        this.options.forEach((option, index) => {
-            option.setAttribute('role', 'option')
-            option.tabIndex = -1
-            if (!option.id) {
-                option.id = `${this.id}-option-${index}`
-            }
-            // Idempotent: slotchange may fire repeatedly for the same option nodes,
-            // and addEventListener doesn't replace prior handlers like onfoo= did.
-            if (option.dataset.schmancyAutocompleteHandlers === 'attached') return
-            option.dataset.schmancyAutocompleteHandlers = 'attached'
-
-            // Prevent blur handler from interfering with option selection
-            fromEvent<MouseEvent>(option, 'mousedown')
-                .pipe(takeUntil(this.disconnecting))
-                .subscribe(e => e.preventDefault())
-
-            // Handle the actual selection
-            fromEvent<MouseEvent>(option, 'click')
-                .pipe(takeUntil(this.disconnecting))
-                .subscribe(e => {
-                    e.stopPropagation()
-                    this.selectOption(option)
-                })
-        })
-    }
-
-    private updateOptionSelection(selectedValue: string, selectedValues: string[]) {
-        this.options.forEach(option => {
-            option.selected = this.multi
-                ? selectedValues.includes(option.value)
-                : option.value === selectedValue
-            option.setAttribute('aria-selected', String(option.selected))
-        })
-    }
-
-    private filterOptions(searchTerm: string) {
-        const term = searchTerm.trim()
-
-        if (!term) {
-            // Show all options if no search term
-            this.options.forEach(option => {
-                option.hidden = false
-                option.style.order = '0'
-            })
-            this.visibleOptionsCount = this.options.length
-            this.hasResults = true
-        } else {
-            // Calculate similarity scores for all options
-            const scoredOptions: FilteredOption[] = this.options.map(option => {
-                const optionLabel = option.label || option.textContent || ''
-                const optionValue = option.value
-
-                const labelScore = similarity(term, optionLabel)
-                const valueScore = similarity(term, optionValue)
-                const score = Math.max(labelScore * 1.1, valueScore)
-
-                return { option, score }
-            })
-
-            // Sort by score (highest first)
-            scoredOptions.sort((a, b) => b.score - a.score)
-
-            // Apply visibility and ordering
-            let visibleCount = 0
-            scoredOptions.forEach((item, index) => {
-                const { option, score } = item
-
-                if (score < this.similarityThreshold) {
-                    option.hidden = true
-                } else {
-                    option.hidden = false
-                    visibleCount++
-                    option.style.order = String(index)
-                }
-            })
-
-            this.visibleOptionsCount = visibleCount
-            this.hasResults = visibleCount > 0
-        }
-
-        this.announceToScreenReader(
-            this.visibleOptionsCount > 0
-                ? `${this.visibleOptionsCount} option${this.visibleOptionsCount === 1 ? '' : 's'} available.`
-                : 'No results found.'
-        )
-    }
-
-    private openDropdown() {
-        this.open = true
-        // Reset filters based on current input value when dropdown opens
-        this.filterOptions(this.inputValue)
-    }
-
-    private selectOption(option: SchmancyOption) {
-        if (this.multi) {
-            const currentValues = this.selectedValues$.value
-            const index = currentValues.indexOf(option.value)
-            const newValues = index > -1
-                ? currentValues.filter(v => v !== option.value)
-                : [...currentValues, option.value]
-
-            this.selectedValues$.next(newValues)
-            this.announceToScreenReader(
-                newValues.length > 0
-                    ? `Selected: ${this.getSelectedLabels().join(', ')}`
-                    : 'No options selected'
-            )
-            this.fireChangeEvent()
-        } else {
-            // Update value first
-            this.selectedValue$.next(option.value)
-
-            // Close dropdown IMMEDIATELY to prevent blur handler from firing
-            this.open = false
-
-            // Now fire event with the NEW value
-            this.fireChangeEvent()
-
-            // Update UI
-            this.inputValue = option.label || option.textContent || ''
-            this.inputValue$.next(this.inputValue)
-
-            this.announceToScreenReader(`Selected: ${option.label || option.textContent}`)
-        }
-    }
-
-    private setupDocumentClickHandler() {
-        fromEvent<MouseEvent>(document, 'click')
-            .pipe(takeUntil(this.disconnecting))
-            .subscribe(e => {
-                if (!this.open) return
-                const path = e.composedPath()
-                if (!path.includes(this) && !this.options.some(opt => path.includes(opt))) {
-                    this.open = false
-                    this.updateInputDisplay()
-                }
-            })
-    }
-
-
-    private updateInputDisplay() {
-        // For multi-select, we don't update input display since chips show the selections
-        if (this.multi) return
-
-        const selectedValue = this.selectedValue$.value
-        const option = this.options.find(opt => opt.value === selectedValue)
-        this.inputValue = option ? option.label || option.textContent || '' : ''
-        this.inputValue$.next(this.inputValue)
-
-        if (this.inputElementRef.value) {
-            this.inputElementRef.value.value = this.inputValue
-        }
-    }
-
-    private getSelectedLabels(): string[] {
-        return this.options
-            .filter(option => 
-                this.multi 
-                    ? this.selectedValues$.value.includes(option.value)
-                    : option.value === this.selectedValue$.value
-            )
-            .map(option => option.label || option.textContent || '')
-    }
-
-    private announceToScreenReader(message: string) {
-        const liveRegion = this.shadowRoot?.querySelector('#live-status')
-        if (liveRegion) {
-            liveRegion.textContent = message
-        }
-    }
-
-    private fireChangeEvent() {
-        const detail: SchmancyAutocompleteChangeEvent['detail'] = {
-            value: this.value,
-        }
-
-        if (this.multi) {
-            detail.values = [...this.selectedValues$.value]
-        }
-
-        this.dispatchEvent(
-            new CustomEvent<SchmancyAutocompleteChangeEvent['detail']>('change', {
-                detail,
-                bubbles: true,
-                composed: true,
-            })
-        )
-    }
-
-    public checkValidity(): boolean {
-        if (!this.required) return true
-        return this.multi 
-            ? this.selectedValues$.value.length > 0 
-            : Boolean(this.selectedValue$.value)
-    }
-
-    public reportValidity(): boolean {
-        if (this.inputElementRef.value) {
-            return this.inputElementRef.value.reportValidity()
-        }
-        return this.checkValidity()
-    }
-
-    firstUpdated() {
-        this.setupOptionHandlers()
-
-        // Sync initial value with display after options are available
-        this.updateInputDisplay()
-
-        // Update options when slot changes
-        const slot = this.shadowRoot?.querySelector('slot')
-        slot?.addEventListener('slotchange', () => {
-            this.setupOptionHandlers()
-            this.updateOptionSelection(this.selectedValue$.value, this.selectedValues$.value)
-        })
-    }
-
-    private handleChipRemove(value: string) {
-        const currentValues = this.selectedValues$.value
-        const newValues = currentValues.filter(v => v !== value)
-        this.selectedValues$.next(newValues)
-        this.fireChangeEvent()
-        this.announceToScreenReader(`Removed: ${this.getChipLabel(value)}`)
-    }
-
-    private getChipLabel(value: string): string {
-        const option = this.options.find(opt => opt.value === value)
-        return option ? option.label || option.textContent || value : value
-    }
-
-    private focusTextInput() {
-        if (this.inputElementRef.value) {
-            this.inputElementRef.value.focus()
-        }
-    }
-
-    render() {
-        const descriptionId = `${this.id}-desc`
-
-        // Get size-based styling to match Schmancy input
-        const getSizeStyles = () => {
-            switch (this.size) {
-                case 'sm':
-                    return {
-                        height: 'min-h-[40px]',
-                        padding: 'px-2',
-                        fontSize: 'text-sm', // 14px
-                        labelSize: 'text-sm'
-                    }
-                case 'lg':
-                    return {
-                        height: 'min-h-[60px]',
-                        padding: 'px-5',
-                        fontSize: 'text-lg', // 18px
-                        labelSize: 'text-lg'
-                    }
-                case 'md':
-                default:
-                    return {
-                        height: 'min-h-[50px]',
-                        padding: 'px-4',
-                        fontSize: 'text-base', // 16px
-                        labelSize: 'text-base'
-                    }
-            }
-        }
-
-        const { height, padding, fontSize, labelSize } = getSizeStyles()
-
-        return html`
-            <div class="relative">
-                <!-- Screen reader live region -->
-                <div id="live-status" role="status" aria-live="polite" class="sr-only"></div>
-
-                <!-- Description -->
-                ${this.description ? html`<div id="${descriptionId}" class="sr-only">${this.description}</div>` : ''}
-
-                <!-- Custom input wrapper for Gmail-style chip input -->
-                <slot name="trigger">
-                    ${when(this.multi,
-                        () => html`
-                            <!-- Custom multi-select input with inline chips -->
-                            <div class="relative">
-                                ${when(this.label, () => html`
-                                    <label class="${classMap({
-                                        'block mb-1 font-medium': true,
-                                        'text-primary-default': !this.error,
-                                        'text-error-default': this.error,
-                                        [labelSize]: true
-                                    })}">
-                                        ${this.label}${this.required ? html`<span class="text-error-default ml-1">*</span>` : ''}
-                                    </label>
-                                `)}
-                                <div
-                                    class="${classMap({
-                                        'flex flex-wrap items-center gap-1': true,
-                                        [height]: true,
-                                        [padding]: true,
-                                        'block w-full min-w-0 rounded-[8px] border-0': true,
-                                        'bg-surface-highest text-surface-on': true,
-                                        'ring-0 ring-inset focus-within:ring-1 focus-within:ring-inset': true,
-                                        'ring-secondary-default  focus-within:ring-secondary-default': !this.error,
-                                        'ring-error-default focus-within:ring-error-default': this.error,
-                                        'cursor-text transition-colors duration-200': true
-                                    })}"
-                                    @click=${() => this.focusTextInput()}
-                                    role="combobox"
-                                    aria-autocomplete="list"
-                                    aria-haspopup="listbox"
-                                    aria-controls="options"
-                                    aria-expanded=${this.open}
-                                >
-                                    <!-- Render chips inline -->
-                                    ${repeat(
-                                        this.selectedValues$.value,
-                                        value => value,
-                                        value => html`
-                                            <schmancy-input-chip
-                                                .value=${value}
-                                                @remove=${(e: CustomEvent) => this.handleChipRemove(e.detail.value)}
-                                                class="shrink-0 my-0.5"
-                                            >
-                                                ${this.getChipLabel(value)}
-                                            </schmancy-input-chip>
-                                        `
-                                    )}
-
-                                    <!-- Text input for typing -->
-                                    <input
-                                        ${ref(this.inputElementRef)}
-                                        id="autocomplete-input"
-                                        type="text"
-                                        class="flex-1 min-w-[120px] py-1 bg-transparent border-none outline-none ${fontSize} font-medium text-surface-on placeholder:text-muted"
-                                        name=${this.name || this.label?.toLowerCase().replace(/\s+/g, '-') || ''}
-                                        .placeholder=${this.selectedValues$.value.length > 0 ? 'Add more...' : this.placeholder}
-                                        .value=${this.inputValue}
-                                        .autocomplete=${this.autocomplete}
-                                        aria-invalid=${this.error ? 'true' : 'false'}
-                                        aria-required=${this.required ? 'true' : 'false'}
-                                        aria-describedby=${this.error && this.validationMessage ? `${this.a11yId}-err` : nothing}
-                                        aria-label=${!this.label && this.placeholder ? this.placeholder : nothing}
-                                        @input=${(e: Event) => {
-                                            const value = (e.target as HTMLInputElement).value
-                                            this.inputValue = value
-                                            this.inputValue$.next(value)
-                                        }}
-                                        @focus=${(e: FocusEvent) => {
-                                            e.stopPropagation()
-                                            // Clear input on focus for new searches
-                                            this.inputValue = ''
-                                            this.inputValue$.next('')
-                                            this.openDropdown()
-                                        }}
-                                        @keydown=${(e: KeyboardEvent) => {
-                                            this.handleKeyDown(e)
-                                        }}
-                                        @blur=${() => {
-                                            this.handleAutoSelectOnBlur()
-                                        }}
-                                    />
-                                </div>
-
-                                <!-- Validation message -->
-                                ${when(this.error && this.validationMessage, () => html`
-                                    <div id="${this.a11yId}-err" class="mt-1 text-sm text-error-default" role="alert">
-                                        ${this.validationMessage}
-                                    </div>
-                                `)}
-                            </div>
-                        `,
-                        () => html`
-                            <!-- Regular single-select input -->
-                            <schmancy-input
-                                .size=${this.size}
-                                ${ref(this.inputElementRef)}
-                                id="autocomplete-input"
-                                class="w-full"
-                                .name=${this.name || this.label?.toLowerCase().replace(/\s+/g, '-') || ''}
-                                .label=${this.label}
-                                .placeholder=${this.placeholder}
-                                .required=${this.required}
-                                .value=${this.inputValue}
-                                type="text"
-                                autocomplete=${this.autocomplete}
-                                clickable
-                                role="combobox"
-                                aria-autocomplete="list"
-                                aria-haspopup="listbox"
-                                aria-controls="options"
-                                aria-expanded=${this.open}
-                                aria-describedby=${ifDefined(this.description ? descriptionId : undefined)}
-                                @input=${(e: Event) => {
-                                    const value = (e.target as HTMLInputElement).value
-                                    this.inputValue = value
-                                    this.inputValue$.next(value)
-                                }}
-                                @focus=${(e: FocusEvent) => {
-                                    e.stopPropagation()
-                                    this.openDropdown()
-                                }}
-                                @click=${(e: MouseEvent) => {
-                                    e.stopPropagation()
-                                    this.openDropdown()
-                                }}
-                                @keydown=${(e: KeyboardEvent) => {
-                                    this.handleKeyDown(e)
-                                }}
-                                @blur=${() => {
-                                    this.handleAutoSelectOnBlur()
-                                }}
-                            >
-                            </schmancy-input>
-                        `
-                    )}
-                </slot>
-
-                <!-- Options dropdown -->
-                <ul
-                    id="options"
-                    class=${classMap({
-                        'absolute': true,
-                        'z-[1000]': true,
-                        'mt-1': true,
-                        'w-full': true,
-                        'rounded-md': true,
-                        'shadow-md': true,
-                        'overflow-auto': true,
-                        'min-w-full': true,
-                        'bg-surface-low': true,
-                        'flex': true,
-                        'flex-col': true, // Enable flexbox for ordering
-                    })}
-                    role="listbox"
-                    aria-multiselectable=${this.multi ? 'true' : 'false'}
-                    aria-label=${`${this.label || 'Options'} dropdown`}
-                    ?hidden=${!this.open}
-                    style="max-height: ${this.maxHeight}; display: ${this.open ? 'flex' : 'none'};"
-                    @slotchange=${() => {
-                        this.setupOptionHandlers()
-                    }}
-                >
-                    <slot></slot>
-                    ${!this.hasResults ? html`
-                        <li class="px-3 py-2 text-sm text-muted">No results found</li>
-                    ` : ''}
-                </ul>
-            </div>
-        `
-    }
-
-    private handleAutoSelectOnBlur() {
-        // Only auto-select in single-select mode and when dropdown is open with a search term
-        if (this.multi || !this.open || !this.inputValue.trim()) {
-            return
-        }
-        
-        const searchTerm = this.inputValue.trim()
-        
-        // Find the best matching option using the same similarity logic as filtering
-        let bestMatch: SchmancyOption | null = null
-        let bestScore = 0
-        
-        this.options.forEach(option => {
-            // Skip hidden options
-            if (option.hidden) return
-            
-            // Get text to search in (prioritize label, then textContent, then value)
-            const optionLabel = option.label || option.textContent || ''
-            const optionValue = option.value
-            
-            // Calculate similarity scores for both label and value
-            const labelScore = similarity(searchTerm, optionLabel)
-            const valueScore = similarity(searchTerm, optionValue)
-            
-            // Use the higher score (prioritizing label matches)
-            const score = Math.max(labelScore * 1.1, valueScore) // Slight boost for label matches
-            
-            // Keep track of best match that meets threshold
-            if (score > bestScore && score >= this.similarityThreshold) {
-                bestScore = score
-                bestMatch = option
-            }
-        })
-        
-        // Auto-select the best match if found
-        if (bestMatch) {
-            // Silently update the selected value without firing change event
-            this.selectedValue$.next(bestMatch.value)
-            this.inputValue = bestMatch.label || bestMatch.textContent || ''
-            this.inputValue$.next(this.inputValue)
-            this.open = false
-        }
-    }
-
-    private handleKeyDown(event: KeyboardEvent) {
-        const isOpen = this.open
-        const selectedValues = this.selectedValues$.value
-
-        // Handle backspace to remove last chip in multi-select when input is empty
-        if (this.multi && event.key === 'Backspace' && !this.inputValue && selectedValues.length > 0 && !isOpen) {
-            event.preventDefault()
-            const lastValue = selectedValues[selectedValues.length - 1]
-            this.handleChipRemove(lastValue)
-            return
-        }
-
-        if (!isOpen && (event.key === 'ArrowDown' || event.key === 'Enter')) {
-            event.preventDefault()
-            this.openDropdown()
-
-            timer(10)
-                .pipe(takeUntil(this.disconnecting))
-                .subscribe(() => {
-                    const firstVisible = this.options.find(opt => !opt.hidden)
-                    firstVisible?.focus()
-                })
-            return
-        }
-
-        if (!isOpen) return
-
-        const visibleOptions = this.options.filter(opt => !opt.hidden)
-            .toSorted((a, b) => parseInt(a.style.order || '0') - parseInt(b.style.order || '0'))
-
-        const focusedOption = visibleOptions.find(opt => opt === document.activeElement)
-        const currentIndex = focusedOption ? visibleOptions.indexOf(focusedOption) : -1
-
-        switch (event.key) {
-            case 'Escape':
-                event.preventDefault()
-                this.open = false
-                this.updateInputDisplay()
-                this.inputElementRef.value?.focus()
-                break
-
-            case 'Tab':
-                this.open = false
-                this.updateInputDisplay()
-                break
-
-            case 'ArrowDown':
-                event.preventDefault()
-                const nextIndex = currentIndex < visibleOptions.length - 1 ? currentIndex + 1 : 0
-                visibleOptions[nextIndex]?.focus()
-                break
-
-            case 'ArrowUp':
-                event.preventDefault()
-                const prevIndex = currentIndex > 0 ? currentIndex - 1 : visibleOptions.length - 1
-                visibleOptions[prevIndex]?.focus()
-                break
-
-            case 'Home':
-                event.preventDefault()
-                visibleOptions[0]?.focus()
-                break
-
-            case 'End':
-                event.preventDefault()
-                visibleOptions[visibleOptions.length - 1]?.focus()
-                break
-
-            case 'Enter':
-            case ' ':
-                if (focusedOption) {
-                    event.preventDefault()
-                    this.selectOption(focusedOption)
-                }
-                break
-        }
-    }
+	// `formAssociated`, `internals`, `attachInternals`, `name`, `label`,
+	// `required`, `disabled`, `error`, `validationMessage`, `hint`, `id`,
+	// `validateOn`, `touched/dirty/submitted`, `markTouched/markSubmitted`,
+	// `setCustomValidity`, `formDisabledCallback`, FIELD_CONNECT_EVENT dispatch
+	// — all from the mixin.
+
+	/** Override mixin's resetForm with autocomplete-specific subject reset. */
+	override resetForm(): void {
+		if (this.multi) {
+			this.selectedValues$.next([])
+		} else {
+			this.selectedValue$.next('')
+		}
+		this.inputValue = ''
+		this.inputValue$.next('')
+		super.resetForm()
+	}
+
+	// Track whether value/values have been explicitly set
+	valueSet: boolean = false
+	valuesSet: boolean = false
+
+	// Autocomplete-specific properties only — `name`, `label`, `required`,
+	// `error`, `validationMessage` come from the mixin.
+	@property({ type: String }) placeholder = ''
+	@property({ type: String }) maxHeight = '300px'
+	@property({ type: Boolean }) multi = false
+	@property({ type: String }) description = ''
+	@property({ type: String, reflect: true }) size: InputSize = 'md'
+	@property({ type: String }) autocomplete = 'off'
+	@property({ type: Number }) debounceMs = 200
+	@property({ type: Number }) similarityThreshold = 0.3 // Minimum similarity score to show option
+
+	private readonly a11yId = `schmancy-autocomplete-${Math.random().toString(36).slice(2, 10)}`
+
+	// Values property for multi-select mode
+	@property({ type: Array })
+	get values() {
+		return [...this.selectedValues$.value]
+	}
+	set values(vals: string[]) {
+		this.valuesSet = true
+		this.selectedValues$.next(Array.isArray(vals) ? [...vals] : [])
+	}
+
+	// Value property — narrowed override of the mixin's wide value union.
+	@property({ type: String, reflect: true })
+	override get value(): string {
+		return this.multi ? this.selectedValues$.value.join(',') : this.selectedValue$.value
+	}
+	override set value(val: string) {
+		this.valueSet = true
+		if (this.multi) {
+			const newValues = val
+				? val
+						.split(',')
+						.map(v => v.trim())
+						.filter(Boolean)
+				: []
+			const currentValues = this.selectedValues$.value
+			// Only update if values actually changed
+			if (JSON.stringify(newValues) !== JSON.stringify(currentValues)) {
+				this.selectedValues$.next(newValues)
+			}
+		} else {
+			// Only update if value actually changed
+			if (val !== this.selectedValue$.value) {
+				this.selectedValue$.next(val)
+				// Update the input display when value is set
+				this.updateInputDisplay()
+			}
+		}
+	}
+
+	// State
+	@state() private open = false
+	@state() private inputValue = ''
+	@state() private visibleOptionsCount = 0
+	@state() private hasResults = true
+
+	// DOM references
+	@query('#options') listbox!: HTMLUListElement
+	@query('sch-input') input!: SchmancyInput
+	@queryAssignedElements({ flatten: true }) private options!: SchmancyOption[]
+	private inputElementRef = createRef<HTMLInputElement>()
+
+	// RxJS Subjects - only what we actually need
+	private selectedValue$ = new BehaviorSubject<string>('')
+	private selectedValues$ = new BehaviorSubject<string[]>([])
+	private inputValue$ = new BehaviorSubject<string>('')
+
+	override connectedCallback() {
+		// FIELD_CONNECT_EVENT is dispatched by the mixin's connectedCallback.
+		super.connectedCallback()
+		this.setupAutocompleteLogic()
+		this.setupDocumentClickHandler()
+	}
+
+	private setupAutocompleteLogic() {
+		// Sync selection state
+		combineLatest([this.selectedValue$, this.selectedValues$])
+			.pipe(
+				tap(([selectedValue, selectedValues]) => {
+					this.updateOptionSelection(selectedValue, selectedValues)
+					// Keep ElementInternals form value in sync with selection (single and multi).
+					const formValue = this.multi ? selectedValues.join(',') : selectedValue
+					this.internals?.setFormValue(formValue || null)
+					if (this.required) {
+						const missing = this.multi ? selectedValues.length === 0 : !selectedValue
+						this.internals?.setValidity(
+							missing ? { valueMissing: true } : {},
+							missing ? this.validationMessage || 'Please select an option.' : undefined,
+						)
+					}
+				}),
+				takeUntil(this.disconnecting),
+			)
+			.subscribe()
+
+		// Filter options based on input
+		this.inputValue$
+			.pipe(
+				distinctUntilChanged(),
+				debounceTime(this.debounceMs),
+				tap(searchTerm => {
+					if (this.open) {
+						this.filterOptions(searchTerm)
+					}
+				}),
+				takeUntil(this.disconnecting),
+			)
+			.subscribe()
+	}
+
+	private setupOptionHandlers() {
+		this.options.forEach((option, index) => {
+			option.setAttribute('role', 'option')
+			option.tabIndex = -1
+			if (!option.id) {
+				option.id = `${this.id}-option-${index}`
+			}
+			// Idempotent: slotchange may fire repeatedly for the same option nodes,
+			// and addEventListener doesn't replace prior handlers like onfoo= did.
+			if (option.dataset.schmancyAutocompleteHandlers === 'attached') return
+			option.dataset.schmancyAutocompleteHandlers = 'attached'
+
+			// Prevent blur handler from interfering with option selection
+			fromEvent<MouseEvent>(option, 'mousedown')
+				.pipe(takeUntil(this.disconnecting))
+				.subscribe(e => e.preventDefault())
+
+			// Handle the actual selection
+			fromEvent<MouseEvent>(option, 'click')
+				.pipe(takeUntil(this.disconnecting))
+				.subscribe(e => {
+					e.stopPropagation()
+					this.selectOption(option)
+				})
+		})
+	}
+
+	private updateOptionSelection(selectedValue: string, selectedValues: string[]) {
+		this.options.forEach(option => {
+			option.selected = this.multi ? selectedValues.includes(option.value) : option.value === selectedValue
+			option.setAttribute('aria-selected', String(option.selected))
+		})
+	}
+
+	private filterOptions(searchTerm: string) {
+		const term = searchTerm.trim()
+
+		if (!term) {
+			// Show all options if no search term
+			this.options.forEach(option => {
+				option.hidden = false
+				option.style.order = '0'
+			})
+			this.visibleOptionsCount = this.options.length
+			this.hasResults = true
+		} else {
+			// Calculate similarity scores for all options
+			const scoredOptions: FilteredOption[] = this.options.map(option => {
+				const optionLabel = option.label || option.textContent || ''
+				const optionValue = option.value
+
+				const labelScore = similarity(term, optionLabel)
+				const valueScore = similarity(term, optionValue)
+				const score = Math.max(labelScore * 1.1, valueScore)
+
+				return { option, score }
+			})
+
+			// Sort by score (highest first)
+			scoredOptions.sort((a, b) => b.score - a.score)
+
+			// Apply visibility and ordering
+			let visibleCount = 0
+			scoredOptions.forEach((item, index) => {
+				const { option, score } = item
+
+				if (score < this.similarityThreshold) {
+					option.hidden = true
+				} else {
+					option.hidden = false
+					visibleCount++
+					option.style.order = String(index)
+				}
+			})
+
+			this.visibleOptionsCount = visibleCount
+			this.hasResults = visibleCount > 0
+		}
+
+		this.announceToScreenReader(
+			this.visibleOptionsCount > 0
+				? `${this.visibleOptionsCount} option${this.visibleOptionsCount === 1 ? '' : 's'} available.`
+				: 'No results found.',
+		)
+	}
+
+	private openDropdown() {
+		this.open = true
+		// Reset filters based on current input value when dropdown opens
+		this.filterOptions(this.inputValue)
+	}
+
+	private selectOption(option: SchmancyOption) {
+		if (this.multi) {
+			const currentValues = this.selectedValues$.value
+			const index = currentValues.indexOf(option.value)
+			const newValues = index > -1 ? currentValues.filter(v => v !== option.value) : [...currentValues, option.value]
+
+			this.selectedValues$.next(newValues)
+			this.announceToScreenReader(
+				newValues.length > 0 ? `Selected: ${this.getSelectedLabels().join(', ')}` : 'No options selected',
+			)
+			this.fireChangeEvent()
+		} else {
+			// Update value first
+			this.selectedValue$.next(option.value)
+
+			// Close dropdown IMMEDIATELY to prevent blur handler from firing
+			this.open = false
+
+			// Now fire event with the NEW value
+			this.fireChangeEvent()
+
+			// Update UI
+			this.inputValue = option.label || option.textContent || ''
+			this.inputValue$.next(this.inputValue)
+
+			this.announceToScreenReader(`Selected: ${option.label || option.textContent}`)
+		}
+	}
+
+	private setupDocumentClickHandler() {
+		fromEvent<MouseEvent>(document, 'click')
+			.pipe(takeUntil(this.disconnecting))
+			.subscribe(e => {
+				if (!this.open) return
+				const path = e.composedPath()
+				if (!path.includes(this) && !this.options.some(opt => path.includes(opt))) {
+					this.open = false
+					this.updateInputDisplay()
+				}
+			})
+	}
+
+	private updateInputDisplay() {
+		// For multi-select, we don't update input display since chips show the selections
+		if (this.multi) return
+
+		const selectedValue = this.selectedValue$.value
+		const option = this.options.find(opt => opt.value === selectedValue)
+		this.inputValue = option ? option.label || option.textContent || '' : ''
+		this.inputValue$.next(this.inputValue)
+
+		if (this.inputElementRef.value) {
+			this.inputElementRef.value.value = this.inputValue
+		}
+	}
+
+	private getSelectedLabels(): string[] {
+		return this.options
+			.filter(option =>
+				this.multi ? this.selectedValues$.value.includes(option.value) : option.value === this.selectedValue$.value,
+			)
+			.map(option => option.label || option.textContent || '')
+	}
+
+	private announceToScreenReader(message: string) {
+		const liveRegion = this.shadowRoot?.querySelector('#live-status')
+		if (liveRegion) {
+			liveRegion.textContent = message
+		}
+	}
+
+	private fireChangeEvent() {
+		const detail: SchmancyAutocompleteChangeEvent['detail'] = {
+			value: this.value,
+		}
+
+		if (this.multi) {
+			detail.values = [...this.selectedValues$.value]
+		}
+
+		this.dispatchEvent(
+			new CustomEvent<SchmancyAutocompleteChangeEvent['detail']>('change', {
+				detail,
+				bubbles: true,
+				composed: true,
+			}),
+		)
+	}
+
+	public checkValidity(): boolean {
+		if (!this.required) return true
+		return this.multi ? this.selectedValues$.value.length > 0 : Boolean(this.selectedValue$.value)
+	}
+
+	public reportValidity(): boolean {
+		if (this.inputElementRef.value) {
+			return this.inputElementRef.value.reportValidity()
+		}
+		return this.checkValidity()
+	}
+
+	firstUpdated() {
+		this.setupOptionHandlers()
+
+		// Sync initial value with display after options are available
+		this.updateInputDisplay()
+
+		// Update options when slot changes
+		const slot = this.shadowRoot?.querySelector('slot')
+		slot?.addEventListener('slotchange', () => {
+			this.setupOptionHandlers()
+			this.updateOptionSelection(this.selectedValue$.value, this.selectedValues$.value)
+		})
+	}
+
+	private handleChipRemove(value: string) {
+		const currentValues = this.selectedValues$.value
+		const newValues = currentValues.filter(v => v !== value)
+		this.selectedValues$.next(newValues)
+		this.fireChangeEvent()
+		this.announceToScreenReader(`Removed: ${this.getChipLabel(value)}`)
+	}
+
+	private getChipLabel(value: string): string {
+		const option = this.options.find(opt => opt.value === value)
+		return option ? option.label || option.textContent || value : value
+	}
+
+	private focusTextInput() {
+		if (this.inputElementRef.value) {
+			this.inputElementRef.value.focus()
+		}
+	}
+
+	render() {
+		const descriptionId = `${this.id}-desc`
+
+		// Get size-based styling to match Schmancy input
+		const getSizeStyles = () => {
+			switch (this.size) {
+				case 'sm':
+					return {
+						height: 'min-h-[40px]',
+						padding: 'px-2',
+						fontSize: 'text-sm', // 14px
+						labelSize: 'text-sm',
+					}
+				case 'lg':
+					return {
+						height: 'min-h-[60px]',
+						padding: 'px-5',
+						fontSize: 'text-lg', // 18px
+						labelSize: 'text-lg',
+					}
+				case 'md':
+				default:
+					return {
+						height: 'min-h-[50px]',
+						padding: 'px-4',
+						fontSize: 'text-base', // 16px
+						labelSize: 'text-base',
+					}
+			}
+		}
+
+		const { height, padding, fontSize, labelSize } = getSizeStyles()
+
+		return html`
+			<div class="relative">
+				<!-- Screen reader live region -->
+				<div id="live-status" role="status" aria-live="polite" class="sr-only"></div>
+
+				<!-- Description -->
+				${this.description ? html`<div id="${descriptionId}" class="sr-only">${this.description}</div>` : ''}
+
+				<!-- Custom input wrapper for Gmail-style chip input -->
+				<slot name="trigger">
+					${when(
+						this.multi,
+						() => html`
+							<!-- Custom multi-select input with inline chips -->
+							<div class="relative">
+								${when(
+									this.label,
+									() => html`
+										<label
+											class="${classMap({
+												'block mb-1 font-medium': true,
+												'text-primary-default': !this.error,
+												'text-error-default': this.error,
+												[labelSize]: true,
+											})}"
+										>
+											${this.label}${this.required ? html`<span class="text-error-default ml-1">*</span>` : ''}
+										</label>
+									`,
+								)}
+								<div
+									class="${classMap({
+										'flex flex-wrap items-center gap-1': true,
+										[height]: true,
+										[padding]: true,
+										'block w-full min-w-0 rounded-[8px] border-0': true,
+										'bg-surface-highest text-surface-on': true,
+										'ring-0 ring-inset focus-within:ring-1 focus-within:ring-inset': true,
+										'ring-secondary-default  focus-within:ring-secondary-default': !this.error,
+										'ring-error-default focus-within:ring-error-default': this.error,
+										'cursor-text transition-colors duration-200': true,
+									})}"
+									@click=${() => this.focusTextInput()}
+									role="combobox"
+									aria-autocomplete="list"
+									aria-haspopup="listbox"
+									aria-controls="options"
+									aria-expanded=${this.open}
+								>
+									<!-- Render chips inline -->
+									${repeat(
+										this.selectedValues$.value,
+										value => value,
+										value => html`
+											<schmancy-input-chip
+												.value=${value}
+												@remove=${(e: CustomEvent) => this.handleChipRemove(e.detail.value)}
+												class="shrink-0 my-0.5"
+											>
+												${this.getChipLabel(value)}
+											</schmancy-input-chip>
+										`,
+									)}
+
+									<!-- Text input for typing -->
+									<input
+										${ref(this.inputElementRef)}
+										id="autocomplete-input"
+										type="text"
+										class="flex-1 min-w-[120px] py-1 bg-transparent border-none outline-none ${fontSize} font-medium text-surface-on placeholder:text-muted"
+										name=${this.name || this.label?.toLowerCase().replace(/\s+/g, '-') || ''}
+										.placeholder=${this.selectedValues$.value.length > 0 ? 'Add more...' : this.placeholder}
+										.value=${this.inputValue}
+										.autocomplete=${this.autocomplete}
+										aria-invalid=${this.error ? 'true' : 'false'}
+										aria-required=${this.required ? 'true' : 'false'}
+										aria-describedby=${this.error && this.validationMessage ? `${this.a11yId}-err` : nothing}
+										aria-label=${!this.label && this.placeholder ? this.placeholder : nothing}
+										@input=${(e: Event) => {
+											const value = (e.target as HTMLInputElement).value
+											this.inputValue = value
+											this.inputValue$.next(value)
+										}}
+										@focus=${(e: FocusEvent) => {
+											e.stopPropagation()
+											// Clear input on focus for new searches
+											this.inputValue = ''
+											this.inputValue$.next('')
+											this.openDropdown()
+										}}
+										@keydown=${(e: KeyboardEvent) => {
+											this.handleKeyDown(e)
+										}}
+										@blur=${() => {
+											this.handleAutoSelectOnBlur()
+										}}
+									/>
+								</div>
+
+								<!-- Validation message -->
+								${when(
+									this.error && this.validationMessage,
+									() => html`
+										<div id="${this.a11yId}-err" class="mt-1 text-sm text-error-default" role="alert">
+											${this.validationMessage}
+										</div>
+									`,
+								)}
+							</div>
+						`,
+						() => html`
+							<!-- Regular single-select input -->
+							<schmancy-input
+								.size=${this.size}
+								${ref(this.inputElementRef)}
+								id="autocomplete-input"
+								class="w-full"
+								.name=${this.name || this.label?.toLowerCase().replace(/\s+/g, '-') || ''}
+								.label=${this.label}
+								.placeholder=${this.placeholder}
+								.required=${this.required}
+								.value=${this.inputValue}
+								type="text"
+								autocomplete=${this.autocomplete}
+								clickable
+								role="combobox"
+								aria-autocomplete="list"
+								aria-haspopup="listbox"
+								aria-controls="options"
+								aria-expanded=${this.open}
+								aria-describedby=${ifDefined(this.description ? descriptionId : undefined)}
+								@input=${(e: Event) => {
+									const value = (e.target as HTMLInputElement).value
+									this.inputValue = value
+									this.inputValue$.next(value)
+								}}
+								@focus=${(e: FocusEvent) => {
+									e.stopPropagation()
+									this.openDropdown()
+								}}
+								@click=${(e: MouseEvent) => {
+									e.stopPropagation()
+									this.openDropdown()
+								}}
+								@keydown=${(e: KeyboardEvent) => {
+									this.handleKeyDown(e)
+								}}
+								@blur=${() => {
+									this.handleAutoSelectOnBlur()
+								}}
+							>
+							</schmancy-input>
+						`,
+					)}
+				</slot>
+
+				<!-- Options dropdown -->
+				<ul
+					id="options"
+					class=${classMap({
+						absolute: true,
+						'z-[1000]': true,
+						'mt-1': true,
+						'w-full': true,
+						'rounded-md': true,
+						'shadow-md': true,
+						'overflow-auto': true,
+						'min-w-full': true,
+						'bg-surface-low': true,
+						flex: true,
+						'flex-col': true, // Enable flexbox for ordering
+					})}
+					role="listbox"
+					aria-multiselectable=${this.multi ? 'true' : 'false'}
+					aria-label=${`${this.label || 'Options'} dropdown`}
+					?hidden=${!this.open}
+					style="max-height: ${this.maxHeight}; display: ${this.open ? 'flex' : 'none'};"
+					@slotchange=${() => {
+						this.setupOptionHandlers()
+					}}
+				>
+					<slot></slot>
+					${!this.hasResults ? html` <li class="px-3 py-2 text-sm text-muted">No results found</li> ` : ''}
+				</ul>
+			</div>
+		`
+	}
+
+	private handleAutoSelectOnBlur() {
+		// Only auto-select in single-select mode and when dropdown is open with a search term
+		if (this.multi || !this.open || !this.inputValue.trim()) {
+			return
+		}
+
+		const searchTerm = this.inputValue.trim()
+
+		// Find the best matching option using the same similarity logic as filtering
+		let bestMatch: SchmancyOption | null = null
+		let bestScore = 0
+
+		this.options.forEach(option => {
+			// Skip hidden options
+			if (option.hidden) return
+
+			// Get text to search in (prioritize label, then textContent, then value)
+			const optionLabel = option.label || option.textContent || ''
+			const optionValue = option.value
+
+			// Calculate similarity scores for both label and value
+			const labelScore = similarity(searchTerm, optionLabel)
+			const valueScore = similarity(searchTerm, optionValue)
+
+			// Use the higher score (prioritizing label matches)
+			const score = Math.max(labelScore * 1.1, valueScore) // Slight boost for label matches
+
+			// Keep track of best match that meets threshold
+			if (score > bestScore && score >= this.similarityThreshold) {
+				bestScore = score
+				bestMatch = option
+			}
+		})
+
+		// Auto-select the best match if found
+		if (bestMatch) {
+			// Silently update the selected value without firing change event
+			this.selectedValue$.next(bestMatch.value)
+			this.inputValue = bestMatch.label || bestMatch.textContent || ''
+			this.inputValue$.next(this.inputValue)
+			this.open = false
+		}
+	}
+
+	private handleKeyDown(event: KeyboardEvent) {
+		const isOpen = this.open
+		const selectedValues = this.selectedValues$.value
+
+		// Handle backspace to remove last chip in multi-select when input is empty
+		if (this.multi && event.key === 'Backspace' && !this.inputValue && selectedValues.length > 0 && !isOpen) {
+			event.preventDefault()
+			const lastValue = selectedValues[selectedValues.length - 1]
+			this.handleChipRemove(lastValue)
+			return
+		}
+
+		if (!isOpen && (event.key === 'ArrowDown' || event.key === 'Enter')) {
+			event.preventDefault()
+			this.openDropdown()
+
+			timer(10)
+				.pipe(takeUntil(this.disconnecting))
+				.subscribe(() => {
+					const firstVisible = this.options.find(opt => !opt.hidden)
+					firstVisible?.focus()
+				})
+			return
+		}
+
+		if (!isOpen) return
+
+		const visibleOptions = this.options
+			.filter(opt => !opt.hidden)
+			.toSorted((a, b) => parseInt(a.style.order || '0') - parseInt(b.style.order || '0'))
+
+		const focusedOption = visibleOptions.find(opt => opt === document.activeElement)
+		const currentIndex = focusedOption ? visibleOptions.indexOf(focusedOption) : -1
+
+		switch (event.key) {
+			case 'Escape':
+				event.preventDefault()
+				this.open = false
+				this.updateInputDisplay()
+				this.inputElementRef.value?.focus()
+				break
+
+			case 'Tab':
+				this.open = false
+				this.updateInputDisplay()
+				break
+
+			case 'ArrowDown':
+				event.preventDefault()
+				const nextIndex = currentIndex < visibleOptions.length - 1 ? currentIndex + 1 : 0
+				visibleOptions[nextIndex]?.focus()
+				break
+
+			case 'ArrowUp':
+				event.preventDefault()
+				const prevIndex = currentIndex > 0 ? currentIndex - 1 : visibleOptions.length - 1
+				visibleOptions[prevIndex]?.focus()
+				break
+
+			case 'Home':
+				event.preventDefault()
+				visibleOptions[0]?.focus()
+				break
+
+			case 'End':
+				event.preventDefault()
+				visibleOptions[visibleOptions.length - 1]?.focus()
+				break
+
+			case 'Enter':
+			case ' ':
+				if (focusedOption) {
+					event.preventDefault()
+					this.selectOption(focusedOption)
+				}
+				break
+		}
+	}
 }
 
-
-
 declare global {
-    interface HTMLElementTagNameMap {
-        'schmancy-autocomplete': SchmancyAutocomplete
-    }
+	interface HTMLElementTagNameMap {
+		'schmancy-autocomplete': SchmancyAutocomplete
+	}
 }