@maboussoleaidant/design-system 0.1.38 → 0.1.39

package/AGENTS.md

@@ -250,20 +250,23 @@ _Auto-generated from `src/components/` and `src/base/_icons.css` — do not edit
 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`
+- **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`, `.mba-btn-to-top`
 - **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`
+- **Cartes** : `.mba-article-card`, `.mba-article-card--edito`, `.mba-article-card-grid`, `.mba-card`, `.mba-card--sm`, `.mba-card--static`, `.mba-card--white`, `.mba-card-grid`, `.mba-carousel-card`, `.mba-feature-card`, `.mba-resource-card`, `.mba-resource-card--bleuet`, `.mba-resource-card--oranger`, `.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-input-icon--leading`, `.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`
+- **Carousel** : `.mba-carousel`
+- **Pagination** : `.mba-dot`, `.mba-dots`, `.mba-dots--expand`, `.mba-pagination`, `.mba-pagination-arrow`, `.mba-pagination-ellipsis`, `.mba-pagination-item`
 - **Liens** : `.mba-link`
 - **Tabs** : `.mba-tab`, `.mba-tab-partner`
 - **Tags (badges)** : `.mba-tag`, `.mba-tag--bleuet`, `.mba-tag--green`, `.mba-tag--grey`, `.mba-tag--lavender`, `.mba-tag--narcisse`, `.mba-tag--oranger`, `.mba-tag--primary`, `.mba-tag--red`, `.mba-tag--rounded`, `.mba-tag--sm`, `.mba-tag--yellow`
 - **Flèches / Décorations** : `.mba-arrow`
+- **Navigation (fil d'Ariane)** : `.mba-breadcrumb`
+- **Alertes** : `.mba-alert`, `.mba-alert--dashed`, `.mba-alert--error`, `.mba-alert--info`, `.mba-alert--success`, `.mba-alert--warning`
 <!-- 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).

package/CHANGELOG.md

@@ -0,0 +1,76 @@
+# Changelog
+
+Toutes les évolutions notables du design system `@maboussoleaidant/design-system`.
+
+Format inspiré de [Keep a Changelog](https://keepachangelog.com/fr/1.1.0/). Versionnage sémantique.
+
+---
+
+## [0.1.39] — 2026-08-07
+
+Lot de composants **« Ma vie d'aidant »** (publié en patch pour éviter des publications en cascade). **100 % rétrocompatible** : que des ajouts, aucune classe `.mba-*` existante modifiée de façon cassante. Tout est **CSS pur** (zéro JS dans le DS), tokens uniquement, accessible (0 violation a11y sur les nouvelles stories).
+
+> ⚠️ **Rappel d'archi** : le DS style les **états** via classes (`.is-active`, `.is-hidden`, `.is-disabled`) et attributs ARIA (`aria-current`, `aria-expanded`…). Les **comportements** (bascule d'état, scroll, dismiss, visibilité) restent à la charge de l'app consommatrice — documentés dans chaque story Storybook.
+
+### ✨ Nouveaux composants
+
+- **`.mba-breadcrumb`** — Fil d'Ariane (`src/components/_navigation.css`).
+  - Structure : `<nav aria-label="Fil d'Ariane"> > ol.mba-breadcrumb__list > li.mba-breadcrumb__item`.
+  - Sous-éléments : `__link` (liens parents, `grey-800`, hover `primary-800`), `__home-icon`, `__separator` (chevron `keyboard_arrow_right`, `grey-400`), `__current` (page active, `primary-500`, non cliquable).
+  - **À câbler** : `aria-current="page"` sur l'élément courant ; séparateurs/icônes en `aria-hidden`.
+
+- **`.mba-alert`** — Alerte contextuelle (`src/components/_alerts.css`).
+  - Variantes : `--info`, `--success`, `--warning`, `--error` (fond + bordure colorés, texte neutre lisible).
+  - Modifieurs : `--dashed` (bordure pointillés), `__icon--boxed` (icône en chip blanc).
+  - Sous-éléments : `__icon`, `__content`, `__title`, `__text`, `__close`.
+  - État : `.mba-alert.is-hidden` (dismiss basculé par l'app).
+  - **À câbler** : `role="status"`+`aria-live="polite"` (info/success) ou `role="alert"`+`aria-live="assertive"` (warning/error) ; `aria-label="Fermer"` sur `__close`. Le « bandeau détresse » = `--warning --dashed` + `__icon--boxed`.
+
+- **`.mba-article-card--edito`** — Variante éditoriale de `.mba-article-card` (`_cards.css`, base inchangée).
+  - Nouveaux sous-éléments : `.mba-article-card__media`, `.mba-article-card__meta` (ligne date + auteur).
+  - Image inset arrondie, tag catégorie **au-dessus du titre** via `.mba-tag`, titre/texte clampés, lien « Lire l'article ».
+
+- **`.mba-feature-card`** — Card de mise en avant image + label flottant (`_cards.css`).
+  - Sous-éléments : `__image`, `__label`, `__title`, `__icon`. Toute la card est un `<a>` (nom accessible = le titre).
+  - Hover : zoom image + flèche (neutralisés en `prefers-reduced-motion`).
+
+- **`.mba-resource-card`** — Card « dossier / ressource » (`_cards.css`).
+  - Sous-éléments : `__decoration` (**slot de fond rempli par l'app** ; lavis pastel par défaut), `__content`, `__title`, `__text`, `__action`.
+  - Thèmes de décoration : `--oranger`, `--bleuet` (défaut lavande). Réutilise `.mba-tag` (pastille) et `.mba-btn` (bouton).
+
+- **`.mba-carousel`** — Carousel **100 % CSS** (`src/components/_carousel.css`).
+  - `__track` (scroll-snap horizontal, swipe/molette/clavier, scrollbar masquée), `__slide`, `__footer`, `__controls`, `__control` (flèches rondes ; `:disabled`/`.is-disabled` en butée).
+  - Largeur de diapo configurable : **`--mba-carousel-slide-width`** (défaut `360px`).
+  - **À câbler** : défilement des flèches/points, bascule `.is-active` du point courant, `[disabled]` des flèches en butée. Pagination via `.mba-dots` / `.mba-dot`.
+  - **À câbler ARIA** : `role="region"` + `aria-roledescription="carousel"` + `aria-label` ; `aria-label` « Précédent »/« Suivant ».
+
+- **`.mba-btn-to-top`** — Bouton « retour en haut » (`src/components/_buttons.css`).
+  - Rond plein `primary-500` (48px), `position: fixed` bas-droit, icône `arrow_upward`.
+  - Fonctionne via ancre `href="#top"` (JS-free) ; `.is-hidden` basculé par l'app selon le scroll.
+  - **À câbler** : `scroll-behavior: smooth` sur `<html>` côté app pour un défilement doux ; cible d'ancre focusable.
+
+### ➕ Ajouts mineurs
+
+- **`.mba-dots--expand`** (`_paging.css`) — Variante « pilule extensible » des points de pagination : point actif allongé (`primary-500`), inactifs courts (`grey-100`). Additif, `.mba-dots`/`.mba-dot` inchangés.
+- **`.mba-card__icon--circle`** (`_cards.css`) — Modifieur de `.mba-card__icon` : icône décorative de tête dans une pastille ronde (fond `primary-50`, 48px), pour les cartes « rubrique » / « sujet ». Neutralise le décalage au survol. Additif.
+- **`.mba-input-icon--leading`** (`_inputs.css`) — Variante de `.mba-input-icon` avec l'icône **en tête** (à gauche du champ, marge inversée). Ex. barre de recherche « loupe ». Additif.
+- **`.mba-breadcrumb__toggle`** + **`.mba-breadcrumb__item.is-hidden`** (`_navigation.css`) — Fil d'Ariane **repliable** : bouton « … » (style aligné sur `__link`) qui déplie les niveaux intermédiaires masqués. Masquage/bascule `aria-expanded` pilotés par l'app (zéro JS). Additif.
+
+### 🎨 Icônes (subset Material Symbols)
+
+13 icônes ajoutées au subset (pour les sous-thèmes « Ma vie d'aidant ») — utilisables via `<span class="material-symbols-rounded">nom</span>` :
+`beach_access`, `business_center`, `checkbook`, `checklist`, `compare_arrows`, `cottage`, `deceased`, `heart_smile`, `kid_star`, `local_florist`, `person_heart`, `school`, `sentiment_calm`.
+
+### 🧩 Blueprints (Storybook, sans nouveau CSS)
+
+- **Blueprints / Sections / Bandeau CTA** — « Recherchez une structure près de chez vous » : composition d'éléments existants (utilitaires du preset + `.mba-btn` + `.mba-heading-md`). Responsive (empilé mobile → ligne dès `sm`).
+
+### 📝 Documentation
+
+- Chaque nouveau composant dispose d'une story Storybook avec **bac à sable** (contrôles) et **contrat ARIA** documenté.
+- `AGENTS.md` régénéré (liste des classes à jour). Tags de maturité `review` sur les composants de ce lot.
+
+### 🔗 Références
+
+- Composants issus des maquettes Figma « Ma vie d'aidant » et « Annuaire ».
+- Branche : `feat/ma-vie-daidant-components`.