@bytebrand/fe-ui-core-autobahn 1.0.45 → 1.0.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.45",
+  "version": "1.0.47",
   "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/vdp/FinanceCalculator.tsx

@@ -94,24 +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 = 18 }) => (
-  <span style={{ position: 'relative', display: 'inline-flex', flex: 'none' }}>
-    <Icon name="file-text" size={size} stroke={2} />
-    <span
-      style={{
-        position: 'absolute',
-        right: -4,
-        bottom: -3,
-        display: 'flex',
-        borderRadius: '50%',
-        background: 'var(--md-primary)',
-        padding: 1,
-      }}
-    >
-      <Icon name="check-circle" size={Math.round(size * 0.62)} stroke={2.6} />
+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]. */

package/vdp/VdpModules.tsx

@@ -1699,16 +1699,17 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
 
             <div className="fin-price-grid">
               <div className="fin-rate-main">
+                {/* Figma Kaufen sheet: struck list price ABOVE the price, aligned to its right
+                    edge (inline-beside wraps — the 44px phone hero fills the whole column) */}
+                {isCash && listPrice != null && listPrice > price && (
+                  <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+                    <s className="num fin-rate-old">{eur(listPrice)} €</s>
+                  </div>
+                )}
                 <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                   <span className="num" style={{ fontSize: 34, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-1px' }}>
                     {isCash ? eur(price) : eur(Math.round(monthly))} €
                   </span>
-                  {/* Figma Kaufen sheet: struck list price top-right beside the big figure */}
-                  {isCash && listPrice != null && listPrice > price && (
-                    <span className="fin-rate-unit" style={{ alignSelf: 'flex-start', paddingTop: 2 }}>
-                      <s className="num fin-rate-old">{eur(listPrice)} €</s>
-                    </span>
-                  )}
                   {!isCash && (
                     <>
                       <span className="md-label-sm" style={{ fontWeight: 600, alignSelf: 'flex-end', paddingBottom: 5 }}>