@bytebrand/fe-ui-core-autobahn 1.0.98 → 1.0.99

package/package.json

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

@@ -5844,9 +5844,10 @@ line-height: 31px;
 .md3 .vdp-bottom-bar {
   position: fixed;
   left: 0;
+  right: 0;
   bottom: 0;
   z-index: 60;
-  width: 390px;
+  width: auto;
   height: 196px;
   background: rgba(244, 243, 243, 0.95);
   border: 1px solid #D4DDE7;
@@ -8637,7 +8638,9 @@ color: #005CFF;
     font-size: 13px;
     line-height: 15px;
     color: #111820;
+    margin: 0px 0px;
     margin-bottom: 12px;
+    vertical-align: -3px;
   }
   /* "Finanzierungsdetails"/"Leasing-Details" reads as a link here (unlike CarCard's quiet
      .cc-terms-link, which stays text-colored on purpose) — underlined. */
@@ -8657,11 +8660,11 @@ color: #005CFF;
     font-weight: 700 !important;
     color: var(--md-on-surface-variant) !important;
   }
-  /* figma pricing-card padding is 16 (inline says 20 — hence !important); the side-by-side
+  /* figma pricing-card padding is 15px 12px (inline says 20 — hence !important); the side-by-side
      CTAs must be allowed to SHRINK (mbtn is nowrap min-width:auto, 0-30px padding — the pair
      alone mins out wider than the phone card) */
   .md3 .vdp-aside > .mcard {
-    padding: 16px !important;
+    padding: 15px 12px !important;
   }
   .md3 .fin-cta-row .mbtn {
     min-width: 0;

package/utils/financeFormat.ts

@@ -19,6 +19,13 @@ export function formatPct(n: number): string {
   return `${n.toFixed(2).replace('.', ',')} %`;
 }
 
+/** Monetary figure → de-DE grouped string with fixed cents (e.g. 44333 → "44.333,00",
+ *  42243.9 → "42.243,90"). Unlike formatEur, always shows exactly 2 decimals — for the "Repräsentatives
+ *  Beispiel" breakdown table (FinanceDetailsModal), where every € line is expected to carry cents. */
+export function formatEurCents(n: number): string {
+  return n.toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+}
+
 export interface FinanceExampleFields {
   price: number;
   apr: number;

package/vdp/VdpModules.tsx

@@ -28,7 +28,7 @@ import { Button, Dropdown, DropdownOption, Icon, Spec, StatChip, Stars } from '.
 import { CO2_CLASSES, CO2_COLORS, TIER_LABELS, TIER_KEYS, TIER_COLORS, TIER_BACKGROUNDS } from '../constants';
 import { defaultVdpSpecs, EquipmentGroups, PriceRatingBands, VehicleDetail, VdpSpec, VdpReview } from './types';
 import { AddServicesTooltipBody, CalcRow, DocCheckIcon, EvalBar, expanderBtnStyle, FinanceMode, Slider, TermChips, ToggleRow } from './FinanceCalculator';
-import { formatEur as eur, formatPct as pct } from '../utils/financeFormat';
+import { formatEur as eur, formatEurCents as eurCents, formatPct as pct } from '../utils/financeFormat';
 
 /** Figma "check with open arc" glyph (modern lucide circle-check-big; the bundled lucide
  *  0.288 only ships the closed-circle variant, so the two paths are inlined). */
@@ -2082,51 +2082,51 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
     const subtotalWithPackage = ratesSum != null ? ratesSum + down + (hasAddServicesRow ? addServicesRowValue : 0) : undefined;
     const grandTotal = subtotalWithPackage != null ? subtotalWithPackage + residual : undefined;
     rows = [
-      [t('autobahn:modal.leaseVehiclePrice'), `${eur(price)} €`],
+      [t('autobahn:modal.leaseVehiclePrice'), `${eurCents(price)} €`],
       [t('autobahn:modal.term'), t('autobahn:modal.months', { months: term, count: term })],
       ...(annualMileage != null ? ([[t('autobahn:modal.annualMileage'), `${eur(annualMileage)} km`]] as Array<[string, string]>) : []),
-      [t('autobahn:modal.leaseDownPayment'), `${eur(down)} €`],
-      [t('autobahn:modal.leasingRateCount', { count: term }), `${eur(monthly)} €`],
-      [t('autobahn:modal.finalPaymentDue'), `${eur(0)} €`],
-      ...(residual > 0 ? ([[t('autobahn:modal.residualValue'), `${eur(residual)} €`]] as Array<[string, string]>) : []),
+      [t('autobahn:modal.leaseDownPayment'), `${eurCents(down)} €`],
+      [t('autobahn:modal.leasingRateCount', { count: term }), `${eurCents(monthly)} €`],
+      [t('autobahn:modal.finalPaymentDue'), `${eurCents(0)} €`],
+      ...(residual > 0 ? ([[t('autobahn:modal.residualValue'), `${eurCents(residual)} €`]] as Array<[string, string]>) : []),
       ...(ratesSum != null
-        ? ([[t('autobahn:modal.rateSumLabel', { term, amount: eur(monthly) }), `${eur(ratesSum)} €`, true]] as Array<[string, string, boolean]>)
+        ? ([[t('autobahn:modal.rateSumLabel', { term, amount: eurCents(monthly) }), `${eurCents(ratesSum)} €`, true]] as Array<[string, string, boolean]>)
         : []),
-      ...(ratesSum != null ? ([[t('autobahn:modal.leaseDownPayment'), `${eur(down)} €`]] as Array<[string, string]>) : []),
+      ...(ratesSum != null ? ([[t('autobahn:modal.leaseDownPayment'), `${eurCents(down)} €`]] as Array<[string, string]>) : []),
       ...(ratesSum != null && hasAddServicesRow
-        ? ([[t('autobahn:modal.addServicesRowLease'), `${eur(addServicesRowValue)} €`]] as Array<[string, string]>)
+        ? ([[t('autobahn:modal.addServicesRowLease'), `${eurCents(addServicesRowValue)} €`]] as Array<[string, string]>)
         : []),
       ...(subtotalWithPackage != null
-        ? ([[hasAddServicesRow ? t('autobahn:modal.subtotalWithPackage') : t('autobahn:modal.subtotalNoPackage'), `${eur(subtotalWithPackage)} €`, true]] as Array<
+        ? ([[hasAddServicesRow ? t('autobahn:modal.subtotalWithPackage') : t('autobahn:modal.subtotalNoPackage'), `${eurCents(subtotalWithPackage)} €`, true]] as Array<
             [string, string, boolean]
           >)
         : []),
-      ...(residual > 0 && grandTotal != null ? ([[t('autobahn:modal.residualValue'), `${eur(residual)} €`]] as Array<[string, string]>) : []),
+      ...(residual > 0 && grandTotal != null ? ([[t('autobahn:modal.residualValue'), `${eurCents(residual)} €`]] as Array<[string, string]>) : []),
       ...(grandTotal != null
-        ? ([[t('autobahn:modal.grandTotalWithResidual'), `${eur(grandTotal)} €`, true]] as Array<[string, string, boolean]>)
+        ? ([[t('autobahn:modal.grandTotalWithResidual'), `${eurCents(grandTotal)} €`, true]] as Array<[string, string, boolean]>)
         : []),
-      ...(listPrice != null && listPrice > 0 ? ([[t('autobahn:modal.listPriceLease'), `${eur(listPrice)} €`]] as Array<[string, string]>) : []),
+      ...(listPrice != null && listPrice > 0 ? ([[t('autobahn:modal.listPriceLease'), `${eurCents(listPrice)} €`]] as Array<[string, string]>) : []),
     ];
   } else {
     rows = [
-      [t('autobahn:modal.vehiclePrice'), `${eur(price)} €`],
+      [t('autobahn:modal.vehiclePrice'), `${eurCents(price)} €`],
       [t('autobahn:modal.term'), t('autobahn:modal.months', { months: term, count: term })],
-      [t('autobahn:modal.downPayment'), `${eur(down)} €`],
-      [t('autobahn:modal.monthlyRateCount', { count: term }), `${eur(monthly)} €`],
-      ...(finalInstallment != null && finalInstallment > 0 ? ([[t('autobahn:modal.finalInstallment'), `${eur(finalInstallment)} €`]] as Array<[string, string]>) : []),
+      [t('autobahn:modal.downPayment'), `${eurCents(down)} €`],
+      [t('autobahn:modal.monthlyRateCount', { count: term }), `${eurCents(monthly)} €`],
+      ...(finalInstallment != null && finalInstallment > 0 ? ([[t('autobahn:modal.finalInstallment'), `${eurCents(finalInstallment)} €`]] as Array<[string, string]>) : []),
       ...(hasAddServicesRow
-        ? ([[t('autobahn:modal.addServicesRow'), `${eur(addServicesRowValue)} €`]] as Array<[string, string]>)
+        ? ([[t('autobahn:modal.addServicesRow'), `${eurCents(addServicesRowValue)} €`]] as Array<[string, string]>)
         : []),
       ...(nominalRate != null && nominalRate > 0 ? ([[t('autobahn:modal.nominalRate'), pct(nominalRate)]] as Array<[string, string]>) : []),
       [t('autobahn:modal.effectiveRate'), pct(apr)],
-      [t('autobahn:modal.netLoanAmount'), `${eur(netto)} €`],
-      ...(grossAmount != null && grossAmount > 0 ? ([[t('autobahn:modal.totalRepayment'), `${eur(grossAmount)} €`]] as Array<[string, string]>) : []),
+      [t('autobahn:modal.netLoanAmount'), `${eurCents(netto)} €`],
+      ...(grossAmount != null && grossAmount > 0 ? ([[t('autobahn:modal.totalRepayment'), `${eurCents(grossAmount)} €`]] as Array<[string, string]>) : []),
       ...(totalCost != null
-        ? ([[hasAddServices ? t('autobahn:modal.totalCostWithPackage') : t('autobahn:modal.totalCost'), `${eur(totalCost)} €`, true]] as Array<
+        ? ([[hasAddServices ? t('autobahn:modal.totalCostWithPackage') : t('autobahn:modal.totalCost'), `${eurCents(totalCost)} €`, true]] as Array<
             [string, string, boolean]
           >)
         : []),
-      ...(listPrice != null && listPrice > 0 ? ([[t('autobahn:modal.listPrice'), `${eur(listPrice)} €`]] as Array<[string, string]>) : []),
+      ...(listPrice != null && listPrice > 0 ? ([[t('autobahn:modal.listPrice'), `${eurCents(listPrice)} €`]] as Array<[string, string]>) : []),
     ];
   }
   const breakdownRows = rows.map(([l, v, bold], i) => (