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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "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,30 @@
   .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 (per mockup): bare title (no rating
+     chip — that lives next to the price in the finance card instead), one muted
+     compact dot-separated fact line (km/EZ/Getriebe/Kraftstoff only, no "1. Hand",
+     no icons) — 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: flex-start; gap: 10px; }
+  .md3 .vdp-header-summary .vdp-headrow .statchip { display: none; }
+  .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: 6px;
+    font-size: 13.5px; font-weight: 400; color: var(--md-on-surface-variant); }
+  .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; }
+  .md3 .vdp-header-summary .vdp-meta > span:nth-child(5) { 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/FinanceCalculator.tsx

@@ -275,8 +275,9 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
 
   return (
     <div className="mcard mcard--elevated" style={{ padding: 20 }}>
-      {/* header */}
-      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
+      {/* header — desktop only; mobile goes straight into the tabs (see mockup: no card
+          title above Finanzierung/Leasing/Kaufen on phone). */}
+      <div className="fin-card-header hide-mobile" style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
         <span
           style={{
             width: 34,

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 */}