@bytebrand/fe-ui-core-autobahn 1.0.36 → 1.0.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.36",
+  "version": "1.0.38",
   "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; }
@@ -1464,9 +1466,10 @@
   .md3 .vdp-header-summary .vdp-meta > span + span::before { content: ''; margin: 0 8px; }
   .md3 .vdp-header-summary .vdp-meta > span { overflow: visible; text-overflow: clip; }
   .md3 .vdp-header-summary .vdp-meta .lucide { display: none; }
-  /* compact dot-line = km/EZ/Getriebe/Kraftstoff only (mockup) — hides Hand + Karosserie,
-     which only appear in the 2-col fact grid */
-  .md3 .vdp-header-summary .vdp-meta > span:nth-child(n+5) { display: none; }
+  /* compact dot-line = km/EZ/Getriebe/Kraftstoff · Karosserie (round 9: body type must be
+     visible here — was previously invisible under nth-child(n+5), which also swallowed it).
+     Only "1. Hand" (item 5) stays hidden; item 6 (body type) now renders. */
+  .md3 .vdp-header-summary .vdp-meta > span:nth-child(5) { display: none; }
   /* highlights: the ≤980 Figma 2-col grid applies here too (no swipe-line since round 9) */
   /* condition row: 2×2 on phone */
   .md3 .zustand-grid   { grid-template-columns: 1fr 1fr; }

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>