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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.25",
+  "version": "1.0.26",
   "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,10 @@
 .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;
+.md3 .vdp-trust-chip { display: inline-flex; align-items: 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; }
-.md3 .vdp-trust-chip .lucide { width: 16px; height: 16px; flex: none; }
+  background: #F5F7FA; color: #1D2A38; border: 1px solid #E5EAF0; flex: none; }
+.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;
@@ -1389,7 +1389,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; }

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)" />