@lab-anssi/ui-kit 1.61.3 → 1.62.0

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

@@ -0,0 +1,51 @@
+type Option = {
+    id: string;
+    value: string;
+    label: string;
+};
+interface Props {
+    /** Attribut id de la liste déroulante */
+    id: string;
+    /** Libellé de la liste déroulante */
+    label: string;
+    /** Options de la liste déroulante */
+    options?: Option[];
+    /** Texte additionnel sous le label */
+    hint?: string;
+    /** Texte avant sélection d'une option */
+    placeholder?: string;
+    /** Désactive la liste déroulante */
+    disabled?: boolean;
+    /** Valeur des checkboxes */
+    values?: string[];
+    /** Statut du message */
+    status?: "default" | "valid" | "error";
+    /** Texte du message d'erreur */
+    errorMessage?: string;
+    /** Texte du message de succès */
+    validMessage?: string;
+    /** Callback appelé lors du changement de valeur (déprécié, utiliser onvalueschanged) */
+    onvaluechanged?: (values: string[]) => void;
+    /** Callback appelé lors du changement des valeurs sélectionnées */
+    onvalueschanged?: (values: string[]) => 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;
+}
+declare const MultiSelect: $$__sveltets_2_IsomorphicComponent<Props, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    'messages-group': {};
+}, {}, "">;
+type MultiSelect = InstanceType<typeof MultiSelect>;
+export default MultiSelect;

package/dist/composants/Reactions.svelte

