@bytebrand/fe-ui-core-autobahn 1.0.108 → 1.0.109

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/package.json

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

@@ -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
@@ -10432,6 +10509,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

package/vdp/VdpModules.tsx

@@ -100,6 +100,7 @@ export const VdpHeaderSummary: React.FunctionComponent<VdpHeaderCardProps> = ({
             icon={vehicle.rating === 'fair' ? 'minus' : 'check'}
           >
             {t('autobahn:tier.' + vehicle.rating)}
+            {vehicle.rating !== 'fair' && <sup>4</sup>}
           </StatChip>
         )}
       </div>
@@ -3078,7 +3079,6 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                     <div className="fin-sheet-terms">
                       <div className="md-title-sm" style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                         {t('autobahn:finance.termSelectionMonths')}
-                        <Icon name="info" size={13} color="var(--md-on-surface-variant)" />
                       </div>
                       <TermChips
                         options={termVals.filter((v) => v !== 12 && v !== 96)}