From e16c169f3728467b6f05bd699e1a1ad732b752c7 Mon Sep 17 00:00:00 2001
From: dev <info@activething.com>
Date: Thu, 18 Jun 2026 00:12:40 +0200
Subject: [PATCH] feat(eidos): color-field leading value swatch + full-width
 coherence
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- <ColorField.Input swatch> renders an opt-in leading colour chip showing
  the field's current value, sized to the control icon (--icon-size-{size})
  via a concrete token — never 1em, so it cannot recompute/jitter.
- field-segment-state: drop the active-segment font-weight 600; bold widened
  the ch-based segment ~0.5px, resizing the highlight on every increment. The
  accent background already marks the active segment.
- color-field stays full-width like the whole field/select family — width is
  container-driven, not field-driven (no per-component exception).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../color-field/color-field-input.svelte        |  5 ++++-
 .../components/color-field/color-field.css      | 17 +++++++++++++++++
 .../components/color-field/color-field.svelte   | 11 +++++++++++
 src/uix/eidos/components/color-field/types.ts   |  6 +++++-
 .../components/field/field-segment-state.css    |  4 +++-
 src/uix/eidos/generated/base.css                | 10 +++++-----
 src/uix/eidos/lib/recipes/base.ts               | 13 ++++++++-----
 .../uix/components/color-field/+page.svelte     |  2 +-
 8 files changed, 54 insertions(+), 14 deletions(-)

diff --git a/src/uix/eidos/components/color-field/color-field-input.svelte b/src/uix/eidos/components/color-field/color-field-input.svelte
index ddaf750e5..91cf638ec 100644
--- a/src/uix/eidos/components/color-field/color-field-input.svelte
+++ b/src/uix/eidos/components/color-field/color-field-input.svelte
@@ -2,11 +2,14 @@
 	import * as ColorField from '$soma/components/color-field';
 	import type { ColorFieldInputProps, ColorFieldInputSnippetProps } from './types';
 
-	let { children: bodyContent, ...rest }: ColorFieldInputProps = $props();
+	let { children: bodyContent, swatch = false, ...rest }: ColorFieldInputProps = $props();
 </script>
 
 <ColorField.Input {...rest}>
 	{#snippet children(args: ColorFieldInputSnippetProps)}
+		{#if swatch}
+			<span data-color-field-swatch aria-hidden="true"></span>
+		{/if}
 		{@render bodyContent?.(args)}
 	{/snippet}
 </ColorField.Input>
diff --git a/src/uix/eidos/components/color-field/color-field.css b/src/uix/eidos/components/color-field/color-field.css
index fdab3b2d3..7ad470687 100644
--- a/src/uix/eidos/components/color-field/color-field.css
+++ b/src/uix/eidos/components/color-field/color-field.css
@@ -182,6 +182,23 @@
 	min-inline-size: calc(6ch + 2 * var(--_color-field-segment-px));
 }
 
+/* Leading value swatch (opt-in via <ColorField.Input swatch>). Sized to the
+   control icon for this field size via the `--_color-field-swatch-size` token
+   (= `--icon-size-{size}`) — a CONCRETE length, not `1em`, so it can never
+   recompute/jitter on re-render. The colour comes from --cf-swatch-color, set
+   on the root from the field value. Inset border keeps light colours visible. */
+[data-color-field-swatch] {
+	flex: 0 0 auto;
+	inline-size: var(--_color-field-swatch-size);
+	block-size: var(--_color-field-swatch-size);
+	/* Shares the field's own corner radius token (no hand-rolled calc) so it
+	   tracks the field and reads as part of the same control. */
+	border-radius: var(--color-field-radius);
+	background: var(--cf-swatch-color, transparent);
+	box-shadow: inset 0 0 0 var(--border-width) var(--color-border-subtle);
+	margin-inline-end: var(--_color-field-segment-px);
+}
+
 [data-color-field-segment][data-placeholder] {
 	color: var(--color-field-placeholder-color);
 }
diff --git a/src/uix/eidos/components/color-field/color-field.svelte b/src/uix/eidos/components/color-field/color-field.svelte
index 203e0e567..3d6d04d5d 100644
--- a/src/uix/eidos/components/color-field/color-field.svelte
+++ b/src/uix/eidos/components/color-field/color-field.svelte
@@ -11,12 +11,22 @@
 		value = $bindable(),
 		placeholder = $bindable(),
 		format = $bindable(),
+		style,
 		children: bodyContent,
 		...rest
 	}: ColorFieldProps = $props();
 
 	const eidos = ActiveEidos.require();
 	const resolvedSize = $derived(eidos.resolve(size, 'md'));
+	// Publish the current colour as a CSS var on the root so a leading
+	// <ColorField.Input swatch> can preview it (inherits the var). Falls back to
+	// the placeholder colour, else unset (swatch renders transparent).
+	const swatchColor = $derived(value?.hex ?? placeholder?.hex);
+	const rootStyle = $derived(
+		[style, swatchColor && `--cf-swatch-color: ${swatchColor}`]
+			.filter(Boolean)
+			.join('; ') || undefined
+	);
 </script>
 
 <ColorField.Provider
@@ -24,6 +34,7 @@
 	bind:value
 	bind:placeholder
 	bind:format
+	style={rootStyle}
 	data-size={resolvedSize}
 	data-variant={variant}
 	data-color={color}
diff --git a/src/uix/eidos/components/color-field/types.ts b/src/uix/eidos/components/color-field/types.ts
index 882694cb2..25f6fc925 100644
--- a/src/uix/eidos/components/color-field/types.ts
+++ b/src/uix/eidos/components/color-field/types.ts
@@ -26,7 +26,11 @@ export type ColorFieldProps = ProviderProps & {
 }
 
 export type ColorFieldLabelProps = LabelProps
