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

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.20",
+  "version": "1.0.22",
   "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,6 +174,18 @@
   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 (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);
   overflow: hidden; transition: box-shadow var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard), transform var(--dur-2) var(--ease-standard); }
@@ -1150,7 +1162,7 @@
 .md3 .fin-tabs { display: flex; border-bottom: 1px solid var(--md-outline-variant); margin-bottom: 18px; }
 .md3 .fin-tab { flex: 1; background: none; border: 0; padding: 11px 4px; cursor: pointer; font: inherit;
   font-size: 13.5px; font-weight: 600; color: var(--md-on-surface-variant); border-bottom: 2px solid transparent;
-  margin-bottom: -1px; transition: color .15s, border-color .15s; }
+  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 */
@@ -1208,10 +1220,13 @@
   .md3 .enquiry-phone { margin-top: 16px; }
 }
 
-/* sticky mobile CTA bar (VDP) */
+/* sticky mobile CTA bar (VDP) — hidden (slid off-screen) until the page scrolls past the
+   main offer card, matching the desktop VdpStickyBar's show/scroll-gated behavior. */
 .md3 .vdp-bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--md-sc-lowest);
   border-top: 1px solid var(--md-outline-variant); box-shadow: 0 -2px 14px rgba(0,0,0,.10);
-  padding: 10px 16px; align-items: center; gap: 14px; }
+  padding: 10px 16px; align-items: center; gap: 14px;
+  transform: translateY(100%); transition: transform var(--dur-2, .25s); }
+.md3 .vdp-bottom-bar--on { transform: translateY(0); }
 
 /* bottom-sheet (SRP filters) — sticky header + scrollable body + sticky action bar, slide-up entrance */
 .md3 .sheet-scrim { position: fixed; inset: 0; background: rgba(16,22,42,.5); z-index: 70;
@@ -1453,13 +1468,29 @@
   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) */
+  .md3 .vdp-gallerybox .cardcar-dots { display: none; }
+  /* 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; }
 }
 
 /* ---------- 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,18 +511,34 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
               <div className="md-label-sm">{t('autobahn:finance.personalConsultationSub')}</div>
             </div>
           </div>
-          {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>
             </div>
-          ) : (
-            onShowDetails && (
-              <DetailsLink
-                label={mode === 'leasing' ? t('autobahn:finance.leasingDetails') : t('autobahn:finance.financingDetails')}
-                onClick={onShowDetails}
-              />
-            )
           )}
         </div>
 

package/vdp/VdpModules.tsx

@@ -922,6 +922,13 @@ export const VdpStickyBar: React.FunctionComponent<VdpStickyBarProps> = ({ vehic
 
 export interface VdpBottomBarProps {
   vehicle: VehicleDetail;
+  /**
+   * Whether the bar is docked/visible — mirrors VdpStickyBar's `show` (same
+   * page-owned scroll-position toggle, STICKY_SHOW_AT). Was unconditionally
+   * visible before, unlike the desktop VdpStickyBar; the mockup only shows it
+   * after scrolling past the main offer card.
+   */
+  show: boolean;
   /** primary CTA click. */
   onSecure?: () => void;
   /** i18n function (drilled from the page). */
@@ -929,8 +936,8 @@ export interface VdpBottomBarProps {
 }
 
 /** Mobile sticky bottom CTA bar — rate + Kaufpreis + "Angebot sichern". */
-export const VdpBottomBar: React.FunctionComponent<VdpBottomBarProps> = ({ vehicle, onSecure, t }) => (
-  <div className="vdp-bottom-bar show-mobile">
+export const VdpBottomBar: React.FunctionComponent<VdpBottomBarProps> = ({ vehicle, show, onSecure, t }) => (
+  <div className={'vdp-bottom-bar show-mobile' + (show ? ' vdp-bottom-bar--on' : '')}>
     <div style={{ flex: 1, minWidth: 0 }}>
       <div style={{ display: 'flex', alignItems: 'baseline', gap: 5, whiteSpace: 'nowrap' }}>
         <span className="md-label-sm">{t('autobahn:bottom.from')}</span>
@@ -1271,7 +1278,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