@maboussoleaidant/design-system 0.1.41 → 0.1.43

package/CHANGELOG.md

@@ -6,6 +6,46 @@ Format inspiré de [Keep a Changelog](https://keepachangelog.com/fr/1.1.0/). Ver
 
 ---
 
+## [0.1.43] — 2026-09-15
+
+Correctif du **menu mobile du header**. **100 % rétrocompatible** (aucune classe modifiée).
+
+### 🐛 Correctif
+
+- **`.mba-header__mobile-menu`** (`src/components/_header.css`) — suppression de l'interstice sous le header.
+  - **Problème** : `top: calc(100% + var(--mba-space-xs))` laissait **8 px de fond de page** entre le bas de la barre et le haut du menu déroulant. La maquette montre un bloc blanc continu.
+  - **Correction** : `top: 100%`. Bas du header et haut du menu coïncident désormais exactement (72 px / 72 px, écart nul).
+  - **Coins hauts mis droits** : `border-radius` passe de `var(--mba-radius-xs)` sur les quatre coins à `0 0 var(--mba-radius-xs) var(--mba-radius-xs)`. Une fois le menu accolé, des coins hauts arrondis auraient laissé le fond transparaître dans la jonction.
+  - Le `border-radius` de `.mba-header` (`0 0 16px 16px`) est **inchangé** : l'encoche qu'il creuse à la jonction est conforme à la maquette.
+
+---
+
+## [0.1.42] — 2026-09-15
+
+Alignement des **logos du header** sur ceux du footer. **100 % rétrocompatible** (aucune classe modifiée).
+
+### 🖼️ Logos du header unifiés avec le footer
+
+Le header et le footer référençaient deux jeux de logos distincts, de géométries différentes : `assets/logos/logo_mba_aidants.svg` et `logo_mba_partenaires.svg` (viewBox `0 0 143 21`) d'un côté, `assets/logo-mba-agirc-arrco.svg` et `-pro.svg` (viewBox `0 0 228 32`) de l'autre. Le CSS des deux composants étant identique (`max-width: 227.92px; height: 32px`), le logo du header rendait ~218 px de large contre 228 px pour celui du footer.
+
+Les deux variantes du header pointent désormais sur les fichiers du footer :
+
+| | MBA | Partenaire |
+|---|---|---|
+| Source | `assets/logo-mba-agirc-arrco.svg` | `assets/logo-mba-agirc-arrco-pro.svg` |
+| Rendu desktop | 228 × 32 | 228 × 32 |
+| Rendu mobile | 171 × 24 | 171 × 24 |
+
+**Corrige au passage un défaut de packaging** : `build:assets` ne copiait pas `src/assets/logos/`, si bien que les logos du header étaient **absents du package npm** — ils n'existaient que dans Storybook, qui sert `src/`. Les fichiers désormais utilisés sont bien livrés dans `assets/`. Le dossier `src/assets/logos/` n'est plus référencé.
+
+### 🐛 Correctif
+
+- **`.mba-header__logo-img`** (`src/components/_header.css`) — ajout de `width: auto`.
+  - **Problème** : le header réduit la hauteur du logo à 24 px sous 768 px. Dès qu'un balisage porte un attribut `width` (recommandé pour éviter le CLS), cette largeur restait figée et **écrasait le logo** — 228 × 24 au lieu du ratio, soit 9,5 contre 7,125 attendu.
+  - **Correction** : `width: auto` neutralise l'attribut, la hauteur pilote et le ratio suit. Vérifié à 1440 px (228 × 32) et 375 px (171 × 24), ratio constant à 7,12.
+
+---
+
 ## [0.1.41] — 2026-09-15
 
 Mise en conformité du **footer** avec la maquette : coins hauts arrondis et ombre portée. **100 % rétrocompatible** (aucune classe modifiée, aucun changement de structure HTML).

package/dist/mba-design-system.css

@@ -3544,6 +3544,10 @@ button.mba-input-icon__icon:hover {
 
 .mba-header__logo-img {
   max-width: 227.92px;
+  /* width:auto neutralise l'attribut width= du balisage : sans lui, la
+     hauteur réduite en mobile (24px) écraserait le logo au lieu de le
+     redimensionner. La hauteur pilote, le ratio suit. */
+  width: auto;
   height: 32px;
   display: block;
 }
@@ -3900,11 +3904,14 @@ button.mba-input-icon__icon:hover {
    =========================================== */
 .mba-header__mobile-menu {
   position: absolute;
-  top: calc(100% + var(--mba-space-xs));
+  /* Accolé au header, sans interstice : la maquette montre un bloc blanc
+     continu entre la barre et le menu. Les coins hauts restent droits
+     pour que la jonction ne laisse pas apparaître le fond. */
+  top: 100%;
   left: 0;
   right: 0;
   background-color: var(--mba-color-white);
-  border-radius: var(--mba-radius-xs);
+  border-radius: 0 0 var(--mba-radius-xs) var(--mba-radius-xs);
   padding: var(--mba-space-md);
   display: none;
   z-index: 999;