@bytebrand/fe-ui-core-autobahn 1.0.111 → 1.0.113

package/cards/CarRow.tsx

@@ -250,6 +250,7 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
             {car.rating && (
               <StatChip tone={ratingTone(car.rating)} icon={ratingTone(car.rating) === 'good' ? 'check' : 'minus'}>
                 {t('autobahn:tier.' + car.rating)}
+                {ratingTone(car.rating) === 'good' && <sup>4</sup>}
               </StatChip>
             )}
           </div>
@@ -296,6 +297,7 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
             {car.rating && (
               <StatChip tone={ratingTone(car.rating)} icon={ratingTone(car.rating) === 'good' ? 'check' : 'minus'}>
                 {t('autobahn:tier.' + car.rating)}
+                {ratingTone(car.rating) === 'good' && <sup>4</sup>}
               </StatChip>
             )}
             <div style={{ flex: 1 }}>

package/cards/cardParts.tsx

@@ -600,7 +600,7 @@ export const PriceHero: React.FunctionComponent<PriceHeroProps> = ({ car, mode,
     <div className={'pp-hero' + (isMoney ? ' pp-hero--buy' : '')}>
       <div className="pp-hero-rate">
         <b className={'num pp-hero-val' + rateLenClass + buyLen6Class}>
-          {isMoney ? value.toLocaleString('de-DE') : fmtRate(value)} €
+          {isMoney ? value.toLocaleString('de-DE') : fmtRate(value)} €{isMoney && <sup>1</sup>}
         </b>
         {/* z.B./old-rate/unit grouped in one stacked column beside the hero figure — mirrors
             the VDP finance-calculator's .fin-rate-unit layout (FinanceCalculator.tsx) exactly.
@@ -900,28 +900,60 @@ interface PpRowProps {
   focus?: boolean;
   /** format as a full euro price (Kaufen) instead of a rounded rate. */
   money?: boolean;
+  t: TranslationFunction;
 }
 
 /**
  * One payment-path row: label (+ a quiet info marker) on the left, the price right-aligned
  * with an optional struck-through previous price above it. Even row spacing reproduces the
- * production "Finanzierung / Leasing / Kaufen" price table the design references.
+ * production "Finanzierung / Leasing / Kaufen" price table the design references. The struck
+ * `old` price gets the same "²" UvpBadge + click-to-open popover as PriceHero's own Kaufen
+ * old-price (same n, same body/close copy) — one-to-one, not a re-styled variant.
  */
-const PpRow: React.FunctionComponent<PpRowProps> = ({ label, value, unit, old, focus, money }) => (
-  <div className={'pp-row' + (focus ? ' pp-row--focus' : '')}>
-    <span className="pp-row-label">
-      {label}
-      <Icon name="info" size={13} stroke={1.9} cls="pp-row-i" />
-    </span>
-    <span className="pp-row-price">
-      {old != null && <span className="pp-old">{old.toLocaleString('de-DE')} €</span>}
-      <span className="pp-now">
-        {unit && <span className="pp-unit">{unit}</span>}
-        <b className="num pp-val">{money ? value.toLocaleString('de-DE') : fmtRate(value)} €</b>
+const PpRow: React.FunctionComponent<PpRowProps> = ({ label, value, unit, old, focus, money, t }) => {
+  const [uvpTooltipOpen, setUvpTooltipOpen] = useState(false);
+  // 5-plus-digit prices (e.g. 60.248 €) shrink to keep the row from crowding — 4-digit values
+  // stay at the base size. Same digit-length technique as PriceHero's buyLen6Class.
+  const valDigits = String(Math.round(value)).length;
+  const valLenClass = valDigits >= 5 ? ' pp-val--len5' : '';
+  return (
+    <div className={'pp-row' + (focus ? ' pp-row--focus' : '')}>
+      <span className="pp-row-label">
+        {label}
+        <Icon name="info" size={13} stroke={1.9} cls="pp-row-i" />
       </span>
-    </span>
-  </div>
-);
+      <span className="pp-row-price">
+        {old != null && (
+          <span
+            className="pp-old"
+            role="button"
+            tabIndex={0}
+            onClick={(e) => {
+              e.stopPropagation();
+              setUvpTooltipOpen((v) => !v);
+            }}
+          >
+            {old.toLocaleString('de-DE')} €
+            <UvpBadge
+              n={2}
+              open={uvpTooltipOpen}
+              onToggle={() => setUvpTooltipOpen((v) => !v)}
+              onClose={() => setUvpTooltipOpen(false)}
+              closeLabel={t('autobahn:modal.close')}
+              body={t('autobahn:card.price.uvpListTooltipBody')}
+            />
+          </span>
+        )}
+        <span className="pp-now">
+          {unit && <span className="pp-unit">{unit}</span>}
+          <b className={'num pp-val' + valLenClass}>
+            {money ? value.toLocaleString('de-DE') : fmtRate(value)} €{money && <sup>1</sup>}
+          </b>
+        </span>
+      </span>
+    </div>
+  );
+};
 
 /**
  * Monthly-rate payment paths (SRP price column, TOP group) — modelled on the legacy design:
@@ -978,7 +1010,7 @@ export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t, c
       </div>
       {hasLease && (
         <div className="pp-lease-row">
-          <PpRow label={t('autobahn:card.price.leasing')} value={car.lease as number} unit="mtl." />
+          <PpRow label={t('autobahn:card.price.leasing')} value={car.lease as number} unit="mtl." t={t} />
           {hasLeasTerms && (
             <div className="pp-sub-terms">
               {/* dedicated keys (not a rework of leaseTerms) so mobile/VDP's own reviewed
@@ -1009,7 +1041,7 @@ export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t, c
 export const PriceKauf: React.FunctionComponent<PricePathsProps> = ({ car, t }) => {
   const showStrike = car.savings != null && car.savings > 600 && car.listPrice != null;
   return (
-    <PpRow label={t('autobahn:card.price.buy')} value={car.price} old={showStrike ? (car.listPrice as number) : null} money />
+    <PpRow label={t('autobahn:card.price.buy')} value={car.price} old={showStrike ? (car.listPrice as number) : null} money t={t} />
   );
 };
 

package/locales/de/autobahn.json

@@ -280,7 +280,7 @@
   "srp": {
     "trust": {
       "topQuality": "Top Qualität",
-      "warranty": "1 Jahr Garantie",
+      "warranty": "12 Monate Garantie",
       "financing": "Günstige Finanzierung",
       "testDrive": "14 Tage Probefahrt"
     },
@@ -497,7 +497,7 @@
     "seo": {
       "title": "{{name}} gebraucht kaufen | auto.de",
       "regPrefix": "EZ",
-      "descriptionSuffix": " – online kaufen oder finanzieren bei auto.de. Inkl. 1 Jahr Garantie & 14 Tage Rückgaberecht."
+      "descriptionSuffix": " – online kaufen oder finanzieren bei auto.de. Inkl. 12 Monate Garantie & 14 Tage Rückgaberecht."
     }
   },
   "fuel": {
@@ -582,14 +582,14 @@
     "heading": "Fahrzeugbeschreibung",
     "showMore": "Mehr anzeigen",
     "showLess": "Weniger anzeigen",
-    "defaultBody": "Dieser {{make}} {{model}} ({{trim}}) überzeugt mit {{power}} und {{gear}}. Das Fahrzeug ist scheckheftgepflegt, unfallfrei und stammt aus {{owners}}. Hand. Erstzulassung {{reg}}, Laufleistung {{km}} km, Außenfarbe {{color}}. Jedes auto.de-Fahrzeug durchläuft einen 130-Punkte-Check und kommt mit 1 Jahr Garantie sowie 14 Tagen Rückgaberecht. Lieferung deutschlandweit bis vor die Tür oder Abholung nach Vereinbarung. Finanzierung und Leasing zu fairen Konditionen direkt online — die monatliche Rate berechnest du oben im Rechner."
+    "defaultBody": "Dieser {{make}} {{model}} ({{trim}}) überzeugt mit {{power}} und {{gear}}. Das Fahrzeug ist scheckheftgepflegt, unfallfrei und stammt aus {{owners}}. Hand. Erstzulassung {{reg}}, Laufleistung {{km}} km, Außenfarbe {{color}}. Jedes auto.de-Fahrzeug durchläuft einen 130-Punkte-Check und kommt mit 12 Monate Garantie sowie 14 Tagen Rückgaberecht. Lieferung deutschlandweit bis vor die Tür oder Abholung nach Vereinbarung. Finanzierung und Leasing zu fairen Konditionen direkt online — die monatliche Rate berechnest du oben im Rechner."
   },
   "trust": {
-    "warranty": "1 Jahr Garantie",
+    "warranty": "12 Monate Garantie",
     "return": "14 Tage Rückgabe",
     "delivery": "Lieferung o. Abholung",
     "inspection": "130-Punkte-Check",
-    "warrantySub": "Sicher fahren - ein ganzes Jahr",
+    "warrantySub": "Sicher fahren - 12 Monate lang",
     "returnSub": "Ohne Angabe von Gründen",
     "deliverySub": "Deutschlandweit flexibel wählen",
     "inspectionSub": "Geprüfte Qualität für mehr Sicherheit"

package/locales/en/autobahn.json

@@ -280,7 +280,7 @@
   "srp": {
     "trust": {
       "topQuality": "Top Quality",
-      "warranty": "1 year warranty",
+      "warranty": "12 months warranty",
       "financing": "Affordable financing",
       "testDrive": "14 days test drive"
     },
@@ -497,7 +497,7 @@
     "seo": {
       "title": "{{name}} used car for sale | auto.de",
       "regPrefix": "Reg.",
-      "descriptionSuffix": " – buy or finance online at auto.de. Incl. 1-year warranty & 14-day return policy."
+      "descriptionSuffix": " – buy or finance online at auto.de. Incl. 12-month warranty & 14-day return policy."
     }
   },
   "fuel": {
@@ -582,14 +582,14 @@
     "heading": "Vehicle description",
     "showMore": "Show more",
     "showLess": "Show less",
-    "defaultBody": "This {{make}} {{model}} ({{trim}}) impresses with {{power}} and {{gear}}. The vehicle has a full service history, is accident-free and comes from owner no. {{owners}}. First registration {{reg}}, mileage {{km}} km, exterior colour {{color}}. Every auto.de vehicle passes a 130-point check and comes with a 1-year warranty as well as a 14-day right of return. Delivery throughout Germany to your door, or collection by appointment. Financing and leasing at fair terms directly online — calculate your monthly rate in the calculator above."
+    "defaultBody": "This {{make}} {{model}} ({{trim}}) impresses with {{power}} and {{gear}}. The vehicle has a full service history, is accident-free and comes from owner no. {{owners}}. First registration {{reg}}, mileage {{km}} km, exterior colour {{color}}. Every auto.de vehicle passes a 130-point check and comes with a 12-month warranty as well as a 14-day right of return. Delivery throughout Germany to your door, or collection by appointment. Financing and leasing at fair terms directly online — calculate your monthly rate in the calculator above."
   },
   "trust": {
-    "warranty": "1-year warranty",
+    "warranty": "12-month warranty",
     "return": "14-day returns",
     "delivery": "Delivery or collection",
     "inspection": "130-point check",
-    "warrantySub": "Drive safe — a full year",
+    "warrantySub": "Drive safe — for 12 months",
     "returnSub": "No questions asked",
     "deliverySub": "Flexible across Germany",
     "inspectionSub": "Inspected quality for extra peace of mind"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.111",
+  "version": "1.0.113",
   "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",
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@bytebrand/car-schema-selectors": "^2.0.7",
-    "@bytebrand/fe-financing": "^5.14.18",
+    "@bytebrand/fe-financing": "^5.14.19",
     "classnames": "2.2.6",
     "clsx": "^2.1.1",
     "d3-format": "1.4.5",

package/theme/md3.css

@@ -55,10 +55,12 @@
   --md-secondary-container: #e7e9f1;
   --md-on-secondary-container: #3a4150;
 
-  /* price-rating + deal accent (green) */
+  /* price-rating + deal accent (green) — same "good" tier green (TIER_COLORS[0], #168A45) and
+     16%-tint background as .fin-eval-pill--good (FinanceCalculator/VdpModules), so the
+     search-list/VDP-header StatChip and the finance-card rating pill read as the same color. */
   --md-good: #0f7b43;
-  --md-good-container: #c8efcf;
-  --md-on-good-container: #04391f;
+  --md-good-container: color-mix(in srgb, #168a45 16%, transparent);
+  --md-on-good-container: #168a45;
   --md-warn-container: #fce3b4;
   --md-on-warn-container: #4a3204;
   --md-error: #ba1a1a;
@@ -437,6 +439,16 @@ line-height: 31px;
   background: var(--md-warn-container);
   color: var(--md-on-warn-container);
 }
+/* "4" footnote (VDP header's "Guter Preis" chip) — .statchip is a flex container like
+   .fin-eval-pill, so the same position:relative/top lift technique applies, just re-tuned for
+   this chip's smaller 12px text. */
+.md3 .statchip sup {
+  position: relative;
+  top: -3px;
+  left: -3px;
+  font-size: 8px;
+  line-height: 8px;
+}
 .md3 .statchip .lucide {
   width: 14px;
   height: 14px;
@@ -4503,11 +4515,15 @@ line-height: 31px;
   top: -7px;
   right: -7px;
 }
+/* positioned against .pp-eyebrow (line ~4476) — a tiny (8px text) span, so stretching between
+   left/right offsets alone (as this used to do) computed a near-zero box width and forced the
+   body text into a tall, narrow, wrapped column. Explicit width, same as the .cc-price/
+   .fin-calc-card/.listcard-price .pp-old tooltip elsewhere, fixes that. */
 .md3 .listcard-price .pricepaths .pp-uvp-tooltip {
   position: absolute;
-  top: 6px;
-  right: -18px;
-  left: -18px;
+  top: 9px;
+  right: -35px;
+  width: 281px;
   z-index: 20;
   padding: 10px 12px;
   border-radius: 15px;
@@ -4608,7 +4624,7 @@ line-height: 31px;
   display: flex;
   flex-direction: row;
   align-items: baseline;
-  gap: 8px;
+  gap: 13px;
   line-height: 1.08;
   min-width: 0;
 }
@@ -4634,6 +4650,27 @@ line-height: 31px;
   letter-spacing: -0.4px;
   white-space: nowrap;
 }
+/* 5-plus-digit price (e.g. 60.248 €) shrinks so it doesn't crowd the row — 4-digit values keep
+   the base 19px above untouched, same digit-length technique as .pp-hero-val--buy-len6/7. */
+.md3 .pp-val.pp-val--len5 {
+  font-size: 16px;
+}
+/* Kaufen row's "1" price footnote marker (desktop .pricepaths stacked rows, PpRow money=true
+   only) — same small/quiet sup treatment as the card's other footnote markers (.fin-eval-pill
+   sup, .fin-rate-main sup, etc.): vertical-align:super does the actual lift, position:relative
+   top just fine-tunes it for this specific 19px price size. */
+.md3 .pp-val sup {
+  position: relative;
+  top: 4px;
+  left: 1px;
+  vertical-align: super;
+  font-family: 'Arial', Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 8px;
+  line-height: 9px;
+  color: #111820;
+}
 /* financing is the ONLY blue, dominant figure — big hero rate */
 .md3 .pp-row--focus .pp-row-label {
   color: var(--md-on-surface);
@@ -4854,13 +4891,22 @@ line-height: 31px;
     color: #0e2238;
     margin-bottom: 2px;
   }
+  /* .pp-old itself needs to be the positioned ancestor for its badge below (same reasoning as
+     .cc-price/.fin-calc-card's own scoped `.pp-hero-old { position: relative }` override) —
+     the base .pp-old rule has no position, so without this the badge would anchor to whatever
+     positioned ancestor happens to be further up instead of sitting on the price text itself. */
+  .md3 .listcard-price .pp-old {
+    position: relative;
+  }
   /* footnote badge (small bordered circle, not a plain <sup>) pinned to the eyebrow's top-right
      corner — absolute against .pp-eyebrow's own position:relative above. Shared by the CarCard
-     hero (.cc-price) and the VDP FinanceCalculator's own rate example (.fin-calc-card). */
+     hero (.cc-price), the VDP FinanceCalculator's own rate example (.fin-calc-card), and
+     CarRow's desktop stacked Kaufen row (.listcard-price .pp-old, PpRow's "2" badge). */
   .md3 .cc-price .pp-eyebrow-badge,
   .md3 .fin-calc-card .pp-eyebrow-badge,
   .md3 .vdp-bottom-bar .pp-eyebrow-badge,
