@bytebrand/fe-ui-core-autobahn 1.0.56 → 1.0.57

package/locales/de/autobahn.json

@@ -188,7 +188,10 @@
     "requestLabel": "Jetzt Anfragen",
     "threeSixtyLabel": "360°-Ansicht",
     "counterLabel": "Bild {{current}} von {{total}}",
-    "moreThumbsLabel": "{{count}} weitere Bilder"
+    "moreThumbsLabel": "{{count}} weitere Bilder",
+    "allPhotosTitle": "Alle {{count}} Fotos",
+    "allPhotosSubtitle": "Tippe auf ein Foto, um es zu öffnen.",
+    "allPhotosFooter": "{{count}} Fotos insgesamt"
   },
   "chrome": {
     "menu": "Menü",

package/locales/en/autobahn.json

@@ -188,7 +188,10 @@
     "requestLabel": "Enquire now",
     "threeSixtyLabel": "360° view",
     "counterLabel": "Image {{current}} of {{total}}",
-    "moreThumbsLabel": "{{count}} more images"
+    "moreThumbsLabel": "{{count}} more images",
+    "allPhotosTitle": "All {{count}} photos",
+    "allPhotosSubtitle": "Tap a photo to open it.",
+    "allPhotosFooter": "{{count}} photos total"
   },
   "chrome": {
     "menu": "Menu",

package/package.json

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

@@ -465,7 +465,7 @@ line-height: 31px;
   height: 34px;
   padding: 0 13px;
   flex: none;
-  background: #fff;
+  background-color: hsla(0, 0%, 100%, .75);
   border: 1px solid #d4dde7;
   border-radius: 16px;
 }
@@ -3258,6 +3258,16 @@ line-height: 31px;
     opacity: 0.92;
   }
 }
+/* VDP gallery arrows only — .car-arrow is shared with the SRP card carousels (CarCard/CarRow),
+   so this is scoped to .vdp-gallerybox rather than the base rule. */
+.md3 .vdp-gallerybox .car-arrow {
+  width: 36px;
+  height: 36px;
+  border-radius: 18px;
+  background-color: hsla(0, 0%, 100%, .75);
+  border: 1px solid #D4DDE7;
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
+}
 
 /* ==========================================================================
    RESPONSIVE LAYOUT LAYER
@@ -4728,6 +4738,16 @@ line-height: 31px;
 .md3 .enquiry-form {
   padding: 24px;
 }
+/* Vorname/Nachname/E-Mail carry their border/background as inline style (enquiryInput) —
+   !important is required here to win over the inline style on focus. */
+.md3 .enquiry-name-row input:focus,
+.md3 .enquiry-email-wrap input:focus {
+  background: #FFFFFF !important;
+  border: 1px solid #005CFF !important;
+  border-radius: 10px !important;
+  outline: 0;
+  box-shadow: none;
+}
 /* outlined float-label fields (Figma phone/message row): label sits ON the top border */
 .md3 .enq-float {
   position: relative;
@@ -4754,12 +4774,25 @@ line-height: 31px;
   border: 0;
   background: none;
   outline: 0;
+  box-shadow: none;
   color: var(--md-on-surface);
   font: inherit;
   font-size: 14px;
   height: 46px;
   padding: 0 12px;
 }
+/* focus state (Figma): the .enq-float wrapper carries the border/background — the
+   input/textarea/mselect-btn inside stay borderless (see above) so only one outline shows. */
+.md3 .enq-float:focus-within {
+  background: #FFFFFF;
+  border: 1px solid #005CFF;
+  border-radius: 10px;
+  box-shadow: none;
+}
+.md3 .enq-float:focus-within .enq-float-label {
+  background: #FFFFFF;
+  color: #005CFF;
+}
 .md3 .enq-float textarea {
   height: 96px;
   padding: 12px;
@@ -4770,15 +4803,26 @@ line-height: 31px;
   grid-template-columns: 82px 96px 1fr;
   gap: 10px;
 }
