@bytebrand/fe-ui-core-autobahn 1.0.25 → 1.0.27

package/package.json

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

@@ -157,10 +157,11 @@
 .md3 .listcard-chips .chip:hover { background: var(--md-surface); border-color: var(--md-outline-variant); }
 /* VDP trust row (Sofort verfügbar/views/favorites/Geprüft) — mobile-only, so the figma
    push-chip palette is used literally (light blue-gray fill, dark bold label). */
-.md3 .vdp-trust-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
-  border-radius: 11px; font-size: 11px; font-weight: 700; line-height: 1; cursor: default; white-space: nowrap;
-  background: #F5F7FA; color: #1D2A38; border: 1px solid #E5EAF0; }
-.md3 .vdp-trust-chip .lucide { width: 16px; height: 16px; flex: none; }
+.md3 .vdp-trust-chip { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 30px;
+  padding: 0 9px; border-radius: 11px; font-size: 11px; font-weight: 700; line-height: 1; cursor: default;
+  white-space: nowrap; background: #F5F7FA; color: #1D2A38; border: 1px solid #E5EAF0;
+  flex: 1 1 auto; /* the four chips stretch to fill the block width (mockup), min = natural width */ }
+.md3 .vdp-trust-chip .lucide { width: 14px; height: 14px; flex: none; }
 
 /* status / rating chip (no CTA) */
 .md3 .statchip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px;
@@ -1316,7 +1317,7 @@
   /* mobile-only "first screen": identity + trust row BEFORE the finance card, highlights/
      condition tiles moved AFTER it (both split out of the desktop-only VdpHeaderCard,
      which stays bundled inside .vdp-gallery, hidden on mobile via hide-mobile). */
-  .md3 .vdp-header-summary { order: 2; padding: 0 4px; margin-bottom: 4px; }
+  .md3 .vdp-header-summary { order: 2; padding: 0; margin-bottom: 4px; /* flush with the card edges so the trust chips span the same width */ }
   .md3 .vdp-aside      { order: 3; }
   .md3 .vdp-header-extras  { order: 4; margin-top: 16px; }
   .md3 .vdp-details    { order: 5; }
@@ -1389,7 +1390,7 @@
   .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 + span::before { content: ''; margin: 0 8px; }
   .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; }
