@bytebrand/fe-ui-core-autobahn 1.0.3 → 1.0.5

package/cards/CarRow.tsx

@@ -65,45 +65,45 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({ car, isFavorite, onToggl
       onClick={() => onOpen(car)}
       style={{ background: 'var(--md-sc-lowest)' }}
     >
-      <div className="listcard-media" onMouseEnter={onMediaEnter} onTouchStart={onMediaEnter}>
-        <div className="listcard-media-img">
-          <CardCarousel images={car.gallery} height="100%" fit="contain" />
-          {/* deal badges — ONE compact line: NEU · −€ · 0 € Anz. · −%. The price RATING
-              ('Guter Preis') is NOT here — it lives in the price column (PricePaths meter). */}
-          <div
-            style={{
-              position: 'absolute',
-              top: 10,
-              left: 10,
-              right: 10,
-              zIndex: 3,
-              display: 'flex',
-              flexDirection: 'row',
-              flexWrap: 'nowrap',
-              alignItems: 'center',
-              gap: 5,
-            }}
-          >
-            {car.isNew && <span className="neu-badge">NEU</span>}
-            {car.drop != null ? <DropChip t={t} amount={car.drop} /> : showSave && <SaveChip t={t} amount={car.savings!} />}
-            <ZeroDownChip t={t} show={car.zeroDown} compact />
-            <PercentChip pct={car.dropPct} />
-          </div>
-          <div style={{ position: 'absolute', bottom: 10, right: 10, zIndex: 3 }}>
-            <span className="imglabel">
-              <Icon name="image" size={13} />
-              {car.photos}
-            </span>
-          </div>
-          <div
-            onClick={(e) => e.stopPropagation()}
-            className="show-mobile"
-            style={{ position: 'absolute', top: 8, right: 8, zIndex: 3 }}
-          >
-            <IconButton name="heart" filled active={isFavorite} onClick={onToggleFavorite} label={t('autobahn:card.action.save')} />
-          </div>
+      <div className="listcard-media" style={{ position: 'relative' }} onMouseEnter={onMediaEnter} onTouchStart={onMediaEnter}>
+        <CardCarousel images={car.gallery} height="100%" fit="contain" />
+        {/* deal badges — ONE compact line: NEU · −€ · 0 € Anz. · −%. The price RATING
+            ('Guter Preis') is NOT here — it lives in the price column (PricePaths meter). */}
+        <div
+          style={{
+            position: 'absolute',
+            top: 10,
+            left: 10,
+            right: 10,
+            zIndex: 3,
+            display: 'flex',
+            flexDirection: 'row',
+            flexWrap: 'nowrap',
+            alignItems: 'center',
+            gap: 5,
+          }}
+        >
+          {car.isNew && <span className="neu-badge">NEU</span>}
+          {car.drop != null ? <DropChip t={t} amount={car.drop} /> : showSave && <SaveChip t={t} amount={car.savings!} />}
+          <ZeroDownChip t={t} show={car.zeroDown} compact />
+          <PercentChip pct={car.dropPct} />
+        </div>
+        <div style={{ position: 'absolute', bottom: 10, right: 10, zIndex: 3 }}>
+          <span className="imglabel">
+            <Icon name="image" size={13} />
+            {car.photos}
+          </span>
+        </div>
+        <div
+          onClick={(e) => e.stopPropagation()}
+          className="show-mobile"
+          style={{ position: 'absolute', top: 8, right: 8, zIndex: 3 }}
+        >
+          <IconButton name="heart" filled active={isFavorite} onClick={onToggleFavorite} label={t('autobahn:card.action.save')} />
         </div>
-        {/* activity/trust pill row — always under the image, never overlaid on it. */}
+        {/* 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. 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,13 +494,15 @@ export interface GalleryBadgesProps {
 }
 
 /**
- * Trust/activity pill row rendered under the gallery on the SRP list card — mirrors the mobile
- * VDP gallery header (availability · views · favorites · Geprüft).
+ * 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).
  *
- * PM decision (2026-07-10, 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 pills) is hidden rather than reading as an empty/broken card.
- * It only appears once BOTH counts are real and positive.
+ * 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.
  */
 export const GalleryBadges: React.FunctionComponent<GalleryBadgesProps> = ({ car, t }) => {
   if (!car.viewsCount || !car.favoritesCount) return null;
@@ -508,20 +510,20 @@ export const GalleryBadges: React.FunctionComponent<GalleryBadgesProps> = ({ car
     <div className="gallery-badges">
       {car.availability && (
         <span className="gallery-pill">
-          <Icon name="circle-check" size={16} stroke={2} color="var(--md-good)" />
+          <Icon name="circle-check" size={15} stroke={2} color="var(--md-good)" />
           {car.availability}
         </span>
       )}
       <span className="gallery-pill">
-        <Icon name="eye" size={16} stroke={1.9} />
+        <Icon name="eye" size={15} stroke={1.9} />
         {t('autobahn:card.activity.viewsCount', { count: car.viewsCount })}
       </span>
       <span className="gallery-pill">
-        <Icon name="heart" size={16} stroke={1.9} />
+        <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={16} stroke={1.9} />
+        <Icon name="shield-check" size={15} stroke={1.9} />
         {t('autobahn:card.trust.checked')}
       </span>
     </div>

package/package.json

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

@@ -1002,17 +1002,16 @@
 
 /* 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%; display: flex; flex-direction: column; }
-/* wraps the carousel + its absolute overlays; flexes to fill whatever height the badge row below
-   doesn't need, so the row height stays governed by the grid (like before this row existed). */
-.md3 .listcard-media-img { position: relative; flex: 1 1 auto; min-height: 0; }
-/* activity/trust pill row under the SRP card image (availability · views · favorites · Geprüft).
-   Sizing/radius per Figma spec: 30px tall, 11px corner radius (NOT a full pill), 1px border. */
-.md3 .gallery-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px;
-  border-top: 1px solid var(--md-outline-variant); background: var(--md-sc-lowest); flex: none; }
-.md3 .gallery-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
+.md3 .listcard-media { position: relative; min-height: 100%; }
+/* 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: 13px; font-weight: 600; white-space: nowrap; }
+  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); }
@@ -1298,10 +1297,9 @@
 
 @media (max-width: 600px) {
   .md3 .cards-3, .md3 .cards-2 { grid-template-columns: 1fr; }
-  /* listing card stacks: image (4:3) → badges → info → price */
+  /* listing card stacks: image (4:3) → info → price */
   .md3 .listcard { grid-template-columns: 1fr; }
-  .md3 .listcard-media { min-height: 0; }
-  .md3 .listcard-media-img { aspect-ratio: 4 / 3; flex: none; }
+  .md3 .listcard-media { aspect-ratio: 4 / 3; min-height: 0; }
   .md3 .listcard-price { border-left: 0; border-top: 1px solid var(--md-outline-variant); padding: 14px 16px;
     flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 14px; }
   .md3 .listcard-price .pricepaths { flex: none; min-width: 0; }