@bytebrand/fe-ui-core-autobahn 1.0.17 → 1.0.18

package/package.json

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

@@ -1346,13 +1346,26 @@
   .md3 .hiw-step       { flex-direction: row; align-items: flex-start; text-align: left; gap: 14px; }
   .md3 .hiw-step:not(:last-child)::after { display: none; }
   .md3 .hiw-icon-wrap  { margin-bottom: 0; flex: none; }
-  /* --- VDP header card: structured phone layout --- */
+  /* --- VDP header card: structured phone layout (desktop-composed VdpHeaderCard,
+     hidden on phone via hide-mobile — kept for tablet widths 600-980px where the
+     card still shows). The compact mobile-only .vdp-header-summary below is
+     scoped OUT of this and gets its own single-line treatment instead. */
   /* badge above title (no cramped side-by-side) */
   .md3 .vdp-headrow  { flex-direction: column-reverse; align-items: flex-start; gap: 10px; }
   /* facts: aligned 2-column grid instead of a wrapping dot-line */
   .md3 .vdp-meta     { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 14px; margin-top: 14px; }
   .md3 .vdp-meta > span + span::before { content: none; }
   .md3 .vdp-meta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+  /* mobile-only "first screen" identity block: compact single dot-separated line,
+     rating chip inline next to the title (not stacked above it) — overrides the
+     structured-phone-layout rules above, which only make sense for the bulkier
+     desktop card shown at tablet widths. */
+  .md3 .vdp-header-summary .vdp-headrow { flex-direction: row; align-items: center; gap: 10px; }
+  .md3 .vdp-header-summary .vdp-trim { display: none; }
+  .md3 .vdp-header-summary .vdp-meta { display: flex; flex-wrap: wrap; grid-template-columns: none; margin-top: 8px; }
+  .md3 .vdp-header-summary .vdp-meta > span + span::before { content: ''; }
+  .md3 .vdp-header-summary .vdp-meta > span { overflow: visible; text-overflow: clip; }
+  .md3 .vdp-header-summary .vdp-meta .lucide { display: none; }
   /* highlights: one swipeable line, no ragged wrap */
   .md3 .vdp-highlights { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none;
     width: 0; min-width: 100%; }

package/vdp/VdpModules.tsx

@@ -69,7 +69,7 @@ export const VdpHeaderSummary: React.FunctionComponent<VdpHeaderCardProps> = ({
           <h1 className="md-headline" style={{ margin: '0 0 4px' }}>
             {vehicle.make} {vehicle.model}
           </h1>
-          <p className="md-body" style={{ margin: 0, fontSize: 15 }}>
+          <p className="md-body vdp-trim" style={{ margin: 0, fontSize: 15 }}>
             {vehicle.trim} · {vehicle.power}
           </p>
           {/* auto.de-ID lives in the offer card (next to Finanzierungsdetails), not here */}