@bytebrand/fe-ui-core-autobahn 1.0.118 → 1.0.119

package/cards/CarCard.tsx

@@ -20,7 +20,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { TranslationFunction } from '../types';
 
-import { CardCarousel, IconButton, SaveChip, Button } from '../ui';
+import { CardCarousel, SaveChip, Button } from '../ui';
 import {
   SpecLine,
   EcoLine,
@@ -174,10 +174,30 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
         {/* max two overlays: heart + ONE deal signal — rating moved next to the price */}
         <div
           className="cc-fav"
-          style={{ position: 'absolute', top: 6, right: 6, zIndex: 6 }}
+          style={{ position: 'absolute', top: 14, right: 9, zIndex: 6 }}
           onClick={(e) => e.stopPropagation()}
         >
-          <IconButton name="heart" filled active={isFavorite} onClick={onToggleFavorite} label={t('autobahn:card.action.save')} />
+          {/* Custom heart (not lucide's default 'heart') — scoped here via a hand-rolled
+              button+svg instead of IconButton/Icon's name-based registry lookup, so this
+              doesn't change the "heart" icon anywhere else it's used (e.g. CarRow). Same
+              active/inactive color logic IconButton+Icon had: active fills solid
+              var(--md-primary), inactive stays an outline (previously 'currentColor',
+              now this Figma-exact icon's own #08162A stroke). */}
+          <button
+            className="icon-btn icon-btn--filled"
+            onClick={onToggleFavorite}
+            aria-label={t('autobahn:card.action.save')}
+          >
+            <svg width="22" height="22" viewBox="0 0 22 22" fill={isFavorite ? 'var(--md-primary)' : 'none'} xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M11 18.7915C11 18.7915 4.125 14.8498 4.125 9.34981C4.12463 8.54932 4.37379 7.76862 4.83781 7.11634C5.30183 6.46405 5.95763 5.97262 6.71396 5.71043C7.47029 5.44823 8.28955 5.42831 9.05773 5.65343C9.82591 5.87855 10.5048 6.33752 11 6.96648C11.4952 6.33752 12.1741 5.87855 12.9423 5.65343C13.7105 5.42831 14.5297 5.44823 15.286 5.71043C16.0424 5.97262 16.6982 6.46405 17.1622 7.11634C17.6262 7.76862 17.8754 8.54932 17.875 9.34981C17.875 14.8498 11 18.7915 11 18.7915Z"
+                stroke={isFavorite ? 'var(--md-primary)' : '#08162A'}
+                strokeWidth={1.8}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </button>
         </div>
         {/* top-left signal stack (heart is top-right): NEU badge + ONE deal signal + the
             "⚡ Angebot" badge (own line, Figma) below it. DropChip takes precedence over
@@ -187,7 +207,7 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
             className="cc-badges"
             style={{
               position: 'absolute',
-              top: 10,
+              top: 16,
               left: 10,
               zIndex: 3,
               display: 'flex',
@@ -213,7 +233,7 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
                   background: 'rgb(204, 222, 255)',
                   border: '1px solid rgba(0, 92, 255, 0.05)',
                   borderRadius: 15,
-                  fontFamily: 'Arial',
+                  fontFamily: 'Arial, Arimo, sans-serif',
                   fontWeight: 700,
                   fontSize: 13,
                   lineHeight: '15px',
@@ -240,7 +260,11 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
           <GalleryActivityPill viewsCount={car.viewsCount} favoritesCount={car.favoritesCount} />
         </div>
       </div>
-      <div style={{ padding: '8px 18px', display: 'flex', flexDirection: 'column', gap: 0, flex: 1 }}>
+      {/* padding-top: 0 (was 8px) + marginTop: -5 — not just 0, the ask was 0 AND 5px higher
+          still than that zero-padding baseline, so a negative margin pulls the whole block up
+          past where padding-top:0 alone would leave it. Bottom/side padding (8px/18px)
+          untouched. */}
+      <div style={{ padding: '0 18px 8px', marginTop: -3, display: 'flex', flexDirection: 'column', gap: 0, flex: 1 }}>
         <div>
           <div className="md-title" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
             {car.make} {car.model}
@@ -250,7 +274,7 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
           </div>
         </div>
         <SpecLine items={cardSpec(car)} oneLine />
-        <div className="cc-price" style={{ marginTop: 4, borderTop: '1px solid var(--md-outline-variant)' }}>
+        <div className="cc-price" style={{ marginTop: 0, borderTop: '1px solid var(--md-outline-variant)' }}>
           <PriceTabs car={car} mode={mode} onModeChange={setMode} t={t} />
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, marginTop: 10 }}>
             <PriceHero car={car} mode={mode} t={t} alwaysShowUnit />
