fix(engine): editorial defaults audit

packages/engine/src/__tests__/__snapshots__/compile-snapshot.test.ts.snap

@@ -231,6 +231,7 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
           "fill": "#ffffff",
           "fontFamily": "system-ui, -apple-system, sans-serif",
           "fontSize": 11,
+          "fontVariant": "tabular-nums",
           "fontWeight": 600,
           "lineHeight": 1.2,
           "textAnchor": "end",
@@ -264,6 +265,7 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
           "fill": "#ffffff",
           "fontFamily": "system-ui, -apple-system, sans-serif",
           "fontSize": 11,
+          "fontVariant": "tabular-nums",
           "fontWeight": 600,
           "lineHeight": 1.2,
           "textAnchor": "end",
@@ -297,6 +299,7 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
           "fill": "#ffffff",
           "fontFamily": "system-ui, -apple-system, sans-serif",
           "fontSize": 11,
+          "fontVariant": "tabular-nums",
           "fontWeight": 600,
           "lineHeight": 1.2,
           "textAnchor": "end",
@@ -868,6 +871,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
       "fill": "#71717a",
       "fontFamily": ""Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif",
       "fontSize": 12,
+      "fontVariant": "tabular-nums",
       "fontWeight": 400,
       "lineHeight": 1.25,
     },
@@ -1800,6 +1804,7 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
           "fill": "#0000ff",
           "fontFamily": "system-ui, -apple-system, sans-serif",
           "fontSize": 10,
+          "fontVariant": "tabular-nums",
           "fontWeight": 600,
           "lineHeight": 1.2,
           "textAnchor": "middle",
@@ -1844,6 +1849,7 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
           "fill": "#0000ff",
           "fontFamily": "system-ui, -apple-system, sans-serif",
           "fontSize": 10,
+          "fontVariant": "tabular-nums",
           "fontWeight": 600,
           "lineHeight": 1.2,
           "textAnchor": "middle",
@@ -1888,6 +1894,7 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
           "fill": "#0000ff",
           "fontFamily": "system-ui, -apple-system, sans-serif",
           "fontSize": 10,
+          "fontVariant": "tabular-nums",
           "fontWeight": 600,
           "lineHeight": 1.2,
           "textAnchor": "middle",
@@ -1932,6 +1939,7 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
           "fill": "#0000ff",
           "fontFamily": "system-ui, -apple-system, sans-serif",
           "fontSize": 10,
+          "fontVariant": "tabular-nums",
           "fontWeight": 600,
           "lineHeight": 1.2,
           "textAnchor": "middle",

packages/engine/src/__tests__/axes.test.ts

@@ -668,9 +668,10 @@ describe('axis config properties', () => {
     const scales = computeScales(lineSpec, chartArea, lineSpec.data);
     const axes = computeAxes(scales, chartArea, fullStrategy, theme);
 
-    // All new properties should be undefined when not set
+    // All new properties should be undefined when not set (except domainLine,
+    // which defaults to false for non-grounded marks like line)
     expect(axes.x!.orient).toBeUndefined();
-    expect(axes.x!.domainLine).toBeUndefined();
+    expect(axes.x!.domainLine).toBe(false);
     expect(axes.x!.tickMarks).toBeUndefined();
     expect(axes.x!.offset).toBeUndefined();
     expect(axes.x!.titlePadding).toBeUndefined();

packages/engine/src/barlist/compile-barlist.ts

@@ -258,6 +258,7 @@ export function compileBarList(spec: unknown, options: CompileOptions): BarListL
       fontWeight: VALUE_FONT_WEIGHT,
       fill: valueColor,
       lineHeight: 1.4,
+      fontVariant: 'tabular-nums',
     };
 
     const rowMark: BarListRowMark = {

packages/engine/src/charts/bar/labels.ts

@@ -227,6 +227,7 @@ export function computeBarLabels(
         lineHeight: 1.2,
         textAnchor,
         dominantBaseline: 'central',
+        fontVariant: 'tabular-nums',
       },
     });
   }

packages/engine/src/charts/column/labels.ts

@@ -123,6 +123,7 @@ export function computeColumnLabels(
         fill: labelColor ?? getRepresentativeColor(mark.fill),
         lineHeight: 1.2,
         textAnchor: 'middle',
+        fontVariant: 'tabular-nums',
       },
     });
   }

packages/engine/src/charts/dot/labels.ts

