@lab-anssi/ui-kit 1.25.0 → 1.25.2

package/dist/lab/blog/BandeauTitre.svelte

@@ -1,144 +0,0 @@
-<svelte:options
-  customElement={{
-    tag: "lab-anssi-bandeau-titre",
-    props: {
-      titre: { reflect: false, type: "String", attribute: "titre" },
-      description: { reflect: false, type: "String", attribute: "description" },
-      filAriane: { reflect: false, type: "Array", attribute: "fil-ariane" },
-      tag: { reflect: false, type: "Object", attribute: "tag" },
-    },
-  }}
-/>
-
-<script lang="ts">import Tag from "../Tag.svelte";
-const estLien = (noeud) => noeud.href !== void 0;
-let { titre, description = "", filAriane = [], infosTag = null } = $props();
-let filArianeVisible = $state(window.matchMedia("(min-width: 576px)").matches);
-</script>
-
-<div class="conteneur-bandeau-entete">
-  <div class="contenu-bandeau-entete">
-    {#if filAriane.length}
-      <div class="fil-ariane">
-        {#if !filArianeVisible}
-          <button onclick={() => (filArianeVisible = true)}>Voir le fil d'Ariane</button>
-        {:else}
-          {#each filAriane as noeud, index (index)}
-            {#if estLien(noeud)}
-              <a href={noeud.href}>{noeud.label}</a>
-            {:else}
-              <span>{noeud.label}</span>
-            {/if}
-          {/each}
-        {/if}
-      </div>
-    {/if}
-    <div class="conteneur-texte">
-      {#if infosTag}
-        <div class="conteneur-tag">
-          <Tag
-            couleurFond={infosTag.couleurFond}
-            couleurTexte={infosTag.couleurTexte}
-            label={infosTag.label}
-          />
-        </div>
-      {/if}
-      <div class="conteneur-corps">
-        <h1>{titre}</h1>
-        {#if description}
-          <span>{description}</span>
-        {/if}
-      </div>
-    </div>
-  </div>
-</div>
-
-<style>.conteneur-bandeau-entete {
-  background: var(--bandeau-titre-background);
-}
-.conteneur-bandeau-entete .contenu-bandeau-entete {
-  padding: 16px;
-  color: white;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  font-family: Marianne;
-  max-width: 1200px;
-  margin: 0 auto;
-  text-align: left;
-}
-.conteneur-bandeau-entete .contenu-bandeau-entete .conteneur-texte {
-  display: flex;
-  padding: 8px 0 12px 0;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 4px;
-}
-.conteneur-bandeau-entete .contenu-bandeau-entete .conteneur-texte .conteneur-tag {
-  padding-top: 8px;
-}
-.conteneur-bandeau-entete .contenu-bandeau-entete .conteneur-texte .conteneur-corps {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 8px;
-}
-.conteneur-bandeau-entete .contenu-bandeau-entete .conteneur-texte .conteneur-corps h1 {
-  font-family: Marianne;
-  font-size: 2rem;
-  font-weight: 700;
-  line-height: 2.5rem;
-  margin: 0;
-}
-@media (min-width: 576px) {
-  .conteneur-bandeau-entete .contenu-bandeau-entete .conteneur-texte .conteneur-corps h1 {
-    font-size: 2.5rem;
-    line-height: 3rem;
-  }
-}
-.conteneur-bandeau-entete .contenu-bandeau-entete .conteneur-texte .conteneur-corps span {
-  font-family: Marianne;
-  font-size: 1.125rem;
-  font-weight: 400;
-  line-height: 1.75rem;
-  margin: 0;
-}
-.conteneur-bandeau-entete .contenu-bandeau-entete .fil-ariane {
-  display: flex;
-  flex-direction: row;
-  gap: 4px;
-  flex-wrap: wrap;
-}
-.conteneur-bandeau-entete .contenu-bandeau-entete .fil-ariane a,
-.conteneur-bandeau-entete .contenu-bandeau-entete .fil-ariane span,
-.conteneur-bandeau-entete .contenu-bandeau-entete .fil-ariane button {
-  color: white;
-  font-family: Marianne;
-  font-size: 0.75rem;
-  font-weight: 400;
-  line-height: 1.25rem;
-}
-.conteneur-bandeau-entete .contenu-bandeau-entete .fil-ariane button {
-  border: none;
-  background: none;
-  margin: 0;
-  padding: 0;
-}
-.conteneur-bandeau-entete .contenu-bandeau-entete .fil-ariane button,
-.conteneur-bandeau-entete .contenu-bandeau-entete .fil-ariane a {
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-.conteneur-bandeau-entete .contenu-bandeau-entete .fil-ariane a {
-  display: flex;
-  flex-direction: row;
-  gap: 4px;
-  align-items: center;
-  white-space: nowrap;
-}
-.conteneur-bandeau-entete .contenu-bandeau-entete .fil-ariane a:after {
-  content: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/fleche-droite-blanche.svg");
-  width: 16px;
-  height: 16px;
-  display: flex;
-}</style>

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

@@ -1,10 +0,0 @@
-import type { NoeudFilAriane, InfosTag } from "../../types";
-interface Props {
-    titre: string;
-    description?: string;
-    filAriane?: NoeudFilAriane[];
-    infosTag?: InfosTag | null;
-}
-declare const BandeauTitre: import("svelte").Component<Props, {}, "">;
-type BandeauTitre = ReturnType<typeof BandeauTitre>;
-export default BandeauTitre;

package/dist/lab/blog/CarteArticle.svelte

@@ -1,70 +0,0 @@
-<script lang="ts">import Tag from "../Tag.svelte";
-import Fleche from "../icones/Fleche.svelte";
-let { article, categorie } = $props();
-</script>
-
-<a class="carte-article" href={article.href}>
-  <div class="conteneur-texte">
-    <Tag
-      couleurFond={categorie.couleurFond}
-      couleurTexte={categorie.couleurTexte}
-      label={categorie.label}
-    />
-    <p>{article.titre}</p>
-  </div>
-  <div class="conteneur-fleche">
-    <Fleche direction="droite" />
-  </div>
-</a>
-
-<style>.carte-article {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  border-radius: 8px;
-  border: 1px solid #dddddd;
-  background: white;
-  padding: 24px 24px 52px 24px;
-  gap: 12px;
-  font-family: Marianne;
-  text-decoration: none;
-  position: relative;
-}
-.carte-article:visited {
-  color: unset;
-}
-.carte-article:hover {
-  background: #f6f6f6;
-}
-.carte-article:active {
-  background: #ededed;
-}
-.carte-article:focus-visible {
-  outline: 2px solid var(--couleur-focus);
-  outline-offset: 2px;
-}
-.carte-article .conteneur-texte {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  max-width: 100%;
-}
-.carte-article .conteneur-texte p {
-  margin: 0;
-  color: var(--liste-articles-couleur-texte);
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 1.5rem;
-}
-.carte-article .conteneur-fleche {
-  position: absolute;
-  bottom: 24px;
-  right: 24px;
-  width: 16px;
-  height: 16px;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}</style>

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

@@ -1,8 +0,0 @@
-import type { ResumeArticle, InfosTag } from "../../types";
-interface Props {
-    article: ResumeArticle;
-    categorie: InfosTag;
-}
-declare const CarteArticle: import("svelte").Component<Props, {}, "">;
-type CarteArticle = ReturnType<typeof CarteArticle>;
-export default CarteArticle;

package/dist/lab/blog/IconeChevronBas.svelte

@@ -1,22 +0,0 @@
-<svg
-  width="16"
-  height="16"
-  viewBox="0 0 16 16"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
-  class="chevron"
->
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M7.99999 8.78096L11.3 5.48096L12.2427 6.42362L7.99999 10.6663L3.75732 6.42362L4.69999 5.48096L7.99999 8.78096Z"
-    fill="black"
-  />
-</svg>
-
-<style>svg {
-  flex-shrink: 0;
-}
-svg path {
-  fill: var(--sommaire-actif-couleur);
-}</style>

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

@@ -1,26 +0,0 @@
-export default IconeChevronBas;
-type IconeChevronBas = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const IconeChevronBas: $$__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/lab/blog/IconeMenuLateral.svelte

@@ -1,15 +0,0 @@
-<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="M2 2.66626H14V3.99959H2V2.66626ZM2 7.33293H10V8.66626H2V7.33293ZM2 11.9996H14V13.3329H2V11.9996Z"
-    fill="black"
-  />
-</svg>
-
-<style>svg {
-  flex-shrink: 0;
-}
-svg path {
-  fill: var(--sommaire-actif-couleur);
-}</style>

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

@@ -1,26 +0,0 @@
-export default IconeMenuLateral;
-type IconeMenuLateral = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const IconeMenuLateral: $$__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/lab/blog/ListeArticles.svelte

@@ -1,65 +0,0 @@
-<svelte:options
-  customElement={{
-    tag: "lab-anssi-liste-articles",
-    props: {
-      articles: { reflect: false, type: "Array", attribute: "articles" },
-      categories: { reflect: false, type: "Object", attribute: "categories" },
-      idCategorieChoisie: { reflect: false, type: "String", attribute: "id-categorie-choisie" },
-    },
-  }}
-/>
-
-<script lang="ts">import CarteArticle from "./CarteArticle.svelte";
-import ListeDeroulante from "./ListeDeroulante.svelte";
-let { articles, categories, idCategorieChoisie = $bindable("tous") } = $props();
-const optionsFiltrage = [
-  { label: "Tous les articles", valeur: "tous" },
-  ...Object.entries(categories).map(([idCategorie, donnees]) => ({
-    label: donnees.label,
-    valeur: idCategorie
-  }))
-];
-let articlesVisibles = $derived(
-  idCategorieChoisie === "tous" ? articles : articles.filter((a) => a.idCategorie === idCategorieChoisie)
-);
-</script>
-
-<div class="liste-articles">
-  <ListeDeroulante bind:valeur={idCategorieChoisie} options={optionsFiltrage} />
-  <h2>
-    {idCategorieChoisie === "tous" ? "Tous les articles" : categories[idCategorieChoisie].label}
-  </h2>
-  <div class="conteneur-articles">
-    {#each articlesVisibles as article, index (index)}
-      <CarteArticle {article} categorie={categories[article.idCategorie]} />
-    {/each}
-  </div>
-</div>
-
-<style>.liste-articles {
-  padding: 48px 16px;
-  max-width: 1200px;
-  margin: 0 auto;
-  font-family: Marianne;
-  display: flex;
-  flex-direction: column;
-  gap: 32px;
-}
-@media (min-width: 932px) {
-  .liste-articles {
-    padding: 48px 24px;
-  }
-}
-.liste-articles h2 {
-  margin: 0;
-  color: #161616;
-  font-size: 1.75rem;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 2.25rem;
-}
-.liste-articles .conteneur-articles {
-  gap: 16px;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
-}</style>

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

@@ -1,9 +0,0 @@
-import type { CategoriesArticle, ResumeArticle } from "../../types";
-interface Props {
-    articles: ResumeArticle[];
-    categories: CategoriesArticle;
-    idCategorieChoisie?: string;
-}
-declare const ListeArticles: import("svelte").Component<Props, {}, "idCategorieChoisie">;
-type ListeArticles = ReturnType<typeof ListeArticles>;
-export default ListeArticles;

package/dist/lab/blog/ListeDeroulante.svelte

@@ -1,57 +0,0 @@
-<script lang="ts">import { srcAsset } from "../../assets/assets";
-let { valeur = $bindable(), options } = $props();
-</script>
-
-<div class="conteneur-liste-deroulante">
-  <div class="conteneur-select">
-    <img
-      src={srcAsset("/icones/fleche-basse-noir.svg")}
-      alt="Icône de flêche de la liste déroulante"
-    />
-    <select bind:value={valeur}>
-      {#each options as option, index (index)}
-        <option label={option.label} value={option.valeur}></option>
-      {/each}
-    </select>
-  </div>
-</div>
-
-<style>.conteneur-select {
-  position: relative;
-  width: fit-content;
-  max-width: 100%;
-}
-.conteneur-select img {
-  position: absolute;
-  right: 12px;
-  top: 12px;
-  pointer-events: none;
-}
-.conteneur-select select {
-  appearance: none;
-  padding: 8px 38px 8px 16px;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
-  border: none;
-  box-shadow: inset 0 -2px 0 0 #3a3a3a;
-  cursor: pointer;
-  color: #3a3a3a;
-  font-family: Marianne;
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1.5rem;
-  background: #eeeeee;
-  max-width: 100%;
-}
-.conteneur-select select:hover {
-  background: #f6f6f6;
-}
-.conteneur-select select:focus-visible {
-  outline: 2px solid var(--couleur-focus);
-  outline-offset: 2px;
-}
-.conteneur-select select option {
-  font-size: 1rem;
-  line-height: 1.5rem;
-}</style>

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

@@ -1,10 +0,0 @@
-interface Props {
-    valeur: string;
-    options: {
-        label: string;
-        valeur: unknown;
-    }[];
-}
-declare const ListeDeroulante: import("svelte").Component<Props, {}, "valeur">;
-type ListeDeroulante = ReturnType<typeof ListeDeroulante>;
-export default ListeDeroulante;