@lab-anssi/ui-kit 1.61.3 → 1.62.0

package/dist/composants/carrousel-tuiles/IconeFlecheDroite.svelte.d.ts

@@ -0,0 +1,26 @@
+export default IconeFlecheDroite;
+type IconeFlecheDroite = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const IconeFlecheDroite: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/composants/carrousel-tuiles/IconeFlecheGauche.svelte

@@ -0,0 +1,12 @@
+<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="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="#042794"
+  />
+</svg>
+
+<style>svg path {
+  fill: var(--brique-carrousel-bouton-action-texte-couleur);
+}</style>

package/dist/composants/carrousel-tuiles/IconeFlecheGauche.svelte.d.ts

@@ -0,0 +1,26 @@
+export default IconeFlecheGauche;
+type IconeFlecheGauche = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const IconeFlecheGauche: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/composants/carrousel-tuiles/Tuile.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">let { titre, illustration, contenu, position = null } = $props();
+export {};
+</script>
+
+<div class="tuile {position ?? ''}">
+  <div class="conteneur-image">
+    <img src={illustration.lien} alt={illustration.alt} />
+  </div>
+  <p>{titre}</p>
+  <span>{contenu}</span>
+</div>
+
+<style>.tuile {
+  --couleur-texte: #000000;
+  border-radius: 8px;
+  border: 1px solid #ddd;
+  background: #fff;
+  padding: 32px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  text-align: center;
+  color: var(--couleur-texte);
+  min-width: 212px;
+  box-sizing: border-box;
+  scroll-snap-align: center;
+  flex-shrink: 0;
+  width: calc(100vw - 60px);
+  max-width: 384px;
+}
+.tuile.premiere {
+  margin-left: var(--espacement);
+}
+@media (min-width: 1200px) {
+  .tuile.premiere {
+    margin-left: 0;
+  }
+}
+.tuile.derniere {
+  margin-right: var(--espacement);
+}
+@media (min-width: 1200px) {
+  .tuile.derniere {
+    margin-right: 0;
+  }
+}
+.tuile .conteneur-image img {
+  max-width: 96px;
+  max-height: 96px;
+}
+
+p {
+  margin: 0;
+  font-size: 18px;
+  line-height: 24px;
+  font-style: normal;
+  font-weight: 700;
+}
+@media (min-width: 768px) {
+  p {
+    font-size: 20px;
+    line-height: 28px;
+  }
+}
+
+span {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+}</style>

package/dist/composants/carrousel-tuiles/Tuile.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Image } from "../../types";
+interface Props {
+    titre: string;
+    illustration: Image;
+    contenu: string;
+    position?: "premiere" | "derniere" | null;
+}
+declare const Tuile: import("svelte").Component<Props, {}, "">;
+type Tuile = ReturnType<typeof Tuile>;
+export default Tuile;

package/dist/composants/icones/Fleche.svelte

@@ -0,0 +1,25 @@
+<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/composants/icones/Fleche.svelte.d.ts

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

package/dist/composants/icones/LienExterne.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">let { couleur = undefined } = $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/composants/icones/LienExterne.svelte.d.ts

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

package/dist/composants/marelle/Etape.svelte

