@bytebrand/fe-ui-core-autobahn 1.0.116 → 1.0.117

package/cards/CarRow.tsx

@@ -272,7 +272,7 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
           {facts.map(([ic, v]) => (
             <span key={ic} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, whiteSpace: 'nowrap' }}>
               <Icon name={ic} size={15} color="var(--md-primary)" stroke={1.8} style={{ flex: 'none' }} />
-              <span style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--md-on-surface)' }}>{v}</span>
+              <span className="specstrip-val">{v}</span>
             </span>
           ))}
         </div>

package/cards/cardParts.tsx

@@ -334,7 +334,7 @@ export const EcoLine: React.FunctionComponent<EcoLineProps> = ({ car, style, t }
   if (car.phev) {
     const p = car.phev;
     return (
-      <div style={wrap}>
+      <div className="eco-line" style={wrap}>
         {p.consEl}{' '}
         {t('autobahn:card.eco.phevConsumptionLine', {
           consFuel: p.consFuel,
@@ -347,7 +347,7 @@ export const EcoLine: React.FunctionComponent<EcoLineProps> = ({ car, style, t }
     );
   }
   return (
-    <div style={wrap}>
+    <div className="eco-line" style={wrap}>
       {t('autobahn:card.eco.consumptionLine', { cons: car.cons, co2: car.co2, co2class: car.co2class })}
     </div>
   );

package/data/toAutobahnCar.ts

@@ -96,6 +96,33 @@ function num(v: any): number | undefined {
   return Number.isFinite(n) ? n : undefined;
 }
 
+/** like num(), but 0/negative count as absent — a 0-filled consumption field is
+ *  "no data" (CBD skips zeros on enrichment), never a real figure to print. */
+function pos(v: any): number | undefined {
+  const n = num(v);
+  return n != null && n > 0 ? n : undefined;
+}
+
+/** gas-type fuels whose consumption is measured in kg/100 km (legacy cbdConsumptionUnit set). */
+const KG_FUELS = ['selector_fuel_naturalGas', 'selector_fuel_carGas', 'selector_fuel_hydrogen', 'selector_fuel_ethanol'];
+
+/**
+ * EnVKV combined-consumption label, fuel-aware. Electric cars consume kWh — their
+ * l/100km fields (wltpCombined/consumptionCombined-as-liters) arrive as 0, so the
+ * flat `l/100 km` template printed "0 l/100 km" on every EV; gas/hydrogen cars
+ * measure kg. WLTP figure preferred, else NEDC — same order as before.
+ */
+function consumptionLabel(consumption: any, language?: string): string {
+  const fuel = String(consumption.fuel || '');
+  const electric = fuel === 'selector_fuel_electrical';
+  const val = electric
+    ? pos(consumption.wltpPowerCombined) ?? pos(consumption.consumptionPowerCombined) ?? pos(consumption.consumptionCombined)
+    : pos(consumption.wltpCombined) ?? pos(consumption.consumptionCombined);
+  if (val == null) return '';
+  const unit = electric ? 'kWh/100 km' : KG_FUELS.indexOf(fuel) >= 0 ? 'kg/100 km' : 'l/100 km';
+  return `${val.toLocaleString(localeTag(language))} ${unit}`;
+}
+
 // strike-price ("UVP-Rate"/list-price) eligibility — a separate product rule from the NEU
 // badge's own showNewLabel (which also requires a recent modificationDate; see fe-main's
 // DataTransformers.ts shouldShowNewLabel). Here: as-good-as-new only — mileage under 1,000 km
@@ -371,9 +398,8 @@ export function toAutobahnCar(storeCar: any, deps: ToAutobahnCarDeps = {}): Auto
 
   // --- EnVKV consumption line (REQUIRED on every German car ad) ---
   // Prefer WLTP figures when present (the legacy cards do too), else NEDC.
-  const consVal = num(consumption.wltpCombined) ?? num(consumption.consumptionCombined);
   const co2Val = num(emissions.wltpCo2) ?? num(emissions.co2);
-  const cons = consVal != null ? `${consVal.toLocaleString(localeTag(language))} l/100 km` : '';
+  const cons = consumptionLabel(consumption, language);
   const co2 = co2Val != null ? `${co2Val.toLocaleString(localeTag(language))} g/km` : '';
   const co2class = co2ClassLetter(emissions.wltpEnergyEfficiencyClass);
   const phev = buildPhev(storeCar, language);

package/package.json

@@ -1,30 +1,30 @@
-{
-  "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.116",
-  "description": "auto.de md3 (Autobahn) design system — UI primitives, cards, chrome, VDP modules, theme CSS and locales. Ships raw TypeScript source (like fe-ui-core before it); each consumer's bundler compiles it.",
-  "main": "index.ts",
-  "license": "UNLICENSED",
-  "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
-  },
-  "dependencies": {
-    "@bytebrand/car-schema-selectors": "^2.0.7",
-    "@bytebrand/fe-financing": "^5.14.19",
-    "classnames": "2.2.6",
-    "clsx": "^2.1.1",
-    "d3-format": "1.4.5",
-    "js-cookie": "^2.2.0",
-    "lodash": "^4.17.21",
-    "lucide-react": "^0.288.0",
-    "mobx-react": "^7.6.0",
-    "moment": "^2.29.1",
-    "qs": "^6.6.0",
-    "react-device-detect": "^2.1.2",
-    "react-grid-system": "^5.0.2",
-    "react-lazyload": "^3.2.0",
-    "react-scroll": "^1.9.3",
-    "react-slick": "^0.29.0",
-    "slick-carousel": "1.8.1"
-  }
-}
+{
+  "name": "@bytebrand/fe-ui-core-autobahn",
+  "version": "1.0.117",
+  "description": "auto.de md3 (Autobahn) design system — UI primitives, cards, chrome, VDP modules, theme CSS and locales. Ships raw TypeScript source (like fe-ui-core before it); each consumer's bundler compiles it.",
+  "main": "index.ts",
+  "license": "UNLICENSED",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "@bytebrand/car-schema-selectors": "^2.0.7",
+    "@bytebrand/fe-financing": "^5.14.19",
+    "classnames": "2.2.6",
+    "clsx": "^2.1.1",
+    "d3-format": "1.4.5",
+    "js-cookie": "^2.2.0",
+    "lodash": "^4.17.21",
+    "lucide-react": "^0.288.0",
+    "mobx-react": "^7.6.0",
+    "moment": "^2.29.1",
+    "qs": "^6.6.0",
+    "react-device-detect": "^2.1.2",
+    "react-grid-system": "^5.0.2",
+    "react-lazyload": "^3.2.0",
+    "react-scroll": "^1.9.3",
+    "react-slick": "^0.29.0",
+    "slick-carousel": "1.8.1"
+  }
+}

package/theme/md3.css

@@ -4222,6 +4222,24 @@ line-height: 31px;
   background: var(--md-sc-low);
   border-radius: var(--md-r-md);
 }
+/* spec strip values — mobile keeps the bold 13.5px; desktop follows the design (11px/400) */
+.md3 .specstrip-val {
+  font-size: 13.5px;
+  font-weight: 600;
+  color: var(--md-on-surface);
+}
+@media (min-width: 601px) {
+  .md3 .listcard .specstrip-val {
+    font-size: 11px;
+    font-weight: 400;
+  }
+  /* SRP list card EnVKV line — design wants full-contrast text (#1a1b22 = --md-on-surface) on
+     desktop; the component's inline base color (on-surface-variant) stays for every other
+     surface (grid card, mobile), hence the !important against the inline style. */
+  .md3 .listcard .eco-line {
+    color: var(--md-on-surface) !important;
+  }
+}
 /* desktop only (mobile keeps the flex-wrap flow above, untouched): a clean 2-column grid so
    pairs line up (km|EZ, Kraftstoff|Getriebe, Leistung|Halter) instead of reflowing by text
    length (Figma "mcard"). Facts render in DOM order [km, EZ, Getriebe, Kraftstoff, Leistung,