@@ -0,0 +1,360 @@
+<svelte:options
+  customElement={{
+    tag: "lab-anssi-reactions",
+    props: {
+      reactions: { attribute: "reactions", type: "Array" },
+      variant: { attribute: "variant", type: "String" },
+      tooltipTexte: { attribute: "tooltip-texte", type: "String" },
+      tooltipId: { attribute: "tooltip-id", type: "String" },
+    },
+  }}
+/>
+
+<script lang="ts">let { reactions = [], variant = "tertiaire-sans-bordure", tooltipTexte, tooltipId, onajouteReaction, onsupprimeReaction } = $props();
+let tooltipShown = $state(false);
+let popoverShown = $state(false);
+let popoverElement = null;
+let tooltipElement = $state(null);
+let triggerButton = null;
+/**
+* Positionne dynamiquement le popover au-dessus du bouton déclencheur.
+*
+* @param {ToggleEvent} event - L'événement de bascule du popover.
+*/
+function handlePopover(event) {
+	if (!popoverElement) return;
+	const GAP = 4;
+	const popoverId = popoverElement.getAttribute("id");
+	if (!popoverId) return;
+	const parent = popoverElement.closest(".lab-anssi-reactions");
+	const button = parent?.querySelector(`[popovertarget="${popoverId}"]`);
+	if (!button) return;
+	if (event.newState === "open") {
+		popoverShown = true;
+		// Récupération des dimensions
+		const buttonRect = button.getBoundingClientRect();
+		const popoverRect = popoverElement.getBoundingClientRect();
+		const viewportHeight = window.innerHeight;
+		// Marges de sécurité
+		const VERTICAL_MARGIN = 8;
+		// Position par défaut : au-dessus et aligné à gauche du bouton
+		let top = buttonRect.top - popoverRect.height - GAP;
+		let left = buttonRect.left;
+		// Ajustement vertical : si pas assez de place en haut, placer en bas
+		if (top < VERTICAL_MARGIN) {
+			top = buttonRect.bottom + GAP;
+			if (top + popoverRect.height > viewportHeight - VERTICAL_MARGIN) {
+				top = Math.max(VERTICAL_MARGIN, (viewportHeight - popoverRect.height) / 2);
+			}
+		}
+		// Application des positions finales
+		popoverElement.style.top = `${top}px`;
+		popoverElement.style.left = `${left}px`;
+		popoverElement.style.opacity = "1";
+	} else {
+		popoverShown = false;
+		popoverElement.style.opacity = "0";
+	}
+}
+/**
+* Gère la position du popover lors du défilement de la page.
+* Recalcule et ajuste automatiquement la position verticale du popover
+* pour qu'il reste visible dans la fenêtre d'affichage.
+* Masque également le tooltip si celui-ci est affiché.
+*
+* @returns {void}
+*/
+function handlePopoverScroll() {
+	tooltipShown = false;
+	if (!popoverShown || !popoverElement || !triggerButton) return;
+	const GAP = 4;
+	// Récupération des nouvelles dimensions après scroll
+	const buttonRect = triggerButton.getBoundingClientRect();
+	const popoverRect = popoverElement.getBoundingClientRect();
+	const viewportHeight = window.innerHeight;
+	const VERTICAL_MARGIN = 8;
+	// Recalcul de la position verticale
+	let newTop = buttonRect.top - popoverRect.height - GAP;
+	// Ajustement vertical si nécessaire
+	if (newTop < VERTICAL_MARGIN) {
+		newTop = buttonRect.bottom + GAP;
+		if (newTop + popoverRect.height > viewportHeight - VERTICAL_MARGIN) {
+			newTop = Math.max(VERTICAL_MARGIN, (viewportHeight - popoverRect.height) / 2);
+		}
+	}
+	// Application de la nouvelle position
+	popoverElement.style.top = `${newTop}px`;
+}
+/**
+* Gère le clic sur un bouton de réaction.
+*
+* @param {MouseEvent} event - L'événement de clic provenant du bouton de réaction.
+* @fires supprimeReaction - Émis lorsque la réaction est désactivée (détail : bouton.id).
+* @fires ajouteReaction - Émis lorsque la réaction est activée (détail : bouton.id).
+*/
+function gestionClicReaction(event) {
+	const bouton = event.currentTarget;
+	const id = bouton.id;
+	// Trouve la réaction et récupère son état actuel
+	const reaction = reactions.find((reaction) => reaction.id === id);
+	const estActif = !!reaction?.actif;
+	const nouveauActif = !estActif;
+	// Met à jour le tableau de façon réactive
+	reactions = reactions.map((reaction) => reaction.id === id ? {
+		...reaction,
+		actif: nouveauActif
+	} : reaction);
+	// Émet un événement en fonction de l'état de la réaction
+	if (estActif) {
+		onsupprimeReaction?.(id);
+		$host()?.dispatchEvent(new CustomEvent("supprimeReaction", {
+			detail: id,
+			bubbles: true
+		}));
+	} else {
+		onajouteReaction?.(id);
+		$host()?.dispatchEvent(new CustomEvent("ajouteReaction", {
+			detail: id,
+			bubbles: true
+		}));
+	}
+	popoverElement?.hidePopover();
+}
+/**
+* Gère l'affichage et le positionnement d'un tooltip lors d'un survol de souris.
+*
+* @param {MouseEvent} event - Événement souris du gestionnaire de survol
+* @returns {void}
+*/
+function handleTooltip() {
+	if (!tooltipElement || !triggerButton || popoverShown) return;
+	const buttonRect = triggerButton.getBoundingClientRect();
+	const buttonRectCenter = buttonRect.left + buttonRect.width * .5;
+	tooltipElement.style.display = "block";
+	const tooltipRect = tooltipElement.getBoundingClientRect();
+	// Dimensions de la fenêtre
+	const viewportWidth = window.innerWidth;
+	// Position par défaut : au-dessus et centré
+	let top = buttonRect.top - tooltipRect.height;
+	let left = buttonRect.left + buttonRect.width / 2 - tooltipRect.width / 2;
+	// Ajustement horizontal : éviter que le tooltip sorte des côtés
+	const HORIZONTAL_MARGIN = 8;
+	if (left < HORIZONTAL_MARGIN) {
+		left = HORIZONTAL_MARGIN;
+	} else if (left + tooltipRect.width > viewportWidth - HORIZONTAL_MARGIN) {
+		left = viewportWidth - tooltipRect.width - HORIZONTAL_MARGIN;
+	}
+	// Ajustement vertical : si pas assez de place en haut, placer en bas
+	const VERTICAL_MARGIN = 8;
+	if (top < VERTICAL_MARGIN) {
+		top = buttonRect.bottom;
+		// Ajouter une classe pour inverser la flèche si nécessaire
+		tooltipElement.classList.remove("fr-placement--top");
+		tooltipElement.classList.add("fr-placement--bottom");
+	} else {
+		tooltipElement.classList.remove("fr-placement--bottom");
+		tooltipElement.classList.add("fr-placement--top");
+	}
+	// Application des positions finales
+	tooltipElement.style.top = `${top}px`;
+	tooltipElement.style.left = `${left}px`;
+	// Calcul de la position de la flèche en fonction du décalage horizontal
+	const tooltipCenter = left + tooltipRect.width / 2;
+	const arrowPosition = buttonRectCenter - tooltipCenter;
+	// Limiter la position de la flèche dans les limites du tooltip
+	const maxArrowOffset = tooltipRect.width / 2 - 16;
+	const clampedArrowPosition = Math.max(-maxArrowOffset, Math.min(maxArrowOffset, arrowPosition));
+	tooltipElement.style.setProperty("--arrow-x", `${clampedArrowPosition.toFixed(2)}px`);
+	tooltipShown = true;
+}
+</script>
+
+<svelte:window onscroll={handlePopoverScroll} />
+
+{#snippet boutonReaction({ id, emoji, compteur, actif = false }: Reaction)}
+  <button
+    {id}
+    type="button"
+    class="lab-anssi-reactions__bouton"
+    onclick={gestionClicReaction}
+    aria-pressed={actif}
+  >
+    {#if !compteur}
+      <span class="lab-anssi-reactions__label">Réagir avec l'emoji</span>
+    {/if}
+
+    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+    <span class="lab-anssi-reactions__emoji">{@html emoji}</span>
+
+    {#if compteur}
+      <span class="lab-anssi-reactions__compteur">{compteur}</span>
+    {/if}
+  </button>
+{/snippet}
+
+<div class={["lab-anssi-reactions", `lab-anssi-reactions--${variant}`]}>
+  <div class="lab-anssi-reactions__conteneur">
+    <button
+      type="button"
+      class="lab-anssi-reactions__declencheur"
+      popovertarget="popoverReactions"
+      aria-describedby={tooltipId}
+      onclick={() => (tooltipShown = false)}
+      onblur={() => (tooltipShown = false)}
+      onmouseout={() => (tooltipShown = false)}
+      onfocus={handleTooltip}
+      onmouseover={handleTooltip}
+      bind:this={triggerButton}
+    >
+      <span class="lab-anssi-reactions__icone">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"
+          ><path
+            d="M15 18H18V15H20V18H23V20H20V23H18V20H15V18M12 17.5C9.67 17.5 7.69 16.04 6.89 14H15.69C14.5 14.78 13.62 15.97 13.23 17.36C12.83 17.45 12.42 17.5 12 17.5M8.5 11C7.67 11 7 10.33 7 9.5C7 8.67 7.67 8 8.5 8C9.33 8 10 8.67 10 9.5C10 10.33 9.33 11 8.5 11M15.5 11C14.67 11 14 10.33 14 9.5C14 8.67 14.67 8 15.5 8C16.33 8 17 8.67 17 9.5C17 10.33 16.33 11 15.5 11M12 20L13.07 19.93C13.18 20.61 13.4 21.26 13.72 21.85C13.16 21.95 12.58 22 12 22C6.47 22 2 17.5 2 12C2 6.5 6.47 2 12 2C17.5 2 22 6.5 22 12C22 12.59 21.95 13.16 21.85 13.72C21.26 13.4 20.62 13.18 19.93 13.07L20 12C20 7.58 16.42 4 12 4C7.58 4 4 7.58 4 12C4 16.42 7.58 20 12 20Z"
+          /></svg
+        >
+      </span>
+      <span class="lab-anssi-reactions__action">Ajouter une réaction</span>
+    </button>
+    {#if tooltipTexte}
+      <span
+        class="fr-tooltip fr-placement fr-placement--start"
+        class:fr-tooltip--shown={tooltipShown}
+        id={tooltipId}
+        role="tooltip"
+        bind:this={tooltipElement}
+      >
+        {tooltipTexte}
+      </span>
+    {/if}
+
+    {#each reactions as reaction (reaction.id)}
+      {#if reaction.compteur}
+        {@render boutonReaction(reaction)}
+      {/if}
+    {/each}
+  </div>
+
+  <div
+    id="popoverReactions"
+    class="lab-anssi-reactions__popover"
+    popover
+    ontoggle={handlePopover}
+    bind:this={popoverElement}
+  >
+    <div class="lab-anssi-reactions__conteneur">
+      {#each reactions as { id, emoji, actif } (id)}
+        {@render boutonReaction({ id, emoji, actif })}
+      {/each}
+    </div>
+  </div>
+</div>
+
+<style>/*!
+ * DSFR v1.14.4 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
+ */.fr-tooltip{--arrow-x:0;background-position:calc(50% + var(--arrow-x)) calc(100% - .5rem),calc(50% + var(--arrow-x)) calc(100% - .375rem),50% calc(100% - .75rem),50% calc(100% - .75rem);background-repeat:no-repeat;background-size:.5rem .375rem,.5rem .375rem,100% 1px,100% calc(100% - .75rem);color:var(--text-default-grey);display:block;font-size:.75rem;line-height:1.25rem;max-width:min(24rem,calc(66.66667vw - 1.33333rem));opacity:1;padding:.5rem .5rem 1.25rem;text-align:left;transition:opacity 0s .15s,visibility 0s .15s;visibility:visible;white-space:normal}.fr-tooltip:not(.fr-tooltip--shown){display:none;opacity:0}.fr-tooltip--hidding{opacity:0}.fr-tooltip.fr-placement--bottom{background-position-y:.5rem,.375rem,.75rem,.75rem;padding-bottom:.5rem;padding-top:1.25rem}.fr-tooltip.fr-placement{background-image:linear-gradient(90deg,var(--background-overlap-grey),var(--background-overlap-grey));filter:drop-shadow(var(--overlap-shadow));z-index:calc(var(--ground) + 1000)}@supports (background:conic-gradient(white,black)){.fr-tooltip.fr-placement--top{background-image:conic-gradient(from -33.69deg at 50% 100%,transparent 0deg,var(--background-overlap-grey) 0deg,var(--background-overlap-grey) 67.38deg,transparent 67.38deg),conic-gradient(from -33.69deg at 50% 100%,transparent 0deg,var(--border-default-grey) 0deg,var(--border-default-grey) 67.38deg,transparent 67.38deg),linear-gradient(90deg,var(--border-default-grey),var(--border-default-grey)),linear-gradient(90deg,var(--background-overlap-grey),var(--background-overlap-grey))}.fr-tooltip.fr-placement--bottom{background-image:conic-gradient(from 146.31deg at 50% 0,transparent 0deg,var(--background-overlap-grey) 0deg,var(--background-overlap-grey) 67.38deg,transparent 67.38deg),conic-gradient(from 146.31deg at 50% 0,transparent 0deg,var(--border-default-grey) 0deg,var(--border-default-grey) 67.38deg,transparent 67.38deg),linear-gradient(90deg,var(--border-default-grey),var(--border-default-grey)),linear-gradient(90deg,var(--background-overlap-grey),var(--background-overlap-grey))}}@media (min-width:36em){
+  /*! media sm */}@media (min-width:48em){
+  /*! media md */}@media (min-width:62em){
+  /*! media lg */}@media (min-width:78em){
+  /*! media xl */}@media (-ms-high-contrast:active),(forced-colors:active){.fr-tooltip{background:canvas;outline:1px solid}.fr-tooltip.fr-placement{padding:.5rem}}.fr-placement {
+  position: fixed;
+  width: max-content;
+}
+
+.lab-anssi-reactions {
+  box-sizing: border-box;
+}
+.lab-anssi-reactions__conteneur {
+  display: flex;
+  align-items: center;
+  gap: var(--gap, 4px);
+}
+.lab-anssi-reactions__declencheur, .lab-anssi-reactions__bouton {
+  --active-tint: var(--active);
+  --hover-tint: var(--hover);
+  appearance: none;
+  background-color: var(--background-color, transparent);
+  border: 1px solid var(--border-color, transparent);
+  cursor: pointer;
+  font: inherit;
+}
+.lab-anssi-reactions__declencheur:hover, .lab-anssi-reactions__bouton:hover {
+  --background-color: var(--hover-tint);
+}
+.lab-anssi-reactions__declencheur:active, .lab-anssi-reactions__bouton:active {
+  --background-color: var(--active-tint);
+}
+.lab-anssi-reactions__declencheur {
+  color: #666666;
+  padding: 4px;
+  position: relative;
+}
+.lab-anssi-reactions__icone svg {
+  fill: currentColor;
+  display: block;
+  height: 24px;
+  width: 24px;
+}
+.lab-anssi-reactions__action {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  padding: 0;
+  width: 1px;
+}
+.lab-anssi-reactions__bouton {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 24px;
+  padding: 4px 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.lab-anssi-reactions__bouton[aria-pressed=true] {
+  background-color: var(--background-action-low-blue-france);
+  color: var(--text-action-high-blue-france);
+}
+.lab-anssi-reactions__bouton[aria-pressed=true]:hover {
+  background-color: var(--background-action-low-blue-france-hover);
+}
+.lab-anssi-reactions__bouton[aria-pressed=true]:active {
+  background-color: var(--background-action-low-blue-france-active);
+}
+.lab-anssi-reactions__label {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  padding: 0;
+  width: 1px;
+}
+.lab-anssi-reactions__popover:popover-open {
+  border-width: 0;
+  background-color: #fff;
+  padding: 6px;
+  border-radius: 4px;
+  box-shadow: var(--raised-shadow);
+  margin: 0;
+  opacity: 0;
+}
+.lab-anssi-reactions__popover .lab-anssi-reactions__bouton {
+  font-size: 18px;
+}
+.lab-anssi-reactions--tertiaire > .lab-anssi-reactions__conteneur {
+  --gap: 8px;
+}
+.lab-anssi-reactions--tertiaire > .lab-anssi-reactions__conteneur .lab-anssi-reactions__declencheur, .lab-anssi-reactions--tertiaire > .lab-anssi-reactions__conteneur .lab-anssi-reactions__bouton {
+  --border-color: var(--border-default-grey);
+}
+.lab-anssi-reactions--tertiaire > .lab-anssi-reactions__conteneur .lab-anssi-reactions__declencheur[aria-pressed=true], .lab-anssi-reactions--tertiaire > .lab-anssi-reactions__conteneur .lab-anssi-reactions__bouton[aria-pressed=true] {
+  --border-color: var(--border-action-high-blue-france);
+}
+
+.fr-tooltip {
+  pointer-events: none;
+}</style>

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

@@ -0,0 +1,23 @@
+type Reaction = {
+    id: string;
+    emoji: string;
+    compteur?: number | null;
+    actif?: boolean;
+};
+interface Props {
+    /** Liste des réactions */
+    reactions?: Reaction[];
+    /** Style des boutons de réaction<br>Valeurs :<br>- tertiaire : boutons avec bordure<br>- tertiaire-sans-bordure : boutons sans bordure */
+    variant?: "tertiaire" | "tertiaire-sans-bordure";
+    /** Contenu de l'infobulle */
+    tooltipTexte?: string;
+    /** Identifiant de l'infobulle */
+    tooltipId?: string;
+    /** Callback appelé lorsqu'une réaction est ajoutée */
+    onajouteReaction?: (id: string) => void;
+    /** Callback appelé lorsqu'une réaction est supprimée */
+    onsupprimeReaction?: (id: string) => void;
+}
+declare const Reactions: import("svelte").Component<Props, {}, "">;
+type Reactions = ReturnType<typeof Reactions>;
+export default Reactions;

package/dist/composants/ResumePssi.svelte

@@ -0,0 +1,92 @@
+<svelte:options customElement="lab-anssi-resume-pssi" />
+
+<script lang="ts">let { nomService } = $props();
+</script>
+
+<p>
+  {nomService} est hébergé chez
+  <a href="https://www.clever-cloud.com/" rel="noopener" target="_blank"> Clever Cloud </a>
+  prenant appui sur
+  <a href="https://www.cloud-temple.com/notre-approche-secnumcloud/" rel="noopener" target="_blank">
+    Cloud Temple
+  </a>
+  qualifié SecNumCloud.
+</p>
+<p>
+  L'ANSSI soumet {nomService} à un rythme d'homologation soutenu dans le cadre d'une démarche de renforcement
+  continu de la sécurité du service numérique, dont plusieurs éléments clés mais non exhaustifs sont résumés
+  ci-dessous.
+</p>
+<h2>Gouvernance</h2>
+<p>
+  Nous auditons régulièrement nos fournisseurs en termes de configuration et d'architecture et
+  maintenons un contact étroit avec eux pour améliorer en continu leur sécurité et donc celle de vos
+  données.
+</p>
+<p>
+  Nous auditons également régulièrement nos services (audits de code et tests d'intrusion) par des
+  prestataires qualifiés (PASSI).
+</p>
+<p>
+  Nous réalisons et tenons à jour une analyse de risques de nos services en prenant appui sur la
+  méthode EBIOS Risk Manager.
+</p>
+<p>
+  Nous maintenons une classification de l'ensemble des données que nous conservons, selon leur
+  sensibilité, afin d'assurer une protection adaptée.
+</p>
+<p>
+  Nous maintenons un dossier d’architecture technique détaillé de nos services et de leurs
+  interconnexions.
+</p>
+<p>
+  Les membres de nos équipes sont sensibilisés aux bonnes pratiques de sécurité, quels que soient
+  les profils (technique, produit, design, déploiement), au travers de formations en continu ou de
+  la réalisation de campagnes anti-phishing.
+</p>
+<h2>Protection</h2>
+<p>Vos données sont protégées par un chiffrement multi-couches, système et applicatif.</p>
+<p>
+  Chaque membre de notre équipe est équipé de clés d'authentification matérielle et
+  l’authentification multi-facteur est généralisée à tous les accès, permettant de mettre en œuvre
+  une authentification forte sur l'ensemble de nos services.
+</p>
+<p>
+  Nous limitons les accès au strict nécessaire et cloisonnons de façon rigoureuse les activités
+  d'administration, en particulier au niveau technique&nbsp;: utilisation de comptes dédiés et
+  séparés selon leurs usages&nbsp;; postes d'administration durcis et réservés à ce seul
+  usage&nbsp;; clés d’authentification nominatives.
+</p>
+<p>Nous n’installons et n’utilisons que les applications strictement nécessaires.</p>
+<p>Les droits des administrateurs techniques et métiers sont restreints au strict nécessaire.</p>
+<h2>Défense</h2>
+<p>
+  La sécurité de nos services est surveillée en continu : détection de défiguration, scans
+  automatisés, veille active sur les risques émergents.
+</p>
+<p>
+  L'ensemble des actions est historisé de façon nominative pour simplifier l'analyse en cas
+  d'incident.
+</p>
+<p>
+  Nous mettons en œuvre et testons régulièrement notre procédure de gestion des incidents de
+  sécurité.
+</p>
+<h2>Résilience</h2>
+<p>
+  Vos données sont sauvegardées de façon sécurisée et pérenne sur un environnement totalement séparé
+  de la plate-forme de production.
+</p>
+<p>
+  En cas d'incident majeur, nous sommes capables de reconstruire totalement l'application en
+  production dans un délai très court.
+</p>
+
+<style>a {
+  display: inline-flex;
+  color: #000091;
+  border: none;
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  text-decoration-thickness: 1px;
+}</style>

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

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

package/dist/composants/Tag.svelte

@@ -0,0 +1,113 @@
+<svelte:options
+  customElement={{
+    tag: "lab-anssi-tag",
+    props: {
+      couleurFond: { reflect: false, type: "String", attribute: "couleur-fond" },
+      couleurTexte: { reflect: false, type: "String", attribute: "couleur-texte" },
+      label: { reflect: false, type: "String", attribute: "label" },
+      taille: { reflect: false, type: "String", attribute: "taille" },
+      type: { reflect: false, type: "String", attribute: "type" },
+      presse: { reflect: false, type: "Boolean", attribute: "presse" },
+    },
+  }}
+/>
+
+<script lang="ts">let { label = undefined, couleurTexte, couleurFond, taille = "sm", type = "defaut", presse = false } = $props();
+let selectionne = $derived(presse);
+const bascule = () => {
+	selectionne = !selectionne;
+};
+</script>
+
+{#if type === "defaut"}
+  <span class="tag {taille}" style:background={couleurFond} style:color={couleurTexte}>
+    <slot>{label}</slot>
+  </span>
+{:else}
+  <button
+    class="tag {taille}"
+    aria-pressed={selectionne}
+    style:background={couleurFond}
+    style:color={couleurTexte}
+    onclick={bascule}
+  >
+    <slot>{label}</slot>
+  </button>
+{/if}
+
+<style>.tag {
+  color: var(--tag-couleur-texte);
+  background-color: var(--tag-couleur-fond);
+  font-weight: 400;
+  display: inline-block;
+  width: fit-content;
+  white-space: nowrap;
+  max-width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.tag.sm {
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  padding: 2px 8px;
+  border-radius: 12px;
+}
+.tag.md {
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  padding: 4px 12px;
+  border-radius: 16px;
+}
+.tag:focus-visible {
+  outline: 2px solid #0a76f6;
+  outline-offset: 2px;
+}
+
+button.tag {
+  color: var(--tag-selectionnable-couleur-texte);
+  background-color: var(--tag-selectionnable-couleur-fond);
+  border: none;
+  display: inline-flex;
+  position: relative;
+  overflow: visible;
+  text-wrap: auto;
+  text-align: left;
+  cursor: pointer;
+  font-family: inherit;
+}
+button.tag:hover {
+  background-color: var(--tag-selectionnable-couleur-fond-survol);
+}
+button.tag:active {
+  background-color: var(--tag-selectionnable-couleur-fond-clique);
+}
+button.tag[aria-pressed=true] {
+  color: var(--tag-selectionne-couleur-texte);
+  background-color: transparent;
+  background-image: radial-gradient(circle at 100% 0.25rem, transparent 0.578125rem, var(--tag-selectionne-couleur-fond) 0.625rem);
+}
+button.tag[aria-pressed=true]:hover {
+  background-image: radial-gradient(circle at 100% 0.25rem, transparent 0.578125rem, var(--tag-selectionne-couleur-fond-survol) 0.625rem);
+}
+button.tag[aria-pressed=true]:active {
+  background-image: radial-gradient(circle at 100% 0.25rem, transparent 0.578125rem, var(--tag-selectionne-couleur-fond-clique) 0.625rem);
+}
+button.tag[aria-pressed=true]::after {
+  -webkit-mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/system/checkbox-circle-line.svg");
+  mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/system/checkbox-circle-line.svg");
+  background-color: var(--tag-selectionnable-couleur-texte);
+  --icon-size: 1rem;
+  content: "";
+  display: inline-block;
+  flex: 0 0 auto;
+  height: var(--icon-size);
+  margin: -0.5rem;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  position: absolute;
+  right: 0;
+  top: 4px;
+  vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
+  width: var(--icon-size);
+}</style>

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

@@ -0,0 +1,35 @@
+interface Props {
+    label?: string;
+    couleurTexte: string | undefined;
+    couleurFond: string | undefined;
+    taille?: "sm" | "md";
+    type?: "defaut" | "selectionnable";
+    presse?: 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 Tag: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, "">;
+type Tag = InstanceType<typeof Tag>;
+export default Tag;