@lab-anssi/ui-kit 1.25.1 → 1.25.2

package/dist/lab/blog/PageCrisp.svelte

@@ -1,251 +0,0 @@
-<svelte:options
-  customElement={{
-    tag: "lab-anssi-page-crisp",
-    props: {
-      contenu: { reflect: false, type: "String", attribute: "contenu" },
-      tableDesMatieres: { reflect: false, type: "Array", attribute: "table-des-matieres" },
-    },
-  }}
-/>
-
-<script lang="ts">import { run } from "svelte/legacy";
-import SommaireMobile from "./SommaireMobile.svelte";
-import { onDestroy, tick } from "svelte";
-import SommaireBureau from "./SommaireBureau.svelte";
-let { contenu, tableDesMatieres } = $props();
-let composant = $state();
-let observateurDIntersection;
-const observeLesSections = () => {
-  observateurDIntersection = new IntersectionObserver(
-    (sections) => {
-      sections.forEach((section) => {
-        const titreDeLaSection = section.target.querySelector("h2");
-        const lesLiens = composant.querySelectorAll(
-          `.sommaire ul li a[href='#${titreDeLaSection.id}']`
-        );
-        if (!lesLiens) return;
-        if (section.isIntersecting) {
-          lesLiens.forEach((l) => l.parentElement.classList.add("actif"));
-          const menuMobileVisible = composant.querySelector("#section-active");
-          if (menuMobileVisible) menuMobileVisible.textContent = titreDeLaSection.textContent;
-        } else lesLiens.forEach((l) => l.parentElement.classList.remove("actif"));
-      });
-    },
-    { rootMargin: "-30% 0% -62% 0%" }
-  );
-  const lesSections = composant.querySelectorAll("article .contenu section");
-  lesSections.forEach((s) => observateurDIntersection.observe(s));
-};
-run(() => {
-  if (contenu) tick().then(observeLesSections);
-});
-const attendChargementImages = async () => {
-  const images = composant.querySelectorAll("img");
-  await Promise.all(
-    Array.from(images).map((image) => {
-      if (image.complete) return Promise.resolve();
-      return new Promise((res) => {
-        image.addEventListener("load", res);
-        image.addEventListener("error", res);
-      });
-    })
-  );
-};
-const scroll = (cible) => {
-  if (cible) {
-    tick().then(async () => {
-      const ancre = composant && composant.querySelector(cible);
-      if (ancre) {
-        await attendChargementImages();
-        ancre.scrollIntoView(true);
-      }
-    });
-  }
-};
-run(() => {
-  if (contenu) scroll(window.location.hash);
-});
-const ancreOuverte = (evenement) => scroll(`#${evenement.detail}`);
-onDestroy(() => {
-  const lesSections = composant.querySelectorAll("section");
-  lesSections.forEach((s) => {
-    if (observateurDIntersection) observateurDIntersection.unobserve(s);
-  });
-});
-</script>
-
-<div bind:this={composant}>
-  <SommaireMobile {tableDesMatieres} on:ancreOuverte={ancreOuverte} />
-
-  <article>
-    <SommaireBureau {tableDesMatieres} on:ancreOuverte={ancreOuverte} />
-    <div class="contenu">
-      <!-- eslint-disable-next-line svelte/no-at-html-tags-->
-      {@html contenu}
-    </div>
-  </article>
-</div>
-
-<style>article {
-  font-family: Marianne, sans-serif;
-  color: #3a3a3a;
-  display: flex;
-  flex-direction: column;
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 48px 16px 72px;
-}
-@media (min-width: 932px) {
-  article {
-    padding: 48px 24px 72px;
-    flex-direction: row;
-    gap: 48px;
-  }
-}
-article .contenu {
-  display: flex;
-  flex-direction: column;
-  gap: 72px;
-}
-article .contenu :global(section) {
-  display: flex;
-  flex-direction: column;
-  gap: 32px;
-}
-article .contenu :global(p) {
-  margin: 0;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  font-weight: 400;
-}
-article .contenu :global(h2) {
-  color: #161616;
-  font-size: 1.75rem;
-  line-height: 2.25rem;
-  font-weight: 700;
-  margin: 0;
-  scroll-margin-top: 50px; /* Hauteur de la barre de navigation */
-}
-@media (min-width: 576px) {
-  article .contenu :global(h2) {
-    font-size: 2rem;
-    line-height: 2.5rem;
-  }
-}
-@media (min-width: 932px) {
-  article .contenu :global(h2) {
-    scroll-margin-top: 0;
-  }
-}
-article .contenu :global(h3) {
-  color: #161616;
-  font-size: 1.375rem;
-  line-height: 1.75rem;
-  font-weight: 700;
-  margin: 0;
-}
-@media (min-width: 576px) {
-  article .contenu :global(h3) {
-    font-size: 1.5rem;
-    line-height: 2rem;
-  }
-}
-article .contenu :global(h4) {
-  color: #161616;
-  font-size: 1.125rem;
-  line-height: 1.5rem;
-  font-weight: 700;
-  margin: 0;
-}
-@media (min-width: 576px) {
-  article .contenu :global(h4) {
-    font-size: 1.25rem;
-    line-height: 1.75rem;
-  }
-}
-article .contenu :global(img),
-article .contenu :global(video) {
-  width: 100%;
-}
-article .contenu :global(video) {
-  border-radius: 10px;
-}
-article .contenu :global(.conteneur-video .legende) {
-  font-style: italic;
-  text-align: center;
-  margin: 0;
-  padding: 0;
-}
-article .contenu :global(.information) {
-  background: #e8edff;
-  padding: 16px 16px 16px 24px;
-  border-radius: 4px;
-  color: #0163cb;
-  border-left: 4px solid #0163cb;
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-  display: flex;
-  flex-direction: column;
-}
-article .contenu :global(.information):before {
-  content: "Information";
-  font-weight: bold;
-}
-article .contenu :global(.aide) {
-  background: #f6f6f6;
-  position: relative;
-  padding: 24px 24px 24px 64px;
-  border-radius: 4px;
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-}
-article .contenu :global(.aide):before {
-  content: "";
-  display: block;
-  background-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/aide.svg");
-  width: 24px;
-  height: 24px;
-  position: absolute;
-  top: 24px;
-  left: 24px;
-}
-article .contenu :global(a) {
-  color: var(--couleur-lien);
-  text-decoration: underline;
-  text-underline-offset: 4px;
-  text-decoration-thickness: 1px;
-}
-article .contenu :global(a):hover {
-  text-decoration-thickness: 2px;
-}
-article .contenu :global(a.telechargement) {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  text-decoration: none;
-  position: relative;
-}
-article .contenu :global(a.telechargement):after {
-  content: "";
-  display: block;
-  background: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/telecharger.svg");
-  filter: var(--filtre-couleur-primaire);
-  width: 16px;
-  height: 16px;
-}
-article .contenu :global(a.telechargement):before {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 1px;
-  background-color: var(--couleur-lien);
-}
-article .contenu :global(a.telechargement):hover:before {
-  bottom: -1px;
-  height: 2px;
-}
-article .contenu :global(ul li) {
-  padding-bottom: 8px;
-}</style>

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

