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

package/compat/CookieModal/CookieModal.tsx

@@ -7,7 +7,7 @@ export interface ICookieModal {
   handleSentryInit?: () => void;
 }
 
-const CookieModal = ({ handleSentryInit }: ICookieModal) => {
+const CookieModal = ({ handleSentryInit = () => {} }: ICookieModal) => {
   const { isVisible, toggleModal } = useModal();
   const [modal, setModal] = useState('');
 
@@ -52,8 +52,4 @@ const CookieModal = ({ handleSentryInit }: ICookieModal) => {
     : <></>;
 };
 
-CookieModal.defaultProps = {
-  handleSentryInit: () => {}
-};
-
 export default CookieModal;

package/compat/Loader/Loader.tsx

@@ -10,7 +10,7 @@ export interface ILoaderProps {
   fluid?: boolean;
 }
 
-const Loader: React.FC<ILoaderProps> = ({ className, size, fluid }) => {
+const Loader: React.FC<ILoaderProps> = ({ className = '', size = 'medium', fluid = false }) => {
   const classNames = classnames(
     styles.loader,
     { [styles[size]]: !fluid },
@@ -23,10 +23,4 @@ const Loader: React.FC<ILoaderProps> = ({ className, size, fluid }) => {
   );
 };
 
-Loader.defaultProps = {
-  className: '',
-  size: 'medium',
-  fluid: false
-};
-
 export default Loader;

package/iconsvg/IconSVG.tsx

@@ -7,7 +7,7 @@ type TIconSVG = {
   customDimensions?: boolean;
 };
 
-const IconSVG: React.FC<TIconSVG> = ({ name, isWarrantyActive, customDimensions, ...props }: TIconSVG) => {
+const IconSVG: React.FC<TIconSVG> = ({ name, isWarrantyActive, customDimensions = false, ...props }: TIconSVG) => {
   if (!name) return null;
 
   const Component: any = components[name.toString()];
@@ -23,8 +23,4 @@ const IconSVG: React.FC<TIconSVG> = ({ name, isWarrantyActive, customDimensions,
   );
 };
 
-IconSVG.defaultProps = {
-  customDimensions: false
-};
-
 export default IconSVG;

package/package.json

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

package/theme/md3.css

@@ -2991,6 +2991,12 @@ line-height: 31px;
 .md3 .co-address-grid .mfield-error-text {
   display: none;
 }
+/* co-birthdate opts back in: future-date/under-18/empty all show the same red border, so
+   unlike the rest of .co-personal-grid the reason actually needs to be spelled out. */
+.md3 .co-personal-grid .co-birthdate .mfield-error-text {
+  display: block;
+  margin-top: 4px;
+}
 /* bug: clearing a valid field and tabbing away flashed the base .mfield:focus-within blue
    ring (#005CFF) for a moment before the error class/red border landed — green -> blue ->
    red. Dropping the blue ring here removes that flash; valid/error still show via their own
@@ -3152,6 +3158,20 @@ line-height: 31px;
 /* Vorwahl/Telefonnummer values (the "Land" dropdown has no <input>, so this only hits these two). */
 .md3 .co-phone .mfield input {
   font-size: 15px;
+  padding: 0;
+}
+/* valid check floats in the corner, not in the flex row — the digits need the column's width */
+.md3 .co-phone .mfield .mfield-ok {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+}
+.md3 .co-phone .mfield {
+  padding: 0 8px;
+}
+.md3 .co-phone .mfield.mfield--floating.mfield--valid {
+  padding: 0 25px 0 8px;
 }
 /* "Land" country-code select — same floating-notched-label look as RegistrationForm.tsx's
    .countryCode (OfferRequestModals/modals.styl + mixins.styl's floatingField(), Stylus/CSS
@@ -4812,8 +4832,38 @@ line-height: 31px;
     gap: 12px;
   }
   .md3 .oo-ls-cell {
-    padding: 0 !important;
-    border-left: 0 !important;
+    padding: 0;
+  }
+  .md3 .oo-ls-cell:not(:first-child) {
+    border-left: 0;
+  }
+}
+/* ≤600px Figma mobile variant (63571:28382): rules between rows with 12px above and below,
+   replacing the 800px stack's gap. */
+@media (max-width: 600px) {
+  .md3 .oo-ls-row {
+    gap: 0;
+  }
+  .md3 .oo-ls-cell {
+    padding: 0 0 12px;
+  }
+  .md3 .oo-ls-cell:not(:first-child) {
+    padding-top: 12px;
+    border-top: 1px solid var(--md-outline-variant);
+  }
+  .md3 .oo-ls-cell:last-child {
+    padding-bottom: 0;
+  }
+  .md3 .oo-ls-title-row .oo-ls-title,
+  .md3 .oo-ls-title-row ~ .oo-ls-sub,
+  .md3 .oo-ls-terms-link {
+    font-family: Arimo, Arial, sans-serif;
+  }
+  .md3 .oo-ls-terms-link {
+    margin-top: 0;
+  }
+  .md3 .oo-ls-title-row .lucide {
+    stroke: var(--md-on-surface-variant);
   }
 }
 /* "2 Jahre Garantie" "i" popover (OrderOverviewNext.tsx) — same AddServicesTooltipBody/
@@ -5440,6 +5490,12 @@ line-height: 31px;
   min-width: 0;
   flex: 1 0 0;
 }
+.md3 .oo-vs-text {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
 .md3 .oo-vs-name {
   font-family: Arial;
   font-weight: 700;
@@ -5486,6 +5542,40 @@ line-height: 31px;
 .md3 .oo-vs-seller-icon {
   flex: none;
 }
+/* mobile only (Figma 63571:28325): photo 110×70 and the vehicle text share row 1, the text
+   centred on the photo; the seller row spans the full width below, 12px under the row */
+@media (max-width: 600px) {
+  .md3 .oo-vs-row {
+    display: grid;
+    grid-template-columns: 110px minmax(0, 1fr);
+    grid-template-rows: minmax(70px, auto) auto;
+    column-gap: 14px;
+    row-gap: 12px;
+  }
+  .md3 .oo-vs-info {
+    display: contents;
+  }
+  .md3 .oo-vs-photo {
+    grid-column: 1;
+    grid-row: 1;
+    width: 110px;
+    height: 70px;
+    border-radius: 0;
+  }
+  .md3 .oo-vs-text {
+    grid-column: 2;
+    grid-row: 1;
+    align-self: center;
+  }
+  .md3 .oo-vs-name {
+    font-size: 16px;
+  }
+  .md3 .oo-vs-seller {
+    grid-column: 1 / -1;
+    grid-row: 2;
+    justify-self: start;
+  }
+}
 .md3 .oo-row {
   padding: 12px 0;
   border-bottom: 1px solid var(--md-outline-variant);
@@ -5573,10 +5663,18 @@ line-height: 31px;
    gap (14px), same as every other direct child in this step. */
 .md3 .oo-legal-notice {
   margin: 0;
-  font-family: Arial;
+  font-family: 'Arimo';
+  font-weight: 400;
   font-size: 13px;
   line-height: 1.5;
+  letter-spacing: 0;
   color: var(--md-on-surface-variant);
+  text-align: left;
+}
+@media (max-width: 600px) {
+  .md3 .oo-legal-notice {
+    text-align: justify;
+  }
 }
 .md3 .oo-legal-link {
   text-decoration: underline;
@@ -5864,6 +5962,17 @@ line-height: 31px;
      line instead of sitting visibly lower (more obvious once the label wraps to 2 lines). */
   margin-top: 7px;
 }
+@media (max-width: 600px) {
+  .md3 .oo-terms-block .mcheck {
+    padding: 0;
+  }
+  .md3 .oo-terms-block .mcheck-box {
+    margin-top: 0;
+  }
+  .md3 .oo-terms-block .mcheck-label {
+    padding-top: 0;
+  }
+}
 /* Error state (Figma 64670:106293, "Jetzt kaufen" clicked without confirming both agreements) —
    unconfirmed checkbox gets a thicker red box, plus an icon+message row underneath, indented
    32px (20px box + 12px gap) to sit under the label rather than the box. errorIcon (FormCheckbox
@@ -6026,6 +6135,10 @@ line-height: 31px;
     background: var(--md-outline-variant);
   }
 }
+/* legal-document dialogs: title clears .mmodal-head-action too (24 + 40 + 4 + 40) */
+.md3 .oo-terms-modal--doc .mmodal-head {
+  padding-right: 108px;
+}
 /* "8. Rabatt-Code hinzufügen" card (Figma 63570:28464) — its own full-width .co-card at the
    bottom of the page. Unlike "6."/"7." (where only the small chevron button toggles), the whole
    header row is the click target here — the .h3.co-card-title wraps a full-width
@@ -6366,7 +6479,7 @@ line-height: 31px;
   /* every narrowed checkout field (Vorname/Nachname/Straße/Nr./PLZ/Stadt/…) has the same
      .mfield flex gap:10px reserving room for the trailing .mfield-ok checkmark — fine at
      full width, but at mobile widths it was squeezing the input text out of view (same
-     root cause the .co-phone-only fix below already addresses for Vorwahl/Telefonnummer;
+     root cause the .co-phone rules above already address for Vorwahl/Telefonnummer;
      this covers the rest of .co-form). Taking the icon out of flow removes that reserved
      space; the field's own right padding is bumped so text still clears the icon. */
   .md3 .co-form .mfield-ok {
@@ -6399,20 +6512,6 @@ line-height: 31px;
   .md3 .co-phone .co-birthdate {
     grid-column: 1 / -1;
   }
-  /* Vorwahl/Telefonnummer at 78px/1fr are too narrow for the flex gap:10px .mfield base rule
-     to reserve room for .mfield-ok inline — it was squeezing the input itself. Taking the
-     checkmark out of flow (.mfield already has position:relative, base rule above) removes
-     that reserved space; the input's own right padding (from .mfield--floating.mfield--valid,
-     10px) is bumped so its text still clears the icon. */
-  .md3 .co-phone .mfield-ok {
-    position: absolute;
-    top: 50%;
-    right: 10px;
-    transform: translateY(-50%);
-  }
-  .md3 .co-phone .mfield--floating.mfield--valid {
-    padding-right: 34px;
-  }
   .md3 .co-address-row {
     display: flex;
     flex-direction: column;
@@ -14072,6 +14171,10 @@ color: #005CFF;
   max-width: 800px;
 }
 
+/* the dialog itself takes focus on open (Modal.tsx): keep its shadow, not the generic focus ring */
+.md3 .mmodal:focus-visible {
+  box-shadow: var(--md-e3) !important;
+}
 .md3 .mmodal-head {
   flex: none;
   display: flex;
@@ -14115,6 +14218,25 @@ color: #005CFF;
 .md3 .mmodal-close:hover {
   background: var(--md-sc-high);
 }
+/* Modal.tsx headerAction: absolute like .mmodal-close, 4px to its left (right = 24 + 40 + 4). */
+.md3 .mmodal-head-action {
+  position: absolute;
+  top: 20px;
+  right: 68px;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--md-r-full);
+  background: transparent;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.md3 .mmodal-head-action:hover {
+  background: var(--md-sc-high);
+}
 
 .md3 .mmodal-body {
   flex: 1 1 auto;

package/ui/Modal.tsx

@@ -51,6 +51,8 @@ export interface ModalProps {
    *  md3.css), so callers with a specific close-icon spec (exact asset, absolute position
    *  independent of title height) aren't stuck fighting the default's flex layout. */
   closeIcon?: React.ReactNode;
+  /** optional extra header button rendered before the close button (e.g. a download action). */
+  headerAction?: React.ReactNode;
 }
 
 // focusable descendants used by the basic focus trap.
@@ -67,6 +69,7 @@ const Modal: React.FunctionComponent<ModalProps> = ({
   dismissOnScrim = true,
   className,
   closeIcon,
+  headerAction,
 }) => {
   const surfaceRef = React.useRef<HTMLDivElement | null>(null);
   // the element focused before the dialog opened, so focus can be restored on close.
@@ -133,7 +136,7 @@ const Modal: React.FunctionComponent<ModalProps> = ({
     const prevOverflow = document.body.style.overflow;
     document.body.style.overflow = 'hidden';
 
-    // move focus into the dialog (first focusable, else the surface itself).
+    // focus the dialog surface, not its first control: a header icon would take the :focus-visible ring on open.
     // { 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
@@ -145,10 +148,7 @@ 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) {
-      const first = surface.querySelector<HTMLElement>(FOCUSABLE);
-      (first || surface).focus({ preventScroll: true });
-    }
+    if (surface) surface.focus({ preventScroll: true });
 
     return () => {
       document.body.style.overflow = prevOverflow;
@@ -237,6 +237,7 @@ const Modal: React.FunctionComponent<ModalProps> = ({
           ) : (
             <span className="mmodal-title" aria-hidden="true" />
           )}
+          {headerAction}
           {closeIcon ? (
             <button type="button" className="mmodal-close" aria-label="Schließen" onClick={onClose}>
               {closeIcon}