-export type ColorFieldInputProps = InputProps
+export type ColorFieldInputProps = InputProps & {
+	/** Show a leading swatch of the field's current colour, sized like the
+	 *  control icon (`1em`). The colour tracks the field value. @default false */
+	swatch?: boolean
+}
 export type ColorFieldSegmentProps = SegmentProps
 export type ColorFieldFormatSelectProps = FormatSelectProps
 export type ColorFieldHiddenInputProps = HiddenInputProps
diff --git a/src/uix/eidos/components/field/field-segment-state.css b/src/uix/eidos/components/field/field-segment-state.css
index 8f692cd0a..fb9b26e06 100644
--- a/src/uix/eidos/components/field/field-segment-state.css
+++ b/src/uix/eidos/components/field/field-segment-state.css
@@ -35,8 +35,10 @@
 
 [data-field-segment]:focus,
 [data-field-segment]:focus-visible {
+	/* NO font-weight change: bold widens the ch-based segment width (~0.5px),
+	   so the active segment — a coloured highlight rectangle — would resize on
+	   every increment. The accent background already marks the active segment. */
 	background: var(--field-segment-active-bg);
 	color: var(--field-segment-active-text);
-	font-weight: 600;
 	outline: none;
 }
diff --git a/src/uix/eidos/generated/base.css b/src/uix/eidos/generated/base.css
index 8cd5463a9..173e32f16 100644
--- a/src/uix/eidos/generated/base.css
+++ b/src/uix/eidos/generated/base.css
@@ -1525,11 +1525,11 @@
 	--color-field-segment-readonly-color: var(--color-content-secondary);
 	--color-field-segment-readonly-decoration: underline dotted var(--color-content-muted);
 	--color-field-segment-focus-shadow: inset 0 0 0 var(--border-width) var(--_color-field-accent-border);
-	--color-field-swatch-size-xs: calc(var(--control-height-xs) - var(--space-2));
-	--color-field-swatch-size-sm: calc(var(--control-height-sm) - var(--space-2));
-	--color-field-swatch-size-md: calc(var(--control-height-md) - var(--space-2));
-	--color-field-swatch-size-lg: calc(var(--control-height-lg) - var(--space-2));
-	--color-field-swatch-size-xl: calc(var(--control-height-xl) - var(--space-2));
+	--color-field-swatch-size-xs: var(--icon-size-xs);
+	--color-field-swatch-size-sm: var(--icon-size-sm);
+	--color-field-swatch-size-md: var(--icon-size-md);
+	--color-field-swatch-size-lg: var(--icon-size-lg);
+	--color-field-swatch-size-xl: var(--icon-size-xl);
 	--color-field-format-select-color: var(--color-content-secondary);
 	--color-field-format-select-bg: transparent;
 	--color-field-format-select-radius: var(--radius-sm);
diff --git a/src/uix/eidos/lib/recipes/base.ts b/src/uix/eidos/lib/recipes/base.ts
index 7bd706f2b..e5bb6de4c 100644
--- a/src/uix/eidos/lib/recipes/base.ts
+++ b/src/uix/eidos/lib/recipes/base.ts
@@ -1353,11 +1353,14 @@ export const THEME_BASE_RECIPE_TOKENS = {
 		'segment-readonly-color': 'var(--color-content-secondary)',
 		'segment-readonly-decoration': 'underline dotted var(--color-content-muted)',
 		'segment-focus-shadow': 'inset 0 0 0 var(--border-width) var(--_color-field-accent-border)',
-		'swatch-size-xs': 'calc(var(--control-height-xs) - var(--space-2))',
-		'swatch-size-sm': 'calc(var(--control-height-sm) - var(--space-2))',
-		'swatch-size-md': 'calc(var(--control-height-md) - var(--space-2))',
-		'swatch-size-lg': 'calc(var(--control-height-lg) - var(--space-2))',
-		'swatch-size-xl': 'calc(var(--control-height-xl) - var(--space-2))',
+		// Leading value swatch: exactly the control icon size for this field size
+		// (user spec: "del mismo tamaño que los iconos del control"). A concrete
+		// length per size — never `1em` — so it can't recompute on re-render.
+		'swatch-size-xs': 'var(--icon-size-xs)',
+		'swatch-size-sm': 'var(--icon-size-sm)',
+		'swatch-size-md': 'var(--icon-size-md)',
+		'swatch-size-lg': 'var(--icon-size-lg)',
+		'swatch-size-xl': 'var(--icon-size-xl)',
 		'format-select-color': 'var(--color-content-secondary)',
 		'format-select-bg': 'transparent',
 		'format-select-radius': 'var(--radius-sm)',
diff --git a/web/routes/uix/components/color-field/+page.svelte b/web/routes/uix/components/color-field/+page.svelte
index e6acbf792..c4e5cd86f 100644
--- a/web/routes/uix/components/color-field/+page.svelte
+++ b/web/routes/uix/components/color-field/+page.svelte
@@ -264,7 +264,7 @@
 					{color}
 				>
 					{#if showLabel}<ColorField.Label>{labelText}</ColorField.Label>{/if}
-					<ColorField.Input {name} aria-label={ariaLabel}>
+					<ColorField.Input {name} aria-label={ariaLabel} swatch>
 						{#snippet children({ segments }: InputSnippetProps)}
 							{#each segments as { part, value }, index (`${part}-${index}`)}
 								<ColorField.Segment {part}>{value}</ColorField.Segment>