@@ -0,0 +1,165 @@
+<svelte:options
+  customElement={{
+    tag: "lab-anssi-marelle-etape",
+    props: {
+      index: { attribute: "index", type: "Number" },
+      etapeMarelle: { attribute: "etape-marelle", type: "Object" },
+      baliseTitre: { attribute: "balise-titre", type: "String" },
+    },
+  }}
+/>
+
+<script lang="ts">import DsfrLink from "../../dsfr/DsfrLink.svelte";
+let { index, etapeMarelle, baliseTitre = "h4" } = $props();
+const pair = $derived((index + 1) % 2 === 0);
+</script>
+
+<div
+  class="lab-anssi-marelle-etape marelle-etape"
+  class:lab-anssi-marelle-etape--pair={pair}
+  class:lab-anssi-marelle-etape--impair={!pair}
+>
+  <div class="lab-anssi-marelle-etape__illustration">
+    <slot name="etape-illustration">
+      {#if etapeMarelle?.illustration}
+        <img
+          src={etapeMarelle.illustration.lien}
+          alt={etapeMarelle.illustration.alt}
+          class="lab-anssi-marelle-etape__image"
+        />
+      {/if}
+    </slot>
+  </div>
+
+  <div class="lab-anssi-marelle-etape__numero">
+    <span>
+      <span class="lab-anssi-marelle-etape__rond">
+        {index + 1}
+      </span>
+    </span>
+  </div>
+
+  <article class="lab-anssi-marelle-etape__contenu">
+    <slot name="etape-titre">
+      {#if etapeMarelle?.titre}
+        <svelte:element this={baliseTitre} class="lab-anssi-marelle-etape__titre">
+          {etapeMarelle.titre}
+        </svelte:element>
+      {/if}
+    </slot>
+
+    <slot name="etape-description">
+      {#if etapeMarelle?.description}
+        <div class="lab-anssi-marelle-etape__description">
+          <p>{etapeMarelle.description}</p>
+        </div>
+      {/if}
+    </slot>
+
+    <slot name="etape-lien">
+      {#if etapeMarelle?.lien}
+        <DsfrLink
+          label={etapeMarelle.lien.texte}
+          href={etapeMarelle.lien.href}
+          blank={etapeMarelle.lien.target === "_blank" ? true : undefined}
+        />
+      {/if}
+    </slot>
+  </article>
+</div>
+
+<style>:host(lab-anssi-marelle-etape) {
+  display: block;
+  box-sizing: border-box;
+}
+
+.lab-anssi-marelle-etape,
+.lab-anssi-marelle-etape *,
+.lab-anssi-marelle-etape *::after,
+.lab-anssi-marelle-etape *::before {
+  box-sizing: inherit;
+}
+.lab-anssi-marelle-etape {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+@media (min-width: 48em) {
+  .lab-anssi-marelle-etape {
+    align-items: center;
+    flex-direction: row;
+    gap: 1.5rem;
+    justify-content: center;
+  }
+}
+@media (max-width: 61.98em) {
+  .lab-anssi-marelle-etape__illustration {
+    order: 1;
+  }
+}
+.lab-anssi-marelle-etape__image {
+  display: block;
+  margin: 0;
+  max-width: 100%;
+  height: auto;
+}
+.lab-anssi-marelle-etape__numero {
+  text-align: center;
+}
+@media (min-width: 48em) {
+  .lab-anssi-marelle-etape__numero {
+    flex: 0 0 16.6666666667%;
+    width: 16.6666666667%;
+    max-width: 16.6666666667%;
+    text-align: right;
+  }
+  .lab-anssi-marelle-etape__numero > span {
+    padding-inline: 1rem;
+  }
+}
+.lab-anssi-marelle-etape__rond {
+  background-color: var(--brique-marelle-etapes-numero-etape-couleur, var(--blue-france-main-525, #6a6af4));
+  border-radius: 50%;
+  color: var(--text-inverted-grey, #ffffff);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 2.5rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 3rem;
+  height: 4.5rem;
+  width: 4.5rem;
+}
+@media (min-width: 48em) {
+  .lab-anssi-marelle-etape__illustration, .lab-anssi-marelle-etape__contenu {
+    flex: 0 0 33.3333333333%;
+    width: 33.3333333333%;
+    max-width: 33.3333333333%;
+  }
+}
+.lab-anssi-marelle-etape__titre {
+  color: var(--text-title-grey, #161616);
+  font-size: 1.375rem;
+  font-weight: 700;
+  line-height: 1.75rem;
+  margin-block: 0 0.5rem;
+}
+.lab-anssi-marelle-etape__description {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  margin-block-end: 1rem;
+}
+.lab-anssi-marelle-etape__description p {
+  margin-block: 0;
+}
+@media (min-width: 48em) {
+  .lab-anssi-marelle-etape--impair {
+    flex-direction: row-reverse;
+  }
+}
+@media (min-width: 48em) {
+  .lab-anssi-marelle-etape--impair .lab-anssi-marelle-etape__numero {
+    text-align: left;
+  }
+}</style>

package/dist/composants/marelle/Etape.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { EtapeMarelle } from "../../types";
+interface Props {
+    /** Index de l'étape */
+    index: number;
+    /** Contenu de l'étape */
+    etapeMarelle?: EtapeMarelle;
+    /** Balise Hn du titre des étapes */
+    baliseTitre?: "h3" | "h4" | "h5";
+}
+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 Etape: $$__sveltets_2_IsomorphicComponent<Props, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    'etape-illustration': {};
+    'etape-titre': {};
+    'etape-description': {};
+    'etape-lien': {};
+}, {}, "">;
+type Etape = InstanceType<typeof Etape>;
+export default Etape;

package/dist/composants/marelle/Marelle.svelte

@@ -0,0 +1,97 @@
+<svelte:options
+  customElement={{
+    tag: "lab-anssi-marelle",
+    props: {
+      titre: { attribute: "titre", type: "String" },
+      baliseTitre: { attribute: "balise-titre", type: "String" },
+      etapesmarelle: { attribute: "etapesmarelle", type: "Array" },
+      baliseSousTitre: { attribute: "balise-sous-titre", type: "String" },
+      action: { attribute: "action", type: "Object" },
+    },
+  }}
+/>
+
+<script lang="ts">import { setThemeable } from "../../utilitaires";
+import DsfrButton from "../../dsfr/DsfrButton.svelte";
+import DsfrContainer from "../../dsfr/DsfrContainer.svelte";
+import Etape from "./Etape.svelte";
+let { titre = "", baliseTitre = "div", etapesmarelle = [], baliseSousTitre, action } = $props();
+setThemeable($host());
+</script>
+
+<div class="lab-anssi-marelle">
+  <DsfrContainer>
+    <section class="lab-anssi-marelle__conteneur">
+      <slot name="marelle-titre">
+        <svelte:element this={baliseTitre} class="lab-anssi-marelle__titre">
+          {titre}
+        </svelte:element>
+      </slot>
+
+      <section class="lab-anssi-marelle__etapes">
+        <slot>
+          {#each etapesmarelle as etapeMarelle, index (index)}
+            <Etape {index} {etapeMarelle} baliseTitre={baliseSousTitre} />
+          {/each}
+        </slot>
+      </section>
+
+      {#if action || $$slots["marelle-action"]}
+        <div class="lab-anssi-marelle__action">
+          <slot name="marelle-action">
+            <DsfrButton
+              label={action!.titre}
+              href={action!.lien}
+              target={action!.target as "_self" | "_blank"}
+              markup="a"
+            />
+          </slot>
+        </div>
+      {/if}
+    </section>
+  </DsfrContainer>
+</div>
+
+<style>:host(lab-anssi-marelle) {
+  display: block;
+  box-sizing: border-box;
+}
+
+.lab-anssi-marelle {
+  color: var(--text-default-grey, #3a3a3a);
+  padding: var(--padding-section, 72px 0);
+}
+.lab-anssi-marelle *,
+.lab-anssi-marelle *::after,
+.lab-anssi-marelle *::before {
+  box-sizing: inherit;
+}
+.lab-anssi-marelle__conteneur {
+  display: flex;
+  flex-direction: column;
+  gap: 72px;
+}
+.lab-anssi-marelle__titre,
+.lab-anssi-marelle :global(::slotted([slot="marelle-titre"])) {
+  color: var(--brique-marelle-titre-couleur, var(--text-title-grey, #161616));
+  font-size: 32px;
+  font-weight: 700;
+  line-height: 40px;
+  margin-block: 0;
+  text-align: center;
+}
+.lab-anssi-marelle__etapes {
+  display: flex;
+  flex-direction: column;
+  gap: 48px;
+}
+@media (min-width: 48em) {
+  .lab-anssi-marelle__etapes {
+    gap: 32px;
+    padding-block-end: 24px;
+  }
+}
+.lab-anssi-marelle__action {
+  display: flex;
+  justify-content: center;
+}</style>

package/dist/composants/marelle/Marelle.svelte.d.ts

@@ -0,0 +1,44 @@
+import type { Action, EtapeMarelle } from "../../types";
+interface Props {
+    /** Titre affiché en haut de la brique Marelle */
+    titre?: string;
+    /** Balise Hn du titre du composant (default: h3) */
+    baliseTitre?: "h2" | "h3" | "h4" | "div";
+    /** Étapes de la marelle */
+    etapesmarelle?: EtapeMarelle[];
+    /** Balise Hn du sous-titre des étapes composant */
+    baliseSousTitre?: "h3" | "h4" | "h5";
+    /** Propriétés du bouton d'action */
+    action?: Action;
+}
+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;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Marelle: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, {
+    'marelle-titre': {};
+    default: {};
+    'marelle-action': {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    'marelle-titre': {};
+    default: {};
+    'marelle-action': {};
+}, {}, "">;
+type Marelle = InstanceType<typeof Marelle>;
+export default Marelle;