@salmexio/ui 1.2.0 → 1.3.0

package/dist/forms/SearchInput/SearchInput.svelte

@@ -0,0 +1,788 @@
+<!--
+  @component SearchInput
+
+  INFRARED — Search input with autocomplete dropdown, match highlighting,
+  grouped results, loading state, and keyboard navigation.
+  Follows WAI-ARIA combobox pattern.
+
+  @example
+  <SearchInput
+    label="Search models"
+    options={[
+      { value: 'opus', label: 'Claude Opus' },
+      { value: 'sonnet', label: 'Claude Sonnet' },
+    ]}
+    bind:value={query}
+    onselect={(opt) => console.log(opt)}
+  />
+-->
+<script lang="ts" module>
+export interface SearchOption {
+	value: string;
+	label: string;
+	description?: string;
+	disabled?: boolean;
+}
+
+export interface SearchGroup {
+	label: string;
+	options: SearchOption[];
+}
+</script>
+
+<script lang="ts">
+import { cn } from '../../utils/cn.js';
+import { Keys, generateId } from '../../utils/keyboard.js';
+import { onMount, tick } from 'svelte';
+
+type SearchSize = 'sm' | 'md' | 'lg';
+
+interface Props {
+	/** Visible label. */
+	label: string;
+	/** Search query value (bindable). */
+	value?: string;
+	/** Flat list of options. */
+	options?: SearchOption[];
+	/** Grouped options. */
+	groups?: SearchGroup[];
+	/** Placeholder text. */
+	placeholder?: string;
+	/** Minimum characters before showing suggestions. */
+	minChars?: number;
+	/** Debounce delay in ms for the onsearch callback. */
+	debounceMs?: number;
+	/** Show loading spinner in dropdown. */
+	loading?: boolean;
+	/** Allow clearing the input. */
+	clearable?: boolean;
+	/** Size variant. */
+	size?: SearchSize;
+	/** Error message. */
+	error?: string;
+	/** Hint text. */
+	hint?: string;
+	/** Disabled state. */
+	disabled?: boolean;
+	/** Required field. */
+	required?: boolean;
+	/** Hide the visible label. */
+	hideLabel?: boolean;
+	/** Reserve footer space even when empty. */
+	alwaysShowFooter?: boolean;
+	/** Additional CSS class. */
+	class?: string;
+	/** Called when an option is selected. */
+	onselect?: (option: SearchOption) => void;
+	/** Called when search query changes (debounced). */
+	onsearch?: (query: string) => void;
+	/** Called when input value changes. */
+	oninput?: (event: Event) => void;
+	/** Called when input loses focus. */
+	onblur?: (event: FocusEvent) => void;
+	/** Test ID. */
+	testId?: string;
+}
+
+let {
+	label,
+	value = $bindable(''),
+	options = [],
+	groups = [],
+	placeholder = 'Search...',
+	minChars = 1,
+	debounceMs = 250,
+	loading = false,
+	clearable = true,
+	size = 'md',
+	error = '',
+	hint = '',
+	disabled = false,
+	required = false,
+	hideLabel = false,
+	alwaysShowFooter = true,
+	class: className = '',
+	onselect,
+	onsearch,
+	oninput,
+	onblur,
+	testId
+}: Props = $props();
+
+const id = generateId('search');
+const listboxId = `${id}-listbox`;
+const labelId = `${id}-label`;
+const errorId = `${id}-error`;
+const hintId = `${id}-hint`;
+
+let inputRef = $state<HTMLInputElement | null>(null);
+let listboxEl = $state<HTMLDivElement | null>(null);
+let isOpen = $state(false);
+let activeIndex = $state(-1);
+let isFocused = $state(false);
+let hasInteracted = $state(false);
+let debounceTimer: ReturnType<typeof setTimeout> | undefined;
+let blurTimer: ReturnType<typeof setTimeout> | undefined;
+
+// Panel positioning
+let panelTop = $state(0);
+let panelLeft = $state(0);
+let panelWidth = $state(0);
+let panelMaxHeight = $state(260);
+let placeAbove = $state(false);
+
+// Flatten all options
+const flatOptions = $derived<SearchOption[]>(
+	groups.length > 0
+		? groups.flatMap((g) => g.options)
+		: options
+);
+
+// Filter based on query
+const filteredFlat = $derived<SearchOption[]>(
+	value.length >= minChars
+		? flatOptions.filter((o) =>
+				o.label.toLowerCase().includes(value.toLowerCase())
+			)
+		: []
+);
+
+const filteredGroups = $derived(
+	groups.length > 0 && value.length >= minChars
+		? groups
+				.map((g) => ({
+					...g,
+					options: g.options.filter((o) =>
+						o.label.toLowerCase().includes(value.toLowerCase())
+					),
+				}))
+				.filter((g) => g.options.length > 0)
+		: []
+);
+
+const displayOptions = $derived<SearchOption[]>(
+	groups.length > 0
+		? filteredGroups.flatMap((g) => g.options)
+		: filteredFlat
+);
+
+const enabledIndices = $derived(
+	displayOptions
+		.map((o, i) => ({ i, disabled: o.disabled }))
+		.filter((x) => !x.disabled)
+		.map((x) => x.i)
+);
+
+const showError = $derived(hasInteracted && !!error);
+const shouldOpen = $derived(
+	isFocused && value.length >= minChars && (displayOptions.length > 0 || loading)
+);
+
+const ariaDescribedBy = $derived(
+	[showError && errorId, hint && hintId].filter(Boolean).join(' ') || undefined
+);
+const hasFooterContent = $derived(showError || !!hint);
+
+$effect(() => {
+	if (shouldOpen && !isOpen) {
+		isOpen = true;
+		positionDropdown();
+	} else if (!shouldOpen && isOpen) {
+		isOpen = false;
+		activeIndex = -1;
+	}
+});
+
+function positionDropdown() {
+	if (!inputRef) return;
+	const rect = inputRef.getBoundingClientRect();
+	const viewportH = window.innerHeight;
+	const spaceBelow = viewportH - rect.bottom;
+	const spaceAbove = rect.top;
+	const maxH = 260;
+
+	placeAbove = spaceBelow < Math.min(maxH, 150) && spaceAbove > spaceBelow;
+	panelLeft = rect.left;
+	panelWidth = rect.width;
+
+	if (placeAbove) {
+		panelMaxHeight = Math.min(maxH, spaceAbove - 8);
+		panelTop = rect.top - 2;
+	} else {
+		panelMaxHeight = Math.min(maxH, spaceBelow - 8);
+		panelTop = rect.bottom + 2;
+	}
+}
+
+function handleInput(e: Event) {
+	const target = e.target as HTMLInputElement;
+	value = target.value;
+	activeIndex = -1;
+	oninput?.(e);
+
+	if (debounceMs && onsearch) {
+		clearTimeout(debounceTimer);
+		debounceTimer = setTimeout(() => onsearch!(value), debounceMs);
+	} else {
+		onsearch?.(value);
+	}
+}
+
+function handleFocus() {
+	isFocused = true;
+}
+
+function handleBlur(e: FocusEvent) {
+	// Delay to allow click on options
+	blurTimer = setTimeout(() => {
+		isFocused = false;
+		hasInteracted = true;
+		onblur?.(e);
+	}, 150);
+}
+
+function selectOption(opt: SearchOption) {
+	if (opt.disabled) return;
+	value = opt.label;
+	isOpen = false;
+	activeIndex = -1;
+	onselect?.(opt);
+	inputRef?.focus();
+}
+
+function handleClear() {
+	value = '';
+	activeIndex = -1;
+	onsearch?.('');
+	inputRef?.focus();
+}
+
+function scrollActiveIntoView() {
+	if (!listboxEl || activeIndex < 0) return;
+	const active = listboxEl.querySelector(`[data-option-index="${activeIndex}"]`) as HTMLElement;
+	if (!active) return;
+	const listTop = listboxEl.scrollTop;
+	const listHeight = listboxEl.clientHeight;
+	const elTop = active.offsetTop;
+	const elHeight = active.offsetHeight;
+	if (elTop < listTop) {
+		listboxEl.scrollTop = elTop;
+	} else if (elTop + elHeight > listTop + listHeight) {
+		listboxEl.scrollTop = elTop + elHeight - listHeight;
+	}
+}
+
+function handleKeydown(e: KeyboardEvent) {
+	if (!isOpen) return;
+
+	switch (e.key) {
+		case Keys.ArrowDown:
+			e.preventDefault();
+			{
+				const pos = enabledIndices.indexOf(activeIndex);
+				if (pos < enabledIndices.length - 1) {
+					activeIndex = enabledIndices[pos + 1];
+				} else if (pos === -1 && enabledIndices.length > 0) {
+					activeIndex = enabledIndices[0];
+				}
+				tick().then(scrollActiveIntoView);
+			}
+			break;
+		case Keys.ArrowUp:
+			e.preventDefault();
+			{
+				const pos = enabledIndices.indexOf(activeIndex);
+				if (pos > 0) {
+					activeIndex = enabledIndices[pos - 1];
+				}
+				tick().then(scrollActiveIntoView);
+			}
+			break;
+		case Keys.Enter:
+			e.preventDefault();
+			if (activeIndex >= 0 && displayOptions[activeIndex]) {
+				selectOption(displayOptions[activeIndex]);
+			}
+			break;
+		case Keys.Escape:
+			e.preventDefault();
+			isOpen = false;
+			activeIndex = -1;
+			break;
+		case Keys.Home:
+			e.preventDefault();
+			if (enabledIndices.length > 0) {
+				activeIndex = enabledIndices[0];
+				tick().then(scrollActiveIntoView);
+			}
+			break;
+		case Keys.End:
+			e.preventDefault();
+			if (enabledIndices.length > 0) {
+				activeIndex = enabledIndices[enabledIndices.length - 1];
+				tick().then(scrollActiveIntoView);
+			}
+			break;
+	}
+}
+
+function escapeHtml(str: string): string {
+	return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+function highlightMatch(text: string): string {
+	if (!value || value.length < minChars) return escapeHtml(text);
+	const idx = text.toLowerCase().indexOf(value.toLowerCase());
+	if (idx === -1) return escapeHtml(text);
+	return (
+		escapeHtml(text.slice(0, idx)) +
+		'<mark class="sx-search-highlight">' +
+		escapeHtml(text.slice(idx, idx + value.length)) +
+		'</mark>' +
+		escapeHtml(text.slice(idx + value.length))
+	);
+}
+
+function getOptionId(index: number) {
+	return `${id}-option-${index}`;
+}
+
+function handleReposition() {
+	if (isOpen) positionDropdown();
+}
+
+// Portal dropdown to body
+$effect(() => {
+	if (listboxEl && isOpen) {
+		document.body.appendChild(listboxEl);
+		return () => {
+			if (listboxEl?.parentNode === document.body) {
+				document.body.removeChild(listboxEl);
+			}
+		};
+	}
+});
+
+onMount(() => {
+	window.addEventListener('scroll', handleReposition, true);
+	window.addEventListener('resize', handleReposition);
+	return () => {
+		window.removeEventListener('scroll', handleReposition, true);
+		window.removeEventListener('resize', handleReposition);
+		clearTimeout(debounceTimer);
+		clearTimeout(blurTimer);
+		if (listboxEl?.parentNode === document.body) {
+			document.body.removeChild(listboxEl);
+		}
+	};
+});
+</script>
+
+<div
+	class={cn('sx-search-wrapper', `sx-search-${size}`, disabled && 'sx-search-disabled', className)}
+	data-testid={testId}
+>
+	<label id={labelId} for={id} class={cn('sx-search-label', hideLabel && 'sx-sr-only')}>
+		{label}
+		{#if required}
+			<span class="sx-search-required" aria-hidden="true">*</span>
+		{/if}
+	</label>
+
+	<div
+		class={cn(
+			'sx-search-field-wrapper',
+			isFocused && 'sx-search-focused',
+			showError && 'sx-search-error-state'
+		)}
+	>
+		<span class="sx-search-icon" aria-hidden="true">
+			<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+				<circle cx="11" cy="11" r="8" /><path d="M21 21l-4.35-4.35" />
+			</svg>
+		</span>
+
+		<input
+			bind:this={inputRef}
+			{id}
+			type="search"
+			role="combobox"
+			bind:value
+			{placeholder}
+			{disabled}
+			{required}
+			autocomplete="off"
+			aria-expanded={isOpen}
+			aria-haspopup="listbox"
+			aria-controls={isOpen ? listboxId : undefined}
+			aria-activedescendant={isOpen && activeIndex >= 0 ? getOptionId(activeIndex) : undefined}
+			aria-labelledby={labelId}
+			aria-describedby={ariaDescribedBy}
+			aria-invalid={showError || undefined}
+			class="sx-search-input"
+			oninput={handleInput}
+			onfocus={handleFocus}
+			onblur={handleBlur}
+			onkeydown={handleKeydown}
+		/>
+
+		{#if loading}
+			<span class="sx-search-loading" aria-hidden="true">
+				<svg class="sx-search-spinner" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+					<circle cx="12" cy="12" r="10" stroke-opacity="0.25" /><path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round" />
+				</svg>
+			</span>
+		{:else if clearable && value && !disabled}
+			<button
+				type="button"
+				class="sx-search-clear"
+				onclick={handleClear}
+				aria-label="Clear search"
+				tabindex={-1}
+			>
+				<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
+			</button>
+		{/if}
+	</div>
+
+	{#if alwaysShowFooter || hasFooterContent}
+		<div class="sx-search-footer">
+			{#if showError}
+				<p id={errorId} class="sx-search-error" role="alert" aria-live="assertive">{error}</p>
+			{:else if hint}
+				<p id={hintId} class="sx-search-hint">{hint}</p>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<!-- Dropdown panel -->
+{#if isOpen}
+	<div
+		bind:this={listboxEl}
+		id={listboxId}
+		class="sx-search-panel"
+		style="position:fixed;left:{panelLeft}px;{placeAbove ? `bottom:${window.innerHeight - panelTop}px` : `top:${panelTop}px`};width:{panelWidth}px;max-height:{panelMaxHeight}px;"
+		role="listbox"
+		aria-labelledby={labelId}
+		tabindex="-1"
+		onmousedown={(e) => e.preventDefault()}
+	>
+		{#if loading && displayOptions.length === 0}
+			<div class="sx-search-loading-msg">Searching...</div>
+		{:else if displayOptions.length === 0}
+			<div class="sx-search-empty">No results found</div>
+		{:else if filteredGroups.length > 0}
+			{@const groupOffsets = filteredGroups.reduce<number[]>((acc, g, i) => {
+				acc.push(i === 0 ? 0 : acc[i - 1] + filteredGroups[i - 1].options.length);
+				return acc;
+			}, [])}
+			{#each filteredGroups as group, gi}
+				<div role="group" aria-label={group.label}>
+					<div class="sx-search-group-label">{group.label}</div>
+					{#each group.options as opt, oi}
+						{@const globalIdx = groupOffsets[gi] + oi}
+						{@const isActive = globalIdx === activeIndex}
+						<!-- svelte-ignore a11y_click_events_have_key_events -->
+						<div
+							id={getOptionId(globalIdx)}
+							class={cn(
+								'sx-search-option',
+								isActive && 'sx-search-option-active',
+								opt.disabled && 'sx-search-option-disabled'
+							)}
+							role="option"
+							tabindex="-1"
+							aria-selected={isActive}
+							aria-disabled={opt.disabled || undefined}
+							data-option-index={globalIdx}
+							onmouseenter={() => { if (!opt.disabled) activeIndex = globalIdx; }}
+							onmousedown={(e) => { e.preventDefault(); selectOption(opt); }}
+						>
+							<span class="sx-search-option-label">{@html highlightMatch(opt.label)}</span>
+							{#if opt.description}
+								<span class="sx-search-option-desc">{opt.description}</span>
+							{/if}
+						</div>
+					{/each}
+				</div>
+			{/each}
+		{:else}
+			{#each displayOptions as opt, i}
+				{@const isActive = i === activeIndex}
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<div
+					id={getOptionId(i)}
+					class={cn(
+						'sx-search-option',
+						isActive && 'sx-search-option-active',
+						opt.disabled && 'sx-search-option-disabled'
+					)}
+					role="option"
+					tabindex="-1"
+					aria-selected={isActive}
+					aria-disabled={opt.disabled || undefined}
+					data-option-index={i}
+					onmouseenter={() => { if (!opt.disabled) activeIndex = i; }}
+					onmousedown={(e) => { e.preventDefault(); selectOption(opt); }}
+				>
+					<span class="sx-search-option-label">{@html highlightMatch(opt.label)}</span>
+					{#if opt.description}
+						<span class="sx-search-option-desc">{opt.description}</span>
+					{/if}
+				</div>
+			{/each}
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.sx-search-wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: var(--sx-space-1);
+		font-family: var(--sx-font-body);
+	}
+
+	.sx-search-disabled {
+		opacity: 0.5;
+	}
+
+	.sx-search-label {
+		font-size: var(--sx-text-sm);
+		font-weight: 500;
+		color: var(--sx-color-text-secondary);
+	}
+
+	.sx-search-required {
+		color: var(--sx-color-red);
+		margin-left: 2px;
+	}
+
+	.sx-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;
+	}
+
+	.sx-search-field-wrapper {
+		position: relative;
+		display: flex;
+		align-items: center;
+		background: var(--sx-color-surface);
+		border: 1px solid var(--sx-color-border-strong);
+		border-radius: var(--sx-radius-md);
+		transition: border-color var(--sx-transition-fast), box-shadow var(--sx-transition-fast);
+		box-shadow:
+			inset 0 1px 3px rgba(0, 0, 0, 0.3),
+			inset 0 0 0 1px rgba(0, 0, 0, 0.06);
+	}
+
+	.sx-search-field-wrapper:hover:not(.sx-search-focused):not(.sx-search-error-state) {
+		border-color: var(--sx-color-border-hover);
+	}
+
+	.sx-search-focused {
+		border-color: var(--sx-color-primary);
+		box-shadow:
+			inset 0 1px 2px rgba(0, 0, 0, 0.2),
+			0 0 0 3px var(--sx-color-primary-ring),
+			0 0 12px -4px rgba(255, 107, 53, 0.15);
+		animation: sx-focus-breathe 2s ease-in-out infinite;
+	}
+
+	.sx-search-error-state {
+		border-color: var(--sx-color-red);
+		box-shadow:
+			inset 0 1px 2px rgba(0, 0, 0, 0.2),
+			0 0 0 3px var(--sx-color-red-ring);
+	}
+
+	.sx-search-icon {
+		display: flex;
+		align-items: center;
+		padding-left: var(--sx-space-3);
+		color: var(--sx-color-text-secondary);
+		flex-shrink: 0;
+	}
+
+	.sx-search-input {
+		flex: 1;
+		min-width: 0;
+		border: none;
+		background: transparent;
+		color: var(--sx-color-text);
+		font-family: var(--sx-font-body);
+		font-size: var(--sx-text-sm);
+		outline: none;
+		padding: var(--sx-space-2) var(--sx-space-3);
+		/* Remove native search cancel button */
+		appearance: none;
+		-webkit-appearance: none;
+	}
+
+	.sx-search-input::-webkit-search-cancel-button,
+	.sx-search-input::-webkit-search-decoration {
+		-webkit-appearance: none;
+		display: none;
+	}
+
+	.sx-search-input:focus-visible {
+		box-shadow: none;
+	}
+
+	.sx-search-input::placeholder {
+		color: var(--sx-color-text-disabled);
+	}
+
+	/* Sizes */
+	.sx-search-sm .sx-search-field-wrapper { min-height: 32px; }
+	.sx-search-sm .sx-search-input { font-size: var(--sx-text-xs); padding: var(--sx-space-1) var(--sx-space-2); }
+	.sx-search-md .sx-search-field-wrapper { min-height: 40px; }
+	.sx-search-lg .sx-search-field-wrapper { min-height: 48px; }
+	.sx-search-lg .sx-search-input { font-size: var(--sx-text-base); padding: var(--sx-space-3) var(--sx-space-4); }
+
+	.sx-search-loading {
+		display: flex;
+		align-items: center;
+		padding-right: var(--sx-space-3);
+		color: var(--sx-color-primary);
+	}
+
+	.sx-search-spinner {
+		animation: sx-spin-search 0.8s linear infinite;
+	}
+
+	@keyframes sx-spin-search {
+		to { transform: rotate(360deg); }
+	}
+
+	.sx-search-clear {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 28px;
+		height: 28px;
+		padding: 0;
+		margin-right: var(--sx-space-1);
+		border: none;
+		border-radius: var(--sx-radius-sm);
+		background: transparent;
+		color: var(--sx-color-text-secondary);
+		cursor: pointer;
+		transition: background var(--sx-transition-fast), color var(--sx-transition-fast);
+	}
+
+	.sx-search-clear:hover {
+		background: var(--sx-color-surface-2);
+		color: var(--sx-color-text);
+	}
+
+	/* Footer */
+	.sx-search-footer {
+		min-height: 1.25rem;
+	}
+
+	.sx-search-error {
+		font-size: var(--sx-text-xs);
+		font-weight: 500;
+		color: var(--sx-color-red);
+		margin: 0;
+	}
+
+	.sx-search-hint {
+		font-size: var(--sx-text-xs);
+		color: var(--sx-color-text-secondary);
+		margin: 0;
+	}
+
+	/* Dropdown panel */
+	.sx-search-panel {
+		z-index: var(--sx-z-dropdown);
+		overflow-y: auto;
+		overflow-x: hidden;
+		background: var(--sx-color-surface-2);
+		border: 1px solid var(--sx-color-border-strong);
+		border-radius: var(--sx-radius-md);
+		box-shadow: var(--sx-shadow-lg);
+		backdrop-filter: var(--sx-glass-blur);
+		-webkit-backdrop-filter: var(--sx-glass-blur);
+		outline: none;
+		padding: var(--sx-space-1) 0;
+		font-family: var(--sx-font-body);
+	}
+
+	.sx-search-option {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		padding: var(--sx-space-2) var(--sx-space-4);
+		font-size: var(--sx-text-sm);
+		color: var(--sx-color-text);
+		cursor: pointer;
+		user-select: none;
+		transition: background var(--sx-transition-fast);
+	}
+
+	.sx-search-option-active {
+		background: var(--sx-color-primary-hover);
+		color: var(--sx-color-primary);
+	}
+
+	.sx-search-option-disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+
+	.sx-search-option-label {
+		font-weight: 500;
+	}
+
+	.sx-search-option-desc {
+		font-size: var(--sx-text-xs);
+		color: var(--sx-color-text-secondary);
+	}
+
+	.sx-search-option-active .sx-search-option-desc {
+		color: var(--sx-color-primary);
+		opacity: 0.7;
+	}
+
+	:global(.sx-search-highlight) {
+		background: rgba(255, 107, 53, 0.15);
+		color: var(--sx-color-primary);
+		border-radius: 2px;
+		padding: 0 1px;
+	}
+
+	.sx-search-group-label {
+		padding: var(--sx-space-2) var(--sx-space-4) var(--sx-space-1);
+		font-size: var(--sx-text-xs);
+		font-weight: 600;
+		letter-spacing: 0.05em;
+		text-transform: uppercase;
+		color: var(--sx-color-text-disabled);
+		user-select: none;
+	}
+
+	.sx-search-empty,
+	.sx-search-loading-msg {
+		padding: var(--sx-space-4);
+		text-align: center;
+		font-size: var(--sx-text-sm);
+		color: var(--sx-color-text-disabled);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.sx-search-field-wrapper { transition: none; }
+		.sx-search-focused { animation: none; }
+		.sx-search-spinner { animation: none; }
+		.sx-search-option { transition: none; }
+	}
+</style>