@maboussoleaidant/design-system 0.1.33 → 0.1.34

package/AGENTS.md

@@ -0,0 +1,286 @@
+# MBA Design System — Instructions pour assistants IA (Claude, Cursor, Copilot, Codex)
+
+Ce fichier est destiné aux **assistants IA** (LLM agents, IDE copilots) qui écrivent ou modifient du code consommant le Design System `@maboussoleaidant/design-system`. Il décrit l'architecture en couches, la règle d'or pour utiliser Tailwind correctement, et fournit la table de référence complète des tokens. Si vous êtes un humain, lisez plutôt le `README.md` et la doc Storybook.
+
+> Pourquoi ce fichier existe : sans guidage, les LLM tombent sur les variables CSS brutes (`--mba-*`) avant de découvrir le preset Tailwind, et écrivent `class="text-[var(--mba-color-primary-900)]"` au lieu de `class="text-primary-900"`. Ce contournement duplique la couche d'abstraction et casse en silence si un token est renommé. Ce document élimine cette ambiguïté.
+
+> **Lu depuis une app consommatrice ?** Les outils IA lisent `AGENTS.md` à la racine du repo courant, pas dans `node_modules/`. Pour activer ces instructions dans une app cliente, copiez le snippet d'activation depuis le [README du DS](./README.md#activation-dans-une-app-consommatrice) dans le `CLAUDE.md` / `AGENTS.md` à la racine de votre app.
+
+---
+
+## Architecture en 3 couches
+
+Le Design System expose **trois couches**, à utiliser dans l'ordre :
+
+1. **Tokens** — `src/tokens/` exporte des CSS Custom Properties `--mba-*` (couleurs, espacements, typo, ombres, radius, etc.). Source de vérité, mais **pas faits pour être consommés directement** dans des classes utilitaires.
+2. **Components** — `src/components/` fournit des classes pré-stylées `.mba-btn`, `.mba-header__nav`, `.mba-article-card`, `.mba-icon`, `.mba-wave`, etc. Elles consomment les tokens en interne et sont prêtes à l'emploi.
+3. **Tailwind preset** — `src/tailwind-preset.css` mappe **chaque** token MBA vers une variable de thème Tailwind via `@theme {}`. C'est ce qui permet à Tailwind v4 (JIT) de générer des classes utilitaires comme `text-primary-900`, `bg-pastel-bleuet`, `p-md`, `rounded-md`, `shadow-md`. **C'est cette couche qu'il faut viser pour tout le styling ad-hoc.**
+
+---
+
+## Règle d'or pour Tailwind
+
+> **N'utilisez jamais `[var(--mba-*)]` en valeur arbitraire Tailwind.** Utilisez systématiquement la classe utilitaire générée par le preset.
+
+Le preset existe précisément pour ça. Le contourner :
+
+- **duplique l'abstraction** (vous re-mappez à la main ce qui est déjà mappé)
+- **casse silencieusement** si un token MBA est renommé ou réorganisé (le preset suit, votre `[var(--mba-...)]` non)
+- **ignore le cache du JIT** et la déduplication CSS de Tailwind
+- **rend le code illisible** pour les humains qui relisent
+
+Si une utilité semble manquer, elle a presque toujours un équivalent dans la table des tokens plus bas. Si elle manque vraiment, ouvrez une issue sur le DS — n'écrivez pas un workaround `[var(...)]`.
+
+---
+
+## DO / DON'T
+
+| ✅ DO | ❌ DON'T |
+| --- | --- |
+| `class="text-primary-900"` | `class="text-[var(--mba-color-primary-900)]"` |
+| `class="bg-pastel-bleuet"` | `class="bg-[var(--mba-color-pastel-bleuet)]"` |
+| `class="p-md"` | `class="p-[var(--mba-space-md)]"` |
+| `class="rounded-md"` | `class="rounded-[var(--mba-radius-md)]"` |
+| `class="shadow-md"` | `class="shadow-[var(--mba-shadow-md)]"` |
+| `class="hidden"` | `class="[display:none]"` |
+| `class="h-64"` (16rem) | `class="h-[295px]"` (valeur en pixels figée) |
+| `class="font-heading"` | `class="font-[var(--mba-font-family-heading)]"` |
+
+Règle dérivée : **avant** d'écrire une valeur arbitraire `[...]`, regardez la table de référence des tokens. Si elle est listée, utilisez la classe utilitaire correspondante.
+
+---
+
+## Pattern d'import recommandé
+
+Dans le fichier CSS d'entrée de votre app (par ex. `src/styles/global.css` pour Astro, `src/styles.css` pour Angular) :
+
+```css
+@import "@maboussoleaidant/design-system";
+@import "tailwindcss";
+@import "@maboussoleaidant/design-system/preset";
+```
+
+L'**ordre est important** :
+
+1. `@maboussoleaidant/design-system` — charge les tokens (`--mba-*`) et les composants (`.mba-*`). **Premier**, car le preset en dépend (les `var(--mba-*)` du preset doivent résoudre).
+2. `tailwindcss` — initialise Tailwind v4 et son JIT.
+3. `@maboussoleaidant/design-system/preset` — charge le mapping `@theme {}` qui rend les tokens MBA disponibles comme classes utilitaires Tailwind. **Doit venir après** Tailwind pour que le `@theme` soit pris en compte.
+
+Inverser ces lignes casse silencieusement la résolution des classes (`text-primary-900` redevient inconnu).
+
+---
+
+## Référence complète des tokens
+
+<!-- AUTO-GENERATED:tokens-mapping START -->
+
+_Auto-generated from `src/tailwind-preset.css` — do not edit by hand. Run `npm run docs:agents` to regenerate._
+
+### Colors
+
+Chaque couleur est utilisable comme `bg-{name}`, `text-{name}`, `border-{name}`, `ring-{name}`, `fill-{name}`, `stroke-{name}`.
+
+| MBA CSS variable | Tailwind name |
+| --- | --- |
+| `--mba-color-white` | `white` |
+| `--mba-color-black` | `black` |
+| `--mba-color-grey-50` | `grey-50` |
+| `--mba-color-grey-100` | `grey-100` |
+| `--mba-color-grey-300` | `grey-300` |
+| `--mba-color-grey-400` | `grey-400` |
+| `--mba-color-grey-800` | `grey-800` |
+| `--mba-color-primary-50` | `primary-50` |
+| `--mba-color-primary-100` | `primary-100` |
+| `--mba-color-primary-400` | `primary-400` |
+| `--mba-color-primary-500` | `primary-500` |
+| `--mba-color-primary-800` | `primary-800` |
+| `--mba-color-primary-900` | `primary-900` |
+| `--mba-color-secondary-500` | `secondary-500` |
+| `--mba-color-primary-pro-50` | `primary-pro-50` |
+| `--mba-color-primary-pro-100` | `primary-pro-100` |
+| `--mba-color-primary-pro-400` | `primary-pro-400` |
+| `--mba-color-primary-pro-500` | `primary-pro-500` |
+| `--mba-color-primary-pro-800` | `primary-pro-800` |
+| `--mba-color-error-100` | `error-100` |
+| `--mba-color-error-300` | `error-300` |
+| `--mba-color-error-400` | `error-400` |
+| `--mba-color-error-500` | `error-500` |
+| `--mba-color-error-800` | `error-800` |
+| `--mba-color-success-100` | `success-100` |
+| `--mba-color-success-300` | `success-300` |
+| `--mba-color-success-400` | `success-400` |
+| `--mba-color-success-500` | `success-500` |
+| `--mba-color-success-800` | `success-800` |
+| `--mba-color-warning-50` | `warning-50` |
+| `--mba-color-warning-100` | `warning-100` |
+| `--mba-color-warning-300` | `warning-300` |
+| `--mba-color-warning-400` | `warning-400` |
+| `--mba-color-warning-500` | `warning-500` |
+| `--mba-color-warning-800` | `warning-800` |
+| `--mba-color-info-50` | `info-50` |
+| `--mba-color-info-100` | `info-100` |
+| `--mba-color-info-300` | `info-300` |
+| `--mba-color-info-400` | `info-400` |
+| `--mba-color-info-500` | `info-500` |
+| `--mba-color-info-800` | `info-800` |
+| `--mba-color-brick-light` | `brick-light` |
+| `--mba-color-brick` | `brick` |
+| `--mba-color-forest-light` | `forest-light` |
+| `--mba-color-forest` | `forest` |
+| `--mba-color-rose-light` | `rose-light` |
+| `--mba-color-rose` | `rose` |
+| `--mba-color-pastel-bleuet` | `pastel-bleuet` |
+| `--mba-color-pastel-lavender` | `pastel-lavender` |
+| `--mba-color-pastel-narcisse` | `pastel-narcisse` |
+| `--mba-color-pastel-oranger` | `pastel-oranger` |
+| `--mba-color-beige` | `beige` |
+
+### Fonts (font-family)
+
+Utiliser comme `font-{name}` (ex. `font-heading`).
+
+| MBA CSS variable | Tailwind name |
+| --- | --- |
+| `--mba-font-family-text` | `sans` |
+| `--mba-font-family-heading` | `heading` |
+| `--mba-font-family-mono` | `mono` |
+
+### Font sizes
+
+Utiliser comme `text-{name}` (ex. `text-md`).
+
+| MBA CSS variable | Tailwind name |
+| --- | --- |
+| `--mba-font-size-xxs` | `xxs` |
+| `--mba-font-size-xs` | `xs` |
+| `--mba-font-size-sm` | `sm` |
+| `--mba-font-size-md` | `md` |
+| `--mba-font-size-xl` | `xl` |
+| `--mba-font-size-xxl` | `xxl` |
+
+### Spacing — semantic scale
+
+Utiliser comme `p-{name}`, `m-{name}`, `gap-{name}`, `w-{name}`, `h-{name}`, `space-x-{name}`, `space-y-{name}`, `size-{name}`, `inset-{name}`, etc.
+
+| MBA CSS variable | Tailwind name |
+| --- | --- |
+| `--mba-space-0` | `0` |
+| `--mba-space-px` | `px` |
+| `--mba-space-xxs` | `xxs` |
+| `--mba-space-xs` | `xs` |
+| `--mba-space-sm` | `sm` |
+| `--mba-space-md` | `md` |
+| `--mba-space-lg` | `lg` |
+| `--mba-space-xl` | `xl` |
+| `--mba-space-xxl` | `xxl` |
+
+### Spacing — numeric scale
+
+Tailwind's numeric spacing scale is mapped 1:1 to rem values (no `--mba-*` indirection). Use them anywhere a Tailwind spacing utility is expected (`p-*`, `m-*`, `w-*`, `h-*`, `gap-*`, `space-x-*`, `space-y-*`, `size-*`, `min-w-*`, `inset-*`, etc.).
+
+| Tailwind tokens | rem range |
+| --- | --- |
+| `1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96` | `0.25rem` → `24rem` |
+
+### Max-width
+
+Utiliser comme `max-w-{name}`.
+
+| MBA CSS variable | Tailwind name |
+| --- | --- |
+| _(literal: `20rem`)_ | `xs` |
+| _(literal: `24rem`)_ | `sm` |
+| _(literal: `28rem`)_ | `md` |
+| _(literal: `32rem`)_ | `lg` |
+| _(literal: `36rem`)_ | `xl` |
+| _(literal: `42rem`)_ | `2xl` |
+| _(literal: `48rem`)_ | `3xl` |
+| _(literal: `56rem`)_ | `4xl` |
+| _(literal: `64rem`)_ | `5xl` |
+| _(literal: `72rem`)_ | `6xl` |
+| _(literal: `80rem`)_ | `7xl` |
+| _(literal: `100%`)_ | `full` |
+| _(literal: `none`)_ | `none` |
+
+### Border radius
+
+Utiliser comme `rounded-{name}`.
+
+| MBA CSS variable | Tailwind name |
+| --- | --- |
+| `--mba-radius-none` | `none` |
+| `--mba-radius-2xs` | `2xs` |
+| `--mba-radius-xs` | `xs` |
+| `--mba-radius-sm` | `sm` |
+| `--mba-radius-md` | `md` |
+| `--mba-radius-lg` | `lg` |
+| `--mba-radius-xl` | `xl` |
+| `--mba-radius-xxl` | `xxl` |
+| `--mba-radius-full` | `full` |
+
+### Shadows
+
+Utiliser comme `shadow-{name}`.
+
+| MBA CSS variable | Tailwind name |
+| --- | --- |
+| `--mba-shadow-none` | `none` |
+| `--mba-shadow-xxs` | `xxs` |
+| `--mba-shadow-xs` | `xs` |
+| `--mba-shadow-sm` | `sm` |
+| `--mba-shadow-md` | `md` |
+| `--mba-shadow-inner` | `inner` |
+
+<!-- AUTO-GENERATED:tokens-mapping END -->
+
+---
+
+## Composants `.mba-*`
+
+Le DS fournit des **composants pré-stylés** qu'il vaut mieux utiliser plutôt que de recomposer en utilitaires Tailwind.
+
+<!-- AUTO-GENERATED:components-list START -->
+
+_Auto-generated from `src/components/` and `src/base/_icons.css` — do not edit by hand. Run `npm run docs:agents` to regenerate._
+
+Liste des classes racines (les sous-éléments BEM `__*` sont internes et ne sont pas listés). Voir Storybook pour les variantes, états et exemples.
+
+- **Icônes** : `.mba-icon`, `.mba-icon--error`, `.mba-icon--fill`, `.mba-icon--info`, `.mba-icon--muted`, `.mba-icon--primary`, `.mba-icon--sm`, `.mba-icon--success`, `.mba-icon--warning`, `.mba-icon--xs`
+- **Boutons** : `.mba-btn`, `.mba-btn-annuaire`, `.mba-btn-block`, `.mba-btn-icon-only`, `.mba-btn-inline`, `.mba-btn-light`, `.mba-btn-pin`, `.mba-btn-secondary`, `.mba-btn-sm`, `.mba-btn-tertiary`
+- **Header** : `.mba-header`, `.mba-header--fixed`, `.mba-header--partenaire`, `.mba-header--sticky`, `.mba-header--transparent`
+- **Footer** : `.mba-footer`, `.mba-footer--pro`
+- **Sections** : `.mba-section`, `.mba-section--after-header`, `.mba-section--beige`, `.mba-section--bleuet`, `.mba-section--lavender`, `.mba-section--narcisse`, `.mba-section--oranger`, `.mba-section--primary-50`, `.mba-section--wave-beige`, `.mba-section--wave-bleuet`, `.mba-section--wave-both`, `.mba-section--wave-bottom`, `.mba-section--wave-inset`, `.mba-section--wave-lavender`, `.mba-section--wave-narcisse`, `.mba-section--wave-oranger`, `.mba-section--wave-primary-50`, `.mba-section--wave-sm`, `.mba-section--wave-top`, `.mba-section--white`
+- **Wave (autonome)** : `.mba-wave`, `.mba-wave--beige`, `.mba-wave--bleuet`, `.mba-wave--bottom`, `.mba-wave--lavender`, `.mba-wave--narcisse`, `.mba-wave--oranger`, `.mba-wave--sm`, `.mba-wave--top`, `.mba-wave--white`
+- **Cartes** : `.mba-article-card`, `.mba-article-card-grid`, `.mba-card`, `.mba-card--sm`, `.mba-card--static`, `.mba-card--white`, `.mba-card-grid`, `.mba-carousel-card`, `.mba-stats-card`, `.mba-stats-grid`
+- **Formulaires (input, textarea, dropdown, …)** : `.mba-dropdown`, `.mba-dropdown--error`, `.mba-dropdown--open`, `.mba-dropdown--pro`, `.mba-dropdown--valid`, `.mba-feedback`, `.mba-feedback--error`, `.mba-feedback--valid`, `.mba-form-group`, `.mba-input`, `.mba-input--error`, `.mba-input--valid`, `.mba-input-group`, `.mba-input-icon`, `.mba-input-icon--disabled`, `.mba-input-icon--error`, `.mba-label`, `.mba-textarea`, `.mba-textarea--error`, `.mba-textarea--valid`, `.mba-toggle`
+- **Radio / Checkbox** : `.mba-checkbox`, `.mba-checkbox--pro`, `.mba-checkbox-label`, `.mba-radio`, `.mba-radio--pro`, `.mba-radio-label`
+- **Accordéons** : `.mba-accordion`, `.mba-accordion--full-width`, `.mba-accordion--line`, `.mba-accordion--open`, `.mba-accordion--partenaire`, `.mba-accordion-group`
+- **Pagination** : `.mba-dot`, `.mba-dots`, `.mba-pagination`, `.mba-pagination-arrow`, `.mba-pagination-ellipsis`, `.mba-pagination-item`
+- **Liens** : `.mba-link`
+- **Flèches / Décorations** : `.mba-arrow`
+<!-- AUTO-GENERATED:components-list END -->
+
+**Règle** : si un composant `.mba-*` existe pour ce que vous construisez, utilisez-le. Ajoutez des utilitaires Tailwind seulement pour la mise en page (positionnement, marges, container).
+
+Pour la liste complète et les variantes : Storybook (`npm run storybook` dans le repo DS).
+
+---
+
+## Pièges connus
+
+Comportements observés en vrai dans le code consommateur — à éviter :
+
+- **Bypass via `[var(--mba-...)]`** : voir la règle d'or. Le preset existe, utilisez-le.
+- **`[display:none]` au lieu de `hidden`** : `hidden` est une utilité Tailwind native, équivalente, et idiomatique.
+- **Pixels figés** (`h-[295px]`, `w-[420px]`) : préférez l'échelle de spacing (`h-72` = 18rem, `w-96` = 24rem). Si la valeur exacte est imposée par un visuel, c'est probablement un problème de design — discutez-en avant.
+- **Erreur de mapping `--mba-*` → Tailwind** : la variable `--mba-color-primary-900` devient `primary-900` dans Tailwind (préfixe `--mba-color-` retiré), donc `text-primary-900` — **pas** `text-mba-color-primary-900` et **pas** `text-mba-primary-900`.
+- **Oublier les 3 imports** : si le preset n'est pas importé, `text-primary-900` n'existe simplement pas et Tailwind tombe en silence sur la valeur par défaut. Vérifier le fichier d'entrée CSS de l'app.
+
+---
+
+## Pour les humains
+
+- `README.md` — installation, options d'import, structure du package
+- Storybook — catalogue interactif des composants (`npm run storybook` dans le repo DS, ou docs déployées)
+- `src/tokens/` — source des CSS variables `--mba-*`
+- `src/tailwind-preset.css` — source du mapping `@theme {}` (la table ci-dessus en est dérivée automatiquement)

