@bytebrand/fe-ui-core-autobahn 1.0.115 → 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.115",
-  "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,
@@ -5336,6 +5354,11 @@ line-height: 31px;
 .md3 .card-cta-row .mbtn { font-size: 12.5px; padding: 0 10px; gap: 5px; min-width: 0; }
 .md3 .card-cta-row .mbtn span, .md3 .card-cta-row .mbtn { overflow: hidden; text-overflow: ellipsis; }
 .md3 .card-cta-row .mbtn .lucide { width: 15px; height: 15px; flex: none; }
+/* the phone/"Rate anpassen" outlined buttons set their own explicit `border` (1.6px solid) inline —
+   .mbtn--outlined's inset box-shadow (the DEFAULT way that class draws its border everywhere else)
+   stacks on top of it as a second, slightly offset ring ("double border"). Suppress just the
+   shadow here; the real border keeps rendering from each button's own inline style. */
+.md3 .card-cta-row .mbtn--outlined { box-shadow: none; }
 /* muted buyer activity (#5) */
 .md3 .pp-activity {
   display: flex;
@@ -6767,16 +6790,30 @@ line-height: 31px;
   }
   .md3 .srp-bar {
     position: sticky;
-    /* was 64px (docked under the always-visible header) — now 0: once the header slides away
-       (autoHideOnScroll, TopBar.tsx) this bar takes its place at the very top instead of leaving
-       a gap, and sits flush under it again the moment the header slides back in. */
-    top: 0px;
+    /* default: docked directly under the always-visible header (its 64px height). Same 0.25s
+       duration as .topbar's own transform transition (below) — the header slides in/out over
+       0.25s, so this bar's top must animate in step with it, not jump instantly, or a gap (bar
+       already at 64px, header still sliding in) or an overlap (bar already at 0, header still
+       sliding out) flashes for that quarter-second. */
+    top: 64px;
+    transition: top 0.25s;
     z-index: 20;
     background: #fff;
     padding: 8px 0;
     margin: 0 0 8px;
     box-shadow: 0 6px 8px -8px rgba(0, 0, 0, 0.3);
   }
+  /* once the header slides away on scroll-down (autoHideOnScroll, TopBar.tsx adds
+     .topbar--hidden), this bar takes its place at the very top instead of leaving a 64px gap.
+     The header's box stays in the layout flow even while hidden (transform doesn't affect
+     `position: sticky`'s slot — see the .topbar--hidden rule above), so without this override
+     the bar's own sticky top would also need to jump — and it must jump BACK to 64px the moment
+     scroll-up brings the header back (topbar--hidden removed), or the reappearing header
+     (z-index 50) sticks at the same top:0 slot and paints over/hides this bar (z-index 20)
+     underneath it instead of sitting above it. */
+  .md3:has(.topbar--hidden) .srp-bar {
+    top: 0px;
+  }
   /* full-bleed white to the true viewport edges, WITHOUT moving .srp-bar's own text — it stays
      inside .srp-main's own side padding, this pseudo-element just paints white past it on both
      sides so no gap of page background shows while the bar is sticky. NOT a box-shadow spread
@@ -7327,7 +7364,7 @@ line-height: 31px;
    no separate per-element rule to keep in sync with this one. */
 @media (max-width: 600px) {
   .md3 .vdp-main {
-    padding: 0 10px 48px !important;
+    padding: 0 14px 48px !important;
   }
   .md3 .vdp-push-badges {
     gap: 6px;

package/ui/Dropdown.tsx

@@ -330,6 +330,15 @@ const Dropdown: React.FunctionComponent<DropdownProps> = ({
 
   const editing = searchable && open;
 
+  // Bug 53/37: "Rate bis" / "km bis" allow a hand-typed amount the preset rungs don't cover
+  // (allowCustomValue) — that typed number never matches any option label, so filteredOptions
+  // comes back empty and the popover would show "Keine Treffer", reading as "no cars match this"
+  // to the customer even though the typed value is perfectly valid input. Once there's an actual
+  // typed query with zero matches on an allowCustomValue field, suppress the popover entirely
+  // (not just the "Keine Treffer" row) — an empty floating box would be just as confusing. Plain
+  // (non-custom) searchable dropdowns, e.g. Make/Model, are unaffected and keep showing it.
+  const suppressEmptyMenu = allowCustomValue && searchable && query.trim() !== '' && filteredOptions.length === 0;
+
   // shared between the in-place popover and the menuPortal one — identical option list either way.
   const renderMenuList = () => (
     <ul
@@ -407,7 +416,7 @@ const Dropdown: React.FunctionComponent<DropdownProps> = ({
           <Icon name="chevron-down" cls="mselect-chev" />
         </button>
       )}
-      {open && (menuPortal && portalRoot
+      {open && !suppressEmptyMenu && (menuPortal && portalRoot
         ? ReactDOM.createPortal(
             <div
               ref={menuElRef}