Add search field provider coverage

continue.md

@@ -101,9 +101,11 @@ Actualizacion 2026-05-15:
     de grupo, focus/blur, disabled y partes trigger/content/arrow.
   - Cobertura nueva para Field: wiring de partes/ARIA, input guardado por
     disabled/readonly e integración con parent Form.
+  - Cobertura nueva para SearchField: props root/input/clear, input/submit/
+    clear, foco y OR-merge con Field.
   - Validado por fase:
     - `npm run check` -> 0 errores, 0 warnings.
-    - `npm run test` -> 211 archivos, 2181 tests OK.
+    - `npm run test` -> 212 archivos, 2184 tests OK.
     - tests focales de Select/Popover/Toast/RangeCalendar -> 11 tests OK.
     - tests focales Dialog/Drawer/Popover/Select -> 10 tests OK.
     - `command-provider.svelte.test.ts` -> 2 tests OK.
@@ -143,6 +145,7 @@ Actualizacion 2026-05-15:
     - `clipboard-provider.svelte.test.ts` -> 2 tests OK.
     - `tooltip-provider.svelte.test.ts` -> 3 tests OK.
     - `field-provider.svelte.test.ts` -> 3 tests OK.
+    - `search-field-provider.svelte.test.ts` -> 3 tests OK.
     - guardia `rg "from './.*provider\\.svelte'" src/uix/soma/components -g 'exports.ts'`
       -> solo queda `select/components/select-provider.svelte`, que es wrapper
       publico, no runtime provider.

src/uix/soma/SOMA_ARCHITECTURE.md

@@ -533,6 +533,8 @@ Los tests por componente estan creciendo desde las piezas de mayor riesgo. A
   skip-delay de grupo, focus/blur, disabled y partes trigger/content/arrow.
 - `field/field-provider.svelte.test.ts` — wiring de partes/ARIA, input
   guardado por disabled/readonly e integración con parent Form.
+- `search-field/search-field-provider.svelte.test.ts` — props root/input/clear,
+  input/submit/clear, foco y OR-merge con Field.
 
 Pendiente: seguir ampliando cobertura por el resto del catalogo Soma, ya por
 componentes de riesgo medio y familias menos centrales. `table-core`,

src/uix/soma/components/search-field/search-field-provider.svelte.test.ts