package/README.md

@@ -2,6 +2,28 @@
 
 Design System pour l'écosystème Ma Boussole Aidant.
 
+## Pour les LLM / AI Assistants
+
+Si vous êtes un assistant IA (Claude, Cursor, Copilot, Codex, etc.) qui édite du code consommant ce Design System, **lisez d'abord [`AGENTS.md`](./AGENTS.md)**. Il décrit l'architecture en couches, la règle d'or pour Tailwind v4, et la table de référence complète des tokens.
+
+**Règle d'or, en une phrase** : utilisez toujours les classes utilitaires générées par le preset Tailwind (`text-primary-900`, `p-md`, `rounded-md`, `shadow-md`) — n'écrivez jamais `[var(--mba-...)]` en valeur arbitraire, le preset existe précisément pour éviter ce contournement.
+
+### Activation dans une app consommatrice
+
+Les outils IA (Claude Code, Cursor, Codex…) lisent `AGENTS.md` / `CLAUDE.md` **à la racine du repo courant**, pas dans `node_modules/`. Pour activer les instructions de ce DS dans une app cliente, copiez ce bloc dans le `CLAUDE.md` (ou `AGENTS.md`) à la racine de votre app :
+
+```md
+## Design System : @maboussoleaidant/design-system
+
+Cette app consomme `@maboussoleaidant/design-system`. Avant d'écrire du HTML/template avec des classes Tailwind ou MBA, lis les instructions complètes :
+
+📄 `node_modules/@maboussoleaidant/design-system/AGENTS.md`
+
+**Règle d'or** : utilise les utilitaires Tailwind générés par le preset (`text-primary-900`, `p-md`, `rounded-md`, `shadow-md`, `font-heading`), **jamais** `class="*-[var(--mba-...)]"`. Le preset existe pour éviter ce contournement.
+```
+
+Le fichier `AGENTS.md` est inclus dans le tarball npm — il sera disponible dès `npm install`.
+
 ## Installation
 
 ```bash
@@ -77,6 +99,66 @@ npm run build
 npm run dev
 ```
 