-  .md3 .fin-modal .pp-eyebrow-badge {
+  .md3 .fin-modal .pp-eyebrow-badge,
+  .md3 .listcard-price .pp-old .pp-eyebrow-badge {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -4881,6 +4927,11 @@ line-height: 31px;
     color: #0e2238;
     cursor: pointer;
   }
+  /* CarRow's desktop stacked Kaufen row sits closer to the price text than the card contexts
+     above, so the shared -8px offset sits a touch too far right. */
+  .md3 .listcard-price .pp-old .pp-eyebrow-badge {
+    right: -10px;
+  }
   /* mobile-only nudge: same badge, tucked slightly closer to the eyebrow text on narrow cards. */
   @media (max-width: 1024px) {
     .md3 .cc-price .pp-eyebrow-badge,
@@ -4899,11 +4950,14 @@ line-height: 31px;
     top: -7px;
     right: -12px;
   }
-  /* "3" footnote popover — click the badge above to open, the × or an outside click to close. */
+  /* "3" footnote popover — click the badge above to open, the × or an outside click to close.
+     Also covers CarRow's desktop stacked Kaufen row (.listcard-price .pp-old, PpRow's "2"
+     badge) — same popover, reused rather than re-styled. */
   .md3 .cc-price .pp-uvp-tooltip,
   .md3 .fin-calc-card .pp-uvp-tooltip,
   .md3 .vdp-bottom-bar .pp-uvp-tooltip,
-  .md3 .fin-modal .pp-uvp-tooltip {
+  .md3 .fin-modal .pp-uvp-tooltip,
+  .md3 .listcard-price .pp-old .pp-uvp-tooltip {
     position: absolute;
     top: 6px;
     right: -84px;
@@ -4922,6 +4976,12 @@ line-height: 31px;
     top: -20px;
     right: -110px;
   }
+  /* CarRow's desktop stacked Kaufen row is narrower still (.pp-old sits inline in the price
+     row, not a full-width card), so the shared -84px offset overhangs it — pull it in closer. */
+  .md3 .listcard-price .pp-old .pp-uvp-tooltip {
+    top: 6px;
+    right: -40px;
+  }
   /* .fin-calc-card is narrower than .cc-price / .fin-modal, so the shared -84px offset lets
      the popover overhang the card's right edge — this rule itself is unscoped (applies at
      every width, see the file-wide note above), so the max-width:600px block right below
@@ -4950,7 +5010,8 @@ line-height: 31px;
   .md3 .cc-price .pp-uvp-tooltip-close,
   .md3 .fin-calc-card .pp-uvp-tooltip-close,
   .md3 .vdp-bottom-bar .pp-uvp-tooltip-close,
-  .md3 .fin-modal .pp-uvp-tooltip-close {
+  .md3 .fin-modal .pp-uvp-tooltip-close,
+  .md3 .listcard-price .pp-old .pp-uvp-tooltip-close {
     position: absolute;
     top: -38px;
     right: -35px;
@@ -4968,7 +5029,8 @@ line-height: 31px;
   .md3 .cc-price .pp-uvp-tooltip-body,
   .md3 .fin-calc-card .pp-uvp-tooltip-body,
   .md3 .vdp-bottom-bar .pp-uvp-tooltip-body,
-  .md3 .fin-modal .pp-uvp-tooltip-body {
+  .md3 .fin-modal .pp-uvp-tooltip-body,
+  .md3 .listcard-price .pp-old .pp-uvp-tooltip-body {
     font-family: Arial, Helvetica, sans-serif;
     font-weight: 400;
     font-size: 11px;
@@ -5075,6 +5137,21 @@ line-height: 31px;
     font-size: 43px;
     line-height: 47px;
   }
+  /* CarCard Kaufen hero "1" price footnote marker — same treatment as
+     .fin-rate-main .num.hide-mobile sup (see the desktop .cc-price .pp-hero--buy .pp-hero-val
+     block below for the matching rule at that breakpoint). */
+  .md3 .cc-price .pp-hero--buy .pp-hero-val sup {
+    position: relative;
+    top: 2px;
+    left: 3px;
+    vertical-align: super;
+    font-family: Arial, Helvetica, sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 8px;
+    line-height: 9px;
+    color: #111820;
+  }
   /* Preisbewertung pill + segmented tier bar, grouped in one column exactly like the VDP
      finance-calculator's MOBILE .fin-eval-col (FinanceCalculator.tsx) — replaces the old
      StatChip pill + full-width gradient .pp-bar (see PriceEvalCol in cardParts.tsx). No
@@ -6641,6 +6718,12 @@ line-height: 31px;
   .md3 .gitem {
     padding: 20px 18px;
   }
+  /* title font-size 16→14 on mobile only — desktop keeps the inline style={{ fontSize: 16 }}
+     set in NewMainPage.tsx's GuaranteeBand unchanged; !important is required here to beat
+     that inline style (icon sizes are untouched, only the title text shrinks). */
+  .md3 .gitem .md-title-sm {
+    font-size: 14px !important;
+  }
   /* steps/hiw: the ≤980 Figma vertical-list card already applies here */
   /* --- VDP header card: structured phone layout (desktop-composed VdpHeaderCard,
      hidden on phone via hide-mobile — kept for tablet widths 600-980px where the
@@ -6744,6 +6827,13 @@ line-height: 31px;
   .md3 .zustand-tile:nth-child(n + 3) {
     border-top: 1px solid #d4dde7;
   }
+  /* Garantie label's "more info" link icon — 15x15 on mobile only (desktop keeps the
+     Icon component's own size={14} prop, untouched); higher specificity than any
+     .zustand-tile .lucide sizing rule beats it regardless of source order. */
+  .md3 .zustand-tile a .lucide {
+    width: 15px;
+    height: 15px;
+  }
   .md3 .curated-grid {
     grid-template-columns: 1fr;
     gap: 12px;
@@ -6952,6 +7042,14 @@ line-height: 31px;
     height: 22px;
     margin-top: 1px;
   }
+  /* "12 Monate Garantie" label's "more info" link icon — 15x15 on mobile only (desktop
+     keeps the Icon component's own size={14} prop) — higher specificity than the 22px
+     rule above beats it regardless of source order. */
+  .md3 .trust-strip a .lucide {
+    width: 15px;
+    height: 15px;
+    margin-top: 0;
+  }
   .md3 .trust-strip > div > span {
     display: block;
     font-family: Arial, Helvetica, sans-serif;
@@ -10432,6 +10530,21 @@ color: #005CFF;
     font-size: 43px;
     line-height: 47px;
   }
+  /* CarCard Kaufen hero "1" price footnote marker — same treatment as
+     .fin-rate-main .num.hide-mobile sup, not scoped to a media query since the same offset
+     reads fine against both the mobile and desktop .pp-hero--buy .pp-hero-val sizes above. */
+  .md3 .cc-price .pp-hero--buy .pp-hero-val sup {
+    position: relative;
+    top: 2px;
+    left: 3px;
+    vertical-align: super;
+    font-family: Arial, Helvetica, sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 8px;
+    line-height: 9px;
+    color: #111820;
+  }
 
   /* Finanzierung/Leasing/Kaufen tabs — Figma: only the ACTIVE tab is bold + Deep Navy #0e2238
      inactive text (the shared .fin-tab rule bolds both and uses #111820, since the VDP