@bytebrand/fe-ui-core-autobahn 1.0.58 → 1.0.59

package/chrome/TopBar.tsx

@@ -466,8 +466,8 @@ const TopBar: React.FunctionComponent<TopBarProps> = ({
       }}
     >
       <div
-        className="container"
-        style={{ height: 64, display: 'flex', alignItems: 'center', gap: 16, padding: '0 16px' }}
+        className="container topbar-container"
+        style={{ height: 64, display: 'flex', alignItems: 'center', gap: 16 }}
       >
         {/* mobile hamburger */}
         <button
@@ -481,7 +481,7 @@ const TopBar: React.FunctionComponent<TopBarProps> = ({
 
         {/* full navigation — '/' belongs to WordPress behind traefik, not the SPA (see HOME_PATH). */}
         <a href={HOME_PATH} style={{ flex: 'none', display: 'inline-flex' }}>
-          <img src={logoUrl} height="32" style={{ cursor: 'pointer', display: 'block' }} alt="auto.de" />
+          <img src={logoUrl} height="32" className="topbar-logo" style={{ cursor: 'pointer', display: 'block' }} alt="auto.de" />
         </a>
 
         {renderNav('hide-mobile', {
@@ -493,64 +493,68 @@ const TopBar: React.FunctionComponent<TopBarProps> = ({
 
         <div style={{ flex: 1 }} />
 
-        <IconButton name="search" label={t('autobahn:chrome.search')} onClick={goSearch} />
-        {/* Merkliste → /favourites with a real count badge — desktop-only now; the mobile row
-            below shows it ONLY for the 'browsing' variant instead. */}
-        <span className="hide-mobile" style={{ position: 'relative', display: 'inline-flex' }}>
-          <IconButton name="heart" label={t('autobahn:chrome.favorites')} onClick={() => goRoute(R_FAVOURITES)} />
-          {favoritesCount > 0 && (
-            <span style={badgeStyle}>{favoritesCount}</span>
-          )}
-        </span>
-        {/* Suchaufträge → /my-searches (saved searches list) — desktop-only; no Figma mobile
-            header variant includes a bell icon. */}
-        <span className="hide-mobile" style={{ position: 'relative', display: 'inline-flex' }}>
-          <IconButton name="bell" label={t('autobahn:chrome.savedSearches')} onClick={() => goRoute(R_SAVED_SEARCHES)} />
-          {notificationCount > 0 && (
-            <span style={badgeStyle}>{notificationCount}</span>
-          )}
-        </span>
-
-        {/* Mobile-only reduced icon set — which ONE extra icon (besides search+account, both
-            always shown) appears depends on `variant`, per the 3 Figma mobile header specs. */}
-        {variant === 'browsing' && (
-          <span className="show-mobile" style={{ position: 'relative', display: 'inline-flex' }}>
+        {/* Action icons cluster — its own (smaller) gap, separate from the outer 16px gap between
+            hamburger/logo/nav: the Header-System spec calls for ~2-6px between actions but keeps
+            the wider spacing everywhere else. */}
+        <div className="topbar-actions" style={{ display: 'flex', alignItems: 'center' }}>
+          <IconButton name="search" label={t('autobahn:chrome.search')} onClick={goSearch} />
+          {/* Merkliste → /favourites with a real count badge — desktop-only now; the mobile row
+              below shows it ONLY for the 'browsing' variant instead. */}
+          <span className="hide-mobile" style={{ position: 'relative', display: 'inline-flex' }}>
             <IconButton name="heart" label={t('autobahn:chrome.favorites')} onClick={() => goRoute(R_FAVOURITES)} />
-            {favoritesCount > 0 && <span style={badgeStyle}>{favoritesCount}</span>}
+            {favoritesCount > 0 && (
+              <span style={badgeStyle}>{favoritesCount}</span>
+            )}
           </span>
-        )}
-        {variant === 'conversion' && (
-          <span className="show-mobile" style={{ position: 'relative', display: 'inline-flex' }}>
-            <IconButton name="phone" label={t('autobahn:chrome.callUs')} onClick={() => goNav({ href: phoneHref })} />
+          {/* Suchaufträge → /my-searches (saved searches list) — desktop-only; no Figma mobile
+              header variant includes a bell icon. */}
+          <span className="hide-mobile" style={{ position: 'relative', display: 'inline-flex' }}>
+            <IconButton name="bell" label={t('autobahn:chrome.savedSearches')} onClick={() => goRoute(R_SAVED_SEARCHES)} />
+            {notificationCount > 0 && (
+              <span style={badgeStyle}>{notificationCount}</span>
+            )}
           </span>
-        )}
 
-        {/* language segmented control — hidden ≤600px (the account menu carries language rows). */}
-        {onLangSelect && (
-          <div className="lang-seg hide-mobile" aria-label={t('autobahn:chrome.switchLanguage')}>
-            <button type="button" className={'lang-seg-btn' + (language !== 'en' ? ' on' : '')} onClick={() => onLangSelect('de')}>DE</button>
-            <button type="button" className={'lang-seg-btn' + (language === 'en' ? ' on' : '')} onClick={() => onLangSelect('en')}>EN</button>
-          </div>
-        )}
+          {/* Mobile-only reduced icon set — which ONE extra icon (besides search+account, both
+              always shown) appears depends on `variant`, per the 3 Figma mobile header specs. */}
+          {variant === 'browsing' && (
+            <span className="show-mobile" style={{ position: 'relative', display: 'inline-flex' }}>
+              <IconButton name="heart" label={t('autobahn:chrome.favorites')} onClick={() => goRoute(R_FAVOURITES)} />
+              {favoritesCount > 0 && <span style={badgeStyle}>{favoritesCount}</span>}
+            </span>
+          )}
+          {variant === 'conversion' && (
+            <span className="show-mobile" style={{ position: 'relative', display: 'inline-flex' }}>
+              <IconButton name="phone" label={t('autobahn:chrome.callUs')} onClick={() => goNav({ href: phoneHref })} />
+            </span>
+          )}
 
-        {/* Konto trigger + account layer — visible at EVERY width: this menu is the only place
-            sign-out / settings / dealer switching exist, so it must never be display:none'd (the
-            pre-cutover hide-tablet left 601–980px with no logout at all). Desktop keeps the
-            tonal "Konto" pill; ≤600px it collapses to a plain icon (topbar-account-btn CSS) and
-            opens the full-width mobile Account Layer instead of the small popover. */}
-        <span style={{ position: 'relative', display: 'inline-flex' }}>
-          <button
-            className="mbtn mbtn--tonal mbtn--sm topbar-account-btn"
-            style={{ marginLeft: 4 }}
-            onClick={() => setAccount((a) => !a)}
-            aria-expanded={account}
-            aria-label={t('autobahn:chrome.account')}
-          >
-            <Icon name="user" size={18} />
-            <span className="hide-mobile">{t('autobahn:chrome.account')}</span>
-          </button>
-          {account && renderAccountMenu()}
-        </span>
+          {/* language segmented control — hidden ≤600px (the account menu carries language rows). */}
+          {onLangSelect && (
+            <div className="lang-seg hide-mobile" aria-label={t('autobahn:chrome.switchLanguage')}>
+              <button type="button" className={'lang-seg-btn' + (language !== 'en' ? ' on' : '')} onClick={() => onLangSelect('de')}>DE</button>
+              <button type="button" className={'lang-seg-btn' + (language === 'en' ? ' on' : '')} onClick={() => onLangSelect('en')}>EN</button>
+            </div>
+          )}
+
+          {/* Konto trigger + account layer — visible at EVERY width: this menu is the only place
+              sign-out / settings / dealer switching exist, so it must never be display:none'd (the
+              pre-cutover hide-tablet left 601–980px with no logout at all). Desktop keeps the
+              tonal "Konto" pill; ≤600px it collapses to a plain icon (topbar-account-btn CSS) and
+              opens the full-width mobile Account Layer instead of the small popover. */}
+          <span style={{ position: 'relative', display: 'inline-flex' }}>
+            <button
+              className="mbtn mbtn--tonal mbtn--sm topbar-account-btn"
+              onClick={() => setAccount((a) => !a)}
+              aria-expanded={account}
+              aria-label={t('autobahn:chrome.account')}
+            >
+              <Icon name="user" size={18} />
+              <span className="hide-mobile">{t('autobahn:chrome.account')}</span>
+            </button>
+            {account && renderAccountMenu()}
+          </span>
+        </div>
       </div>
 
       {account && renderMobileAccountLayer()}

package/package.json

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

@@ -5103,6 +5103,16 @@ line-height: 31px;
   padding: 8px 16px 16px;
 }
 
+/* Base (desktop) values for the two TopBar layout knobs the mobile Header-System spec overrides
+   below — kept as real CSS rules (not inline styles) since an inline style on the element would
+   always beat the media-query override regardless of specificity. */
+.md3 .topbar-container {
+  padding: 0 16px;
+}
+.md3 .topbar-actions {
+  gap: 16px;
+}
+
 /* mobile-only "Account Layer" sheet (TopBar) — full-width panel under the header, per the Figma
    "03 | Account Layer" mockups. .show-mobile forces display:flex (see the ≤600px override
    below) — flex-direction:column comes from the inline style on the element itself. */
@@ -5131,30 +5141,53 @@ line-height: 31px;
 /* desktop "Konto" pill collapses to a plain icon-only button on mobile — the account layer above
    replaces the small popover the pill normally opens on wider screens. */
 @media (max-width: 600px) {
+  /* "Header-System" spec dimensions (390px reference) — all scoped to the TopBar's own <header>
+     (or a dedicated class) so none of this touches .icon-btn/.mbtn/.container usage elsewhere in
+     the app (VDP gallery controls, financing modal, other pages' own containers, etc.). */
   .md3 .topbar-account-btn {
     background: transparent;
     border: 0;
     padding: 0;
-    width: 40px;
-    height: 40px;
+    /* Touch target 48×48 — WCAG 2.2 minimum is 24×24, but the spec recommends 48×48 consistently
+       for auto.de given the broad age range and high mobile share. */
+    width: 48px;
+    height: 48px;
     min-width: 0;
     border-radius: 50%;
   }
   .md3 .topbar-account-btn:hover {
     background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
   }
-  /* Mobile header icons measured against the real Figma export read visibly smaller than the
-     reference (the shared .icon-btn/.mbtn rules force 20px/18px everywhere in the app — fine
-     elsewhere, but the Figma mobile header specifically wants ~24px/22px). Scoped to icon
-     buttons INSIDE the TopBar's own <header> so it doesn't touch icon-btn/mbtn usage on other
-     pages (VDP gallery controls, financing modal, etc.). */
+  /* Visible icon glyphs 24-28px (spec range) — the shared .icon-btn/.mbtn rules force 20px/18px
+     everywhere else in the app, which is fine there but read visibly smaller than the Figma
+     mobile header reference. */
+  .md3 header .icon-btn {
+    width: 48px;
+    height: 48px;
+  }
   .md3 header .icon-btn .lucide {
     width: 24px;
     height: 24px;
   }
   .md3 header .topbar-account-btn .lucide {
-    width: 22px;
-    height: 22px;
+    width: 24px;
+    height: 24px;
+  }
+  /* Horizontal margin 12px (spec: "Horizontaler Rand"). */
+  .md3 .topbar-container {
+    padding: 0 12px;
+  }
+  /* Logo 118-126px wide (spec range) — the SVG's own aspect ratio (120:34.909) means the desktop
+     height=32 attribute renders ~110px wide, just under range; this bumps it into range on mobile
+     specifically via a CSS width override (wins over the HTML height attribute). */
+  .md3 .topbar-logo {
+    width: 122px;
+    height: auto;
+  }
+  /* Gap between action icons 2-6px (spec: "Abstand Aktionen") — separate from the wider gap the
+     hamburger/logo/nav still use (that's the outer .container's own gap, untouched here). */
+  .md3 .topbar-actions {
+    gap: 4px;
   }
 }
 /* language segmented DE|EN — active tab filled, inactive ghost */