diff --git a/src/uix/eidos/components/color-field/color-field.css b/src/uix/eidos/components/color-field/color-field.css
index 822b84d44..fdab3b2d3 100644
--- a/src/uix/eidos/components/color-field/color-field.css
+++ b/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);
 }
diff --git a/src/uix/eidos/components/date-range-picker/date-range-picker-segment.svelte b/src/uix/eidos/components/date-range-picker/date-range-picker-segment.svelte
index bd7f31c70..9480812e0 100644
--- a/src/uix/eidos/components/date-range-picker/date-range-picker-segment.svelte
+++ b/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>
diff --git a/src/uix/eidos/components/date-range-picker/date-range-picker.css b/src/uix/eidos/components/date-range-picker/date-range-picker.css
index c2db3996f..90f4e5cdc 100644
--- a/src/uix/eidos/components/date-range-picker/date-range-picker.css
+++ b/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);
diff --git a/src/uix/eidos/components/time-field/time-field.css b/src/uix/eidos/components/time-field/time-field.css
index 17d79b015..446db0c5d 100644
--- a/src/uix/eidos/components/time-field/time-field.css
+++ b/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);
diff --git a/src/uix/eidos/generated/base.css b/src/uix/eidos/generated/base.css
index 7a551fb87..8cd5463a9 100644
--- a/src/uix/eidos/generated/base.css
+++ b/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);
diff --git a/src/uix/eidos/lib/recipes/base.ts b/src/uix/eidos/lib/recipes/base.ts
index 3ff5e0924..7bd706f2b 100644
--- a/src/uix/eidos/lib/recipes/base.ts
+++ b/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)',