@bytebrand/fe-ui-core-autobahn 1.0.46 → 1.0.48

package/package.json

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

@@ -1650,12 +1650,17 @@
   /* sheet: no divider under the header; one under the rate row instead (Figma) */
   .md3 .fin-modal-head { border-bottom: 0; padding-bottom: 8px; }
   .md3 .fin-sheet-adjust { border-top: 1px solid var(--fig-tile-border); padding-top: 16px; }
-  /* sheet cash rows (Zahlung/Garantie/Lieferung) — Figma sizes (round 13: bigger still) */
-  .md3 .fin-modal .calcrow { padding: 17px 0; }
+  /* sheet cash rows (Zahlung/Garantie/Lieferung) — Figma sizes (round 14: taller still) */
+  .md3 .fin-modal .calcrow { padding: 20px 0; }
   .md3 .fin-modal .calcrow-label { font-size: 15px; color: var(--fig-gray); }
   .md3 .fin-modal .calcrow-value { font-size: 16px !important; color: var(--fig-navy); font-weight: 700 !important; }
   /* breathing room at the sheet's bottom edge — content must not stick to the viewport lip */
   .md3 .fin-modal-body { padding-bottom: 44px; }
+  /* round 14: the sheet column stretches so the cash CTA row (margin-top:auto) can sink to
+     the bottom with the Figma gap; taller-content modes just keep their natural height */
+  .md3 .fin-modal-body > .show-mobile { min-height: 56vh; }
+  /* inactive mode tabs are dark + bold on phone (Figma) */
+  .md3 .fin-tab:not(.on) { color: var(--fig-navy); font-weight: 700; }
   /* condition tiles: Figma value size + roomier gap to the pills above */
   .md3 .zustand-tile .md-title-sm { font-size: 16.5px; }
   .md3 .vdp-header-extras .zustand-grid { margin-top: 10px; }

package/vdp/FinanceCalculator.tsx

@@ -94,25 +94,29 @@ export const EvalBar: React.FunctionComponent<{ tier: number; leftPct?: number }
 /** Figma CTA icon — document with a check-in-circle badge over its bottom-right corner
  *  (no single lucide glyph matches; composed from file-text + a knocked-out check-circle).
  *  The badge backdrop assumes a filled (primary) button. */
-export const DocCheckIcon: React.FunctionComponent<{ size?: number }> = ({ size = 19 }) => (
-  <span style={{ position: 'relative', display: 'inline-flex', flex: 'none' }}>
-    <Icon name="file-text" size={size} stroke={2} />
-    <span
-      style={{
-        position: 'absolute',
-        right: -3,
-        bottom: -2,
-        display: 'flex',
-        borderRadius: '50%',
-        background: 'var(--md-primary)',
-        padding: 1,
-      }}
-    >
-      {/* badge ≈ half the doc — at 62% it swallowed the document at button size */}
-      <Icon name="check-circle" size={Math.max(9, Math.round(size * 0.5))} stroke={2.8} />
+export const DocCheckIcon: React.FunctionComponent<{ size?: number }> = ({ size = 19 }) => {
+  // inline width/height on BOTH icons — `.mbtn .lucide { width/height: 18px }` otherwise
+  // inflates the badge to full icon size and it swallows the document
+  const badge = Math.max(9, Math.round(size * 0.5));
+  return (
+    <span style={{ position: 'relative', display: 'inline-flex', flex: 'none' }}>
+      <Icon name="file-text" size={size} stroke={2} style={{ width: size, height: size }} />
+      <span
+        style={{
+          position: 'absolute',
+          right: -3,
+          bottom: -2,
+          display: 'flex',
+          borderRadius: '50%',
+          background: 'var(--md-primary)',
+          padding: 1,
+        }}
+      >
+        <Icon name="check-circle" size={badge} stroke={2.8} style={{ width: badge, height: badge }} />
+      </span>
     </span>
-  </span>
-);
+  );
+};
 
 export interface TermChipsProps {
   /** the selectable term values (months), e.g. [12,24,36,48,60,72]. */
@@ -391,6 +395,13 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
         {/* col 1 row 1: hero rate — Figma: "329 €" all-big, then a small stacked column with
             the struck old rate ABOVE "/mtl." (round 11; was a single baseline row) */}
         <div className="fin-rate-main">
+          {/* mobile Kaufen (Figma round 14): struck list price ABOVE the price, right-aligned —
+              replaces the Festpreis + UVP lines, which stay desktop-only */}
+          {isCash && showStrike && (
+            <div className="show-mobile" style={{ justifyContent: 'flex-end' }}>
+              <s className="num fin-rate-old">{eur(listPrice as number)} €</s>
+            </div>
+          )}
           <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
             <span
               className="num"
@@ -409,9 +420,9 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
               </span>
             )}
           </div>
-          {isCash && <div className="md-label-sm">{t('autobahn:finance.fixedPrice')}</div>}
+          {isCash && <div className="md-label-sm hide-mobile">{t('autobahn:finance.fixedPrice')}</div>}
           {isCash && showStrike && (
-            <div className="fin-kauf">
+            <div className="fin-kauf hide-mobile">
               {t('autobahn:finance.uvp')} <s>{eur(listPrice as number)} €</s>
             </div>
           )}

package/vdp/VdpModules.tsx

@@ -1755,7 +1755,8 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                     onChange={(checked) => onToggleAddServices && onToggleAddServices(checked)}
                   />
                 )}
-                <div style={{ display: 'flex', gap: 10 }}>
+                {/* pushed to the sheet's bottom edge — Figma keeps a big breathing gap above */}
+                <div style={{ display: 'flex', gap: 10, marginTop: 'auto' }}>
                   <Button variant="filled" size="lg" style={{ flex: 1 }} onClick={onSecure}>
                     <DocCheckIcon />
                     {t('autobahn:finance.secureOffer')}