@maboussoleaidant/design-system 0.1.42 → 0.1.44

package/CHANGELOG.md

@@ -6,6 +6,35 @@ Format inspiré de [Keep a Changelog](https://keepachangelog.com/fr/1.1.0/). Ver
 
 ---
 
+## [0.1.44] — 2026-09-15
+
+L'**infobox du dropdown** devient desktop uniquement. Rétrocompatible pour toute app qui ne l'émettait pas dans son menu mobile.
+
+### 🐛 Correctif
+
+- **`.mba-header__mobile-submenu .mba-header__dropdown-infobox`** (`src/components/_header.css`) — passe en `display: none`.
+  - **Problème** : le DS *stylisait* l'infobox dans le sous-menu mobile (fond narcisse, `flex: 1`, tailles de texte dédiées) alors que la maquette du menu mobile ne la prévoit pas. Toute app qui réutilisait le même gabarit de dropdown aux deux tailles la voyait donc s'afficher en mobile, sans qu'aucune règle ne s'y oppose.
+  - **Correction** : les trois blocs de style sont remplacés par une règle de masquage. Le même gabarit peut désormais être réutilisé aux deux tailles **sans conditionner le rendu côté intégration**.
+  - Le dropdown **desktop est inchangé** : infobox toujours en `display: flex`, 246 × 339 px, fond narcisse. Sous 1130 px il était déjà hors-jeu, `.mba-header__nav` passant en `display: none`.
+
+> À noter pour les intégrations : si votre app masquait déjà l'infobox mobile par une règle locale, celle-ci devient redondante et peut être retirée.
+
+---
+
+## [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).

package/dist/mba-design-system.css

@@ -3904,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;
@@ -4090,30 +4093,14 @@ button.mba-input-icon__icon:hover {
   line-height: var(--mba-leading-normal);
 }
 
-/* Infobox dans le menu mobile */
+/* Infobox : desktop uniquement.
+   La maquette du menu mobile ne la prévoit pas. On la masque ici plutôt que
+   de laisser chaque app conditionner son rendu : le même gabarit de dropdown
+   peut ainsi être réutilisé aux deux tailles sans branche côté intégration.
+   Le dropdown desktop, lui, est déjà hors-jeu en mobile puisque
+   .mba-header__nav passe en display:none sous 1130px. */
 .mba-header__mobile-submenu .mba-header__dropdown-infobox {
-  margin-top: var(--mba-space-sm); /* 12px */
-  flex: 1; /* Prend toute la largeur en mobile */
-  background-color: var(--mba-color-pastel-narcisse);
-  border-radius: var(--mba-radius-2xs);
-  padding: var(--mba-space-sm);
-}
-
-.mba-header__mobile-submenu .mba-header__dropdown-infobox-title {
-  font-family: var(--mba-font-family-text);
-  font-size: var(--mba-font-size-sm);
-  font-weight: var(--mba-font-weight-semibold);
-  color: var(--mba-color-text);
-  margin: 0 0 var(--mba-space-xxs) 0;
-}
-
-.mba-header__mobile-submenu .mba-header__dropdown-infobox-description {
-  font-family: var(--mba-font-family-text);
-  font-size: var(--mba-font-size-xs);
-  font-weight: var(--mba-font-weight-regular);
-  color: var(--mba-color-text);
-  margin: 0;
-  line-height: var(--mba-leading-normal);
+  display: none;
 }
 
 /* ===========================================