@@ -1,8 +0,0 @@
-import type { TableDesMatieres } from "../../types";
-interface Props {
-    contenu: string;
-    tableDesMatieres: TableDesMatieres;
-}
-declare const PageCrisp: import("svelte").Component<Props, {}, "">;
-type PageCrisp = ReturnType<typeof PageCrisp>;
-export default PageCrisp;

package/dist/lab/blog/SommaireBureau.svelte

@@ -1,66 +0,0 @@
-<script lang="ts">import { createEventDispatcher } from "svelte";
-let { tableDesMatieres } = $props();
-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}`} onclick={() => 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 a {
-  color: var(--sommaire-actif-couleur);
-  border-left: 2px solid var(--sommaire-actif-indicateur-couleur);
-  padding-left: 6px;
-}
-.sommaire-deplie ul li a {
-  color: #161616;
-  border-bottom: none;
-  text-decoration: none;
-  padding-left: 8px;
-  display: inline-block;
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 1.5rem;
-}
-.sommaire-deplie span {
-  margin-bottom: 16px;
-  font-size: 0.85rem;
-  line-height: 1.5rem;
-}</style>

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

@@ -1,24 +0,0 @@
-import type { TableDesMatieres } from "../../types";
-interface Props {
-    tableDesMatieres: TableDesMatieres;
-}
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const SommaireBureau: $$__sveltets_2_IsomorphicComponent<Props, {
-    ancreOuverte: CustomEvent<string>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type SommaireBureau = InstanceType<typeof SommaireBureau>;
-export default SommaireBureau;

package/dist/lab/blog/SommaireMobile.svelte

@@ -1,118 +0,0 @@
-<script lang="ts">import { createEventDispatcher } from "svelte";
-import IconeMenuLateral from "./IconeMenuLateral.svelte";
-import IconeChevronBas from "./IconeChevronBas.svelte";
-let { tableDesMatieres } = $props();
-let detailsElement = $state();
-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">
-          <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-          {@html tableDesMatieres[0]?.texte}
-        </span>
-        <IconeChevronBas />
-      </div>
-    </summary>
-
-    <ul>
-      {#each tableDesMatieres as entree (entree.id)}
-        <li>
-          <a href={`#${entree.id}`} onclick={() => 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(:global(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: white;
-  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 {
-  background: var(--sommaire-mobile-fond);
-}
-.sommaire-replie details[open] summary .entete-filtres :global(.chevron) {
-  transform: rotate(180deg);
-}
-.sommaire-replie details summary {
-  list-style: none;
-}
-.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

