@bytebrand/fe-ui-core-autobahn 1.0.149 → 1.0.151

package/package.json

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

@@ -6609,12 +6609,15 @@ line-height: 31px;
      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 (WebKit only: -webkit-touch-callout) Safari's floating bottom toolbar,
-       which sits ON TOP of fixed content — without it the "Finanzierungs-Details" link ended up
-       hidden behind the toolbar. */
+       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(calc(var(--fin-sheet-fold, 85vh) + var(--fin-sheet-bottom-gap)), 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);
@@ -6622,15 +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));
   }
-  @supports (-webkit-touch-callout: none) {
-    .md3 .fin-modal {
-      --fin-sheet-bottom-gap: max(env(safe-area-inset-bottom, 0px), 64px);
-    }
+  /* 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;
@@ -2321,6 +2331,24 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
     else animateSheetScroll(() => 0);
   }, [showBreakdown, scrollSheetToBreakdown, animateSheetScroll]);
 
+  // iOS Safari (26+, "Allow Website Tinting") paints its bottom toolbar area with the page's
+  // <meta name="theme-color"> (site-wide blue #005CCB) — under the open white sheet that showed
+  // as a solid blue band right below the CTA. While the sheet is open, theme-color is white;
+  // on close the previous value(s) are restored. Other pages/states are untouched.
+  React.useEffect(() => {
+    if (!open || typeof document === 'undefined') return;
+    const metas = Array.from(document.querySelectorAll<HTMLMetaElement>('meta[name="theme-color"]'));
+    const prev = metas.map((m) => m.getAttribute('content'));
+    metas.forEach((m) => m.setAttribute('content', '#FFFFFF'));
+    return () => {
+      metas.forEach((m, i) => {
+        const v = prev[i];
+        if (v == null) m.removeAttribute('content');
+        else m.setAttribute('content', v);
+      });
+    };
+  }, [open]);
+
   // 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
@@ -2554,7 +2582,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"