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

package/package.json

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

@@ -174,6 +174,13 @@
   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; }
+
 /* ---------- 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 +1157,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 +1215,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;

package/vdp/FinanceCalculator.tsx

@@ -505,18 +505,13 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
               <div className="md-label-sm">{t('autobahn:finance.personalConsultationSub')}</div>
             </div>
           </div>
-          {isCash ? (
+          {/* 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 && (
             <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>