@@ -1492,12 +1493,30 @@
 .md3 .push-badge--discount { background: #E60000; color: #fff; }
 .md3 .push-badge--down { background: #EAF2FF; color: #005CFF; border: 1px solid rgba(0,92,255,.05); }
 
+/* "Rate anpassen" sheet (mobile modal) — mockup slider rows: bordered current-value box
+   above the slider; term chips as one flat row of plain numbers (no "Mon." suffix). */
+.md3 .fin-val-box { display: inline-block; border: 1px solid var(--md-outline-variant); border-radius: 7px;
+  padding: 4px 9px; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; background: var(--md-sc-lowest); }
+.md3 .fin-sheet-terms .term-chips { display: flex; flex-wrap: wrap; gap: 8px; }
+.md3 .fin-sheet-terms .term-chip { flex: 1 1 0; min-width: 46px; height: 40px; border-radius: 8px; padding: 0 2px; }
+.md3 .fin-sheet-terms .tc-unit { display: none; }
+/* mockup sliders show no min/max end labels — the boxed current value carries the figure */
+.md3 .fin-sheet-adjust .mslider + div { display: none; }
+
 @media (max-width: 600px) {
-  /* full-bleed gallery: edge-to-edge, app-like (production pattern) */
-  .md3 .vdp-gallerybox { margin: 0 -24px; border-radius: 0; border: 0; box-shadow: none; }
+  /* full-bleed gallery: edge-to-edge, app-like; mockup image band is short+wide (~390×222,
+     not 4:3) so the whole finance card — incl. Rate anpassen — fits the first screen */
+  .md3 .vdp-gallerybox { margin: 0 -24px; border-radius: 0; border: 0; box-shadow: none;
+    height: 222px; aspect-ratio: auto; }
+  /* controls row straddles the image's bottom edge (mockup), half-on half-off */
+  .md3 .gallery-controls-row { margin-top: -17px; position: relative; z-index: 3; padding: 0 2px; }
   /* the carousel's own overlay dots move into the below-image controls row (page-rendered;
      the dots div carries an inline display:flex — hence !important) */
   .md3 .vdp-gallerybox .cardcar-dots { display: none !important; }
+  /* tighter stacked rhythm so title→chips→finance card land above the fold */
+  .md3 .vdp-grid { gap: 14px; }
+  .md3 .fin-tabs { margin-bottom: 12px; }
+  .md3 .fin-info { margin-top: 10px; padding-top: 10px; }
   /* mockup hero rate is a notch bigger on phone (inline style says 48 — hence !important) */
   .md3 .fin-rate-main .num { font-size: 52px !important; letter-spacing: -1.5px !important; }
   /* narrower rating column (figma bar is 115px) frees room for the bigger rate; let the

package/vdp/FinanceCalculator.tsx

@@ -530,7 +530,9 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
               }}
             >
               <Icon name="info" size={18} color="var(--md-on-surface-variant)" style={{ flex: 'none' }} />
-              <span className="md-label-sm" style={{ maxWidth: 82, lineHeight: 1.5 }}>
+              {/* no max-width: "Finanzierungsdetails" is one unbreakable word — capping the
+                  span clipped it mid-word instead of wrapping */}
+              <span className="md-label-sm" style={{ lineHeight: 1.5 }}>
                 {mode === 'leasing' ? t('autobahn:finance.leasingDetails') : t('autobahn:finance.financingDetails')}
               </span>
             </button>

package/vdp/VdpModules.tsx

@@ -176,7 +176,7 @@ export interface VdpTrustRowProps {
  *  130-point inspected, so this one is always shown, not conditional real data). */
 export const VdpTrustRow: React.FunctionComponent<VdpTrustRowProps> = ({ available, viewCount, favCount, t }) => (
   // one swipeable line (mockup), never a ragged second row
-  <div style={{ display: 'flex', flexWrap: 'nowrap', overflowX: 'auto', scrollbarWidth: 'none', alignItems: 'center', gap: 6, marginTop: 10 }}>
+  <div style={{ display: 'flex', flexWrap: 'nowrap', overflowX: 'auto', scrollbarWidth: 'none', alignItems: 'center', gap: 5, marginTop: 10 }}>
     {available && (
       <span className="vdp-trust-chip">
         <Icon name="check" size={13} stroke={2.4} color="var(--md-good)" />
@@ -1011,7 +1011,10 @@ const ToggleRow: React.FunctionComponent<{
   onChange: (checked: boolean) => void;
 }> = ({ label, price, checked, disabled, onChange }) => (
   <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
-    <span className="md-title-sm">{label}</span>
+    <span className="md-title-sm" style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
+      {label}
+      <Icon name="info" size={13} color="var(--md-on-surface-variant)" />
+    </span>
     <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
       {price && (
         <span className="num" style={{ fontWeight: 700, fontSize: 13.5 }}>
@@ -1028,6 +1031,8 @@ export interface FinanceDetailsModalProps {
   open: boolean;
   /** active payment mode — drives labels + which legal example shows. */
   mode: 'fin' | 'leasing' | 'cash';
+  /** car make+model — mobile sheet subtitle under the title (mockup). */
+  vehicleName?: string;
   price: number;
   monthly: number;
   apr: number;
@@ -1092,6 +1097,7 @@ export interface FinanceDetailsModalProps {
 export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalProps> = ({
   open,
   mode,
+  vehicleName,
   price,
   monthly,
   apr,
@@ -1204,8 +1210,13 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
           <h2 className="md-headline-sm hide-mobile" style={{ margin: 0 }}>
             {title}
           </h2>
-          <h2 className="md-headline-sm show-mobile" style={{ margin: 0 }}>
+          <h2 className="md-headline-sm show-mobile" style={{ margin: 0, flexDirection: 'column', alignItems: 'flex-start', gap: 2 }}>
             {mobileTitle}
+            {vehicleName && (
+              <span className="md-label-sm" style={{ fontWeight: 400 }}>
+                {vehicleName}
+              </span>
+            )}
           </h2>
           <button className="icon-btn" onClick={onClose} aria-label={t('autobahn:modal.close')}>
             <Icon name="x" size={20} />
@@ -1356,20 +1367,25 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                   <Button variant="filled" size="lg" icon="shield-check" style={{ flex: 1 }} onClick={onSecure}>
                     {t('autobahn:finance.secureOffer')}
                   </Button>
-                  <Button variant="outlined" size="lg" icon="phone" style={{ width: 52, flex: 'none' }} onClick={onCall} />
+                  {/* padding:0 — mbtn--lg's 30px side padding left no room for the icon at width 52 */}
+                  <Button variant="outlined" size="lg" icon="phone" style={{ width: 52, flex: 'none', padding: 0, borderRadius: 12 }} onClick={onCall} />
                 </div>
               </>
             ) : (
               <>
                 {adjustable && (
-                  <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+                  <div className="fin-sheet-adjust" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                     <div>
-                      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
-                        <span className="md-title-sm">{t('autobahn:finance.downPaymentSliderLabel')}</span>
-                        <span className="num" style={{ fontWeight: 700 }}>
+                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
+                        <span className="md-title-sm" style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
+                          {t('autobahn:finance.downPaymentSliderLabel')}
+                          <Icon name="info" size={13} color="var(--md-on-surface-variant)" />
+                        </span>
+                        <span className="num" style={{ fontWeight: 700, color: 'var(--md-primary)' }}>
                           {eur(down)} €
                         </span>
                       </div>
+                      <span className="fin-val-box num">{eur(down)} €</span>
                       <Slider
                         min={downMin as number}
                         max={downMax as number}
@@ -1381,12 +1397,16 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                     </div>
                     {isLease && annualMileage != null && onAnnualMileageChange && (
                       <div>
-                        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
-                          <span className="md-title-sm">{t('autobahn:finance.annualMileageLabel')}</span>
-                          <span className="num" style={{ fontWeight: 700 }}>
+                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
+                          <span className="md-title-sm" style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
+                            {t('autobahn:finance.annualMileageLabel')}
+                            <Icon name="info" size={13} color="var(--md-on-surface-variant)" />
+                          </span>
+                          <span className="num" style={{ fontWeight: 700, color: 'var(--md-primary)' }}>
                             {eur(annualMileage)} km
                           </span>
                         </div>
+                        <span className="fin-val-box num">{eur(annualMileage)} km</span>
                         <Slider
                           min={annualMileageMin}
                           max={annualMileageMax}
@@ -1397,9 +1417,10 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                         />
                       </div>
                     )}
-                    <div>
-                      <div className="md-title-sm" style={{ marginBottom: 8 }}>
-                        {t('autobahn:finance.termSelection')}
+                    <div className="fin-sheet-terms">
+                      <div className="md-title-sm" style={{ display: 'flex', alignItems: 'center', gap: 5, marginBottom: 8 }}>
+                        {t('autobahn:finance.termSelectionMonths')}
+                        <Icon name="info" size={13} color="var(--md-on-surface-variant)" />
                       </div>
                       <TermChips options={termVals} value={term} onChange={onTermChange as (n: number) => void} t={t} />
                     </div>
@@ -1427,15 +1448,16 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                   <Button variant="filled" size="lg" icon="shield-check" style={{ flex: 1 }} onClick={onSecure}>
                     {t('autobahn:finance.requestRate')}
                   </Button>
-                  <Button variant="outlined" size="lg" icon="phone" style={{ width: 52, flex: 'none' }} onClick={onCall} />
+                  {/* padding:0 — mbtn--lg's 30px side padding left no room for the icon at width 52 */}
+                  <Button variant="outlined" size="lg" icon="phone" style={{ width: 52, flex: 'none', padding: 0, borderRadius: 12 }} onClick={onCall} />
                 </div>
 
-                <button type="button" onClick={() => setShowBreakdown((v) => !v)} style={expanderBtnStyle}>
+                {/* centered ⓘ details toggle (mockup shows no chevron) */}
+                <button type="button" onClick={() => setShowBreakdown((v) => !v)} style={{ ...expanderBtnStyle, justifyContent: 'center', padding: '2px 0' }}>
                   <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
                     <Icon name="info" size={16} color="var(--md-primary)" />
                     {isLease ? t('autobahn:modal.leasingDetails') : t('autobahn:modal.financingDetails')}
                   </span>
-                  <Icon name={showBreakdown ? 'chevron-up' : 'chevron-down'} size={18} color="var(--md-primary)" />
                 </button>
                 {showBreakdown && (
                   <div>