@@ -1,24 +0,0 @@
-import type { TableDesMatieres } from "../../types";
-interface Props {
-    tableDesMatieres: TableDesMatieres;
-}
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const SommaireMobile: $$__sveltets_2_IsomorphicComponent<Props, {
-    ancreOuverte: CustomEvent<string>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type SommaireMobile = InstanceType<typeof SommaireMobile>;
-export default SommaireMobile;

package/dist/lab/icones/Fleche.svelte

@@ -1,25 +0,0 @@
-<script lang="ts">let { direction = "gauche" } = $props();
-</script>
-
-<svg
-  class={direction}
-  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="M5.21875 7.33336H13.3334V8.6667H5.21875L8.79475 12.2427L7.85208 13.1854L2.66675 8.00003L7.85208 2.8147L8.79475 3.75736L5.21875 7.33336Z"
-    fill="black"
-  />
-</svg>
-
-<style>svg.droite {
-  transform: rotate(180deg);
-}
-svg.droite path {
-  fill: var(--liste-articles-couleur-fleche);
-}</style>

package/dist/lab/icones/Fleche.svelte.d.ts

@@ -1,6 +0,0 @@
-interface Props {
-    direction?: "gauche" | "droite";
-}
-declare const Fleche: import("svelte").Component<Props, {}, "">;
-type Fleche = ReturnType<typeof Fleche>;
-export default Fleche;

package/dist/lab/icones/LienExterne.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">let { couleur = void 0 } = $props();
-</script>
-
-<svg
-  width="16"
-  height="16"
-  viewBox="0 0 16 16"
-  fill="currentColor"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <g id="external-link">
-    <path
-      id="Ic&#195;&#180;ne"
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M6.66667 4V5.33333H3.33333V12.6667H10.6667V9.33333H12V13.3333C12 13.7015 11.7015 14 11.3333 14H2.66667C2.29848 14 2 13.7015 2 13.3333V4.66667C2 4.29848 2.29848 4 2.66667 4H6.66667ZM14 2V8L11.4707 5.47133L7.47133 9.47133L6.52867 8.52867L10.528 4.52867L8 2H14Z"
-      fill={couleur}
-    />
-  </g>
-</svg>

package/dist/lab/icones/LienExterne.svelte.d.ts

@@ -1,6 +0,0 @@
-interface Props {
-    couleur?: string | undefined;
-}
-declare const LienExterne: import("svelte").Component<Props, {}, "">;
-type LienExterne = ReturnType<typeof LienExterne>;
-export default LienExterne;