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

package/package.json

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

@@ -2331,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