+### Ajouter un composant
+
+Quand tu crées un nouveau `src/components/_mon-composant.css` :
+
+1. **Importer** dans `src/components/index.css` :
+   ```css
+   @import './_mon-composant.css';
+   ```
+
+2. **Référencer dans `AGENTS.md`** — ajouter une entrée dans `COMPONENT_FILES` au début de [`scripts/build-agents-md.mjs`](./scripts/build-agents-md.mjs) :
+   ```js
+   { path: 'src/components/_mon-composant.css', label: 'Mon composant', prefixes: ['mba-mon-composant'] },
+   ```
+   Puis régénérer :
+   ```bash
+   npm run docs:agents
+   ```
+
+   > Si tu oublies cette étape, `npm run docs:agents` plante avec un message clair, et `npm publish` est bloqué via `prepublishOnly`. C'est volontaire — ça force le composant à apparaître dans AGENTS.md pour que les LLM le découvrent.
+
+3. **Builder et créer la story Storybook** comme d'habitude.
+
+### Publier une nouvelle version
+
+Une fois ta PR mergée sur `development` (ou `main`) :
+
+```bash
+git checkout development
+git pull
+npm version patch        # ou minor / major selon la nature du changement
+npm publish
+```
+
+#### Ce qui se passe sous le capot
+
+`npm publish` déclenche `prepublishOnly`, qui exécute dans l'ordre :
+
+1. **`npm run docs:agents:check`** — régénère `AGENTS.md` depuis le preset + les composants, puis `git diff --exit-code AGENTS.md`.
+   - ✅ Aucun diff → on continue.
+   - ❌ Diff → **publish avorté**. Lance `npm run docs:agents`, commit le résultat, push, retry.
+2. **`npm run build`** — build standard (assets, CSS, tailwind, minification).
+3. **`npm publish`** uploade le tarball avec `dist/`, `assets/`, `src/tokens/`, `src/tailwind-preset.css`, **`AGENTS.md`**, `README.md`, `LICENSE`.
+
+#### Cas d'échec possibles
+
+| Situation | Symptôme | Fix |
+|---|---|---|
+| Token ajouté au preset sans régénérer | `docs:agents:check` exit 1, diff visible | `npm run docs:agents` + commit |
+| `src/components/_xxx.css` ajouté sans mapper dans `COMPONENT_FILES` | Script plante avec un message pointant vers le fichier non mappé | Ajouter l'entrée (voir [§ Ajouter un composant](#ajouter-un-composant)) |
+| Tailwind v4 a sorti un nouveau type de token (`--ease-*`, `--breakpoint-*`) | `console.warn` au regen + section "Autres" auto-ajoutée dans AGENTS.md | Pas bloquant ; mettre à jour `categorize()` dans `scripts/build-agents-md.mjs` quand possible |
+
+#### Pré-vérifications locales (optionnel)
+
+Avant de toucher `npm version`, tu peux simuler :
+
+```bash
+npm pack --dry-run        # liste exactement ce qui partira (confirme la présence d'AGENTS.md)
+npm run docs:agents:check # valide que la doc est synchrone avec les sources
+```
+
 ## Structure
 
 ```

package/dist/mba-design-system.css

@@ -3112,25 +3112,32 @@ button.mba-input-icon__icon:hover {
   border-radius: var(--mba-radius-sm);
   box-shadow: var(--mba-shadow-sm);
   padding: var(--mba-space-sm);
-  display: none;
   z-index: 1000;
-  animation: dropdownFadeIn var(--mba-transition-base);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(calc(-1 * var(--mba-space-xs)));
+  pointer-events: none;
+  transition: opacity var(--mba-transition-base),
+              transform var(--mba-transition-base),
+              visibility var(--mba-transition-base);
 }
 
-.mba-header__dropdown--open {
-  display: block;
-  box-shadow: var(--mba-shadow-xs);
+/* Zone invisible au-dessus du dropdown pour combler le gap avec le trigger */
+.mba-header__dropdown::before {
+  content: "";
+  position: absolute;
+  top: calc(-1 * var(--mba-space-lg));
+  left: 0;
+  right: 0;
+  height: var(--mba-space-lg);
 }
 
-@keyframes dropdownFadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(calc(-1 * var(--mba-space-xs)));
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+.mba-header__dropdown--open {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+  box-shadow: var(--mba-shadow-xs);
+  pointer-events: auto;
 }
 
 .mba-header__dropdown-title {