fix(eidos): resolve segment-min-width orphan; color 3ch / hex 6ch segment width

The prior commit (e0bb7ed5) migrated date-field's segment to a calc() width but
left date-range-picker still consuming --date-field-segment-min-width, orphaning
the token (recipe-css-contract failure that wasn't re-run before committing).
Decouple + complete the segment-width pass:

- color-field: channels 3ch (RGB 0-255 / HSL 0-360 / 0-100 / alpha), hex 6ch
  (data-segment='hex' override) — fixed font-relative widths + tabular figures
  so no segment reflows on 1<->2<->3 digit or glyph changes.
- time-field + date-range-picker: segment min-inline-size -> calc(2ch + 2*pad).
- date-range-picker segment now carries data-field-segment (tabular + shared
  hover/active states from the field-segment-state layer).
- Remove the now-unused --{date,time,color}-field-segment-min-width recipe tokens.

recipe-css-contract green (only pre-existing palabras WIP). CSS / token / marker
changes only -> check stays at the 58 baseline.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/uix/eidos/components/color-field/color-field.css

@@ -154,7 +154,10 @@
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
-	min-inline-size: var(--color-field-segment-min-width);
+	/* Channels (RGB 0-255 / HSL 0-360 / 0-100 / alpha) are at most 3 digits →
+	   fixed 3ch so they don't reflow 99 → 100. Hex (6 chars) overridden below.
+	   Font-relative + tabular figures (shared field-segment-state layer). */
+	min-inline-size: calc(3ch + 2 * var(--_color-field-segment-px));
 	block-size: var(--color-field-segment-height);
 	padding-inline: var(--_color-field-segment-px);
 	border-radius: var(--color-field-segment-radius);
@@ -174,6 +177,11 @@
 	color: var(--color-field-literal-color);
 }
 
+/* Hex is always 6 chars (RRGGBB) — wider than the 3ch channel default. */
+[data-color-field-segment][data-segment='hex'] {
+	min-inline-size: calc(6ch + 2 * var(--_color-field-segment-px));
+}
+
 [data-color-field-segment][data-placeholder] {
 	color: var(--color-field-placeholder-color);
 }

src/uix/eidos/components/date-range-picker/date-range-picker-segment.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
 	import * as DateRangePicker from '$soma/components/date-range-picker';
+	import '../field/field-segment-state.css';
 	import type { DateRangePickerSegmentProps } from './types';
 
 	let { children, ...rest }: DateRangePickerSegmentProps = $props();
 </script>
 
-<DateRangePicker.Segment {...rest}>
+<DateRangePicker.Segment {...rest} data-field-segment="">
 	{@render children?.()}
 </DateRangePicker.Segment>

src/uix/eidos/components/date-range-picker/date-range-picker.css

@@ -284,7 +284,9 @@
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
-	min-inline-size: var(--date-field-segment-min-width);
+	/* Fixed 2-digit width (font-relative) + tabular figures (shared layer) so the
+	   segment never reflows on 1 → 2 digit / glyph changes. border-box: 2ch + padding. */
+	min-inline-size: calc(2ch + 2 * var(--_date-field-segment-px));
 	block-size: var(--date-field-segment-height);
 	padding-inline: var(--_date-field-segment-px);
 	border-radius: var(--date-field-segment-radius);

src/uix/eidos/components/time-field/time-field.css

@@ -149,7 +149,9 @@
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
-	min-inline-size: var(--time-field-segment-min-width);
+	/* Fixed 2-digit width (font-relative) + tabular figures (shared layer) so the
+	   segment never reflows on 1 → 2 digit / glyph changes. border-box: 2ch + padding. */
+	min-inline-size: calc(2ch + 2 * var(--_time-field-segment-px));
 	block-size: var(--time-field-segment-height);
 	padding-inline: var(--_time-field-segment-px);
 	border-radius: var(--time-field-segment-radius);

src/uix/eidos/generated/base.css

@@ -1419,7 +1419,6 @@
 	--date-field-placeholder-color: var(--color-content-muted);
 	--date-field-literal-color: var(--color-content-muted);
 	--date-field-focus-shadow: inset 0 0 0 var(--focus-ring-inner-width) var(--focus-ring-color), 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
-	--date-field-segment-min-width: 1.5ch;
 	--date-field-segment-height: calc(var(--_date-field-height) - var(--space-2));
 	--date-field-segment-radius: var(--radius-sm);
 	--date-field-segment-color: var(--color-content-primary);
@@ -1469,7 +1468,6 @@
 	--time-field-placeholder-color: var(--color-content-muted);
 	--time-field-literal-color: var(--color-content-muted);
 	--time-field-focus-shadow: inset 0 0 0 var(--focus-ring-inner-width) var(--focus-ring-color), 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
-	--time-field-segment-min-width: 1.5ch;
 	--time-field-segment-height: calc(var(--_time-field-height) - var(--space-2));
 	--time-field-segment-radius: var(--radius-sm);
 	--time-field-segment-color: var(--color-content-primary);
@@ -1519,7 +1517,6 @@
 	--color-field-placeholder-color: var(--color-content-muted);
 	--color-field-literal-color: var(--color-content-muted);
 	--color-field-focus-shadow: inset 0 0 0 var(--focus-ring-inner-width) var(--focus-ring-color), 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
-	--color-field-segment-min-width: 1.5ch;
 	--color-field-segment-height: calc(var(--_color-field-height) - var(--space-2));
 	--color-field-segment-radius: var(--radius-sm);
 	--color-field-segment-color: var(--color-content-primary);

src/uix/eidos/lib/recipes/base.ts

@@ -1241,7 +1241,6 @@ export const THEME_BASE_RECIPE_TOKENS = {
 		'literal-color': 'var(--color-content-muted)',
 		'focus-shadow':
 			'inset 0 0 0 var(--focus-ring-inner-width) var(--focus-ring-color), 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color)',
-		'segment-min-width': '1.5ch',
 		'segment-height': 'calc(var(--_date-field-height) - var(--space-2))',
 		'segment-radius': 'var(--radius-sm)',
 		'segment-color': 'var(--color-content-primary)',
@@ -1294,7 +1293,6 @@ export const THEME_BASE_RECIPE_TOKENS = {
 		'literal-color': 'var(--color-content-muted)',
 		'focus-shadow':
 			'inset 0 0 0 var(--focus-ring-inner-width) var(--focus-ring-color), 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color)',
-		'segment-min-width': '1.5ch',
 		'segment-height': 'calc(var(--_time-field-height) - var(--space-2))',
 		'segment-radius': 'var(--radius-sm)',
 		'segment-color': 'var(--color-content-primary)',
@@ -1347,7 +1345,6 @@ export const THEME_BASE_RECIPE_TOKENS = {
 		'literal-color': 'var(--color-content-muted)',
 		'focus-shadow':
 			'inset 0 0 0 var(--focus-ring-inner-width) var(--focus-ring-color), 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color)',
-		'segment-min-width': '1.5ch',
 		'segment-height': 'calc(var(--_color-field-height) - var(--space-2))',
 		'segment-radius': 'var(--radius-sm)',
 		'segment-color': 'var(--color-content-primary)',