@bytebrand/fe-ui-core-autobahn 1.0.158 → 1.0.160

package/cards/CarCard.tsx

@@ -157,8 +157,6 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
   // active that's already 3, so NEU is dropped rather than causing a 4th to overflow.
   const activeDealChips = [showDrop || showSave, showPct, !!car.zeroDown].filter(Boolean).length;
   const showNeu = asGoodAsNew && car.isNew && activeDealChips < 3;
-  // tabs the price block can switch to (PriceTabs shows Leasing only when the car has a lease rate)
-  const paymentModes: PaymentMode[] = car.lease != null ? ['financing', 'leasing', 'buy'] : ['financing', 'buy'];
   return (
     <article
       className="mcard mcard--interactive cc-card"
@@ -279,46 +277,18 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
         <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 }}>
-            {/* every tab's hero stacked in one grid cell (.cc-hero-stack), only the active one
-                visible, bottom-aligned — Kaufen's struck list price sits on its own line above
-                the price, so without this the row (and the card) grew/shrank by that line on
-                every tab switch. Same trick as .cc-terms-stack below. */}
-            <div className="cc-hero-stack">
-              {paymentModes.map((m) => (
-                <div
-                  key={m}
-                  className={'cc-hero-slot' + (m === mode ? '' : ' cc-hero-slot--hidden')}
-                  aria-hidden={m === mode ? undefined : true}
-                >
-                  <PriceHero car={car} mode={m} t={t} alwaysShowUnit />
-                </div>
-              ))}
-            </div>
+            <PriceHero car={car} mode={mode} t={t} alwaysShowUnit />
             <PriceEvalCol car={car} t={t} />
           </div>
           {/* same fallback CardCtaRow already uses below: pages that haven't wired a real
-              "Rate anpassen" sheet yet still get a working "Details" link (opens the car).
-              Every tab's terms line is rendered into the same grid cell (.cc-terms-stack) and
-              only the active one is visible — the cell is as tall as the tallest line, so the
-              card keeps one height across Finanzierung/Leasing/Kaufen (Leasing's longer line
-              wraps to 2 lines on narrow phones). No change to the visible line itself. */}
-          <div className="cc-terms-stack">
-            {paymentModes.map((m) => (
-              <div
-                key={m}
-                className={'cc-terms-slot' + (m === mode ? '' : ' cc-terms-slot--hidden')}
-                aria-hidden={m === mode ? undefined : true}
-              >
-                <PriceTerms
-                  car={car}
-                  mode={m}
-                  onOpenRateAdjust={onOpenRateAdjust || (() => onOpen(car))}
-                  onShowDetails={onShowFinancingDetails ? () => onShowFinancingDetails(car, m) : undefined}
-                  t={t}
-                />
-              </div>
-            ))}
-          </div>
+              "Rate anpassen" sheet yet still get a working "Details" link (opens the car). */}
+          <PriceTerms
+            car={car}
+            mode={mode}
+            onOpenRateAdjust={onOpenRateAdjust || (() => onOpen(car))}
+            onShowDetails={onShowFinancingDetails ? () => onShowFinancingDetails(car, mode) : undefined}
+            t={t}
+          />
         </div>
         {/* Mobile-only row (CardCtaRow itself carries the show-mobile class) — always
             rendered, with real fallbacks the page can override once it wires its own

package/cards/cardParts.tsx

@@ -710,12 +710,7 @@ export const PriceTerms: React.FunctionComponent<{
   onShowDetails?: () => void;
   t: TranslationFunction;
 }> = ({ car, mode, onOpenRateAdjust, onShowDetails, t }) => {
-  // Kaufen (buy): a cash purchase has no financing terms/details link — used to `return null`
-  // here, which collapsed .cc-terms to 0 height on that tab while Financing/Leasing rendered a
-  // real line, jumping the price row (and everything below it: rating pill, CTA row) up/down on
-  // every tab switch. Render an empty, still-present .cc-terms div instead — same fix as the VDP
-  // FinanceCalculator's .fin-cond (md3.css), which reserves its line's height the same way.
-  if (mode === 'buy') return <div className="cc-terms" />;
+  if (mode === 'buy') return null;
   const finFirstInstallment =
     car.finFirstInstallment != null ? car.finFirstInstallment.toLocaleString('de-DE') : _finFirstInstallment;
   const finMonths = car.finMonths ?? _finMonths;

package/constants/app.ts

@@ -40,17 +40,7 @@ export const LOCAL_STORAGE_KEY = {
   i18n_KEY: 'i18nLanguage'
 };
 
-// ADV-284: evaluated at import time — with site storage blocked, reading localStorage throws a
-// SecurityError that took down the whole bundle. Blocked storage behaves like "nothing saved".
-const readStoredLang = (): string | null => {
-  try {
-    return localStorage.getItem(LOCAL_STORAGE_KEY.i18n_KEY);
-  } catch (e) {
-    return null;
-  }
-};
-
-export const DEFAULT_LANG: string = typeof window !== 'undefined' ? readStoredLang() : 'de';
+export const DEFAULT_LANG: string = typeof window !== 'undefined' ? localStorage.getItem(LOCAL_STORAGE_KEY.i18n_KEY) : 'de';
 
 // Default support contact phone
 export const CONTACT_PHONE: string = '+498004030182';

package/constants/core.ts

@@ -35,18 +35,7 @@ export const LOCAL_STORAGE_KEY = {
   i18n_KEY: 'i18nLanguage'
 };
 
-// ADV-284: evaluated at import time — with site storage blocked, merely reading
-// window.localStorage throws a SecurityError, which took down the whole bundle (landing
-// page never rendered). Treat blocked storage like "no language saved".
-const readStoredLang = (): string | null => {
-  try {
-    return typeof window !== 'undefined' ? window.localStorage.getItem(LOCAL_STORAGE_KEY.i18n_KEY) : null;
-  } catch (e) {
-    return null;
-  }
-};
-
-export const DEFAULT_LANG: string = readStoredLang() ?? 'de';
+export const DEFAULT_LANG: string = (typeof window !== 'undefined' ? window.localStorage.getItem(LOCAL_STORAGE_KEY.i18n_KEY) : null) ?? 'de';
 
 export const ROW_STYLES = {
   marginBottom: 10

package/locales/legacy/data.ts

@@ -103,8 +103,7 @@ export const vehicleProps = (car?: any, isOfferAvailable: boolean = true) => {
         wltpDischargedCombinedLabel: `${getFormattedNumber(vehicleOption.wltpCombined != null ? vehicleOption.wltpCombined : 19.9)}l/100km (entladen, komb)`,
         wltpCo2WtdCombinedShort: `${getFormattedNumber(vehicleOption.wltpCo2)}g CO2/km (gew., komb)*`,
         co2ClassWeighted: `CO2-Klasse ${(cbd.cbd as any)[vehicleOption.wltpEnergyEfficiencyClass] || vehicleOption.wltpEnergyEfficiencyClass || ''} (gew., komb)`,
-        // ADV-187: no hard-coded fallback class — callers only render this when the class is defined.
-        co2ClassDischarged: `CO2-Klasse ${(cbd.cbd as any)[vehicleOption.wltpDischargedEnergyEfficiencyClass] || vehicleOption.wltpDischargedEnergyEfficiencyClass || ''} (entladen, komb)`
+        co2ClassDischarged: `CO2-Klasse ${(cbd.cbd as any)[vehicleOption.wltpDischargedEnergyEfficiencyClass || 'selector_energyEfficiencyClass_g'] || ''} (entladen, komb)`
       },
       title: {
         'addOfferToMainSlide': 'Zum Schieberegler hinzufügen',

package/package.json

@@ -1,30 +1,30 @@
-{
-  "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.158",
-  "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",
-  "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
-  },
-  "dependencies": {
-    "@bytebrand/car-schema-selectors": "^2.0.7",
-    "@bytebrand/fe-financing": "^5.14.20",
-    "classnames": "2.2.6",
-    "clsx": "^2.1.1",
-    "d3-format": "1.4.5",
-    "js-cookie": "^2.2.0",
-    "lodash": "^4.17.21",
-    "lucide-react": "^0.288.0",
-    "mobx-react": "^7.6.0",
-    "moment": "^2.29.1",
-    "qs": "^6.6.0",
-    "react-device-detect": "^2.1.2",
-    "react-grid-system": "^5.0.2",
-    "react-lazyload": "^3.2.0",
-    "react-scroll": "^1.9.3",
-    "react-slick": "^0.29.0",
-    "slick-carousel": "1.8.1"
-  }
-}
+{
+  "name": "@bytebrand/fe-ui-core-autobahn",
+  "version": "1.0.160",
+  "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",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "@bytebrand/car-schema-selectors": "^2.0.7",
+    "@bytebrand/fe-financing": "^5.14.20",
+    "classnames": "2.2.6",
+    "clsx": "^2.1.1",
+    "d3-format": "1.4.5",
+    "js-cookie": "^2.2.0",
+    "lodash": "^4.17.21",
+    "lucide-react": "^0.288.0",
+    "mobx-react": "^7.6.0",
+    "moment": "^2.29.1",
+    "qs": "^6.6.0",
+    "react-device-detect": "^2.1.2",
+    "react-grid-system": "^5.0.2",
+    "react-lazyload": "^3.2.0",
+    "react-scroll": "^1.9.3",
+    "react-slick": "^0.29.0",
+    "slick-carousel": "1.8.1"
+  }
+}

package/ui/Modal.tsx

@@ -136,7 +136,10 @@ const Modal: React.FunctionComponent<ModalProps> = ({
     const prevOverflow = document.body.style.overflow;
     document.body.style.overflow = 'hidden';
 
-    // focus the dialog surface, not its first control: a header icon would take the :focus-visible ring on open.
+    // move focus to the first control in the body/footer (an input, a link, a button) so forms are
+    // ready to type into and browser autofill can offer itself; the head row (close + headerAction
+    // icons) is skipped so a header icon never takes the :focus-visible ring on open. Falls back to
+    // the surface itself when the body has nothing focusable.
     // { preventScroll: true }: this runs at the very first animation frame of the mobile
     // sheet's own mmodal-sheet-up entrance (md3.css) — at that instant the surface's actual
     // computed transform is still the keyframe's `from` state (translateY(100%), pushed
@@ -148,7 +151,12 @@ const Modal: React.FunctionComponent<ModalProps> = ({
     // skips that native auto-scroll entirely, so the CSS animation alone moves the sheet
     // (same fix as fe-main's BaseModal.tsx, which hit this same glitch first).
     const surface = surfaceRef.current;
-    if (surface) surface.focus({ preventScroll: true });
+    if (surface) {
+      const first = Array.prototype.slice
+        .call(surface.querySelectorAll<HTMLElement>(FOCUSABLE))
+        .find((el: HTMLElement) => !el.closest('.mmodal-head'));
+      (first || surface).focus({ preventScroll: true });
+    }
 
     return () => {
       document.body.style.overflow = prevOverflow;

package/vehiclesProps/decoratedLightProps.tsx

@@ -165,10 +165,7 @@ const getDecoratedLightProps = (
         if (hybridPlugin) {
           if (wltpWeightedPowerCombinedContent && wltpWeightedCombinedContent) {
             const dischargedCombined = Number.isFinite(wltpConsumptionCombined) ? wltpConsumptionCombined : 19.9;
-            // ADV-187: the discharged class is derived server-side from wltpCo2Discharged; when the
-            // backend could not derive it the field is selector_unknown — hide the segment, never
-            // fall back to a hard-coded class here.
-            const dischargedClass = car.environmentEmissions.wltpDischargedEnergyEfficiencyClass;
+            const dischargedClass = car.environmentEmissions.wltpDischargedEnergyEfficiencyClass || 'selector_energyEfficiencyClass_g';
             const weightedCombinedLabeled = t('vehicleProps:value.wltpWeightedCombinedLabel', { consumption: wltpWeightedCombined.toLocaleString(language), unit: translatedUnit });
             const dischargedCombinedLabeled = t('vehicleProps:value.wltpDischargedCombinedLabel', { consumption: dischargedCombined.toLocaleString(language), unit: translatedUnit });
             const co2WeightedContent = Number.isFinite(wltpCo2)
@@ -177,16 +174,14 @@ const getDecoratedLightProps = (
             const co2ClassWeighted = isPropDefined(wltpEnergyEfficiencyClass)
               ? t('vehicleProps:value.co2ClassWeighted', { class: t(`cbd:${wltpEnergyEfficiencyClass}`) })
               : null;
-            const co2ClassDischarged = isPropDefined(dischargedClass)
-              ? t('vehicleProps:value.co2ClassDischarged', { class: t(`cbd:${dischargedClass}`) })
-              : null;
+            const co2ClassDischarged = t('vehicleProps:value.co2ClassDischarged', { class: t(`cbd:${dischargedClass}`) });
             return <React.Fragment>
                 {`${wltpWeightedPowerCombinedContent} + `}
                 {`${weightedCombinedLabeled}, `}
                 {`${dischargedCombinedLabeled}`}
                 {co2WeightedContent && <>, {co2WeightedContent}</>}
                 {co2ClassWeighted && <>, {co2ClassWeighted}</>}
-                {co2ClassDischarged && <>, {co2ClassDischarged}</>}
+                {<>, {co2ClassDischarged}</>}
               </React.Fragment>
           }
 
@@ -321,10 +316,7 @@ const getDecoratedLightProps = (
         if (hybridPlugin) {
           if (wltpWeightedPowerCombinedContent && wltpWeightedCombinedContent) {
             const dischargedCombined = Number.isFinite(wltpConsumptionCombined) ? wltpConsumptionCombined : 19.9;
-            // ADV-187: the discharged class is derived server-side from wltpCo2Discharged; when the
-            // backend could not derive it the field is selector_unknown — hide the segment, never
-            // fall back to a hard-coded class here.
-            const dischargedClass = car.environmentEmissions.wltpDischargedEnergyEfficiencyClass;
+            const dischargedClass = car.environmentEmissions.wltpDischargedEnergyEfficiencyClass || 'selector_energyEfficiencyClass_g';
             const weightedCombinedLabeled = t('vehicleProps:value.wltpWeightedCombinedLabel', { consumption: wltpWeightedCombined.toLocaleString(language), unit: translatedUnit });
             const dischargedCombinedLabeled = t('vehicleProps:value.wltpDischargedCombinedLabel', { consumption: dischargedCombined.toLocaleString(language), unit: translatedUnit });
             const co2WeightedContent = Number.isFinite(wltpCo2)
@@ -333,16 +325,14 @@ const getDecoratedLightProps = (
             const co2ClassWeighted = isPropDefined(wltpEnergyEfficiencyClass)
               ? t('vehicleProps:value.co2ClassWeighted', { class: t(`cbd:${wltpEnergyEfficiencyClass}`) })
               : null;
-            const co2ClassDischarged = isPropDefined(dischargedClass)
-              ? t('vehicleProps:value.co2ClassDischarged', { class: t(`cbd:${dischargedClass}`) })
-              : null;
+            const co2ClassDischarged = t('vehicleProps:value.co2ClassDischarged', { class: t(`cbd:${dischargedClass}`) });
             return <React.Fragment>
                 {`${wltpWeightedPowerCombinedContent} + `}
                 {`${weightedCombinedLabeled}, `}
                 {`${dischargedCombinedLabeled}`}
                 {co2WeightedContent && <>, {co2WeightedContent}</>}
                 {co2ClassWeighted && <>, {co2ClassWeighted}</>}
-                {co2ClassDischarged && <>, {co2ClassDischarged}</>}
+                {<>, {co2ClassDischarged}</>}
               </React.Fragment>
           }
 

package/vehiclesProps/decoratedProps.tsx

@@ -880,12 +880,10 @@ const getDecoratedProps = (
         // (entladen, komb) fuel consumption + a discharged CO2 class.
         if (hybridPlugin && wltpConsumptionWeightedPowerCombinedContent && wltpConsumptionWeightedCombinedContent) {
           const ADV88_DEFAULT_DISCHARGED_COMBINED = 19.9;
+          const ADV88_DEFAULT_DISCHARGED_CO2_CLASS = 'selector_energyEfficiencyClass_g';
 
           const dischargedCombined = Number.isFinite(wltpCombined) ? wltpCombined : ADV88_DEFAULT_DISCHARGED_COMBINED;
-          // ADV-187: the discharged class is derived server-side from wltpCo2Discharged; when the
-          // backend could not derive it the field is selector_unknown — hide the segment, never
-          // fall back to a hard-coded class here.
-          const dischargedClass = car.environmentEmissions.wltpDischargedEnergyEfficiencyClass;
+          const dischargedClass = car.environmentEmissions.wltpDischargedEnergyEfficiencyClass || ADV88_DEFAULT_DISCHARGED_CO2_CLASS;
 
           const weightedCombinedLabeled = t('vehicleProps:value.wltpWeightedCombinedLabel', { consumption: wltpWeightedCombined.toLocaleString(language), unit: translatedUnit });
           const dischargedCombinedLabeled = t('vehicleProps:value.wltpDischargedCombinedLabel', { consumption: dischargedCombined.toLocaleString(language), unit: translatedUnit });
@@ -895,9 +893,7 @@ const getDecoratedProps = (
           const co2ClassWeighted = isPropDefined(wltpEnergyEfficiencyClass)
             ? t('vehicleProps:value.co2ClassWeighted', { class: t(`cbd:${wltpEnergyEfficiencyClass}`) })
             : null;
-          const co2ClassDischarged = isPropDefined(dischargedClass)
-            ? t('vehicleProps:value.co2ClassDischarged', { class: t(`cbd:${dischargedClass}`) })
-            : null;
+          const co2ClassDischarged = t('vehicleProps:value.co2ClassDischarged', { class: t(`cbd:${dischargedClass}`) });
 
           return <React.Fragment>
             {wrapValue(wltpConsumptionWeightedPowerCombinedContent)}{' + '}
@@ -905,7 +901,7 @@ const getDecoratedProps = (
             {wrapValue(dischargedCombinedLabeled)}
             {co2WeightedContent && <>{', '}{wrapValue(co2WeightedContent)}</>}
             {co2ClassWeighted && <>{', '}{co2ClassWeighted}</>}
-            {co2ClassDischarged && <>{', '}{co2ClassDischarged}</>}
+            {', '}{co2ClassDischarged}
           </React.Fragment>
         }