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

package/cards/CarRow.tsx

@@ -250,7 +250,6 @@ 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>
@@ -297,7 +296,6 @@ 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 && <sup>1</sup>}
+          {isMoney ? value.toLocaleString('de-DE') : fmtRate(value)} €
         </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,60 +900,28 @@ 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. 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.
+ * production "Finanzierung / Leasing / Kaufen" price table the design references.
  */
-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 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>
+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>
       </span>
-    </div>
-  );
-};
+    </span>
+  </div>
+);
 
 /**
  * Monthly-rate payment paths (SRP price column, TOP group) — modelled on the legacy design:
@@ -1010,7 +978,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." t={t} />
+          <PpRow label={t('autobahn:card.price.leasing')} value={car.lease as number} unit="mtl." />
           {hasLeasTerms && (
             <div className="pp-sub-terms">
               {/* dedicated keys (not a rework of leaseTerms) so mobile/VDP's own reviewed
@@ -1041,7 +1009,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 t={t} />
+    <PpRow label={t('autobahn:card.price.buy')} value={car.price} old={showStrike ? (car.listPrice as number) : null} money />
   );
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.107",
+  "version": "1.0.108",
   "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.16",
+    "@bytebrand/fe-financing": "^5.14.17",
     "classnames": "2.2.6",
     "clsx": "^2.1.1",
     "d3-format": "1.4.5",

package/theme/md3.css

@@ -55,12 +55,10 @@
   --md-secondary-container: #e7e9f1;
   --md-on-secondary-container: #3a4150;
 
-  /* 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. */
+  /* price-rating + deal accent (green) */
   --md-good: #0f7b43;
-  --md-good-container: color-mix(in srgb, #168a45 16%, transparent);
-  --md-on-good-container: #168a45;
+  --md-good-container: #c8efcf;
+  --md-on-good-container: #04391f;
   --md-warn-container: #fce3b4;
   --md-on-warn-container: #4a3204;
   --md-error: #ba1a1a;
@@ -439,16 +437,6 @@ 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;
@@ -4515,15 +4503,11 @@ 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: 9px;
-  right: -35px;
-  width: 281px;
+  top: 6px;
+  right: -18px;
+  left: -18px;
   z-index: 20;
   padding: 10px 12px;
   border-radius: 15px;
@@ -4624,7 +4608,7 @@ line-height: 31px;
   display: flex;
   flex-direction: row;
   align-items: baseline;
-  gap: 13px;
+  gap: 8px;
   line-height: 1.08;
   min-width: 0;
 }
@@ -4650,27 +4634,6 @@ 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);
@@ -4891,22 +4854,13 @@ 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), 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). */
+     hero (.cc-price) and the VDP FinanceCalculator's own rate example (.fin-calc-card). */
   .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 .listcard-price .pp-old .pp-eyebrow-badge {
+  .md3 .fin-modal .pp-eyebrow-badge {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -4927,11 +4881,6 @@ 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,
@@ -4950,14 +4899,11 @@ line-height: 31px;
     top: -7px;
     right: -12px;
   }
-  /* "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. */
+  /* "3" footnote popover — click the badge above to open, the × or an outside click to close. */
   .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 .listcard-price .pp-old .pp-uvp-tooltip {
+  .md3 .fin-modal .pp-uvp-tooltip {
     position: absolute;
     top: 6px;
     right: -84px;
@@ -4976,12 +4922,6 @@ 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
@@ -5010,8 +4950,7 @@ 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 .listcard-price .pp-old .pp-uvp-tooltip-close {
+  .md3 .fin-modal .pp-uvp-tooltip-close {
     position: absolute;
     top: -38px;
     right: -35px;
@@ -5029,8 +4968,7 @@ 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 .listcard-price .pp-old .pp-uvp-tooltip-body {
+  .md3 .fin-modal .pp-uvp-tooltip-body {
     font-family: Arial, Helvetica, sans-serif;
     font-weight: 400;
     font-size: 11px;
@@ -5137,21 +5075,6 @@ 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
@@ -10509,21 +10432,6 @@ 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,7 +100,6 @@ 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>
@@ -3079,6 +3078,7 @@ 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)}