@bytebrand/fe-ui-core-autobahn 1.0.153 → 1.0.154

package/package.json

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

@@ -1491,6 +1491,10 @@ line-height: 31px;
   line-height: 15px;
   color: #44464F;
   margin-bottom: 2px;
+  /* long submodels (e.g. "C4 1.2 Plus/Rückfahrkamera/Sitzheizung/Tempomat") use "/" instead of
+     spaces between items, so the browser's default word-wrap sees one unbreakable "word" and
+     overflows past the 296px aside instead of wrapping (ADV-238). */
+  overflow-wrap: break-word;
 }
 .md3 .co-aside-finance {
   font-family: 'Arial';
@@ -2923,6 +2927,13 @@ line-height: 31px;
   height: 48px;
   padding: 0 40px 0 10px;
 }
+/* ADV-238: mandatory-but-empty Geburtsdatum must show the same red border as the other
+   required fields. Same specificity as the rule above (two classes) so it only wins because
+   it comes later in source order — .co-personal-grid .mfield--error can't reach in here, its
+   border gets overridden by .co-birthdate .mfield right above for the same reason. */
+.md3 .co-birthdate .mfield--error {
+  border: 1px solid #BA1A1A;
+}
 /* on-the-border notch, matching .mfield-label--notch exactly (same mechanic as Vorwahl/
    Telefonnummer's own label) instead of the earlier stacked-inside-the-box layout. */
 .md3 .co-birthdate .mfield-label {
@@ -3090,6 +3101,25 @@ line-height: 31px;
 .md3 .co-borrower-relationship .mselect-btn {
   position: relative;
 }
+/* ADV-240 QA (comment 35891): mandatory-but-empty red border — Dropdown has no built-in visual
+   error state, so this keys off the `is-error` wrapper class PaymentDetailsNext.tsx adds. Three
+   classes deep so it outranks both the base .mselect-btn idle box-shadow and this file's own
+   .co-borrower-relationship .mselect-btn above without needing !important. */
+.md3 .co-borrower-relationship.is-error .mselect-btn {
+  box-shadow: inset 0 0 0 1px #BA1A1A;
+}
+/* same chevron glyph as the ::after above, just stroke='%23BA1A1A' (red) instead of '%23005CFF'. */
+.md3 .co-borrower-relationship.is-error .mselect-btn::after {
+  background-image: url("data:image/svg+xml,%3Csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M4%206L8%2010L12%206'%20stroke='%23BA1A1A'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+/* .co-borrower-relationship .mselect-btn:hover below is the SAME specificity (3 classes) as the
+   .is-error border rule above and comes later in the file, so hovering an errored field was
+   winning the box-shadow back to idle gray. One more class (:hover added to .is-error's own
+   selector) outranks it regardless of source order — same fix shape as the co-birthdate
+   :focus-within override above. */
+.md3 .co-borrower-relationship.is-error .mselect-btn:hover {
+  box-shadow: inset 0 0 0 1px #BA1A1A;
+}
 .md3 .co-borrower-relationship .mselect-btn:hover {
   box-shadow: inset 0 0 0 1px var(--md-outline-variant);
 }
@@ -3558,6 +3588,35 @@ line-height: 31px;
   color: #1A1B22;
   background: #FFFFFF;
 }
+/* ADV-249 QA: Lieferadresse's "Abweichende Lieferadresse" form had no validation at all — this
+   is its red error state, same red as .co-error (--md-error). Each field is now wrapped in
+   .co-addr-form-item (the actual grid cell) so a per-field hint can sit directly under its own
+   input instead of one generic message for the whole form. */
+.md3 .co-addr-form-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.md3 .co-addr-form-field.is-error {
+  border-color: var(--md-error);
+}
+/* native focus outline stacked on top of the red border looked like two rings at once
+   (browser default blue + our red) — same inset-ring swap as .mtextarea:focus, red instead of
+   blue while the field is still invalid. */
+.md3 .co-addr-form-field:focus {
+  outline: 0;
+  box-shadow: inset 0 0 0 2px #005CFF;
+}
+.md3 .co-addr-form-field.is-error:focus {
+  box-shadow: inset 0 0 0 2px var(--md-error);
+}
+.md3 .co-addr-field-hint {
+  color: var(--md-error);
+  font-family: 'Arimo';
+  font-size: 12px;
+  line-height: 14px;
+}
 .md3 .co-addr-form-actions {
   grid-column: 1 / -1;
   display: flex;
@@ -6419,7 +6478,8 @@ a.oo-warranty-link--icon:hover {
 .md3 .enq-float input:focus-visible,
 .md3 .enq-float textarea:focus-visible,
 .md3 .enquiry-name-row input:focus-visible,
-.md3 .enquiry-email-wrap input:focus-visible {
+.md3 .enquiry-email-wrap input:focus-visible,
+.md3 .co-addr-form-field:focus-visible {
   box-shadow: none !important;
 }
 .md3 .link-accent {

package/ui/MfieldCheckIcon.tsx

@@ -1,13 +1,13 @@
-import * as React from 'react';
-
-// Figma-exact valid-field checkmark (.mfield-ok, FormField/MdField's showValid) — a distinct
-// path/stroke from the generic lucide Check that Icon name="check" renders elsewhere, so it's
-// its own tiny component rather than a REGISTRY entry in Icon.tsx (which would change every
-// other "check" usage in the app too).
-const MfieldCheckIcon: React.FunctionComponent = () => (
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M13.3334 4L6.00002 11.3333L2.66669 8" stroke="#168A45" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
-  </svg>
-);
-
-export default MfieldCheckIcon;
+import * as React from 'react';
+
+// Figma-exact valid-field checkmark (.mfield-ok, FormField/MdField's showValid) — a distinct
+// path/stroke from the generic lucide Check that Icon name="check" renders elsewhere, so it's
+// its own tiny component rather than a REGISTRY entry in Icon.tsx (which would change every
+// other "check" usage in the app too).
+const MfieldCheckIcon: React.FunctionComponent = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M13.3334 4L6.00002 11.3333L2.66669 8" stroke="#168A45" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+export default MfieldCheckIcon;