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

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

@@ -507,7 +507,7 @@ export interface GalleryBadgesProps {
 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 }}>
+    <div className="gallery-badges">
       {car.availability && (
         <span className="gallery-pill">
           <Icon name="circle-check" size={15} stroke={2} color="var(--md-good)" />

package/package.json

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

@@ -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); }