@maboussoleaidant/design-system 0.1.18 → 0.1.20

package/dist/mba-tailwind.css

@@ -302,76 +302,92 @@
   font-display: block;
   src: url('/assets/fonts/MaterialSymbolsRounded.woff2') format('woff2');
 }
-.material-symbols-rounded {
-  font-family: 'Material Symbols Rounded';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
-  font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
-  font-variation-settings: 'FILL' 0,
+@layer base {
+  .material-symbols-rounded {
+    font-family: 'Material Symbols Rounded';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    font-variation-settings: 'FILL' 0,
     'wght' 400,
     'GRAD' 0,
     'opsz' 24;
-}
-.mba-icon {
-  font-size: 24px;
-  width: 24px;
-  height: 24px;
-  font-variation-settings: 'FILL' 0,
+  }
+  .mba-icon {
+    font-size: 24px;
+    width: 24px;
+    height: 24px;
+    font-variation-settings: 'FILL' 0,
     'wght' 400,
     'GRAD' 0,
     'opsz' 24;
-}
-.mba-icon--sm {
-  font-size: 16px;
-  width: 16px;
-  height: 16px;
-  font-variation-settings: 'FILL' 0,
+  }
+  .mba-icon--sm {
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
+    font-variation-settings: 'FILL' 0,
     'wght' 400,
     'GRAD' 0,
     'opsz' 20;
-}
-.mba-icon--fill,
+  }
+  .mba-icon--xs {
+    font-size: 12px;
+    width: 12px;
+    height: 12px;
+    font-variation-settings: 'FILL' 0,
+    'wght' 400,
+    'GRAD' 0,
+    'opsz' 20;
+  }
+  .mba-accordion__item-icon.material-symbols-rounded {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .mba-icon--fill,
 .material-symbols-rounded.mba-icon--fill {
-  font-variation-settings: 'FILL' 1,
+    font-variation-settings: 'FILL' 1,
     'wght' 400,
     'GRAD' 0,
     'opsz' 24;
-}
-.mba-icon--sm.mba-icon--fill {
-  font-variation-settings: 'FILL' 1,
+  }
+  .mba-icon--sm.mba-icon--fill {
+    font-variation-settings: 'FILL' 1,
     'wght' 400,
     'GRAD' 0,
     'opsz' 20;
-}
-.mba-icon--primary {
-  color: var(--mba-color-primary-500);
-}
-.mba-icon--success {
-  color: var(--mba-color-success-500);
-}
-.mba-icon--warning {
-  color: var(--mba-color-warning-500);
-}
-.mba-icon--error {
-  color: var(--mba-color-error-500);
-}
-.mba-icon--info {
-  color: var(--mba-color-info-500);
-}
-.mba-icon--muted {
-  color: var(--mba-color-text-muted);
+  }
+  .mba-icon--primary {
+    color: var(--mba-color-primary-500);
+  }
+  .mba-icon--success {
+    color: var(--mba-color-success-500);
+  }
+  .mba-icon--warning {
+    color: var(--mba-color-warning-500);
+  }
+  .mba-icon--error {
+    color: var(--mba-color-error-500);
+  }
+  .mba-icon--info {
+    color: var(--mba-color-info-500);
+  }
+  .mba-icon--muted {
+    color: var(--mba-color-text-muted);
+  }
 }
 @layer base {
   *,
@@ -836,9 +852,7 @@ video {
   }
   .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);
@@ -850,18 +864,19 @@ video {
     color: var(--mba-color-primary-500);
   }
   .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 {
     outline: none;
     box-shadow: var(--mba-focus-ring);
   }
   .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);
   }
   .mba-btn-pin.is-activated {
     border-color: var(--mba-color-primary-500);
@@ -1016,7 +1031,8 @@ video {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    gap: var(--mba-space-sm);
+    gap: var(--mba-space-lg);
+    height: 100%;
   }
   .mba-card__content {
     flex: 1;
@@ -1038,8 +1054,11 @@ video {
   }
   .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);
   }
   .mba-card__icon svg {
@@ -1085,19 +1104,6 @@ video {
     height: 278px;
     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);
     font-size: var(--mba-font-size-sm);
@@ -1134,19 +1140,6 @@ video {
     box-shadow: var(--mba-shadow-xs);
     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);
     box-shadow: var(--mba-shadow-sm);
@@ -1271,7 +1264,7 @@ video {
     text-decoration: underline;
   }
   .mba-article-card__link .material-symbols-rounded {
-    font-size: 20px;
+    font-size: var(--mba-font-size-xs);
   }
   .mba-article-card-grid {
     display: grid;
@@ -1622,7 +1615,7 @@ video {
     font-size: var(--mba-font-size-xxs);
   }
   .mba-label__icon {
-    font-size: 16px;
+    font-size: var(--mba-font-size-xs);
     color: var(--mba-color-grey-400);
   }
   .mba-textarea {
@@ -1855,6 +1848,8 @@ video {
     display: inline-block;
     width: 42px;
     height: 24px;
+    box-shadow: var(--mba-shadow-xxs);
+    border-radius: 32px;
   }
   .mba-toggle input {
     opacity: 0;
@@ -1880,6 +1875,7 @@ video {
     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%;
   }
@@ -1920,7 +1916,7 @@ video {
     color: var(--mba-color-grey-400);
   }
   .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);
   }
@@ -2134,24 +2130,6 @@ video {
     padding: var(--mba-space-xs);
     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 {
     margin-top: var(--mba-space-xs);
     padding: var(--mba-space-sm);
@@ -2543,15 +2521,21 @@ video {
   .mba-wave--lavender {
     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);
   }
   .mba-wave--beige {
     background-color: var(--mba-color-beige);
   }
-  .mba-wave--primary-50 {
-    background-color: var(--mba-color-primary-50);
-  }
 }
 @layer components {
   .mba-section {
@@ -2923,6 +2907,195 @@ video {
     border-top-color: var(--mba-color-primary-pro-400);
   }
 }
+@layer components {
+  .mba-accordion-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mba-space-xs);
+  }
+  .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%;
+  }
+  .mba-accordion--line {
+    border: none;
+    border-radius: 0;
+    background: transparent;
+  }
+  .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;
+  }
+  .mba-accordion--line .mba-accordion__header {
+    padding-left: var(--mba-space-xs);
+    padding-right: var(--mba-space-xs);
+    background-color: transparent;
+    border-bottom: 1.8px solid var(--mba-color-primary-400);
+  }
+  .mba-accordion-group
+    .mba-accordion--line
+    + .mba-accordion--line
+    .mba-accordion__header {
+    border-bottom-style: dashed;
+  }
+  .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;
+  }
+  .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);
+  }
+  .mba-accordion--partenaire .mba-accordion__title {
+    color: var(--mba-color-primary-pro-900);
+  }
+  .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;
+  }
+  .mba-accordion--line .mba-accordion__badge {
+    background-color: var(--mba-color-secondary-500);
+  }
+  .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);
+  }
+  .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);
+  }
+  .mba-accordion--line .mba-accordion__panel-inner {
+    padding-left: var(--mba-space-xs);
+    padding-right: var(--mba-space-xs);
+  }
+  .mba-accordion__panel-inner--scrollable {
+    max-height: 9.5rem;
+    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;
+  }
+  .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);
+  }
+  .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;
+  }
+  .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);
+  }
+}
 .text-xxs {
   font-size: var(--mba-font-size-xxs);
 }
