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

package/compat/CookieModal/modals/ManageCookieModal/ManageCookieModal.styl

@@ -68,11 +68,12 @@
   border: none !important;
 
 .zustimmenBtn
-  width: calc(50% - 18px) !important
-  min-width: calc(50% - 18px) !important
+  padding: 9.95px 36.87px 11.05px 35.63px !important
+  width: 142.5px !important
+  min-width: 142.5px !important
   height: 38px !important
-  background: #005CCB !important
-  border-radius: 4px !important
+  background: #005CFF !important
+  border-radius: 16px !important
   display: flex !important
   align-items: center !important
   justify-content: center !important

package/compat/CookieModal/modals/PreviewCookieModal/PreviewCookieModal.styl

@@ -26,13 +26,14 @@
     margin-top: 8px;
 
 .modalContent
-  font-family: sans-serif
+  margin-top: 3px
+  font-family: 'Arial'
+  font-weight: 400
   font-size: 14px;
   line-height: 16px;
   text-align: justify;
   letter-spacing: 0.15px;
   color: rgba(76, 78, 100, 0.87);
-  margin-top: 20px
   +media-tablet-down()
     font-family: 'Arial';
     font-weight: 400;
@@ -65,6 +66,7 @@
     font-size: 11px !important
 
 .necessaryCookiesBtn
+  text-transform: none !important
   display: flex !important
   flex-direction: column !important
   align-items: center !important
@@ -72,10 +74,10 @@
   width: 184px !important
   min-width: 184px !important
   height: 38px !important
-  background: #005CCB !important
+  background: #005CFF !important
   box-shadow: 0px 4px 8px -4px rgba(76, 78, 100, 0.42) !important
-  border-radius: 4px !important
-  font-family: 'Inter' !important
+  border-radius: 16px !important
+  font-family: 'Arial' !important
   font-weight: 500 !important
   font-size: 14px !important
   line-height: 24px !important
@@ -83,9 +85,11 @@
   color: #FFFFFF !important
 
 .anpassenBtn
-  border: 1px solid rgba(102, 108, 255, 0.5) !important
+  box-sizing: border-box !important
+  padding: 9.95px 39.39px 11.05px 40.11px !important
+  border: 1px solid #005CFF !important
   box-shadow: none !important
-  border-radius: 4px !important
+  border-radius: 16px !important
   width: 142.5px !important
   min-width: 142.5px !important
   height: 38px !important
@@ -94,17 +98,19 @@
   justify-content: center !important
   text-align: center !important
   font-family: 'Arial' !important
+  font-style: normal !important
   font-weight: 400 !important
   font-size: 14px !important
   line-height: 16px !important
-  color: #1976D2 !important
+  color: #005CFF !important
 
 .zustimmenBtn
+  padding: 9.95px 36.87px 11.05px 35.63px !important
   width: 142.5px !important
   min-width: 142.5px !important
   height: 38px !important
-  background: #005CCB !important
-  border-radius: 4px !important
+  background: #005CFF !important
+  border-radius: 16px !important
   display: flex !important
   align-items: center !important
   justify-content: center !important
@@ -120,6 +126,7 @@
   display: flex;
   justify-content: flex-end;
   font-family: 'Arial';
+  font-style: normal;
   font-weight: 400;
   color: #005CCB;
   font-size: 16px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.98",
+  "version": "1.0.100",
   "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). */
@@ -2057,13 +2057,22 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
   // "Rundum-Sorglos-Paket" one-time fee only counts toward the breakdown when the customer
   // actually has it switched on (cash mode forces it on upstream) AND a real cost is known.
   const hasAddServices = !!withAddServices && addServicesCost != null && addServicesCost > 0;
-  // Grand total (Figma "Gesamtbelastung inkl. Anzahlung & Paket") — down payment + the config's
-  // real Gesamtbetrag + the package fee. Only shown when Gesamtbetrag is known (never fabricated).
-  const totalCost = grossAmount != null && grossAmount > 0 ? down + grossAmount + (hasAddServices ? (addServicesCost as number) : 0) : undefined;
   // one-time package figure shown in the breakdown: 0 € while bundled into the rate (its cost is
   // already carried inside `monthly` instead), the real flat price when switched off.
   const addServicesRowValue = withAddServices ? 0 : addServicesCostRaw ?? 0;
   const hasAddServicesRow = addServicesCostRaw != null && addServicesCostRaw > 0;
+  // Grand total (Figma "Gesamtbelastung inkl. Anzahlung & Paket") — down payment + the config's
+  // real Gesamtbetrag + the package fee. The package is mandatory (see packageMandatoryNotice) —
+  // the toggle only decides HOW it's paid (bundled into the rate vs. a separate one-time charge),
+  // never WHETHER it's owed, so the total must include it either way: `addServicesCost` when
+  // bundled (toggle on), the raw one-time fee (`addServicesRowValue`, same as the breakdown row
+  // above it) when paid separately (toggle off) — previously dropped to 0 in the off case, so the
+  // grand total silently excluded a cost the breakdown row directly above it was still showing.
+  // Only shown when Gesamtbetrag is known (never fabricated).
+  const totalCost =
+    grossAmount != null && grossAmount > 0
+      ? down + grossAmount + (hasAddServices ? (addServicesCost as number) : hasAddServicesRow ? addServicesRowValue : 0)
+      : undefined;
 
   let rows: Array<[string, string, boolean?]>;
   if (isLease) {
@@ -2082,51 +2091,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 || hasAddServicesRow ? 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) => (