@bytebrand/fe-ui-core-autobahn 1.0.33 → 1.0.35

package/package.json

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

@@ -1203,6 +1203,11 @@
 /* UVP (struck list price) — cash mode only */
 .md3 .fin-kauf { margin-top: 8px; font-size: 13px; color: var(--md-on-surface-variant); }
 .md3 .fin-kauf s { color: var(--md-error); }
+/* struck old rate / list price next to the hero figure (Figma "329 € 4̶9̶9̶ ̶€̶ / mtl.") —
+   REAL isStrikeShown-gated data; used in the offer card, the Rate-anpassen sheet and the
+   sticky bottom bar, all payment modes. */
+.md3 .fin-rate-old { font-size: 15px; font-weight: 700; color: var(--md-error);
+  text-decoration: line-through; letter-spacing: 0; flex: none; }
 /* condition summary — left cell of row 2 in fin-price-grid */
 .md3 .fin-cond { min-width: 0; font-size: 12.5px; color: var(--md-on-surface-variant); }
 /* Rate-edit (Rate anpassen) sits between the rate and the CTA now */
@@ -1341,6 +1346,8 @@
   .md3 .gitem:nth-child(n+3)  { border-top: 1px solid var(--md-outline-variant); }
   .md3 .mag-grid       { grid-template-columns: 1fr; }
   .md3 .zustand-grid   { grid-template-columns: repeat(2, 1fr); }
+  /* buttons: mobile mockups use 10px corners, not the desktop pill (round 9 review) */
+  .md3 .mbtn           { border-radius: 10px; }
   /* highlight pills: Figma 2-col grid — ALL highlights visible, no swipe-line */
   .md3 .vdp-highlights { display: grid !important; grid-template-columns: 1fr 1fr; gap: 9px; }
   .md3 .vdp-highlights .chip { width: 100%; justify-content: flex-start; }
@@ -1605,6 +1612,8 @@
   .md3 .fin-info { margin-top: 10px; padding-top: 10px; }
   /* mockup hero rate is a notch bigger on phone (inline style says 48 — hence !important) */
   .md3 .fin-rate-main .num { font-size: 52px !important; letter-spacing: -1.5px !important; }
+  /* the struck old figure must NOT inherit the 52px hero size */
+  .md3 .fin-rate-main .fin-rate-old { font-size: 15px !important; letter-spacing: 0 !important; }
   /* narrower rating column (figma bar is 115px) frees room for the bigger rate; let the
      € /mtl. suffix wrap under the number instead of pushing the grid wide on 4-digit rates */
   .md3 .fin-price-grid { grid-template-columns: minmax(0, 1fr) 112px; }

package/vdp/FinanceCalculator.tsx

@@ -126,6 +126,9 @@ export interface FinanceCalculatorProps {
   ratingLabel?: string;
   /** computed monthly rate in EUR for the current mode — supplied, NOT computed here. */
   monthly: number;
+  /** struck old monthly rate (fe-financing oldMonthlyInstallment, isStrikeShown-gated) —
+   *  rendered as the red line-through figure next to the hero rate (fin/leasing only). */
+  oldMonthly?: number;
   /** effective annual rate (%) for the current mode — supplied, NOT computed here. */
   apr: number;
   /** current down payment in EUR (controlled). */
@@ -228,6 +231,7 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
   autoDeId,
   ratingLabel,
   monthly,
+  oldMonthly,
   down,
   term,
   downMin,
@@ -338,6 +342,10 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
             >
               {isCash ? eur(price) : eur(Math.round(monthly))}
             </span>
+            {/* struck old rate (REAL oldMonthlyInstallment; SRP strikes the same source) */}
+            {!isCash && oldMonthly != null && (
+              <s className="num fin-rate-old">{eur(Math.round(oldMonthly))} €</s>
+            )}
             <span className="md-body-sm" style={{ fontWeight: 600 }}>
               {isCash ? '€' : `€ ${t('autobahn:finance.perMonth')}`}
             </span>