@bytebrand/fe-ui-core-autobahn 1.0.70 → 1.0.72

package/cards/cardParts.tsx

@@ -861,8 +861,6 @@ export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t, c
   const finFirstInstallment =
     car.finFirstInstallment != null ? car.finFirstInstallment.toLocaleString('de-DE') : _finFirstInstallment;
   const finMonths = car.finMonths ?? _finMonths;
-  const leasFirstInstallment =
-    car.leaseFirstInstallment != null ? car.leaseFirstInstallment.toLocaleString('de-DE') : _leasFirstInstallment;
   const leasMileage = car.leaseMileage ?? _leasMileage;
   const leasMonths = car.leaseMonths ?? _leasPeriod;
   const hasLeasTerms = Boolean(leasMileage && leasMonths);
@@ -888,8 +886,11 @@ export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t, c
           <PpRow label={t('autobahn:card.price.leasing')} value={car.lease as number} unit="mtl." />
           {hasLeasTerms && (
             <div className="pp-sub-terms">
-              {t('autobahn:card.price.leaseTerms', {
-                firstInstallment: leasFirstInstallment,
+              {/* mockup drops the Sonderzahlung figure entirely here (unlike the shared
+                  leaseTerms key mobile/VDP use) and swaps the order to mileage-first —
+                  a dedicated key, not a rework of leaseTerms, so those other callers
+                  keep their own reviewed wording untouched. */}
+              {t('autobahn:card.price.leaseTermsCompact', {
                 months: leasMonths,
                 mileage: leasMileageStr,
               })}{' '}

package/locales/de/autobahn.json

@@ -12,6 +12,7 @@
       "financeTerms": "{{firstInstallment}} € Anzahlung · {{months}} Monate Laufzeit",
       "financeTerms_plural": "{{firstInstallment}} € Anzahlung · {{months}} Monate Laufzeit",
       "leaseTerms": "{{firstInstallment}} € Sonderzahlung · {{months}} Mon. · {{mileage}} km/Jahr",
+      "leaseTermsCompact": "{{mileage}} km/Jahr · {{months}} Monate",
       "detailsLink": "Details",
       "uvpRateLabel": "UVP-Rate",
       "uvpRateTooltipBody": "Rechnerische Vergleichsrate auf Basis der unverbindlichen Preisempfehlung des Herstellers und mit denselben Finanzierungsparametern wie das Angebot. Keine früher verlangte Rate. Das Rundum-Sorglos-Paket wird einmalig separat berechnet.",

package/locales/en/autobahn.json

@@ -12,6 +12,7 @@
       "financeTerms": "€{{firstInstallment}} down payment · {{months}} months term",
       "financeTerms_plural": "€{{firstInstallment}} down payment · {{months}} months term",
       "leaseTerms": "€{{firstInstallment}} down payment · {{months}} mo. · {{mileage}} km/year",
+      "leaseTermsCompact": "{{mileage}} km/year · {{months}} months",
       "detailsLink": "Details",
       "uvpRateLabel": "UVP rate",
       "uvpRateTooltipBody": "Calculated comparison rate based on the manufacturer's non-binding price recommendation, using the same financing parameters as the offer. Not a previously requested rate. The all-inclusive package is billed separately, as a one-off.",

package/package.json

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

@@ -4411,6 +4411,11 @@ line-height: 31px;
 .md3 .listcard-price .pricepaths .pp-uvp-tooltip-close svg { width: 14px; height: 14px; }
 .md3 .listcard-price .pricepaths .pp-uvp-tooltip-body { font-size: 11px; line-height: 13px; color: #0e2238; }
 .md3 .pp-hero-terms { margin-top: 9px; font-size: 11.5px; color: var(--md-on-surface-variant); }
+/* desktop mcard financing hero terms line: at the shared 11.5px size "0 € Anzahlung · 60 Monate
+   Laufzeit · Details" needs ~223px but the 240px column only leaves ~207px, so "Details" wrapped
+   onto its own line — shrunk just enough (measured against the real column width) to keep it on
+   one line, matching the Figma reference. */
+.md3 .listcard-price .pricepaths .pp-hero-terms { font-size: 10.5px; }
 /* "Details" link at the end of the financing/leasing terms lines (Figma "mcard") — quiet, same
    color as the rest of the terms line but underlined so it still reads as tappable. */
 .md3 .pp-details-link { color: var(--md-primary); text-decoration: underline; font-weight: 600; white-space: nowrap; }
@@ -4435,11 +4440,13 @@ line-height: 31px;
   padding-top: 16px;
   border-top: 1px solid var(--md-outline-variant);
 }
+/* left-aligned so the km/Monate/Details line sits under "Leasing" itself, not under the price
+   column on the right (was text-align:right — reported as visually orphaned from its own label). */
 .md3 .pp-sub-terms {
   margin-top: 3px;
   font-size: 11px;
   color: var(--md-on-surface-variant);
-  text-align: right;
+  text-align: left;
 }
 .md3 .pp-row {
   display: flex;
@@ -4459,10 +4466,15 @@ line-height: 31px;
   color: var(--md-outline);
   flex: none;
 }
+/* Figma "mcard": Leasing's price is already one line (no old price to caption); Kaufen's struck
+   old price + new price used to stack on two lines (column), giving the row double the height and
+   breaking the row-to-row rhythm with Leasing right above it — same line now, old price baseline-
+   aligned beside the new one, matching the reference exactly. */
 .md3 .pp-row-price {
   display: flex;
-  flex-direction: column;
-  align-items: flex-end;
+  flex-direction: row;
+  align-items: baseline;
+  gap: 8px;
   line-height: 1.08;
   min-width: 0;
 }