@bytebrand/fe-ui-core-autobahn 1.0.71 → 1.0.73

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.71",
+  "version": "1.0.73",
   "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

@@ -4365,7 +4365,7 @@ line-height: 31px;
   justify-content: center;
   position: absolute;
   top: -5px;
-  right: -1px;
+  right: -5px;
   border-radius: 50%;
   width: 12px;
   height: 11px;
@@ -4378,7 +4378,7 @@ line-height: 31px;
 }
 .md3 .listcard-price .pricepaths .pp-hero-old .pp-eyebrow-badge {
   top: -7px;
-  right: -3px;
+  right: -7px;
 }
 .md3 .listcard-price .pricepaths .pp-uvp-tooltip {
   position: absolute;
@@ -4440,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;