@@ -283,7 +307,7 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
           style={{
             marginTop: 'auto',
             borderTop: 'none',
-            fontFamily: 'Arial, Helvetica, sans-serif',
+            fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
             fontStyle: 'normal',
             fontWeight: 400,
             fontSize: 11,

package/cards/cardParts.tsx

@@ -56,6 +56,18 @@ function stripParen(s: string): string {
   return s.replace(/\s*\(.*\)/, '');
 }
 
+/**
+ * Opposite of stripParen, for car.power specifically: pull the PS value OUT of the trailing
+ * parenthetical instead of discarding it, e.g. '145 kW (197 PS)' → '197 PS' — the card wants
+ * PS only, no kW at all. Regex requires the paren to actually contain "N PS" (not just any
+ * parenthetical) and falls back to the plain stripParen(kW) result when it doesn't, so a power
+ * string without a PS conversion still renders something instead of going blank.
+ */
+function extractPS(s: string): string {
+  const m = s.match(/\((\d+\s*PS)\)\s*$/i);
+  return m ? m[1].replace(/\s+/, ' ') : stripParen(s);
+}
+
 // Compact spec for cards: short fuel/gear labels so all five values fit ONE line
 // without clipping.
 const FUEL_SHORT: Record<string, string> = {
@@ -75,7 +87,7 @@ export function cardSpec(car: AutobahnCar): string[] {
   return [
     fmtKm(car.km),
     car.reg,
-    stripParen(car.power),
+    extractPS(car.power),
     FUEL_SHORT[fuel] || fuel,
     GEAR_SHORT[car.gear] || car.gear,
   ];
@@ -799,7 +811,7 @@ export const CardCtaRow: React.FunctionComponent<CardCtaRowProps> = ({ car, mode
         background: '#005cff',
         borderRadius: 16,
         padding: '0 8px',
-        fontFamily: 'Arial',
+        fontFamily: 'Arial, Arimo, sans-serif',
         fontStyle: 'normal',
         fontWeight: 700,
         fontSize: 13,
@@ -877,7 +889,7 @@ export const CardCtaRow: React.FunctionComponent<CardCtaRowProps> = ({ car, mode
         border: '1.6px solid #5b6b7f',
         borderRadius: 16,
         padding: '0 6px',
-        fontFamily: 'Arial',
+        fontFamily: 'Arial, Arimo, sans-serif',
         fontStyle: 'normal',
         fontWeight: 700,
         fontSize: 13,

package/compat/ButtonOld/Button.styl

@@ -6,7 +6,7 @@
   margin: 0
 
   background-color: $primary
-  font-family: 'Arial', sans-serif
+  font-family: 'Arial', 'Arimo', sans-serif
 
   min-height: 28px
   min-width: 140px

package/compat/Checkbox/Checkbox.styl

@@ -4,7 +4,12 @@
   position: relative
   display: inline-block
   vertical-align: middle
-  outline: none !important
+  // Was `outline: none !important` — the !important beat .container:focus below regardless
+  // of it being more specific (pseudo-class) or coming later, permanently killing the
+  // custom focus outline that rule was clearly written to show. This class only sets the
+  // resting-state default (no !important needed — nothing else here competes for it), so
+  // :focus's own outline declaration can win normally on focus, as intended.
+  outline: none
 
 .wrapInput
   display flex;

package/compat/Checkbox/Checkbox.tsx

@@ -115,7 +115,17 @@ class Checkbox extends React.Component<ICheckboxProps, {}> {
     );
 
     return (
-      <div className={containerClasses} tabIndex={1} onFocus={this.props.onFocus} onBlur={this.props.onBlur} onKeyPress={this.onKeyPress}>
+      // tabIndex: was 1 (a positive value) — a well-known anti-pattern (WCAG 2.4.3):
+      // positive tabindex elements are visited in their own ascending-order pass BEFORE
+      // every tabindex="0"/naturally-focusable element on the page, regardless of where
+      // they sit in the DOM. In BaseModal's new focus trap (which walks the panel's
+      // focusable elements in DOM order to decide where Tab should wrap) that mismatch
+      // made this checkbox unreachable by Tab entirely inside a trapped modal — verified
+      // live: 0 hits in 20 Tab presses cycling the RegistrationForm consent checkbox.
+      // 0 makes it a normal stop in DOM-order tab flow, matching the trap's own model and
+      // putting it where a sighted user would visually expect it (after the fields above,
+      // before the CTA below) instead of unpredictably early.
+      <div className={containerClasses} tabIndex={0} onFocus={this.props.onFocus} onBlur={this.props.onBlur} onKeyPress={this.onKeyPress}>
         <label className={labelClasses}>
           <div className={wrapInputClasses}>
             {/* Visual representation of the checkbox */}

package/compat/Checkbox/FormCheckbox.styl

@@ -11,7 +11,8 @@
   display: block
   width: 100%
   z-index: 1
-  font-family: "Arial Standard", Arial
+  // "Arial Standard" isn't a real installed font name anywhere — dead fallback, dropped.
+  font-family: Arial, Arimo, sans-serif
   font-weight: 400;
   font-style: normal
   font-size: 10px

package/compat/CookieModal/modals/ManageCookieModal/ManageCookieModal.styl

@@ -78,7 +78,7 @@
   align-items: center !important
   justify-content: center !important
   text-align: center !important
-  font-family: 'Arial' !important
+  font-family: 'Arial', 'Arimo', sans-serif !important
   font-style: normal !important
   font-weight: 400 !important
   font-size: 14px !important

package/compat/CookieModal/modals/PreviewCookieModal/PreviewCookieModal.styl

@@ -17,7 +17,7 @@
   margin-top: 20px
 
   +media-tablet-down()
-    font-family: 'Arial';
+    font-family: 'Arial', 'Arimo', sans-serif;
     font-weight: 700;
     font-size: 16px;
     line-height: 32px;
@@ -27,7 +27,7 @@
 
 .modalContent
   margin-top: 3px
-  font-family: 'Arial'
+  font-family: 'Arial', 'Arimo', sans-serif
   font-weight: 400
   font-size: 14px;
   line-height: 16px;
@@ -35,7 +35,7 @@
   letter-spacing: 0.15px;
   color: rgba(76, 78, 100, 0.87);
   +media-tablet-down()
-    font-family: 'Arial';
+    font-family: 'Arial', 'Arimo', sans-serif;
     font-weight: 400;
     font-size: 14px;
     line-height: 16px;
@@ -77,7 +77,7 @@
   background: #005CFF !important
   box-shadow: 0px 4px 8px -4px rgba(76, 78, 100, 0.42) !important
   border-radius: 16px !important
-  font-family: 'Arial' !important
+  font-family: 'Arial', 'Arimo', sans-serif !important
   font-weight: 500 !important
   font-size: 14px !important
   line-height: 24px !important
@@ -97,7 +97,7 @@
   align-items: center !important
   justify-content: center !important
   text-align: center !important
-  font-family: 'Arial' !important
+  font-family: 'Arial', 'Arimo', sans-serif !important
   font-style: normal !important
   font-weight: 400 !important
   font-size: 14px !important
@@ -115,7 +115,7 @@
   align-items: center !important
   justify-content: center !important
   text-align: center !important
-  font-family: 'Arial' !important
+  font-family: 'Arial', 'Arimo', sans-serif !important
   font-style: normal !important
   font-weight: 400 !important
   font-size: 14px !important
@@ -125,7 +125,7 @@
 .outlinedBtnLeft
   display: flex;
   justify-content: flex-end;
-  font-family: 'Arial';
+  font-family: 'Arial', 'Arimo', sans-serif;
   font-style: normal;
   font-weight: 400;
   color: #005CCB;

package/compat/MdField/MdField.tsx

@@ -45,6 +45,9 @@ const MdField: React.FunctionComponent<MdFieldProps> = ({
   const inputType = isPassword && reveal ? 'text' : (type || 'text');
   const hasError = !!error;
   const generatedId = React.useId();
+  // Stable id linking the input to its (visually hidden, see .mfield-error-text sr-only
+  // CSS) error text — lets aria-describedby work even when the text itself is invisible.
+  const errorId = `${generatedId}-error`;
   // floating label (Material pattern): while empty and unfocused, the label text is
   // shown as the input's own native placeholder (styled via .mfield--floating
   // input::placeholder) and the <label> itself is not rendered at all; once focused or
@@ -53,6 +56,14 @@ const MdField: React.FunctionComponent<MdFieldProps> = ({
   const hasValue = value != null && value !== '';
   const resting = !!floatingLabel && !focused && !hasValue;
   const effectivePlaceholder = floatingLabel ? (resting ? (label || placeholder || '') : '') : (placeholder || '');
+  // The real <label> is skipped entirely while resting (see above), leaving the input with
+  // no programmatic name at all — `placeholder` alone is not a reliable accessible-name
+  // fallback across browser/AT combinations, and WCAG explicitly advises against relying on
+  // it. aria-label steps in for exactly that gap; once floated (focused or has a value) the
+  // real <label htmlFor> takes over as the name source and this reverts to undefined rather
+  // than sitting there as a redundant duplicate (aria-label always outranks a wired <label>
+  // in the accessible-name computation, so leaving it set wouldn't be wrong, just noise).
+  const ariaLabel = resting ? (label || placeholder || undefined) : undefined;
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     onChange(event.currentTarget.value, event.currentTarget.name || name, event);
@@ -86,6 +97,9 @@ const MdField: React.FunctionComponent<MdFieldProps> = ({
             maxLength={maxLength}
             placeholder={effectivePlaceholder}
             autoComplete={autoComplete}
+            aria-label={ariaLabel}
+            aria-invalid={hasError ? true : undefined}
+            aria-describedby={hasError ? errorId : undefined}
             style={{ width: '100%', resize: 'vertical' }}
           />
         ) : (
@@ -101,6 +115,9 @@ const MdField: React.FunctionComponent<MdFieldProps> = ({
             maxLength={maxLength}
             placeholder={effectivePlaceholder}
             autoComplete={autoComplete}
+            aria-label={ariaLabel}
+            aria-invalid={hasError ? true : undefined}
+            aria-describedby={hasError ? errorId : undefined}
             style={{ width: '100%' }}
           />
         )}
@@ -116,7 +133,13 @@ const MdField: React.FunctionComponent<MdFieldProps> = ({
           </button>
         ) : null}
       </div>
-      {hasError ? <span className='mfield-error-text'>{error}</span> : null}
+      {hasError ? (
+        // role="alert" announces this to screen readers the moment it enters the DOM (e.g.
+        // right after a failed Submit) — no need to wait for focus to reach this field.
+        // Visually hidden or not is entirely a CSS concern (.mfield-error-text) — this
+        // element and its id/role/text content exist unconditionally on error either way.
+        <span id={errorId} className='mfield-error-text' role='alert'>{error}</span>
+      ) : null}
     </div>
   );
 };

package/compat/MdSelect/MdSelect.tsx

@@ -71,6 +71,9 @@ const MdSelect: React.FunctionComponent<MdSelectProps> = ({
     disabled: !!item.isDisabled
   }));
   const hasError = !!error;
+  // Stable id linking the trigger to its (visually hidden, see .mfield-error-text sr-only
+  // CSS) error text — lets aria-describedby work even when the text itself is invisible.
+  const errorId = React.useId() + '-error';
 
   const handleChange = (picked: string) => {
     const match = (items || []).find(item => normalize(item.value) === picked);
@@ -94,8 +97,14 @@ const MdSelect: React.FunctionComponent<MdSelectProps> = ({
         placeholder={placeholder || (label ? label : undefined)}
         disabled={disabled}
         ariaLabel={label}
+        ariaInvalid={hasError}
+        ariaDescribedBy={hasError ? errorId : undefined}
       />
-      {hasError && typeof error === 'string' ? <span className='mfield-error-text'>{error}</span> : null}
+      {hasError && typeof error === 'string' ? (
+        // role="alert" announces this to screen readers the moment it enters the DOM (e.g.
+        // right after a failed Submit) — no need to wait for focus to reach this field.
+        <span id={errorId} className='mfield-error-text' role='alert'>{error}</span>
+      ) : null}
     </div>
   );
 };

package/compat/RateSearchWidget/RateSearchWidget.styl

@@ -5,7 +5,12 @@
   box-sizing: border-box
   padding: 12px 18px
   background-color: white
-  font-family: 'Arial Fett', 'Arial Standard', 'Arial'
+  // was 'Arial Fett', 'Arial Standard', 'Arial' — those first two aren't real installed font
+  // names anywhere ("Fett" = German for bold), a dead attempt to force bold via font-family
+  // instead of font-weight. The real @font-face (theme/autobahn.css) now gives 'Arial' a proper
+  // bold face at weight 700.
+  font-family: 'Arial', 'Arimo', sans-serif
+  font-weight: 700
   border-radius: 10px
   border: 1px solid $grey-e
   width: 100%

package/compat/StarButton/StarButton.styl

@@ -33,7 +33,7 @@
   padding: 3px 6px
   border-radius: 50%
   background-color: $primary
-  font-family: 'Arial-BoldMT', 'Arial Bold', 'Arial'
+  font-family: 'Arial', 'Arimo', sans-serif
   font-weight: 700
   font-size: 10px
   color: white

package/package.json

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

@@ -8,21 +8,63 @@
    subtree receive Autobahn tokens + utility classes.
 
    Load order:
-     1. Google Fonts (Schibsted Grotesk + Hanken Grotesk + Inter). Per the W1
-        plan the CDN @import is kept for the pilot; self-hosting woff2 is a
-        later ticket. CSS requires @import to precede all other rules, so it
-        stays first. Inter (400/500/700) is scoped to VdpViewer's mobile
+     1. Google Fonts (Schibsted Grotesk + Hanken Grotesk + Inter + Arimo). Per
+        the W1 plan the CDN @import is kept for the pilot; self-hosting woff2
+        is a later ticket. CSS requires @import to precede all other rules, so
+        it stays first. Inter (400/500/700) is scoped to VdpViewer's mobile
         gallery — that layout is a pixel-match of a Figma frame authored in
         Inter, not the Hanken Grotesk used by the rest of the design system.
+        Arimo (400/500/700) is NOT part of the Autobahn design language at
+        all — it's loaded purely as a REAL, always-available webfont fallback
+        for the many legacy (non-.md3) components across fe-main/fe-landing
+        that hardcode font-family: 'Arial' (see the @font-face block below).
      2. colors_and_type.css — brand tokens (.md3 { --autode-* / --primary ... }).
      3. md3.css — MD3 utility classes + responsive layer (.mbtn/.mcard/.chip/
         .segmented/.mfield/.num/.md-* + 1024/980/900/820/600px breakpoints).
 
    ADDITIVE ONLY. Do not import this from a non-`.md3` context expecting it to
    restyle existing components — it intentionally does nothing outside `.md3`.
+   The @font-face block below is the one exception: @font-face is never scoped
+   by a selector, so it applies to the whole page (.md3 or not) the moment
+   this stylesheet loads — both fe-main (App.global.styl) and fe-landing
+   (pages/_app.tsx) load it globally already.
    ========================================================================== */
 
-@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@500;600;700;800&family=Hanken+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@500;600;700;800&family=Hanken+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;700&family=Arimo:wght@400;500;700&display=swap');
 
 @import './colors_and_type.css';
 @import './md3.css';
+
+/* Arial weight fix: dozens of legacy (non-.md3) components across fe-main/fe-landing hardcode
+   font-family: 'Arial' + an explicit font-weight (400/700), relying entirely on whatever the
+   visitor's OS happens to have installed under that exact name. Real Arial (Windows/macOS) ships
+   true separate Regular/Bold font files, but without an explicit @font-face some browsers
+   inconsistently pick the nearest installed match or synthesize ("fake") bold instead of using
+   the real bold face — that's the "wrong font-weight" symptom. This does NOT redistribute Arial
+   (proprietary/Microsoft-licensed, can't legally be self-hosted) — local() only queries fonts
+   ALREADY installed on the device by name, same matching the browser does implicitly anyway,
+   just made explicit and given metric-compatible open fallbacks (Liberation Sans on many Linux
+   distros, Arimo — Android's own built-in substitute for "Arial") so real/near-real weight faces
+   are used more often instead of synthesized ones. Where NONE of these are installed (e.g. iOS,
+   which bundles none of the three), this still falls through to each declaration's own trailing
+   `sans-serif` same as before — it cannot add coverage that isn't on the device. */
+@font-face {
+  font-family: 'Arial';
+  font-weight: 400;
+  font-style: normal;
+  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
+}
+@font-face {
+  font-family: 'Arial';
+  font-weight: 500;
+  font-style: normal;
+  /* Arial itself has no true Medium cut — Liberation Sans/Arimo do, so this at least gets a
+     real medium face on the platforms that have them instead of always synthesizing one. */
+  src: local('Liberation Sans Medium'), local('Arimo Medium'), local('Arial'), local('ArialMT');
+}
+@font-face {
+  font-family: 'Arial';
+  font-weight: 700;
+  font-style: normal;
+  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Arimo Bold');
+}