@bytebrand/fe-ui-core-autobahn 1.0.148 → 1.0.150

package/package.json

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

@@ -5446,6 +5446,24 @@ line-height: 31px;
     order: -1;
     align-self: flex-end;
   }
+  /* ...but without adding a line to the price row: the struck UVP overlays the empty space
+     above the (52px on a 58px line) Kaufen figure, right-aligned over it — so Kaufen's hero is
+     exactly as tall as the Finanzierung/Leasing one (15px Figma gap from the tab underline to
+     the figure on every tab, nothing below it moves on a tab switch; see .cc-hero-stack). */
+  .md3 .cc-price .pp-hero--buy .pp-hero-rate {
+    position: relative;
+  }
+  .md3 .cc-price .pp-hero--buy .pp-hero-unit-group {
+    position: absolute;
+    right: 0;
+    bottom: calc(100% - 11px);
+  }
+  /* nudge the Kaufen figure 3px down (visual only, layout untouched) so the overlaid struck UVP
+     line clears its glyph tops */
+  .md3 .cc-price .pp-hero--buy .pp-hero-val {
+    position: relative;
+    top: 3px;
+  }
   /* Kaufen hero price on mobile — was falling through to the generic (rate-sized) .pp-hero-val
      above (65px, shrinking only via the rate-digit len4/5/6 classes cardParts.tsx never applies
      in Kaufen mode), so real purchase prices had no digit-based shrink at all here and could
@@ -6590,8 +6608,16 @@ line-height: 31px;
      Both capped to the fixed inset:0 scrim's CURRENT visible height (%, not vh — on iOS Safari
      100vh > the visible area while the toolbar shows, which pushed the sheet's top off-screen). */
   .md3 .fin-modal {
+    /* room under the fold for whatever overlays the bottom of the screen: the home-indicator
+       inset, and on iOS 26+ Safari its floating bottom toolbar (.fin-modal--ios-toolbar below) —
+       without it the "Finanzierungs-Details" link ended up hidden behind the toolbar. */
+    --fin-sheet-bottom-gap: env(safe-area-inset-bottom, 0px);
     max-width: none;
-    height: min(var(--fin-sheet-fold, 85vh), calc(100% - 24px));
+    /* capped at the full visible height (not 100% - 24px): when the rate AND the details link
+       don't fit otherwise (small iPhones behind Safari's floating toolbar), the sheet goes all the
+       way up — both must be visible on open */
+    --fin-sheet-collapsed: min(calc(var(--fin-sheet-fold, 85vh) + var(--fin-sheet-bottom-gap)), 100%);
+    height: var(--fin-sheet-collapsed);
     max-height: none;
     background: #FFFFFF;
     box-shadow: 0px -4px 18px rgba(0, 0, 0, 0.13);
@@ -6599,7 +6625,16 @@ line-height: 31px;
     animation: sheet-up var(--dur-2);
   }
   .md3 .fin-modal.fin-modal--expanded {
-    height: calc(100% - 24px);
+    /* never shorter than the collapsed sheet (which may already be full height) */
+    height: max(var(--fin-sheet-collapsed), calc(100% - 24px));
+  }
+  .md3 .fin-modal .fin-modal-body {
+    padding-bottom: calc(13px + var(--fin-sheet-bottom-gap));
+  }
+  /* iOS 26+ Safari: its floating bottom toolbar sits ON TOP of fixed content (~86pt from the
+     screen bottom incl. the home indicator) — class set by FinanceDetailsModal from the UA */
+  .md3 .fin-modal.fin-modal--ios-toolbar {
+    --fin-sheet-bottom-gap: max(env(safe-area-inset-bottom, 0px), 84px);
   }
   /* set from the frame after the first fold measure (not on open — no 85vh -> fold shrink) */
   .md3 .fin-modal.fin-modal--animated {

package/vdp/VdpModules.tsx

@@ -2270,6 +2270,16 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
   const sheetRef = React.useRef<HTMLDivElement | null>(null);
   const [sheetFold, setSheetFold] = React.useState<number | null>(null);
   const [sheetAnimated, setSheetAnimated] = React.useState(false);
+  // iOS 26+ Safari only (UA "Version/26…", not Chrome/Firefox/Edge for iOS): its floating bottom
+  // toolbar overlays fixed content, so the sheet reserves room under its fold (md3.css
+  // .fin-modal--ios-toolbar). Older iOS Safari keeps content above its toolbar by itself.
+  const iosToolbarOverlay = React.useMemo((): boolean => {
+    if (typeof navigator === 'undefined') return false;
+    const ua = navigator.userAgent;
+    if (!/iP(hone|od)/.test(ua) || /CriOS|FxiOS|EdgiOS/.test(ua)) return false;
+    const m = /Version\/(\d+)/.exec(ua);
+    return !!m && Number(m[1]) >= 26;
+  }, []);
   React.useLayoutEffect(() => {
     if (!open) return;
     const sheet = sheetRef.current;
@@ -2554,7 +2564,12 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
   return (
     <div className="fin-modal-scrim" onClick={onClose}>
       <div
-        className={'fin-modal' + (showBreakdown ? ' fin-modal--expanded' : '') + (sheetAnimated ? ' fin-modal--animated' : '')}
+        className={
+          'fin-modal' +
+          (showBreakdown ? ' fin-modal--expanded' : '') +
+          (sheetAnimated ? ' fin-modal--animated' : '') +
+          (iosToolbarOverlay ? ' fin-modal--ios-toolbar' : '')
+        }
         style={sheetFold != null ? ({ '--fin-sheet-fold': `${sheetFold}px` } as React.CSSProperties) : undefined}
         role="dialog"
         aria-modal="true"