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

package/cards/CarCard.tsx

@@ -157,6 +157,8 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
   // active that's already 3, so NEU is dropped rather than causing a 4th to overflow.
   const activeDealChips = [showDrop || showSave, showPct, !!car.zeroDown].filter(Boolean).length;
   const showNeu = asGoodAsNew && car.isNew && activeDealChips < 3;
+  // tabs the price block can switch to (PriceTabs shows Leasing only when the car has a lease rate)
+  const paymentModes: PaymentMode[] = car.lease != null ? ['financing', 'leasing', 'buy'] : ['financing', 'buy'];
   return (
     <article
       className="mcard mcard--interactive cc-card"
@@ -277,7 +279,21 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
         <div className="cc-price" style={{ marginTop: 0, borderTop: '1px solid var(--md-outline-variant)' }}>
           <PriceTabs car={car} mode={mode} onModeChange={setMode} t={t} />
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, marginTop: 10 }}>
-            <PriceHero car={car} mode={mode} t={t} alwaysShowUnit />
+            {/* every tab's hero stacked in one grid cell (.cc-hero-stack), only the active one
+                visible, bottom-aligned — Kaufen's struck list price sits on its own line above
+                the price, so without this the row (and the card) grew/shrank by that line on
+                every tab switch. Same trick as .cc-terms-stack below. */}
+            <div className="cc-hero-stack">
+              {paymentModes.map((m) => (
+                <div
+                  key={m}
+                  className={'cc-hero-slot' + (m === mode ? '' : ' cc-hero-slot--hidden')}
+                  aria-hidden={m === mode ? undefined : true}
+                >
+                  <PriceHero car={car} mode={m} t={t} alwaysShowUnit />
+                </div>
+              ))}
+            </div>
             <PriceEvalCol car={car} t={t} />
           </div>
           {/* same fallback CardCtaRow already uses below: pages that haven't wired a real
@@ -287,23 +303,21 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
               card keeps one height across Finanzierung/Leasing/Kaufen (Leasing's longer line
               wraps to 2 lines on narrow phones). No change to the visible line itself. */}
           <div className="cc-terms-stack">
-            {(['financing', 'leasing', 'buy'] as PaymentMode[])
-              .filter((m) => m !== 'leasing' || car.lease != null)
-              .map((m) => (
-                <div
-                  key={m}
-                  className={'cc-terms-slot' + (m === mode ? '' : ' cc-terms-slot--hidden')}
-                  aria-hidden={m === mode ? undefined : true}
-                >
-                  <PriceTerms
-                    car={car}
-                    mode={m}
-                    onOpenRateAdjust={onOpenRateAdjust || (() => onOpen(car))}
-                    onShowDetails={onShowFinancingDetails ? () => onShowFinancingDetails(car, m) : undefined}
-                    t={t}
-                  />
-                </div>
-              ))}
+            {paymentModes.map((m) => (
+              <div
+                key={m}
+                className={'cc-terms-slot' + (m === mode ? '' : ' cc-terms-slot--hidden')}
+                aria-hidden={m === mode ? undefined : true}
+              >
+                <PriceTerms
+                  car={car}
+                  mode={m}
+                  onOpenRateAdjust={onOpenRateAdjust || (() => onOpen(car))}
+                  onShowDetails={onShowFinancingDetails ? () => onShowFinancingDetails(car, m) : undefined}
+                  t={t}
+                />
+              </div>
+            ))}
           </div>
         </div>
         {/* Mobile-only row (CardCtaRow itself carries the show-mobile class) — always

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.147",
+  "version": "1.0.149",
   "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
@@ -5556,6 +5574,21 @@ line-height: 31px;
 /* financing/leasing terms line + "Finanzierungsdetails"/"Leasingdetails" link (PriceTerms in
    cardParts.tsx), full-width under the price/rating row. Same quiet typography as .pp-hero-terms
    (PricePaths); the link resets button chrome and reuses the primary color so it reads as tappable. */
+/* CarCard: all tabs' price heroes stacked in one grid cell, only the active one visible,
+   bottom-aligned (the price figure stays put) — Kaufen's struck list price adds a line above the
+   price, which otherwise grew/shrank the price row on every tab switch. The cell is as wide as
+   the WIDEST hero (no min-width: 0 — same auto min-width the lone hero had), so the "Guter
+   Preis" column next to it also keeps one position on every tab. */
+.md3 .cc-hero-stack {
+  display: grid;
+}
+.md3 .cc-hero-slot {
+  grid-area: 1 / 1;
+  align-self: end;
+}
+.md3 .cc-hero-slot--hidden {
+  visibility: hidden;
+}
 /* CarCard: all tabs' terms lines stacked in one grid cell, only the active one visible — the
    cell takes the tallest line's height so switching tabs never changes the card's height. */
 .md3 .cc-terms-stack {
@@ -6575,8 +6608,13 @@ 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 (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. */
+    --fin-sheet-bottom-gap: env(safe-area-inset-bottom, 0px);
     max-width: none;
-    height: min(var(--fin-sheet-fold, 85vh), calc(100% - 24px));
+    height: min(calc(var(--fin-sheet-fold, 85vh) + var(--fin-sheet-bottom-gap)), calc(100% - 24px));
     max-height: none;
     background: #FFFFFF;
     box-shadow: 0px -4px 18px rgba(0, 0, 0, 0.13);
@@ -6586,6 +6624,14 @@ line-height: 31px;
   .md3 .fin-modal.fin-modal--expanded {
     height: 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);
+    }
+  }
   /* set from the frame after the first fold measure (not on open — no 85vh -> fold shrink) */
   .md3 .fin-modal.fin-modal--animated {
     transition: height 0.35s var(--ease-standard, ease);