@lab-anssi/ui-kit 1.61.3 → 1.62.0

package/dist/composants/Bouton.svelte

@@ -0,0 +1,156 @@
+<svelte:options
+  customElement={{
+    tag: "lab-anssi-bouton",
+    props: {
+      titre: { reflect: false, type: "String", attribute: "titre" },
+      variante: { reflect: false, type: "String", attribute: "variante" },
+      taille: { reflect: false, type: "String", attribute: "taille" },
+      icone: { reflect: false, type: "String", attribute: "icone" },
+      positionIcone: { reflect: false, type: "String", attribute: "position-icone" },
+      actif: { reflect: false, type: "Boolean", attribute: "actif" },
+      largeurMaximale: { reflect: false, type: "Boolean", attribute: "largeur-maximale" },
+    },
+    extend: withIconsStyleSheet,
+  }}
+/>
+
+<script lang="ts">import { withIconsStyleSheet } from "../utilitaires";
+import Icone from "./Icone.svelte";
+let { titre = undefined, variante, taille, icone = undefined, positionIcone = "sans", actif = true, largeurMaximale = false } = $props();
+</script>
+
+<button
+  class={`bouton ${variante} ${taille} icone-${positionIcone}`}
+  class:largeur-maximale={largeurMaximale}
+  title={positionIcone === "seule" ? titre : ""}
+  disabled={!actif}
+>
+  {#if (positionIcone === "gauche" || positionIcone === "seule") && icone}
+    <Icone nom={icone} taille={taille === "lg" ? "md" : "sm"} />
+  {/if}
+  {#if positionIcone !== "seule"}
+    <span><slot>{titre}</slot></span>
+  {/if}
+  {#if positionIcone === "droite" && icone}
+    <Icone nom={icone} taille={taille === "lg" ? "md" : "sm"} />
+  {/if}
+</button>
+
+<style>.bouton {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  justify-content: center;
+  text-align: center;
+  font-style: normal;
+  font-weight: 500;
+  font-family: inherit;
+}
+.bouton.largeur-maximale {
+  width: 100%;
+  box-sizing: border-box;
+}
+.bouton:focus-visible {
+  outline: 2px solid #0a76f6;
+  outline-offset: 2px;
+}
+.bouton.sm {
+  padding: 4px 12px;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+}
+.bouton.sm.icone-droite {
+  padding-right: 8px;
+}
+.bouton.sm.icone-gauche {
+  padding-left: 8px;
+}
+.bouton.sm.icone-seule {
+  padding: 8px;
+}
+.bouton.md {
+  padding: 8px 16px;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.bouton.md.icone-droite {
+  padding-right: 12px;
+}
+.bouton.md.icone-gauche {
+  padding-left: 12px;
+}
+.bouton.md.icone-seule {
+  padding: 8px;
+}
+.bouton.lg {
+  padding: 10px 24px;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+.bouton.lg.icone-droite {
+  padding-right: 18px;
+}
+.bouton.lg.icone-gauche {
+  padding-left: 18px;
+}
+.bouton.lg.icone-seule {
+  padding: 12px;
+}
+.bouton:disabled, .bouton[aria-disabled=true] {
+  cursor: not-allowed;
+}
+.bouton.primaire {
+  background: var(--bouton-primaire-couleur-fond);
+  color: var(--bouton-primaire-couleur-texte);
+  border: 1px solid transparent;
+  border-radius: var(--bouton-arrondi);
+}
+.bouton.primaire:hover {
+  background: var(--bouton-primaire-couleur-fond-survol);
+}
+.bouton.primaire:active {
+  background: var(--bouton-primaire-couleur-fond-clique);
+}
+.bouton.primaire:disabled, .bouton.primaire[aria-disabled=true] {
+  background: #e5e5e5;
+  color: #929292;
+}
+.bouton.secondaire {
+  color: var(--bouton-secondaire-tertiaire-couleur-texte);
+  background: white;
+  border: 1px solid var(--bouton-secondaire-couleur-bordure);
+  border-radius: var(--bouton-arrondi);
+}
+.bouton.secondaire:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+.bouton.secondaire:active {
+  background: rgba(0, 0, 0, 0.08);
+}
+.bouton.secondaire:disabled, .bouton.secondaire[aria-disabled=true] {
+  background: transparent;
+  color: #929292;
+  border-color: #929292;
+}
+.bouton.tertiaire, .bouton.tertiaire-sans-bordure {
+  color: var(--bouton-secondaire-tertiaire-couleur-texte);
+  background: white;
+  border-radius: var(--bouton-arrondi);
+}
+.bouton.tertiaire:hover, .bouton.tertiaire-sans-bordure:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+.bouton.tertiaire:active, .bouton.tertiaire-sans-bordure:active {
+  background: rgba(0, 0, 0, 0.08);
+}
+.bouton.tertiaire:disabled, .bouton.tertiaire[aria-disabled=true], .bouton.tertiaire-sans-bordure:disabled, .bouton.tertiaire-sans-bordure[aria-disabled=true] {
+  background: transparent;
+  color: #929292;
+}
+.bouton.tertiaire {
+  border: 1px solid #ddd;
+}
+.bouton.tertiaire-sans-bordure {
+  border: 1px solid transparent;
+}</style>

package/dist/composants/Bouton.svelte.d.ts

@@ -0,0 +1,36 @@
+interface Props {
+    titre?: string;
+    variante: "primaire" | "tertiaire" | "tertiaire-sans-bordure";
+    taille: "sm" | "md" | "lg";
+    icone?: string | undefined;
+    positionIcone?: "sans" | "seule" | "droite" | "gauche";
+    actif?: boolean;
+    largeurMaximale?: boolean;
+}
+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 Bouton: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, "">;
+type Bouton = InstanceType<typeof Bouton>;
+export default Bouton;

package/dist/composants/CentreAide.svelte

@@ -0,0 +1,223 @@
+<svelte:options customElement={{ tag: "lab-anssi-centre-aide", extend: withIconsStyleSheet }} />
+
+<script lang="ts">import { fly } from "svelte/transition";
+import { MediaQuery } from "svelte/reactivity";
+import { setThemeable, withIconsStyleSheet } from "../utilitaires";
+import DsfrButton from "../dsfr/DsfrButton.svelte";
+let { nomService, liens, onlienclique } = $props();
+setThemeable($host());
+let liensMisEnForme = $derived.by(() => {
+	const liensFormates = typeof liens === "string" ? JSON.parse(liens) : liens;
+	if (!Array.isArray(liensFormates) || liensFormates.some((l) => !l.texte)) {
+		throw new Error("Les liens doivent respecter le type : { texte: string; href?: string; preventDefault?: boolean; id?: string }[]");
+	}
+	return liensFormates;
+});
+let ouvert = $state(false);
+$effect(() => {
+	$host()?.toggleAttribute("data-open", ouvert);
+});
+const pointDeRuptureMD = new MediaQuery("min-width: 768px");
+</script>
+
+{#if !ouvert}
+  <div class="declencheur-centre-aide" transition:fly={{ y: 300 }}>
+    <DsfrButton
+      label="Centre d'aide"
+      hasIcon
+      iconPlace={pointDeRuptureMD.current ? "left" : "only"}
+      icon="question-line"
+      onclick={() => (ouvert = true)}
+      size="lg"
+    />
+  </div>
+{/if}
+
+{#if ouvert}
+  <div class="centre-aide" transition:fly={{ y: 300 }}>
+    <div class="entete">
+      <span class="fr-icon fr-icon-question-line"></span>
+      <p class="titre">Centre d'aide</p>
+      <DsfrButton label="Fermer" preset="close" onclick={() => (ouvert = false)} />
+    </div>
+
+    <div class="contenu">
+      <slot>
+        <p class="message">
+          Bonjour et bienvenue sur <b>{nomService}</b>. Comment pouvons-nous vous aider ?
+        </p>
+
+        {#if liensMisEnForme}
+          {#each liensMisEnForme as lien, id (id)}
+            <DsfrButton
+              label={lien.texte}
+              id={lien.id}
+              markup={lien.preventDefault ? "button" : "a"}
+              href={lien.href}
+              target="_blank"
+              onclick={(e: Event) => {
+                if (lien.preventDefault) e.preventDefault();
+                const detail = { target: e.currentTarget as EventTarget & HTMLAnchorElement };
+                onlienclique?.(detail);
+                $host()?.dispatchEvent(new CustomEvent("lienclique", { detail, bubbles: true }));
+              }}
+            />
+          {/each}
+        {/if}
+
+        <p class="message marge-haute">Vous souhaitez faire une autre demande à l'ANSSI ?</p>
+
+        <DsfrButton
+          label="️⚠️ Signaler un incident ou une vulnérabilité"
+          class="lien secondaire centre-aide-signaler-incident"
+          kind="secondary"
+          markup="a"
+          href="https://club.ssi.gouv.fr/#/declarations"
+          target="_blank"
+        />
+        <DsfrButton
+          label="️️📩 Contacter d’autres services de l’ANSSI"
+          class="lien secondaire centre-aide-contacter-anssi"
+          kind="secondary"
+          markup="a"
+          href="https://cyber.gouv.fr/contacter-lanssi"
+          target="_blank"
+        />
+      </slot>
+    </div>
+  </div>
+{/if}
+
+<style>[class^=fr-icon-]::before, [class^=fr-icon-]::after, [class*=" fr-icon-"]::before, [class*=" fr-icon-"]::after, [class^=fr-fi-]::before, [class^=fr-fi-]::after, [class*=" fr-fi-"]::before, [class*=" fr-fi-"]::after {
+  flex: 0 0 auto;
+  display: inline-block;
+  vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
+  background-color: currentColor;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
+[class^=fr-icon-]::before, [class^=fr-icon-]::after, [class*=" fr-icon-"]::before, [class*=" fr-icon-"]::after, [class^=fr-fi-]::before, [class^=fr-fi-]::after, [class*=" fr-fi-"]::before, [class*=" fr-fi-"]::after {
+  --icon-size: 1.5rem;
+}
+[class^=fr-icon-]::before, [class*=" fr-icon-"]::before, [class^=fr-fi-]::before, [class*=" fr-fi-"]::before {
+  content: "";
+}
+
+@media (-ms-high-contrast: active) and (-ms-high-contrast: active), (-ms-high-contrast: active) and (forced-colors: active), (forced-colors: active) and (-ms-high-contrast: active), (forced-colors: active) and (forced-colors: active) {
+  [class^=fr-icon-]::before, [class^=fr-icon-]::after, [class*=" fr-icon-"]::before, [class*=" fr-icon-"]::after, [class^=fr-fi-]::before, [class^=fr-fi-]::after, [class*=" fr-fi-"]::before, [class*=" fr-fi-"]::after {
+    forced-color-adjust: none;
+    background-color: canvastext;
+  }
+}
+@media (-ms-high-contrast: active) and (-ms-high-contrast: active), (-ms-high-contrast: active) and (forced-colors: active), (forced-colors: active) and (-ms-high-contrast: active), (forced-colors: active) and (forced-colors: active) {
+  button[class^=fr-icon-]:not([disabled])::before, button[class^=fr-icon-]:not([disabled])::after, button[class*=" fr-icon-"]:not([disabled])::before, button[class*=" fr-icon-"]:not([disabled])::after, button[class^=fr-fi-]:not([disabled])::before, button[class^=fr-fi-]:not([disabled])::after, button[class*=" fr-fi-"]:not([disabled])::before, button[class*=" fr-fi-"]:not([disabled])::after {
+    background-color: buttontext;
+  }
+}
+@media (-ms-high-contrast: active) and (-ms-high-contrast: active), (-ms-high-contrast: active) and (forced-colors: active), (forced-colors: active) and (-ms-high-contrast: active), (forced-colors: active) and (forced-colors: active) {
+  a[href][class^=fr-icon-]::before, a[href][class^=fr-icon-]::after, a[href][class*=" fr-icon-"]::before, a[href][class*=" fr-icon-"]::after, a[href][class^=fr-fi-]::before, a[href][class^=fr-fi-]::after, a[href][class*=" fr-fi-"]::before, a[href][class*=" fr-fi-"]::after {
+    background-color: linktext;
+  }
+}
+@media (-ms-high-contrast: active) and (-ms-high-contrast: active), (-ms-high-contrast: active) and (forced-colors: active), (forced-colors: active) and (-ms-high-contrast: active), (forced-colors: active) and (forced-colors: active) {
+  a[class^=fr-icon-]:not([href])::before, a[class^=fr-icon-]:not([href])::after, a[class*=" fr-icon-"]:not([href])::before, a[class*=" fr-icon-"]:not([href])::after, a[class^=fr-fi-]:not([href])::before, a[class^=fr-fi-]:not([href])::after, a[class*=" fr-fi-"]:not([href])::before, a[class*=" fr-fi-"]:not([href])::after, button[class^=fr-icon-]:disabled::before, button[class^=fr-icon-]:disabled::after, button[class*=" fr-icon-"]:disabled::before, button[class*=" fr-icon-"]:disabled::after, button[class^=fr-fi-]:disabled::before, button[class^=fr-fi-]:disabled::after, button[class*=" fr-fi-"]:disabled::before, button[class*=" fr-fi-"]:disabled::after, input[class^=fr-icon-]:disabled::before, input[class^=fr-icon-]:disabled::after, input[class*=" fr-icon-"]:disabled::before, input[class*=" fr-icon-"]:disabled::after, input[class^=fr-fi-]:disabled::before, input[class^=fr-fi-]:disabled::after, input[class*=" fr-fi-"]:disabled::before, input[class*=" fr-fi-"]:disabled::after, input[type=checkbox][class^=fr-icon-]:disabled::before, input[type=checkbox][class^=fr-icon-]:disabled::after, input[type=checkbox][class*=" fr-icon-"]:disabled::before, input[type=checkbox][class*=" fr-icon-"]:disabled::after, input[type=checkbox][class^=fr-fi-]:disabled::before, input[type=checkbox][class^=fr-fi-]:disabled::after, input[type=checkbox][class*=" fr-fi-"]:disabled::before, input[type=checkbox][class*=" fr-fi-"]:disabled::after, input[type=checkbox]:disabled + label[class^=fr-icon-]::before, input[type=checkbox]:disabled + label[class^=fr-icon-]::after, input[type=checkbox]:disabled + label[class*=" fr-icon-"]::before, input[type=checkbox]:disabled + label[class*=" fr-icon-"]::after, input[type=checkbox]:disabled + label[class^=fr-fi-]::before, input[type=checkbox]:disabled + label[class^=fr-fi-]::after, input[type=checkbox]:disabled + label[class*=" fr-fi-"]::before, input[type=checkbox]:disabled + label[class*=" fr-fi-"]::after, input[type=radio][class^=fr-icon-]:disabled::before, input[type=radio][class^=fr-icon-]:disabled::after, input[type=radio][class*=" fr-icon-"]:disabled::before, input[type=radio][class*=" fr-icon-"]:disabled::after, input[type=radio][class^=fr-fi-]:disabled::before, input[type=radio][class^=fr-fi-]:disabled::after, input[type=radio][class*=" fr-fi-"]:disabled::before, input[type=radio][class*=" fr-fi-"]:disabled::after, input[type=radio]:disabled + label[class^=fr-icon-]::before, input[type=radio]:disabled + label[class^=fr-icon-]::after, input[type=radio]:disabled + label[class*=" fr-icon-"]::before, input[type=radio]:disabled + label[class*=" fr-icon-"]::after, input[type=radio]:disabled + label[class^=fr-fi-]::before, input[type=radio]:disabled + label[class^=fr-fi-]::after, input[type=radio]:disabled + label[class*=" fr-fi-"]::before, input[type=radio]:disabled + label[class*=" fr-fi-"]::after, select[class^=fr-icon-]:disabled::before, select[class^=fr-icon-]:disabled::after, select[class*=" fr-icon-"]:disabled::before, select[class*=" fr-icon-"]:disabled::after, select[class^=fr-fi-]:disabled::before, select[class^=fr-fi-]:disabled::after, select[class*=" fr-fi-"]:disabled::before, select[class*=" fr-fi-"]:disabled::after, textarea[class^=fr-icon-]:disabled::before, textarea[class^=fr-icon-]:disabled::after, textarea[class*=" fr-icon-"]:disabled::before, textarea[class*=" fr-icon-"]:disabled::after, textarea[class^=fr-fi-]:disabled::before, textarea[class^=fr-fi-]:disabled::after, textarea[class*=" fr-fi-"]:disabled::before, textarea[class*=" fr-fi-"]:disabled::after, video[class^=fr-icon-]:not([href])::before, video[class^=fr-icon-]:not([href])::after, video[class*=" fr-icon-"]:not([href])::before, video[class*=" fr-icon-"]:not([href])::after, video[class^=fr-fi-]:not([href])::before, video[class^=fr-fi-]:not([href])::after, video[class*=" fr-fi-"]:not([href])::before, video[class*=" fr-fi-"]:not([href])::after, audio[class^=fr-icon-]:not([href])::before, audio[class^=fr-icon-]:not([href])::after, audio[class*=" fr-icon-"]:not([href])::before, audio[class*=" fr-icon-"]:not([href])::after, audio[class^=fr-fi-]:not([href])::before, audio[class^=fr-fi-]:not([href])::after, audio[class*=" fr-fi-"]:not([href])::before, audio[class*=" fr-fi-"]:not([href])::after {
+    background-color: graytext;
+  }
+}
+.fr-icon--xs::before, .fr-icon--xs::after {
+  --icon-size: 0.75rem;
+}
+.fr-icon--sm::before, .fr-icon--sm::after {
+  --icon-size: 1rem;
+}
+.fr-icon--md::before, .fr-icon--md::after {
+  --icon-size: 1.5rem;
+}
+.fr-icon--lg::before, .fr-icon--lg::after {
+  --icon-size: 2rem;
+}
+
+.declencheur-centre-aide {
+  position: fixed;
+  bottom: 1.5rem;
+  right: 1.5rem;
+  border-radius: 1.5rem;
+  border: 1px solid var(--background-default-grey);
+  box-shadow: 0 0.25rem 0.75rem 0 rgba(0, 0, 18, 0.16);
+  overflow: hidden;
+  z-index: var(--centre-aide-z-index, 950);
+}
+@media (min-width: 576px) {
+  .declencheur-centre-aide {
+    bottom: 3rem;
+    right: 3rem;
+  }
+}
+
+.centre-aide {
+  background-color: var(--background-default-grey);
+  height: 100%;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: var(--centre-aide-z-index, 950);
+  overflow-y: scroll;
+}
+@media (min-width: 576px) {
+  .centre-aide {
+    border: 1px solid var(--background-default-grey);
+    border-radius: 0.5rem;
+    box-shadow: 0 0.375rem 1.125rem 0 rgba(0, 0, 18, 0.16);
+    max-width: 508px;
+    height: 578px;
+    top: unset;
+    left: unset;
+    bottom: 3rem;
+    right: 3rem;
+  }
+}
+
+.entete {
+  align-items: center;
+  background-color: var(--background-contrast-blue-france);
+  color: var(--text-title-blue-france);
+  display: flex;
+  padding: 1.5rem 2rem;
+  gap: 0.5rem;
+  position: relative;
+}
+
+.titre {
+  font-size: 1.375rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 1.75rem;
+  margin-block: 0;
+}
+@media (min-width: 576px) {
+  .titre {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+}
+
+.contenu {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 2rem 1rem;
+}
+@media (min-width: 576px) {
+  .contenu {
+    padding-inline: 2rem;
+  }
+}
+.contenu p {
+  margin-block: 1rem 0.5rem;
+}
+.contenu p:first-of-type {
+  margin-block-start: 0;
+}</style>

package/dist/composants/CentreAide.svelte.d.ts

@@ -0,0 +1,41 @@
+interface Lien {
+    texte: string;
+    href?: string;
+    preventDefault?: boolean;
+    id?: string;
+}
+interface Props {
+    nomService: string;
+    liens: string | Lien[];
+    /** Callback appelé lorsqu'un lien est cliqué */
+    onlienclique?: (detail: {
+        target: EventTarget & HTMLAnchorElement;
+    }) => void;
+}
+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 CentreAide: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, "">;
+type CentreAide = InstanceType<typeof CentreAide>;
+export default CentreAide;

package/dist/composants/FiltresCatalogue.svelte

@@ -0,0 +1,147 @@
+<svelte:options
+  customElement={{
+    tag: "lab-anssi-filtres",
+    props: {
+      filtres: { attribute: "filtres", type: "Array" },
+      horizontal: { attribute: "horizontal", type: "Boolean" },
+      valeur: { attribute: "valeur", type: "String" },
+    },
+  }}
+/>
+
+<script lang="ts">let { filtres, horizontal = false, valeur = "", onvaleurachangee } = $props();
+function handleFilterClick(nouvelleValeur) {
+	if (valeur === nouvelleValeur) return;
+	valeur = nouvelleValeur;
+	onvaleurachangee?.(nouvelleValeur);
+	$host()?.dispatchEvent(new CustomEvent("valeurachangee", {
+		detail: nouvelleValeur,
+		bubbles: true
+	}));
+}
+</script>
+
+<div class={["lab-anssi-filtres", { "lab-anssi-filtres--horizontal": horizontal }]}>
+  <div class="lab-anssi-filtres__conteneur">
+    {#each filtres as { icone, valeur: id, libelle } (id)}
+      <label class="lab-anssi-filtres__element">
+        <input
+          type="radio"
+          class="lab-anssi-filtres__input"
+          name="filtres"
+          value={id}
+          checked={id === valeur}
+          hidden
+          onchange={() => handleFilterClick(id)}
+        />
+        <span class="lab-anssi-filtres__icone">
+          <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+          {@html icone}
+        </span>
+        <span class="lab-anssi-filtres__libelle">{libelle}</span>
+      </label>
+    {/each}
+  </div>
+</div>
+
+<style>.lab-anssi-filtres {
+  box-sizing: border-box;
+  background: var(--filtres-bg, #ffffff);
+  border: 1px solid var(--border-default-grey);
+  border-radius: 4px;
+}
+.lab-anssi-filtres__conteneur {
+  display: flex;
+  flex-direction: column;
+}
+@media (min-width: 768px) {
+  .lab-anssi-filtres__conteneur {
+    flex-direction: row;
+  }
+}
+.lab-anssi-filtres__element {
+  align-items: center;
+  color: var(--text-action-high-grey);
+  cursor: pointer;
+  display: flex;
+  gap: 8px;
+  padding: 7px;
+}
+@media (min-width: 768px) {
+  .lab-anssi-filtres__element {
+    flex-direction: column;
+    flex: 1;
+    gap: 0;
+    padding: 15px 15px 23px;
+  }
+}
+.lab-anssi-filtres__element:not(:last-child) {
+  border-bottom: 1px solid var(--border-default-grey);
+}
+@media (min-width: 768px) {
+  .lab-anssi-filtres__element:not(:last-child) {
+    border-bottom: none;
+    border-right: 1px solid var(--border-default-grey);
+  }
+}
+.lab-anssi-filtres__element:hover {
+  background-color: var(--background-default-grey-hover);
+}
+.lab-anssi-filtres__element:active {
+  background-color: var(--background-default-grey-active);
+}
+.lab-anssi-filtres__element:has(input:checked) {
+  background-color: var(--background-action-low-blue-france);
+  color: var(--text-action-high-blue-france);
+}
+.lab-anssi-filtres__element:has(input:checked):hover {
+  background-color: var(--background-action-low-blue-france-hover);
+}
+.lab-anssi-filtres__element:has(input:checked):active {
+  background-color: var(--background-action-low-blue-france-active);
+}
+.lab-anssi-filtres__icone {
+  flex-shrink: 0;
+  height: 42px;
+  width: 42px;
+}
+@media (min-width: 768px) {
+  .lab-anssi-filtres__icone {
+    height: 56px;
+    margin: 0 auto;
+    width: 56px;
+  }
+}
+.lab-anssi-filtres__icone :global(svg) {
+  display: block;
+  height: auto;
+  max-width: 100%;
+}
+.lab-anssi-filtres__libelle {
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 24px;
+}
+@media (min-width: 768px) {
+  .lab-anssi-filtres__libelle {
+    text-align: center;
+  }
+}
+@media (min-width: 768px) {
+  .lab-anssi-filtres--horizontal .lab-anssi-filtres__element {
+    flex-direction: row;
+    gap: 8px;
+    justify-content: center;
+    padding-block: 3px;
+  }
+  .lab-anssi-filtres--horizontal .lab-anssi-filtres__icone {
+    margin: 0;
+    height: 42px;
+    width: 42px;
+  }
+  .lab-anssi-filtres--horizontal .lab-anssi-filtres__libelle {
+    font-size: 14px;
+    gap: 8px;
+    text-align: left;
+  }
+}</style>

package/dist/composants/FiltresCatalogue.svelte.d.ts

@@ -0,0 +1,15 @@
+type Filtre = {
+    icone: string;
+    libelle: string;
+    valeur: string;
+};
+interface Props {
+    filtres: Filtre[];
+    horizontal?: boolean;
+    valeur?: string;
+    /** Callback appelé lors du changement de filtre */
+    onvaleurachangee?: (valeur: string) => void;
+}
+declare const FiltresCatalogue: import("svelte").Component<Props, {}, "">;
+type FiltresCatalogue = ReturnType<typeof FiltresCatalogue>;
+export default FiltresCatalogue;

package/dist/composants/Icone.svelte

@@ -0,0 +1,42 @@
+<svelte:options
+  customElement={{
+    tag: "lab-anssi-icone",
+    props: {
+      nom: { reflect: false, type: "String", attribute: "nom" },
+      taille: { reflect: false, type: "String", attribute: "taille" },
+    },
+    extend: withIconsStyleSheet,
+  }}
+/>
+
+<script lang="ts">import { withIconsStyleSheet, setIconClass } from "../utilitaires";
+let { nom, taille = undefined } = $props();
+let iconClass = $derived(nom && setIconClass(nom));
+</script>
+
+<span class={["icone", taille, iconClass]}></span>
+
+<style>.icone {
+  line-height: var(--icon-size, 1rem);
+  height: var(--icon-size, 1rem);
+}
+.icone:before {
+  content: "";
+  background-color: currentColor;
+  display: inline-block;
+  flex: 0 0 auto;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  vertical-align: calc((0.75em - var(--icon-size, 1rem)) * 0.5);
+  width: var(--icon-size, 1rem);
+  height: var(--icon-size, 1rem);
+}
+.icone.sm {
+  --icon-size: 1rem;
+}
+.icone.md {
+  --icon-size: 1.5rem;
+}
+.icone.lg {
+  --icon-size: 2rem;
+}</style>

package/dist/composants/Icone.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    nom: string;
+    taille?: "sm" | "md" | "lg" | undefined;
+}
+declare const Icone: import("svelte").Component<Props, {}, "">;
+type Icone = ReturnType<typeof Icone>;
+export default Icone;