@bytebrand/fe-ui-core-autobahn 1.0.21 → 1.0.23

package/locales/de/autobahn.json

@@ -14,6 +14,7 @@
       "leaseTerms": "{{mileage}} km/Jahr · {{months}} Monate",
       "purchasePrice": "Kaufpreis",
       "priceDropAmount": "−{{amount}} €",
+      "priceDropSave": "{{amount}} € sparen",
       "savedAmount": "{{amount}} € gespart",
       "zeroDownCompact": "0 € Anz.",
       "zeroDown": "0 € Anzahlung",
@@ -414,7 +415,9 @@
       "back": "zurück",
       "share": "teilen",
       "photos": "Alle {{count}} Fotos",
-      "photos_plural": "Alle {{count}} Fotos"
+      "photos_plural": "Alle {{count}} Fotos",
+      "photosCount": "{{count}} Fotos",
+      "photosCount_plural": "{{count}} Fotos"
     },
     "favorite": {
       "label": "merken"

package/locales/en/autobahn.json

@@ -14,6 +14,7 @@
       "leaseTerms": "{{mileage}} km/year · {{months}} months",
       "purchasePrice": "Purchase price",
       "priceDropAmount": "−{{amount}} €",
+      "priceDropSave": "Save {{amount}} €",
       "savedAmount": "€{{amount}} saved",
       "zeroDownCompact": "€0 down",
       "zeroDown": "€0 down payment",
@@ -414,7 +415,9 @@
       "back": "Back",
       "share": "Share",
       "photos": "All {{count}} photos",
-      "photos_plural": "All {{count}} photos"
+      "photos_plural": "All {{count}} photos",
+      "photosCount": "{{count}} photos",
+      "photosCount_plural": "{{count}} photos"
     },
     "favorite": {
       "label": "Save"

package/package.json

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

@@ -155,12 +155,12 @@
    NOT the 38px tappable filter-chip the base .chip is. */
 .md3 .listcard-chips .chip { height: 24px; padding: 0 10px; font-size: 11.5px; border-radius: 8px; cursor: default; }
 .md3 .listcard-chips .chip:hover { background: var(--md-surface); border-color: var(--md-outline-variant); }
-/* VDP trust row (Sofort verfügbar/views/favorites/Geprüft) — same compact non-interactive
-   sizing as the listcard equipment tags, standalone (not nested under .listcard-chips). */
-.md3 .vdp-trust-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
-  border-radius: 8px; font-size: 11.5px; font-weight: 500; line-height: 1; cursor: default; white-space: nowrap;
-  background: var(--md-surface); color: var(--md-on-surface-variant); border: 1px solid var(--md-outline-variant); }
-.md3 .vdp-trust-chip .lucide { width: 14px; height: 14px; flex: none; }
+/* VDP trust row (Sofort verfügbar/views/favorites/Geprüft) — mobile-only, so the figma
+   push-chip palette is used literally (light blue-gray fill, dark bold label). */
+.md3 .vdp-trust-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
+  border-radius: 11px; font-size: 11px; font-weight: 700; line-height: 1; cursor: default; white-space: nowrap;
+  background: #F5F7FA; color: #1D2A38; border: 1px solid #E5EAF0; }
+.md3 .vdp-trust-chip .lucide { width: 16px; height: 16px; flex: none; }
 
 /* status / rating chip (no CTA) */
 .md3 .statchip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px;
@@ -174,12 +174,17 @@
   border-radius: var(--md-r-full); background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 500; backdrop-filter: blur(2px); }
 .md3 .imglabel .lucide { width: 14px; height: 14px; }
 
