@bytebrand/fe-ui-core-autobahn 1.0.35 → 1.0.37

package/package.json

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

@@ -1307,6 +1307,8 @@
   max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--md-e3); }
 .md3 .fin-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
   padding: 16px 20px; border-bottom: 1px solid var(--md-outline-variant); flex: none; }
+/* mobile sheet grabber row (mockup drag handle) — .show-mobile reveals it ≤600 */
+.md3 .fin-sheet-grip { justify-content: center; padding: 10px 0 0; cursor: grab; flex: none; }
 .md3 .fin-modal-body { padding: 18px 20px 22px; overflow-y: auto; }
 @media (max-width: 600px) {
   .md3 .fin-modal-scrim { align-items: flex-end; padding: 0; }

package/vdp/FinanceCalculator.tsx

@@ -342,13 +342,14 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
             >
               {isCash ? eur(price) : eur(Math.round(monthly))}
             </span>
-            {/* struck old rate (REAL oldMonthlyInstallment; SRP strikes the same source) */}
-            {!isCash && oldMonthly != null && (
-              <s className="num fin-rate-old">{eur(Math.round(oldMonthly))} €</s>
-            )}
             <span className="md-body-sm" style={{ fontWeight: 600 }}>
               {isCash ? '€' : `€ ${t('autobahn:finance.perMonth')}`}
             </span>
+            {/* struck old rate (REAL oldMonthlyInstallment; SRP strikes the same source) —
+                after the unit, else the unit wraps under the hero figure on phones */}
+            {!isCash && oldMonthly != null && (
+              <s className="num fin-rate-old">{eur(Math.round(oldMonthly))} €</s>
+            )}
           </div>
           {isCash && <div className="md-label-sm">{t('autobahn:finance.fixedPrice')}</div>}
           {isCash && showStrike && (

package/vdp/VdpModules.tsx

@@ -1266,6 +1266,43 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open, initialShowBreakdown]);
 
+  // mobile-only: swipe-down-to-dismiss on the grabber/header (the mockup's drag handle).
+  // The sheet follows the finger (imperative transform — no re-renders while dragging);
+  // released past 90px it slides out and closes, otherwise it springs back. The element
+  // unmounts on close (`open` gate), so the inline transform never leaks into the next open.
+  const sheetRef = React.useRef<HTMLDivElement | null>(null);
+  const dragStartY = React.useRef<number | null>(null);
+  const onGrabStart = (e: React.TouchEvent): void => {
+    // sheet gesture is phone-only — the desktop centered modal must not be draggable
+    if (typeof window !== 'undefined' && window.matchMedia('(min-width: 601px)').matches) return;
+    dragStartY.current = e.touches[0].clientY;
+    if (sheetRef.current) sheetRef.current.style.transition = 'none';
+  };
+  const onGrabMove = (e: React.TouchEvent): void => {
+    if (dragStartY.current == null || !sheetRef.current) return;
+    const dy = e.touches[0].clientY - dragStartY.current;
+    sheetRef.current.style.transform = dy > 0 ? `translateY(${dy}px)` : '';
+  };
+  const onGrabEnd = (e: React.TouchEvent): void => {
+    if (dragStartY.current == null || !sheetRef.current) return;
+    const dy = e.changedTouches[0].clientY - dragStartY.current;
+    dragStartY.current = null;
+    const el = sheetRef.current;
+    el.style.transition = 'transform var(--dur-2, .25s)';
+    if (dy > 90) {
+      el.style.transform = 'translateY(100%)';
+      window.setTimeout(onClose, 200);
+    } else {
+      el.style.transform = '';
+    }
+  };
+  const dragZone = {
+    onTouchStart: onGrabStart,
+    onTouchMove: onGrabMove,
+    onTouchEnd: onGrabEnd,
+    style: { touchAction: 'none' } as React.CSSProperties,
+  };
+
   if (!open) return null;
   const isLease = mode === 'leasing';
   const isCash = mode === 'cash';
@@ -1327,8 +1364,12 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
 
   return (
     <div className="fin-modal-scrim" onClick={onClose}>
-      <div className="fin-modal" role="dialog" aria-modal="true" aria-label={title} onClick={(e) => e.stopPropagation()}>
-        <div className="fin-modal-head">
+      <div className="fin-modal" role="dialog" aria-modal="true" aria-label={title} ref={sheetRef} onClick={(e) => e.stopPropagation()}>
+        {/* mobile grabber (mockup) — swipe down here or on the header to dismiss */}
+        <div className="fin-sheet-grip show-mobile" {...dragZone}>
+          <span className="sheet-handle" style={{ margin: 0 }} />
+        </div>
+        <div className="fin-modal-head" {...dragZone}>
           <h2 className="md-headline-sm hide-mobile" style={{ margin: 0 }}>
             {title}
           </h2>
@@ -1436,12 +1477,12 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                   <span className="num" style={{ fontSize: 34, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-1px' }}>
                     {isCash ? eur(price) : eur(Math.round(monthly))}
                   </span>
-                  {!isCash && oldMonthly != null && (
-                    <s className="num fin-rate-old">{eur(Math.round(oldMonthly))} €</s>
-                  )}
                   <span className="md-body-sm" style={{ fontWeight: 600 }}>
                     {isCash ? '€' : `€ ${t('autobahn:finance.perMonth')}`}
                   </span>
+                  {!isCash && oldMonthly != null && (
+                    <s className="num fin-rate-old">{eur(Math.round(oldMonthly))} €</s>
+                  )}
                 </div>
               </div>
               <div>