@bytebrand/fe-ui-core-autobahn 1.0.18 → 1.0.20

package/locales/de/autobahn.json

@@ -54,11 +54,12 @@
   },
   "finance": {
     "termSelection": "Laufzeit",
+    "exampleLabel": "z.B.",
     "headerTitle": "Dein Angebot",
     "adjustRate": "Rate anpassen",
     "secureOffer": "Angebot anfragen",
     "trustLine": "Unverbindlich · kostenlos · 14 Tage Rückgaberecht",
-    "downPaymentLabel": "€ Anzahlung",
+    "downPaymentLabel": "{{value}} € Anzahlung",
     "monthsLabel": "{{months}} Monat",
     "monthsLabel_plural": "{{months}} Monate",
     "monthUnit": "Mon.",

package/locales/en/autobahn.json

@@ -54,11 +54,12 @@
   },
   "finance": {
     "termSelection": "Term",
+    "exampleLabel": "e.g.",
     "headerTitle": "Your offer",
     "adjustRate": "Adjust rate",
     "secureOffer": "Request offer",
     "trustLine": "Non-binding · free · 14-day return right",
-    "downPaymentLabel": "€ down payment",
+    "downPaymentLabel": "{{value}} € down payment",
     "monthsLabel": "{{months}} month",
     "monthsLabel_plural": "{{months}} months",
     "monthUnit": "mo.",

package/package.json

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

@@ -1356,16 +1356,20 @@
   .md3 .vdp-meta     { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 14px; margin-top: 14px; }
   .md3 .vdp-meta > span + span::before { content: none; }
   .md3 .vdp-meta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
-  /* mobile-only "first screen" identity block: compact single dot-separated line,
-     rating chip inline next to the title (not stacked above it) — overrides the
-     structured-phone-layout rules above, which only make sense for the bulkier
-     desktop card shown at tablet widths. */
-  .md3 .vdp-header-summary .vdp-headrow { flex-direction: row; align-items: center; gap: 10px; }
+  /* mobile-only "first screen" identity block (per mockup): bare title (no rating
+     chip — that lives next to the price in the finance card instead), one muted
+     compact dot-separated fact line (km/EZ/Getriebe/Kraftstoff only, no "1. Hand",
+     no icons) — overrides the structured-phone-layout rules above, which only
+     make sense for the bulkier desktop card shown at tablet widths. */
+  .md3 .vdp-header-summary .vdp-headrow { flex-direction: row; align-items: flex-start; gap: 10px; }
+  .md3 .vdp-header-summary .vdp-headrow .statchip { display: none; }
   .md3 .vdp-header-summary .vdp-trim { display: none; }
-  .md3 .vdp-header-summary .vdp-meta { display: flex; flex-wrap: wrap; grid-template-columns: none; margin-top: 8px; }
+  .md3 .vdp-header-summary .vdp-meta { display: flex; flex-wrap: wrap; grid-template-columns: none; margin-top: 6px;
+    font-size: 13.5px; font-weight: 400; color: var(--md-on-surface-variant); }
   .md3 .vdp-header-summary .vdp-meta > span + span::before { content: ''; }
   .md3 .vdp-header-summary .vdp-meta > span { overflow: visible; text-overflow: clip; }
   .md3 .vdp-header-summary .vdp-meta .lucide { display: none; }
+  .md3 .vdp-header-summary .vdp-meta > span:nth-child(5) { display: none; }
   /* highlights: one swipeable line, no ragged wrap */
   .md3 .vdp-highlights { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none;
     width: 0; min-width: 100%; }

package/vdp/FinanceCalculator.tsx

@@ -271,12 +271,13 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
     );
     condParts.push(t('autobahn:finance.monthsLabel', { months: term, count: term }));
   }
-  const condLine = condParts.join(' · ');
+  const condLine = condParts.length ? `${t('autobahn:finance.exampleLabel')} ${condParts.join(' · ')}` : '';
 
   return (
     <div className="mcard mcard--elevated" style={{ padding: 20 }}>
-      {/* header */}
-      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
+      {/* header — desktop only; mobile goes straight into the tabs (see mockup: no card
+          title above Finanzierung/Leasing/Kaufen on phone). */}
+      <div className="fin-card-header hide-mobile" style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
         <span
           style={{
             width: 34,
@@ -478,6 +479,21 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
           </Button>
         </div>
 
+        {/* auto.de-ID (left) · Finanzierungs-/Leasingdetails (right) — same row desktop shows,
+            restored here per the mockup (round 1 had dropped it in favor of Persönliche Beratung
+            alone; the mockup wants both rows, not one replacing the other). */}
+        {(autoDeId || (!isCash && onShowDetails)) && (
+          <div className="fin-info">
+            {autoDeId && <span className="fin-id">auto.de-ID {autoDeId}</span>}
+            {!isCash && onShowDetails && (
+              <DetailsLink
+                label={mode === 'leasing' ? t('autobahn:finance.leasingDetails') : t('autobahn:finance.financingDetails')}
+                onClick={onShowDetails}
+              />
+            )}
+          </div>
+        )}
+
         {/* Persönliche Beratung (left) · Finanzierungs-/Leasingdetails or hint (right) */}
         <div className="fin-info">
           <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>