-/* mobile-only row under the gallery image: photo-count (plain text link, not an overlay
-   pill — the dark .imglabel pill only makes sense against the image itself) · favorite/share. */
-.md3 .gallery-controls-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 2px 0; }
-.md3 .gallery-photos-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none;
-  cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--md-on-surface-variant); padding: 0; }
-.md3 .gallery-photos-btn .lucide { width: 15px; height: 15px; }
+/* mobile-only row under the gallery image (mockup): bordered "X Fotos" pill · slider dots ·
+   share/favorite — all in ONE row in normal flow, nothing overlaid on the image. */
+.md3 .gallery-controls-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 2px 0; }
+.md3 .gallery-photos-btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font: inherit;
+  font-size: 12px; font-weight: 700; color: var(--md-on-surface); height: 34px; padding: 0 13px; flex: none;
+  background: #fff; border: 1px solid #D4DDE7; border-radius: 16px; }
+.md3 .gallery-photos-btn .lucide { width: 17px; height: 17px; }
+/* page-driven slider dots (the carousel's own overlay dots are hidden on the phone VDP) */
+.md3 .gallery-dots { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
+.md3 .gallery-dots .gdot { width: 6px; height: 6px; border-radius: 3px; background: #D4DDE7; flex: none; }
+.md3 .gallery-dots .gdot--on { width: 30px; height: 5px; background: var(--md-on-surface); }
 
 /* ---------- cards ---------- */
 .md3 .mcard { background: var(--md-sc-lowest); border-radius: var(--md-r-md); border: 1px solid var(--md-outline-variant);
@@ -1160,8 +1165,10 @@
   margin-bottom: -1px; transition: color .15s, border-color .15s; text-align: center; }
 .md3 .fin-tab.on { color: var(--md-primary); border-bottom-color: var(--md-primary); }
 .md3 .fin-tab:hover:not(.on) { color: var(--md-on-surface); }
-/* 2-col grid: left grows, right fixed 148px — pill (row 1) and bar (row 2) share a column edge, never wrap */
-.md3 .fin-price-grid { display: grid; grid-template-columns: 1fr 148px; gap: 6px 16px; align-items: center; margin-top: 8px; }
+/* 2-col grid: left grows, right fixed 148px — pill (row 1) and bar (row 2) share a column edge, never wrap.
+   minmax(0,1fr) lets the rate column SHRINK below its content (plain 1fr's min is auto, which let the
+   52px phone rate blow the whole card past the viewport). */
+.md3 .fin-price-grid { display: grid; grid-template-columns: minmax(0, 1fr) 148px; gap: 6px 16px; align-items: center; margin-top: 8px; }
 .md3 .fin-rate-main { min-width: 0; }
 /* rating pill — light tier-tinted bg, tier-colored text + icon (bg/color set inline per tier) */
 .md3 .fin-eval-pill { display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px;
@@ -1463,13 +1470,35 @@
   display: flex; align-items: center; justify-content: center; rotate: 45deg; box-shadow: var(--md-e2); }
 .md3 .dealer-pin .lucide { rotate: -45deg; }
 
-/* VDP: floating back button over the gallery — phone only (breadcrumb is hidden there) */
+/* VDP: floating back button over the gallery — hidden everywhere now (the phone mockup
+   shows a clean image with only the nav arrows; desktop has the breadcrumb). */
 .md3 .vdp-back { display: none; position: absolute; top: 12px; left: 14px; z-index: 3; }
 
+/* mobile push-badges row ABOVE the gallery (mockup): flat tinted pills in normal flow —
+   replaces the white overlay chips (DropChip & co) that sat on the image. Figma palette
+   used literally; one non-wrapping swipeable line. */
+.md3 .vdp-push-badges { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow-x: auto;
+  scrollbar-width: none; margin-bottom: 10px; }
+.md3 .vdp-push-badges::-webkit-scrollbar { display: none; }
+.md3 .push-badge { display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 13px;
+  border-radius: 11px; font-size: 13.5px; font-weight: 700; line-height: 1; white-space: nowrap; flex: none; }
+.md3 .push-badge--save { background: #E6F7EE; color: #168A45; border: 1px solid rgba(22,138,69,.07); }
+.md3 .push-badge--discount { background: #E60000; color: #fff; }
+.md3 .push-badge--down { background: #EAF2FF; color: #005CFF; border: 1px solid rgba(0,92,255,.05); }
+
 @media (max-width: 600px) {
   /* full-bleed gallery: edge-to-edge, app-like (production pattern) */
-  .md3 .vdp-back { display: flex; }
-  .md3 .vdp-gallerybox { margin: -14px -24px 0; border-radius: 0; border: 0; box-shadow: none; }
+  .md3 .vdp-gallerybox { margin: 0 -24px; border-radius: 0; border: 0; box-shadow: none; }
+  /* the carousel's own overlay dots move into the below-image controls row (page-rendered;
+     the dots div carries an inline display:flex — hence !important) */
+  .md3 .vdp-gallerybox .cardcar-dots { display: none !important; }
+  /* mockup hero rate is a notch bigger on phone (inline style says 48 — hence !important) */
+  .md3 .fin-rate-main .num { font-size: 52px !important; letter-spacing: -1.5px !important; }
+  /* narrower rating column (figma bar is 115px) frees room for the bigger rate; let the
+     € /mtl. suffix wrap under the number instead of pushing the grid wide on 4-digit rates */
+  .md3 .fin-price-grid { grid-template-columns: minmax(0, 1fr) 112px; }
+  .md3 .fin-rate-main > div { flex-wrap: wrap; }
+  .md3 .fin-rate-main .md-body-sm { font-size: 15px !important; font-weight: 700 !important; color: var(--md-on-surface-variant) !important; }
 }
 
 /* ---------- save-search bar ---------- */

package/ui/CardCarousel.tsx

@@ -99,6 +99,7 @@ const CardCarousel: React.FunctionComponent<CardCarouselProps> = ({
             <Icon name="chevron-right" size={20} />
           </button>
           <div
+            className="cardcar-dots"
             style={{
               position: 'absolute',
               bottom: 9,

package/vdp/FinanceCalculator.tsx

@@ -312,7 +312,17 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
             className={'fin-tab' + (mode === k ? ' on' : '')}
             onClick={() => onModeChange(k)}
           >
-            {t(labelKey)}
+            {k === 'cash' ? (
+              <>
+                {/* mockup names the cash tab "Kaufen" on phone; desktop keeps "Barzahlung" */}
+                <span className="hide-mobile">{t(labelKey)}</span>
+                <span className="show-mobile" style={{ justifyContent: 'center' }}>
+                  {t('autobahn:card.price.buy')}
+                </span>
+              </>
+            ) : (
+              t(labelKey)
+            )}
           </button>
         ))}
       </div>
@@ -469,34 +479,30 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
 
       {/* ============================== MOBILE (≤600px) — new layout ============================== */}
       <div className="show-mobile" style={{ flexDirection: 'column' }}>
-        {/* side-by-side CTAs */}
-        <div style={{ display: 'flex', gap: 10, marginTop: 14 }}>
-          <Button variant="filled" size="lg" icon="shield-check" style={{ flex: 1 }} onClick={onSecure}>
+        {/* side-by-side CTAs — mockup ratio ~2:1, with the tiny auto.de-ID sitting
+            directly under the Anrufen button (not in its own full-width row). */}
+        <div style={{ display: 'flex', gap: 10, marginTop: 14, alignItems: 'flex-start' }}>
+          <Button variant="filled" size="lg" icon="shield-check" style={{ flex: 2 }} onClick={onSecure}>
             {t('autobahn:finance.secureOffer')}
           </Button>
-          <Button variant="outlined" size="lg" icon="phone" style={{ flex: 1 }} onClick={onCall}>
-            {t('autobahn:finance.callCta')}
-          </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 style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 4, minWidth: 0 }}>
+            <Button variant="outlined" size="lg" icon="phone" block onClick={onCall}>
+              {t('autobahn:finance.callCta')}
+            </Button>
+            {autoDeId && (
+              <span
+                className="num"
+                style={{ fontSize: 10, fontWeight: 700, color: 'var(--md-primary)', textAlign: 'center', whiteSpace: 'nowrap' }}
+              >
+                auto.de ID: {autoDeId}
+              </span>
             )}
           </div>
-        )}
+        </div>
 
-        {/* Persönliche Beratung (left) · Finanzierungs-/Leasingdetails or hint (right) */}
+        {/* Persönliche Beratung (left) · divider · Finanzierungs-/Leasingdetails or hint (right) */}
         <div className="fin-info">
-          <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0, flex: 1 }}>
             <Icon name="user" size={18} color="var(--md-on-surface-variant)" style={{ flex: 'none' }} />
             <div style={{ minWidth: 0 }}>
               <div className="md-label-sm" style={{ fontWeight: 700, color: 'var(--md-on-surface)' }}>
