@bytebrand/fe-ui-core-autobahn 1.0.4 → 1.0.6

package/cards/CarRow.tsx

@@ -102,8 +102,8 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({ car, isFavorite, onToggl
           <IconButton name="heart" filled active={isFavorite} onClick={onToggleFavorite} label={t('autobahn:card.action.save')} />
         </div>
         {/* activity/trust badges — overlaid on the studio-white floor at the bottom of the photo
-            itself (PM ref), not a separate divided strip below it. Opposite corner from the photo
-            count so the two never collide. */}
+            itself (PM ref), not a separate divided strip below it. Bottom-right, raised above the
+            carousel dots and the photo-count badge (positioning lives in .gallery-badges, md3.css). */}
         <GalleryBadges car={car} t={t} />
       </div>
 

package/cards/cardParts.tsx

@@ -494,38 +494,38 @@ export interface GalleryBadgesProps {
 }
 
 /**
- * Trust/activity badges overlaid on the photo itself, bottom-left (PM reference, 2026-07-10) —
- * flat icon+text, no pill border/background/divider, sitting on the studio-white floor every
- * inventory photo already has (see .cc-media/.listcard-media background in md3.css). Mirrors the
- * mobile VDP gallery header (availability · views · favorites · Geprüft).
+ * Trust/activity badges overlaid on the photo itself, bottom-right (PM reference, 2026-07-10),
+ * Figma pill styling (border/radius/height — see .gallery-pill in md3.css). Mirrors the mobile
+ * VDP gallery header (availability · views · favorites · Geprüft).
  *
- * PM decision (Viktoriia — "this logic already exists on prod"): the row is all-or-nothing. A
- * missing or zero view/favorite count is NOT shown as "0×" — the whole row (including the
- * always-on availability/Geprüft items) is hidden rather than reading as an empty/broken card. It
- * only appears once BOTH counts are real and positive.
+ * Each pill is independent, not all-or-nothing: a missing or zero view/favorite count just omits
+ * THAT pill (never shown as "0×") — availability and Geprüft still render on their own terms.
+ * .gallery-badges is anchored via `right`, not `left` (md3.css), so however many pills survive
+ * they stay stuck to the right edge instead of drifting to wherever the row happens to start.
  */
-export const GalleryBadges: React.FunctionComponent<GalleryBadgesProps> = ({ car, t }) => {
-  if (!car.viewsCount || !car.favoritesCount) return null;
-  return (
-    <div className="gallery-badges" style={{ position: 'absolute', left: 10, bottom: 10, zIndex: 3 }}>
-      {car.availability && (
-        <span className="gallery-pill">
-          <Icon name="circle-check" size={15} stroke={2} color="var(--md-good)" />
-          {car.availability}
-        </span>
-      )}
+export const GalleryBadges: React.FunctionComponent<GalleryBadgesProps> = ({ car, t }) => (
+  <div className="gallery-badges">
+    {car.availability && (
+      <span className="gallery-pill">
+        <Icon name="circle-check" size={15} stroke={2} color="var(--md-good)" />
+        {car.availability}
+      </span>
+    )}
+    {!!car.viewsCount && (
       <span className="gallery-pill">
         <Icon name="eye" size={15} stroke={1.9} />
         {t('autobahn:card.activity.viewsCount', { count: car.viewsCount })}
       </span>
+    )}
+    {!!car.favoritesCount && (
       <span className="gallery-pill">
         <Icon name="heart" size={15} stroke={1.9} />
         {t('autobahn:card.activity.favoritesCount', { count: car.favoritesCount })}
       </span>
-      <span className="gallery-pill">
-        <Icon name="shield-check" size={15} stroke={1.9} />
-        {t('autobahn:card.trust.checked')}
-      </span>
-    </div>
-  );
-};
+    )}
+    <span className="gallery-pill">
+      <Icon name="shield-check" size={15} stroke={1.9} />
+      {t('autobahn:card.trust.checked')}
+    </span>
+  </div>
+);

package/cards/types.ts

@@ -114,9 +114,9 @@ export interface AutobahnCar {
 
   // --- gallery activity strip (real data: UserActionsAPI 'stats/viewers', loaded async and
   //     keyed by carId in SearchResultsStore.statsData — see fieldMapping.ts). Absent until that
-  //     fetch resolves. PM decision: the WHOLE badge row (availability/views/favorites/Geprüft)
-  //     is all-or-nothing — it renders only when BOTH counts are present and > 0; a missing or
-  //     zero count hides the entire row rather than showing a "0×" pill (GalleryBadges). ---
+  //     fetch resolves. Each pill in the badge row is independent (GalleryBadges): a missing or
+  //     zero count omits just that pill (never a "0×"), availability/Geprüft still show on their
+  //     own terms — the row is anchored to the right edge so it never looks lopsided. ---
   /** total detail-page views (stats totalCarImpCount) — shown as the eye pill under the image. */
   viewsCount?: number;
   /** total users who favorited this car (stats totalFavCount) — shown as the heart pill under the image. */

package/package.json

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

@@ -1003,12 +1003,15 @@
 /* horizontal listing card (SRP): image | info | price */
 .md3 .listcard { display: grid; grid-template-columns: 300px 1fr 240px; align-items: stretch; }
 .md3 .listcard-media { position: relative; min-height: 100%; }
-/* activity/trust badges overlaid on the photo's studio-white floor, bottom-left (opposite corner
-   from the bottom-right photo-count .imglabel so they never collide) — PM ref, no divider/box,
-   flat icon+text pairs. */
-.md3 .gallery-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
-.md3 .gallery-pill { display: inline-flex; align-items: center; gap: 5px; color: var(--md-on-surface-variant);
-  font-size: 13px; font-weight: 600; white-space: nowrap; }
+/* activity/trust badges overlaid on the photo's studio-white floor, bottom-right, RAISED above
+   the carousel's pagination dots (CardCarousel: bottom:9, ~6px tall) and the bottom-right
+   photo-count .imglabel (bottom:10, 26px tall) so nothing collides. Figma pill styling: 30px
+   tall, 11px corner radius, 1px border (not a full pill, not divider/box-less flat text). */
+.md3 .gallery-badges { position: absolute; right: 10px; bottom: 44px; z-index: 3;
+  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: calc(100% - 20px); }
+.md3 .gallery-pill { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px;
+  border-radius: 11px; border: 1px solid var(--md-outline-variant); background: var(--md-sc-lowest);
+  color: var(--md-on-surface); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
 .md3 .listcard-info  { padding: 16px 18px; display: flex; flex-direction: column; gap: 11px; min-width: 0; }
 .md3 .listcard-price { position: relative; padding: 16px 18px; border-left: 1px solid var(--md-outline-variant);
   display: flex; flex-direction: column; justify-content: flex-start; gap: 16px; background: var(--md-sc-low); }