@lab-anssi/ui-kit 1.23.2 → 1.25.0

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

@@ -1,19 +1,7 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        nom: string;
-        taille?: "sm" | "md" | "lg" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type IconeProps = typeof __propDef.props;
-export type IconeEvents = typeof __propDef.events;
-export type IconeSlots = typeof __propDef.slots;
-export default class Icone extends SvelteComponent<IconeProps, IconeEvents, IconeSlots> {
+interface Props {
+    nom: string;
+    taille?: "sm" | "md" | "lg" | undefined;
 }
-export {};
+declare const Icone: import("svelte").Component<Props, {}, "">;
+type Icone = ReturnType<typeof Icone>;
+export default Icone;

package/dist/lab/Lien.svelte

@@ -11,24 +11,29 @@
       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>import Icone from "./Icone.svelte";
-export let titre;
-export let href;
-export let variante;
-export let taille;
-export let icone = void 0;
-export let apparence = "lien";
-export let cible = void 0;
-export let positionIcone = "sans";
-export let actif = true;
+<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 : ""}
@@ -62,7 +67,6 @@ export let actif = true;
   text-decoration: none;
   position: relative;
 }
-
 .lien-texte:before {
   content: "";
   position: absolute;
@@ -72,7 +76,6 @@ export let actif = true;
   height: 1px;
   background-color: currentColor;
 }
-
 .lien-texte:hover:before {
   bottom: calc(0.2em - 1px);
   height: 2px;
@@ -88,22 +91,18 @@ export let actif = true;
   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;
@@ -113,16 +112,13 @@ export let actif = true;
   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;
@@ -139,113 +135,109 @@ export let actif = true;
   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,26 +1,15 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    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;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type LienProps = typeof __propDef.props;
-export type LienEvents = typeof __propDef.events;
-export type LienSlots = typeof __propDef.slots;
-export default class Lien extends SvelteComponent<LienProps, LienEvents, LienSlots> {
+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;
 }
-export {};
+declare const Lien: import("svelte").Component<Props, {}, "">;
+type Lien = ReturnType<typeof Lien>;
+export default Lien;

package/dist/lab/ResumePssi.svelte

@@ -1,6 +1,6 @@
 <svelte:options customElement="lab-anssi-resume-pssi" />
 
-<script>export let nomService;
+<script lang="ts">let { nomService } = $props();
 </script>
 
 <p>

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

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

package/dist/lab/Tag.svelte

@@ -12,13 +12,15 @@
   }}
 />
 
-<script>export let label;
-export let couleurTexte;
-export let couleurFond;
-export let taille = "sm";
-export let type = "defaut";
-export let presse = false;
-$: selectionne = presse;
+<script lang="ts">let {
+  label,
+  couleurTexte,
+  couleurFond,
+  taille = "sm",
+  type = "defaut",
+  presse = false
+} = $props();
+let selectionne = $derived(presse);
 const bascule = () => {
   selectionne = !selectionne;
 };
@@ -34,7 +36,7 @@ const bascule = () => {
     aria-pressed={selectionne}
     style:background={couleurFond}
     style:color={couleurTexte}
-    on:click={bascule}
+    onclick={bascule}
   >
     {label}
   </button>
@@ -77,6 +79,8 @@ button.tag {
   display: inline-flex;
   position: relative;
   overflow: visible;
+  text-wrap: auto;
+  text-align: left;
   cursor: pointer;
 }
 button.tag:hover {

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

@@ -1,23 +1,11 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        label: string;
-        couleurTexte: string | undefined;
-        couleurFond: string | undefined;
-        taille?: "sm" | "md";
-        type?: "defaut" | "selectionnable";
-        presse?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type TagProps = typeof __propDef.props;
-export type TagEvents = typeof __propDef.events;
-export type TagSlots = typeof __propDef.slots;
-export default class Tag extends SvelteComponent<TagProps, TagEvents, TagSlots> {
+interface Props {
+    label: string;
+    couleurTexte: string | undefined;
+    couleurFond: string | undefined;
+    taille?: "sm" | "md";
+    type?: "defaut" | "selectionnable";
+    presse?: boolean;
 }
-export {};
+declare const Tag: import("svelte").Component<Props, {}, "">;
+type Tag = ReturnType<typeof Tag>;
+export default Tag;

package/dist/lab/apparence-bouton.scss

@@ -10,6 +10,11 @@
   font-style: normal;
   font-weight: 500;
 
+  &.largeur-maximale {
+    width: 100%;
+    box-sizing: border-box;
+  }
+
   &:focus-visible {
     outline: 2px solid #0a76f6;
     outline-offset: 2px;
@@ -95,6 +100,27 @@
     }
   }
 
+  &.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;

package/dist/lab/blog/BandeauTitre.svelte

@@ -10,13 +10,10 @@
   }}
 />
 
