@lab-anssi/ui-kit 1.12.4 → 1.14.0

package/dist/lab/blog/SommaireBureau.svelte

@@ -0,0 +1,69 @@
+<script>import { createEventDispatcher } from "svelte";
+export let tableDesMatieres;
+const emets = createEventDispatcher();
+const ouvreEntree = (ancre) => {
+  emets("ancreOuverte", ancre);
+};
+</script>
+
+<div class="sommaire sommaire-deplie">
+  <ul>
+    {#each tableDesMatieres as entree (entree.id)}
+      <li>
+        <a href={`#${entree.id}`} on:click={() => ouvreEntree(entree.id)}>
+          <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+          {@html entree.texte}
+        </a>
+      </li>
+    {/each}
+  </ul>
+</div>
+
+<style>.sommaire-deplie {
+  display: none;
+  width: 282px;
+  flex: 0 0 auto;
+  align-self: flex-start;
+  font-family: Marianne, sans-serif;
+}
+@media (min-width: 932px) {
+  .sommaire-deplie {
+    display: flex;
+    flex-direction: column;
+    position: sticky;
+    top: 0;
+  }
+}
+.sommaire-deplie ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0 0 40px;
+}
+.sommaire-deplie ul li {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+.sommaire-deplie ul li.actif {
+  font-weight: bold;
+}
+.sommaire-deplie ul li.actif a {
+  color: var(--sommaire-actif-couleur);
+  border-left: 2px solid var(--sommaire-actif-indicateur-couleur);
+  padding-left: 6px;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 1.5rem;
+}
+.sommaire-deplie ul li a {
+  color: #161616;
+  border-bottom: none;
+  text-decoration: none;
+  padding-left: 8px;
+  display: inline-block;
+}
+.sommaire-deplie span {
+  margin-bottom: 16px;
+  font-size: 0.85rem;
+  line-height: 1.5rem;
+}</style>

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import type { TableDesMatieres } from "../../types";
+declare const __propDef: {
+    props: {
+        tableDesMatieres: TableDesMatieres;
+    };
+    events: {
+        ancreOuverte: CustomEvent<string>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type SommaireBureauProps = typeof __propDef.props;
+export type SommaireBureauEvents = typeof __propDef.events;
+export type SommaireBureauSlots = typeof __propDef.slots;
+export default class SommaireBureau extends SvelteComponent<SommaireBureauProps, SommaireBureauEvents, SommaireBureauSlots> {
+}
+export {};

package/dist/lab/blog/SommaireMobile.svelte

@@ -0,0 +1,111 @@
+<script>import { createEventDispatcher } from "svelte";
+import IconeMenuLateral from "./IconeMenuLateral.svelte";
+import IconeChevronBas from "./IconeChevronBas.svelte";
+export let tableDesMatieres;
+let detailsElement;
+const emets = createEventDispatcher();
+const ouvreEntree = (ancre) => {
+  detailsElement.open = false;
+  emets("ancreOuverte", ancre);
+};
+</script>
+
+<div class="sommaire sommaire-replie">
+  <details bind:this={detailsElement}>
+    <summary>
+      <div class="entete-filtres">
+        <IconeMenuLateral />
+        <span id="section-active" class="titre-menu">
+          {tableDesMatieres[0]?.texte}
+        </span>
+        <IconeChevronBas />
+      </div>
+    </summary>
+
+    <ul>
+      {#each tableDesMatieres as entree (entree.id)}
+        <li>
+          <a href={`#${entree.id}`} on:click={() => ouvreEntree(entree.id)}>
+            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+            {@html entree.texte}</a
+          >
+        </li>
+      {/each}
+    </ul>
+  </details>
+</div>
+
+<style>.sommaire-replie {
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+  background: white;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  font-family: Marianne, sans-serif;
+}
+@media (min-width: 932px) {
+  .sommaire-replie {
+    display: none;
+  }
+}
+.sommaire-replie:has(details[open]) {
+  position: fixed;
+  top: 0;
+  height: 100vh;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: auto;
+}
+.sommaire-replie details .entete-filtres {
+  padding: 12px 16px;
+  background: var(--sommaire-mobile-fond);
+  color: var(--sommaire-actif-couleur);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.5rem;
+}
+.sommaire-replie details ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 16px;
+}
+.sommaire-replie details ul li {
+  border-bottom: 1px solid #ddd;
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+.sommaire-replie details ul li.actif a {
+  color: var(--sommaire-actif-couleur);
+  border-left: 2px solid var(--sommaire-actif-indicateur-couleur);
+  padding-left: 14px;
+  border-bottom: none;
+}
+.sommaire-replie details ul li a {
+  color: #161616;
+  text-decoration: none;
+  padding-left: 16px;
+  display: inline-block;
+  border-bottom: none;
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.5rem;
+}
+.sommaire-replie details[open] summary .entete-filtres :global(.chevron) {
+  transform: rotate(180deg);
+}
+.sommaire-replie details summary::marker {
+  content: "";
+}
+.sommaire-replie details summary::-webkit-details-marker {
+  display: none;
+}
+.sommaire-replie details summary .entete-filtres {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.sommaire-replie details .titre-menu {
+  flex-grow: 1;
+}</style>

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import type { TableDesMatieres } from "../../types";
+declare const __propDef: {
+    props: {
+        tableDesMatieres: TableDesMatieres;
+    };
+    events: {
+        ancreOuverte: CustomEvent<string>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type SommaireMobileProps = typeof __propDef.props;
+export type SommaireMobileEvents = typeof __propDef.events;
+export type SommaireMobileSlots = typeof __propDef.slots;
+export default class SommaireMobile extends SvelteComponent<SommaireMobileProps, SommaireMobileEvents, SommaireMobileSlots> {
+}
+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;

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

@@ -36,37 +36,7 @@ import LienExterne from "../../icones/LienExterne.svelte";
   </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;
-  }
-}
-
-.presentation-anssi {
+<style>.presentation-anssi {
   color: #3a3a3a;
   display: grid;
   grid-template-columns: 1fr;
@@ -140,6 +110,7 @@ import LienExterne from "../../icones/LienExterne.svelte";
   font-family: Marianne, sans-serif;
   padding: 8px 16px;
   display: flex;
+  justify-content: center;
   align-items: center;
   gap: 8px;
   text-align: center;

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

@@ -43,37 +43,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: "contenu" "illustration" "action";