@@ -0,0 +1,252 @@
+// @vitest-environment jsdom
+
+import { tick } from 'svelte';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { createActiveDom } from '$adom';
+import { state } from '$libs/reactive';
+import type { Morfo } from '$uix/morfo';
+import { Soma } from '$soma/core/soma.svelte';
+import { createSomaRuntime, type SomaRuntimeSources } from '$soma/runtime.svelte';
+import { FieldProvider } from '../field/field-provider.svelte';
+
+import {
+	SearchFieldClearTriggerProvider,
+	SearchFieldInputProvider,
+	SearchFieldProvider
+} from './search-field-provider.svelte';
+
+function withEffectRoot<T>(fn: () => T): { result: T; cleanup: () => void } {
+	let result!: T;
+	const cleanup = $effect.root(() => {
+		result = fn();
+	});
+	return { result, cleanup };
+}
+
+function installSomaHarness() {
+	const dom = createActiveDom();
+	const soma = {
+		dom,
+		langs: {
+			ts: vi.fn((key: string) => (key.includes('clear') ? 'Clear search' : 'Search'))
+		},
+		runtime: (morfo: Morfo, sources: Omit<SomaRuntimeSources, 'dom' | 'eventEngine'>) =>
+			createSomaRuntime(morfo, {
+				dom,
+				translate: (key) => key,
+				...sources
+			})
+	} as unknown as Soma;
+
+	vi.spyOn(Soma, 'require').mockReturnValue(soma);
+	vi.spyOn(SearchFieldProvider.ctx, 'set').mockImplementation((value) => value);
+	vi.spyOn(FieldProvider, 'get').mockReturnValue(undefined);
+
+	return { dom };
+}
+
+function searchOpts(root = document.createElement('div')) {
+	return {
+		id: state('search-root'),
+		ref: state<HTMLElement | null>(root),
+		inputId: state('search-input'),
+		value: state(''),
+		disabled: state(false),
+		readonly: state(false),
+		required: state(false),
+		invalid: state(false),
+		name: state<string | undefined>('query'),
+		placeholder: state<string | undefined>('Find'),
+		clearOnEscape: state(true),
+		ariaLabel: state<string | undefined>(undefined),
+		onValueChange: state<((value: string) => void) | undefined>(undefined),
+		onSubmit: state<((value: string) => void) | undefined>(undefined),
+		onClear: state<(() => void) | undefined>(undefined)
+	};
+}
+
+function keyEvent(key: string) {
+	return {
+		key,
+		preventDefault: vi.fn()
+	};
+}
+
+describe('SearchFieldProvider', () => {
+	afterEach(() => {
+		vi.restoreAllMocks();
+		document.body.innerHTML = '';
+	});
+
+	it('exposes root/input/clear props and projects root state attrs', async () => {
+		const { dom } = installSomaHarness();
+		const root = document.createElement('div');
+		const inputEl = document.createElement('input');
+		const clearEl = document.createElement('button');
+		document.body.append(root, inputEl, clearEl);
+		const opts = searchOpts(root);
+		opts.required.current = true;
+		opts.invalid.current = true;
+
+		const { result, cleanup } = withEffectRoot(() => {
+			const provider = SearchFieldProvider.create(opts);
+			vi.spyOn(SearchFieldProvider, 'require').mockReturnValue(provider);
+			const input = SearchFieldInputProvider.create({
+				id: state('search-input'),
+				ref: state<HTMLElement | null>(inputEl)
+			});
+			const clear = SearchFieldClearTriggerProvider.create({
+				id: state('search-clear'),
+				ref: state<HTMLElement | null>(clearEl),
+				ariaLabel: state<string | undefined>(undefined)
+			});
+			return { provider, input, clear };
+		});
+
+		expect(result.provider.props).toMatchObject({
+			id: 'search-root',
+			'data-search-field': ''
+		});
+		expect(result.input.props).toMatchObject({
+			id: 'search-input',
+			'data-search-field-input': '',
+			type: 'search',
+			role: 'searchbox',
+			value: '',
+			name: 'query',
+			placeholder: 'Find',
+			required: true,
+			'aria-label': 'Search',
+			'aria-invalid': true
+		});
+		expect(result.clear.props).toMatchObject({
+			id: 'search-clear',
+			'data-search-field-clear-trigger': '',
+			type: 'button',
+			'aria-label': 'Clear search',
+			disabled: true,
+			tabindex: -1
+		});
+
+		await tick();
+		expect(root.getAttribute('data-required')).toBe('');
+		expect(root.getAttribute('data-invalid')).toBe('');
+		expect(root.getAttribute('data-empty')).toBe('');
+
+		result.input.props.onfocus({ currentTarget: inputEl } as never);
+		await tick();
+		expect(result.provider.snippetProps.isFocused).toBe(true);
+		expect(root.getAttribute('data-focused')).toBe('');
+
+		result.input.props.onblur({ currentTarget: inputEl } as never);
+		await tick();
+		expect(result.provider.snippetProps.isFocused).toBe(false);
+		expect(root.hasAttribute('data-focused')).toBe(false);
+
+		cleanup();
+		dom.dispose();
+	});
+
+	it('commits input, submits on Enter and clears on Escape/click', async () => {
+		const { dom } = installSomaHarness();
+		const focusSpy = vi.spyOn(dom, 'focus');
+		const root = document.createElement('div');
+		const inputEl = document.createElement('input');
+		const clearEl = document.createElement('button');
+		document.body.append(root, inputEl, clearEl);
+		const opts = searchOpts(root);
+		opts.value.current = 'abc';
+		const onValueChange = vi.fn();
+		const onSubmit = vi.fn();
+		const onClear = vi.fn();
+		opts.onValueChange.current = onValueChange;
+		opts.onSubmit.current = onSubmit;
+		opts.onClear.current = onClear;
+
+		const { result, cleanup } = withEffectRoot(() => {
+			const provider = SearchFieldProvider.create(opts);
+			vi.spyOn(SearchFieldProvider, 'require').mockReturnValue(provider);
+			const input = SearchFieldInputProvider.create({
+				id: state('search-input'),
+				ref: state<HTMLElement | null>(inputEl)
+			});
+			const clear = SearchFieldClearTriggerProvider.create({
+				id: state('search-clear'),
+				ref: state<HTMLElement | null>(clearEl),
+				ariaLabel: state<string | undefined>(undefined)
+			});
+			provider.setInputRef(inputEl);
+			return { provider, input, clear };
+		});
+
+		inputEl.value = 'abcd';
+		result.input.props.oninput({
+			currentTarget: inputEl,
+			preventDefault: vi.fn()
+		} as never);
+		expect(opts.value.current).toBe('abcd');
+		expect(onValueChange).toHaveBeenCalledWith('abcd');
+
+		const enter = keyEvent('Enter');
+		result.input.props.onkeydown(enter as never);
+		expect(enter.preventDefault).toHaveBeenCalledOnce();
+		expect(onSubmit).toHaveBeenCalledWith('abcd');
+
+		const escape = keyEvent('Escape');
+		result.input.props.onkeydown(escape as never);
+		expect(escape.preventDefault).toHaveBeenCalledOnce();
+		expect(opts.value.current).toBe('');
+		expect(onValueChange).toHaveBeenLastCalledWith('');
+		expect(onClear).toHaveBeenCalledOnce();
+		expect(focusSpy).toHaveBeenCalledWith(inputEl);
+
+		opts.value.current = 'again';
+		result.clear.props.onclick({ currentTarget: clearEl } as never);
+		expect(opts.value.current).toBe('');
+		expect(onClear).toHaveBeenCalledTimes(2);
+
+		cleanup();
+		dom.dispose();
+	});
+
+	it('OR-merges enclosing Field flags and labelling', () => {
+		const { dom } = installSomaHarness();
+		const field = {
+			inputId: state(''),
+			labelId: state('field-label'),
+			helperId: state('field-helper'),
+			errorId: state('field-error'),
+			isDisabled: true,
+			isReadonly: false,
+			isRequired: true,
+			isInvalid: true
+		};
+		vi.spyOn(FieldProvider, 'get').mockReturnValue(field as FieldProvider);
+		const opts = searchOpts();
+
+		const { result, cleanup } = withEffectRoot(() => {
+			const provider = SearchFieldProvider.create(opts);
+			vi.spyOn(SearchFieldProvider, 'require').mockReturnValue(provider);
+			const input = SearchFieldInputProvider.create({
+				id: state('search-input'),
+				ref: state<HTMLElement | null>(document.createElement('input'))
+			});
+			return { input };
+		});
+
+		expect(field.inputId.current).toBe('search-input');
+		expect(result.input.props).toMatchObject({
+			disabled: true,
+			required: true,
+			'aria-label': undefined,
+			'aria-labelledby': 'field-label',
+			'aria-invalid': true,
+			'aria-describedby': 'field-helper field-error',
+			'data-disabled': ''
+		});
+
+		cleanup();
+		dom.dispose();
+	});
+});