@lab-anssi/ui-kit 1.12.4 → 1.13.0

package/dist/Alerte.svelte

@@ -17,37 +17,7 @@ let estOuvert = true;
   </div>
 {/if}
 
-<style>.visible-tablette {
-  display: none !important;
-}
-@media (min-width: 576px) {
-  .visible-tablette {
-    display: unset !important;
-  }
-}
-
-@media (min-width: 576px) {
-  .invisible-tablette {
-    display: none !important;
-  }
-}
-
-.visible-desktop {
-  display: none !important;
-}
-@media (min-width: 932px) {
-  .visible-desktop {
-    display: unset !important;
-  }
-}
-
-@media (min-width: 932px) {
-  .invisible-desktop {
-    display: none !important;
-  }
-}
-
-.alerte {
+<style>.alerte {
   display: flex;
   border: 1px solid #0163cb;
   min-width: 200px;

package/dist/CentreAide.svelte

@@ -83,37 +83,7 @@ let ouvert = false;
   </div>
 {/if}
 
-<style>.visible-tablette {
-  display: none !important;
-}
-@media (min-width: 576px) {
-  .visible-tablette {
-    display: unset !important;
-  }
-}
-
-@media (min-width: 576px) {
-  .invisible-tablette {
-    display: none !important;
-  }
-}
-
-.visible-desktop {
-  display: none !important;
-}
-@media (min-width: 932px) {
-  .visible-desktop {
-    display: unset !important;
-  }
-}
-
-@media (min-width: 932px) {
-  .invisible-desktop {
-    display: none !important;
-  }
-}
-
-.declencheur-centre-aide {
+<style>.declencheur-centre-aide {
   position: fixed;
   bottom: 24px;
   right: 24px;

package/dist/assets/icones/fleche-droite-blanche.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.78145 7.99999L5.48145 4.69999L6.42411 3.75732L10.6668 7.99999L6.42411 12.2427L5.48145 11.3L8.78145 7.99999Z" fill="white"/>
+</svg>

package/dist/index.d.ts

@@ -13,3 +13,4 @@ export { default as Temoignages } from "./lab/vitrines-produits/briques/temoigna
 export { default as BriqueContenuADeuxColonnes } from "./lab/vitrines-produits/briques/BriqueContenuADeuxColonnes.svelte";
 export { default as PresentationANSSI } from "./lab/vitrines-produits/briques/PresentationANSSI.svelte";
 export { default as RejoindreLaCommunaute } from "./lab/vitrines-produits/briques/RejoindreLaCommunaute.svelte";
+export { default as BandeauTitre } from "./lab/blog/BandeauTitre.svelte";

package/dist/index.js

@@ -13,3 +13,4 @@ export { default as Temoignages } from "./lab/vitrines-produits/briques/temoigna
 export { default as BriqueContenuADeuxColonnes } from "./lab/vitrines-produits/briques/BriqueContenuADeuxColonnes.svelte";
 export { default as PresentationANSSI } from "./lab/vitrines-produits/briques/PresentationANSSI.svelte";
 export { default as RejoindreLaCommunaute } from "./lab/vitrines-produits/briques/RejoindreLaCommunaute.svelte";
+export { default as BandeauTitre } from "./lab/blog/BandeauTitre.svelte";

package/dist/lab/ResumePssi.svelte

@@ -82,37 +82,7 @@
   production dans un délai très court.
 </p>
 
-<style>.visible-tablette {
-  display: none !important;
-}
-@media (min-width: 576px) {
-  .visible-tablette {
-    display: unset !important;
-  }
-}
-
-@media (min-width: 576px) {
-  .invisible-tablette {
-    display: none !important;
-  }
-}
-
-.visible-desktop {
-  display: none !important;
-}
-@media (min-width: 932px) {
-  .visible-desktop {
-    display: unset !important;
-  }
-}
-
-@media (min-width: 932px) {
-  .invisible-desktop {
-    display: none !important;
-  }
-}
-
-a {
+<style>a {
   display: inline-flex;
   color: #000091;
   border: none;

package/dist/lab/blog/BandeauTitre.svelte

@@ -0,0 +1,152 @@
+<svelte:options
+  customElement={{
+    tag: "lab-anssi-bandeau-titre",
+    props: {
+      titre: { reflect: false, type: "String", attribute: "titre" },
+      description: { reflect: false, type: "String", attribute: "description" },
+      filAriane: { reflect: false, type: "Array", attribute: "fil-ariane" },
+      tag: { reflect: false, type: "Object", attribute: "tag" },
+    },
+  }}
+/>
+
+<script>import { estLien } from "../../types.js";
+export let titre;
+export let description = "";
+export let filAriane = [];
+export let tag = null;
+let filArianeVisible = window.matchMedia("(min-width: 576px)").matches;
+</script>
+
+<div class="conteneur-bandeau-entete">
+  <div class="contenu-bandeau-entete">
+    {#if filAriane.length}
+      <div class="fil-ariane">
+        {#if !filArianeVisible}
+          <button on:click={() => (filArianeVisible = true)}>Voir le fil d'Ariane</button>
+        {:else}
+          {#each filAriane as noeud, index (index)}
+            {#if estLien(noeud)}
+              <a href={noeud.href}>{noeud.label}</a>
+            {:else}
+              <span>{noeud.label}</span>
+            {/if}
+          {/each}
+        {/if}
+      </div>
+    {/if}
+    <div class="conteneur-texte">
+      {#if tag}
+        <div class="conteneur-tag">
+          <span class="tag" style="background: {tag.couleurFond}; color: {tag.couleurTexte};"
+            >{tag.label}</span
+          >
+        </div>
+      {/if}
+      <div class="conteneur-corps">
+        <h1>{titre}</h1>
+        {#if description}
+          <span>{description}</span>
+        {/if}
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>.conteneur-bandeau-entete {
+  background: var(--bandeau-titre-background);
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete {
+  padding: 16px;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  font-family: Marianne;
+  max-width: 1200px;
+  margin: 0 auto;
+  text-align: left;
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete .conteneur-texte {
+  display: flex;
+  padding: 8px 0 12px 0;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete .conteneur-texte .conteneur-tag {
+  padding-top: 8px;
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete .conteneur-texte .conteneur-tag .tag {
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-family: Marianne;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete .conteneur-texte .conteneur-corps {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete .conteneur-texte .conteneur-corps h1 {
+  font-family: Marianne;
+  font-size: 2rem;
+  font-weight: 700;
+  line-height: 2.5rem;
+  margin: 0;
+}
+@media (min-width: 576px) {
+  .conteneur-bandeau-entete .contenu-bandeau-entete .conteneur-texte .conteneur-corps h1 {
+    font-size: 2.5rem;
+    line-height: 3rem;
+  }
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete .conteneur-texte .conteneur-corps span {
+  font-family: Marianne;
+  font-size: 1.125rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+  margin: 0;
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete .fil-ariane {
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete .fil-ariane a,
+.conteneur-bandeau-entete .contenu-bandeau-entete .fil-ariane span,
+.conteneur-bandeau-entete .contenu-bandeau-entete .fil-ariane button {
+  color: white;
+  font-family: Marianne;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete .fil-ariane button {
+  border: none;
+  background: none;
+  margin: 0;
+  padding: 0;
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete .fil-ariane button,
+.conteneur-bandeau-entete .contenu-bandeau-entete .fil-ariane a {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete .fil-ariane a {
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  align-items: center;
+  white-space: nowrap;
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete .fil-ariane a:after {
+  content: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/fleche-droite-blanche.svg");
+  width: 16px;
+  height: 16px;
+  display: flex;
+}</style>

package/dist/lab/blog/BandeauTitre.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import { type NoeudFilAriane, type Tag } from "../../types.js";
+declare const __propDef: {
+    props: {
+        titre: string;
+        description?: string;
+        filAriane?: NoeudFilAriane[];
+        tag?: Tag | null;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type BandeauTitreProps = typeof __propDef.props;
+export type BandeauTitreEvents = typeof __propDef.events;
+export type BandeauTitreSlots = typeof __propDef.slots;
+export default class BandeauTitre extends SvelteComponent<BandeauTitreProps, BandeauTitreEvents, BandeauTitreSlots> {
+}
+export {};

package/dist/lab/vitrines-produits/briques/Brique.svelte

@@ -13,37 +13,7 @@ export let sansMargeLaterale = false;
   </div>
 </section>
 
-<style>.visible-tablette {
-  display: none !important;
-}
-@media (min-width: 576px) {
-  .visible-tablette {
-    display: unset !important;
-  }
-}
-
-@media (min-width: 576px) {
-  .invisible-tablette {
-    display: none !important;
-  }
-}
-
-.visible-desktop {
-  display: none !important;
-}
-@media (min-width: 932px) {
-  .visible-desktop {
-    display: unset !important;
-  }
-}
-
-@media (min-width: 932px) {
-  .invisible-desktop {
-    display: none !important;
-  }
-}
-
-section {
+<style>section {
   font-family: Marianne;
   padding: 48px 16px;
   box-sizing: border-box;

package/dist/lab/vitrines-produits/briques/BriqueContenuADeuxColonnes.svelte

@@ -38,37 +38,7 @@ export let illustration;
   </div>
 </Brique>
 
-<style>.visible-tablette {
-  display: none !important;
-}
-@media (min-width: 576px) {
-  .visible-tablette {
-    display: unset !important;
-  }
-}
-
-@media (min-width: 576px) {
-  .invisible-tablette {
-    display: none !important;
-  }
-}
-
-.visible-desktop {
-  display: none !important;
-}
-@media (min-width: 932px) {
-  .visible-desktop {
-    display: unset !important;
-  }
-}
-
-@media (min-width: 932px) {
-  .invisible-desktop {
-    display: none !important;
-  }
-}
-
-.grille-contenu {
+<style>.grille-contenu {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-areas: "illustration" "contenu";

package/dist/lab/vitrines-produits/briques/BriqueHero.svelte

@@ -79,37 +79,7 @@ export let partenaires = [];
   </div>
 </Brique>
 
-<style>.visible-tablette {
-  display: none !important;
-}
-@media (min-width: 576px) {
-  .visible-tablette {
-    display: unset !important;
-  }
-}
-
-@media (min-width: 576px) {
-  .invisible-tablette {
-    display: none !important;
-  }
-}
-
-.visible-desktop {
-  display: none !important;
-}
-@media (min-width: 932px) {
-  .visible-desktop {
-    display: unset !important;
-  }
-}
-
-@media (min-width: 932px) {
-  .invisible-desktop {
-    display: none !important;
-  }
-}
-
-.hero {
+<style>.hero {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-areas: "contenu" "image" "partenaires";
@@ -239,6 +209,7 @@ export let partenaires = [];
   line-height: 24px;
   border-radius: 4px;
   display: flex;
+  justify-content: center;
   align-items: center;
   gap: 8px;
 }

package/dist/lab/vitrines-produits/briques/BriqueTitreMultimedia.svelte

@@ -27,37 +27,7 @@ export let multimedia;
   </div>
 </Brique>
 
-<style>.visible-tablette {
-  display: none !important;
-}
-@media (min-width: 576px) {
-  .visible-tablette {
-    display: unset !important;
-  }
-}
-
-@media (min-width: 576px) {
-  .invisible-tablette {
-    display: none !important;
-  }
-}
-
-.visible-desktop {
-  display: none !important;
-}
-@media (min-width: 932px) {
-  .visible-desktop {
-    display: unset !important;
-  }
-}
-
-@media (min-width: 932px) {
-  .invisible-desktop {
-    display: none !important;
-  }
-}
-
-.bloc-multimedia {
+<style>.bloc-multimedia {
   display: flex;
   flex-direction: column;
   align-items: center;

package/dist/lab/vitrines-produits/briques/CarrouselTuiles/CarrouselTuiles.svelte

@@ -51,37 +51,7 @@ const suivant = () => versDirection(1);
   </Brique>
 </div>
 
-<style>.visible-tablette {
-  display: none !important;
-}
-@media (min-width: 576px) {
-  .visible-tablette {
-    display: unset !important;
-  }
-}
-
-@media (min-width: 576px) {
-  .invisible-tablette {
-    display: none !important;
-  }
-}
-
-.visible-desktop {
-  display: none !important;
-}
-@media (min-width: 932px) {
-  .visible-desktop {
-    display: unset !important;
-  }
-}
-
-@media (min-width: 932px) {
-  .invisible-desktop {
-    display: none !important;
-  }
-}
-
-.carrousel-tuiles {
+<style>.carrousel-tuiles {
   --espacement: 16px;
   padding: 0;
 }
@@ -114,6 +84,7 @@ const suivant = () => versDirection(1);
 }
 
 .conteneur-actions button {
+  position: relative;
   background: none;
   border: none;
   color: var(--brique-carrousel-bouton-action-texte-couleur);
@@ -124,7 +95,19 @@ const suivant = () => versDirection(1);
   display: flex;
   align-items: center;
   gap: 8px;
-  box-shadow: inset 0 -1px 0 var(--brique-carrousel-bouton-action-texte-couleur);
+}
+.conteneur-actions button:hover:after {
+  bottom: -1px;
+  height: 2px;
+}
+.conteneur-actions button:after {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  content: "";
+  width: 100%;
+  height: 1px;
+  background: var(--brique-carrousel-bouton-action-texte-couleur);
 }
 
 .conteneur-actions .precedent > .icone,
@@ -133,10 +116,6 @@ const suivant = () => versDirection(1);
   align-items: center;
 }
 
-.conteneur-actions button:hover {
-  box-shadow: inset 0 -2px 0 var(--brique-carrousel-bouton-action-texte-couleur);
-}
-
 @media (min-width: 932px) {
   .carrousel-tuiles {
     --espacement: 24px;
@@ -144,10 +123,4 @@ const suivant = () => versDirection(1);
   .carrousel-tuiles .conteneur-actions {
     display: none;
   }
-  .carrousel-tuiles .tuile-presentation:first-of-type {
-    margin-left: 0;
-  }
-  .carrousel-tuiles .tuile-presentation:last-of-type {
-    margin-right: 0;
-  }
 }</style>

package/dist/lab/vitrines-produits/briques/CarrouselTuiles/IconeFlecheDroite.svelte

@@ -7,37 +7,7 @@
   />
 </svg>
 
-<style>.visible-tablette {
-  display: none !important;
-}
-@media (min-width: 576px) {
-  .visible-tablette {
-    display: unset !important;
-  }
-}
-
-@media (min-width: 576px) {
-  .invisible-tablette {
-    display: none !important;
-  }
-}
-
-.visible-desktop {
-  display: none !important;
-}
-@media (min-width: 932px) {
-  .visible-desktop {
-    display: unset !important;
-  }
-}
-
-@media (min-width: 932px) {
-  .invisible-desktop {
-    display: none !important;
-  }
-}
-
-svg {
+<style>svg {
   transform: rotate(180deg);
 }
 

package/dist/lab/vitrines-produits/briques/CarrouselTuiles/IconeFlecheGauche.svelte

@@ -7,36 +7,6 @@
   />
 </svg>
 
-<style>.visible-tablette {
-  display: none !important;
-}
-@media (min-width: 576px) {
-  .visible-tablette {
-    display: unset !important;
-  }
-}
-
-@media (min-width: 576px) {
-  .invisible-tablette {
-    display: none !important;
-  }
-}
-
-.visible-desktop {
-  display: none !important;
-}
-@media (min-width: 932px) {
-  .visible-desktop {
-    display: unset !important;
-  }
-}
-
-@media (min-width: 932px) {
-  .invisible-desktop {
-    display: none !important;
-  }
-}
-
-svg path {
+<style>svg path {
   fill: var(--brique-carrousel-bouton-action-texte-couleur);
 }</style>

package/dist/lab/vitrines-produits/briques/LecteurVideo.svelte

@@ -10,37 +10,7 @@ export let classe = "";
   Votre navigateur ne supporte pas la fonctionnalité de lecture de vidéos.
 </video>
 
-<style>.visible-tablette {
-  display: none !important;
-}
-@media (min-width: 576px) {
-  .visible-tablette {
-    display: unset !important;
-  }
-}
-
-@media (min-width: 576px) {
-  .invisible-tablette {
-    display: none !important;
-  }
-}
-
-.visible-desktop {
-  display: none !important;
-}
-@media (min-width: 932px) {
-  .visible-desktop {
-    display: unset !important;
-  }
-}
-
-@media (min-width: 932px) {
-  .invisible-desktop {
-    display: none !important;
-  }
-}
-
-video {
+<style>video {
   width: 100%;
   max-width: 792px;
   max-height: 446px;