@bytebrand/fe-ui-core-autobahn 1.0.64 → 1.0.66

package/cards/cardParts.tsx

@@ -861,6 +861,11 @@ export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t, c
   // same real struck-through reference rate PriceHero shows for the financing tab (oldMonthly) —
   // shown here too now that both rows render at once instead of behind a tab.
   const showOldMonthly = car.oldMonthly != null && car.oldMonthly > car.monthly;
+  // same digit-length shrink technique as PriceHero's own rateLenClass, so a long rate (e.g.
+  // 1.612 €) doesn't overflow the desktop hero's much larger 65px base size.
+  const rateDigits = String(Math.round(car.monthly)).length;
+  const rateLenClass =
+    rateDigits >= 6 ? ' pp-hero-val--len6' : rateDigits === 5 ? ' pp-hero-val--len5' : rateDigits === 4 ? ' pp-hero-val--len4' : '';
   return (
     <div className={'pricepaths' + (className ? ' ' + className : '')}>
       <div className="pp-hero">
@@ -871,7 +876,7 @@ export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t, c
               {(car.oldMonthly as number).toLocaleString('de-DE')} €<sup>2</sup>
             </span>
           )}
-          <b className="num pp-hero-val">
+          <b className={'num pp-hero-val' + rateLenClass}>
             {fmtRate(car.monthly)} €<sup>1</sup>
           </b>
           <span className="pp-hero-unit">

package/package.json

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

@@ -4276,6 +4276,40 @@ line-height: 31px;
 /* struck-through reference rate/price shown next to the tabbed hero price (Figma card) —
    same red strike as .pp-old, sized for the hero context rather than the compact list row. */
 .md3 .pp-hero-old { font-size: 15px; color: var(--md-error); text-decoration: line-through; white-space: nowrap; }