-.md3 .enq-country {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 4px;
+/* "Land" is a real Dropdown (.mselect) now, nested inside the .enq-float outline — strip
+   its own trigger chrome (border/background/box-shadow ring) so the outer .enq-float border
+   stays the only visible outline, and match the 46px height of the sibling inputs. */
+.md3 .enq-float .mselect-btn {
   height: 46px;
   padding: 0 10px 0 12px;
-  font-size: 14px;
-  color: var(--md-on-surface);
+  gap: 4px;
+  border: 0;
+  background: none;
+  outline: 0;
+  box-shadow: none;
+}
+.md3 .enq-float .mselect-btn:hover,
+.md3 .enq-float .mselect-btn[aria-expanded="true"] {
+  box-shadow: none;
+}
+.md3 .enq-float .mselect-btn .lucide {
+  width: 14px;
+  height: 14px;
+  color: var(--md-on-surface-variant);
 }
 /* revocable-consent checkbox + microtext (Figma round 9) */
 .md3 .enq-consent {
@@ -5188,9 +5232,10 @@ line-height: 31px;
   }
   .md3 .hiw-section {
     background: var(--md-sc-lowest);
-    border: 1px solid var(--fig-border);
+    border: 1px solid #D4DDE7;
     border-radius: 18px;
     padding: 30px 24px;
+    box-shadow: none;
   }
   .md3 .hiw-heading {
     text-align: left;
@@ -5777,10 +5822,10 @@ line-height: 31px;
     grid-template-columns: 1fr 1fr;
     gap: 10px;
     background: var(--md-sc-lowest);
-    border: 1px solid var(--fig-border);
+    border: 1px solid #D4DDE7;
     border-radius: 18px;
     padding: 18px 16px;
-    box-shadow: 0 2px 3px rgba(14, 34, 56, 0.07);
+    box-shadow: none;
   }
   .md3 .trust-strip > div {
     display: flex;
@@ -5944,6 +5989,7 @@ line-height: 31px;
   }
   .md3 .vdp-push-badges {
     gap: 6px;
+    margin-bottom: 13px;
   }
 }
 
@@ -6067,21 +6113,37 @@ color: #005CFF;
 }
 
 @media (max-width: 600px) {
-  /* full-bleed gallery: edge-to-edge, app-like. Fixed 200px height on phone (overrides
-     the 980px breakpoint's aspect-ratio: 4/3, which made the box too tall here). */
+  /* full-bleed gallery: edge-to-edge, app-like. Extra height (vs. the plain photo height)
+     reserves room at the bottom for the controls row, now overlaid on the image itself
+     (round 15 — supersedes the earlier "no overlay" layout). */
   .md3 .vdp-gallerybox {
     margin: 0 -24px;
     border-radius: 0;
     border: 0;
     box-shadow: none;
-    height: 200px;
+    height: 230px;
     aspect-ratio: auto;
   }
-  /* controls row sits BELOW the image in normal flow (per user: no overlay) */
+  /* .vdp-gallery is the positioning context: .gallery-controls-row is its own sibling of
+     .vdp-gallerybox in the DOM, so it needs a relative ancestor to overlay against. */
+  .md3 .vdp-gallery {
+    position: relative;
+  }
+  /* controls row now sits ON the image as an overlay, bottom-aligned (round 15) */
   .md3 .gallery-controls-row {
-    padding: 0 2px;
+    position: absolute;
+    left: 14px;
+    right: 14px;
+    bottom: 12px;
+    z-index: 3;
+    padding: 0;
   }
-  /* the carousel's own overlay dots move into the below-image controls row (page-rendered;
+  /* share/save icon buttons: scoped to THIS row (not the base .icon-btn--filled, which is
+     also the opaque vdp-back + desktop overlay buttons) — translucent so photo shows through. */
+  .md3 .gallery-controls-row .icon-btn--filled {
+    background-color: hsla(0, 0%, 100%, .75);
+  }
+  /* the carousel's own overlay dots move into the on-image controls row (page-rendered;
      the dots div carries an inline display:flex — hence !important) */
   .md3 .vdp-gallerybox .cardcar-dots {
     display: none !important;
@@ -6451,11 +6513,19 @@ color: #005CFF;
   .md3 .vdp-similar {
     margin-top: 14px !important;
   }
+  .md3 #vdp-kontakt {
+    border: 1px solid #D4DDE7;
+    box-shadow: none;
+  }
   .md3 #vdp-bewertungen {
     padding: 28px 24px !important;
+    border: 1px solid #D4DDE7;
+    box-shadow: none;
   }
   .md3 #vdp-preis {
     padding: 0 !important;
+    border: 1px solid #D4DDE7;
+    box-shadow: none;
   }
   .md3 #vdp-preis h2 {
     padding: 22px 22px 0 !important;
