@synthaxai/ui 1.0.0 → 1.1.0

package/dist/forms/SearchInput/SearchInput.svelte

@@ -0,0 +1,1319 @@
+<!--
+  @component SearchInput
+  
+  A fully accessible autocomplete/combobox component following WAI-ARIA 1.2 pattern.
+  Supports async search, keyboard navigation, and custom option rendering.
+  
+  Designed for healthcare applications requiring patient, provider, or payer search.
+  
+  @example Basic usage
+  <SearchInput
+    id="patient-search"
+    label="Search Patient"
+    value={searchQuery}
+    options={patients}
+    onselect={(option) => handlePatientSelect(option)}
+    onsearch={(query) => searchPatients(query)}
+  />
+  
+  @example With custom rendering
+  <SearchInput
+    id="payer-search"
+    label="Insurance Payer"
+    value={payerQuery}
+    options={payers}
+    onselect={handlePayerSelect}
+  >
+    {#snippet optionContent(option)}
+      <div class="flex items-center gap-2">
+        <span class="font-medium">{option.label}</span>
+        <span class="text-sm text-muted">{option.metadata?.type}</span>
+      </div>
+    {/snippet}
+  </SearchInput>
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { Search, X, Loader2, AlertCircle, Check, ChevronDown, Info } from 'lucide-svelte';
+	import { cn } from '../../utils/cn.js';
+	import { generateId, Keys } from '../../utils/keyboard.js';
+	import { announce, prefersReducedMotion } from '../../utils/accessibility.js';
+	import type { InputMode, AutoComplete } from '../../types/index.js';
+
+	// ============================================================================
+	// Types
+	// ============================================================================
+
+	type InputSize = 'sm' | 'md' | 'lg';
+
+	/**
+	 * Search option item with value, label, and optional metadata.
+	 */
+	export interface SearchOption {
+		/** Unique value for the option */
+		value: string;
+		/** Display label for the option */
+		label: string;
+		/** Whether the option is disabled */
+		disabled?: boolean;
+		/** Optional description shown below the label */
+		description?: string;
+		/** Optional icon or visual indicator */
+		icon?: typeof Search;
+		/** Optional metadata for custom rendering */
+		metadata?: Record<string, unknown>;
+	}
+
+	/**
+	 * Grouped search options for categorized results.
+	 */
+	export interface SearchOptionGroup {
+		/** Group label */
+		label: string;
+		/** Options in this group */
+		options: SearchOption[];
+	}
+
+	type SearchOptions = SearchOption[] | SearchOptionGroup[];
+
+	interface Props extends Omit<HTMLInputAttributes, 'class' | 'size' | 'value' | 'onselect'> {
+		/** Unique identifier for the input */
+		id?: string;
+		/** Form field name */
+		name?: string;
+		/** Label text for the input */
+		label: string;
+		/** Current input value (the search query) */
+		value?: string;
+		/** Currently selected option */
+		selected?: SearchOption | null;
+		/** Placeholder text */
+		placeholder?: string;
+		/** Options to display (flat or grouped) */
+		options?: SearchOptions;
+		/** Whether the field is required */
+		required?: boolean;
+		/** Whether the field is disabled */
+		disabled?: boolean;
+		/** Whether the field is read-only */
+		readonly?: boolean;
+		/** Error message to display */
+		error?: string;
+		/** Hint text to display below the input */
+		hint?: string;
+		/** Success message when valid */
+		successMessage?: string;
+		/** Size of the input */
+		size?: InputSize;
+		/** Whether to hide the label visually (still accessible) */
+		hideLabel?: boolean;
+		/** Additional CSS classes for the wrapper */
+		class?: string;
+		/** Show loading spinner during async search */
+		loading?: boolean;
+		/** Message to show when no results found */
+		emptyMessage?: string;
+		/** Minimum characters before triggering search */
+		minSearchLength?: number;
+		/** Debounce delay for search in milliseconds */
+		debounceMs?: number;
+		/** Whether to show clear button when has value */
+		clearable?: boolean;
+		/** Whether to open dropdown on focus (even if empty) */
+		openOnFocus?: boolean;
+		/** Whether to auto-select first option */
+		autoSelect?: boolean;
+		/** Whether to allow free text (value not from options) */
+		allowFreeText?: boolean;
+		/** Icon to display on the left */
+		iconLeft?: Snippet;
+		/** Custom content for option rendering */
+		optionContent?: Snippet<[SearchOption]>;
+		/** Custom empty state content */
+		emptyContent?: Snippet;
+		/** Custom loading content */
+		loadingContent?: Snippet;
+		/** Input mode for mobile keyboards */
+		inputMode?: InputMode;
+		/** Autocomplete value */
+		autocomplete?: AutoComplete;
+		/** Called when search query changes (debounced) */
+		onsearch?: (query: string) => void;
+		/** Called when an option is selected */
+		onselect?: (option: SearchOption) => void;
+		/** Called when selection is cleared */
+		onclear?: () => void;
+		/** Called when input value changes */
+		oninput?: (event: Event) => void;
+		/** Called when input is focused */
+		onfocus?: (event: FocusEvent) => void;
+		/** Called when input loses focus */
+		onblur?: (event: FocusEvent) => void;
+		/** Test ID for e2e testing */
+		testId?: string;
+		/** Show validation state immediately */
+		validateOnMount?: boolean;
+	}
+
+	let {
+		id = generateId('search'),
+		name,
+		label,
+		value = $bindable(''),
+		selected = $bindable(null),
+		placeholder = 'Search...',
+		options = [],
+		required = false,
+		disabled = false,
+		readonly = false,
+		error = '',
+		hint = '',
+		successMessage = '',
+		size = 'md',
+		hideLabel = false,
+		class: className = '',
+		loading = false,
+		emptyMessage = 'No results found',
+		minSearchLength = 1,
+		debounceMs = 300,
+		clearable = true,
+		openOnFocus = false,
+		autoSelect = false,
+		allowFreeText = false,
+		iconLeft,
+		optionContent,
+		emptyContent,
+		loadingContent,
+		inputMode = 'search',
+		autocomplete = 'off',
+		onsearch,
+		onselect,
+		onclear,
+		oninput,
+		onfocus,
+		onblur,
+		testId,
+		validateOnMount = false,
+		...restProps
+	}: Props = $props();
+
+	// ============================================================================
+	// State
+	// ============================================================================
+
+	let inputRef: HTMLInputElement | undefined = $state();
+	let listboxRef: HTMLDivElement | undefined = $state();
+	let isOpen = $state(false);
+	let isFocused = $state(false);
+	let hasInteracted = $state(false);
+	let activeIndex = $state(-1);
+	let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+	// ============================================================================
+	// Derived State
+	// ============================================================================
+
+	// Flatten grouped options for navigation
+	const flatOptions = $derived.by(() => {
+		if (options.length === 0) return [];
+		if ('options' in options[0]) {
+			return (options as SearchOptionGroup[]).flatMap((g) => g.options);
+		}
+		return options as SearchOption[];
+	});
+
+	// Filter to only enabled options for navigation
+	const enabledOptions = $derived(flatOptions.filter((o) => !o.disabled));
+
+	// Check if options are grouped
+	const isGrouped = $derived(options.length > 0 && 'options' in options[0]);
+
+	// Validation display logic
+	const shouldValidate = $derived(hasInteracted || validateOnMount);
+	const showError = $derived(shouldValidate && !!error);
+	const showSuccess = $derived(shouldValidate && !error && !!selected && !!successMessage);
+	const isValid = $derived(shouldValidate && !error && !!selected && !!successMessage);
+
+	// Should show dropdown
+	const shouldShowDropdown = $derived(
+		isOpen &&
+			!disabled &&
+			!readonly &&
+			(loading || flatOptions.length > 0 || (value.length >= minSearchLength && !loading))
+	);
+
+	// Show "no results" state
+	const showEmpty = $derived(
+		!loading && flatOptions.length === 0 && value.length >= minSearchLength
+	);
+
+	// IDs for accessibility
+	const listboxId = $derived(`${id}-listbox`);
+	const errorId = $derived(`${id}-error`);
+	const hintId = $derived(`${id}-hint`);
+	const activeDescendantId = $derived(
+		activeIndex >= 0 ? `${id}-option-${activeIndex}` : undefined
+	);
+
+	// Build aria-describedby
+	const ariaDescribedBy = $derived(
+		[showError && errorId, hint && hintId].filter(Boolean).join(' ') || undefined
+	);
+
+	// ============================================================================
+	// Helpers
+	// ============================================================================
+
+	function getOptionIndex(option: SearchOption): number {
+		return flatOptions.findIndex((o) => o.value === option.value);
+	}
+
+	function scrollToOption(index: number) {
+		if (!listboxRef || index < 0) return;
+		const optionEl = listboxRef.querySelector(`[data-index="${index}"]`);
+		if (optionEl && typeof optionEl.scrollIntoView === 'function') {
+			optionEl.scrollIntoView({ block: 'nearest', behavior: prefersReducedMotion() ? 'auto' : 'smooth' });
+		}
+	}
+
+	// ============================================================================
+	// Event Handlers
+	// ============================================================================
+
+	function handleInput(e: Event) {
+		const target = e.target as HTMLInputElement;
+		value = target.value;
+		hasInteracted = true;
+
+		// Clear selection if user modifies text (unless allowFreeText)
+		if (selected && !allowFreeText) {
+			selected = null;
+		}
+
+		// Open dropdown
+		if (value.length >= minSearchLength) {
+			isOpen = true;
+		}
+
+		// Reset active index
+		activeIndex = autoSelect && enabledOptions.length > 0 ? 0 : -1;
+
+		// Debounced search callback
+		if (debounceTimer) {
+			clearTimeout(debounceTimer);
+		}
+		debounceTimer = setTimeout(() => {
+			if (value.length >= minSearchLength) {
+				onsearch?.(value);
+			}
+		}, debounceMs);
+
+		oninput?.(e);
+	}
+
+	function handleFocus(e: FocusEvent) {
+		isFocused = true;
+
+		// Open on focus if configured
+		if (openOnFocus && value.length >= minSearchLength) {
+			isOpen = true;
+		}
+
+		onfocus?.(e);
+	}
+
+	function handleBlur(e: FocusEvent) {
+		// Don't close if clicking inside the dropdown
+		const relatedTarget = e.relatedTarget as HTMLElement | null;
+		if (relatedTarget && listboxRef?.contains(relatedTarget)) {
+			return;
+		}
+
+		isFocused = false;
+		hasInteracted = true;
+
+		// Delay closing to allow click events to fire
+		setTimeout(() => {
+			if (!isFocused) {
+				isOpen = false;
+				activeIndex = -1;
+			}
+		}, 150);
+
+		onblur?.(e);
+	}
+
+	function handleKeyDown(e: KeyboardEvent) {
+		if (disabled || readonly) return;
+
+		switch (e.key) {
+			case Keys.ArrowDown:
+				e.preventDefault();
+				if (!isOpen && value.length >= minSearchLength) {
+					isOpen = true;
+					activeIndex = 0;
+				} else if (isOpen && enabledOptions.length > 0) {
+					activeIndex = Math.min(activeIndex + 1, enabledOptions.length - 1);
+					// Find actual index in flatOptions
+					const targetOption = enabledOptions[activeIndex];
+					const actualIndex = getOptionIndex(targetOption);
+					scrollToOption(actualIndex);
+				}
+				break;
+
+			case Keys.ArrowUp:
+				e.preventDefault();
+				if (isOpen && enabledOptions.length > 0) {
+					activeIndex = Math.max(activeIndex - 1, 0);
+					const targetOption = enabledOptions[activeIndex];
+					const actualIndex = getOptionIndex(targetOption);
+					scrollToOption(actualIndex);
+				}
+				break;
+
+			case Keys.Home:
+				if (isOpen && enabledOptions.length > 0) {
+					e.preventDefault();
+					activeIndex = 0;
+					scrollToOption(getOptionIndex(enabledOptions[0]));
+				}
+				break;
+
+			case Keys.End:
+				if (isOpen && enabledOptions.length > 0) {
+					e.preventDefault();
+					activeIndex = enabledOptions.length - 1;
+					scrollToOption(getOptionIndex(enabledOptions[activeIndex]));
+				}
+				break;
+
+			case Keys.Enter:
+				if (isOpen && activeIndex >= 0 && activeIndex < enabledOptions.length) {
+					e.preventDefault();
+					selectOption(enabledOptions[activeIndex]);
+				}
+				break;
+
+			case Keys.Escape:
+				if (isOpen) {
+					e.preventDefault();
+					isOpen = false;
+					activeIndex = -1;
+					inputRef?.focus();
+				}
+				break;
+
+			case Keys.Tab:
+				// Allow tab but close dropdown
+				isOpen = false;
+				activeIndex = -1;
+				break;
+		}
+	}
+
+	function selectOption(option: SearchOption) {
+		if (option.disabled) return;
+
+		selected = option;
+		value = option.label;
+		isOpen = false;
+		activeIndex = -1;
+		hasInteracted = true;
+
+		// Announce selection to screen readers
+		announce(`Selected: ${option.label}`, 'polite');
+
+		onselect?.(option);
+		inputRef?.focus();
+	}
+
+	function handleOptionClick(option: SearchOption, e: MouseEvent) {
+		e.preventDefault();
+		e.stopPropagation();
+		selectOption(option);
+	}
+
+	function handleOptionMouseEnter(index: number) {
+		// Find the index in enabled options
+		const option = flatOptions[index];
+		if (!option?.disabled) {
+			const enabledIndex = enabledOptions.findIndex((o) => o.value === option.value);
+			if (enabledIndex >= 0) {
+				activeIndex = enabledIndex;
+			}
+		}
+	}
+
+	function handleClear(e: MouseEvent) {
+		e.preventDefault();
+		e.stopPropagation();
+		value = '';
+		selected = null;
+		activeIndex = -1;
+		isOpen = false;
+		hasInteracted = true;
+		announce('Selection cleared', 'polite');
+		onclear?.();
+		inputRef?.focus();
+	}
+
+	function handleToggleClick(e: MouseEvent) {
+		e.preventDefault();
+		e.stopPropagation();
+		if (!disabled && !readonly) {
+			isOpen = !isOpen;
+			if (isOpen) {
+				inputRef?.focus();
+			}
+		}
+	}
+
+	// ============================================================================
+	// Cleanup
+	// ============================================================================
+
+	$effect(() => {
+		return () => {
+			if (debounceTimer) {
+				clearTimeout(debounceTimer);
+			}
+		};
+	});
+</script>
+
+<div
+	class={cn(
+		'search-input-wrapper',
+		`search-input-${size}`,
+		disabled && 'search-input-disabled',
+		className
+	)}
+>
+	<!-- Label -->
+	<label for={id} class={cn('search-input-label', hideLabel && 'sr-only')}>
+		{label}
+		{#if required}
+			<span class="search-input-required" aria-hidden="true">*</span>
+		{/if}
+		{#if hint && !hideLabel}
+			<span class="search-input-hint-icon" title={hint}>
+				<Info size={14} />
+			</span>
+		{/if}
+	</label>
+
+	<!-- Combobox container -->
+	<div class="search-input-container">
+		<!-- Input wrapper -->
+		<div class="search-input-field-wrapper">
+			{#if iconLeft}
+				<span class={cn('search-input-icon-left', isFocused && 'search-input-icon-focused')} aria-hidden="true">
+					{@render iconLeft()}
+				</span>
+			{:else}
+				<span class={cn('search-input-icon-left', isFocused && 'search-input-icon-focused')} aria-hidden="true">
+					<Search size={size === 'sm' ? 14 : size === 'lg' ? 18 : 16} />
+				</span>
+			{/if}
+
+			<input
+				bind:this={inputRef}
+				{id}
+				{name}
+				type="text"
+				role="combobox"
+				{value}
+				{placeholder}
+				{disabled}
+				{readonly}
+				{required}
+				inputmode={inputMode}
+				{autocomplete}
+				aria-expanded={isOpen}
+				aria-controls={listboxId}
+				aria-autocomplete="list"
+				aria-haspopup="listbox"
+				aria-activedescendant={activeDescendantId}
+				aria-invalid={showError}
+				aria-describedby={ariaDescribedBy}
+				aria-required={required}
+				data-testid={testId}
+				class={cn(
+					'search-input-field',
+					'search-input-has-icon-left',
+					(clearable || showError || isValid || loading) && 'search-input-has-icon-right',
+					showError && 'search-input-error',
+					isValid && 'search-input-valid'
+				)}
+				oninput={handleInput}
+				onfocus={handleFocus}
+				onblur={handleBlur}
+				onkeydown={handleKeyDown}
+				{...restProps}
+			/>
+
+			<!-- Right icons -->
+			<div class="search-input-icons-right">
+				{#if loading}
+					<span class="search-input-icon-loading" aria-hidden="true">
+						<Loader2 size={size === 'sm' ? 14 : size === 'lg' ? 18 : 16} class="search-input-spinner" />
+					</span>
+				{:else if showError}
+					<span class="search-input-icon-error" aria-hidden="true">
+						<AlertCircle size={size === 'sm' ? 14 : size === 'lg' ? 18 : 16} />
+					</span>
+				{:else if isValid}
+					<span class="search-input-icon-success" aria-hidden="true">
+						<Check size={size === 'sm' ? 14 : size === 'lg' ? 18 : 16} />
+					</span>
+				{/if}
+
+				{#if clearable && value && !disabled && !readonly}
+					<button
+						type="button"
+						class="search-input-clear-button"
+						onclick={handleClear}
+						aria-label="Clear search"
+						tabindex={-1}
+					>
+						<X size={size === 'sm' ? 14 : size === 'lg' ? 18 : 16} />
+					</button>
+				{/if}
+
+				<button
+					type="button"
+					class="search-input-toggle-button"
+					onclick={handleToggleClick}
+					aria-label={isOpen ? 'Close suggestions' : 'Show suggestions'}
+					aria-expanded={isOpen}
+					tabindex={-1}
+					{disabled}
+				>
+					<ChevronDown
+						size={size === 'sm' ? 14 : size === 'lg' ? 18 : 16}
+						class={cn('search-input-chevron', isOpen && 'search-input-chevron-open')}
+					/>
+				</button>
+			</div>
+		</div>
+
+		<!-- Listbox dropdown -->
+		{#if shouldShowDropdown}
+			<div
+				bind:this={listboxRef}
+				id={listboxId}
+				role="listbox"
+				aria-label={`${label} suggestions`}
+				class="search-input-listbox"
+			>
+				{#if loading}
+					<div class="search-input-loading" role="status" aria-live="polite">
+						{#if loadingContent}
+							{@render loadingContent()}
+						{:else}
+							<Loader2 size={20} class="search-input-spinner" />
+							<span>Searching...</span>
+						{/if}
+					</div>
+				{:else if showEmpty}
+					<div class="search-input-empty" role="status" aria-live="polite">
+						{#if emptyContent}
+							{@render emptyContent()}
+						{:else}
+							<span>{emptyMessage}</span>
+						{/if}
+					</div>
+				{:else if isGrouped}
+					{#each options as group, groupIndex}
+						{@const typedGroup = group as SearchOptionGroup}
+						<div class="search-input-group" role="group" aria-labelledby={`${id}-group-${groupIndex}`}>
+							<div id={`${id}-group-${groupIndex}`} class="search-input-group-label">
+								{typedGroup.label}
+							</div>
+							{#each typedGroup.options as option}
+								{@const optionIndex = getOptionIndex(option)}
+								{@const enabledIndex = enabledOptions.findIndex((o) => o.value === option.value)}
+								{@const isActive = enabledIndex === activeIndex}
+								{@const isSelected = selected?.value === option.value}
+						<!-- svelte-ignore a11y_interactive_supports_focus -->
+						<!-- svelte-ignore a11y_click_events_have_key_events -->
+						<div
+							id={`${id}-option-${optionIndex}`}
+							role="option"
+							aria-selected={isSelected}
+							aria-disabled={option.disabled}
+							data-index={optionIndex}
+							class={cn(
+								'search-input-option',
+								isActive && 'search-input-option-active',
+								isSelected && 'search-input-option-selected',
+								option.disabled && 'search-input-option-disabled'
+							)}
+							onclick={(e) => handleOptionClick(option, e)}
+							onmouseenter={() => handleOptionMouseEnter(optionIndex)}
+						>
+									{#if optionContent}
+										{@render optionContent(option)}
+									{:else}
+										<div class="search-input-option-content">
+											<span class="search-input-option-label">{option.label}</span>
+											{#if option.description}
+												<span class="search-input-option-description">{option.description}</span>
+											{/if}
+										</div>
+									{/if}
+									{#if isSelected}
+										<Check size={16} class="search-input-option-check" />
+									{/if}
+								</div>
+							{/each}
+						</div>
+					{/each}
+				{:else}
+				{#each flatOptions as option, index}
+					{@const enabledIndex = enabledOptions.findIndex((o) => o.value === option.value)}
+					{@const isActive = enabledIndex === activeIndex}
+					{@const isSelected = selected?.value === option.value}
+					<!-- svelte-ignore a11y_interactive_supports_focus -->
+					<!-- svelte-ignore a11y_click_events_have_key_events -->
+					<div
+						id={`${id}-option-${index}`}
+						role="option"
+						aria-selected={isSelected}
+						aria-disabled={option.disabled}
+						data-index={index}
+						class={cn(
+							'search-input-option',
+							isActive && 'search-input-option-active',
+							isSelected && 'search-input-option-selected',
+							option.disabled && 'search-input-option-disabled'
+						)}
+						onclick={(e) => handleOptionClick(option, e)}
+						onmouseenter={() => handleOptionMouseEnter(index)}
+					>
+							{#if optionContent}
+								{@render optionContent(option)}
+							{:else}
+								<div class="search-input-option-content">
+									<span class="search-input-option-label">{option.label}</span>
+									{#if option.description}
+										<span class="search-input-option-description">{option.description}</span>
+									{/if}
+								</div>
+							{/if}
+							{#if isSelected}
+								<Check size={16} class="search-input-option-check" />
+							{/if}
+						</div>
+					{/each}
+				{/if}
+			</div>
+		{/if}
+	</div>
+
+	<!-- Screen reader announcements for list count -->
+	{#if isOpen && !loading && flatOptions.length > 0}
+		<div class="sr-only" role="status" aria-live="polite" aria-atomic="true">
+			{flatOptions.length} suggestion{flatOptions.length === 1 ? '' : 's'} available
+		</div>
+	{/if}
+
+	<!-- Footer messages -->
+	<div class="search-input-footer">
+		<div class="search-input-messages">
+			{#if showError}
+				<p id={errorId} class="search-input-message search-input-message-error" role="alert" aria-live="assertive">
+					{error}
+				</p>
+			{:else if showSuccess}
+				<p class="search-input-message search-input-message-success">
+					{successMessage}
+				</p>
+			{:else if hint && isFocused}
+				<p id={hintId} class="search-input-message search-input-message-hint">
+					{hint}
+				</p>
+			{/if}
+		</div>
+	</div>
+</div>
+
+<style>
+	/* ========================================
+	   BASE WRAPPER
+	   ======================================== */
+	.search-input-wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: 0.375rem;
+		position: relative;
+	}
+
+	.search-input-disabled {
+		opacity: 0.6;
+	}
+
+	/* ========================================
+	   LABEL
+	   ======================================== */
+	.search-input-label {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		font-weight: 500;
+		color: var(--ui-text-primary);
+	}
+
+	.search-input-sm .search-input-label {
+		font-size: 0.75rem;
+	}
+
+	.search-input-md .search-input-label,
+	.search-input-lg .search-input-label {
+		font-size: 0.875rem;
+	}
+
+	.search-input-required {
+		color: rgb(var(--ui-color-error));
+	}
+
+	:global([data-theme='dark']) .search-input-required {
+		color: rgb(var(--ui-color-error-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .search-input-required {
+			color: rgb(var(--ui-color-error-light));
+		}
+	}
+
+	.search-input-hint-icon {
+		color: var(--ui-text-tertiary);
+		cursor: help;
+	}
+
+	/* ========================================
+	   CONTAINER
+	   ======================================== */
+	.search-input-container {
+		position: relative;
+	}
+
+	/* ========================================
+	   FIELD WRAPPER
+	   ======================================== */
+	.search-input-field-wrapper {
+		position: relative;
+		display: flex;
+		align-items: center;
+	}
+
+	/* ========================================
+	   INPUT FIELD
+	   ======================================== */
+	.search-input-field {
+		width: 100%;
+		border: 2px solid var(--ui-border-default);
+		border-radius: 0.5rem;
+		background: var(--ui-bg-secondary);
+		color: var(--ui-text-primary);
+		transition: all 0.2s ease;
+	}
+
+	.search-input-field::placeholder {
+		color: var(--ui-text-tertiary);
+	}
+
+	.search-input-field:focus-visible {
+		outline: none;
+		background: var(--ui-bg-primary);
+		border-color: rgb(var(--ui-color-primary));
+		box-shadow: 0 0 0 3px rgb(var(--ui-color-primary) / 0.4);
+	}
+
+	:global([data-theme='dark']) .search-input-field:focus-visible {
+		border-color: rgb(var(--ui-color-primary-light));
+		box-shadow: 0 0 0 3px rgb(var(--ui-color-primary-light) / 0.5);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .search-input-field:focus-visible {
+			border-color: rgb(var(--ui-color-primary-light));
+			box-shadow: 0 0 0 3px rgb(var(--ui-color-primary-light) / 0.5);
+		}
+	}
+
+	.search-input-field:disabled {
+		cursor: not-allowed;
+		background: var(--ui-bg-tertiary);
+	}
+
+	.search-input-field:read-only {
+		background: var(--ui-bg-tertiary);
+		cursor: default;
+	}
+
+	/* Size variants */
+	.search-input-sm .search-input-field {
+		height: 2rem;
+		padding: 0 0.75rem;
+		font-size: 0.875rem;
+	}
+
+	.search-input-md .search-input-field {
+		height: 2.5rem;
+		padding: 0 0.75rem;
+		font-size: 0.875rem;
+	}
+
+	.search-input-lg .search-input-field {
+		height: 3rem;
+		padding: 0 1rem;
+		font-size: 1rem;
+	}
+
+	/* Icon padding adjustments */
+	.search-input-field.search-input-has-icon-left {
+		padding-left: 2.5rem !important;
+	}
+
+	.search-input-field.search-input-has-icon-right {
+		padding-right: 5rem !important;
+	}
+
+	/* Error state */
+	.search-input-error {
+		border-color: rgb(var(--ui-color-error));
+	}
+
+	.search-input-error:focus-visible {
+		border-color: rgb(var(--ui-color-error));
+		box-shadow: 0 0 0 3px rgb(var(--ui-color-error) / 0.4);
+	}
+
+	:global([data-theme='dark']) .search-input-error {
+		border-color: rgb(var(--ui-color-error-light));
+	}
+
+	:global([data-theme='dark']) .search-input-error:focus-visible {
+		border-color: rgb(var(--ui-color-error-light));
+		box-shadow: 0 0 0 3px rgb(var(--ui-color-error-light) / 0.5);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .search-input-error {
+			border-color: rgb(var(--ui-color-error-light));
+		}
+
+		:global(:root:not([data-theme='light'])) .search-input-error:focus-visible {
+			border-color: rgb(var(--ui-color-error-light));
+			box-shadow: 0 0 0 3px rgb(var(--ui-color-error-light) / 0.5);
+		}
+	}
+
+	/* Valid state */
+	.search-input-valid {
+		border-color: rgb(var(--ui-color-success));
+	}
+
+	.search-input-valid:focus-visible {
+		border-color: rgb(var(--ui-color-success));
+		box-shadow: 0 0 0 3px rgb(var(--ui-color-success) / 0.4);
+	}
+
+	:global([data-theme='dark']) .search-input-valid {
+		border-color: rgb(var(--ui-color-success-light));
+	}
+
+	:global([data-theme='dark']) .search-input-valid:focus-visible {
+		border-color: rgb(var(--ui-color-success-light));
+		box-shadow: 0 0 0 3px rgb(var(--ui-color-success-light) / 0.5);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .search-input-valid {
+			border-color: rgb(var(--ui-color-success-light));
+		}
+
+		:global(:root:not([data-theme='light'])) .search-input-valid:focus-visible {
+			border-color: rgb(var(--ui-color-success-light));
+			box-shadow: 0 0 0 3px rgb(var(--ui-color-success-light) / 0.5);
+		}
+	}
+
+	/* ========================================
+	   ICONS
+	   ======================================== */
+	.search-input-icon-left {
+		position: absolute;
+		left: 0.75rem;
+		top: 50%;
+		transform: translateY(-50%);
+		z-index: 1;
+		pointer-events: none;
+		color: var(--ui-text-tertiary);
+		transition: color 0.2s ease;
+	}
+
+	.search-input-icon-focused {
+		color: rgb(var(--ui-color-primary));
+	}
+
+	:global([data-theme='dark']) .search-input-icon-focused {
+		color: rgb(var(--ui-color-primary-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .search-input-icon-focused {
+			color: rgb(var(--ui-color-primary-light));
+		}
+	}
+
+	.search-input-icons-right {
+		position: absolute;
+		right: 0.5rem;
+		top: 50%;
+		transform: translateY(-50%);
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+	}
+
+	.search-input-icon-loading,
+	.search-input-icon-error,
+	.search-input-icon-success {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--ui-text-tertiary);
+	}
+
+	.search-input-icon-error {
+		color: rgb(var(--ui-color-error));
+	}
+
+	:global([data-theme='dark']) .search-input-icon-error {
+		color: rgb(var(--ui-color-error-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .search-input-icon-error {
+			color: rgb(var(--ui-color-error-light));
+		}
+	}
+
+	.search-input-icon-success {
+		color: rgb(var(--ui-color-success));
+	}
+
+	:global([data-theme='dark']) .search-input-icon-success {
+		color: rgb(var(--ui-color-success-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .search-input-icon-success {
+			color: rgb(var(--ui-color-success-light));
+		}
+	}
+
+	.search-input-spinner {
+		animation: spin 1s linear infinite;
+	}
+
+	@keyframes spin {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.search-input-spinner {
+			animation: none;
+		}
+	}
+
+	.search-input-clear-button,
+	.search-input-toggle-button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.25rem;
+		border: none;
+		background: transparent;
+		color: var(--ui-text-tertiary);
+		cursor: pointer;
+		border-radius: 0.25rem;
+		transition: all 0.15s ease;
+	}
+
+	.search-input-clear-button:hover,
+	.search-input-toggle-button:hover {
+		color: var(--ui-text-primary);
+		background: var(--ui-bg-tertiary);
+	}
+
+	.search-input-clear-button:focus-visible,
+	.search-input-toggle-button:focus-visible {
+		outline: 2px solid rgb(var(--ui-color-primary));
+		outline-offset: 1px;
+	}
+
+	.search-input-toggle-button:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	.search-input-chevron {
+		transition: transform 0.2s ease;
+	}
+
+	.search-input-chevron-open {
+		transform: rotate(180deg);
+	}
+
+	/* ========================================
+	   LISTBOX DROPDOWN
+	   ======================================== */
+	.search-input-listbox {
+		position: absolute;
+		top: 100%;
+		left: 0;
+		right: 0;
+		z-index: 50;
+		margin-top: 0.25rem;
+		max-height: 16rem;
+		overflow-y: auto;
+		background: var(--ui-bg-primary);
+		border: 2px solid var(--ui-border-default);
+		border-radius: 0.5rem;
+		box-shadow: var(--ui-shadow-lg);
+		animation: slideDown 0.15s ease-out;
+	}
+
+	@keyframes slideDown {
+		from {
+			opacity: 0;
+			transform: translateY(-4px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.search-input-listbox {
+			animation: none;
+		}
+	}
+
+	/* ========================================
+	   OPTION ITEMS
+	   ======================================== */
+	.search-input-option {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0.625rem 0.75rem;
+		cursor: pointer;
+		transition: background-color 0.1s ease;
+	}
+
+	.search-input-option:hover,
+	.search-input-option-active {
+		background: var(--ui-bg-secondary);
+	}
+
+	.search-input-option-selected {
+		background: rgb(var(--ui-color-primary) / 0.1);
+	}
+
+	:global([data-theme='dark']) .search-input-option-selected {
+		background: rgb(var(--ui-color-primary-light) / 0.15);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .search-input-option-selected {
+			background: rgb(var(--ui-color-primary-light) / 0.15);
+		}
+	}
+
+	.search-input-option-active.search-input-option-selected {
+		background: rgb(var(--ui-color-primary) / 0.15);
+	}
+
+	:global([data-theme='dark']) .search-input-option-active.search-input-option-selected {
+		background: rgb(var(--ui-color-primary-light) / 0.2);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .search-input-option-active.search-input-option-selected {
+			background: rgb(var(--ui-color-primary-light) / 0.2);
+		}
+	}
+
+	.search-input-option-disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.search-input-option-disabled:hover {
+		background: transparent;
+	}
+
+	.search-input-option-content {
+		display: flex;
+		flex-direction: column;
+		gap: 0.125rem;
+		min-width: 0;
+		flex: 1;
+	}
+
+	.search-input-option-label {
+		font-weight: 500;
+		color: var(--ui-text-primary);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.search-input-option-description {
+		font-size: 0.75rem;
+		color: var(--ui-text-tertiary);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.search-input-option-check {
+		flex-shrink: 0;
+		color: rgb(var(--ui-color-primary));
+		margin-left: 0.5rem;
+	}
+
+	:global([data-theme='dark']) .search-input-option-check {
+		color: rgb(var(--ui-color-primary-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .search-input-option-check {
+			color: rgb(var(--ui-color-primary-light));
+		}
+	}
+
+	/* ========================================
+	   GROUPS
+	   ======================================== */
+	.search-input-group {
+		padding-top: 0.25rem;
+	}
+
+	.search-input-group:not(:first-child) {
+		border-top: 1px solid var(--ui-border-default);
+		margin-top: 0.25rem;
+	}
+
+	.search-input-group-label {
+		padding: 0.5rem 0.75rem 0.25rem;
+		font-size: 0.6875rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: var(--ui-text-tertiary);
+	}
+
+	/* ========================================
+	   LOADING & EMPTY STATES
+	   ======================================== */
+	.search-input-loading,
+	.search-input-empty {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+		padding: 1.5rem;
+		color: var(--ui-text-tertiary);
+		font-size: 0.875rem;
+	}
+
+	/* ========================================
+	   FOOTER & MESSAGES
+	   ======================================== */
+	.search-input-footer {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		min-height: 1.25rem;
+	}
+
+	.search-input-messages {
+		flex: 1;
+	}
+
+	.search-input-message {
+		font-size: 0.75rem;
+		animation: slideIn 0.2s ease-out;
+	}
+
+	@keyframes slideIn {
+		from {
+			opacity: 0;
+			transform: translateY(-4px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	.search-input-message-error {
+		color: rgb(var(--ui-color-error));
+	}
+
+	:global([data-theme='dark']) .search-input-message-error {
+		color: rgb(var(--ui-color-error-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .search-input-message-error {
+			color: rgb(var(--ui-color-error-light));
+		}
+	}
+
+	.search-input-message-success {
+		color: rgb(var(--ui-color-success));
+	}
+
+	:global([data-theme='dark']) .search-input-message-success {
+		color: rgb(var(--ui-color-success-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .search-input-message-success {
+			color: rgb(var(--ui-color-success-light));
+		}
+	}
+
+	.search-input-message-hint {
+		color: var(--ui-text-tertiary);
+	}
+
+	/* ========================================
+	   UTILITIES
+	   ======================================== */
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+</style>