@bytebrand/fe-ui-core-autobahn 1.0.137 → 1.0.138

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.137",
+  "version": "1.0.138",
   "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/vdp/VdpModules.tsx

@@ -2241,18 +2241,31 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
   }, [open, initialShowBreakdown]);
   // in-sheet "Finanzierungs-/Leasingdetails" toggle (mobile): expanding the breakdown alone left
   // it below the fold — scroll the sheet body all the way down (same end state as opening via
-  // the page's details link). Waits out .fin-modal--expanded's 0.35s min-height transition: a
-  // smooth scroll started while the sheet is still growing gets cut short after a few px.
-  // Collapsing doesn't scroll.
+  // the page's details link) in one quick ~300ms ease-out. The click also skips
+  // .fin-modal--expanded's 0.35s min-height transition (see the toggle's onClick): a scroll
+  // running while the sheet is still growing gets clamped/retargeted every frame and stutters.
+  // Hand-rolled rAF instead of scrollTo({behavior:'smooth'}) so the duration is ours, not the
+  // browser's. Collapsing doesn't scroll.
   const revealBreakdownRef = React.useRef(false);
   React.useEffect(() => {
     if (!showBreakdown || !revealBreakdownRef.current) return;
     revealBreakdownRef.current = false;
-    const timer = window.setTimeout(() => {
-      const body = mobileBreakdownRef.current?.closest('.fin-modal-body') as HTMLElement | null | undefined;
-      if (body) body.scrollTo({ top: body.scrollHeight, behavior: 'smooth' });
-    }, 400);
-    return () => window.clearTimeout(timer);
+    const body = mobileBreakdownRef.current?.closest('.fin-modal-body') as HTMLElement | null | undefined;
+    if (!body) return;
+    const from = body.scrollTop;
+    const dist = body.scrollHeight - body.clientHeight - from;
+    if (dist <= 0) return;
+    const duration = 300;
+    let start: number | null = null;
+    let raf = 0;
+    const step = (now: number): void => {
+      if (start === null) start = now;
+      const p = Math.min(1, (now - start) / duration);
+      body.scrollTop = from + dist * (1 - Math.pow(1 - p, 3));
+      if (p < 1) raf = window.requestAnimationFrame(step);
+    };
+    raf = window.requestAnimationFrame(step);
+    return () => window.cancelAnimationFrame(raf);
   }, [showBreakdown]);
 
   // mobile-only: swipe-down-to-dismiss on the grabber/header (the mockup's drag handle).
@@ -3430,6 +3443,9 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                   type="button"
                   onClick={() => {
                     revealBreakdownRef.current = !showBreakdown;
+                    // expanding: grow the sheet to full height at once (no min-height
+                    // transition) so the scroll-down above runs on a settled layout
+                    if (!showBreakdown && sheetRef.current) sheetRef.current.style.transition = 'none';
                     setShowBreakdown((v) => !v);
                   }}
                   style={{ ...expanderBtnStyle, justifyContent: 'center', padding: '2px 0 20px' }}>