@@ -6694,6 +6764,8 @@ color: #005CFF;
     margin-bottom: 20px !important;
     padding: 18px !important;
     box-sizing: border-box;
+    border: 1px solid #D4DDE7;
+    box-shadow: none;
     display: flex;
     flex-direction: column;
   }
@@ -6823,6 +6895,10 @@ color: #005CFF;
     text-align: center;
     color: #ffffff;
   }
+  .md3 #vdp-eco {
+    border: 1px solid #D4DDE7;
+    box-shadow: none;
+  }
   .md3 #vdp-eco .md-label-sm {
     font-family: Arial, Helvetica, sans-serif;
     font-style: normal;
@@ -6833,6 +6909,8 @@ color: #005CFF;
   }
   .md3 #vdp-daten {
     padding: 26px 24px 34px 24px;
+    border: 1px solid #D4DDE7;
+    box-shadow: none;
   }
   .md3 #vdp-daten .mbtn--text {
     font-family: Arial, Helvetica, sans-serif;
@@ -6855,6 +6933,8 @@ color: #005CFF;
   }
   .md3 #vdp-ausstattung {
     padding: 28px 24px 19px 24px;
+    border: 1px solid #D4DDE7;
+    box-shadow: none;
   }
   .md3 #vdp-ausstattung h2 {
     margin: 0 0 30px;
@@ -7018,6 +7098,8 @@ color: #005CFF;
   }
   .md3 .enq-country {
     width: 70px;
+  }
+  .md3 .enq-country .mselect-label {
     font-family: Arial, Helvetica, sans-serif;
     font-style: normal;
     font-weight: 400;
@@ -8931,3 +9013,160 @@ color: #005CFF;
   background: var(--md-sc-lowest);
   box-shadow: none;
 }