@@ -99,6 +99,7 @@ export function computeDotLabels(
         lineHeight: 1.2,
         textAnchor: 'start',
         dominantBaseline: 'central',
+        fontVariant: 'tabular-nums',
       },
     });
   }

packages/engine/src/charts/pie/labels.ts

@@ -99,6 +99,7 @@ export function computePieLabels(
         lineHeight: 1.2,
         textAnchor: isRight ? 'start' : 'end',
         dominantBaseline: 'central',
+        fontVariant: 'tabular-nums',
       },
     });
 

packages/engine/src/endpoint-labels/compute.ts

@@ -68,6 +68,7 @@ function emptyLayout(theme: ResolvedTheme): EndpointLabelsLayout {
     fontWeight: ENDPOINT_VALUE_FONT_WEIGHT,
     fill: theme.colors.annotationText ?? theme.colors.text,
     lineHeight: ENDPOINT_LINE_HEIGHT,
+    fontVariant: 'tabular-nums',
   };
   return {
     entries: [],
@@ -271,6 +272,7 @@ export function computeEndpointLabels(
     fontWeight: ENDPOINT_VALUE_FONT_WEIGHT,
     fill: theme.colors.annotationText ?? theme.colors.text,
     lineHeight: ENDPOINT_LINE_HEIGHT,
+    fontVariant: 'tabular-nums',
   };
 
   // First pass: build entries with wrapped labels and dataY (no positions yet).

packages/engine/src/layout/axes.ts

@@ -73,6 +73,9 @@ const WIDTH_REDUCED_THRESHOLD = 300;
 /** Ordered densities from most to fewest ticks. */
 const DENSITY_ORDER: AxisLabelDensity[] = ['full', 'reduced', 'minimal'];
 
+/** Marks grounded on the x baseline that warrant a domain line. */
+const GROUNDED_MARKS = new Set(['bar', 'tick', 'lollipop']);
+
 /**
  * Compute effective axis tick density by considering available space.
  *
@@ -460,17 +463,20 @@ export function computeAxes(
     // because tick labels need horizontal room around their x position).
     const xTickPosition = axisConfig?.tickPosition ?? 'gutter';
 
+    const xDomainLine =
+      axisConfig?.domain ?? (GROUNDED_MARKS.has(dataContext?.markType ?? '') ? undefined : false);
+
     result.x = {
       ticks,
-      gridlines: axisConfig?.grid ? gridlines : [],
+      gridlines: (axisConfig?.grid ?? dataContext?.markType === 'point') ? gridlines : [],
       label: axisTitle,
       labelStyle: xLabelColor ? { ...axisLabelStyle, fill: xLabelColor } : axisLabelStyle,
       tickLabelStyle: xLabelColor ? { ...tickLabelStyle, fill: xLabelColor } : tickLabelStyle,
       tickAngle,
       start: { x: chartArea.x, y: chartArea.y + chartArea.height },
       end: { x: chartArea.x + chartArea.width, y: chartArea.y + chartArea.height },
       orient: axisConfig?.orient,
-      domainLine: axisConfig?.domain,
+      domainLine: xDomainLine,
       tickMarks: axisConfig?.ticks,
       offset: axisConfig?.offset,
       titlePadding: axisConfig?.titlePadding,

packages/vanilla/src/__tests__/svg-renderer.test.ts

@@ -525,16 +525,22 @@ describe('axis rendering', () => {
     expect(labels.length).toBeGreaterThan(0);
   });
 
-  it('x-axis has a baseline line element', () => {
-    const { svg } = renderSpec(lineSpec);
+  it('x-axis has a baseline line element for grounded marks', () => {
+    const { svg } = renderSpec(barSpec);
     const xAxis = svg.querySelector('.oc-axis-x');
     const line = xAxis!.querySelector('line');
-    // The renderer draws an axis line for x-axis
     expect(line).not.toBeNull();
   });
 
+  it('x-axis hides baseline for non-grounded marks', () => {
+    const { svg } = renderSpec(lineSpec);
+    const xAxis = svg.querySelector('.oc-axis-x');
+    const line = xAxis!.querySelector('line');
+    expect(line).toBeNull();
+  });
+
   it('x-tick labels hang below the axis line by the label padding (no hugging)', () => {
-    const { svg, layout } = renderSpec(lineSpec);
+    const { svg, layout } = renderSpec(barSpec);
     const xAxis = svg.querySelector('.oc-axis-x')!;
     const axisLineY = Number(xAxis.querySelector('line')!.getAttribute('y2'));
     const labels = Array.from(xAxis.querySelectorAll('text.oc-axis-tick'));