@lab-anssi/ui-kit 1.25.0 → 1.25.2

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

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

package/dist/lab/Lien.svelte

@@ -1,243 +0,0 @@
-<svelte:options
-  customElement={{
-    tag: "lab-anssi-lien",
-    props: {
-      titre: { reflect: false, type: "String", attribute: "titre" },
-      href: { reflect: false, type: "String", attribute: "href" },
-      variante: { reflect: false, type: "String", attribute: "variante" },
-      taille: { reflect: false, type: "String", attribute: "taille" },
-      icone: { reflect: false, type: "String", attribute: "icone" },
-      apparence: { reflect: false, type: "String", attribute: "apparence" },
-      cible: { reflect: false, type: "String", attribute: "cible" },
-      positionIcone: { reflect: false, type: "String", attribute: "position-icone" },
-      actif: { reflect: false, type: "Boolean", attribute: "actif" },
-      largeurMaximale: { reflect: false, type: "Boolean", attribute: "largeur-maximale" },
-    },
-  }}
-/>
-
-<script lang="ts">import Icone from "./Icone.svelte";
-let {
-  titre,
-  href,
-  variante,
-  taille,
-  icone = void 0,
-  apparence = "lien",
-  cible = void 0,
-  positionIcone = "sans",
-  actif = true,
-  largeurMaximale = false
-} = $props();
-</script>
-
-<a
-  class={`${variante} ${taille} icone-${positionIcone} ${apparence}`}
-  class:largeur-maximale={largeurMaximale}
-  {href}
-  target={cible}
-  title={positionIcone === "seule" ? titre : ""}
-  aria-disabled={!actif}
->
-  {#if (positionIcone === "gauche" || positionIcone === "seule") && icone}
-    <Icone nom={icone} taille={taille === "lg" ? "md" : "sm"} />
-  {/if}
-  {#if positionIcone !== "seule"}
-    <span>{titre}</span>
-  {/if}
-  {#if positionIcone === "droite" && icone}
-    <Icone nom={icone} taille={taille === "lg" ? "md" : "sm"} />
-  {/if}
-  {#if cible === "_blank"}
-    <Icone nom="external-link-line" />
-  {/if}
-</a>
-
-<style>.bouton {
-  text-decoration: none;
-}
-
-.lien-texte {
-  font-family: Marianne, arial, sans-serif;
-  color: inherit;
-  display: inline-flex;
-  gap: 2px;
-  align-items: center;
-  width: fit-content;
-  text-decoration: none;
-  position: relative;
-}
-.lien-texte:before {
-  content: "";
-  position: absolute;
-  bottom: 0.2em;
-  left: 0;
-  width: 100%;
-  height: 1px;
-  background-color: currentColor;
-}
-.lien-texte:hover:before {
-  bottom: calc(0.2em - 1px);
-  height: 2px;
-}
-
-.lien {
-  font-family: Marianne, arial, sans-serif;
-  color: var(--couleur-lien);
-  display: inline-flex;
-  gap: 8px;
-  align-items: center;
-  width: fit-content;
-  text-decoration: none;
-  position: relative;
-}
-.lien.sm {
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-}
-.lien.md {
-  font-size: 1rem;
-  line-height: 1.5rem;
-}
-.lien.lg {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-}
-.lien:before {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 1px;
-  background-color: var(--couleur-lien);
-}
-.lien:hover:before {
-  bottom: -1px;
-  height: 2px;
-}
-.lien:active {
-  background: rgba(0, 0, 0, 0.08);
-}
-.lien:focus-visible {
-  outline: 2px solid #0a76f6;
-  outline-offset: 2px;
-}
-
-.bouton {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-family: Marianne, arial, sans-serif;
-  cursor: pointer;
-  justify-content: center;
-  text-align: center;
-  font-style: normal;
-  font-weight: 500;
-}
-.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;
-}
-.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/lab/Lien.svelte.d.ts

@@ -1,15 +0,0 @@
-interface Props {
-    titre: string;
-    href: string;
-    variante: "primaire" | "tertiaire" | "tertiaire-sans-bordure";
-    taille: "sm" | "md" | "lg";
-    icone?: string | undefined;
-    apparence?: "lien" | "bouton" | "lien-texte";
-    cible?: string | undefined;
-    positionIcone?: "sans" | "seule" | "droite" | "gauche";
-    actif?: boolean;
-    largeurMaximale?: boolean;
-}
-declare const Lien: import("svelte").Component<Props, {}, "">;
-type Lien = ReturnType<typeof Lien>;
-export default Lien;

package/dist/lab/ResumePssi.svelte

@@ -1,92 +0,0 @@
-<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/lab/ResumePssi.svelte.d.ts

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

package/dist/lab/Tag.svelte

@@ -1,120 +0,0 @@
-<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,
-  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}>
-    {label}
-  </span>
-{:else}
-  <button
-    class="tag {taille}"
-    aria-pressed={selectionne}
-    style:background={couleurFond}
-    style:color={couleurTexte}
-    onclick={bascule}
-  >
-    {label}
-  </button>
-{/if}
-
-<style>.tag {
-  color: var(--tag-couleur-texte);
-  background-color: var(--tag-couleur-fond);
-  font-family: Marianne;
-  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;
-}
-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/lab/Tag.svelte.d.ts

@@ -1,11 +0,0 @@
-interface Props {
-    label: string;
-    couleurTexte: string | undefined;
-    couleurFond: string | undefined;
-    taille?: "sm" | "md";
-    type?: "defaut" | "selectionnable";
-    presse?: boolean;
-}
-declare const Tag: import("svelte").Component<Props, {}, "">;
-type Tag = ReturnType<typeof Tag>;
-export default Tag;

package/dist/lab/apparence-bouton.scss

@@ -1,152 +0,0 @@
-.bouton {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-family: Marianne, arial, sans-serif;
-  cursor: pointer;
-  justify-content: center;
-  text-align: center;
-
-  font-style: normal;
-  font-weight: 500;
-
-  &.largeur-maximale {
-    width: 100%;
-    box-sizing: border-box;
-  }
-
-  &:focus-visible {
-    outline: 2px solid #0a76f6;
-    outline-offset: 2px;
-  }
-
-  &.sm {
-    padding: 4px 12px;
-    font-size: 0.875rem;
-    line-height: 1.5rem;
-
-    &.icone-droite {
-      padding-right: 8px;
-    }
-
-    &.icone-gauche {
-      padding-left: 8px;
-    }
-
-    &.icone-seule {
-      padding: 8px;
-    }
-  }
-
-  &.md {
-    padding: 8px 16px;
-    font-size: 1rem;
-    line-height: 1.5rem;
-
-    &.icone-droite {
-      padding-right: 12px;
-    }
-
-    &.icone-gauche {
-      padding-left: 12px;
-    }
-
-    &.icone-seule {
-      padding: 8px;
-    }
-  }
-
-  &.lg {
-    padding: 10px 24px;
-    font-size: 1.125rem;
-    line-height: 1.75rem;
-
-    &.icone-droite {
-      padding-right: 18px;
-    }
-
-    &.icone-gauche {
-      padding-left: 18px;
-    }
-
-    &.icone-seule {
-      padding: 12px;
-    }
-  }
-
-  &:disabled,
-  &[aria-disabled="true"] {
-    cursor: not-allowed;
-  }
-
-  &.primaire {
-    background: $bouton-primaire-couleur-fond;
-    color: $bouton-primaire-couleur-texte;
-    border: 1px solid transparent;
-    border-radius: $bouton-arrondi;
-
-    &:hover {
-      background: $bouton-primaire-couleur-fond-survol;
-    }
-
-    &:active {
-      background: $bouton-primaire-couleur-fond-clique;
-    }
-
-    &:disabled,
-    &[aria-disabled="true"] {
-      background: #e5e5e5;
-      color: #929292;
-    }
-  }
-
-  &.secondaire {
-    color: $bouton-secondaire-tertiaire-couleur-texte;
-    background: white;
-    border: 1px solid $bouton-secondaire-couleur-bordure;
-    border-radius: $bouton-arrondi;
-
-    &:hover {
-      background: rgb(0, 0, 0, 4%);
-    }
-
-    &:active {
-      background: rgb(0, 0, 0, 8%);
-    }
-
-    &:disabled,
-    &[aria-disabled="true"] {
-      background: transparent;
-      color: #929292;
-    }
-  }
-
-  &.tertiaire,
-  &.tertiaire-sans-bordure {
-    color: $bouton-secondaire-tertiaire-couleur-texte;
-    background: white;
-    border-radius: $bouton-arrondi;
-
-    &:hover {
-      background: rgb(0, 0, 0, 4%);
-    }
-
-    &:active {
-      background: rgb(0, 0, 0, 8%);
-    }
-
-    &:disabled,
-    &[aria-disabled="true"] {
-      background: transparent;
-      color: #929292;
-    }
-  }
-
-  &.tertiaire {
-    border: 1px solid #ddd;
-  }
-
-  &.tertiaire-sans-bordure {
-    border: 1px solid transparent;
-  }
-}