@bytebrand/fe-ui-core-autobahn 1.0.83 → 1.0.85

package/cards/CarCard.tsx

@@ -156,7 +156,9 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
                 t={t}
                 show={car.zeroDown}
                 style={{
-                  width: 104,
+                  // "€0 down payment" (en) doesn't fit the German pill's 104px — only German's
+                  // "0 € Anzahlung" gets the narrow width, every other locale gets more room.
+                  width: t('autobahn:card.price.zeroDown') === '0 € Anzahlung' ? 104 : 125,
                   height: 30,
                   padding: 0,
                   justifyContent: 'center',

package/cards/CarRow.tsx

@@ -112,9 +112,10 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
         {/* 'auto': desktop picks cover/contain per photo (crops only when it wouldn't lose too
             much of the shot); below 601px this is identical to 'contain', so mobile is unchanged. */}
         <CardCarousel images={car.gallery} height="100%" fit="auto" onChange={setPhotoIndex} />
-        {/* deal badges — ONE compact line: NEU · −€ · 0 € Anz. · −%, plus the "⚡ Angebot" badge
-            (Figma) on its own line below. The price RATING ('Guter Preis') is NOT here — it
-            lives in the price column (PriceMeter). */}
+        {/* deal badges — ONE compact line, Figma order: −€ (drop/save) · −% · 0 € Anz. · NEU
+            (NEU always last, dropped first on overflow — see activeDealChips below), plus the
+            "⚡ Angebot" badge (Figma) on its own line below. The price RATING ('Guter Preis') is
+            NOT here — it lives in the price column (PriceMeter). */}
         <div
           style={{
             position: 'absolute',
@@ -129,8 +130,8 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
           }}
         >
           <div style={{ display: 'flex', flexWrap: 'nowrap', alignItems: 'center', gap: 5 }}>
-            {showNeu && <span className="neu-badge">NEU</span>}
             {car.drop != null ? <DropChip t={t} amount={car.drop} /> : showSave && <SaveChip t={t} amount={car.savings!} />}
+            <PercentChip pct={car.dropPct} />
             <ZeroDownChip t={t} show={car.zeroDown} compact className="show-mobile" />
             <ZeroDownChip
               t={t}
@@ -147,7 +148,7 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
                 fontWeight: 700,
               }}
             />
-            <PercentChip pct={car.dropPct} />
+            {showNeu && <span className="neu-badge">NEU</span>}
           </div>
           <OfferBadge show={showOfferBadge} t={t} />
         </div>

package/package.json

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