@@ -2975,6 +3148,28 @@ video {
 .bg-gradient-sunset {
   background: var(--mba-gradient-sunset);
 }
+.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;
+}
 @layer theme {
   :root, :host {
     --font-sans: var(--mba-font-family-text);
@@ -3049,6 +3244,7 @@ video {
     --spacing-lg: var(--mba-space-lg);
     --spacing-xl: var(--mba-space-xl);
     --spacing-xxl: var(--mba-space-xxl);
+    --spacing-2: 0.5rem;
     --spacing-4: 1rem;
     --spacing-6: 1.5rem;
     --spacing-8: 2rem;
@@ -3070,6 +3266,7 @@ video {
     --max-width-lg: 32rem;
     --max-width-xl: 36rem;
     --max-width-2xl: 42rem;
+    --max-width-3xl: 48rem;
     --max-width-4xl: 56rem;
     --max-width-6xl: 72rem;
     --radius-none: var(--mba-radius-none);
@@ -3463,6 +3660,9 @@ video {
   .max-w-2xl {
     max-width: var(--max-width-2xl);
   }
+  .max-w-3xl {
+    max-width: var(--max-width-3xl);
+  }
   .max-w-4xl {
     max-width: var(--max-width-4xl);
   }
@@ -3561,9 +3761,6 @@ video {
   .items-end {
     align-items: flex-end;
   }
-  .items-start {
-    align-items: flex-start;
-  }
   .justify-between {
     justify-content: space-between;
   }
@@ -3784,6 +3981,9 @@ video {
   .px-xxs {
     padding-inline: var(--spacing-xxs);
   }
+  .py-2 {
+    padding-block: var(--spacing-2);
+  }
   .py-sm {
     padding-block: var(--spacing-sm);
   }