@maboussoleaidant/design-system 0.1.36 → 0.1.37

package/AGENTS.md

@@ -261,6 +261,8 @@ Liste des classes racines (les sous-éléments BEM `__*` sont internes et ne son
 - **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`
+- **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`
 <!-- AUTO-GENERATED:components-list END -->
 

package/dist/mba-design-system.css

@@ -131,6 +131,17 @@
   --mba-color-pastel-narcisse-dark: #FFEBC3;
   --mba-color-pastel-oranger-dark: #FFDBC8;
 
+  /* ===========================================
+     TAG BACKGROUNDS
+     Fonds des tags/badges : plus foncés que les pastels
+     de base pour l'accessibilité (source Figma).
+     Primary/Grey réutilisent primary-100 / grey-50.
+     =========================================== */
+  --mba-color-tag-bleuet: #E0E9F8;
+  --mba-color-tag-lavender: #E3E1F8;
+  --mba-color-tag-oranger: #FCEAE0;
+  --mba-color-tag-narcisse: #F8EEDA;
+
   /* ===========================================
      CUSTOM - Beige (Background cards)
      =========================================== */
@@ -2947,7 +2958,227 @@ button.mba-input-icon__icon:hover {
 
 /* end @layer components */
 
-/* @import "./_tags.css"; */
+/**
+ * MBA Design System - Tabs
+ *
+ * Classes: .mba-tab, .mba-tab-partner, .mba-tabs
+ * Usage: recherches populaires, badges de type article, filtres rapides
+ * Couleurs: Primary 500 (MBA), Primary 900 (Partenaires)
+ * Source: Design System Figma (Tabs - Lina-7347)
+ */
+
+@layer components {
+
+/* ===========================================
+   TAB (Enabled - état par défaut)
+   height: 38px, padding: 8px 16px, pilule
+   =========================================== */
+.mba-tab {
+  position: relative;
+  isolation: isolate;
+  display: inline-flex;
+  width: fit-content;
+  height: 38px;
+  padding: var(--mba-space-xs) var(--mba-space-sm);
+  justify-content: center;
+  align-items: center;
+  gap: var(--mba-space-xs);
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-semibold);
+  line-height: var(--mba-leading-snug);
+  text-decoration: none;
+  border: 1px solid transparent;
+  border-radius: var(--mba-radius-full);
+  cursor: pointer;
+  transition: color var(--mba-transition-base);
+  user-select: none;
+  white-space: nowrap;
+
+  background-color: transparent;
+  color: var(--mba-color-primary-900);
+}
+
+/* Fond de la pilule active : s'étend en diagonale du centre vers les coins */
+.mba-tab::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background-color: var(--mba-color-primary-500);
+  transform: scale(0);
+  transform-origin: center;
+  transition: transform var(--mba-transition-base);
+}
+
+/* ===========================================
+   ACTIVATED (sélectionné)
+   MBA: Primary 500
+   =========================================== */
+.mba-tab.is-active,
+.mba-tab[aria-pressed="true"],
+.mba-tab[aria-selected="true"] {
+  color: var(--mba-color-white);
+}
+
+.mba-tab.is-active::before,
+.mba-tab[aria-pressed="true"]::before,
+.mba-tab[aria-selected="true"]::before {
+  transform: scale(1);
+}
+
+/* Variante Partenaires: Primary Pro 800 */
+.mba-tab-partner::before {
+  background-color: var(--mba-color-primary-pro-800);
+}
+
+/* ===========================================
+   DISABLED
+   =========================================== */
+.mba-tab:disabled,
+.mba-tab.is-disabled {
+  background-color: var(--mba-color-grey-50);
+  color: var(--mba-color-grey-400);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ===========================================
+   TABS - Groupe horizontal (gap SM)
+   =========================================== */
+.mba-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--mba-space-sm);
+}
+
+}
+
+/* @layer components */
+
+/**
+ * MBA Design System - Tags (Badges)
+ *
+ * Étiquettes / badges. Peuvent contenir une icône à gauche et/ou à droite.
+ *
+ * Classes:
+ * - .mba-tag              - Tag de base (taille Md, couleur Primary)
+ * - Tailles:  .mba-tag--sm (12px) · défaut Md (14px)
+ * - Forme:    .mba-tag--rounded (pilule, radius 24px) · défaut carré (radius 8px)
+ * - Couleurs pastel: .mba-tag--primary (défaut), --bleuet, --lavender,
+ *   --oranger, --narcisse, --grey
+ * - Couleurs sémantiques: .mba-tag--red, --green, --yellow
+ *
+ * Icônes: ajouter un <span class="material-symbols-rounded"> avant/après le
+ * label (16px, hérite de la couleur du texte).
+ *
+ * Usage:
+ * <span class="mba-tag mba-tag--bleuet">
+ *   <span class="material-symbols-rounded" aria-hidden="true">location_on</span>
+ *   Label
+ * </span>
+ *
+ * Note: fonds plus foncés que les pastels de base pour l'accessibilité.
+ * Source: Design System Figma.
+ */
+
+@layer components {
+
+.mba-tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--mba-space-xxs);
+  width: fit-content;
+  max-width: 100%;
+  padding: var(--mba-space-xxs) var(--mba-space-xs);
+  border-radius: var(--mba-radius-xs);
+  font-family: var(--mba-font-family-text);
+  font-weight: var(--mba-font-weight-semibold);
+  font-size: var(--mba-font-size-xxs); /* Md (défaut) = 14px */
+  line-height: normal;
+  white-space: nowrap;
+  color: var(--mba-color-grey-800);
+  background-color: var(--mba-color-primary-100);
+}
+
+/* Icônes internes */
+.mba-tag .material-symbols-rounded {
+  font-size: 16px;
+  flex-shrink: 0;
+  color: inherit;
+}
+
+/* ===========================================
+   TAILLES
+   =========================================== */
+.mba-tag--sm {
+  font-size: var(--mba-font-size-xxxs); /* 12px */
+}
+
+/* ===========================================
+   FORME - Rounded (pilule)
+   =========================================== */
+.mba-tag--rounded {
+  border-radius: var(--mba-radius-md);
+}
+
+/* ===========================================
+   COULEURS - Pastels
+   =========================================== */
+.mba-tag--primary {
+  background-color: var(--mba-color-primary-100);
+  color: var(--mba-color-grey-800);
+}
+
+.mba-tag--bleuet {
+  background-color: var(--mba-color-tag-bleuet);
+  color: var(--mba-color-grey-800);
+}
+
+.mba-tag--lavender {
+  background-color: var(--mba-color-tag-lavender);
+  color: var(--mba-color-grey-800);
+}
+
+.mba-tag--oranger {
+  background-color: var(--mba-color-tag-oranger);
+  color: var(--mba-color-grey-800);
+}
+
+.mba-tag--narcisse {
+  background-color: var(--mba-color-tag-narcisse);
+  color: var(--mba-color-grey-800);
+}
+
+.mba-tag--grey {
+  background-color: var(--mba-color-grey-50);
+  color: var(--mba-color-grey-800);
+}
+
+/* ===========================================
+   COULEURS - Sémantiques
+   =========================================== */
+.mba-tag--red {
+  background-color: var(--mba-color-error-100);
+  color: var(--mba-color-error-800);
+}
+
+.mba-tag--green {
+  background-color: var(--mba-color-success-100);
+  color: var(--mba-color-success-800);
+}
+
+.mba-tag--yellow {
+  background-color: var(--mba-color-warning-100);
+  color: var(--mba-color-warning-800);
+}
+
+}
+
+/* end @layer components */
 
 /**
  * MBA Design System - Header