+/* desktop mcard financing hero: same 65px/18px scale already proven (real car data, no overflow)
+   for the grid CarCard's identical .cc-price hero — `.pricepaths` only ever exists inside the
+   SRP card's desktop-only PricePaths output (mobile's PriceHero, used by the tab switcher, has
+   no `.pricepaths` ancestor), so this can't leak into mobile without an extra media query. */
+.md3 .listcard-price .pricepaths .pp-hero-val {
+  font-size: 65px;
+  line-height: 58px;
+  letter-spacing: -2px;
+}
+.md3 .listcard-price .pricepaths .pp-hero-val--len4 { font-size: 50px; line-height: 53px; }
+.md3 .listcard-price .pricepaths .pp-hero-val--len5 { font-size: 43px; line-height: 45px; }
+.md3 .listcard-price .pricepaths .pp-hero-val--len6 { font-size: 37px; line-height: 40px; }
+.md3 .listcard-price .pricepaths .pp-hero-unit { font-size: 18px; font-weight: 700; color: #5b6b7f; }
+/* diagonal red strike (Figma), replacing the plain text-decoration:line-through above — same
+   generic technique .cc-price/.fin-calc-card already use, content-width-independent (the ±2px
+   left/right offsets stretch the line across whatever the old price's own width ends up being). */
+.md3 .listcard-price .pricepaths .pp-hero-old {
+  position: relative;
+  display: inline-block;
+  font-size: 17px;
+  font-weight: 400;
+  color: #0e2238;
+  text-decoration: none;
+}
+.md3 .listcard-price .pricepaths .pp-hero-old::after {
+  content: '';
+  position: absolute;
+  left: -2px;
+  right: -2px;
+  top: 50%;
+  border-top: 2px solid #e60000;
+  transform: rotate(12.53deg);
+  transform-origin: center;
+}
 .md3 .pp-hero-terms { margin-top: 9px; font-size: 11.5px; color: var(--md-on-surface-variant); }
 /* "Details" link at the end of the financing/leasing terms lines (Figma "mcard") — quiet, same
    color as the rest of the terms line but underlined so it still reads as tappable. */

package/ui/CardCarousel.tsx

@@ -11,12 +11,12 @@ export interface CardCarouselProps {
   /** fired with the new active index whenever the slide changes. */
   onChange?: (index: number) => void;
   /**
-   * object-fit for each image; 'contain' adds inset padding by default. 'auto' picks per IMAGE,
-   * comparing that photo's own natural aspect ratio against the box: 'cover' (fills edge-to-edge)
-   * when the crop would be modest, 'contain' (letterboxed, no crop) when it would be severe — a
-   * wide exterior shot usually survives a horizontal crop fine (cars carry background padding on
-   * both sides), a tighter interior/detail shot often doesn't. 'auto' behaves exactly like
-   * 'contain' below 601px viewport width (no change to any existing mobile rendering).
+   * object-fit for each image; 'contain' adds inset padding by default. 'auto' always fills the
+   * box's full WIDTH (never a left/right gap) and lets height follow the image's own aspect
+   * ratio — landscape photos in this taller-than-wide card box typically end up shorter than the
+   * box (a top/bottom gap, filled by the studio-white background), while a portrait/near-square
+   * photo can end up taller than the box and get cropped top/bottom by its overflow:hidden. 'auto'
+   * behaves exactly like 'contain' below 601px viewport width (no change to any mobile rendering).
    */
   fit?: 'cover' | 'contain' | 'auto';
   /** set false to drop the 5%/6% inset padding 'contain' normally adds (e.g. the VDP
@@ -24,9 +24,6 @@ export interface CardCarouselProps {
   padded?: boolean;
 }
 
-/** 'auto' mode: object-fit:cover only up to this much of the image being cropped away. */
-const AUTO_FIT_CROP_THRESHOLD = 0.25;
-
 /**
  * Image carousel for cards — touch-swipeable, dots + hover arrows (desktop).
  * Stops click bubbling so it can live inside a clickable card.
@@ -59,7 +56,6 @@ const CardCarousel: React.FunctionComponent<CardCarouselProps> = ({
   };
   const go = (d: number, e?: React.SyntheticEvent) => jump((i + d + n) % n, e);
   const trackRef = useRef<HTMLDivElement>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
   const tx = useRef<number | null>(null);
 
   // 'auto' mode only diverges from plain 'contain' at desktop widths — below 601px it resolves
@@ -74,38 +70,11 @@ const CardCarousel: React.FunctionComponent<CardCarouselProps> = ({
     mq.addEventListener('change', handler);
     return () => mq.removeEventListener('change', handler);
   }, [fit]);
-  // per-image measured fit (auto mode, desktop only) — keyed by index so each photo in the
-  // gallery gets its own cover/contain call instead of one verdict for the whole carousel.
-  const [autoFits, setAutoFits] = useState<Record<number, 'cover' | 'contain'>>({});
-  const handleLoad = (k: number, el: HTMLImageElement | null) => {
-    if (fit !== 'auto' || !isDesktop || !el) return;
-    const box = containerRef.current;
-    if (!box || !el.naturalWidth || !el.naturalHeight) return;
-    const boxAspect = box.clientWidth / box.clientHeight;
-    const imgAspect = el.naturalWidth / el.naturalHeight;
-    const cropped = imgAspect >= boxAspect ? 1 - boxAspect / imgAspect : 1 - imgAspect / boxAspect;
-    const resolved: 'cover' | 'contain' = cropped > AUTO_FIT_CROP_THRESHOLD ? 'contain' : 'cover';
-    setAutoFits((prev) => (prev[k] === resolved ? prev : { ...prev, [k]: resolved }));
-  };
-  // resolved per-image fit: literal cover/contain pass straight through; 'auto' defaults to the
-  // safe no-crop 'contain' until that image has actually loaded and been measured.
-  const resolvedFit = (k: number): 'cover' | 'contain' =>
-    fit === 'auto' ? (isDesktop ? (autoFits[k] ?? 'contain') : 'contain') : fit;
-  // catches images already complete (browser cache) by the time this mounts — onLoad never
-  // fires for those. Runs after the full commit, so containerRef is guaranteed attached (a ref
-  // callback on the <img> itself isn't: React attaches child refs before the parent's).
-  useEffect(() => {
-    if (fit !== 'auto' || !isDesktop) return;
-    trackRef.current?.querySelectorAll('img').forEach((el, k) => {
-      if (el.complete) handleLoad(k, el);
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fit, isDesktop, gallerySignature]);
+  const autoDesktop = fit === 'auto' && isDesktop;
 
   return (
     <div
       className="cardcar"
-      ref={containerRef}
       style={{ position: 'relative', height, overflow: 'hidden', borderRadius: radius }}
       onTouchStart={(e) => {
         tx.current = e.touches[0].clientX;
@@ -126,28 +95,41 @@ const CardCarousel: React.FunctionComponent<CardCarouselProps> = ({
           transition: 'transform var(--dur-3) var(--ease-emphasized)',
         }}
       >
-        {images.map((src, k) => {
-          const f = resolvedFit(k);
-          return (
-            <img
-              key={k}
-              src={src}
-              alt=""
-              loading="lazy"
-              decoding="async"
-              onLoad={(e) => handleLoad(k, e.currentTarget)}
-              style={{
-                flex: '0 0 100%',
-                width: '100%',
-                height: '100%',
-                objectFit: f,
-                padding: f === 'contain' && padded ? '5% 6%' : 0,
-                boxSizing: 'border-box',
-                background: '#fff',
-              }}
-            />
-          );
-        })}
+        {images.map((src, k) => (
+          <img
+            key={k}
+            src={src}
+            alt=""
+            loading="lazy"
+            decoding="async"
+            style={
+              autoDesktop
+                ? {
+                    // width-anchored: always fills the box's full width (no left/right gap,
+                    // ever); height is 'auto' (NOT a min-height floor — that would force
+                    // object-fit:fill's default stretch/distortion on a narrower photo), so it
+                    // follows the photo's own ratio, cropped top/bottom by the box's
+                    // overflow:hidden when taller than the box, centered so the crop doesn't
+                    // favor either edge.
+                    flex: '0 0 100%',
+                    width: '100%',
+                    height: 'auto',
+                    alignSelf: 'center',
+                    boxSizing: 'border-box',
+                    background: '#fff',
+                  }
+                : {
+                    flex: '0 0 100%',
+                    width: '100%',
+                    height: '100%',
+                    objectFit: fit === 'auto' ? 'contain' : fit,
+                    padding: fit !== 'cover' && padded ? '5% 6%' : 0,
+                    boxSizing: 'border-box',
+                    background: '#fff',
+                  }
+            }
+          />
+        ))}
       </div>
       {/* arrows + dots only when there is actually something to switch to — with a single
           image (e.g. SRP cards before their gallery is lazy-loaded) they are dead controls. */}