+
+/* ==========================================================================
+   VdpViewer "all photos" bottom sheet (libs/packages/fe-ui-core-autobahn/vdp/VdpViewer.tsx)
+   --------------------------------------------------------------------------
+   New selectors only, own `.vdp-photosheet*` prefix — nothing above this block
+   is touched. Static values live here; only per-state dynamics (slide
+   transform/transition while open/dragging, backdrop opacity/pointer-events)
+   stay inline in the component. 3 grid columns is the default (portrait,
+   <=693px); the 693-860px media query below is the ONLY landscape-specific
+   override, matching the one visual difference the spec calls for.
+   ========================================================================== */
+.md3 .vdp-photosheet-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 210;
+}
+.md3 .vdp-photosheet {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 100vh;
+  z-index: 211;
+  display: flex;
+  flex-direction: column;
+  /* same dark color as the viewer's own header bar (rgba(6,11,18,0.8)), but fully opaque: the
+     header uses 0.8 alpha OVER a photo, whereas this panel sits over the dimmed backdrop + viewer
+     behind it — at 0.8 alpha, high-contrast content back there (e.g. the blue CTA button) bled
+     through visibly during testing, so opacity is dropped without changing the hue itself. */
+  background: rgb(6, 11, 18);
+  border-radius: 16px 16px 0 0;
+  overflow: hidden;
+}
+.md3 .vdp-photosheet__header {
+  position: relative;
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 88px;
+  padding-top: 10px;
+  touch-action: none;
+}
+.md3 .vdp-photosheet__handle {
+  position: absolute;
+  top: 8px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 36px;
+  height: 4px;
+  border-radius: 2px;
+  background: rgba(255, 255, 255, 0.28);
+}
+.md3 .vdp-photosheet__close {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.md3 .vdp-photosheet__logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.md3 .vdp-photosheet__logo--portrait {
+  transform: scale(0.75);
+}
+.md3 .vdp-photosheet__titles {
+  flex: none;
+  padding: 0 16px 12px;
+  text-align: left;
+}
+.md3 .vdp-photosheet__title {
+  margin: 0;
+  font-family: 'Inter', var(--md-font);
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 24px;
+  color: #ffffff;
+}
+.md3 .vdp-photosheet__subtitle {
+  margin: 4px 0 0;
+  font-family: 'Inter', var(--md-font);
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 18px;
+  color: rgba(255, 255, 255, 0.56);
+}
+.md3 .vdp-photosheet__scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0 12px 12px;
+}
+.md3 .vdp-photosheet__grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+}
+.md3 .vdp-photosheet__tile {
+  position: relative;
+  aspect-ratio: 4 / 3;
+  box-sizing: border-box;
+  border-radius: 10px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  padding: 0;
+  cursor: pointer;
+  background: rgba(255, 255, 255, 0.06);
+}
+.md3 .vdp-photosheet__tile img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.md3 .vdp-photosheet__tile--active {
+  border: 3px solid #0b63f6;
+}
+.md3 .vdp-photosheet__badge {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #0b63f6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+}
+.md3 .vdp-photosheet__footer {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 6px;
+  height: 44px;
+  padding: 0 16px;
+  /* rgba(0,0,0,0.5) was invisible here — it darkens whatever's behind it, and the sheet's own
+     panel (rgb(6,11,18)) is already almost black, so a 50%-black overlay on top of near-black
+     reads as no change at all. #1c222c is lighter/bluer and already used elsewhere in this same
+     file (landscape's "Anrufen" CTA background), so it's a real, visible band without a new tone. */
+  background: #1c222c;
+  border-top: 1px solid rgba(255, 255, 255, 0.12);
+  color: rgba(255, 255, 255, 0.72);
+  font-family: 'Inter', var(--md-font);
+  font-size: 13px;
+  font-weight: 500;
+}
+@media (min-width: 693px) and (max-width: 860px) {
+  .md3 .vdp-photosheet__grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}

package/vdp/VdpModules.tsx

@@ -24,7 +24,7 @@
 import React, { useState } from 'react';
 import { TranslationFunction } from '../types';
 
-import { Button, Icon, Spec, StatChip, Stars, Switch } from '../ui';
+import { Button, Dropdown, DropdownOption, Icon, Spec, StatChip, Stars, Switch } from '../ui';
 import { CO2_CLASSES, CO2_COLORS, TIER_LABELS, TIER_KEYS, TIER_COLORS, TIER_BACKGROUNDS } from '../constants';
 import { defaultVdpSpecs, EquipmentGroups, PriceRatingBands, VehicleDetail, VdpSpec, VdpReview } from './types';
 import { CalcRow, DocCheckIcon, EvalBar, expanderBtnStyle, FinanceMode, Slider, TermChips } from './FinanceCalculator';
@@ -2495,6 +2495,7 @@ export const ReviewsTeaser: React.FunctionComponent<ReviewsTeaserProps> = ({ cou
         alignItems: 'center',
         justifyContent: 'space-between',
         gap: 12,
+        border: '1px solid #D4DDE7',
         // sits between the finance card (order:3) and the highlights card (order:4) in the
         // mobile .vdp-grid flex flow — tie-broken to AFTER the aside by JSX/DOM source order.
         order: 3,
@@ -2682,6 +2683,12 @@ const FloatField: React.FunctionComponent<{
   </label>
 );
 
+/** phone country-code options for the "Land" dropdown (Figma: DE/AT/CH pinned first, then A–Z). */
+const ENQUIRY_COUNTRY_CODES: DropdownOption[] = [
+  '+49', '+43', '+41', '+7', '+31', '+32', '+33', '+34', '+36', '+39', '+40', '+44', '+45', '+46',
+  '+47', '+48', '+352', '+358', '+359', '+380', '+385', '+386', '+420', '+421', '+423',
+].map((code) => ({ value: code, label: code }));
+
 /** [icon, i18n label key] — resolved against the drilled t in the component. */
 const ENQUIRY_BENEFITS: ReadonlyArray<[string, string]> = [
   ['clock', 'autobahn:enquiry.benefits.fastResponse'],
@@ -2704,6 +2711,7 @@ export const VdpEnquiry: React.FunctionComponent<VdpEnquiryProps> = ({
   const [firstName, setFirstName] = useState('');
   const [lastName, setLastName] = useState('');
   const [email, setEmail] = useState('');
+  const [countryCode, setCountryCode] = useState('+49');
   const [areaCode, setAreaCode] = useState('');
   const [phoneNum, setPhoneNum] = useState('');
   const [consent, setConsent] = useState(false);
@@ -2719,15 +2727,18 @@ export const VdpEnquiry: React.FunctionComponent<VdpEnquiryProps> = ({
 
   const emailOk = /.+@.+\..+/.test(email);
   const phoneDigits = (areaCode + phoneNum).replace(/\D/g, '');
-  const phoneOk = phoneDigits.length >= 6;
-  // Round 13 (explicit spec): PHONE is always required (the * sits on the country-code field),
-  // e-mail is always optional (validated only when filled); names + consent always required.
+  // backend (contact-form-users) caps the concatenated phoneMain (countryCode + areaCode +
+  // phoneNum) at 22 chars total — mirrored here so an over-length number is caught before submit.
+  const phoneOk = phoneDigits.length >= 6 && countryCode.length + areaCode.trim().length + phoneNum.trim().length <= 22;
+  // Round 14: which channel is required follows the E-Mail/Telefon toggle — the * moves
+  // between the e-mail field and the country-code field accordingly; the other channel
+  // stays optional (validated only when filled); names + consent always required.
   const valid =
     firstName.trim().length > 0 &&
     lastName.trim().length > 0 &&
     consent &&
-    phoneOk &&
-    (email.trim().length === 0 || emailOk);
+    (pref === 'email' ? emailOk : phoneOk) &&
+    (pref === 'email' ? phoneDigits.length === 0 || phoneOk : email.trim().length === 0 || emailOk);
 
   const submit = async (): Promise<void> => {
     if (!valid || sending) return;
@@ -2736,7 +2747,7 @@ export const VdpEnquiry: React.FunctionComponent<VdpEnquiryProps> = ({
     const note = t('autobahn:enquiry.preferredContact', {
       channel: pref === 'email' ? t('autobahn:enquiry.contactMethod.email') : t('autobahn:enquiry.contactMethod.phone'),
     });
-    const phone = phoneDigits ? `+49 ${areaCode.trim()} ${phoneNum.trim()}`.replace(/\s+/g, ' ').trim() : '';
+    const phone = phoneDigits ? `${countryCode}${areaCode.trim()}${phoneNum.trim()}`.replace(/\s+/g, '') : '';
     try {
       await onSubmit({
         name: `${firstName.trim()} ${lastName.trim()}`,
@@ -2843,26 +2854,30 @@ export const VdpEnquiry: React.FunctionComponent<VdpEnquiryProps> = ({
             <input
               style={enquiryInput}
               type="email"
-              // e-mail is always optional (round 13) — no required-*
-              placeholder={t('autobahn:enquiry.form.emailPlaceholder').replace(/\*$/, '')}
+              // asterisk shows only while e-mail is the selected contact channel (round 14)
+              placeholder={pref === 'email' ? t('autobahn:enquiry.form.emailPlaceholder') : t('autobahn:enquiry.form.emailPlaceholder').replace(/\*$/, '')}
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               aria-label={t('autobahn:enquiry.contactMethod.email')}
             />
           </div>
-          {/* Land (+49 fixed) · Vorwahl · Telefonnummer — outlined float-label row (Figma) */}
+          {/* Land (country-code dropdown) · Vorwahl · Telefonnummer — outlined float-label row (Figma) */}
           <div className="enq-phone-row" style={{ marginTop: 16 }}>
-            {/* phone is always required — the * sits on the country-code field (round 13) */}
-            <FloatField label={t('autobahn:enquiry.form.countryLabel') + '*'}>
-              <span className="enq-country num">
-                +49
-                <Icon name="chevron-down" size={14} color="var(--md-on-surface-variant)" />
-              </span>
+            {/* * sits on the country-code field only while Telefon is the selected channel (round 14) */}
+            <FloatField label={t('autobahn:enquiry.form.countryLabel') + (pref === 'phone' ? '*' : '')}>
+              <Dropdown
+                value={countryCode}
+                options={ENQUIRY_COUNTRY_CODES}
+                onChange={setCountryCode}
+                ariaLabel={t('autobahn:enquiry.form.countryLabel')}
+                className="enq-country"
+              />
             </FloatField>
             <FloatField label={t('autobahn:enquiry.form.areaCodeLabel')}>
               <input
                 type="tel"
                 placeholder="1638"
+                maxLength={5}
                 value={areaCode}
                 onChange={(e) => setAreaCode(e.target.value)}
                 aria-label={t('autobahn:enquiry.form.areaCodeLabel')}
@@ -2872,6 +2887,7 @@ export const VdpEnquiry: React.FunctionComponent<VdpEnquiryProps> = ({
               <input
                 type="tel"
                 placeholder="5857458"
+                maxLength={13}
                 value={phoneNum}
                 onChange={(e) => setPhoneNum(e.target.value)}
                 aria-label={t('autobahn:enquiry.form.phoneNumberLabel')}