-<script>import { estLien } from "../../types.js";
-import Tag from "../Tag.svelte";
-export let titre;
-export let description = "";
-export let filAriane = [];
-export let infosTag = null;
-let filArianeVisible = window.matchMedia("(min-width: 576px)").matches;
+<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">
@@ -24,7 +21,7 @@ let filArianeVisible = window.matchMedia("(min-width: 576px)").matches;
     {#if filAriane.length}
       <div class="fil-ariane">
         {#if !filArianeVisible}
-          <button on:click={() => (filArianeVisible = true)}>Voir le fil d'Ariane</button>
+          <button onclick={() => (filArianeVisible = true)}>Voir le fil d'Ariane</button>
         {:else}
           {#each filAriane as noeud, index (index)}
             {#if estLien(noeud)}

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

@@ -1,22 +1,10 @@
-import { SvelteComponent } from "svelte";
-import { type NoeudFilAriane, type InfosTag } from "../../types.js";
-declare const __propDef: {
-    props: {
-        titre: string;
-        description?: string;
-        filAriane?: NoeudFilAriane[];
-        infosTag?: InfosTag | null;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type BandeauTitreProps = typeof __propDef.props;
-export type BandeauTitreEvents = typeof __propDef.events;
-export type BandeauTitreSlots = typeof __propDef.slots;
-export default class BandeauTitre extends SvelteComponent<BandeauTitreProps, BandeauTitreEvents, BandeauTitreSlots> {
+import type { NoeudFilAriane, InfosTag } from "../../types";
+interface Props {
+    titre: string;
+    description?: string;
+    filAriane?: NoeudFilAriane[];
+    infosTag?: InfosTag | null;
 }
-export {};
+declare const BandeauTitre: import("svelte").Component<Props, {}, "">;
+type BandeauTitre = ReturnType<typeof BandeauTitre>;
+export default BandeauTitre;

package/dist/lab/blog/CarteArticle.svelte

@@ -1,7 +1,6 @@
-<script>import Tag from "../Tag.svelte";
+<script lang="ts">import Tag from "../Tag.svelte";
 import Fleche from "../icones/Fleche.svelte";
-export let article;
-export let categorie;
+let { article, categorie } = $props();
 </script>
 
 <a class="carte-article" href={article.href}>

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

@@ -1,20 +1,8 @@
-import { SvelteComponent } from "svelte";
 import type { ResumeArticle, InfosTag } from "../../types";
-declare const __propDef: {
-    props: {
-        article: ResumeArticle;
-        categorie: InfosTag;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type CarteArticleProps = typeof __propDef.props;
-export type CarteArticleEvents = typeof __propDef.events;
-export type CarteArticleSlots = typeof __propDef.slots;
-export default class CarteArticle extends SvelteComponent<CarteArticleProps, CarteArticleEvents, CarteArticleSlots> {
+interface Props {
+    article: ResumeArticle;
+    categorie: InfosTag;
 }
-export {};
+declare const CarteArticle: import("svelte").Component<Props, {}, "">;
+type CarteArticle = ReturnType<typeof CarteArticle>;
+export default CarteArticle;

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

@@ -1,25 +1,26 @@
-/** @typedef {typeof __propDef.props}  IconeChevronBasProps */
-/** @typedef {typeof __propDef.events}  IconeChevronBasEvents */
-/** @typedef {typeof __propDef.slots}  IconeChevronBasSlots */
-export default class IconeChevronBas extends SvelteComponent<{
+export default IconeChevronBas;
+type IconeChevronBas = SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type IconeChevronBasProps = typeof __propDef.props;
-export type IconeChevronBasEvents = typeof __propDef.events;
-export type IconeChevronBasSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+}, {}> & {
+    $$bindings?: string | undefined;
 };
-export {};
+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.d.ts

@@ -1,25 +1,26 @@
-/** @typedef {typeof __propDef.props}  IconeMenuLateralProps */
-/** @typedef {typeof __propDef.events}  IconeMenuLateralEvents */
-/** @typedef {typeof __propDef.slots}  IconeMenuLateralSlots */
-export default class IconeMenuLateral extends SvelteComponent<{
+export default IconeMenuLateral;
+type IconeMenuLateral = SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type IconeMenuLateralProps = typeof __propDef.props;
-export type IconeMenuLateralEvents = typeof __propDef.events;
-export type IconeMenuLateralSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+}, {}> & {
+    $$bindings?: string | undefined;
 };
-export {};
+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

@@ -9,11 +9,9 @@
   }}
 />
 
-<script>import CarteArticle from "./CarteArticle.svelte";
+<script lang="ts">import CarteArticle from "./CarteArticle.svelte";
 import ListeDeroulante from "./ListeDeroulante.svelte";
-export let articles;
-export let categories;
-export let idCategorieChoisie = "tous";
+let { articles, categories, idCategorieChoisie = $bindable("tous") } = $props();
 const optionsFiltrage = [
   { label: "Tous les articles", valeur: "tous" },
   ...Object.entries(categories).map(([idCategorie, donnees]) => ({
@@ -21,7 +19,9 @@ const optionsFiltrage = [
     valeur: idCategorie
   }))
 ];
-$: articlesVisibles = idCategorieChoisie === "tous" ? articles : articles.filter((a) => a.idCategorie === idCategorieChoisie);
+let articlesVisibles = $derived(
+  idCategorieChoisie === "tous" ? articles : articles.filter((a) => a.idCategorie === idCategorieChoisie)
+);
 </script>
 
 <div class="liste-articles">