@@ -505,9 +511,30 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
               <div className="md-label-sm">{t('autobahn:finance.personalConsultationSub')}</div>
             </div>
           </div>
-          {/* non-cash: the Finanzierungsdetails link already sits on the auto.de-ID row
-              above — showing it here too was a duplicate (round-3 regression). */}
-          {isCash && (
+          <span style={{ width: 1, alignSelf: 'stretch', background: 'var(--md-outline-variant)', flex: 'none' }} />
+          {!isCash && onShowDetails ? (
+            <button
+              type="button"
+              onClick={onShowDetails}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 8,
+                background: 'none',
+                border: 0,
+                padding: 0,
+                cursor: 'pointer',
+                font: 'inherit',
+                color: 'var(--md-on-surface)',
+                textAlign: 'left',
+              }}
+            >
+              <Icon name="info" size={18} color="var(--md-on-surface-variant)" style={{ flex: 'none' }} />
+              <span className="md-label-sm" style={{ maxWidth: 82, lineHeight: 1.5 }}>
+                {mode === 'leasing' ? t('autobahn:finance.leasingDetails') : t('autobahn:finance.financingDetails')}
+              </span>
+            </button>
+          ) : (
             <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: 'var(--md-on-surface-variant)' }}>
               <Icon name="info" size={15} />
               <span className="md-label-sm">{t('autobahn:finance.financingLeasingPossible')}</span>

package/vdp/VdpModules.tsx

@@ -175,7 +175,8 @@ export interface VdpTrustRowProps {
  *  availability · view count · favorite count · "Geprüft" (every auto.de listing is
  *  130-point inspected, so this one is always shown, not conditional real data). */
 export const VdpTrustRow: React.FunctionComponent<VdpTrustRowProps> = ({ available, viewCount, favCount, t }) => (
-  <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 6, marginTop: 10 }}>
+  // one swipeable line (mockup), never a ragged second row
+  <div style={{ display: 'flex', flexWrap: 'nowrap', overflowX: 'auto', scrollbarWidth: 'none', alignItems: 'center', gap: 6, marginTop: 10 }}>
     {available && (
       <span className="vdp-trust-chip">
         <Icon name="check" size={13} stroke={2.4} color="var(--md-good)" />
@@ -1278,7 +1279,8 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                   [
                     ['fin', 'autobahn:finance.mode.financing'],
                     ['leasing', 'autobahn:finance.mode.leasing'],
-                    ['cash', 'autobahn:finance.mode.cash'],
+                    // this sheet is mobile-only, so the cash tab is "Kaufen" here (desktop card says "Barzahlung")
+                    ['cash', 'autobahn:card.price.buy'],
                   ] as Array<[FinanceMode, string]>
                 ).map(([k, labelKey]) => (
                   <button