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

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,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.116",
+  "version": "1.0.118",
   "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",

package/theme/md3.css

@@ -3033,6 +3033,11 @@ line-height: 31px;
   left: auto;
   right: 0;
 }
+/* body-level portal menu: must paint over every fixed overlay its trigger can live in —
+   .sheet (71), .fin-modal-scrim (60), .vdp-photosheet (211), .mmodal-scrim (1300). */
+.md3 .mselect-menu--portal {
+  z-index: 1400;
+}
 .md3 .mselect-list {
   max-height: 288px;
   overflow-y: auto;
@@ -4222,6 +4227,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,

package/ui/Dropdown.tsx

@@ -420,7 +420,7 @@ const Dropdown: React.FunctionComponent<DropdownProps> = ({
         ? ReactDOM.createPortal(
             <div
               ref={menuElRef}
-              className={'mselect-menu' + (searchable ? ' mselect-menu--searchable' : '')}
+              className={'mselect-menu mselect-menu--portal' + (searchable ? ' mselect-menu--searchable' : '')}
               // menuPos is null for one frame on open, before the position effect has measured
               // the trigger — stay invisible rather than flash at (0,0)/full-width.
               style={