@lab-anssi/ui-kit 1.23.2 → 1.25.0

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

@@ -1,21 +1,9 @@
-import { SvelteComponent } from "svelte";
 import type { CategoriesArticle, ResumeArticle } from "../../types";
-declare const __propDef: {
-    props: {
-        articles: ResumeArticle[];
-        categories: CategoriesArticle;
-        idCategorieChoisie?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ListeArticlesProps = typeof __propDef.props;
-export type ListeArticlesEvents = typeof __propDef.events;
-export type ListeArticlesSlots = typeof __propDef.slots;
-export default class ListeArticles extends SvelteComponent<ListeArticlesProps, ListeArticlesEvents, ListeArticlesSlots> {
+interface Props {
+    articles: ResumeArticle[];
+    categories: CategoriesArticle;
+    idCategorieChoisie?: string;
 }
-export {};
+declare const ListeArticles: import("svelte").Component<Props, {}, "idCategorieChoisie">;
+type ListeArticles = ReturnType<typeof ListeArticles>;
+export default ListeArticles;

package/dist/lab/blog/ListeDeroulante.svelte

@@ -1,6 +1,5 @@
-<script>import { srcAsset } from "../../assets/assets";
-export let valeur;
-export let options;
+<script lang="ts">import { srcAsset } from "../../assets/assets";
+let { valeur = $bindable(), options } = $props();
 </script>
 
 <div class="conteneur-liste-deroulante">
@@ -11,7 +10,7 @@ export let options;
     />
     <select bind:value={valeur}>
       {#each options as option, index (index)}
-        <option label={option.label} value={option.valeur} />
+        <option label={option.label} value={option.valeur}></option>
       {/each}
     </select>
   </div>

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

@@ -1,22 +1,10 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        valeur: string;
-        options: {
-            label: string;
-            valeur: unknown;
-        }[];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ListeDeroulanteProps = typeof __propDef.props;
-export type ListeDeroulanteEvents = typeof __propDef.events;
-export type ListeDeroulanteSlots = typeof __propDef.slots;
-export default class ListeDeroulante extends SvelteComponent<ListeDeroulanteProps, ListeDeroulanteEvents, ListeDeroulanteSlots> {
+interface Props {
+    valeur: string;
+    options: {
+        label: string;
+        valeur: unknown;
+    }[];
 }
-export {};
+declare const ListeDeroulante: import("svelte").Component<Props, {}, "valeur">;
+type ListeDeroulante = ReturnType<typeof ListeDeroulante>;
+export default ListeDeroulante;

package/dist/lab/blog/PageCrisp.svelte

@@ -8,12 +8,12 @@
   }}
 />
 
-<script>import SommaireMobile from "./SommaireMobile.svelte";
+<script lang="ts">import { run } from "svelte/legacy";
+import SommaireMobile from "./SommaireMobile.svelte";
 import { onDestroy, tick } from "svelte";
 import SommaireBureau from "./SommaireBureau.svelte";
-export let contenu;
-export let tableDesMatieres;
-let composant;
+let { contenu, tableDesMatieres } = $props();
+let composant = $state();
 let observateurDIntersection;
 const observeLesSections = () => {
   observateurDIntersection = new IntersectionObserver(
@@ -36,7 +36,9 @@ const observeLesSections = () => {
   const lesSections = composant.querySelectorAll("article .contenu section");
   lesSections.forEach((s) => observateurDIntersection.observe(s));
 };
-$: if (contenu) tick().then(observeLesSections);
+run(() => {
+  if (contenu) tick().then(observeLesSections);
+});
 const attendChargementImages = async () => {
   const images = composant.querySelectorAll("img");
   await Promise.all(
@@ -60,7 +62,9 @@ const scroll = (cible) => {
     });
   }
 };
-$: if (contenu) scroll(window.location.hash);
+run(() => {
+  if (contenu) scroll(window.location.hash);
+});
 const ancreOuverte = (evenement) => scroll(`#${evenement.detail}`);
 onDestroy(() => {
   const lesSections = composant.querySelectorAll("section");

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

@@ -1,20 +1,8 @@
-import { SvelteComponent } from "svelte";
 import type { TableDesMatieres } from "../../types";
-declare const __propDef: {
-    props: {
-        contenu: string;
-        tableDesMatieres: TableDesMatieres;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type PageCrispProps = typeof __propDef.props;
-export type PageCrispEvents = typeof __propDef.events;
-export type PageCrispSlots = typeof __propDef.slots;
-export default class PageCrisp extends SvelteComponent<PageCrispProps, PageCrispEvents, PageCrispSlots> {
+interface Props {
+    contenu: string;
+    tableDesMatieres: TableDesMatieres;
 }
-export {};
+declare const PageCrisp: import("svelte").Component<Props, {}, "">;
+type PageCrisp = ReturnType<typeof PageCrisp>;
+export default PageCrisp;

package/dist/lab/blog/SommaireBureau.svelte

@@ -1,5 +1,5 @@
-<script>import { createEventDispatcher } from "svelte";
-export let tableDesMatieres;
+<script lang="ts">import { createEventDispatcher } from "svelte";
+let { tableDesMatieres } = $props();
 const emets = createEventDispatcher();
 const ouvreEntree = (ancre) => {
   emets("ancreOuverte", ancre);
@@ -10,7 +10,7 @@ const ouvreEntree = (ancre) => {
   <ul>
     {#each tableDesMatieres as entree (entree.id)}
       <li>
-        <a href={`#${entree.id}`} on:click={() => ouvreEntree(entree.id)}>
+        <a href={`#${entree.id}`} onclick={() => ouvreEntree(entree.id)}>
           <!-- eslint-disable-next-line svelte/no-at-html-tags -->
           {@html entree.texte}
         </a>

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

@@ -1,21 +1,24 @@
-import { SvelteComponent } from "svelte";
 import type { TableDesMatieres } from "../../types";
-declare const __propDef: {
-    props: {
-        tableDesMatieres: TableDesMatieres;
-    };
-    events: {
-        ancreOuverte: CustomEvent<string>;
-    } & {
-        [evt: string]: CustomEvent<any>;
+interface Props {
+    tableDesMatieres: TableDesMatieres;
+}
+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;
     };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type SommaireBureauProps = typeof __propDef.props;
-export type SommaireBureauEvents = typeof __propDef.events;
-export type SommaireBureauSlots = typeof __propDef.slots;
-export default class SommaireBureau extends SvelteComponent<SommaireBureauProps, SommaireBureauEvents, SommaireBureauSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const SommaireBureau: $$__sveltets_2_IsomorphicComponent<Props, {
+    ancreOuverte: CustomEvent<string>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type SommaireBureau = InstanceType<typeof SommaireBureau>;
+export default SommaireBureau;

package/dist/lab/blog/SommaireMobile.svelte

@@ -1,8 +1,8 @@
-<script>import { createEventDispatcher } from "svelte";
+<script lang="ts">import { createEventDispatcher } from "svelte";
 import IconeMenuLateral from "./IconeMenuLateral.svelte";
 import IconeChevronBas from "./IconeChevronBas.svelte";
-export let tableDesMatieres;
-let detailsElement;
+let { tableDesMatieres } = $props();
+let detailsElement = $state();
 const emets = createEventDispatcher();
 const ouvreEntree = (ancre) => {
   detailsElement.open = false;
@@ -26,7 +26,7 @@ const ouvreEntree = (ancre) => {
     <ul>
       {#each tableDesMatieres as entree (entree.id)}
         <li>
-          <a href={`#${entree.id}`} on:click={() => ouvreEntree(entree.id)}>
+          <a href={`#${entree.id}`} onclick={() => ouvreEntree(entree.id)}>
             <!-- eslint-disable-next-line svelte/no-at-html-tags -->
             {@html entree.texte}</a
           >
@@ -50,7 +50,7 @@ const ouvreEntree = (ancre) => {
     display: none;
   }
 }
-.sommaire-replie:has(details[open]) {
+.sommaire-replie:has(:global(details[open])) {
   position: fixed;
   top: 0;
   height: 100vh;

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

@@ -1,21 +1,24 @@
-import { SvelteComponent } from "svelte";
 import type { TableDesMatieres } from "../../types";
-declare const __propDef: {
-    props: {
-        tableDesMatieres: TableDesMatieres;
-    };
-    events: {
-        ancreOuverte: CustomEvent<string>;
-    } & {
-        [evt: string]: CustomEvent<any>;
+interface Props {
+    tableDesMatieres: TableDesMatieres;
+}
+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;
     };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type SommaireMobileProps = typeof __propDef.props;
-export type SommaireMobileEvents = typeof __propDef.events;
-export type SommaireMobileSlots = typeof __propDef.slots;
-export default class SommaireMobile extends SvelteComponent<SommaireMobileProps, SommaireMobileEvents, SommaireMobileSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const SommaireMobile: $$__sveltets_2_IsomorphicComponent<Props, {
+    ancreOuverte: CustomEvent<string>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type SommaireMobile = InstanceType<typeof SommaireMobile>;
+export default SommaireMobile;

package/dist/lab/icones/Fleche.svelte

@@ -1,4 +1,4 @@
-<script>export let direction = "gauche";
+<script lang="ts">let { direction = "gauche" } = $props();
 </script>
 
 <svg

package/dist/lab/icones/Fleche.svelte.d.ts

@@ -1,18 +1,6 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        direction?: "gauche" | "droite";
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type FlecheProps = typeof __propDef.props;
-export type FlecheEvents = typeof __propDef.events;
-export type FlecheSlots = typeof __propDef.slots;
-export default class Fleche extends SvelteComponent<FlecheProps, FlecheEvents, FlecheSlots> {
+interface Props {
+    direction?: "gauche" | "droite";
 }
-export {};
+declare const Fleche: import("svelte").Component<Props, {}, "">;
+type Fleche = ReturnType<typeof Fleche>;
+export default Fleche;

package/dist/lab/icones/LienExterne.svelte

@@ -1,4 +1,4 @@
-<script>export let couleur = void 0;
+<script lang="ts">let { couleur = void 0 } = $props();
 </script>
 
 <svg

package/dist/lab/icones/LienExterne.svelte.d.ts

@@ -1,18 +1,6 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        couleur?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type LienExterneProps = typeof __propDef.props;
-export type LienExterneEvents = typeof __propDef.events;
-export type LienExterneSlots = typeof __propDef.slots;
-export default class LienExterne extends SvelteComponent<LienExterneProps, LienExterneEvents, LienExterneSlots> {
+interface Props {
+    couleur?: string | undefined;
 }
-export {};
+declare const LienExterne: import("svelte").Component<Props, {}, "">;
+type LienExterne = ReturnType<typeof LienExterne>;
+export default LienExterne;

package/dist/lab/vitrines-produits/briques/Brique.svelte

@@ -1,6 +1,9 @@
-<script>export let variation = "primaire";
-export let sansMargeHaute = false;
-export let sansMargeLaterale = false;
+<script lang="ts">let {
+  variation = "primaire",
+  sansMargeHaute = false,
+  sansMargeLaterale = false,
+  children
+} = $props();
 </script>
 
 <section
@@ -9,7 +12,7 @@ export let sansMargeLaterale = false;
   class:sans-marge-laterale={sansMargeLaterale}
 >
   <div class="contenu-brique">
-    <slot />
+    {@render children?.()}
   </div>
 </section>
 

package/dist/lab/vitrines-produits/briques/Brique.svelte.d.ts

@@ -1,22 +1,9 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        variation?: "primaire" | "transparent" | "secondaire";
-        sansMargeHaute?: boolean;
-        sansMargeLaterale?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type BriqueProps = typeof __propDef.props;
-export type BriqueEvents = typeof __propDef.events;
-export type BriqueSlots = typeof __propDef.slots;
-export default class Brique extends SvelteComponent<BriqueProps, BriqueEvents, BriqueSlots> {
+interface Props {
+    variation?: "primaire" | "transparent" | "secondaire";
+    sansMargeHaute?: boolean;
+    sansMargeLaterale?: boolean;
+    children?: import("svelte").Snippet;
 }
-export {};
+declare const Brique: import("svelte").Component<Props, {}, "">;
+type Brique = ReturnType<typeof Brique>;
+export default Brique;

package/dist/lab/vitrines-produits/briques/BriqueContenuADeuxColonnes.svelte

@@ -11,12 +11,14 @@
   }}
 />
 
-<script>import Brique from "./Brique.svelte";
-export let titre;
-export let paragraphe;
-export let action = void 0;
-export let ordre = "texte-gauche";
-export let illustration;
+<script lang="ts">import Brique from "./Brique.svelte";
+let {
+  titre,
+  paragraphe,
+  action = void 0,
+  ordre = "texte-gauche",
+  illustration
+} = $props();
 </script>
 
 <Brique variation="primaire">
@@ -81,9 +83,6 @@ export let illustration;
   line-height: 1.5rem;
   margin: 0;
 }
-.grille-contenu .contenu .action {
-  margin-top: 32px;
-}
 .grille-contenu .contenu .action a[role=button] {
   display: flex;
   justify-content: center;
@@ -117,6 +116,9 @@ export let illustration;
     width: fit-content;
   }
 }
+.grille-contenu .contenu .action {
+  margin-top: 32px;
+}
 .grille-contenu .illustration {
   grid-area: illustration;
 }

package/dist/lab/vitrines-produits/briques/BriqueContenuADeuxColonnes.svelte.d.ts

@@ -1,23 +1,11 @@
-import { SvelteComponent } from "svelte";
 import type { Action, Image } from "../../../types";
-declare const __propDef: {
-    props: {
-        titre: string;
-        paragraphe: string;
-        action?: Action | undefined;
-        ordre?: "texte-gauche" | "texte-droite";
-        illustration: Image;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type BriqueContenuADeuxColonnesProps = typeof __propDef.props;
-export type BriqueContenuADeuxColonnesEvents = typeof __propDef.events;
-export type BriqueContenuADeuxColonnesSlots = typeof __propDef.slots;
-export default class BriqueContenuADeuxColonnes extends SvelteComponent<BriqueContenuADeuxColonnesProps, BriqueContenuADeuxColonnesEvents, BriqueContenuADeuxColonnesSlots> {
+interface Props {
+    titre: string;
+    paragraphe: string;
+    action?: Action | undefined;
+    ordre?: "texte-gauche" | "texte-droite";
+    illustration: Image;
 }
-export {};
+declare const BriqueContenuADeuxColonnes: import("svelte").Component<Props, {}, "">;
+type BriqueContenuADeuxColonnes = ReturnType<typeof BriqueContenuADeuxColonnes>;
+export default BriqueContenuADeuxColonnes;

package/dist/lab/vitrines-produits/briques/BriqueHero.svelte

@@ -13,15 +13,17 @@
   }}
 />
 
-<script>import Brique from "./Brique.svelte";
+<script lang="ts">import Brique from "./Brique.svelte";
 import LienExterne from "../../icones/LienExterne.svelte";
-export let titre;
-export let soustitre;
-export let illustration;
-export let badge = false;
-export let actiongauche;
-export let actiondroite;
-export let partenaires = [];
+let {
+  titre,
+  soustitre,
+  illustration,
+  badge = false,
+  actiongauche,
+  actiondroite,
+  partenaires = []
+} = $props();
 </script>
 
 <Brique>
@@ -88,13 +90,15 @@ export let partenaires = [];
 @media (min-width: 932px) {
   .hero {
     grid-template-areas: "contenu image" "partenaires image";
+  }
+  .hero:has(:global(.sans-partenaires)) {
+    grid-template-areas: "contenu image" "contenu image";
+  }
+  .hero {
     grid-template-columns: 1fr 1fr;
     column-gap: 24px;
     row-gap: 0px;
   }
-  .hero:has(.sans-partenaires) {
-    grid-template-areas: "contenu image" "contenu image";
-  }
 }
 .hero .contenu {
   grid-area: contenu;

package/dist/lab/vitrines-produits/briques/BriqueHero.svelte.d.ts

@@ -1,25 +1,13 @@
-import { SvelteComponent } from "svelte";
 import type { Action, Image } from "../../../types";
-declare const __propDef: {
-    props: {
-        titre: string;
-        soustitre: string;
-        illustration: Image;
-        badge?: boolean;
-        actiongauche: Action;
-        actiondroite: Action;
-        partenaires?: Image[];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type BriqueHeroProps = typeof __propDef.props;
-export type BriqueHeroEvents = typeof __propDef.events;
-export type BriqueHeroSlots = typeof __propDef.slots;
-export default class BriqueHero extends SvelteComponent<BriqueHeroProps, BriqueHeroEvents, BriqueHeroSlots> {
+interface Props {
+    titre: string;
+    soustitre: string;
+    illustration: Image;
+    badge?: boolean;
+    actiongauche: Action;
+    actiondroite: Action;
+    partenaires?: Image[];
 }
-export {};
+declare const BriqueHero: import("svelte").Component<Props, {}, "">;
+type BriqueHero = ReturnType<typeof BriqueHero>;
+export default BriqueHero;

package/dist/lab/vitrines-produits/briques/BriqueTitreMultimedia.svelte

@@ -8,10 +8,9 @@
   }}
 />
 
-<script>import Brique from "./Brique.svelte";
+<script lang="ts">import Brique from "./Brique.svelte";
 import LecteurVideo from "./LecteurVideo.svelte";
-export let titre;
-export let multimedia;
+let { titre, multimedia } = $props();
 </script>
 
 <Brique variation="transparent">

package/dist/lab/vitrines-produits/briques/BriqueTitreMultimedia.svelte.d.ts

@@ -1,20 +1,8 @@
-import { SvelteComponent } from "svelte";
 import type { Video } from "../../../types";
-declare const __propDef: {
-    props: {
-        titre: string;
-        multimedia: Video;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type BriqueTitreMultimediaProps = typeof __propDef.props;
-export type BriqueTitreMultimediaEvents = typeof __propDef.events;
-export type BriqueTitreMultimediaSlots = typeof __propDef.slots;
-export default class BriqueTitreMultimedia extends SvelteComponent<BriqueTitreMultimediaProps, BriqueTitreMultimediaEvents, BriqueTitreMultimediaSlots> {
+interface Props {
+    titre: string;
+    multimedia: Video;
 }
-export {};
+declare const BriqueTitreMultimedia: import("svelte").Component<Props, {}, "">;
+type BriqueTitreMultimedia = ReturnType<typeof BriqueTitreMultimedia>;
+export default BriqueTitreMultimedia;

package/dist/lab/vitrines-produits/briques/CarrouselTuiles/CarrouselTuiles.svelte

@@ -7,12 +7,12 @@
   }}
 />
 
-<script>import Brique from "../Brique.svelte";
+<script lang="ts">import Brique from "../Brique.svelte";
 import Tuile from "../Tuile.svelte";
 import IconeFlecheGauche from "./IconeFlecheGauche.svelte";
 import IconeFlecheDroite from "./IconeFlecheDroite.svelte";
-export let tuiles = [];
-let elementCarrousel;
+let { tuiles = [] } = $props();
+let elementCarrousel = $state();
 const versDirection = (direction) => {
   if (elementCarrousel) {
     const cardWidth = elementCarrousel.firstElementChild?.clientWidth || 0;
@@ -39,11 +39,11 @@ const suivant = () => versDirection(1);
       {/each}
     </div>
     <div class="conteneur-actions">
-      <button class="precedent" on:click={precedent}>
+      <button class="precedent" onclick={precedent}>
         <span class="icone"><IconeFlecheGauche /></span>
         Précédent
       </button>
-      <button class="suivant" on:click={suivant}>
+      <button class="suivant" onclick={suivant}>
         Suivant
         <span class="icone"><IconeFlecheDroite /></span>
       </button>

package/dist/lab/vitrines-produits/briques/CarrouselTuiles/CarrouselTuiles.svelte.d.ts

@@ -1,19 +1,7 @@
-import { SvelteComponent } from "svelte";
-import type { Tuiles } from "../../../../types.js";
-declare const __propDef: {
-    props: {
-        tuiles?: Tuiles;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type CarrouselTuilesProps = typeof __propDef.props;
-export type CarrouselTuilesEvents = typeof __propDef.events;
-export type CarrouselTuilesSlots = typeof __propDef.slots;
-export default class CarrouselTuiles extends SvelteComponent<CarrouselTuilesProps, CarrouselTuilesEvents, CarrouselTuilesSlots> {
+import type { Tuiles } from "../../../../types";
+interface Props {
+    tuiles?: Tuiles;
 }
-export {};
+declare const CarrouselTuiles: import("svelte").Component<Props, {}, "">;
+type CarrouselTuiles = ReturnType<typeof CarrouselTuiles>;
+export default CarrouselTuiles;