From 5d316459397d552b9866c07dac388ee2160499f8 Mon Sep 17 00:00:00 2001
From: dev <info@activething.com>
Date: Thu, 21 May 2026 01:49:43 +0200
Subject: [PATCH] search-field demo: clear button is an X icon, not a word

The clear affordance is the standard search-input pattern: an X glyph
inside the input, with the localized "Clear" / "Borrar" string moved
to `aria-label`. Showing the word "Borrar" inline and then a hover
button on top read as two redundant affordances.

Replaced the visible text with `<X size="1em" decorative />` from the
icon set. The aria-label still pulls from
`'#?components.search-field.clear|Clear'` so screen readers get the
localized affordance name.

Code snippets in the API panel updated to match the new pattern
(`<SearchField.ClearTrigger aria-label="Clear"><X ... /></...>`)
instead of the text-only variant.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 web/routes/uix/components/search-field/+page.svelte | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/web/routes/uix/components/search-field/+page.svelte b/web/routes/uix/components/search-field/+page.svelte
index eac5bc40a..d523faf82 100644
--- a/web/routes/uix/components/search-field/+page.svelte
+++ b/web/routes/uix/components/search-field/+page.svelte
@@ -5,6 +5,7 @@
 		type SearchFieldSize,
 		type SearchFieldVariant
 	} from '$uix/eidos/components/search-field';
+	import { X } from '$uix/eidos/components/icon';
 	import { compileMorfo } from '$uix/morfo';
 	import { searchFieldMorfo } from '@/uix/morfo/components/search-field';
 	import { getActiveUix } from '$active-uix';
@@ -83,7 +84,7 @@
 			'',
 			'<SearchField.Provider bind:value placeholder="Search components">',
 			'  <SearchField.Input />',
-			'  <SearchField.ClearTrigger>Clear</SearchField.ClearTrigger>',
+			'  <SearchField.ClearTrigger aria-label="Clear"><X size="1em" decorative /></SearchField.ClearTrigger>',
 			'</SearchField.Provider>'
 		].join('\n')
 	);
@@ -100,7 +101,7 @@
 			color !== 'primary' && `  color="${color}"`,
 			'>',
 			'  <SearchField.Input />',
-			'  <SearchField.ClearTrigger>Clear</SearchField.ClearTrigger>',
+			'  <SearchField.ClearTrigger aria-label="Clear"><X size="1em" decorative /></SearchField.ClearTrigger>',
 			'</SearchField>'
 		]
 			.filter(Boolean)
@@ -145,8 +146,10 @@
 					onClear={() => (lastSubmit = 'cleared')}
 				>
 					<SearchField.Input />
-					<SearchField.ClearTrigger>
-						{uix.langs.ts('#?components.search-field.clear|Clear')}
+					<SearchField.ClearTrigger
+						aria-label={uix.langs.ts('#?components.search-field.clear|Clear')}
+					>
+						<X size="1em" decorative />
 					</SearchField.ClearTrigger>
 				</SearchField>
 			</div>