@maboussoleaidant/design-system 0.1.18 → 0.1.20

package/dist/mba-design-system.css

@@ -626,8 +626,11 @@
 
 /* ===========================================
    BASE ICON CLASS
+   Wrappé dans @layer base pour permettre aux @layer components de l'overrider
    =========================================== */
 
+@layer base {
+
 .material-symbols-rounded {
   font-family: 'Material Symbols Rounded';
   font-weight: normal;
@@ -659,7 +662,6 @@
    =========================================== */
 
 /* Base icon (24px) */
-
 .mba-icon {
   font-size: 24px;
   width: 24px;
@@ -672,7 +674,6 @@
 }
 
 /* Small icon (16px) */
-
 .mba-icon--sm {
   font-size: 16px;
   width: 16px;
@@ -684,8 +685,26 @@
     'opsz' 20;
 }
 
-/* Fill variant */
+/* Extra-small icon (12px) */
+.mba-icon--xs {
+  font-size: 12px;
+  width: 12px;
+  height: 12px;
+  font-variation-settings:
+    'FILL' 0,
+    'wght' 400,
+    'GRAD' 0,
+    'opsz' 20;
+}
+
+/* Accordion item icons: force inline-flex to override base inline-block */
+.mba-accordion__item-icon.material-symbols-rounded {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
 
+/* Fill variant */
 .mba-icon--fill,
 .material-symbols-rounded.mba-icon--fill {
   font-variation-settings:
@@ -696,7 +715,6 @@
 }
 
 /* Fill + Small */
-
 .mba-icon--sm.mba-icon--fill {
   font-variation-settings:
     'FILL' 1,
@@ -708,7 +726,6 @@
 /* ===========================================
    COLOR UTILITIES
    =========================================== */
-
 .mba-icon--primary {
   color: var(--mba-color-primary-500);
 }
@@ -733,6 +750,10 @@
   color: var(--mba-color-text-muted);
 }
 
+}
+
+/* end @layer base */
+
 /**
  * MBA Design System - Preflight
  *
@@ -1343,9 +1364,7 @@ a:hover {
    =========================================== */
 .mba-btn-pin {
   display: inline-flex;
-  width: 40px;
-  height: 40px;
-  padding: 0;
+  padding: var(--mba-space-xs);
   justify-content: center;
   align-items: center;
   border: 1px solid var(--mba-color-primary-500);
@@ -1359,9 +1378,9 @@ a:hover {
 }
 
 .mba-btn-pin .mba-icon {
-  font-size: 20px;
-  width: 20px;
-  height: 20px;
+  font-size: var(--mba-font-size-md);
+  width: var(--mba-font-size-md);
+  height: var(--mba-font-size-md);
 }
 
 .mba-btn-pin:focus {
@@ -1371,9 +1390,10 @@ a:hover {
 
 /* Deja-vu state */
 .mba-btn-pin.is-deja-vu {
-  border-color: var(--mba-color-grey-300);
-  background-color: var(--mba-color-grey-50);
-  color: var(--mba-color-grey-300);
+  box-shadow: var(--mba-shadow-xs);
+  border-color: var(--mba-color-white);
+  background-color: var(--mba-color-white);
+  color: var(--mba-color-grey-400);
 }
 
 /* Activated state */
@@ -1616,6 +1636,7 @@ a:hover {
   padding: var(--mba-space-sm);
 }
 
+
 /* ===========================================
    CARD PARTS
    =========================================== */
@@ -1623,7 +1644,8 @@ a:hover {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: var(--mba-space-sm);
+  gap: var(--mba-space-lg);
+  height: 100%;
 }
 
 .mba-card__content {
@@ -1649,8 +1671,11 @@ a:hover {
 
 .mba-card__icon {
   flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: var(--mba-color-primary-500);
-  font-size: 24px;
+  font-size: var(--mba-font-size-md);
   transition: transform var(--mba-transition-base);
 }
 
@@ -1719,20 +1744,6 @@ a:hover {
   box-sizing: border-box;
 }
 
-.mba-carousel-card::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  padding: 1px;
-  background: var(--mba-gradient-sunset);
-  border-radius: 24px 24px 8px 24px;
-  mask:
-    linear-gradient(#fff 0 0) content-box,
-    linear-gradient(#fff 0 0);
-  mask-composite: exclude;
-  -webkit-mask-composite: xor;
-  pointer-events: none;
-}
 
 .mba-carousel-card__title {
   font-family: var(--mba-font-family-text);
@@ -1779,20 +1790,6 @@ a:hover {
   transition: transform var(--mba-transition-slow), box-shadow var(--mba-transition-slow);
 }
 
-.mba-stats-card::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  padding: 1px;
-  background: var(--mba-gradient-sunset);
-  border-radius: var(--mba-radius-md);
-  mask:
-    linear-gradient(#fff 0 0) content-box,
-    linear-gradient(#fff 0 0);
-  mask-composite: exclude;
-  -webkit-mask-composite: xor;
-  pointer-events: none;
-}
 
 .mba-stats-card:hover {
   transform: translateY(-4px);
@@ -1947,7 +1944,7 @@ a:hover {
 }
 
 .mba-article-card__link .material-symbols-rounded {
-  font-size: 20px;
+  font-size: var(--mba-font-size-xs);
 }
 
 /* Grid pour article cards */
@@ -2454,7 +2451,7 @@ a:hover {
 
 /* Icone info */
 .mba-label__icon {
-  font-size: 16px;
+  font-size: var(--mba-font-size-xs);
   color: var(--mba-color-grey-400);
 }
 
@@ -2774,6 +2771,8 @@ a:hover {
   display: inline-block;
   width: 42px;
   height: 24px;
+  box-shadow: var(--mba-shadow-xxs);
+  border-radius: 32px;
 }
 
 .mba-toggle input {
@@ -2802,6 +2801,7 @@ a:hover {
   left: 2px;
   top: 2px;
   background-color: var(--mba-color-white);
+  box-shadow: var(--mba-shadow-xxs);
   transition: all var(--mba-transition-slow);
   border-radius: 50%;
 }
@@ -2853,7 +2853,7 @@ a:hover {
 }
 
 .mba-input-icon__icon {
-  font-size: 16px;
+  font-size: var(--mba-font-size-xs);
   color: var(--mba-color-grey-400);
   margin-left: var(--mba-space-xs);
 }
@@ -3145,26 +3145,6 @@ button.mba-input-icon__icon:hover {
   transition: background-color var(--mba-transition-base);
 }
 
-.mba-header__dropdown-item::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  padding: 1px;
-  background: var(--mba-gradient-sunset);
-  border-radius: inherit;
-  mask:
-    linear-gradient(#fff 0 0) content-box,
-    linear-gradient(#fff 0 0);
-  mask-composite: exclude;
-  -webkit-mask-composite: xor;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity var(--mba-transition-base);
-}
-
-.mba-header__dropdown-item:hover::before {
-  opacity: 1;
-}
 
 
 .mba-header__dropdown-icon {
@@ -3628,6 +3608,9 @@ button.mba-input-icon__icon:hover {
  * - .mba-wave--top      - Inversée (pour haut de section)
  * - .mba-wave--bottom   - Normale (défaut)
  * - .mba-wave--lavender - Couleur lavender
+ * - .mba-wave--narcisse - Couleur narcisse
+ * - .mba-wave--bleuet   - Couleur bleuet
+ * - .mba-wave--oranger  - Couleur oranger
  * - .mba-wave--white    - Couleur blanche
  * - .mba-wave--beige    - Couleur beige
  *
@@ -3679,6 +3662,18 @@ button.mba-input-icon__icon:hover {
   background-color: var(--mba-color-pastel-lavender);
 }
 
+.mba-wave--narcisse {
+  background-color: var(--mba-color-pastel-narcisse);
+}
+
+.mba-wave--bleuet {
+  background-color: var(--mba-color-pastel-bleuet);
+}
+
+.mba-wave--oranger {
+  background-color: var(--mba-color-pastel-oranger);
+}
+
 .mba-wave--white {
   background-color: var(--mba-color-white);
 }
@@ -3687,9 +3682,6 @@ button.mba-input-icon__icon:hover {
   background-color: var(--mba-color-beige);
 }
 
-.mba-wave--primary-50 {
-  background-color: var(--mba-color-primary-50);
-}
 
 }
 
@@ -4254,7 +4246,265 @@ button.mba-input-icon__icon:hover {
 
 /* @import "./_alerts.css"; */
 
-/* @import "./_accordion.css"; */
+/**
+ * MBA Design System - Accordion
+ *
+ * Accordions empilables avec panneau déroulant.
+ * - Les accordions peuvent se superposer verticalement.
+ * - À partir de 5 items (ou si le contenu est trop long),
+ *   utiliser la variante scrollable pour afficher une scrollbar.
+ */
+
+@layer components {
+
+  /* ===========================================
+     CONTAINER & GROUP
+     =========================================== */
+  .mba-accordion-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mba-space-xs); /* Espacement vertical entre accordions empilés */
+  }
+
+  .mba-accordion {
+    width: 100%;
+    max-width: 220px;
+    border-radius: var(--mba-radius-xs);
+    background-color: var(--mba-color-white);
+    border: 1px solid var(--mba-color-grey-100);
+    overflow: hidden;
+  }
+
+  .mba-accordion--full-width {
+    max-width: 100%;
+  }
+
+  /* Variante line-only (header sans carte, seulement une ligne bottom) */
+  .mba-accordion--line {
+    border: none;
+    border-radius: 0;
+    background: transparent;
+  }
+
+  /* ===========================================
+     HEADER (TRIGGER)
+     =========================================== */
+  .mba-accordion__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--mba-space-sm);
+    padding: var(--mba-space-xs) var(--mba-space-sm);
+    cursor: pointer;
+    background-color: var(--mba-color-white);
+    border: none;
+    width: 100%;
+    box-sizing: border-box;
+    min-height: 43px;
+    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-primary-900);
+    text-align: left;
+  }
+
+  /* Header pour la variante line : pas de fond, juste une ligne en bottom */
+  .mba-accordion--line .mba-accordion__header {
+    padding-left: var(--mba-space-xs);  /* 8px */
+    padding-right: var(--mba-space-xs); /* 8px */
+    background-color: transparent;
+    border-bottom: 1.8px solid var(--mba-color-primary-400);
+  }
+
+  /* Pile d'accordions line : les suivants utilisent un trait en pointillés
+     (couleur gérée par la variante Aidants / Partenaires) */
+  .mba-accordion-group
+    .mba-accordion--line
+    + .mba-accordion--line
+    .mba-accordion__header {
+    border-bottom-style: dashed;
+  }
+
+  /* Hover pour Aidants uniquement : fond grey-50 */
+  .mba-accordion--line:not(.mba-accordion--partenaire) .mba-accordion__header:hover {
+    background-color: var(--mba-color-grey-50);
+    border-radius: var(--mba-radius-xs) var(--mba-radius-xs) 0 0;
+  }
+
+  /* Variante Partenaire : couleur de ligne spécifique */
+  .mba-accordion--line.mba-accordion--partenaire .mba-accordion__header {
+    border-bottom-color: var(--mba-color-primary-pro-400);
+    background-color: transparent;
+  }
+
+  .mba-accordion--line.mba-accordion--partenaire .mba-accordion__header:hover {
+    background-color: transparent;
+  }
+
+  .mba-accordion__title-wrapper {
+    display: flex;
+    align-items: center;
+    gap: var(--mba-space-xs);
+    min-width: 0;
+  }
+
+  .mba-accordion__title {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    font-size: var(--mba-font-size-xs);
+    color: var(--mba-color-primary-900);
+    font-weight: var(--mba-font-weight-semibold);
+  }
+
+  /* Variante Partenaire : titre en PrimaryPro-900 */
+  .mba-accordion--partenaire .mba-accordion__title {
+    color: var(--mba-color-primary-pro-900);
+  }
+
+  /* Compteur d’éléments (pastille à droite du titre) */
+  .mba-accordion__badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--mba-space-md);
+    height: var(--mba-space-md);
+    padding: var(--mba-space-xxs);
+    border-radius: var(--mba-radius-full);
+    background-color: var(--mba-color-pastel-oranger);
+    color: var(--mba-color-primary-900);
+    font-family: var(--mba-font-family-text);
+    font-size: var(--mba-font-size-xxs);
+    font-weight: var(--mba-font-weight-semibold);
+    flex-shrink: 0;
+  }
+
+  /* Variante Line Aidants : badge en secondary-500 */
+  .mba-accordion--line .mba-accordion__badge {
+    background-color: var(--mba-color-secondary-500);
+  }
+
+  /* Variante Partenaire : badge en narcisse */
+  .mba-accordion--partenaire .mba-accordion__badge {
+    background-color: var(--mba-color-pastel-narcisse);
+  }
+
+  .mba-accordion__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: var(--mba-space-xs);
+    color: var(--mba-color-primary-900);
+    transition: transform var(--mba-transition-base);
+  }
+
+  .mba-accordion--open .mba-accordion__icon {
+    transform: rotate(180deg);
+  }
+
+  /* ===========================================
+     PANEL
+     =========================================== */
+  .mba-accordion__panel {
+    display: none;
+    background-color: var(--mba-color-white);
+  }
+
+  .mba-accordion--open .mba-accordion__panel {
+    display: block;
+  }
+
+  .mba-accordion__panel-inner {
+    padding: var(--mba-space-xs) var(--mba-space-sm);
+  }
+
+  /* Panel pour la variante line : aligné à gauche avec le header */
+  .mba-accordion--line .mba-accordion__panel-inner {
+    padding-left: var(--mba-space-xs);
+    padding-right: var(--mba-space-xs);
+  }
+
+  /* Variante scrollable : à utiliser à partir de 5 items */
+  .mba-accordion__panel-inner--scrollable {
+    max-height: 9.5rem; /* hauteur raisonnable avant scroll */
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--mba-color-primary-400) transparent;
+  }
+
+  .mba-accordion__panel-inner--scrollable::-webkit-scrollbar {
+    width: var(--mba-space-xxs);
+  }
+
+  .mba-accordion__panel-inner--scrollable::-webkit-scrollbar-thumb {
+    background-color: var(--mba-color-primary-400);
+    border-radius: var(--mba-radius-2xs);
+  }
+
+  .mba-accordion__panel-inner--scrollable::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  /* Scrollbar variante Partenaire (PrimaryPro-400) */
+  .mba-accordion--partenaire .mba-accordion__panel-inner--scrollable {
+    scrollbar-color: var(--mba-color-primary-pro-400) transparent;
+  }
+
+  .mba-accordion--partenaire
+    .mba-accordion__panel-inner--scrollable::-webkit-scrollbar-thumb {
+    background-color: var(--mba-color-primary-pro-400);
+  }
+
+  /* ===========================================
+     LISTE D’ITEMS
+     =========================================== */
+  .mba-accordion__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--mba-space-xxs);
+  }
+
+  .mba-accordion__item {
+    display: flex;
+    align-items: center;
+    gap: var(--mba-space-xs);
+    padding: var(--mba-space-xs);
+    font-family: var(--mba-font-family-text);
+    font-size: var(--mba-font-size-xs);
+    color: var(--mba-color-primary-900);
+  }
+
+  .mba-accordion__item-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    padding: 2px;
+    line-height: 1;
+    vertical-align: middle;
+    color: inherit;
+  }
+
+  .mba-accordion__item-label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* États optionnels (hover / sélection) */
+  .mba-accordion__item:hover {
+    background-color: var(--mba-color-grey-50);
+    border-radius: var(--mba-radius-xs);
+  }
+
+  .mba-accordion__item--selected {
+    font-weight: var(--mba-font-weight-semibold);
+  }
+
+}
 
 /* @import "./_carousel.css"; */
 
@@ -4368,4 +4618,32 @@ button.mba-input-icon__icon:hover {
   background: var(--mba-gradient-sunset);
 }
 
+/* Border gradient (hover reveal) — applique un contour gradient sunset via ::before */
+
+.mba-border-gradient {
+  position: relative;
+}
+
+.mba-border-gradient::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  padding: 1px;
+  background: var(--mba-gradient-sunset);
+  border-radius: inherit;
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  -webkit-mask-composite: xor;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--mba-transition-base);
+}
+
+.mba-border-gradient:hover::before,
+.mba-border-gradient--visible::before {
+  opacity: 1;
+}
+
 /*# sourceMappingURL=mba-design-system.css.map */